Roadmap Visualizer

A dynamic, interactive visualization of the development roadmap/pipeline. This application uses React, Framer Motion, and TailwindCSS to create an engaging scrolling experience that walks users through the software delivery lifecycle.

Features

• Interactive Scroll: Smooth parallax and scroll-triggered animations.
• Generative Backgrounds: Unique, code-generated CSS/SVG backgrounds for each step (no static image assets required).
• Dynamic Content: Data-driven steps with easy-to-update configuration.
• Immersive Effects: Glassmorphism, glows, and motion effects.

Roadmap Steps

1. Local Development / DDEV: Where it all begins.
2. Pull Request Environments / Tugboat: Review changes in isolation.
3. Automated Testing / Playwright: Robots verifying the code.
4. Stabilization Phase: Hardening the release.
5. Automated Updates / Renovate: Keeping dependencies fresh.
6. Scripted Deployments: Boring, reliable releases.

Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn

Installation

npm install

Running Locally

npm run dev

Building for Production

npm run build

Tech Stack

• Framework: React + Vite
• Styling: TailwindCSS
• Animation: Framer Motion
• Icons: Lucide React