# Two identities, one site: the Code / Lens switch
> A colophon for bhattrahul.in - how the site flips between a developer view and a photographer view, and the stack that makes it fast.
Author: Rahul Bhatt
Published: 2026-10-04
Tags: design, astro, meta
Canonical: https://bhattrahul.in/blog/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:

```css title="global.css" {3,10}
: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`](/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.