Achter de schermen
Hoe deze site gemaakt is
Deze pagina hoort bij het portfolio: The Gentleman's Chair is een fictieve zaak, de site is echt. Zo is hij gebouwd.
Referenties eerst
We bouwen nooit blind. Voor deze site leverde de klant drie visuele referenties aan: een poster-stijl hero, een sitestructuur en een luxe barbershop-site. Daaruit is de visuele taal gedistilleerd: warm zwart, cream display-letters, goud en een rode marker als handtekening.
Designsysteem gelockt vóór de bouw
Kleuren, typografie, radius en motion zijn vooraf vastgelegd in een designsysteem, met vooraf berekende contrastwaarden (WCAG AA). Pas daarna is er gebouwd; zo blijft elke sectie consistent.
Cinematografie met mate
De video in de atelier-sectie is een AI-cinemagraph: een stilstaand interieurbeeld dat met AI-assistentie subtiel tot leven is gewekt (flakkerende peertjes, zwevend stof, ultratrage inzoom) en daarna gecomprimeerd tot minder dan een halve megabyte. Wie verminderde beweging instelt, krijgt een stilstaand beeld.
De scroll-film: van clip naar frames
Voor de atelier-reis is eerst een startbeeld gegenereerd (twee kandidaten, een mens koos de beste) en daarmee een twaalf seconden lange AI-video in drie scenes (Kling 3.0 via Higgsfield): een trage push-in, een macro-traveling langs leer en staal, en een rustig slot op de lege stoel. Een lokaal script (ffmpeg plus Python) zet die clip om naar honderd WebP-frames in twee resoluties: 7,2 megabyte voor desktop, 3,2 voor mobiel. Een canvas tekent het frame dat bij je scrollpositie hoort; zo speel jij de film af, niet de tijdlijn.
Gecureerde beeldenreeks per dienst
Elke dienst kreeg een eigen key visual in dezelfde beeldtaal: donker atelier, warm zijlicht, filmkorrel. Per beeld zijn twee kandidaten gegenereerd (Higgsfield Soul) en is de beste gekozen; wat kunstmatig aanvoelde, vloog eruit. Curatie is de helft van het werk.
Snel, toegankelijk en privacyvriendelijk
Statische site (Astro), zelf-gehoste fonts, geen tracking-cookies, strikte Content-Security-Policy en een toegankelijkheidsscore van 100 als harde lat. Het afspraakformulier vraagt enkel wat nodig is.
AI, eerlijk vermeld
De stoel in de hero, de dienstenbeelden, de atelier-video en de scroll-film zijn met AI-assistentie gemaakt en daarna door een mens gecureerd. Dat vermelden we in de footer, conform de Europese AI-verordening.
Live op de rand van het netwerk
De site wordt gebouwd tot statische bestanden en uitgerold op Cloudflare Pages; het afspraakformulier draait als kleine serverfunctie op hetzelfde platform. Elke wijziging passeert eerst dezelfde meetlat: nul consolefouten, nul toegankelijkheidsovertredingen en Lighthouse-scores van 95 of hoger, gemeten op de echte productie-URL.
Wil je zo'n site voor jouw zaak? Deze werkwijze (referenties, gelockt designsysteem, review-rondes en performance-gates) is herhaalbaar voor elke lokale onderneming.