Colophon
Draft. Measured numbers arrive as the live parts ship.
What this is
A static site with a small live backend, built to show my work rather than describe it. Where a number on this site isn't live yet, the page says so instead of showing a guess.
Stack and why
Pages are built ahead of time with Astro, so they ship no JavaScript unless a widget needs it. Widgets are React islands that load only when they scroll into view. Nothing here needs HTML rendered per request.
One Cloudflare Worker serves the pages as static assets and answers /api/* itself. Page requests never run the Worker. D1 stores the results of checks that a cron trigger runs every five minutes. That's the whole backend, configured in one wrangler.jsonc.
How the live parts work
Every five minutes the Worker's cron fetches the homepage, the status API and the game's status endpoint, and writes the results to D1. The homepage fetch goes through Cloudflare's front door like a visitor's, but it starts inside Cloudflare's own network, so a Cloudflare outage would stop the checks too.
API latency is the Worker's own timing of real visitor requests, counted in fixed buckets, so the panel shows the p95 as "at most" a bucket edge rather than a falsely precise number. The cron's own checks aren't counted.
How this page was served traces your request: your browser's timing for the page, then one API call carrying a traceparent header, answered with the Worker's and D1's spans. Browser and server clocks can't be compared, so the network time between them is an estimate, and it's labeled that way.
Design
The site is styled like a label maker: section names on embossed tape, status words as rubber stamps, cool grays everywhere else. Light by default, with a dark theme where the tape turns light and the ink dark. Text is IBM Plex Sans; labels, data and tape are IBM Plex Mono.
Live values will get the same treatment, and they'll change only when the data does.
| Token | Light | Ratio | Dark | Ratio |
|---|---|---|---|---|
| bg | #ECEFF3 | — | #121418 | — |
| surface | #FFFFFF | — | #1B1E24 | — |
| raised | #E2E6EC | — | #242832 | — |
| text | #15171B | 15.56 / 17.94 / 14.32 | #ECEEF2 | 15.87 / 14.37 / 12.69 |
| text-muted | #4C5361 | 6.70 / 7.73 / 6.17 | #A3A9B5 | 7.81 / 7.08 / 6.25 |
| accent | #1F5FD6 | 4.97 / 5.73 / 4.57 | #7FB0FF | 8.39 / 7.60 / 6.71 |
| focus | #1F5FD6 | 4.97 / 5.73 / 4.57 | #7FB0FF | 8.39 / 7.60 / 6.71 |
| stamp | #B42C7C | 5.07 / 5.85 / 4.67 | #FF8FCB | 8.82 / 7.98 / 7.05 |
| status-ok | #0F6E43 | 5.46 / 6.30 / 5.03 | #6FDCA4 | 10.93 / 9.90 / 8.74 |
| status-warn | #8A5A00 | 5.14 / 5.93 / 4.73 | #FFD37A | 13.04 / 11.81 / 10.42 |
| status-fail | #B3261E | 5.67 / 6.54 / 5.22 | #FF8F8F | 8.41 / 7.61 / 6.72 |
| border-control | #6E7584 | 4.01 / 4.62 / 3.69 | #7C8494 | 4.90 / 4.44 / 3.92 |
| hairline | #C9CED6 | 1.37 on bg | #2E333C | 1.45 on bg |
| tape-ink | #FFFFFF | — | #121418 | — |
| tape-black | #15171B | — | #E4E7EC | — |
| tape-blue | #1F5FD6 | — | #8DB8FF | — |
| tape-green | #127A4B | — | #7EDBAA | — |
| tape-pink | #B42C7C | — | #FF9ACF | — |
Accessibility
The target is WCAG 2.2 AA in both themes. Automated axe checks and keyboard tests run on every page, in both themes, on every pull request. Motion respects your reduced-motion setting, nothing needs dragging, and every target is at least 24 by 24 pixels.
Known gaps: I haven't done a full screen-reader pass with VoiceOver yet. It's on the list before launch.
Performance
The budgets every build is checked against, on a mobile Lighthouse run:
- Performance score at least 90, accessibility 100, best practices at least 95.
- Largest contentful paint within 2.5 seconds; cumulative layout shift within 0.05.
- At most 20 KB of JavaScript (gzip) before any widget loads.
- At most 250 KB of fonts on a page, and no image over 200 KB.
Cost
Built to run inside Cloudflare's free Workers and D1 plans, so the only bill is the domain. Page views are static files and don't count as Worker requests; only the API and the five-minute checks do.
Usage numbers appear here when the build can read Cloudflare's analytics.
Privacy
No analytics, no cookies and no third-party scripts. Your theme choice stays in your own browser's storage. The Worker doesn't log or store IP addresses.
Credits
IBM Plex Sans and IBM Plex Mono are under the SIL Open Font License, self-hosted from Fontsource.