How this site was made
Designed in Figma, built with plain HTML, CSS and JavaScript, deployed on Cloudflare.
Design
Designed in Figma first: layout, type and card style.
Build
No framework, no CMS, no build step. Hand-written HTML pages share one stylesheet. JavaScript handles the contact dialog, the scrolling banner and the screenshot viewer.
- Fraunces for headings, served from the site itself. Material Symbols for icons.
- The photo wall is a CSS grid with named areas.
- Images are WebP, with sizes set so the page doesn't jump while loading.
Deployment
Static files on Cloudflare. A config file points it at the folder and turns on the custom 404 page. The domain, herreman.dev, is registered through Cloudflare, which also handles its DNS.
Search
Per-page titles, descriptions and canonical URLs, a sitemap, and images blocked in robots.txt.