111seek/blogger-portfolio

Blogger-Persona-Portfolio (Einzel-HTML für Bewerbungen)

Das Ergebnis ist eine index.html: Alle Bilder sind als Base64 eingebettet, Doppelklick öffnet sie, direkt per WeChat/E-Mail an den Personaler versendbar. Die Struktur ist fest in sieben Blöcke unterteilt, die durch einen „Lebenszeitstrahl“ verbunden sind; der Text spricht nur über Stärken, jede Zahl muss mit dem Account-Profil übereinstimmen.

Wann verwenden

• Der Benutzer möchte seinen Blogger-Account als Bewerbungsunterlagen aufbereiten (Stellen im Bereich Neue Medien / Content-Operation / Marken-PR)
• Der Benutzer möchte für andere Blogger die gleiche Seite erstellen (anderes Profil, andere Daten, ohne das Design neu zu schreiben)
• Der Benutzer hat bereits eine ältere Version des Portfolios und möchte Farbschema, Struktur ändern oder ein Zeugnis hinzufügen

Wie das Ergebnis aussieht

portfolio/
├── index.html          ← Einzige Lieferung
├── data.json           ← Datenquelle (Notizen, Quartale, Marken, Identität)
└── assets/             ← Cover + Avatar (während des Builds eingebettet)

Sieben Blöcke (Nummerierung und Themen können geändert werden, siehe references/theming.md):

Block	Inhalt	Wichtige Anforderungen
12:00 Eröffnung	Titel + Einleitung + 5 Datenfelder	Ein Satz, der „Was ich erreicht habe“ zusammenfasst
12:15 Werke	TOP1 Einzelanalyse + TOP2–5 dauerhaft sichtbar + TOP6–9 eingeklappt	Cover muss ein Originalfoto mit der Person sein
12:40 Daten	Quartals-Like-Kurve + Share-/Speicher-Rate-Balken	Kurve glatt, mit Verlaufsfläche und Strichanimation
13:00 Erfahrung	Erzählung + 2×2 Zeugnis + Follower-Persona + Zusammenfassung	Zahlen in drei Ebenen: Umfang/Durchbruch/Monetarisierung
13:20 Methode	4 Prinzipien, jedes mit einem belegten Beispiel	Prinzipien ohne Datenunterstützung nicht schreiben
13:40 Stärken	4 Fähigkeitskarten (große Zahl + Tags + Beleg)	Stärken, keine Retrospektive, keine Probleme oder Pläne schreiben
14:00 Über mich	Abschlusssatz + Fakten-Tabelle (Standort/Hochschule/Account/E-Mail)	Einfach für Personaler, Kontaktdaten zu kopieren

Voraussetzungen (Schritt 0, vor der Datenerfassung)

Für die Datenerfassung wird das Xiaohongshu CLI benötigt. Das CLI ist bereits in diesem Skill enthalten (vendor/redbook/, MIT-Lizenz upstream). Das gesamte Skill-Verzeichnis kann dem Empfänger kopiert werden, ohne dass er npm i -g ausführen muss.

bash scripts/doctor.sh     # Gesundheitscheck: node / CLI-Quelle / Cookie / Login-Status

Prüfpunkt	Anforderung	Bei Nichterfüllung
node	≥ 22	Node installieren, davon hängt auch die integrierte Kopie ab
CLI	Globales redbook oder vendor/redbook/dist/cli.js vorhanden	vendor wurde nicht mitkopiert, oder npm i -g @lucasygu/redbook ausführen
Login	~/.redbook/cookies.json gültig	bash scripts/redbook.sh auth save ausführen, bei Fehler siehe CDP-Lösung am Ende von data-collection

Alle Datenabrufbefehle verwenden den Starter bash scripts/redbook.sh <Befehl>: Er bevorzugt die globale Version (kann mit npm aktualisiert werden), fällt andernfalls auf die integrierte Kopie zurück und setzt automatisch REDBOOK_COOKIE_FILE. Ein bloßes redbook könnte auf dem Zielrechner nicht existieren.

An andere weitergeben: Das gesamte blogger-portfolio/-Verzeichnis packen (inklusive vendor/, ca. 1 MB). Der Empfänger muss nur zwei Dinge selbst tun: Node ≥22 installieren und sich einmal mit seinem Xiaohongshu-Konto anmelden. Lösche nicht vendor/redbook/, um Speicherplatz zu sparen – dadurch würde die Voraussetzung „npm-Paket muss installiert sein“ wiederhergestellt. CLI aktualisieren: npm i -g @lucasygu/redbook@latest und dann die neuen dist/ und node_modules/ in vendor/redbook/ synchronisieren.

Ablauf

1. Daten abrufen

Öffentliche Daten mit dem integrierten Xiaohongshu CLI abrufen (Notizenliste, Likes/Sammlungen/Shares, TOP9-Cover, Quartalsverteilung):

