About this site
A small static website is quick to build, especially with the help of a friendly AI. Surely there isn’t much that can go wrong, right?
With this website, I show what good frontend work means to me: secure, accessible, fast and free of clutter. The following sections explain the thinking behind it.
I built this website with a great deal of attention to detail, Claude Code (Opus 5.5, Extra high), Astro and statichost.eu.
At a glance
- Lighthouse, all four categories
- 100
- MDN HTTP Observatory
- A+
- First visit on a phone
- 89 KB
- Whole site offline
- 480 KB
- Body text contrast per WCAG
- AAA
- Zoom without losing content
- 400%
Security
The site is fully static: no database, no code running on the server, no forms. What isn’t there can’t be attacked. On top of that:
- Content Security Policy: the browser only loads files from this server and only runs the one script allowed by its hash.
- Trusted Types: lock down entry points for injected code like innerHTML.
- HSTS and further headers: enforce HTTPS and stop other sites from embedding this one.
- DNSSEC and CAA: the domain’s records are signed, and only Let’s Encrypt may issue certificates.
- security.txt: explains how to report a vulnerability, as defined in RFC 9116.
The results in independent tests:
| Test | Checks | Result |
|---|---|---|
| Qualys SSL Labs | Encryption and certificate | A+ (IPv4 and IPv6) |
| Snyk Security Headers | Security headers | A+ |
| MDN HTTP Observatory | Headers, HTTPS and redirects | A+ · 140/100 |
| OWASP ZAP | Vulnerabilities of the website | 0 findings |
| Google CSP Evaluator | Content Security Policy | No vulnerabilities |
| Internet.nl | Modern standards such as IPv6, DNSSEC and HTTPS | 100%, Hall of Fame |
Privacy
No cookies, no tracking, no analytics, no embedded content. Fonts and images live on the same server as the pages, so your browser never contacts anyone else. That’s also why there’s no cookie banner: there’s nothing to consent to.
The site is hosted by statichost.eu, a European provider that doesn’t store IP addresses. Even switching languages works without a cookie: the German and English versions have their own addresses, and you switch with a plain link. The privacy policy has all the details.
Accessibility
The goal is WCAG 2.2 level AA, and in many places more:
- Contrast: body text reaches at least 7:1, which is level AAA. Everything else meets at least the required 4.5:1.
- Keyboard: every control can be reached with the Tab key and shows a clear focus ring. Click targets are at least 24 pixels high.
- Screen readers: clear headings and landmarks, alternative text and language attributes. A screen reader reads the “Deutsch” link in German.
- Your settings: the site works at 400% zoom, with wider text and line spacing, in Windows contrast mode, and without transitions when your system asks for reduced motion.
- No JavaScript needed: everything still works with it turned off.
A test script checks every page in both languages with axe-core and tests tab order, zoom, text spacing and contrast mode.
Performance
On a first visit from a phone, the home page loads 8 files totalling about 89 KB.
A few deliberate decisions make that possible:
- No framework in the browser: Astro builds plain HTML when the site is published. The browser only runs one small script, mainly for the app’s offline mode.
- Fonts: four styles at about 50 KB in total, because they contain only the characters the site needs. Nothing jumps when they arrive.
- Images: the portrait as AVIF, WebP and JPEG in several sizes. The browser picks the smallest one that fits.
- Caching: the browser keeps CSS, fonts and images for a year, because their file names change whenever they do. HTML is requested fresh every time, so changes show up immediately.
Installable and offline
You can install the site like an app: in Chrome and Edge with “Install app”, on an iPhone in Safari with “Share” and “Add to Home Screen”. It then opens in its own window, in English if you installed it from the English version.
Once installed, it works without an internet connection too. On first launch, a service worker stores every page in both languages, along with fonts, images and the contact file, about 480 KB in total. If you just visit the site in your browser, nothing is stored.
Attention to detail
- Search engines and previews: structured data from schema.org, information about both languages, a sitemap and dedicated preview images for LinkedIn and messengers.
- Save contact: the contact file with photo is generated at publish time from the same data as the site and lands in your address book with a single tap.
- Print: on paper, the home page turns into a black-and-white business card with QR codes for the website and the contact file.
- For humans and machines: humans.txt says who is behind the site, llms.txt summarises it for AI assistants.
- And a hello to everyone who opens the browser’s developer tools.
Design system
Even a small website benefits from a design system:
- Consistent: colours, type, spacing and components are defined once and look the same on every page.
- Accessible from the start: contrast, focus rings and click targets are checked before a new page is built.
- Easy to change: a change in one place applies to every page.
All rules, with examples, are in the design system.
Figures as of October 2026