Cosmic / Space

Build a personal blog home page set in deep space, where the author is the sun. The hero is a working orbit system with the portrait at its centre and the site's sections as labelled planets on rings, the nav is a row of planets on one shared orbit, and collections are coloured by stellar class. The page should feel open and calm: lots of dark sky, small bright points, slow motion.

Paint the sky once as a `position: fixed` layer behind everything: three large soft radial nebula glows (violet top right, blue left, a faint orange rising from the bottom) over a near-black `#03060f`, plus two star layers built only from tiny `radial-gradient` dots tiled at deliberately different sizes (197px, 353px, 419px, 457px, 521px) so the repeat never lines up. The upper star layer twinkles by fading opacity between 0.25 and 0.95 on a 7 second alternate loop. Use a wrap of about 1180px; the hero is two columns (`1.05fr 1fr`), then a three-column Start-here list ranked by apparent magnitude, an AI grid of image cards, a Digital Garden feature card beside a dated list, four experiment cards, a writing header with a small orbit diagram drawn behind its heading, two featured and popular list panels, wide project cards with the screenshot on one side, and a connect row.

Set headings in **Unbounded** at 600 to 700, the hero around 4rem with the last word in gold `#ffcf6e`. Use **Atkinson Hyperlegible** for body at 17 to 18px, and **Space Mono** in spaced uppercase for nav labels, eyebrows, stat captions and the hover hint.

Colour by stellar class: gold sun `#ffcf6e` for Home, class G warm yellow for the Digital Garden, class O blue `#86dcff` for AI, class A white-blue for Projects, violet `#b0a3ff` for Patterns, orange `#ffb26b` for About, and coral `#ff9582` for stories. Each section header has a tiny orbit mark in its class colour, and card eyebrows lead with a class-coloured dot. Surfaces are deep navy `#0c1633` with a 1px `#26356a` line and text `#eef2ff`. Light mode turns the sky to a pale `#eef1f7`, darkens the gold to `#855700` for contrast, drops star opacity and stops the twinkle.

The nav is a dark bar with a ringed-planet `AJ` logo and stacked `Staff Engineer / Antonin`, then links in Space Mono where each sits on a shared dashed orbit line and carries a 10px planet: a radial gradient from a white highlight through its class colour to a darkened rim, with a soft glow. The current link's planet gets a Saturn-style ring (`box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--c)`) and a 2px underline in its colour, so state never depends on colour alone. Move the ring to the link for the section in view. Add a pill search field and a round theme button.

In the hero, place the portrait as a round sun with a gold ring and a wide glow, ringed by four concentric dashed circles at 24%, 15%, 6.5% and 0% insets that rotate at 70s, 110s, 160s and 230s per turn. Each ring carries one labelled planet pill (Writing, AI, Projects, Patterns, About), and each label counter-rotates so the text stays upright. Pause every ring when the system is hovered or focused, and say so in a small mono caption beneath it. Keep a plain stat strip and a gold primary button beside it so nobody has to chase a moving link.

Under `prefers-reduced-motion`, stop the orbits and twinkle and place the planets at fixed angles. At 400px wide the orbit system moves below the copy and scales down, the stats wrap two per row, grids drop to one column, the writing header's orbit diagram is clipped to the viewport, and nothing scrolls sideways.