111seek/blogger-portfolio

Portfolio de Personnalité de Blogueur (HTML Single-File pour Entretien)

Le livrable est un seul fichier index.html : toutes les images sont encodées en base64, il s'ouvre en double-clic et peut être envoyé directement par WeChat ou email au recruteur. La structure est fixée en sept sections, reliées par une « chronologie de vie » ; le texte ne met en avant que les points forts, chaque chiffre doit correspondre à la page du compte.

Quand l'utiliser

• L'utilisateur souhaite transformer son compte de blogueur en dossier de candidature (postes : nouveaux médias / marketing de contenu / relations publiques de marque)
• L'utilisateur souhaite créer la même page pour un autre blogueur (changer la personnalité, les données, sans réécrire le design)
• L'utilisateur possède déjà une ancienne version du portfolio et doit modifier les couleurs, la structure, ou ajouter un bulletin de notes

À quoi ressemble le livrable

portfolio/
├── index.html          ← Livrable unique
├── data.json           ← Source de données (notes, trimestres, marques, identité)
└── assets/             ← Image de couverture + avatar (intégrés lors de la construction)

Les sept sections (le thème de numérotation peut être changé, voir references/theming.md) :

Section	Contenu	Exigences clés
12:00 Ouverture	Titre + introduction + 5 barres de données	Une phrase pour résumer « ce que j'ai accompli »
12:15 Œuvres	Détail de l'œuvre TOP1 + TOP2-5 affichées en permanence + TOP6-9 repliées	La couverture doit être une photo originale où l'utilisateur apparaît
12:40 Données	Courbe de likes trimestrielle + barres de taux de partage/collection	Courbe lisse, avec zone dégradée et animation de tracé
13:00 Expérience	Récit + bulletin 2×2 + personnalité de l'audience + résumé	Chiffres en trois niveaux : échelle / percée / monétisation
13:20 Méthodes	4 principes, chacun appuyé par un chiffre comme preuve	N'écrivez pas de principe sans donnée de support
13:40 Points forts	4 cartes de compétences (grand chiffre + étiquette + preuve)	Ce sont des points forts, pas un bilan — interdiction formelle d'écrire des problèmes ou des plans
14:00 À propos	Une phrase de conclusion + tableau de faits (localisation/école/compte/email)	Facilite au recruteur la copie des coordonnées

Dépendances préalables (Étape 0, à faire avant la collecte des données)

La collecte des données nécessite le CLI Xiaohongshu. Le CLI est déjà intégré dans cette compétence (vendor/redbook/, MIT upstream), il suffit donc de copier le répertoire complet de la compétence à l'utilisateur — pas besoin qu'il exécute npm i -g.

bash scripts/doctor.sh     # Examen : node / source CLI / cookie / état de connexion

Élément vérifié	Condition	Si non satisfaite
node	≥ 22	Installez node d'abord, la copie intégrée en dépend aussi
CLI	redbook global ou vendor/redbook/dist/cli.js (au moins un des deux)	Le dossier vendor/ a été oublié lors de la copie, ou exécutez npm i -g @lucasygu/redbook
État de connexion	~/.redbook/cookies.json valide	bash scripts/redbook.sh auth save ; si échec, voir la solution CDP à la fin de data-collection.md

Toutes les commandes de collecte passent par le lanceur bash scripts/redbook.sh <sous-commande> : il privilégie la version globale (qui peut être mise à jour via npm), et en cas d'absence, utilise la copie intégrée en définissant automatiquement REDBOOK_COOKIE_FILE. Écrire redbook nu risque de provoquer une erreur « commande introuvable » sur la machine de l'utilisateur.

Partage à d'autres : archivez tout le répertoire blogger-portfolio/ (y compris vendor/, environ 1 Mo). L'autre utilisateur n'a que deux choses à faire lui-même : installer node ≥22, et se connecter une fois à son compte Xiaohongshu. Ne supprimez pas vendor/redbook/ pour réduire la taille — cela le dégraderait en « doit d'abord installer le package npm ». Pour mettre à jour le CLI : exécutez npm i -g @lucasygu/redbook@latest, puis synchronisez les nouveaux dist/ et node_modules/ dans vendor/redbook/.

Processus

1. Collecte des données

Les données publiques sont récupérées via le CLI Xiaohongshu intégré (liste des notes, likes/collections/partages, couvertures TOP9, distribution trimestrielle) :

RB="bash scripts/redbook.sh"
$RB whoami                                        # Vérifiez d'abord l'état de connexion
$RB search "<nom du compte>" --json                # Numéro Xiaohongshu numérique → récupérez userId + xsec_token
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json

