Vaporwave / Synthwave

Build a personal homepage that opens on an outrun horizon at night: a striped sun sinking behind a wireframe mountain ridge, a neon grid floor rolling toward the viewer, and the copy on a dark glass card in front of it all. The rest of the page borrows the era's objects (VHS tapes, numbered album tracks, CRT monitors, a neon sign) instead of generic cards, while every paragraph people actually read stays in a plain sans on a solid panel.

Build the horizon as one pure-CSS scene layered behind the hero content with negative z-indexes. A star field fills the top 60%. The sun is a circle about `min(46vw, 500px)` wide with a vertical gradient from sun yellow `#ffd23f` to hot pink `#ff3ea5`, a two-layer pink glow, and a `mask-image` linear gradient that cuts it into outrun stripes: solid to 52%, then transparent bands at 52 to 55%, 63 to 67%, 74 to 79% and 85 to 91% so the gaps widen toward the bottom. An SVG polygon ridge with a cyan stroke and a few interior polylines sits on the horizon at `bottom: 210px`. The floor below is `210px` tall with `perspective: 260px`; its `::before` is a grid of `2px` lines every `56px`, rotated `72deg` on X from the bottom edge and animated by shifting `background-position` `56px` every `1.1s` so the road drives forward. A `2px` neon border and glow mark the horizon line, and a gradient over the floor's top fades the grid into the distance.

The hero content is a two-column grid at `1.15fr 0.85fr`. The left column is a glass panel: deep violet at partial opacity, `1px` lilac border, `10px` radius, `backdrop-filter: blur(6px)`, a pink outer ring and a large dark shadow. Inside it: a cyan VT323 eyebrow (Now playing, place), an Orbitron 900 H1 at `clamp(2rem, 4.3vw, 3.6rem)` filled with a chrome gradient (white, pale cyan, sky blue at 49%, a hard deep-violet stop at 50%, then pink to blush), with a **Mr Dafoe** brush-script phrase set in neon pink on its own line, rotated `-4deg` and glowing. Below: a Space Grotesk lede at about `18px`, a three-cell stat strip with VT323 numbers in sun yellow, a solid pink button, a cyan outline button and an underlined text link. The right column is a CRT monitor tilted `2deg`: a rounded plastic bezel, the portrait on a screen with scanlines and an RGB-split PLAY and channel overlay in VT323, a brand label and three knobs, one a glowing pink power light.

Use Night Drive as the default theme: ground `#0b0320`, panels `#1b0a40` and `#26105a`, text `#f5ecff`, muted `#cdbcf2`, with pink `#ff3ea5`, cyan `#2ee6ff`, sun yellow `#ffd23f` and orange `#ff8a3d` as the neon set. The alternative Mall Day theme is a pastel vaporwave daytime: blush and pale cyan sky, lilac grid lines, no stars, and text and links darkened to deep magenta `#b0126b` and teal `#006b78` so they keep AA contrast. Label the toggle with the mode's name in VT323, store it in `localStorage` inside try/catch, and apply it before paint.

Number the sections like tracks: each heading has an outlined Orbitron track number (`01`, `02`) in the accent colour beside an Orbitron title and a sub-line. Featured reads are cassette tapes: a sun-gradient label with the article art tinted magenta and cyan with scanlines, a Side A badge, and a reel window whose dotted reels spin only on hover while the tape lifts `4px` and tilts `-0.6deg`. Article cards unify mismatched illustrations with the same colour-blend tint, lifted on hover. The Digital Garden is an ordered tracklist with VT323 dates. Experiments are short cards with a coloured top edge. The featured project puts its blueprint image in a CRT beside an LCD stat strip. Close with two link panels and a black neon box whose script heading glows and flickers, then repeat the horizon scene as the footer's header.

Limit glow to display type and a few edges. Body copy never glows and always sits on a solid panel, and a whisper-level scanline veil over the page is enough; heavier scanlines make the text unreadable. Below `900px` the hero stacks with the CRT first at up to `420px` wide and level, the sun centres at `80vw`, the floor shrinks to `170px`, the nav collapses behind a MENU button, and grids drop to one column without sideways scroll at `400px`. Under `prefers-reduced-motion` stop the grid drive, the neon flicker and the reel spin.