Redesign Landingpage

Aus einem fast leeren Hero wurde eine ruhige Landingpage mit handgeschriebenem Namen, einer kleinen Zeile mit Live-Uptime, einer Card für mein Hauptprojekt und einer Card für den neuesten Blogpost. Statisches HTML und CSS, kein Framework, kein Build.

Warum ein Redesign?

Eine Startseite ist die erste Tür zur Website. Bei mir war diese Tür offen, aber dahinter stand nichts. Kein Name, kein Hinweis worum es geht, kein Anker zu meinen Projekten oder dem Blog.

Die neue Landingpage sollte drei Dinge gleichzeitig schaffen: sagen wer ich bin, zeigen woran ich arbeite und klingen wie der Rest der Seite. Ruhig, technisch, persönlich.

Vom Mockup zur Code-Session

Der Startpunkt war nicht mein Editor, sondern claude.ai/design im Browser. Dort habe ich mehrere Varianten ausprobiert: eine cinematische, eine Terminal-Variante, eine Magazinvariante. Mit Live-Vorschau, ohne dass dabei etwas in meinem Repository landete.

Nachdem sich die cinematische Variante am stimmigsten anfühlte, kam der entscheidende Knopf: Handoff to Claude Code im Share-Menü. Daraus bekomme ich einen kurzen Prompt mit Link zum Bundle, den ich kopiere und in meine lokale Claude Code Desktop App einfüge.

Claude Code lädt sich daraufhin selbst das Bundle herunter: die gewählte HTML-Datei, die Komponenten, die Assets, sogar das Transkript meiner Designentscheidungen. Dann startet die Umsetzung in meinem Repository. Die Arbeit lief in einem eigenen claude-Branch in einem Git-Worktree, damit mein main die ganze Zeit unangetastet blieb. Die Komponenten aus dem Mockup wurden in einfaches HTML und CSS übersetzt, die Tweak-Parameter aus dem Designer-Panel zu festen Werten eingefroren.

Zwei Spalten, zwei Stimmen

Das Layout teilt die Seite bewusst in zwei Hälften. Links steht der ausdrucksstarke Teil: eine kleine Statuszeile, der handgeschriebene Name, eine kurze Tagline. Rechts steht der strukturierte Teil mit zwei Cards.

Dieser Kontrast ist das eigentliche Designprinzip. Wenn alles in Cards säße, würde die Seite wie ein Katalog wirken. Wenn alles frei auf dem Bild läge, wäre sie unstrukturiert. Beides nebeneinander gibt der Landingpage eine Stimme, ohne sie laut zu machen.

Der Name in Caveat

Der größte Block der Seite ist mein Name in einer Handschrift. Caveat hat einen leichten Slant und sieht aus wie Filzstift auf Papier. Sie bricht die sonst technische Ästhetik angenehm auf.

Drumherum stehen zwei kleinere Zeilen in derselben Schrift, sodass hi, ich bin newwaves und vibe code mit Codex & Claude Code wie ein einziger handgeschriebener Satz wirkt. Das und verbindet den Satz, das & verbindet die beiden Tools wie ein Markenpaar.

Live-Daten in der Statuszeile

Über dem Namen sitzt eine kleine Zeile mit grünem Punkt. Statt eines statischen now zeigt sie die Uptime der Website: Tage und Stunden seit dem ersten Deploy auf dem VPS.

Der Trick ist absichtlich simpel. Ein fester Startzeitpunkt im HTML, ein paar Zeilen Vanilla JavaScript, fertig. Bei jedem Aufruf rechnet der Browser die Differenz aus. Reboots des VPS verändern den Wert nicht, weil die Konstante im Quelltext steht. Die gleiche Idee taucht unten im Footer noch einmal auf, dort als Tag X / 365.

Die Cards rechts

Die rechte Spalte zeigt genau zwei Cards. Mehr braucht eine Landingpage nicht. Die obere verlinkt auf mein Manga Vault-Projekt und zeigt drei Cover als Vorschau. Die untere ist der aktuellste Blogpost mit Thema und kurzer Beschreibung.

Beide Cards haben denselben Aufbau im Body. Dadurch wirken sie wie eine komponierte Spalte und nicht wie zwei zufällig gestapelte Elemente.

Mobile Optimierung

Die Desktop-Version stand zuerst, aber Mobile war von Anfang an mitgeplant. Das echte Polishing kam in einer eigenen Runde, mit Tests auf einem iPhone 15 Pro in Brave und Safari über das lokale WLAN.

Auf engen Viewports passierten mehrere kleine Dinge gleichzeitig. Die Statuszeile wirft den mittleren Teil building newwaves.dev ab, weil er auf newwaves.dev redundant ist. Name und Tagline rücken in die Mitte. Der Footer wird zu einer einzigen zentrierten Gruppe statt links und rechts auseinandergedrückt.

Der kniffligste Bug war der Footer, der auf dem iPhone gar nicht zu sehen war. Schuld war die Stapelreihenfolge der Ebenen. Ein dunkler Verlauf am unteren Rand mit z-index: 2 lag direkt über dem Footer, der selbst keinen eigenen z-index hatte. Ein position: relative mit z-index: 3 auf dem Footer und ein kürzerer Verlauf haben das gelöst.

Reduced Motion mit Ausnahme

Eine globale Regel respektiert prefers-reduced-motion und deaktiviert alle Animationen, wenn das System darum bittet. Auf dem iPhone führte das dazu, dass die Wave-Bars eingefroren waren, sobald „Bewegung reduzieren" in den iOS-Einstellungen aktiv war.

Die Wave-Bars sind winzig, langsam und rein dekorativ. Sie sind kein Trigger für vestibuläre Sensitivität. Deshalb gibt es eine bewusste Ausnahme: Die globale Regel bleibt, aber die Wave-Bars dürfen weiter animieren.

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
    }

    .wave-bars span {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
}

Was ich daraus mitnehme

Das Redesign hat länger gedauert als gedacht, aber kaum wegen großer Probleme. Es waren die kleinen Entscheidungen: Größe einer Zeile im Verhältnis zur anderen, Position der Wave-Bars, ob ein & oder ein und besser klingt. Genau diese Details unterscheiden eine generische Startseite von einer, die nach dem Menschen dahinter klingt.