Cinematic Portfolio

Was macht Cinematic Portfolio?

Ein einschichtiges Portfolio im Dunkelmodus, inspiriert von den Portfolios von Editoren und VFX-Künstlern: ein riesiger Hintergrundtext hinter dem freigestellten Porträt, ein Vorname davor, ein zweifarbiger Titel (weiß und eine Akzentfarbe). Beim Laden der Seite sorgt ein 30-Agenten-Effekt dafür, dass jeder Abschnitt nacheinander aufgebaut wird (Skill agent-build-effect, bereits in template/vendor/ enthalten).

template/
  index.html        Rahmenseite, muss nicht bearbeitet werden
  data.js           SÄMTLICHE Inhalte – nur diese Datei bearbeiten
  styles.css        Design; Farben werden über Variablen oder `accent` in data.js geändert
  portfolio.js      Baut die Seite aus data.js auf und startet den Agenteneffekt
  vendor/           agent-build.js + .css
  assets/           Freigestelltes Porträt + Skill-Kartenbilder (Beispiel: 6 dunkelrote Bilder)
scripts/cutout.py   Freistellen des Porträts (rembg)
references/image-prompts.md   Prompts für Kartenbilder, einheitlicher Stil

Ablauf

1. Vorab alle nötigen Informationen erfragen

Frage in einer einzigen Nachricht alles ab, was der Benutzer noch nicht genannt hat:

• Kurzer Name für die Großansicht (am besten ein Wort), vollständiger Name, Titel, ein Einführungssatz.
• Porträtfoto: Knie aufwärts oder ganzer Körper, Hintergrund nicht zu unruhig, leichte Drehung. Echtfoto oder 3D-Render – beides möglich.
• 3 bis 6 Skills oder Projekte, die gezeigt werden sollen (Name, ein Satz Beschreibung, Technologien). Wenn echte Projekte mit Links vorhanden sind, füge href in die Karte ein.
• Werdegang (Berufserfahrung, Ausbildung), Fähigkeiten, Arbeitsablauf, ein Zitat.
• Referenzen oder Presse (wenn nicht vorhanden, gesamten Abschnitt weglassen).
• Kontakt: E-Mail, Region, Call-to-Action-Button.
• Seitensprache, Akzentfarbe (Standard Rot #ff3b30), Hintergrundtext (Standard PORTFOLIO).

Keine erfundenen Zahlen, Auszeichnungen oder Presse. Wenn der Benutzer einen Abschnitt nicht hat, lösche ihn aus der data.js – die Seite lässt ihn dann automatisch weg.

2. Vorlage kopieren

Kopiere den gesamten Ordner template/ an den gewünschten Ort (z. B. ./my-portfolio/). Die Originalvorlage im Skill bleibt unverändert.

3. Porträt freistellen

pip install rembg pillow
python -I <skill>/scripts/cutout.py original.jpg my-portfolio/assets/photo.webp

Standardmodell isnet-general-use ist leicht (~180 MB, einmaliger Download). Verwende birefnet-portrait nur bei ausreichend RAM: Dieses Modell ist ~1 GB groß und lief bei 1440px-Bildern bereits aus dem Speicher. Prüfe das Ergebnis einmal auf grauem Hintergrund (Hintergrund mit PIL in Grau setzen, dann Bild öffnen). Achte darauf, dass Haare, Brille und Gegenstände in der Hand erhalten bleiben. Setze hero.photo auf assets/photo.webp.

4. Bilder für die Skill-Karten

Die Vorlage enthält 6 dunkelrote Beispielbilder (Agent, Automatisierung, Web, Chatbot, Tabellenkalkulation, Video). Diese können wiederverwendet werden, wenn sie zum Inhalt der Karte passen. Sollen eigene Bilder erstellt werden, folge references/image-prompts.md: behalte den Stil-Endung bei, ändere nur das Motiv. Wenn die Akzentfarbe geändert wird, ändere auch den Farbcode im Prompt. Frage den Benutzer vor dem Massengenerieren von Bildern (verbraucht Kontingent seines KI-Kontos).

Wenn kein passendes Bild vorhanden ist, lass das image-Feld der Karte weg – die Karte sieht auch ohne Bild gut aus. Verwende niemals dasselbe Bild für zwei inhaltlich unterschiedliche Karten.

5. data.js ausfüllen

• hero.name: ein Wort, wird automatisch in Großbuchstaben gesetzt. Bei mehr als 7 Zeichen die Schriftgröße in .pf-name reduzieren.
• hero.stats: nur echte Werte eintragen (Anzahl Skills, Jahre, Technologien …).
• Abschnittsüberschriften bestehen aus title (weiß) und accent (Akzentfarbe). Beide Teile kurz und prägnant: „Nicht nur Code.“ / „Lösungen, die laufen.“
• agents.labels: an die Seitensprache anpassen. Beispiel Deutsch: { status: "{agents} Agenten · {edits} Bearbeitungen", building: "Baue Seite auf", done: "Fertig", skip: "Überspringen" }.
• Texte werden per textContent eingefügt, daher kein HTML möglich (absichtlich, aus Sicherheitsgründen).

6. Testen (zuerst Zahlen, dann Bilder)

Öffne index.html direkt im Browser (file:// funktioniert) oder starte einen beliebigen statischen Server. Verwende Playwright bei 1440×900 und 390×844 mit ?agents:

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // muss false sein
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // muss 0 sein, nachdem komplett gescrollt wurde
})

Scrolle mit window.scrollTo in 600px-Schritten, warte jeweils etwa eine Sekunde, prüfe dann, ob waiting 0 ist und keine Konsolenfehler auftreten. Mache ein Hero-Bild in jeder Bildschirmgröße, um die Optik zu beurteilen. Achte darauf, dass die Einleitung nicht auf das Porträt fällt und auf dem Handy das Gesicht nicht von Text verdeckt wird.

7. Online stellen

Das Verzeichnis ist eine statische Webseite: per Drag & Drop auf Netlify Drop, vercel deploy, GitHub Pages oder Cloudflare Pages. Kein Build-Schritt nötig.

Einbindung in bestehende Next.js / React-Projekte

Verwende styles.css neu, ersetze :root durch .pf. Schreibe die Rendering-Teile als Server-Komponenten um, behalte die Klassennamen bei. Binde den Effekt mit AgentBuild.tsx aus dem Skill agent-build-effect ein, mit derselben targets-Liste wie in portfolio.js. Bekannte Punkte bei der Next-Implementierung:

• Sticky-Header: Der Seite einen negativen margin-top in Höhe des Headers geben, damit der Hero-Bereich darunter rutscht.
• next/image mit fill benötigt einen Elterncontainer mit position: relative, sonst füllt das Bild die ganze Seite.
• Die Schriftart Anton enthält vietnamesische Zeichen. Beim Selbsthosting alle drei Subsets (latin, latin-ext, vietnamese) laden.
• Der Turbopack-Dev-Server übersieht manchmal per sed geänderte CSS-Dateien. Verwende stattdessen die Bearbeitungsfunktion der IDE oder schreibe die Datei komplett neu – dann erkennt er die Änderungen.