Isometric Illustration

Build a personal blog home page as a little isometric model city. Every card, row and panel is an extruded block seen at true 30-degree isometric angles, and each major section opens on an inline-SVG diorama: a small workshop for the hero and a city block of towers for the projects header. Text always stays upright and unrotated; only the faces around it are skewed.

Paint the ground as a faint isometric grid: two `linear-gradient` hairlines at 30 and 150 degrees, `background-size: 69.28px 40px`, on a pale `#edf1f7`. Use a wrap of about 1180px. The hero is two columns: chunky headline, lede, buttons and three stat pillars on the left, the workshop diorama on the right. Then a three-column Start-here row of image cards, a tinted plate band holding a three-column AI writing grid, a Digital Garden list of full-width block rows with a small cube icon and mono date, a four-column row of experiment blocks, the city-block header band, open-source rows with the screenshot on the left half, and a connect row. Separate bands with a 2px ink rule.

Set headings in **Bricolage Grotesque** at 800 weight: `h1` at `clamp(2.4rem, 5.4vw, 4.2rem)` with `-0.025em` tracking, with key words sitting on butter highlighter marks (a `#fbe5a0` band behind the lower half of the text). Body is **Figtree** at 18px, and meta, tags and eyebrows are **JetBrains Mono** in small uppercase. Section heads pair the title with a small isometric cube icon.

Build the block as one component. The element is the white front face with a 2px ink border; its `::before` is the top face, `height: calc(var(--d) * .5)` above it with `transform: skewX(-60deg)` from the bottom-left; its `::after` is the right face, `width: calc(var(--d) * .866)` beside it with `transform: skewY(-30deg)` from the top-left. Set a right and top margin equal to those offsets so neighbours never collide, and drive depth from `--d` (12px shallow, 22px default, 34px deep). Five hues each have a top, mid and side shade: slate, violet `#7a62cf` for AI, mint `#3cae84` for the Digital Garden, butter `#e9b93a`, and tomato `#e0634c` for stories; a tint class sets `--top` and `--side`. In dark mode the ground goes to `#0e141e`, faces to `#1b2433`, and each side shade darkens further so the light still reads as coming from the top left.

Generate every illustration from one projection function, screen x = (x - y) cos30 and screen y = (x + y) sin30 - z, emitting three polygons per box with classes like `t-violet`, `l-violet` and `r-violet` for top, left and right faces, so CSS recolors the whole diorama per theme. Map flat things (the portrait on the back wall, a monitor of code, a poster) onto a face with an SVG `matrix(0.866, ±0.5, 0, 1, x, y)` transform. The stat pillars are three extruded columns of different heights in tomato, butter and mint with the number and label beneath.

The nav is a row of keycaps with 2px ink borders: the current link is pressed in, filled butter and shifted `translate(2px, 2px)` into its own 1px shadow, while AI keeps a violet keycap. Move the pressed key to the link for the section in view. Hovered blocks lift 6px with a hard offset shadow over 180ms, the robot and a small box in the diorama bob 6px on a 4 second loop, and the robot's eye blinks. Keep animation to those few props; the city should feel still.

Under `prefers-reduced-motion`, stop the bob, blink and lift. At 400px wide the hero stacks with the diorama below the stats, every grid becomes one column, blocks keep their faces, and nothing scrolls sideways.