Les vues, la personnalité de l'audience, le nombre de marques, le chiffre d'affaires, etc. ne peuvent être obtenus qu'en les demandant à l'utilisateur.

Pour les commandes complètes, les scripts de dédoublonnage et d'agrégation, la réparation des cookies expirés, et l'anti-fraude pour les commentaires, voir references/data-collection.md. La collecte doit être séquentielle avec un intervalle de 3s. Si un captcha apparaît lors de la récupération des commentaires, arrêtez immédiatement.

2. Définir le thème de la personnalité

Demandez d'abord trois choses : le positionnement du compte (style de vie / maison / parental / animaux / découverte…), le poste cible, et si l'utilisateur apparaît en personne dans les photos. Ensuite, choisissez la métaphore de la chronologie, la palette de couleurs et la dénomination des sections selon references/theming.md. Par défaut : fond papier clair (blanc cassé #fbf6ee + abricot orange #d9744f) ; les blogueurs de style de vie n'utilisent jamais de couleurs sombres.

3. Écrire data.json

Copiez le fichier demo/data.json et modifiez-le (demo/ est un exemple constructible : personnage fictif + couvertures de substitution) :

{
  "site":  {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
  "hero":  {"clock","h1","lead","roles"},
  "ledger":[{"value","label","hl"}],            // 5 cases, la première avec hl:true
  "facts": [{"k","v"}],                          // Tableau de faits à droite de la section À propos (localisation/école/compte/email)
  "notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
  "quarters": [["24Q3", 1, 260]],               // [Trimestre, nombre de notes, total de likes], 6 à 12 éléments
  "brands":[{"name","cat"}]
}

Ne mettez que 9 notes (TOP1 + TOP2-5 + TOP6-9) ; img avec un chemin relatif, sera encodée automatiquement lors de la construction. Conservez le format original de la plateforme pour les valeurs (ex. "7.6万"), la fonction toN/fmt dans la page les convertira uniformément. h1 et lead peuvent contenir du HTML (<br>, <span class="mark">, <em>).

4. Construction

python3 scripts/build.py --data portfolio/data.json --out portfolio/index.html

Le script intègre les images, remplit les placeholders, et quitte immédiatement avec une erreur si un placeholder n'est pas rempli. Il affiche enfin le nombre d'exemples de texte restant à modifier.

5. Réécrire les exemples de texte (ne pas sauter)

Le template est livré avec un exemple complet « sieste dans une voiture-lit ». Après la construction, modifiez chaque marqueur un par un :

<!--EDIT:works-->       Titre/introduction de la section Œuvres + 3 points de détail de TOP1
<!--EDIT:featured-->    Carte de point fort de TOP1 (citation + pourquoi ça a cartonné)
<!--EDIT:datahead-->    Titre de la section Données + explication des trois ratios
<!--EDIT:experience-->  Expérience : récit + bulletin + personnalité de l'audience + résumé
<!--EDIT:method-->      Quatre méthodes
<!--EDIT:strengths-->   Quatre points forts
<!--EDIT:about-->       À propos + tableau de faits latéral

Pour les règles d'écriture, les formules des sections, la liste des interdits, et la correspondance de chaque carte avec une question d'entretien, voir references/copy-playbook.md. Lisez-le avant d'écrire, sinon vous risquez de produire un bilan.

Ordre suggéré : construisez d'abord, puis modifiez le texte dans le HTML ; si vous devez ensuite modifier data.json, sachez que reconstruire écrasera les modifications manuelles.

6. Examen

npm i playwright-core     # Installez une fois dans un répertoire temporaire quelconque
node scripts/verify.js portfolio/index.html

Vérification sur trois fenêtres (1440 / 768 / 390) : erreurs console, chargement des images visibles, débordement horizontal, affichage complet des animations de défilement, génération des courbes, largeur des barres de ratio non nulle, contraste du texte ≥ 4.5. En cas d'erreur bloquante, le code de sortie est non nul.

N'envoyez pas de captures d'écran à l'utilisateur, seulement les conclusions numériques ; ne faites une capture que si l'utilisateur le demande explicitement.

7. Livraison

Utilisez present_files pour ouvrir portfolio/index.html, et expliquez clairement trois choses dans le corps du message :

1. Ce qui a changé dans cette version (couleurs / structure / chiffres)
2. Quels chiffres ne correspondent pas à l'affichage de la plateforme et ce que vous suggérez d'écrire (ne les arrangez pas vous-même)
3. Ce qui manque encore : expérience professionnelle 【à remplir】, email de contact, et s'il faut le publier sous forme de lien en ligne

Si l'utilisateur consulte souvent sur mobile, utilisez un aperçu local via le réseau (avec ~/.workbuddy/live-serve/live_serve.py), n'envoyez pas le fichier plusieurs fois.

Structure du répertoire

SKILL.md                      Ce fichier
scripts/build.py              data.json + template → HTML single-file
scripts/verify.js             Examen pré-livraison (playwright-core + Chrome local)
scripts/doctor.sh             Examen pré-collecte (node / CLI / cookie / état de connexion)
scripts/preview.sh            Construction + serveur + adresse mobile + reconstruction automatique sur modification (une seule commande)
scripts/redbook.sh            Lanceur CLI (version globale → copie intégrée, sélection automatique)
assets/template.html          Template de la page (CSS/JS complet, placeholders sous forme {{NAME}})
demo/                         Exemple constructible (personnage fictif + couvertures de substitution, exécutez-le pour vérifier l'environnement)
references/data-collection.md Récupération des données, agrégation, réparation des cookies, anti-fraude
references/copy-playbook.md   Formules de texte, chiffres à trois niveaux, interdits, mapping avec les questions d'entretien
references/theming.md         Changement de personnalité : métaphore chronologique, palette de couleurs, décorations, accessibilité minimale
vendor/redbook/               CLI Xiaohongshu intégré (MIT, contient dist/ et node_modules/)
vendor/NOTICE.md              Source, version, licence et méthode de mise à jour des dépendances intégrées

Le template fait 37 Ko, et le produit final avec images intégrées environ 1 Mo — cette taille est acceptable, ne compressez pas les images pour réduire le volume. Le CLI intégré fait environ 760 Ko, ne le supprimez pas : c'est la seule garantie que « l'utilisateur n'a besoin que de node pour exécuter le tout ».

Pièges courants

• Chiffres contradictoires : l'utilisateur dit « 80 000 likes » mais la page en affiche 76 000, le recruteur s'en rend compte immédiatement. Utilisez toujours la valeur affichée sur la page du compte.
• Commande redbook introuvable : l'utilisateur n'a pas installé le package global. Utilisez toujours bash scripts/redbook.sh, qui utilise la copie intégrée via vendor/redbook/ ; exécutez d'abord bash scripts/doctor.sh pour voir ce qui manque.
• Écrire un bilan : si vous voyez apparaître « problème », « prochaine étape » ou « leçon apprise », c'est que vous vous êtes égaré ; supprimez tout le bloc et remplacez-le par des cartes de compétences.
• Oublier de mettre à jour les horodatages : le <small>12:15</small> de la navigation doit être synchronisé avec le <b>12:15</b> de la section.
• Barres de ratio invisibles : .bar .tr / .fl sont des spans, ils doivent avoir display:block pour avoir une largeur.
• Images dans la zone repliée « non chargées » : c'est normal pour les images en lazy-load avec display:none, le script verify.js les exclut déjà.
• Sauts de ligne sur mobile : les trois mini-cartes de personnalité de l'audience utilisent white-space:nowrap ; réduisez la taille de police et les marges intérieures sur écran étroit.
• Les likes des gros comptes sont plafonnés : pour les comptes avec plus de 100 000 followers, les likes sont systématiquement affichés comme « 10万+ », et collected_count peut aussi être plafonné. Tout ratio « collections ÷ likes » est un maximum et ne peut pas être écrit comme une conclusion — dans ce cas, remplacez les barres de ratio par des valeurs absolues (collections, commentaires chacune séparément), la conclusion tient toujours, mais chaque chiffre est fiable.
• Ne pas classer par likes pour les gros comptes : après plafonnement, le classement est faux. Remplacez par « une œuvre représentative par type de contenu » et expliquez dans le sous-titre pourquoi il n'y a pas de classement.
• Mélange de proportions de couvertures : un même compte peut avoir des couvertures en 9:16, 3:4 et 4:3 (vidéos longues, carrés, paysages). Recadrez uniformément en 3:4 avec object-position:50% 42% ; les versions verticales ne couperont pas le titre en bas.
• Les barres de données du héros n'occupent qu'une demi-ligne : si .ledger est placé dans le deuxième .wrap du héros, il hérite d'une grille à deux colonnes ; ajoutez .hero .wrap+.wrap{display:block}.
• La collecte des gros comptes est lente : avec 1000+ notes, --delay 2000 prend environ 40 pages et 2 minutes ; mais pour obtenir les détails du TOP 9, il faut read chaque note une par une avec un intervalle de 5s, ne faites pas de parallélisme.