Linear-Style Product Aesthetic

Build a personal homepage in the visual language of a modern developer-tool product site: near-black canvas, hairline structure, tight Inter headlines with an ink gradient, and the writing presented as if it were an issue tracker. The page should feel precise and engineered, with colour reserved for tiny labels.

Wrap the whole page in a frame `1202px` wide bounded by `1px` vertical hairlines (`rgba(255,255,255,.08)`). Every section has a top hairline and `96px` vertical padding with a `24px` gutter, and at each place a section line meets the frame draw a `9px` crosshair from two `1px` gradients in `#62666d`. Under the hero put a faint `60px` grid of `rgba(255,255,255,.045)` lines masked by a radial ellipse that fades out from the top centre, plus a soft blue radial glow. A sticky translucent top bar holds the name and a mono sub-line, pill nav links, a search button that reads Search or jump with `⌘` `K` keycaps, and a theme toggle.

Set everything in **Inter** using its optical-size axis: display at `clamp(2.6rem, 6.4vw, 4.75rem)`, weight 600, line height `1.02`, tracking `-0.045em`; section headings at `clamp(1.75rem, 3.2vw, 2.5rem)` with `-0.03em`. Fill the H1 with a vertical gradient from full ink at 35% to ink mixed 58% with the canvas, clipped to the text. Use **Geist Mono** at `13px` for IDs, dates, eyebrows and counts. Body is `16px` to `17px` and the lede `clamp(1.125rem, 1.6vw, 1.3125rem)` in muted `#9197a1`.

The dark theme is the default: canvas `#08090a`, surfaces `#0e0f11`, `#141518`, `#1b1c20` and `#23252a`, ink `#f7f8f8` stepping down to `#c9ced6`, `#9197a1` and `#62666d`, a steel-blue accent `#86a9d6` with a `12%` wash and a `35%` glow. Primary buttons are white with black text; secondary buttons are surface-coloured with a hairline. The light theme mirrors it on `#fbfbfc`. Collections get small coloured dots paired with their names, never colour alone: AI violet `#a99cf7`, Digital Garden green `#5cc28e`, Demystifying Tools amber `#e5b150`, I, AI pink `#f08fb8`, Projects steel `#86a9d6`. Persist the theme in `localStorage` inside try/catch.

The hero opens with an announcement pill (a mono tag on an accent wash, then a line of text), the gradient H1, the lede, three buttons, and a hint line showing the `⌘K` keycaps. Below it, `72px` down, sits the app window inside a `perspective: 2000px` stage, tilted `rotateX(9deg)` and scaled `.985` from the top edge, with a gradient at its bottom 45% fading it into the canvas. The window has a `14px` radius, a `40px` title bar with three grey dots and a breadcrumb, and a body of `240px` sidebar plus main list. The sidebar shows a profile row, views with counts, and collections with coloured dots. The main area has view tabs (Latest, Featured, Series), a group header (Published, 9 of 33), and rows each holding a mono issue ID such as `AI-012` or `DG-011`, a filled check for published, the title, a collection label and a mono date. The window's shadow combines a `1px` light ring, a deep `80px` drop shadow and a `120px` accent glow; that glow is what lifts it off the black.

Follow with a flush row of three hairline-divided stat cells, then card grids where each card carries an issue ID and date in mono above its title, a two-column garden section pairing a compact issue list with one large featured post, four experiment tiles, a feature card for the pattern library with a boxed three-cell stat strip and its blueprint image, a three-tile closing row whose last tile carries an accent radial glow, a newsletter row and a four-column footer. Add a command palette in a native `dialog` opened by `⌘K`, `Ctrl+K` or `/`, with arrow-key selection and Enter to go.

On load, the hero copy rises `12px` with a `4px` blur over `700ms` in staggered steps, and the window tilts in from `rotateX(24deg)`, scale `.94` and `30px` down over `1200ms`. Keep all colour in labels and dots; a coloured card or a gradient background would break the look. Below `900px` the window loses its sidebar and tilt; below `640px` the crosshairs and frame borders disappear and grids collapse to one column with no sideways scroll at `400px`. Under `prefers-reduced-motion` all animation and transitions are off and everything renders in its final position.