portfolio-skill: Lebenslauf → Personal Portfolio

Portfolio-Skill

Erstellen Sie ein Portfolio, an das sich ein Personalverantwortlicher, Recruiter oder Kunde nach dem Schließen des Tabs erinnert: eine selbstbewusste visuelle Idee, spezifischer Text, Bewegung mit einem Grund und eine Technik, die auch dann Bestand hat, wenn jemand die DevTools öffnet.

Das Thema wird pro Person gewählt. Hier werden keine Farben, Schriftarten oder Layout-Stile festgelegt. Jeder konkrete Wert in dieser Datei ist ein Beispiel für das Muster, keine zu kopierende Vorgabe.

---

1. Qualitätsanspruch (vor Fertigstellung prüfen)

1. Eine einheitliche künstlerische Leitung, konsequent umgesetzt. Ein benanntes Konzept bestimmt Typografie, Farbe, Layout, Bewegung und Textton. Mischen Sie niemals unzusammenhängende Stile (Glas + Neon + Brutalismus + Farbverläufe) auf einer Website.
2. Echte, spezifische Inhalte. Jede Behauptung stammt aus dem Lebenslauf, den Repos, Profilen oder Nachrichten des Nutzers. Konkrete Zahlen, Stack-Namen, Rollen, Daten. Kein Lorem Ipsum, keine erfundenen Metriken, kein "leidenschaftlicher Entwickler, der es liebt zu coden".
3. Die Arbeit steht im Mittelpunkt. Die 2-4 wichtigsten Projekte erhalten den meisten Platz und idealerweise eine eigene Fallstudienseite mit etwas Interaktivem. Alles andere lebt in einem durchsuchbaren, filterbaren Index.
4. Typografie trägt das Design. Ausdrucksstarke Display-Schrift + lesbare Textschrift + optionale Mono/Nutzschrift. Fließende clamp()-Größen. Inter, Roboto, Arial oder System-Stacks sind niemals die Display-Stimme.
5. Bewegung ist choreografiert, nicht verstreut. Ein Intro, Scroll-Enthüllungen und 1-2 charakteristische Momente. Alles respektiert prefers-reduced-motion und degradiert sauber.
6. Funktioniert überall. 360px bis Ultraweit, tastaturbedienbar, WCAG-AA-Kontrast, schneller First Paint, vollständig lesbar ohne WebGL oder JS-Animation.
7. Wird ausgeliefert. Null Typfehler, Produktions-Build bestanden, Meta/OG-Tags pro Route, Lebenslauf-Link, funktionierender Kontakt-Pfad, Deployment-Konfiguration.

---

2. Arbeitsablauf

1. Material sammeln. Alles Bereitgestellte lesen: Lebenslauf-PDF/DOCX, bestehende Website, READMEs, GitHub-Daten, Notizen. Nur nach fehlenden Essentials fragen (Name, Rolle, Zielgruppe, 2-4 Flaggschiff-Projekte, Links, visuelle Präferenz). Wenn keine Präferenz angegeben wird, selbst eine Richtung wählen und sagen, welche und warum.
2. Archetyp und Ambitionsniveau wählen (Abschnitt 6A.2), die zur Person und zum Zeitrahmen passen, dann ein Design-Briefing schreiben (Abschnitt 3) vor jeglichem UI-Code.
3. Grundlage erstellen (Abschnitt 5): Inhaltsmodul, Tokens, Typografie, Router, Smooth Scroll.
4. Seiten in einer präsentablen Reihenfolge erstellen: Inhalt -> Tokens/Typo -> Nav/Footer -> Held -> Flaggschiffe -> Arbeitsindex -> Über mich/Fähigkeiten/Zeitleiste -> Kontakt -> Fallstudienseiten -> 404. Dann Bewegung (Abschnitt 6). WebGL und Signature-Effekte zuletzt.
5. Verifizieren (Abschnitt 9) in einem echten Browser bei ~1440px und ~390px. Nie aus dem bloßen Lesen des Codes für erledigt erklären.

Wenn das Repo bereits einen Stack verwendet (Next.js, Astro, SvelteKit, einfaches HTML), diesen beibehalten. Alle untenstehenden Muster sind übertragbar.

---

3. Künstlerische Leitung

3.1 Thema aus der Person ableiten

Fragen: Wer wird dies ansehen, was sollen sie in 5 Sekunden fühlen, wie sieht die Arbeit dieser Person aus? Das in ein Konzept übersetzen. Vom Benutzer festgelegte Markenfarben, Schriftarten oder Themen haben immer Vorrang.

