iamsachinraj/Claude-Skills

Portfolio-Website für die Karriere

Erstellt ein elegantes, einseitiges Portfolio aus drei Eingaben: einem Lebenslauf, einem Porträtfoto und einer LinkedIn-Profil-URL. Das Design ist festgelegt und bereits fertig (animierter Netzwerkhintergrund, buchstabenweiser Name, tippende Rollenbezeichnungen, stapelbare Fallstudienkarten, anklickbare Fähigkeiten, die eine Karrierezeitleiste beleuchten, Hell‑/Dunkelmodus, mobiles Layout). Deine Aufgabe ist der Inhalt: lies den Lebenslauf, schreibe eine content.json und führe das Build-Skript aus.

Dateien in dieser Fähigkeit:

• assets/template.html: das fertige Design; für den normalen Gebrauch nicht bearbeiten
• scripts/build.py: fügt content.json und das Foto zu einer HTML-Datei zusammen
• references/content-schema.md: jedes Feld, Längenvorgabe und Icon-Name
• examples/sample-content.json: ein vollständiges funktionierendes Beispiel

1. Die drei Eingaben sammeln

Frage einmal gemeinsam, was fehlt:

1. Lebenslauf: jedes Format (PDF, DOCX, Text, eingefügt). Erforderlich.
2. Foto: ein gut beleuchtetes, frontales Porträt. Optional; ohne wird das Porträt mit den Initialen der Person angezeigt.
3. LinkedIn-URL: wird für die Kontaktlinks verwendet.

Fordere vorab nichts anderes an. LinkedIn-Seiten blockieren normalerweise automatisches Auslesen, daher die URL als Link behandeln, nicht als Datenquelle; der Lebenslauf ist die maßgebliche Quelle. Wenn du das Profil lesen kannst und es Fakten hinzufügt, verwende sie.

2. Den Lebenslauf lesen und die Persona finden

Lies den gesamten Lebenslauf. Entscheide dann, bevor du etwas schreibst, über die kombinierte Persona: eine Identität, die jeden wichtigen Hut vereint, den die Person getragen hat – nicht nur ihre letzte Berufsbezeichnung. Beispiel: "Customer Success Leader, der Onboarding gestaltet, CS-Operationen datenbasiert führt und engagierte Teams aufbaut", anstatt "Head of CS". Die wenigsten Leute möchten eine Website über eine einzige Rolle; sie möchten den roten Faden ihrer Karriere.

Suche heraus:

• die 4–8 Identitäten, die sie mitbringen (diese werden die Tippzeile)
• der konstante Faden über die Rollen hinweg (wird zur Führungsüberschrift und zu den Säulen)
• 3–5 Geschichten mit einem klaren Problem, einer Aktion und einem Ergebnis (Fallstudien)
• jede genannte Zahl (Statistiken, Messwerte, Highlights)
• Werkzeuge, Plattformen, Zertifizierungen, Ausbildung

3. content.json schreiben

Folge dem references/content-schema.md; spiegele die Struktur von examples/sample-content.json. Regeln:

• Nur Fakten aus dem Lebenslauf. Erfinde niemals Kennzahlen, Arbeitgeber, Daten, Teamgrößen oder Ergebnisse. Wenn eine Fallstudie kein genanntes Ergebnis hat, beschreibe das Ergebnis qualitativ. Verwende die Messanzeige nur für einen tatsächlich genannten Prozentsatz.
• Erste Person, klar und selbstbewusst. Kurze Sätze, kein Schlagwort-Hintereinanderstapeln, kein "leidenschaftlich", "ergebnisorientiert" oder "dynamisch".
• Halte die Längenvorgaben ein; langer Text zerstört den Rhythmus des Layouts.
• Fähigkeiten müssen auf echte Rollen-IDs verweisen, und jede Fähigkeit sollte jeder Rolle zugeordnet werden, in der der Lebenslauf sie zeigt.
• Ordne Karriererollen neueste zuerst; markiere die aktuelle Rolle mit current: true.
• Lasse contact.phone leer, es sei denn, die Person sagt, dass sie es aufnehmen soll.

Speichere es als content.json im Arbeitsverzeichnis.

4. Bauen

python3 <skill-verzeichnis>/scripts/build.py --content content.json --photo <foto-pfad> --out portfolio.html

Pillow (pip install pillow) beschneidet und komprimiert das Foto; ohne wird das Foto unverändert eingebettet. Korrigiere jeden ERROR; lies jede WARNING und korrigiere sie, es sei denn, sie ist beabsichtigt.

5. Überprüfen

Wenn du einen Browser öffnen oder Screenshots machen kannst, betrachte den Hero auf Desktop- und Telefonbreite, scrolle die ganze Seite einmal und schalte den Dunkelmodus um. Prüfe, ob der Fotobeschnitt das Gesicht zeigt (passe person.photoPosition an) und dass kein Text überläuft. Andernfalls lies die content.json erneut und vergleiche mit den Längenvorgaben.

6. Ausliefern

• Wenn du ein Artefakt oder eine Webseite veröffentlichen kannst, veröffentliche portfolio.html privat und gib der Person den Link, mit der Erklärung, dass sie selbst entscheidet, wann sie ihn teilt.
• Andernfalls sende ihr die Datei.

Erkläre dann kurz:

• um welche Persona du die Website herum aufgebaut hast, damit sie sie anpassen kann
• dass sie um jede Textänderung bitten kann und du neu baust
• wie sie teilen kann: den Artefakt-Link veröffentlichen/teilen oder die einzelne Datei kostenlos auf GitHub Pages oder Netlify Drop hosten und dann den Link im Bereich "Ausgewählte Inhalte" ihres LinkedIn-Profils hinzufügen

Änderungen

Für Textänderungen content.json bearbeiten und neu bauen; niemals das gebaute HTML von Hand bearbeiten. Designänderungen (Farben, Schriftarten, Abschnitte) gehören in assets/template.html; die Platzhalter /*__PORTFOLIO_DATA__*/null, "/*__PHOTO__*/", __TITLE__ und __DESCRIPTION__ intakt lassen.