Glass Precision

Build a single-page personal site that sets frosted glass inside a precise technical frame, the way an issue tracker or a drafting sheet would: hairline rules, crosshair marks where lines meet, small mono IDs on every post, and square-ish corners. The glass supplies the softness and the frame supplies the order, so neither has to work hard.

Centre a 1280px frame with an outside margin of `clamp(8px, 2.4vw, 32px)` and draw 1px hairline side rules down its full height behind everything. Split the page into stacked bands, each with `border-top: 1px solid` at 14% ink alpha and padding of `clamp(44px, 6.5vw, 88px)` vertically and `clamp(16px, 3.4vw, 44px)` horizontally. On every band's top rule place a 13px crosshair at both frame edges, drawn as two 1px linear gradients (one vertical, one horizontal) on `::before` and `::after` at about 55% ink alpha, and pin a small glass pill on the rule at the left padding edge that names the section (`§ 02 · About` in 0.8125rem Geist Mono, a 1px line border, the strong glass fill and a 12px blur). The first band has no rule and 118px of top padding to clear the dock. Behind the hero only, lay a 64px square grid of 6% lines masked with a radial ellipse so it fades out from the top left.

Use Geist at an 18px base for body and UI, Instrument Serif italic for exactly one accent word per headline at 1.08em, and Geist Mono for IDs, labels, dates and tags. The home headline is `clamp(3rem, 6.4vw, 5.9rem)`, -0.048em tracking, 0.96 line height. Radii are deliberately small for glass: 16px for panels, 12px for cards and 6px for ID chips.

The ground is a darker blue-grey `#d8dfeb` in light and `#03050b` in dark, ink `#0c1626` and `#eef3fb`. The backdrop is an aurora of four long elliptical bands (around 78 by 30 vmax), each a closest-side radial gradient rotated between -14 and 12 degrees, in indigo, violet, teal and rose (`#4f6fc8`, `#6a4fc9`, `#2f9a8e`, `#c0628f` in light and their deep versions in dark), blurred 24px, plus a skewed curtain and a fine grain, screen-blended in dark mode. Keep it darker than a usual pastel mesh so the hairlines read against it. Glass is `rgba(255,255,255,.62)` in light and a deep navy at similar alpha in dark, `backdrop-filter: blur(20px) saturate(170%)`, a white rim highlight, a long soft shadow and a pointer-following specular highlight; use a 0.84 strong fill for cards that hold text. Buttons use the brand slate `#364f6a`. Ship a light/dark toggle that honours the system preference.

The home hero is a two-column grid at 1.15fr and 1fr. On the left: a mono eyebrow with a status dot, the headline, a strong glass card with the lede and three buttons, and under it a single issue row in glass reading `AI-012`, a filled green published-status check, `Latest: I Built an AI-Friendly UI Pattern Library`, an AI label and the date. On the right: the portrait at 4:4.4 with corner ticks drawn 8px outside it (eight 16px hairline gradients, two at each corner), a dark translucent mono tag in its top-left corner reading `40.01° N · 105.27° W`, and under it a glass stat strip of three cells split by 1px hairlines, each a small mono key over a large number.

The About hero follows in its own band: a tall portrait (at least 520px) inside the same corner ticks with a `Boulder, Colorado` tag, beside a strong glass card at 0.9fr and 1.1fr holding a mono eyebrow, `Hi, I'm Antonin.` with the name in serif italic, a lede, a short paragraph, a hairline-bordered three-cell stat table and two buttons. Then a three-column grid of image cards for Start here, another for the latest AI writing, each card a glass panel with a 16:9 image inset 8px and a boxed mono ID (`AI-011`, `DG-004`) beside a coloured collection label. Then a four-up tile grid for AI experiments where the tiles share hairline borders using a 1px gap over a line-coloured container, and a three-panel elsewhere band ending in a dark smoke contact card. Close with a footer band tagged `§ END` holding navigation, links and a newsletter field.

Motion is quiet: the aurora bands drift over 40 to 62 seconds, cards lift and their images scale to 1.03 on hover over about 150 to 500ms, and the dock link for the section in view is marked current. Don't use list views for writing; every listing is an image card. Don't add more ornaments than the crosshairs, tags and ticks, and don't round the corners up to make it friendlier; the squareness is the point.

Below 900px stack the hero to one column with a 4:3.4 portrait; below 860px stack the About hero; grids drop to two columns at 1000px and one at 640px, where the crosshairs shrink to 11px. With `prefers-reduced-motion` stop the aurora drift and hover scaling; with `prefers-reduced-transparency` make panels near-solid.