Person / Signal	Beispielrichtungen (eine auswählen oder erfinden)
Backend / Systeme / Infrastruktur	Redaktionell Papier+Tinte; Blaupause/technische Zeichnung; Terminal-Brutalismus; Schweizer Raster mit Daten-Viz-Akzenten
Frontend / Kreativ-Entwicklung	Fette kinetische Typografie; WebGL-geführt immersiv; verspielt Aufkleber/Fanzine; kontrastreiche Monochromie mit einem Neon
Produkt / UX-Designer	Ruhige Galerie-Weißräume; warmes Studio (Creme, Terracotta, weiche Serife); Fallstudien-Magazin
ML / Forschung / Daten	Laborheft (Rasterpapier, Mono-Anmerkungen); wissenschaftliches Journal; dunkles Observatorium mit geplotteten Linien
Mobile-Entwickler	Geräte-zentrierte Präsentation; weiche taktile Oberflächen; App-Store-Politur mit Live-Telefon-Mockups
Fotograf / Künstler	Bild-erstes Vollblut; minimales Chrome; dunkles Kino; Kontaktabzug-Raster
Gründer / Generalist	Selbstbewusst redaktionell; Manifest-Typografie; metrikgestützte Glaubwürdigkeit
Student / Frühe Karriere	Sauber, energisch, ehrlich; Projekte und Lernpfad gegenüber Berufsbezeichnungen betonen

Vermeiden Sie Voreinstellungen, die wie KI-generiert wirken: lila-blau Farbverläufe auf Weiß, generische Glassmorphismus-Karten, zentrierter Held mit "Hi, I'm X" + Welle-Emoji, drei gleiche Feature-Karten, 3D-Blobs.

3.2 Design-Briefing-Vorlage (zuerst schreiben)

Konzept:        <Name + ein Satz Absicht>
Zielgruppe:     <wer, was sie mitnehmen müssen>
Palette:        bg, bg-2, fg, fg-2, muted, line, Akzent (+ projektspezifische Akzente falls verwendet)
Typo:           display / text / mono (mit Fallbacks), Skalierungsverhältnis
Layout-Grammatik: Raster, Rinnen, Abschnittsrhythmus, Linien/Ränder vs. Karten
Bewegung:       Persönlichkeit (knackig/elastisch/langsam/mechanisch), hauptsächliches Easing, Dauern
Signatur:       die 1-2 Momente, an die man sich erinnern wird
Textur:         Korn / Gitterlinien / keine / Shader

3.3 Tokens (Struktur ist festgelegt, Werte sind pro Thema)

