Zum Hauptinhalt springen
Nicolas Bär

← Webdesign-Portfolio

captured hearts logo

Captured Hearts

Der Tag vergeht. Das Bild bleibt.

Hochzeitsfotografie · Film · Brautstyling · Eigene Marke · 2026

Gebaut mit Payload CMS
Live ansehen (capturedhearts.de)Next.js 16Payload CMSPostgreSQLTailwind CSS v4Docker · HetznerSelf-hosted
Startseite: „Der Tag vergeht. Das Bild bleibt." mit den drei Gewerken und dem Archiv als Schiebeband

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.

Eindrücke

Mehr von der Site

Captured Hearts — die Leistungsseite in voller Laenge
Leistungsseite · Tagesablauf und die drei Gewerke
Captured Hearts — Startseite mit dem Schriftzug als Ausschnitt, hinter dem ein Film laeuft
Der Hero: die Headline ist ein Loch in der Cremefläche, dahinter läuft ein Film
Derselbe Hero weiter unten im Scroll: die Schrift ist so gross, dass der Film die Buchstaben ausfuellt
Beim Scrollen wächst die Schrift, bis der Film die Buchstaben ausfüllt
Uebersicht der Hochzeitsreportagen im Passepartout-Raster
Reportagen im Passepartout — nie randlos, immer mit Rahmen
Detailseite einer Reportage mit dem Galerie-Raster und der Anfrage-Spalte
Reportage-Detail: Galerie-Raster neben der Anfrage-Spalte
SEO-Landingpage Hochzeitsfotograf Stuttgart: Text auf eigenen Flaechen statt auf dem Foto
Landingpage-Kopf: der Text steht auf eigenen Flächen, nie auf dem Foto
Rotes Kontaktband mit genau einer Handlung, darunter der Footer
Kontaktband mit genau einer Handlung, darunter der Footer
Captured Hearts — die Startseite auf dem Telefon
Mobile-Ansicht

Klingt nach einem Match?

Erzählen Sie uns von Ihrem Projekt.