About This Website
This is the colophon — the rest of the site is the bio. It's hand-built in code and open source. Below: what it runs on, and the one easter egg worth explaining.
The homepage includes five distinct interactive visual components that reinforce the mental models described in each section, all built with React and SVG for smooth, performant animations.
Open source: the full source is on GitHub if you want to see how any of it is put together.
Framework & Build
Astro
Static site generator with component islands architecture
View Transitions
Native browser API for smooth page transitions
Styling
TailwindCSS v4
Utility-first CSS framework with PostCSS
Anonymous Pro
Monospace font for headings and highlights
Plus Jakarta Sans
Sans-serif font for body text
Content & Data
Astro Content Collections
Type-safe content management with Markdown
TypeScript
Type-safe data structures for timeline and structured content
Performance & UX
Link Pre-fetching
Hover-based pre-fetching for instant navigation
Intersection Observer
Scroll-triggered animations for content sections
CSS Animations
Smooth fade-in and transition effects
React Components
Interactive SVG visuals with React for homepage sections
RequestAnimationFrame
Smooth, performant animations for timeline and visual components
A Hidden Pairing
The homepage hero hides a small toy. The portrait is a flip disc, and tapping it (or the three shapes beside it) cycles through a short series of photos, each one paired with a theme that recolors the whole site to match.
How It Works
- Activation: Click or tap the hero photo, or the diamond / circle / hexagon next to it. The circular frame spins to the next photo, the site recolors to that photo's matched theme, and the three shapes bloom and settle back into place.
- Photo and theme as a pair: Each photo carries a hand-picked palette that echoes it: ocean blue for the beach, forest green for the garden, terracotta for Porto, with contrast kept readable.
- Reset: A toast appears bottom-right with a "Reset" button on desktop, or the "Reset Theme" item in the mobile menu, returning to the default photo and theme. The pairing is playful and per-session, so a reload always starts from the default.
Under the Hood
- One cascade: A theme is just a set of CSS custom properties (background, text, accent, border, shadow) set on the root, so everything downstream recolors in one move.
- Live SVGs: The hero shapes, the section illustrations, and the logo read those variables directly, recoloring instantly with no JavaScript redraw.
- Self-adjusting toast: The reset toast recomputes its own background and text against the active theme so it stays legible on any palette.