Eén vaste 800x800 JPEG werd altijd gedownload, ook op mobiel waar de
foto maar 160px groot getoond wordt. Nu een <picture>-element met
400w/800w varianten in zowel WebP (10-31KB) als JPEG-fallback
(20-61KB), met srcset/sizes zodat de browser de kleinste passende
variant kiest voor het scherm.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Crop 450px lager in het origineel gestart, zodat het hoofd de foto
beter vult en er niet zoveel lucht boven het haar overblijft.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Foto gecropt naar een vierkant (gecentreerd op hoofd + schouders,
ruimte boven het haar), verkleind naar 800x800 en als progressive JPEG
opgeslagen (~60KB, was ~9,6MB origineel) voor snelle laadtijd. Vervangt
de ronde fotoplaceholder.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Door items-start op de grid werd de fotocel niet uitgerekt over de
beide rijen, waardoor de flex-centrering in de fotowrapper geen
effect had en de foto naast de kop bovenaan bleef hangen i.p.v.
gecentreerd naast kop + tekst samen. sm:items-stretch lost dit op.
Foto is daarnaast iets vergroot (h-48/w-48 -> h-56/w-56 op sm), en de
mobiele gap tussen kop/foto/tekst is licht verruimd (gap-6 -> gap-8,
mb-2 -> mb-3).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
De fotoplek was een grote rechthoek (aspect-[4/5], volledige
kolombreedte) met een stippellijnrand. Vervangen door een kleinere,
gecentreerde ronde vorm (h-40/w-40, sm: h-48/w-48) met een dikkere
accentkleurige rand en schaduw, passend bij de rest van de site-stijl
(vgl. de accent-line/border-stijl in ContactSection).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
id + scroll-mt-16 stonden op de <section>, die zelf al py-[88px]
padding heeft - scrollIntoView lijnde dus de sectierand (inclusief
die padding) uit met de viewport-top, waardoor het te ver leek door
te scrollen en de content alsnog achter de sticky nav kon vallen.
id + scroll-mt-16 staan nu direct op de eyebrow-span ("// over",
"// werkwijze", "// pakketten", "// contact"), zodat er precies
daarheen én met 64px ruimte voor de nav wordt gescrold.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
De nav is sticky en 64px (h-16) hoog, maar de secties hadden geen
scroll-margin. scrollIntoView(block:'start') lijnde de sectietop dus
exact uit met de viewport-top, waardoor de sticky nav er precies
overheen schoof en de sectiekop (met name bij Over, nu direct na de
Hero) onder de nav verdween - het voelde alsof er te ver werd
doorgescrold. scroll-mt-16 op elke sectie houdt nu ruimte vrij voor
de nav.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
navLinks volgde nog de oude paginavolgorde (Pakketten, Werkwijze,
Over). Nu Over als eerste sectie op de pagina staat, moet het menu
dat weerspiegelen: Over, Pakketten, Werkwijze, Start project.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
gap-12 (3rem) tussen grid-items plus mb-6 op de kop-div stapelden op
tot te veel ruimte tussen "// over" en de foto op mobiel. Op mobiel nu
gap-6 en mb-2; vanaf sm ongewijzigd (gap-12, geen extra marge).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
De kop "// over" wordt nu los van de paragrafen gepositioneerd, zodat
op mobiel de volgorde kop -> foto -> tekst is in plaats van foto ->
kop -> tekst. Desktop-layout (tekst links, foto rechts naast kop +
paragrafen) blijft ongewijzigd via de grid-rijen/kolommen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Op mobiel (grid-cols-1) volgde de layout de DOM-volgorde, waardoor de
fotoplaceholder onder de tekst stond. Met order-1/order-2 staat de
foto nu bovenaan op mobiel, en blijft de bestaande tekst-links/foto-
rechts indeling behouden vanaf sm.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
De tijdelijke pull_request-conditie in deploy-test zorgde dat elke PR
automatisch naar test deployde. Dat is niet meer gewenst: een
test-deploy vanaf een feature-branch kan al zonder PR via een
handmatige workflow_dispatch-run met 'Deploy to Test' aangevinkt.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Ververst hero-, werkwijze- en over-teksten, plaatst de Over-sectie
voor de pakketten en vervangt de tech-stack-lijst door een
fotoplaceholder zodat bezoekers straks een gezicht bij het bedrijf
zien.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
SluijsensandClaude Sonnet 5