Lookbooks: Van Idee tot Interactieve Fashion Portfolio
Een nieuw platform voor fashion fotografie
PB.NL heeft een volledig nieuw onderdeel gelanceerd: Lookbooks. Een digitale omgeving waar fashion shoots, editorials en collecties tot leven komen in een interactieve, visueel rijke ervaring.
Wat zit erin?
Landing Page
De lookbook begint met een hero-sectie die direct de sfeer zet. Twee grote verticale beelden (4:5 formaat) flankeren de titel, met technische specificaties in strakke kaders. Een "Bekijk Alle Beelden" knop nodigt uit om verder te verkennen.
Archive Grid
Het hart van elke lookbook: een dynamisch beeldenraster waar kleine en grote beelden elkaar afwisselen. Grote beelden nemen vier cellen in beslag, kleine beelden vullen de ruimtes — een visueel spel tussen contrast en harmonie.
Two-Stage Lightbox
Klik op een beeld en het opent in een overlay. Beweeg je muis om door het beeld te pannen — een subtiele maar krachtige manier om details te verkennen zonder te zoomen. Klik nogmaals voor fullscreen.
Video Support
Niet alleen foto's: video's in 4:5 formaat integreren naadloos in het grid. Autoplay on hover, muted, met dezelfde vormgeving als de foto's.
Lazy Loading
Performance staat centraal. Beelden laden pas wanneer ze in beeld komen, met skeleton placeholders die de laadtijd visueel opvangen.
CMS: Volledige Controle
Drag & Drop Beheer
Beelden uploaden, slepen, herschikken. Het vijf-zone systeem maakt precisie mogelijk: sleep naar een rand om in te voegen, naar het midden om te vervangen.
Rangschik-modus
Schakelen tussen "dense packing" (mooie masonry layout) en "row mode" (voorspelbare volgorde voor editing). Twee modi voor twee doelen.
Formaat Wisselen
Klein naar groot, groot naar klein — met één klik. Het grid past zich automatisch aan.
Pagina Structuur
Organiseer beelden over meerdere pagina's. Pagina 1 toont altijd het archief, extra pagina's voor thematische indelingen.
Homepage Integratie
Twee nieuwe navigatie-blokken aan de linkerkant van de homepage (06.E en 07.F) bieden directe toegang tot de lookbooks. Volledig beheerbaar via het CMS, net als de vier blokken aan de rechterkant.
Technische Basis
React + TypeScript frontend
PostgreSQL database voor alle content
Object Storage voor beeldopslag
IntersectionObserver voor lazy loading
CSS Grid met dense packing
Drizzle ORM voor type-safe queries
