Y2K Futurism

Build a personal homepage in the Y2K chrome style: metallic gradient type, glossy gel buttons, holographic rims and orbiting sparkles, the way millennium-era tech sites imagined the future. It must still read as a calm, legible blog, so the chrome lives on headings, buttons and borders while body copy stays plain on near-white surfaces.

Center everything in a `1200px` wrap with `24px` gutters. A floating capsule dock sits at the top: a full pill with `8px` padding, a vertical chrome gradient background (`#ffffff` to `#e6ecf3` at 45%, `#cad4e1` at 52%, back to `#eef2f7`) and a 1px border drawn as a second gradient on `border-box` (`linear-gradient(160deg, #ffffff, #9aa9bd 30%, #f4f7fb 50%, #8595ab 75%, #ffffff)`). Inside: a glossy orb logo, pill links where the current page is a Bondi gel, an AI link with a holographic conic-gradient fill, a gel theme toggle and a menu button. Sections below are generous blocks of about `96px` vertical padding.

Set display headings in **Unbounded** at weight 800, wide eyebrows and labels in **Michroma** at `13px` uppercase with `.08em` tracking, body in **Figtree** at `17px` / 1.6, and dates and tags in **Space Mono**. The chrome type effect is a `.chrome` class: a five-stop vertical gradient (`#24365e`, `#4a6488` 38%, `#0a1430` 50%, `#2b4468` 72%, `#0a1430`) clipped to the text with `background-clip: text`, transparent fill and a 1px drop-shadow emboss. The hard dark stop at 50% is the horizon line that makes it read as metal. Fall back to a solid colour where `background-clip: text` is unsupported.

The light theme, Platinum, uses ground `#e3e9f1`, surfaces `#f7f9fc` and ink `#0a1430`, with Bondi `#00718c` as the action colour and hot pink `#b3126f` and lime `#c6ff4d` as sparkle accents. The dark theme, Midnight Chrome, uses ground `#060918` and surfaces `#0f1733`, switches the text gradient to silver (`#ffffff`, `#e3eaf5`, `#95a4be` at 50%, `#f6f9fd`, `#bfcadb`) and turns the gel buttons to bright cyan `#56e0fa` with dark text. Toggle themes from the dock, persist the choice in `localStorage` inside try/catch, and set it in the head before first paint.

The hero is a two-column grid. On the left: a Michroma eyebrow with a four-point star glyph, a chrome H1 at about `clamp(2.6rem, 6vw, 4.8rem)`, a lede, three stat readouts (`22px` radius, a translucent gel fill, the chrome gradient border, an inset white top highlight, an Unbounded number over a Michroma label), and a row with the gel primary button, a ghost button and a text link with an arrow. The gel button is a vertical gradient `#1aa3c2` 0%, `#00788f` 48%, `#005d74` 52%, `#0a7f99` 100% with white text and a cyan glow shadow; the 48/52 split is the glossy highlight. On the right, put the portrait inside an organic blob (`border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%`) with `10px` padding filled by a holographic conic gradient (pink `#ff9de2`, lilac, sky `#8fdcff`, mint, lime `#d4ffa6`, butter, peach), a white radial gloss over the photo's top left, two tilted ellipse orbits around it with a pink dot that rotates once every `36s`, and three twinkling star sparkles. Behind the whole hero, a perspective floor grid (`56px` cells, `rotateX(62deg)`, masked to fade upward) grounds the scene.

After the hero, a Start here shelf shows three featured articles as CD-ROMs: a circular holographic disc with the article art on its face, groove rings and a chrome spindle hole, rotating `160deg` on hover over `600ms`. Then AI and Digital Garden sections of pod cards: `28px` radius, `12px` padding, the chrome gradient border, a glossy top highlight, and images in inset rounded windows with a diagonal reflection streak; the border turns holographic on hover and the card lifts `3px`. Add capsule cards for experiments with a gel icon orb and a type tag, a wide featured-project pod with a blueprint image, a three-cell stat strip and a gel button, and close with a trio of link pods beside a holographic foil Work with me panel, then a chrome footer pod with a large orb monogram and a newsletter form.

Keep the effects to three: chrome text, gel highlights and holographic rims. Do not chrome the body copy, and do not stack glows on everything; the calm surfaces are what make the metal look expensive. Below `960px` the dock collapses to the logo plus a gel menu button that opens a glass panel, the hero stacks with the portrait first at about `280px`, card grids drop to one column, and stat labels switch to Space Mono with no tracking so they fit at `400px`. Under `prefers-reduced-motion` stop the orbit spin, sparkle twinkle and disc rotation.