Glassmorphism 2.0

Build a personal blog home page where every readable surface is a frosted glass panel floating over a slowly drifting mesh gradient. The mesh sits in a `position: fixed` layer behind everything and content scrolls over it, so each panel's tint changes as the reader moves down the page. That moving backdrop is the whole trick: `backdrop-filter` only samples what is directly behind an element, so glass over a static flat color reads as grey film.

Lay the page out in a centered wrap of about 1200px with 24px gutters. Under a fixed floating dock, open with a two-column hero (`1fr 1fr`, 36px gap): a rounded portrait on the left, the headline, a glass intro card and three buttons on the right. Below it run a three-column Start-here shelf of article cards, a two-column split of glass list panels, a four-column row of experiment tiles, a two-column grid of project cards with screenshots, and a three-column row of link panels ending in a dark smoked Work-with-me card. Collapse four and three columns to two below 1000px and everything to one below 640px.

Set UI and body in **Geist** at an 18px base, headlines at 600 weight with tight `-0.03em` tracking and sizes up to about 5rem, and **Instrument Serif italic** for exactly one accent word per headline (`learn.`, `first`, `actually`). Use **Geist Mono** at 13px in uppercase with wide tracking for eyebrows, dates and chips. Never use the serif for more than one word in a heading.

Build the glass as one component with three fill strengths: `.glass` at 60% white for cards, `.strong` at 84% for the hero card and dock, and a near-opaque `.smoke` slate panel for dark moments. Every panel gets `backdrop-filter: blur(18px) saturate(170%)`, a 1px white border at 55% opacity, an inset top rim highlight (`inset 0 1px 0 rgba(255,255,255,.7)`), a soft diagonal sheen gradient and a large, very soft drop shadow; contrast comes from fill opacity rather than more blur. The mesh is four blurred radial blobs in slate blue `#6f98d8`, peach `#f2a077`, lavender `#a58df0` and mint `#6fd0bd` over a pale `#e6ecf6` ground with SVG film grain. In dark mode the ground goes to `#060a13`, the glass fills drop to translucent navy `rgba(16,24,40,.56)`, the border to white at 10%, and the blobs deepen to midnight blue, ember, indigo and teal. Primary buttons and the active nav pill use slate `#364f6a` in light mode.

The dock is a fixed pill of strong glass 14px from the top: a gradient `Aj` glass logo tile and wordmark, then links where the active one is a filled slate pill and the AI link is always tinted lavender, then round 40px icon buttons for search and theme. Below 900px collapse it to logo, icons and a menu button that opens a glass sheet. Track the section in view with an `IntersectionObserver` and move the active pill to the matching link.

In the hero, overlay a glass stat lens across the bottom of the portrait (20+ years building, 600+ GitHub stars, blogging since 2012) with big numbers and mono captions, inset 18px from the photo edges so it never covers the face. The list panels hold rows of a 92px rounded thumbnail, title, two-line summary and a mono date column; the Digital Garden panel drops the thumbnails. Experiment tiles get a small glowing orb icon and a row of mono chips.

Animate the blobs on slow 38 to 57 second alternating `transform` drifts, lift hoverable cards 3px with a radial specular highlight that follows the pointer through `--mx`/`--my` custom properties, and scale thumbnail images to 1.04 on hover. Do not add more motion than that; the drift should be noticed only on a second look.

Under `prefers-reduced-motion`, stop the drift, pointer sheen and lifts. Under `prefers-reduced-transparency` or without `backdrop-filter` support, swap every panel to a solid fill. At 400px wide the hero stacks copy above the portrait, the lens stays inside the photo, and nothing scrolls sideways.