Persönliches Portfolio
Ein redaktionelles Portfolio, das zurückhaltend und bewusst wirken soll statt effekthascherisch. Inhalte liegen als typisierte Datenobjekte vor, die Routen, Sitemap und verwandte Links automatisch speisen, und das gesamte Designsystem ist eine einzige Datei aus CSS-Tokens — sodass sich Text wie Erscheinungsbild an einer Stelle ändern lassen, nicht verstreut im Markup. (Diese Seite.)
- Rolle
- Alleiniger Designer & Entwickler
- Jahr
- 2026
- Status
- In Arbeit
- Kategorie
- Design
- Werkzeuge & Technologien
- Next.jsReactTypeScriptTailwind CSSFramer Motion
- Links
- GitHub
Das Problem
Die meisten Portfolio-Vorlagen verweben Inhalt mit Markup und verstreuen das Styling über Komponenten, sodass jede Änderung zur Ausgrabung wird. Dieses hier behandelt die Seite als kleines Produkt: typisierte Inhalte als Quelle der Wahrheit, ein Designsystem in einer Datei und wiederverwendbare Vorlagen für Fallstudien und Artikel.
Kontext
Ein persönliches Projekt, das eine Figma-Grundlage erweitert — strukturell fertig und typisiert, aber noch vor dem Deploy.
Zentrale Entscheidungen
Inhalt von der Darstellung entkoppelt
Typisierte Datenobjekte (Projekte, Artikel, Werdegang, Site) speisen Routen, Sitemap und verwandte Links, sodass das Hinzufügen eines Projekts oder Artikels ein einzelnes Daten-Anhängen ist statt einer Markup-Änderung.
Designsystem in einer Datei
Jeder visuelle Token — Farbe, fluide Typo-Skala, Abstände, Radien, Schatten, Bewegung — ist einmal in globals.css unter Tailwind v4s @theme definiert, sodass ein vollständiges Re-Theming eine Änderung in einer einzigen Datei ist.
Ergebnisse
- Eine vollständige, statisch gerenderte Seite (sechs Bereiche plus Vorlagen für Fallstudien und Artikel je Slug), bei der das Hinzufügen eines Eintrags ein einzelnes Daten-Anhängen ist.
- Barrierefreiheit und SEO an der Quelle gelöst: Unterstützung für reduzierte Bewegung, ARIA-verdrahtete Formulare, Open Graph, Sitemap/Robots und strukturierte JSON-LD-Daten.
Gelernte Lektionen
- Eine nicht verfügbare Eingabe hinter einer einzigen Datei zu isolieren, verwandelte eine Unbekannte in einen einzeiligen Abgleich statt in einen Blocker — die Entscheidung, die den Bau in Bewegung hielt.
Verwandte Arbeiten
Room of Horror
Ein VR-„Gruselkabinett“, in dem Pflege-Auszubildende in einem virtuellen Krankenzimmer nach Pflegefehlern suchen, während eine Lehrkraft jede Sitzung live aus dem Browser konfiguriert und überwacht.
AOG Moldova
Eine produktive Landingpage für die 24/7-Notfalllogistik von Luftfahrtteilen in Moldau — mit dreisprachiger Oberfläche und einem serverlosen Anfrageformular, das dringende Anfragen direkt an das Einsatzteam leitet.