Website Relaunch 2026: Wie viel Zeit steckt wirklich dahinter?

In den letzten fünf Wochen habe ich mein Portfolio komplett neu aufgebaut — auf Basis von Nuxt und Storyblok.

Was zunächst als simples Template gestartet ist, entwickelte sich Schritt für Schritt zu einer vollständig individualisierten, mehrsprachigen und produktionsreifen Plattform. Neben dem visuellen Redesign ging es vor allem darum, eine moderne Frontend-Architektur aufzubauen, die flexibel, performant und langfristig wartbar ist.

Ein Blick in die Git-Historie zeigt ziemlich gut, wie viel Arbeit tatsächlich hinter einem solchen Relaunch steckt — und wie viele technische Entscheidungen, Refactorings und Iterationen nötig sind, bis aus einer Idee ein stabiles Produkt wird.

Ein wichtiger Bestandteil des gesamten Entwicklungsprozesses war außerdem der gezielte Einsatz von KI-Tools (Google Antigravity – Agent first IDE auf Basis von VS Code).
Ich habe KI in nahezu allen Bereichen genutzt:

• beim initialen Projektsetup,

• während des Refactorings,

• bei Feature-Integrationen,

• und besonders intensiv beim Debugging und bei Bugfixes.

Gerade bei komplexeren Problemen war KI weniger ein „One-Shot-Solution“-Tool, sondern eher ein iterativer Sparringspartner. Manche Aufgaben funktionierten direkt wie erwartet, andere brauchten mehrere Schleifen, bis wirklich alle Edge Cases sauber gelöst waren — beispielsweise bei Problemen rund um SSR vs. CSR oder dynamischem Icon Rendering.

Ohne diesen Workflow hätte die Entwicklung deutlich länger gedauert — und vermutlich auch nicht dieselbe technische Qualität erreicht.

Kurzfassung

Aufschlüsselung des Aufwands nach Kategorien

Der größte Teil der Arbeit floss klar in die Entwicklung eines modularen Komponenten-Systems. Das Ziel war nicht einfach „schöne Seiten“ zu bauen, sondern wiederverwendbare und CMS-gesteuerte UI-Bausteine zu entwickeln, die langfristig flexibel erweiterbar bleiben.

Development Timeline

Phase 1 — Architektur & Setup (~25h / ~11%)

Die erste Phase bestand fast ausschließlich aus technischem Setup:

• Initialisierung der Nuxt-Architektur inkl. Nuxt UI

• Integration von Storyblok

• HTTPS-Entwicklungsumgebung

• ESLint Setup

• grundlegende Layout- und Theme-Struktur

Bereits hier kam KI intensiv zum Einsatz — vor allem beim initialen Projektsetup, bei Architekturentscheidungen und bei der Vorbereitung wiederverwendbarer Patterns.

Diese Arbeiten sind später kaum sichtbar, bilden aber die Grundlage für Skalierbarkeit, Wartbarkeit und sauberen Code.

Phase 2 — Aufbau der Komponentenbibliothek (~80h / ~35%)

Das war die intensivste Frontend-Phase des gesamten Projekts.

In dieser Zeit entstand die komplette modulare Komponentenarchitektur der Website — basierend auf Nuxt UI als UI-Framework und Storyblok als Headless CMS.

Der Fokus lag darauf, ein flexibles System zu entwickeln, das nicht nur visuell konsistent ist, sondern sich auch vollständig über Storyblok steuern und erweitern lässt.

Dafür wurden:

• individuelle Vue-Komponenten entwickelt,

• passende Storyblok-Blöcke modelliert,

• beide Systeme eng miteinander verzahnt

• und sämtliche Inhalte dynamisch konfigurierbar gemacht.

Durch den Einsatz von Nuxt UI konnten viele Vorteile direkt genutzt werden:

• responsive Layouts,

• konsistente UI Patterns,

• schnelle Anpassbarkeit,

• Dark Mode Support,

• sowie eine saubere und skalierbare Designbasis.

Zusätzlich wurde darauf geachtet, dass Komponenten einfach verschachtelbar bleiben. Dadurch lassen sich komplexe Seitenstrukturen flexibel direkt im CMS zusammenstellen, ohne neue Templates entwickeln zu müssen.

