Diese Seite ist absichtlich „viel“: Glassmorphism, Lightbox, Masonry-Galerie, Scroll-Reveals, fette Hero-Preview, Story-Abschnitte und ein richtiges Design-System. Alles in einer HTML-Datei.
Drei „große“ Karten: Idee, Craft, Wirkung. Jede Karte fühlt sich wie ein kleines Produkt an.
Farben, Glows, Radius, Schatten: alles ist zentral definiert. So bleibt es konsistent, auch wenn du später mehr Sections ergänzen willst.
Viele Bilder, aber nicht chaotisch: Masonry-Layout, Captions, Lightbox und echte Tiefe durch Layering (Grid, Noise, Glows).
Scroll-Reveal, Theme-Toggle, Tastaturkürzel, Lightbox-Controls. Alles in Vanilla JS — schnell, direkt, einfach deploybar.
Klick auf ein Bild → Lightbox. Die Bild-URLs sind bewusst „austauschbar“. Du kannst hier deine eigenen Dateien/Links einsetzen.
Hier kommt Substanz: Wie du aus „vielen Bildern“ eine starke, moderne, skalierbare Website baust.
Layering ist der Trick: Hintergrund-Gradient + Grid + Noise + Cards mit Blur. Dadurch entsteht Tiefe, ohne dass die Seite überladen wirkt.
Große Headlines, klare Abstände, leise Sekundärtexte. „Viele Bilder“ funktionieren nur, wenn Text & UI dem Auge Pausen geben.
Reveal-on-scroll, Hover-Zoom, Lightbox. Wenig Effekte — aber an den richtigen Stellen. Das wirkt „pro“.
loading="lazy" ist drin, die Layouts sind leicht. Wenn du eigene Bilder nutzt: WebP/AVIF, sinnvolle Breiten (z.B. 1400px) und gute Kompression.
Demo-Formular (ohne Backend). Du kannst es später an ein Script/Service anschließen.
Ersetze die Texte, tausche die Unsplash-Bilder gegen deine eigenen (lokal oder CDN), und du hast ein extrem starkes, „modernes“ Portfolio/Branding-Site.