Neustart in Rekordzeit: Wie ich meine Homepage mit KI-Unterstützung neu erfunden habe

Vor etwa zwei Wochen kam mir die Idee, dass meine Homepage mal wieder ein Redesign vertragen könnte. Der Impuls entstand direkt, nachdem ich gemeinsam mit meinem KI-Kollegen Claude den Rewrite von HowCanI abgeschlossen hatte. Danach stellte ich mir (und Claude) die Frage: „Was packen wir als Nächstes an?“

Die alte Version meiner Website – eigentlich auch schon ein Redesign – begleitete mich nun schon seit über 20 Jahren. Technisch basierte sie auf einem einfachen Blog-System mit dem Hugo-Framework. Für die neue Version entschied ich mich jedoch für einen kompletten Rewrite, bei dem lediglich die Inhalte übernommen werden sollten.

Normalerweise hätte ein solches Projekt, das ich rein in meiner Freizeit entwickle, deutlich länger gedauert. Doch dank moderner KI-Tools konnte ich das Ganze in weniger als zwei Wochen umsetzen – wobei die tatsächliche Netto-Arbeitszeit sogar noch deutlich darunter lag. Zum Einsatz kamen dabei Google Stitch für das Design, Anthropic Claude für den Großteil der Coding-Arbeit und n8n für einen selbst entwickelten Workflow, der die Code-Reviews der Merge-Requests übernahm.

Was bietet die neue Homepage?

• Startseite: Direkter Zugriff auf den aktuellsten Blogeintrag, das neueste Projekt und das letzte Bild meiner Fotogalerie.
• Über mich: Eine detaillierte Abbildung meiner bisherigen beruflichen Karriere.
• Blog: Inklusive RSS-Feed – hoffentlich bald wieder mit regelmäßigen Updates.
• Fotogalerie: Ein Auszug meiner schönsten Aufnahmen.
• Zweisprachigkeit: Volle Unterstützung für Deutsch (für die Familie) und Englisch (für internationale Besucher).

Der Entwicklungsprozess

Da die Homepage eine rein statische Webseite ist, fiel meine Wahl auf das Framework Astro.js. Als Runtime nutze ich Bun.js, allerdings nur für die lokale Entwicklungsumgebung. Die Seite selbst wird über GitHub Pages bereitgestellt und besteht aus rein statischen HTML-Seiten.

Das Design entwarf ich mit Google Stitch, wobei ich mich von modernen Web-Layouts inspirieren ließ. Da Google Stitch einen MCP-Server (Model Context Protocol) bietet, konnte ich das Design ohne mühsames Copy & Paste direkt an Claude übergeben. Claude verband sich über den MCP-Server mit Stitch und erhielt so alle notwendigen Design-Informationen automatisiert.

Dann startete der eigentliche Rewrite. Dabei bin ich nicht dem aktuellen Trend des „AI-Driven Vibe-Coding“ verfallen. Stattdessen setzte ich – wie schon bei HowCanI – auf den Spec-Driven-Development-Ansatz unter Verwendung von OpenSpec. Dieser Ansatz bietet eine deutlich bessere Kontrolle darüber, was die KI generiert, da sie sich strikt an eine vorgegebene Todo-Liste hält.

Wie genau ich dabei vorgehe, ist ein Prinzip, das ich auf alle meine privaten Projekte anwende. Daher werde ich die Details dazu in einem zukünftigen Blogeintrag genauer erläutern.

Content-Erstellung und KI-Ethik

Meine Blogeinträge schreibe ich in Obsidian. Dort kann ich sie komfortabel editieren und im Anschluss von einer KI (Gemini) reviewen und überarbeiten lassen. Und ja: Auch dieser und alle folgenden Artikel sind nicht mehr „rein aus meiner Feder“ entstanden. Aber warum auch nicht? Es spricht doch nichts dagegen, sich von KI bei Tippfehlern sowie grammatikalischen oder stilistischen Mängeln helfen zu lassen. Solange der Kern des Inhalts und die Gedanken dahinter von mir stammen, ist das für mich ein legitimer Einsatz moderner Werkzeuge.

