A dual-academy interactive roadmap dashboard for tracking Software Engineering and AI Automation progress. Level up, complete quests, defeat boss battles, unlock achievements, and build a project vault — all with gamified progress tracking and persistent local storage.
Career OS transforms a 6-month career roadmap into an interactive RPG-style dashboard. It's designed for self-directed learners who want to:
- Track progress across two academies (Software Engineering & AI Automation)
- Stay consistent with daily quests and streak tracking
- Visualize the journey through 6 themed levels (months), each with quests, boss battles, and rewards
- Build portfolio projects with structured documentation and GitHub integration
- Earn achievements across Git, Cloud, Security, Data/AI, Portfolio, and Career categories
- Keep momentum visible with XP tracking, progress bars, and floating particle effects
Career OS transforms a 6-month career roadmap into an interactive RPG-style dashboard. It's designed for self-directed learners who want to:
- Track progress across two academies (Software Engineering & AI Automation)
- Stay consistent with daily quests and streak tracking
- Visualize the journey through 6 themed levels (months), each with quests, boss battles, and rewards
- Build portfolio projects with structured documentation and GitHub integration
- Earn achievements across Git, Cloud, Security, Data/AI, Portfolio, and Career categories
- Keep momentum visible with XP tracking, progress bars, and floating particle effects
✦ Click any quest, boss battle, or achievement badge — progress saves automatically ✦
Animated title, stat cards, and overall progress bar
 📊 Mission Control — XP, streaks, daily quests, academy progress |
 💻 Academy snapshot with level, XP, streak, and weekly goals |
 🏗️ Collapsible level progression with tech/skills/projects tracking |
 🌳 Skill tags + monthly unlock order |
 🎮 6 levels with quests, boss battles, and rewards |
 🏅 7 categories, 50+ achievements to unlock |
 🏗️ Project vault — software vs AI groupings |
 🐙 GitHub repo strategy and workflow templates |
 📄 Resume structure, skills, and certifications guidance |
 🖥️ Portfolio website structure guide |
 ✅ Final December launch checklist |
