MAINPAGECase Files

CASE 003

PORTFOLIO SYSTEM

ToolsNext.js / TypeScript / Tailwind CSS / Codex / Git

StatusLive Prototype

The idea

Diese Website ist als lebendes Portfolio-System gedacht: ein Ort, an dem ich visuelle Richtungen teste, Projekte dokumentiere und zeige, wie ich mit KI-gestützter Entwicklung arbeite. Statt einer klassischen Portfolio-Seite wollte ich einen persönlichen Creative Space bauen, der gleichzeitig als Bewerbungsprojekt funktioniert.

The problem

Viele Portfolios wirken wie statische Lebensläufe im Website-Format. Ich wollte eine Seite entwickeln, die persönlicher, visueller und eigenständiger ist, aber trotzdem klar zeigt, wie ich strukturiert arbeite, technische Entscheidungen treffe und AI-Tools sinnvoll in einen Entwicklungsprozess einbinde.

My approach

Ich habe die Website iterativ aufgebaut: zuerst das technische Setup, dann die visuelle Richtung, anschließend die Logo-Navigation, echte Unterseiten, Case-File-Routing und erste Inhalte. Jeder Schritt wurde lokal getestet, bewertet und bei Bedarf angepasst. Codex habe ich dabei nicht als Ersatz für eigene Entscheidungen genutzt, sondern als Entwicklungswerkzeug, das ich über konkrete Prompts, Reviews und Git-Versionen gesteuert habe.

Key decisions

  • Die Startseite sollte extrem reduziert bleiben, damit die Symbole selbst zur Navigation werden.
  • Statt früh ein komplexes CMS oder unnötige Funktionen einzubauen, habe ich mich für einfache Next.js-Routen und eine klare Seitenstruktur entschieden.
  • Die Projektseiten funktionieren bewusst wie Dossiers: Sie erklären Gedanken, Entscheidungen und Lernprozesse, statt nur fertige Ergebnisse zu präsentieren.

Output

Entstanden ist ein lauffähiger Next.js-Prototyp mit visueller Logo-Navigation, separaten Unterseiten und einer flexiblen Struktur für zukünftige Projekte, Notizen und Experimente. Die Website ist nicht als fertiges Endprodukt gedacht, sondern als System, das mit meinen Projekten weiterwachsen kann.

What I learned

Ich habe gelernt, dass agentic AI nur dann wirklich hilfreich ist, wenn der Workflow klar strukturiert ist. Gute Ergebnisse entstehen nicht durch einzelne große Prompts, sondern durch kleine Aufgaben, präzise Anweisungen, visuelle Reviews und regelmäßige Git-Speicherstände. Auch der Umgang mit Token-Nutzung wurde Teil des Prozesses: Je klarer ein Task abgegrenzt ist, desto weniger Kontext muss mitgeschleppt werden und desto kontrollierbarer bleiben die Ergebnisse. Der wichtigste Lerneffekt war, KI nicht blind machen zu lassen, sondern sie wie einen ausführenden Partner in einem strukturierten Arbeitsprozess zu führen.

Next iteration

Als Nächstes möchte ich echte Projektartefakte ergänzen: Screenshots, Notebooks, Repository-Links und kurze technische Notizen zu einzelnen Projekten. Zusätzlich soll die Struktur so erweitert werden, dass die Website langfristig nicht nur ein Portfolio bleibt, sondern ein persönliches Archiv für AI-, Data- und Design-Experimente wird.

GitHub