← All kits
Website themeMade with Claude Code, Astro and EmDash
Roadmap 2 website theme
Your site as a road you drive down, with milestone pins, swim lanes and a board you can tidy up.
Copy the prompt, paste it into Claude Code, swap in your story.
How to use it
- Copy the promptUse the button here or in the kit bag.
- Paste it into ClaudeClaude Code in your own site's folder, or any AI coding tool.
- Make it yoursSwap in your name, your work and your colours.
The prompt
Build me a personal website styled as a product roadmap you drive along. Look: - A scroll-driven 3D road running down the page: solid slate ahead of you, darker with yellow dashes behind you as you travel. A small "you" dot moves along it. - Milestone pins stand up beside the road as you reach them (Shipped, Now, Next), each opening a card. - Light and dark mode, graph-paper background, display font Bricolage Grotesque, body font Figtree, one accent colour (#FF5C7A). Sections along the road: a welcome card with the current sprint, a draggable board of cards (looks only, mouse only, with a "Tidy up" button that puts them back), swim lanes for my projects (Now / Next / Later), my latest videos, and one email sign-up box at the end of the road. Rules: - Big numbers read big (MRR in millions, not thousands). - Respect prefers-reduced-motion: the road becomes a static line and pins are simply shown. - Works on a phone with no sideways scroll. - All content comes from a CMS so I can change it without touching the design.
The second theme my site can switch to. Press Live preview to drive the road, or copy the prompt to build your own.