:root {
  /* Palette: Werte pro Thema ersetzen */
  --bg: #eeeae2;  --bg-2: #e5e0d5;
  --fg: #121210;  --fg-2: #2a2925;
  --muted: #6d695f;
  --line: rgba(18,18,16,.14);
  --accent: #ff4d1c;
  /* Typo-Stimmen */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* Rhythmus */
  --gutter: clamp(1.1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Seitenebene Aliasen, damit Fallstudienseiten das Thema durch Überschreiben dieser umstellen können */
  --page-bg: var(--bg); --page-fg: var(--fg); --page-muted: var(--muted);
  --page-line: var(--line); --page-accent: var(--accent);
}

Komponenten referenzieren nur --page-*. Eine Fallstudienseite setzt neue --page-* Werte auf ihrem <main> und die gesamte UI (Buttons, Linien, Cursor, Auswahl) erhält das neue Thema kostenlos.

3.4 Typografie-Regeln

• Paar mit Kontrast: Serifen-Display + Grotesk-Text, oder schwere Grotesk-Display + Mono, oder kondensierte Display + humanistischer Text. Laden über Google Fonts oder selbst-gehostete woff2 mit display=swap und preconnect.
• Fließende Skala mit clamp, z.B. h-xl: clamp(3.6rem, 14.5vw, 15rem), h-lg: clamp(2.8rem, 8vw, 8.5rem), h-md: clamp(2.1rem, 5vw, 4.6rem), Lede: clamp(1.05rem, 1.45vw, 1.3rem).
• Display: enge Zeilenführung (0.85-0.95) und negatives Tracking (-0.02 bis -0.04em). Textkörper: 1.5-1.65 Zeilenführung, max-width 38-62ch.
• Metadaten in kleiner Großbuchstaben-Mono mit leichtem Tracking ("(02) Ausgewählte Arbeiten", "2024 – Heute").
• Kursiv oder eine Gewichtsverschiebung bei einem Wort in einer Überschrift für Stimme verwenden ("Die, die ich zuerst demonstrieren würde.").
• font-variant-numeric: tabular-nums für Zähler und Statistiken.

3.5 Layout-Grammatik

• Vollformat-Held (min-height: 100svh), Inhalt unten links oder über ein Raster verankert, nicht mittig zentriert.
• Abschnittsüberschriften als dünne Linie mit nummeriertem Mono-Label links und Kontext rechts.
• Bevorzugen Sie Haar-Linien und Raster gegenüber Karten mit Schlagschatten (es sei denn, das Konzept ist taktil/weich).
• Variieren Sie den Abschnittsrhythmus: große Aussage, dichter Index, horizontale Rolle, zweispaltige Aufteilung. Niemals sechs identische Abschnitte hintereinander.
• Konsequenter --gutter überall; Abschnitts-Padding clamp(5rem, 13vw, 11rem).

3.6 Texturoptionen

Filmkorn (SVG feTurbulence data-URI auf body::after, Deckkraft 0.04-0.08, pointer-events:none), Blaupausen-Gitterlinien, subtile Radialverläufe oder ein WebGL-Feld. Eines auswählen; nicht stapeln.

---

4. Content-Strategie

4.1 Informationsarchitektur

Startseite (einmal scrollen):

1. Hero: Name, einzeilige Positionierung, 1-2 Sätze Lede, primärer CTA (Arbeit ansehen) + sekundärer (Lebenslauf / Kontakt), kleine Meta-Zeile (Rolle, Schwerpunkte, Standort, Verfügbarkeit).
2. Statement / Über mich: 2-4 Sätze in der Stimme der Person, plus 3-4 Statistiken, die wahr sind (ausgelieferte Projekte, Jahre, Nutzer, Sterne, Notendurchschnitt bei Studenten).
3. Flaggschiffe: 2-4 Heldenprojekte, große Karten, jede verlinkt zu einer Fallstudienseite.
4. Arbeitsindex: jedes andere Projekt als Zeilen (Nummer, Name, einzeiliger Anreißer, Stack, Jahr/Link), filterbar nach Art.
5. Fähigkeiten: gruppierte Skills (z.B. Backend, Mobile, KI, Tooling), nur Dinge, die sie in einem Vorstellungsgespräch verteidigen können.
6. Werdegang / Zeitleiste: Ausbildung, Rollen, bemerkenswerte Erfolge.
7. Kontakt: große CTA-Überschrift, E-Mail, Formular, soziale Links, Lebenslauf-Download.

Fallstudienseite pro Flaggschiff: thematischer Held (Name, Slogan, Rolle, Stack, Links), Problem, was gebaut wurde, eine interaktive Demo (Simulator, Spielplatz, Live-Mockup, Architekturdiagramm mit Hover-Effekt), wichtige Entscheidungen/Abwägungen, Metriken/Ergebnisse, dann eine "nächstes Projekt"-Übergabe und Kontakt.

404-Seite in derselben Stimme.

4.2 Textregeln

• Erste Person, sachlich, spezifisch. Mit dem beginnen, was gebaut wurde und warum es wichtig ist, dann wie.
• Gut: "Verbinden Sie Ihre eigenen AWS-, GCP- und Azure-Konten und deren Free-Tiers agieren als eine Festplatte." Schlecht: "Eine revolutionäre Cloud-Lösung, die modernste Technologie nutzt."
• Verbotene Füllwörter: leidenschaftlich, modernste, nutzen, nahtlos, robust, innovativ, Reise, eintauchen, "Ich liebe es zu coden".
• Jede Metrik ist belegt oder weggelassen. Niemals erfinden.
• Mikrotext hat Persönlichkeit, bleibt aber klar. ("Im Film verloren." auf 404, "Scrollen zum Schwenken" Hinweise)

4.3 Einzelnes Inhaltsmodul

Der gesamte Text und die Daten leben in src/content.ts. Komponenten kodieren niemals biografischen Text fest.

export const PROFILE = { name, role, location, email, github, linkedin, resume: '/resume.pdf', statement };
export type Metric = { value: string; label: string };
export type Flagship = {
  slug: string; path: string; index: string; name: string; kicker: string; tagline: string;
  summary: string; role: string; stack: string[]; metrics: Metric[]; repo: string;
  accent: string; bg: string; fg: string;          // Pro-Projekt-Thema
};
export const FLAGSHIPS: Flagship[] = [ /* 2-4 */ ];
export type WorkKind = 'Systems' | 'KI' | 'Mobile' | 'Web'; // an die Person anpassen
export const WORKS: { name: string; blurb: string; stack: string[]; kind: WorkKind; year: string; href: string; route?: string }[] = [];
export const CAPABILITIES: { title: string; items: string[] }[] = [];
export const PATH: { when: string; what: string; detail: string }[] = [];
export const STATS: Metric[] = [];

---

5. Architektur

5.1 Standard-Stack

Vite + React + TypeScript; reines CSS mit Custom Properties (Tailwind erlaubt, wenn das Team es bevorzugt); gsap + @gsap/react (ScrollTrigger); lenis für Smooth Scroll; three nur, wenn die Ausrichtung WebGL verwendet; nodemailer für Kontakt; Deployment auf Vercel/Netlify.

5.2 Struktur

index.html                 Schriftarten, Basis-Meta/OG, noscript-Fallback-Text
public/                    favicon.svg, resume.pdf, og-image
src/content.ts             gesamter Text und Daten
src/index.css              Tokens, Typografie, Layout, Komponenten, Responsive, Reduced-Motion
src/lib/smooth.ts          Lenis + GSAP Ticker, Reduced-Motion-Flag, Scroll-Geschwindigkeit
src/lib/motion.tsx         useReveals, useHeroIntro, <Split>, useMeta
src/lib/router.tsx         History-Router + Vorhang-Übergang + <Link>
src/components/Chrome.tsx  Nav, mobiles Menü, Cursor, Preloader, Footer/Kontakt
src/components/Field.tsx   optionaler WebGL-Held-Hintergrund
src/components/CaseShell.tsx gemeinsames Fallstudien-Gerüst
src/pages/*.tsx            Startseite, eine Seite pro Flaggschiff, NotFound
api/contact.ts             Serverloser Mail-Handler
vercel.json                SPA-Rewrites

5.3 Routing

Ein kleiner History-Router reicht für ein Portfolio aus und ermöglicht die Kontrolle über Übergänge:

• normalizePath (Schrägstrich am Ende entfernen, in Kleinbuchstaben umwandeln).
• navigate(to): gleicher Pfad + Hash -> Smooth-Scroll zum Anker; anderer Pfad -> Vorhang abspielen, Seite tauschen während abgedeckt, nach oben scrollen, dann enthüllen.
• Auf popstate hören; ScrollTrigger.refresh() nach jedem Routenwechsel aufrufen; ausstehendes #hash nach dem Tausch behandeln.
• <Link>: extern (http, mailto) rendert einen einfachen Anker mit target="_blank" rel="noopener noreferrer"; intern fängt den Klick ab, es sei denn metaKey/ctrlKey/shiftKey oder nicht-linke Taste, damit neuer Tab weiterhin funktioniert.
• Next.js/Astro: deren Router verwenden und den Vorhang in einem Layout/Übergang-Hook implementieren.

5.4 SEO pro Route

useMeta(title, description, themeColor) aktualisiert document.title, description, og:*, twitter:*, theme-color und canonical bei jeder Route. index.html enthält vollständige Standardwerte plus eine <noscript> Textzusammenfassung. summary_large_image-Twitter-Karte und ein OG-Bild nach Möglichkeit hinzufügen. JSON-LD Person-Schema in Betracht ziehen.

5.5 Kontakt-API (serverlos, api/contact.ts)

Anforderungen:

• Nur POST (ansonsten 405), Cache-Control: no-store.
• Honigtopf-Feld (z.B. verstecktes website): wenn ausgefüllt, 200 zurückgeben und verwerfen.
• Jedes Feld trimmen und in der Länge begrenzen; E-Mail mit einfachem Regex validieren; minimale Nachrichtenlänge.
• \r\n aus allem entfernen, was in Headern/Betreff verwendet wird (Header-Injection); alles im HTML-Body HTML-escapen.
• replyTo = Absender; from = Ihr SMTP-Benutzer.
• Rate-Limit nach bestem Wissen pro IP (z.B. 3 pro 10 Min. via In-Memory-Map, IP von x-forwarded-for).
• Wenn SMTP-Umgebungsvariablen fehlen, 503 mit einer freundlichen "mailen Sie mich direkt an"-Nachricht zurückgeben; die UI muss die E-Mail als Fallback anzeigen.
• Umgebungsvariablen: SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, CONTACT_TO. .env.example bereitstellen. Niemals Secrets committen.
• Frontend-Formular: Zustände Leerlauf/sendend/gesendet/Fehler, aria-live="polite" Status, Senden deaktiviert während des Sendens, Labels auf jeder Eingabe.

5.6 Deployment

Vercel vercel.json:

{ "cleanUrls": true,
  "rewrites": [{ "source": "/((?!api/|assets/|.*\..*).*)", "destination": "/" }] }

Netlify: /* /index.html 200 in _redirects. Lebenslauf unter public/resume.pdf; jeder Lebenslauf-Button verlinkt dorthin mit download.

---

6. Bewegungssystem

6.1 Prinzipien

• Ein hauseigenes Easing (z.B. expo.out / cubic-bezier(.16,1,.3,1)), Dauern 0.6-1.4s für Enthüllungen, 0.3-0.6s für Hover.
• Nur transform, opacity und clip-path animieren. Niemals Layouteigenschaften animieren.
• Maskierte Enthüllungen (Text, der aus einem overflow:hidden-Kasten aufsteigt) wirken hochwertig; einfache Einblendungen wirken billig.
• Choreografie: Das Held-Intro wartet, bis der Preloader/Vorhang verschwunden ist (gemeinsame intro.delay).
• Jeder Effekt wird durch prefersReduc...

…

[Für die Übersetzung gekürzt]