💙 Kawaii Quant Journey 🌸

✨ A beautiful and interactive learning tracker for aspiring quantitative researchers! ✨

Welcome to the most adorable quant learning experience ever created! 🎀 This magical pink-blue themed application will guide you through your 2-month journey to becoming a quantitative researcher with style and cuteness!

✨ Key Features

• 📊 Progress Tracking: Real-time progress indicators with visual feedback
• ✅ Task Management: Interactive daily task checklist with completion tracking
• 📈 Analytics Dashboard: Learning statistics with motivational insights
• ⏱️ Study Timer: Built-in Pomodoro timer for focused study sessions
• 📄 Export Options: Export progress as JSON, CSV, or HTML reports
• 🎮 Explorer Menu: Clean navigation system for easy feature access
• 📱 Responsive Design: Optimized for all devices with adaptive layouts
• 💾 Local Storage: Secure local data storage with backup options

📋 Learning Curriculum (8 Weeks)

Week 1-2: Mathematical Foundations

• Probability theory and statistical distributions
• Linear algebra and matrix operations
• Calculus and optimization techniques
• Financial mathematics basics

Week 3-4: Programming & Markets

• Python for financial analysis
• Data manipulation with Pandas
• Financial APIs and data sources
• Market structures and instruments

Week 5-6: Analysis & Risk Management

• Time series analysis and forecasting
• Portfolio theory and optimization
• Risk metrics (VaR, Sharpe ratio)
• CAPM and factor models

Week 7-8: Trading & Research

• Algorithmic trading strategies
• Backtesting frameworks
• Quantitative research methods
• Academic paper analysis

🛠️ Technology Stack

• Frontend: React 19.x with Vite
• Styling: Pure CSS with custom design system
• Storage: Browser localStorage
• Build: Vite for fast development
• Design: Mobile-first responsive approach

🚀 Quick Start

Prerequisites

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

Installation

git clone https://github.com/depichan18/quant-roadmap.git
cd quant-roadmap
npm install
npm run dev

Live Demo: http://localhost:5174/

Build for Production

npm run build

📖 How to Use

1. 🎮 Explorer Menu: Click the menu toggle in the top-right corner to access all features
2. 🌸 Track Daily Tasks: Click on checkboxes to mark tasks as completed
3. 📊 View Progress: Watch your progress bloom in the header section with smooth animations
4. 🍅 Study Timer: Use the Pomodoro timer for focused study sessions
5. 📈 Statistics: View your learning journey with analytics and motivational messages
6. 📄 Export Data: Save your progress in various formats (JSON, CSV, HTML)
7. ❓ Help & Guide: Access helpful information through the help modal
8. 🔄 Reset Progress: Start fresh anytime with a gentle reset

🎨 Feature Details

🌸 Progress Tracking

• ✨ Real-time progress calculation with visual feedback
• 🎀 Circular progress indicators in pastel colors
• 📊 Week-by-week completion tracking with smooth animations
• 💕 Motivational messages based on your progress

🎮 Explorer Menu System

• 🍱 Clean minimalist toggle button with pink-600 text
• 🌈 Soft blue-pink gradient backgrounds
• 🎯 Quick access to all features: Statistics, Timer, Export, Help
• 💫 Smooth animations and glass-morphism effects
• 📱 Mobile-responsive with adaptive sizing

🍅 Study Timer

• ⏰ 25-minute study sessions (perfect for focus!)
• 🛀 5-minute break periods (time to relax!)
• 🎯 Visual countdown with beautiful circular progress
• 🔔 Gentle desktop notifications when sessions complete
• 🔄 Automatic session switching

📄 Export Options

• 🌸 JSON: Complete data export for backup
• 📊 CSV: Spreadsheet-friendly format
• 📋 Report: Pretty HTML report for printing

📈 Statistics Dashboard

• ✅ Total tasks completed
• 🏆 Weeks finished
• 📍 Current week indicator
• 📊 Average weekly progress
• 💖 Motivational feedback

🖼️ Feature Previews

Main dashboard with progress tracking

Detailed analytics and completion tracking

Interactive week cards with task management

Daily task checklist interface

Activity log and study timer

Project and curriculum overview

🔧 Customization

• Roadmap: Edit src/data/roadmapData.json to modify curriculum
• Styling: Update CSS files in src/components/ for visual changes
• Colors: Modify CSS custom properties for theme adjustments

📱 Device Support

Fully responsive design optimized for:

• Desktop computers
• Tablets and mobile devices
• Various screen orientations

🔐 Privacy & Security

• All data stored locally in your browser
• No external servers or data collection
• Export options for easy backup and portability

🤝 Contributing

This project welcomes contributions! Feel free to:

• Fork the repository and submit pull requests
• Report bugs or suggest new features
• Improve documentation or curriculum content

📄 License

MIT License - Free to use and modify

👩‍💻 About

Created by Depichan (Devi Rosa Aprilla), Mathematics student at Institut Teknologi Sepuluh Nopember (ITS).

"Learning should be engaging, beautiful, and effective!"

---

Start your quantitative research journey today! 🚀