Auch hier spielte KI eine große Rolle — insbesondere bei der schnelleren Entwicklung neuer Komponenten, beim Refactoring bestehender Strukturen und bei der Integration neuer Features.

Der größte Aufwand lag dabei weniger im visuellen Design selbst, sondern in der Entwicklung eines skalierbaren und wartbaren Systems, das langfristig flexibel erweitert werden kann.

Phase 3 — Refactoring & DRY Optimierungen (~35h / ~15%)

Irgendwann erreicht jedes Projekt den Punkt, an dem Refactoring wichtiger wird als neue Features.

In dieser Phase ging es unter anderem um:

• Reduktion redundanter Komponentenstrukturen

• Migration von pnpm zu npm

• globale Storyblok Settings

• Full-Site Search

• Optimierung von Galerie-Integrationen

Gerade in dieser Phase wurde KI intensiv genutzt, um bestehende Strukturen zu analysieren, wiederkehrende Patterns zu vereinheitlichen und Refactorings effizienter umzusetzen.

Visuell passierte hier vergleichsweise wenig — technisch war es aber eine der wichtigsten Phasen des gesamten Relaunches.

Phase 4 — Internationalisierung & Optimierung (~55h / ~24%)

Jetzt wurde die Plattform auf Skalierung vorbereitet.

Der Fokus lag auf:

• vollständiger DE/EN-Lokalisierung

• SEO-Optimierung

• dynamischen Metadaten

• Open Graph & Sitemap

• Animationen & visuellen Details

• Performance-Tuning

Gerade Internationalisierung greift tief in Routing, Navigation und CMS-Strukturen ein und erhöht die Komplexität deutlich.

Auch hier half KI besonders beim schnellen Iterieren neuer Lösungen und beim Debugging komplexerer Edge Cases.

Phase 5 — Feinschliff auf Production (~31,5h / ~14%)

Die letzte Phase bestand fast ausschließlich aus Feinschliff und Produktionsoptimierung:

• automatisierte Deployments

• ISR & Caching Strategien

• Icon Rendering Fixes

• Lighthouse Optimierungen

• Dokumentation & README Überarbeitung

Vor allem bei den letzten Bugfixes zeigte sich, wie hilfreich KI im Alltag geworden ist. Manche Probleme ließen sich innerhalb weniger Minuten lösen — andere benötigten mehrere Iterationen, bis wirklich alle Sonderfälle sauber funktionierten.

Ein gutes Beispiel dafür waren Rendering-Probleme zwischen SSR und CSR, da dynamisch nachgeladene Icons in der clientseitigen Navigation (CSR) nicht mehr im vorab generierten CSS-Bundle der Server-Seite (SSR) enthalten waren. Dies konnte erst nach mehreren Debugging-Runden vollständig gelöst werden.

Die letzten 10 % eines Projekts kosten oft unverhältnismäßig viel Zeit — machen am Ende aber den größten Unterschied in der User Experience.

Google Lighthouse Score

Was ich aus dem Relaunch gelernt habe

Der größte Unterschied zu früheren Projekten:
Frontend Development besteht heute längst nicht mehr nur aus UI.

Ein modernes Frontend-Projekt verbindet:

Gleichzeitig hat das Projekt gezeigt, wie stark KI moderne Entwicklungsprozesse verändert.
Nicht als Ersatz für technisches Verständnis — sondern als Werkzeug, um schneller zu iterieren, Probleme effizienter zu lösen und mehr Fokus auf Architektur, UX und Produktqualität zu legen.

Gerade bei größeren Projekten verschwimmt die Grenze zwischen Frontend Developer und Product Engineer immer stärker.

Und genau das macht solche Projekte spannend.

Fazit

226 Stunden wirken für ein Portfolio zunächst extrem viel. Tatsächlich wurde das Portfolio während des Relaunches aber selbst zum Produkt.

Es ging nicht nur darum, eine schönere Website zu bauen — sondern eine Plattform, die meine Arbeitsweise als Frontend Developer und UI/UX Designer widerspiegelt:

• modular,

• performant,

• skalierbar

• und bis ins Detail durchdacht.

Und vielleicht zeigt das Projekt noch etwas anderes ganz gut:
Moderne Webentwicklung besteht heute nicht mehr nur aus Code schreiben — sondern aus Architektur, Systemdenken, Iteration und dem intelligenten Einsatz der richtigen Tools.