— /colophon
colophon.
A teardown of how this site works—the background, the live presence, the type. No framework hiding the seams.
— the canvas
The drifting field behind everything is a single <canvas>. Particles wander on slow vectors; when the cursor nears, thin lines stitch between the points closest to it. Canvas over SVG or DOM because it's hundreds of moving points a frame—the others would buckle.
— presence
The Discord card is live. A websocket to the Lanyard API pushes status and activity the moment they change, with a REST poll as fallback if the socket drops. The GitHub widget below it pulls profile and top repositories straight from the public API—no token, no server.
— the enter screen
The terminal gate is a small piece of theater. Type enter and it authenticates against nothing, then dissolves. A flag in sessionStorage means it only asks once per visit—return within the session and it's already open.
— type
- Fraunces
- a variable optical-size serif. Set in italic at its lightest weight and pushed to extreme sizes, it carries the name and every heading
- JetBrains Mono
- the machine voice — labels, the clock, the console, every uppercase tag. Light, small, wide-tracked
— palette
- #0b0b0c — bg
- #e8e6e1 — fg
- #8a8780 — fg-dim
- #4a4842 — fg-faint
- #d9c7a1 — accent
— stack
- plain HTML, CSS, JavaScript
- no framework, no build step, no bundler — files served as written
- vanilla JS, one IIFE per concern
- background, cursor, presence, console — each isolated in its own file
- Vercel
- static hosting; a push to main ships it