Vibecoded Portfolio
Kontext
Mein Portfolio lief auf einem WordPress-Hosting das mit den Jahren teurer, langsamer und schwerer zu pflegen geworden war. Für ein Portfolio das technische Kompetenz demonstrieren soll, war das der falsche Rahmen. Das Ziel: ein kompletter Neuaufbau mit moderner Architektur — und gleichzeitig mein erstes vollständiges vibe coding Projekt.
Problem
WordPress bot kaum Flexibilität für individuelle Gestaltung, eigene Komponentenlogik oder performante Ladezeiten. Anpassungen waren umständlich, das Hosting unverhältnismäßig teuer. Da kam der neue vibe coding Hype gerade zur richtigen Zeit — und ich nutzte den Neuaufbau des Portfolios direkt als erstes Projekt um die neuen Möglichkeiten zu testen.
Vorgehen
Statt zuerst in Figma zu designen, habe ich direkt mit dem Code angefangen. Das visuelle Konzept vom alten Portfolio diente bereits als Ausgangspunkt — Section für Section, Komponente für Komponente weiterentwickelt. Der Versuch, alles auf einmal zu bauen, scheiterte schnell. Was funktionierte: kleinteiliges, iteratives Prompting mit Claude. Jede Komponente einzeln, jede Interaktion gezielt. Kein Figma, kein Lovable — nur Prompt, Preview, Iteration.
Lösung
Eine von Grund auf neu gebaute Next.js Applikation mit eigener Komponentenarchitektur. Visuell eine Mischung aus Flat Design und Neumorphismus mit leuchtenden Akzenten. Eine schwebende Pill-Navigation die sich dynamisch anpasst. Butterweiche Animationen, vollständig responsiv — vom Smartphone bis zum Ultrawide-Monitor.
Ergebnis
Ein Portfolio das schneller, flexibler und günstiger ist als sein Vorgänger — und gleichzeitig der Beweis, dass KI-gestützte Entwicklung ohne klassisches Coding funktioniert, wenn man den Prozess richtig strukturiert.
Tech Stack
Claude Code · Next.js · React · Tailwind · Framer Motion · Vercel · Cloudflare
Kunde
Eigenes Projekt
Tools & Techniken
Projektart