All screenshots captured from the live app. Colors, layout, and content reflect the actual dashboard.
- 6 Levels (Months) — July through December, each with a unique theme (Full-Stack → Cloud → DevOps → Security → Data/AI → Career)
- Quest System — Click-to-complete quests with persistent checkmarks and strikethrough animation
- Boss Battles — Major milestones that unlock the next level
- Rewards — Each level unlocks new tracks and awards unique badges
- XP Tracking — Real-time XP calculation based on completed quests and bosses
- 7 categories with 50+ achievements across Git, Cloud/DevOps, Security, Data/AI, Portfolio, Consistency, and Career
- One-click unlock with fanfare sound effect and toast notifications
- Progress factored into overall completion percentage
- Software Engineering Academy — Full-stack, cloud, DevOps, security, and career readiness
- AI Automation Academy — Prompt engineering, workflow automation, RAG, AI agents, and production AI deployment
- Independent level progression, XP tracking, streak counts, and weekly goals per academy
- Collapsible per-academy level progression with tech stack, skills, and mini-projects
- Already-unlocked skills and planned unlock order with monthly milestones
- Interactive skill tiles with rank-up animation
- 6 flagship portfolio projects with detailed documentation
- Goal → Features → Skills Learned → Resume Impact sections per project
- Grouped by academy (Software vs AI)
- GitHub plan with repo strategy, commit conventions, branch strategy, and PR/issue templates
- Resume plan with skills section guidance, project ordering, and certification advice
- Portfolio website structure guide
- Final December launch checklist
- Dark RPG-inspired theme with scanline overlay and pixel accents
- Motion-animated title with blur reveal
- Floating XP particles on interaction
- Click spark effects
- Sound effects (Web Audio API synthesis — no external files needed)
- Keyboard shortcut: press
Sto toggle sound - Scroll progress indicator
- Scroll-spy active navigation
- Toast notifications for level clears and achievement unlocks
- "Back to top" FAB button
- Progress reset with confirmation dialog
- All progress saved automatically to
localStorage(with optionalwindow.storageAPI support) - Survives page refreshes and browser restarts
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 8 | Build tool and dev server |
| Motion | Animation library (Framer Motion API) |
| Web Audio API | Retro RPG sound effects |
| CSS Custom Properties | Theming system with 6 color tracks |
| IntersectionObserver | Scroll reveal animations and active section tracking |
| localStorage | Persistent progress storage |
- Node.js 18+
- npm, pnpm, or yarn
# Clone the repository
git clone https://github.com/your-username/career-os.git
cd career-os
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run previewsrc/
├── components/
<<<<<<< HEAD
│ └── BlurText.jsx # Animated text reveal component
├── data/
│ ├── academies.js # Academy configuration (Software + AI)
│ ├── achievements.js # 50+ achievements across 7 categories
│ ├── aiAutomationAcademy.js # AI Automation Academy: 6 levels, skills, projects
│ ├── careerContent.js # Career planning: GitHub, resume, portfolio, checklist
│ ├── dailyQuests.js # Daily quest types and low-energy options
│ ├── index.js # Re-export barrel
│ ├── levels.js # 6 monthly levels with quests and boss battles
│ ├── misc.js # Color tokens, nav links, storage key
│ ├── monthlyRoadmap.js # Week-by-week roadmap for all 6 months
│ ├── projects.js # 6 flagship portfolio projects
│ └── softwareAcademy.js # Software Engineering Academy: 6 levels, skills, projects
├── hooks/
│ ├── Reveal.jsx # Scroll-reveal wrapper component
│ ├── useClickSparks.js # Mouse click particle effects
│ ├── useCodexProgress.js # Central progress state (quests, bosses, achievements)
│ ├── useFloatingXP.js # Floating "+XP" particle system
│ ├── useReveal.js # IntersectionObserver scroll-reveal hook
│ ├── useSounds.js # Web Audio API sound synthesis
│ └── useToast.js # Toast notification hook
├── App.css # Legacy styles (minimal)
├── App.jsx # Main application component
├── index.css # Complete theme and layout styles
└── main.jsx # React entry point
│ ├── Dashboard.jsx # Mission Control — XP, streaks, today's quests
│ ├── AcademyOverview.jsx # Academy snapshot cards
│ ├── AcademyLevelProgression.jsx # Collapsible level-by-level progression
│ ├── SkillTree.jsx # Skill tags + unlock order
│ ├── LevelsSection.jsx # 6 levels with quests, bosses, rewards
│ ├── Achievements.jsx # Trophy case across 7 categories
│ ├── Projects.jsx # Project vault — software vs AI
│ ├── GitHubPlan.jsx # GitHub repo strategy
│ ├── ResumePlan.jsx # Resume planning cards
│ ├── PortfolioSection.jsx # Portfolio structure guide
│ ├── FinalChecklist.jsx # December launch checklist
│ └── BlurText.jsx # Animated text reveal component
├── data/
│ ├── academies.js # Academy configuration (Software + AI)
│ ├── achievements.js # 50+ achievements across 7 categories
│ ├── aiAutomationAcademy.js # AI Automation Academy: 6 levels, skills, projects
│ ├── careerContent.js # Career planning: GitHub, resume, portfolio, checklist
│ ├── dailyQuests.js # Daily quest types and low-energy options
│ ├── index.js # Re-export barrel
│ ├── levels.js # 6 monthly levels with quests and boss battles
│ ├── misc.js # Color tokens, nav links, storage key
│ ├── monthlyRoadmap.js # Week-by-week roadmap for all 6 months
│ ├── projects.js # 6 flagship portfolio projects
│ └── softwareAcademy.js # Software Engineering Academy: 6 levels, skills, projects
├── hooks/
│ ├── Reveal.jsx # Scroll-reveal wrapper component
│ ├── useClickSparks.js # Mouse click particle effects
│ ├── useCodexProgress.js # Central progress state (quests, bosses, achievements)
│ ├── useFloatingXP.js # Floating "+XP" particle system
│ ├── useReveal.js # IntersectionObserver scroll-reveal hook
│ ├── useSounds.js # Web Audio API sound synthesis
│ └── useToast.js # Toast notification hook
├── utils/
│ └── rich.jsx # Markdown-like text rendering helper
├── App.jsx # Main application component
├── index.css # Complete theme and layout styles
└── main.jsx # React entry point
>>>>>>> db78518 (�[200~added dark/light mode, sound effects via Web Audio API + keyboard shortcuts (S/T), Demo GIF + 12-screenshot gallery in the README, Responsive layout.)
- Browse the dashboard — See overall progress, combined streaks, today's quests, and academy summaries at a glance.
- Complete quests — Click any quest item to mark it complete. It'll cross off with a satisfying animation.
- Defeat bosses — Click the boss battle card in each level to mark that month's major milestone as cleared.
- Unlock achievements — Click achievement badges to track them. They'll light up with a fanfare sound.
- Track skills — In the academy level progression, click tech stack items, skills, and mini-projects to rank them up.
- Reset progress — Click the ↺ button in the bottom-right corner (confirmation required).
- Toggle sound — Click the 🔊/🔇 button in the nav bar, or press
Son your keyboard.
All progress is saved automatically in your browser. No account needed.
A programming-first learning track covering:
- Full-stack development (React, Next.js, Node.js, PHP)
- Cloud deployment (AWS, Docker)
- DevOps (GitHub Actions, CI/CD, Terraform)
- Security (OWASP, Kali Linux)
- Career readiness (resume, portfolio, interview prep)
Flagship Projects: MarleHotelDB Cloud Edition, SentinelScan, Portfolio Website v2
A production-focused automation track covering:
- Prompt engineering (GPT-4, Claude, Gemini)
- Workflow automation (n8n, REST APIs, webhooks)
- RAG & AI agents (LangChain, LangGraph, ChromaDB, Pinecone)
- Business automation systems
- Production AI deployment (Docker, monitoring, CI/CD)
- AI consulting & architecture
Flagship Projects: AI Prompt Library, Multi-Agent RAG System, Business Automation Suite, AI SaaS Platform
| Level | Month | Theme | Color | Focus |
|---|---|---|---|---|
| 01 | July | Foundation Forger | 🔵 Full-Stack | Git, TypeScript, Portfolio v1 |
| 02 | August | Cloud Architect Apprentice | 🟠 Cloud | AWS, Docker, Deployment |
| 03 | September | DevOps Engineer | 🟠 DevOps | CI/CD, IaC, Tests |
| 04 | October | Security Sentinel | 🔴 Security | OWASP, Kali, SentinelScan |
| 05 | November | Data & AI Engineer | 🟢 Data/AI | ETL, AI APIs, DataPulse |
| 06 | December | Job-Ready Professional | 🟣 Career | Resume, Portfolio v2, Applications |
Career OS features a custom dark RPG-inspired theme with:
- 6 color tracks — distinct accent colors for each roadmap theme
- Press Start 2P — pixel font for display text
- JetBrains Mono — monospace for data and labels
- Space Grotesk — body copy
- Scanline overlay — subtle CRT texture
- Grid background — radial gradients and grid lines on the hero
- Particle effects — floating XP text and click sparks
- State management — All progress lives in
useCodexProgress(a custom hook using ReactuseState+useMemo+useCallback). No external state library needed. - Persistence — Priority:
window.storageAPI →localStoragefallback. Data is serialized as JSON and written on every state change. - Sound — Synthesized at runtime via the Web Audio API. Zero audio files to load.
- Animations — CSS transitions and the
motionlibrary. IntersectionObserver for scroll-triggered reveals. - Responsive — CSS Grid with
auto-fit/minmaxfor adaptive layouts. Works on desktop and tablet.
MIT — free to use, modify, and share.
Built for the road from July to December.
Track it, don't perfect it — a done week beats a perfect week.