Sobald ein Artikel fertig ist, genügt ein kurzer Befehl in meinem Projektverzeichnis und nur wenige Minuten später ist der Beitrag online.

Fazit

Die Neugestaltung der Homepage mit modernen KI-Hilfsmitteln hat unglaublich viel Spaß gemacht. Die Zeitspanne von der ersten Idee bis zur Umsetzung neuer Features ist extrem kurz geworden – und trotzdem hatte ich jederzeit das Gefühl der vollen Kontrolle über den Code, den mein „KI-Kollege“ in meinem Auftrag schrieb. Ich freue mich schon auf das nächste Projekt; Ideen habe ich genug, für die mir ohne KI in meiner Freizeit wohl schlicht die Zeit gefehlt hätte.

---

Englisch version

A Fresh Start in Record Time: How I Reimagined My Homepage with AI Support

About two weeks ago, I realized it was time for a redesign of my homepage. The spark came right after I finished the rewrite of HowCanI together with my AI colleague, Claude. Afterward, I asked myself (and Claude): “What should we tackle next?”

The previous version of my website—itself a redesign—had been with me for over 20 years. Technically, it was a simple blog built using the Hugo framework. For the new version, I decided on a complete rewrite, keeping only the existing content.

Normally, a project like this, developed entirely in my spare time, would have taken much longer. But thanks to modern AI tools, I was able to implement everything in less than two weeks—and the actual net working time was even significantly lower than that. I used Google Stitch for the design, Anthropic Claude for the bulk of the coding, and n8n for a custom workflow that handled code reviews for merge requests.

What’s New on the Homepage?

• Home Page: Direct links to the latest blog post, the newest project, and the most recent addition to my photo gallery.
• About Me: A detailed overview of my entire professional career.
• Blog: Including an RSS feed—hopefully with more regular updates soon.
• Photo Gallery: A curated selection of my favorite shots.
• Bilingual Support: Full support for German (for my family) and English (for international visitors).

The Development Process

Since the homepage is a purely static website, I chose the Astro.js framework. I use Bun.js as the runtime, though only for the local development environment. The site itself is hosted via GitHub Pages and consists, as mentioned, of purely static HTML files.

I designed the layout using Google Stitch, drawing “inspiration” from existing modern web layouts. Because Google Stitch offers an MCP (Model Context Protocol) server, I could hand over the design to Claude without any tedious copying and pasting. Claude connected to Stitch via the MCP server and retrieved all the necessary design information automatically.

Then, the actual rewrite began. I didn’t fall into the current trend of “AI-driven vibe coding.” Instead, I relied—as I did with HowCanI—on a Spec-Driven Development approach using OpenSpec. This method provides much better control over what the AI generates, as it strictly follows a predefined to-do list.

The exact workflow I use is a principle I apply to all my private projects. I’ll explain the details of that in a future blog post.

Content Creation and AI Ethics

I write my blog posts in an external tool called Obsidian. It’s a great environment for editing, and I use an AI (Gemini) to review and refine the text. And yes: this article, and all future ones, are not “entirely from my own pen.” But why not? What’s wrong with using AI to eliminate typos or fix grammatical and stylistic flaws? As long as the core content and the thoughts behind it are my own, I don’t see an issue.

Once an article is ready for publication, I simply enter a short command in my project directory, and a few minutes later, the new post is live.

Conclusion

Building the new homepage with modern AI tools was a lot of fun. The time from the initial idea to the implementation of new features has become incredibly short—yet I always felt in full control of what my “AI colleague” was developing on my behalf. I’m already looking forward to the next project; I have plenty of ideas in mind that I simply wouldn’t have had the time for in my spare hours without the help of AI.