🛠️ Colophon

A colophon is an old publishing tradition: a note at the end of a book describing how it was made. This is that page for this website. If you're curious about the tools, colors, and small machines behind chadtimbl.in, read on.

The Foundations

This site is plain HTML, CSS, and vanilla JavaScript. There's no framework, no build step, and no bundler; every page is a file you can read with View Source. It started from a licensed Pixelarity template in 2023 and has been rebuilt piece by piece since, to the point where most of what you see (the color system, the galleries, the animation, the navigation) is custom.

The site lives in a Git repository, gets pushed to GitHub, and deploys automatically to Netlify within about 30 seconds of each push. The sitemap and the RSS feed aren't maintained by hand; small shell scripts regenerate them by reading each page's own meta tags, so they can't drift out of sync with the actual pages.

Colors & Themes

The row of colored dots below every page is a palette picker with twelve built-in themes, each with light and dark variants, ordered in a little rainbow. Your choice is remembered between visits, and every palette is checked against WCAG contrast standards so links stay readable in both modes.

The rainbow swatch at the end is a custom color engine. Give it any hex code (or drag the hue slider) and it derives an entire site theme from that one color, in light and dark modes, automatically adjusting the link colors until they meet a 4.5:1 contrast ratio. It works by borrowing the measured lightness and saturation profiles of the built-in palettes and re-hueing them, so even an intense input like neon green produces something coherent.

The Homepage Animation

The little line drawing that draws itself above the homepage welcome heading is a single inline SVG containing twelve icons of things I love: Midna, music, gaming, a book, a water drop, a mushroom, Xena, a leaf, a tree, the ocean, Sophie, and coffee. Each one draws on, plays a small idle animation (a blink, a swaying tail, rising steam), un-draws, and hands off to the next.

There's no JavaScript involved. It's pure CSS: every stroke is normalized with pathLength="1" and animated with stroke-dashoffset, and each icon owns a hand-timed 4.2-second slot of a 50.4-second loop. The colors come from the theme variables, so the ink and paper adapt to whatever palette you've picked. If your system asks for reduced motion, the animation politely becomes a single static drawing of Midna.

Typography

Text is set in Source Sans Pro, with Cormorant Garamond making guest appearances on a couple of quote pages. Both are self-hosted as WOFF2 files, in only the weights the site actually uses, so no request ever goes to a font service.

Performance & Privacy

I want this site to feel instant, and to respect the people reading it. Some of what's going on under the hood:

• Every photo and image is WebP, with square thumbnails for the gallery grids and year-long caching for repeat visits.
• All of the small icons are inline SVGs rather than an icon font, with path data from Font Awesome Free (CC BY 4.0) and a few drawn by hand. Zero render-blocking third-party requests remain on any page.
• instant.page preloads a page the moment you hover its link, which makes navigation feel snappier.
• Analytics is GoatCounter, a privacy-friendly counter with no cookies and no tracking across sites. I can see that a page was visited, and nothing about you.
• Photo lightboxes use GLightbox, loaded only on the gallery pages that need it.

Built with Claude

I make heavy use of Claude Code to build and maintain this site: the color engine, the homepage animation, the gallery workflows, and most of the performance work above came out of working sessions with Claude. The repository includes a detailed CLAUDE.md file describing the site's conventions, which means Claude knows the house rules (image formats, meta tags, accessibility requirements) before touching anything. If you're curious how I work with it, check out Claude Workflow Tips.

Everything Else

The password-protected cat art gallery is encrypted with StatiCrypt, so even the hosting provider only ever sees ciphertext. DNS runs through Netlify. And the "NOW" location pin in the navigation is a custom SVG icon.

If you spot something broken, or just want to talk shop about personal websites, email me. 😊