Captured Hearts
Der Tag vergeht. Das Bild bleibt.

- Next.js 16
- Payload CMS
- PostgreSQL
- Tailwind CSS v4
- Docker · Hetzner
- Self-hosted
Über das Projekt
Captured Hearts ist meine Marke für Hochzeiten in Stuttgart: Fotografie, Film und Brautstyling aus einer Hand. Wir kommen zu dritt — Jan Hofmann an der zweiten Kamera, Maryna Dubova für Make-up und Styling, und ich als Ansprechpartner von der ersten Anfrage bis zur fertigen Galerie. Bis 2026 lag die Seite auf Webflow. Jetzt läuft sie auf demselben Stack wie nicolasbaer.de: Next.js 16 mit Payload CMS, PostgreSQL, in Docker auf meinem eigenen Hetzner-Server hinter Traefik.
Gestalterisch ist es der Gegenentwurf zum dunklen Vorgänger. Die Grundfläche ist cremefarben, der einzige Akzent das Rot aus dem Logo, gesetzt in Playfair Display, Montserrat und Great Vibes — alle selbst gehostet, kein Google-Fonts-CDN. Bilder stehen nie randlos: Sie liegen im Passepartout auf hellem Karton, mit feiner Linie und Bildunterschrift wie im Ausstellungskatalog. Einen Dark Mode gibt es bewusst nicht, die Marke ist hell.
Der Hero ist ein Schrift-Knockout: Die Headline ist ein Loch in der Cremefläche, dahinter läuft ein Film. Beim Scrollen wächst die Schrift, bis der Stamm eines Buchstabens den Schirm füllt. Darunter steht ein einziger Auftakt statt der ursprünglich drei Sektionen — links die drei Gewerke mit dem Weg zu ihrer Landingpage, rechts das Archiv als Schiebeband, das ohne Bibliothek auskommt und trotzdem am Klick nicht vorbeizieht.
Drei Landingpages tragen die lokalen Suchbegriffe: Hochzeitsfotograf, Hochzeitsvideograf und Hochzeitsstyling Stuttgart. Ihr Kopf zeigt das Foto bildschirmfüllend, der Text steht aber nie auf dem Bild, sondern jede Zeile auf ihrer eigenen deckenden Fläche. Der Grund ist gemessen: Über einem weißen Brautkleid kam heller Text auf abgedunkeltem Foto auf einen Kontrast von 4,24 — verlangt sind 4,5. Auf Cream sind es 17,2, unabhängig vom Motiv.
Redaktionell pflegbar ist alles, was sich ändert: Reportagen, Team, Leistungen und Landingpages liegen im CMS. Das Kontaktformular läuft über Server Actions; woher eine Anfrage kommt, zählt der Server über einen Parameter in der URL — ohne Cookie und ohne Einwilligung. Videos laden erst nach dem Klick, die Schriften kommen vom eigenen Server, und die Backups laufen zeitversetzt zu den anderen Sites auf demselben Host.
Mehr von der Site.








Mehr zum Anschauen.
BautürprofiBaustellensicherheitstüren im Großraum Stuttgart.Webflow
PegelsIhr Partner für Reinigung, Entrümpelung und Baggerarbeiten.Webflow
Bürstner Digital ServiceIhre digitale Infrastruktur. Gesichert.Next.js + Payload
Pegel – der TransformationsbegleiterWenn nach außen alles läuft – und innen nichts mehr stimmt.Next.js + Payload