poppycool.nl / techniek

Techniek

Software stack

Omgeving PROD
Website v1.4.0
Laatst bijgewerkt 2026-09-30
Frontend HTML, CSS, TypeScript
Framework Geen (statische site)
Build Vite 5, TypeScript 5
Webserver LiteSpeed (brotli, gzip als terugval)
Beveiligingsheaders HSTS, CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy (via .htaccess)
Paginagewicht 132 KB (zonder foto's en video)
15,2 KBHTML
12,7 KBCSS
13,7 KBJavaScript
91 KBFonts

Gemeten op de homepage: HTML, CSS en JavaScript brotli-gecomprimeerd zoals de server ze naar moderne browsers verstuurt (gzip als terugval), de fonts als woff2. Foto's (±4 MB in totaal) en de hero-video (13 MB AV1 / 22 MB H.264) vallen hierbuiten.

Tools & diensten

Versiebeheer Git, GitHub
Analytics Google Analytics 4 (G-K7W654796W)
Contactformulier Web3Forms (api.web3forms.com)
Fonts Zelf gehost, woff2 (latin subset, font-display: swap)
Video Zelf gehost, AV1 met H.264-fallback
Indexering sitemap.xml, robots.txt, JSON-LD (schema.org, gegenereerd bij de build)
Website & fotografie JDH Company

Kleuren

Merk

#12223BNavy: basis
#FF8F00Oranje: accent
#E07E00Oranje: hover

Harmonie: complementair. Eén warm oranje accent tegenover een koele navy basis. Geen tweede accentkleur.

Oppervlakken

#12223BPagina
#1B2E4ABanden & kaarten
#22385C → #182A44Contactpaneel

Tekst & lijnen

#FFFFFFKoppen
rgba(255,255,255,.80)IJs: lichte accenten
rgba(255,255,255,.72)Bodytekst
rgba(255,255,255,.55)Gedempt
rgba(255,255,255,.14)Haarlijn

Doorschijnend wit, hier op dezelfde navy achtergrond waar het in de site ook op ligt.

Status

#46C37BVerzonden
#FF9A6AFoutmelding
#E5484DOngeldig veld

Externe merken

#25D366WhatsApp
#FDF497 · #FD5949 · #D6249F · #285AEBInstagram

Typografie

Display Archivo Expanded / 700, 800 / font-stretch 125% / uppercase
Body Hanken Grotesk / 400–800, variabel font / line-height 1.65
H1 (subpagina) Archivo Expanded / 800 / clamp(2.4rem, 7vw, 4.2rem)
H2 Archivo Expanded / 700 / clamp(2rem, 4.5vw, 3rem)
H3 Archivo Expanded / 800 / 1.2rem
Bodytekst Hanken Grotesk / 400 / 1rem / var(--ink-soft)
Labels Hanken Grotesk / 600 / 0.78rem / letter-spacing 0.18em / var(--pc-orange)
Buttons Hanken Grotesk / 600 / 0.95rem
Footer-koppen Archivo Expanded / 0.8rem / letter-spacing 0.14em / uppercase
Footer-bodem Hanken Grotesk / 0.8rem / var(--muted)
Mono ui-monospace, SF Mono, Cascadia Mono, Consolas (alleen deze pagina)
Bestanden 3 × woff2 / 91 KB / zelf gehost