Two identities, one site: the Code / Lens switch

I’m two things that don’t usually share a homepage: a developer and a photographer. Instead of picking one, this site has a switch - Code and Lens - up in the nav. Flip it and the whole site changes temperament.

One toggle, everything responds

Both modes are just sets of CSS custom properties on <html data-mode="…">. Nothing re-renders; the tokens change and the page re-paints:

:root[data-mode="code"] {
  --bg: #0a0b0d;          /* cool, dark */
  --font-heading: var(--font-sans);
  --accent: #7cf5c4;
}
:root[data-mode="lens"] {
  --bg: #f6f1e9;          /* warm, light */
  --font-heading: var(--font-display);
  --accent: #c4522e;
}

The choice is stored in localStorage and applied before first paint, so there’s no flash of the wrong theme.

The stack

• Astro for near-zero JavaScript on content pages.
• MDX content collections for posts, projects, photos - all type-checked.
• Expressive Code for the syntax highlighting you’re reading right now (copy button included - try it).
• Tailwind v4 for layout, design tokens for color.

Also for the robots

Every post has a raw Markdown twin at /blog/<slug>.md, there’s an llms.txt mapping the site for language models, JSON-LD on every page, and an RSS feed. Built to be read by people and machines.

More on how specific pieces work in later posts.