Case study
How this website was built
A freelancer with no clients can’t show testimonials. So I built this site to be checked: the decisions behind it, how it was made, and the test results once it’s live.
- Client
- Me. This is my own business site.
- Type
- Business website, English and German
- Pages
- 18 in each language
- Stack
- Astro 7 · TypeScript · plain CSS
- Built with
- Claude Code, an AI coding tool, directed by me
The brief
One site for three services, in two languages, that a small-business owner understands in five seconds and a developer can inspect without finding shortcuts. Every claim on it had to be checkable.
Constraints
- No cookies and no ad tracking, so no cookie banner.
- Two languages with matching pages, not a translated homepage.
- No AI-generated images. Every visual is drawn in code.
- Built next to school, so it had to be simple to maintain.
How it was made
I planned this site and directed the work: what it says, how it looks, what it must never claim, and which tests it has to pass.
Claude Code, an AI coding tool, did much of the implementation from those plans.
Every page is checked with automated accessibility and layout tests, in English and German, in the light and the dark theme.
No image on this site is AI-generated.
Why I tell you this
It’s how I work for clients too. AI tools speed up the building. I decide what gets built and check that it’s right. I don’t put your files or customer data into AI tools without asking you first.
Stack
- Framework
- Astro 7, static output: every page is a plain HTML file, with no server to run.
- Language
- TypeScript in strict mode.
- Styles
- Plain CSS with design tokens. No CSS framework.
- Fonts
- Geist, Geist Mono and Archivo, self-hosted and trimmed to the characters I use: 43’736 bytes in total.
- Security
- A content security policy on every page.
- Cookies
- None.
Font size measured when the font files were built, on 8 November 2026.
Decisions, and why
A static site with Astro
Every page is plain HTML before it reaches you. There’s no server to keep running and no plugins to patch, which is also why my client sites need so little maintenance.
Plain CSS, no framework
One set of colour and spacing tokens drives both the light and the dark theme. Nothing is loaded that the page doesn’t use.
Self-hosted, trimmed fonts
The fonts load from this site, not from Google, so no visitor data goes to a third party. Only the characters and weights I use are included.
Visuals drawn in code
The tables, wireframes and diagrams are SVG or HTML. They’re sharp on every screen, switch with the theme, weigh almost nothing, and show the real work instead of stock imagery.
A free tool instead of testimonials
I can’t show client reviews yet, so the CSV checker lets you test my work directly. It runs in your browser, so your file is never uploaded.
Motion only where something changes
The table on the home page snaps into place once per visit and never loops. With reduced motion turned on in your system, you see the finished state straight away.
Design decisions
- 01
Clean grids, heavy headings
I compared several design directions and picked a mix of two: clean hairline grids and calm spacing from one, heavy condensed headings and strong contrast from the other.
- 02
One colour: my signature blue
Blue marks what to do next and what is in place: buttons, the blue band, the last cell of the logo. Text on it is always white, at a contrast of 5.88:1.
- 03
Dashed means not real yet
Fictional projects and numbers I haven’t measured yet get a dashed outline. Solid means real. You can see it on this page: the test results below stay dashed until I’ve measured them.
Test results
I’ll publish the numbers after launch, measured on the live site, with date, tool and settings. No estimates in the meantime.
| Measure | Tool | Result |
|---|---|---|
| Performance score, mobileLighthouse | Lighthouse | Not measured yet |
| Accessibility scoreLighthouse | Lighthouse | Not measured yet |
| Best practices scoreLighthouse | Lighthouse | Not measured yet |
| SEO scoreLighthouse | Lighthouse | Not measured yet |
| Largest Contentful PaintLighthouse, lab | Lighthouse, lab | Not measured yet |
| Cumulative Layout ShiftLighthouse, lab | Lighthouse, lab | Not measured yet |
| Total Blocking TimeLighthouse, lab | Lighthouse, lab | Not measured yet |
| Accessibility violationsaxe | axe | Not measured yet |
| Homepage transfer sizeBrowser dev tools | Browser dev tools | Not measured yet |
| JavaScript and CSS on the homepageBrowser dev tools | Browser dev tools | Not measured yet |
| Requests on the homepageBrowser dev tools | Browser dev tools | Not measured yet |
| Third-party requestsBrowser dev tools | Browser dev tools | Not measured yet |
| Cookies setBrowser dev tools | Browser dev tools | Not measured yet |
Performance budget
A target I set before building, not a result: fonts at most 70 KB in total. The font files measure 43’736 bytes.
Check the cookies yourself
Want a site built like this?
Built the same way for your business: Business website from CHF 390, Complete website from CHF 690.