RB="bash scripts/redbook.sh"
$RB whoami                                        # Zuerst Login-Status prüfen
$RB search "<Account-Name>" --json                # Digitale Xiaohongshu-Nummer → userId + xsec_token ermitteln
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json

Aufrufzahlen, Follower-Persona, Markenzahl, Umsatz usw. müssen vom Benutzer erfragt werden.

Vollständige Befehle, Deduplizierungs- und Aggregationsskripte, Cookie-Wiederherstellung, Anti-Bot-Maßnahmen für Kommentare siehe references/data-collection.md. Abruf unbedingt seriell + mit 3s Verzögerung, bei Kommentaren mit Captcha sofort stoppen.

2. Persona-Design festlegen

Zuerst drei Dinge klären: Account-Ausrichtung (Leben/Wohnen/Mutter & Kind/Haustiere/Lokalerkundung…), Zielposition, ob die Person selbst im Bild ist. Dann gemäß references/theming.md die Zeitstrahl-Metapher, Farbpalette und Blocknamen wählen. Standard helles Papierdesign (Cremeweiß #fbf6ee + Aprikosen-Orange #d9744f); Lebensblogger verwenden grundsätzlich kein Dunkel.

3. data.json schreiben

Eine Kopie von demo/data.json erstellen und anpassen (demo/ ist ein direkt baubares Beispiel: fiktive Person + Platzhalter-Cover):

{
  "site":  {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
  "hero":  {"clock","h1","lead","roles"},
  "ledger":[{"value","label","hl"}],            // 5 Felder, erstes Feld hl:true
  "facts": [{"k","v"}],                          // Fakten-Tabelle rechts auf der Über-mich-Seite (Standort/Hochschule/Account/E-Mail)
  "notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
  "quarters": [["24Q3", 1, 260]],               // [Quartal, Anzahl Beiträge, Likes gesamt], 6–12 Stück möglich
  "brands":[{"name","cat"}]
}

notes reichen 9 Einträge (TOP1 + TOP2–5 + TOP6–9); img als relativen Pfad angeben, wird beim Build automatisch eingebettet. Zahlen im Originalformat der Plattform belassen (z.B. "7.6万"), die toN/fmt-Funktion auf der Seite rechnet einheitlich um. h1 und lead dürfen HTML enthalten (<br>, <span class="mark">, <em>).

4. Bauen

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

Das Skript bettet Bilder ein, füllt Platzhalter, bricht bei ungefüllten Platzhaltern mit Fehler ab und gibt am Ende aus, wie viele Beispieltexte noch zu ändern sind.

5. Beispieltexte umschreiben (nicht überspringbar)

Die Vorlage enthält ein vollständiges Beispiel „Mittagsschlaf im Auto“. Nach dem Bau nacheinander die Markierungen ersetzen:

<!--EDIT:works-->       Werksbereich: Titel + Einleitung + TOP1 drei Analysen
<!--EDIT:featured-->    TOP1 Highlight-Karte (Einleitung + Warum es erfolgreich war)
<!--EDIT:datahead-->    Datenbereich: Titel + Erläuterung der drei Raten
<!--EDIT:experience-->  Erfahrung: Erzählung + Zeugnis + Follower-Persona + Zusammenfassung
<!--EDIT:method-->      Vier Methoden
<!--EDIT:strengths-->   Vier Stärken
<!--EDIT:about-->       Über mich + Seitenleiste Fakten-Tabelle

Schreibregeln, Blockformeln, Verbotsliste, Zuordnung jeder Karte zu einer Interviewfrage siehe references/copy-playbook.md. Vor dem Schreiben lesen, sonst wird leicht eine Retrospektive daraus.

Empfohlene Reihenfolge: zuerst bauen, dann im HTML die Texte ändern; falls später data.json geändert wird, beachten, dass erneutes Bauen die manuellen Änderungen überschreibt.

6. Gesundheitscheck

npm i playwright-core     # In einem beliebigen temporären Verzeichnis einmal installieren
node scripts/verify.js portfolio/index.html

Drei Viewports prüfen (1440 / 768 / 390): Konsolenfehler, sichtbare Bilder geladen, horizontale Überläufe, Scroll-Animationen vollständig sichtbar, Kurven erzeugt, Balkenbreite nicht 0, Textkontrast ≥4,5. Bei schwerwiegenden Fehlern Exit-Code ungleich 0.

Keine Screenshots an den Benutzer senden, nur numerische Ergebnisse melden; Screenshots nur, wenn der Benutzer explizit danach fragt.

7. Lieferung

portfolio/index.html mit present_files öffnen, im Text drei Dinge klarstellen:

1. Was wurde an dieser Version geändert (Farbschema / Struktur / Zahlenbasis)
2. Welche Zahlen stimmen nicht mit der Plattform überein und wie sollte man sie formulieren (nicht selbst beschönigen)
3. Was fehlt noch: Berufserfahrung [auszufüllen], Kontakt-E-Mail, ob eine Online-Version veröffentlicht werden soll

Wenn der Benutzer häufig auf dem Handy liest, über LAN-Vorschau bereitstellen (~/.workbuddy/live-serve/live_serve.py), nicht wiederholt Dateien versenden.

Verzeichnis

SKILL.md                      Dieses Dokument
scripts/build.py              data.json + Vorlage → Einzel-HTML
scripts/verify.js             Gesundheitscheck vor Lieferung (playwright-core + lokaler Chrome)
scripts/doctor.sh             Gesundheitscheck vor Datenerfassung (node / CLI / Cookie / Login-Status)
scripts/preview.sh            Bauen + Server starten + Handy-Adresse + automatischer Neubau bei Änderungen (ein Befehl)
scripts/redbook.sh            CLI-Starter (globale Version → integrierte Kopie, automatische Auswahl)
assets/template.html          Seitenvorlage (vollständiges CSS/JS, Platzhalterform {{NAME}})
demo/                         Direkt baubares Beispiel (fiktive Person + Platzhalter-Cover, zum Testen der Umgebung)
references/data-collection.md Datenerfassung, Aggregation, Cookie-Wiederherstellung, Anti-Bot
references/copy-playbook.md   Textformeln, dreistufige Zahlen, Verbote, Zuordnung zu Interviewfragen
references/theming.md         Profil wechseln: Zeitstrahl-Metapher, Farbpalette, Dekoration, Barrierefreiheits-Mindeststandards
vendor/redbook/               Integriertes Xiaohongshu CLI (MIT, inkl. dist/ und node_modules/)
vendor/NOTICE.md              Herkunft, Version, Lizenz und Aktualisierungsmethode der integrierten Abhängigkeiten

Vorlage 37KB, fertiges Ergebnis mit eingebetteten Bildern ca. 1 MB – diese Größe ist akzeptabel, Bilder nicht zur Größenreduzierung komprimieren. Integriertes CLI ca. 760KB, nicht löschen: Es ist die einzige Garantie dafür, dass der Empfänger nur Node installieren muss.

Häufige Fallstricke

• Zahlen widersprüchlich: Benutzer sagt „80.000 Likes“, auf der Seite stehen 76.000 – beim Personaler fällt das sofort auf. Einheitlich den auf der Profilseite angezeigten Wert verwenden.
• redbook roh schreiben → command not found: Auf dem Zielrechner ist das globale Paket nicht installiert. Immer bash scripts/redbook.sh verwenden, das fällt auf vendor/redbook/ zurück; zuerst bash scripts/doctor.sh ausführen, um die Fehlerquelle zu identifizieren.
• Retrospektive geschrieben: Sobald „Problem“, „nächster Schritt“ oder „gelernt“ auftaucht, ist die Richtung falsch. Block löschen und durch Fähigkeitskarten ersetzen.
• Zeitstempel nicht aktualisiert: Die <small>12:15</small> in der Navigation muss mit <b>12:15</b> im Block synchron sein.
• Balken werden nicht angezeigt: .bar .tr / .fl sind Spans, müssen display:block haben, um eine Breite zu bekommen.
• Bilder im eingeklappten Bereich zeigen „nicht geladen“: Lazyload-Bilder mit display:none sind normal, verify.js schließt sie aus.
• Zeilenumbruch auf dem Handy: Die drei kleinen Karten der Follower-Persona verwenden white-space:nowrap, auf schmalen Bildschirmen Schriftgröße und Innenabstand verkleinern.
• Likes bei großen Accounts sind gedeckelt: Accounts mit über 100.000 Followern zeigen Likes grundsätzlich als „10万+” an, auch collected_count kann gedeckelt sein. Jede Relation „Speicherungen ÷ Likes“ ist nur ein Obergrenzenwert und darf nicht als Schlussfolgerung geschrieben werden – in diesem Fall die Balken durch absolute Werte (Speicherungen, Kommentare separat) ersetzen; die Schlussfolgerung ist trotzdem gültig, aber jede Zahl steht fest.
• Große Accounts nicht nach Likes sortieren: Nach der Deckelung ist die Sortierung ungültig. Stattdessen „pro Inhaltstyp ein repräsentatives Werk auswählen“ und im Untertitel erklären, warum nicht sortiert wird.
• Gemischte Cover-Seitenverhältnisse: Ein Account kann gleichzeitig 9:16, 3:4 und 4:3 Cover haben (lange Videos, quadratische Bilder, horizontale Bilder). Einheitlich auf 3:4 + object-position:50% 42% zuschneiden; bei Hochformaten wird der untere Titel nicht abgeschnitten.
• Hero-Datenbalken nur eine halbe Zeile: .ledger erbt im zweiten .wrap der Hero ein zweispaltiges Grid; .hero .wrap+.wrap{display:block} hinzufügen.
• Datenerfassung bei großen Accounts sehr langsam: Bei 1000+ Beiträgen dauert --delay 2000 etwa 40 Seiten, 2 Minuten; aber für die Details der TOP 9 muss jeder Beitrag einzeln mit read abgerufen werden, Intervall 5s, nicht parallelisieren.