From 924046570783b7c0bd7d07b07dea8c572a485e92 Mon Sep 17 00:00:00 2001 From: rudrasingh993 Date: Sun, 21 Sep 2025 17:14:36 +0530 Subject: [PATCH] Add Guided Learning Roadmaps --- index.html | 2 + roadmaps.html | 519 +++++++++++++++++++++ scripts/roadmaps.js | 1051 +++++++++++++++++++++++++++++++++++++++++++ styles/roadmaps.css | 902 +++++++++++++++++++++++++++++++++++++ 4 files changed, 2474 insertions(+) create mode 100644 roadmaps.html create mode 100644 scripts/roadmaps.js create mode 100644 styles/roadmaps.css diff --git a/index.html b/index.html index 846c1899..cff26725 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,7 @@ @@ -88,6 +89,7 @@ diff --git a/roadmaps.html b/roadmaps.html new file mode 100644 index 00000000..3d57038d --- /dev/null +++ b/roadmaps.html @@ -0,0 +1,519 @@ + + + + + + + Learning Roadmaps - WebDevIn_100Days + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + +
+
+
+

Learning Roadmaps

+

+ Structured learning paths to guide you from beginner to expert. Each roadmap includes prerequisites, + learning resources, and hands-on projects from our repository. +

+
+
+ 6 + Roadmaps +
+
+ 50+ + Learning Topics +
+
+ 100+ + Practice Projects +
+
+
+
+
+ + +
+
+
+

Choose Your Learning Path

+

+ Select a roadmap that matches your interests and career goals. Each path is designed to take you + from fundamentals to advanced concepts through practical projects. +

+
+ +
+ +
+
+
+ +
+

Web Development

+

+ Master frontend and backend web development from HTML basics to modern frameworks. +

+
+
+
+ Beginner Friendly +
+
+ + 3-6 months +
+
+ + 25+ projects +
+
+
+ HTML + CSS + JavaScript + React +
+ +
+ + +
+
+
+ +
+

AI & Machine Learning

+

+ Learn artificial intelligence and machine learning from Python basics to advanced algorithms. +

+
+
+
+ Intermediate +
+
+ + 4-8 months +
+
+ + 15+ projects +
+
+
+ Python + NumPy + Pandas + TensorFlow +
+ +
+ + +
+
+
+ +
+

UI/UX Design

+

+ Master user interface and experience design principles, tools, and best practices. +

+
+
+
+ Beginner Friendly +
+
+ + 2-4 months +
+
+ + 20+ projects +
+
+
+ Figma + Sketch + Adobe XD + Prototyping +
+ +
+ + +
+
+
+ +
+

Backend Development

+

+ Build robust server-side applications, APIs, and database systems. +

+
+
+
+ Intermediate +
+
+ + 4-6 months +
+
+ + 18+ projects +
+
+
+ Node.js + Express + MongoDB + APIs +
+ +
+ + +
+
+
+ +
+

Mobile Development

+

+ Create mobile applications for iOS and Android using modern frameworks. +

+
+
+
+ Intermediate +
+
+ + 5-8 months +
+
+ + 12+ projects +
+
+
+ React Native + Flutter + Swift + Kotlin +
+ +
+ + +
+
+
+ +
+

DevOps & Cloud

+

+ Learn deployment, automation, cloud services, and infrastructure management. +

+
+
+
+ Advanced +
+
+ + 6-10 months +
+
+ + 10+ projects +
+
+
+ Docker + Kubernetes + AWS + CI/CD +
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+
+
+
+ + +
+
+
+

Why Follow Learning Roadmaps?

+

+ Structured learning paths help you avoid confusion and build skills systematically. +

+
+ +
+
+
+ +
+

Clear Learning Path

+

+ No more wondering what to learn next. Our roadmaps provide a clear, logical progression + from basics to advanced topics. +

+
+ +
+
+ +
+

Hands-on Projects

+

+ Each stage includes practical projects from our repository to reinforce your learning + and build a portfolio. +

+
+ +
+
+ +
+

Community Support

+

+ Join thousands of learners following the same path. Get help, share progress, + and learn together. +

+
+ +
+
+ +
+

Track Progress

+

+ Mark completed topics, track your progress, and celebrate milestones as you advance + through your chosen path. +

+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/scripts/roadmaps.js b/scripts/roadmaps.js new file mode 100644 index 00000000..59cc2387 --- /dev/null +++ b/scripts/roadmaps.js @@ -0,0 +1,1051 @@ +// Roadmaps Data Structure +const roadmapsData = { + 'web-development': { + title: 'Web Development', + level: 'Beginner Friendly', + duration: '3-6 months', + projects: '25+ projects', + description: 'Master frontend and backend web development from HTML basics to modern frameworks. Build responsive websites, interactive web applications, and full-stack projects.', + icon: 'fas fa-code', + stages: [ + { + id: 'html-basics', + title: 'HTML Fundamentals', + level: 'Beginner', + description: 'Learn the building blocks of web development. Master HTML structure, semantic elements, and accessibility best practices.', + prerequisites: ['Basic computer skills', 'Text editor knowledge'], + concepts: [ + 'HTML structure and syntax', + 'Semantic HTML elements', + 'Forms and input types', + 'Tables and lists', + 'Links and navigation', + 'Images and media', + 'Accessibility basics' + ], + resources: [ + 'MDN HTML Documentation', + 'HTML5 Semantic Elements Guide', + 'Web Accessibility Guidelines' + ], + projects: [ + { name: 'Personal Portfolio', path: 'public/Day-72_Portfolio' }, + { name: 'HTML Form Builder', path: 'public/Day-42_NoteTaker' }, + { name: 'Semantic Blog Layout', path: 'public/Day-1_SimpleWebpage' } + ] + }, + { + id: 'css-styling', + title: 'CSS Styling & Layout', + level: 'Beginner', + description: 'Transform your HTML with beautiful styling, responsive layouts, and modern CSS techniques.', + prerequisites: ['HTML Fundamentals'], + concepts: [ + 'CSS selectors and specificity', + 'Box model and positioning', + 'Flexbox and CSS Grid', + 'Responsive design principles', + 'CSS animations and transitions', + 'CSS preprocessors (Sass/Less)', + 'CSS frameworks introduction' + ], + resources: [ + 'CSS-Tricks Complete Guide', + 'Flexbox Froggy Game', + 'Grid Garden Game', + 'Responsive Web Design Principles' + ], + projects: [ + { name: 'Responsive Website', path: 'public/Day-211_Interior-Design-Website' }, + { name: 'CSS Animation Showcase', path: 'public/Day-70' }, + { name: 'Flexbox Layout Practice', path: 'public/Day-52_E-Commerce_UI' } + ] + }, + { + id: 'javascript-fundamentals', + title: 'JavaScript Fundamentals', + level: 'Beginner', + description: 'Add interactivity to your websites with JavaScript. Learn programming concepts and DOM manipulation.', + prerequisites: ['HTML Fundamentals', 'CSS Styling & Layout'], + concepts: [ + 'Variables, data types, and operators', + 'Functions and scope', + 'Control structures (loops, conditionals)', + 'Arrays and objects', + 'DOM manipulation', + 'Event handling', + 'Error handling and debugging' + ], + resources: [ + 'JavaScript.info Tutorial', + 'MDN JavaScript Guide', + 'Eloquent JavaScript Book', + 'JavaScript30 Challenge' + ], + projects: [ + { name: 'Interactive Calculator', path: 'public/Day-50_BMI_Calculator_Tanu' }, + { name: 'To-Do List App', path: 'public/Day-36_Notes_App' }, + { name: 'Quiz Application', path: 'public/Day-86' } + ] + }, + { + id: 'advanced-javascript', + title: 'Advanced JavaScript', + level: 'Intermediate', + description: 'Master advanced JavaScript concepts including ES6+, asynchronous programming, and modern development practices.', + prerequisites: ['JavaScript Fundamentals'], + concepts: [ + 'ES6+ features (arrow functions, destructuring, modules)', + 'Promises and async/await', + 'Fetch API and AJAX', + 'Local storage and session storage', + 'Object-oriented programming', + 'Functional programming concepts', + 'Module bundlers and build tools' + ], + resources: [ + 'You Don\'t Know JS Book Series', + 'ES6 Features Guide', + 'Async JavaScript Tutorial', + 'Modern JavaScript Tooling' + ], + projects: [ + { name: 'Weather App with API', path: 'public/Day-27_CineSearch' }, + { name: 'Memory Game', path: 'public/Memory Game App' }, + { name: 'Movie Search App', path: 'public/Day-27_CineSearch' } + ] + }, + { + id: 'frontend-frameworks', + title: 'Frontend Frameworks', + level: 'Intermediate', + description: 'Learn modern frontend frameworks to build scalable and maintainable web applications.', + prerequisites: ['Advanced JavaScript'], + concepts: [ + 'React.js fundamentals', + 'Component-based architecture', + 'State management (Redux/Context)', + 'Routing and navigation', + 'Hooks and lifecycle methods', + 'Testing React components', + 'Build and deployment' + ], + resources: [ + 'React Official Documentation', + 'React Router Guide', + 'Redux Toolkit Tutorial', + 'React Testing Library' + ], + projects: [ + { name: 'React Todo App', path: 'public/Day-36_Notes_App' }, + { name: 'E-commerce Frontend', path: 'public/Day-52_E-Commerce_UI' }, + { name: 'Social Media Dashboard', path: 'public/Day-99' } + ] + }, + { + id: 'backend-basics', + title: 'Backend Development', + level: 'Intermediate', + description: 'Build server-side applications, APIs, and work with databases to create full-stack applications.', + prerequisites: ['Frontend Frameworks'], + concepts: [ + 'Node.js and Express.js', + 'RESTful API design', + 'Database integration (MongoDB/SQL)', + 'Authentication and authorization', + 'Server deployment', + 'API testing and documentation', + 'Security best practices' + ], + resources: [ + 'Node.js Official Guide', + 'Express.js Documentation', + 'MongoDB University', + 'API Design Best Practices' + ], + projects: [ + { name: 'REST API Backend', path: 'public/Library_Book_Manager' }, + { name: 'User Authentication System', path: 'public/University_managment_system' }, + { name: 'Full-Stack Web App', path: 'public/TATA-1mg-Clone' } + ] + } + ] + }, + + 'ai-ml': { + title: 'AI & Machine Learning', + level: 'Intermediate', + duration: '4-8 months', + projects: '15+ projects', + description: 'Learn artificial intelligence and machine learning from Python basics to advanced algorithms. Build intelligent applications and understand ML concepts.', + icon: 'fas fa-brain', + stages: [ + { + id: 'python-basics', + title: 'Python Fundamentals', + level: 'Beginner', + description: 'Master Python programming language essentials for data science and machine learning.', + prerequisites: ['Basic programming concepts'], + concepts: [ + 'Python syntax and data types', + 'Control structures and functions', + 'Object-oriented programming', + 'File handling and modules', + 'Error handling and debugging', + 'Python standard library', + 'Virtual environments' + ], + resources: [ + 'Python.org Official Tutorial', + 'Automate the Boring Stuff', + 'Python Crash Course Book', + 'Real Python Tutorials' + ], + projects: [ + { name: 'Python Calculator', path: 'public/Day-50_BMI_Calculator_Tanu' }, + { name: 'File Organizer Script', path: 'public/Day-42_NoteTaker' }, + { name: 'Web Scraping Tool', path: 'public/Day-27_CineSearch' } + ] + }, + { + id: 'data-analysis', + title: 'Data Analysis & Visualization', + level: 'Beginner', + description: 'Learn to work with data using pandas, numpy, and visualization libraries.', + prerequisites: ['Python Fundamentals'], + concepts: [ + 'NumPy for numerical computing', + 'Pandas for data manipulation', + 'Matplotlib for plotting', + 'Seaborn for statistical visualization', + 'Data cleaning and preprocessing', + 'Exploratory data analysis', + 'Statistical analysis basics' + ], + resources: [ + 'Pandas Documentation', + 'NumPy User Guide', + 'Matplotlib Tutorials', + 'Kaggle Learn Data Analysis' + ], + projects: [ + { name: 'Data Visualization Dashboard', path: 'public/Student_Grade_Analyzer' }, + { name: 'Sales Analysis Tool', path: 'public/Day-99' }, + { name: 'Stock Price Analyzer', path: 'public/Day-82' } + ] + }, + { + id: 'machine-learning-basics', + title: 'Machine Learning Fundamentals', + level: 'Intermediate', + description: 'Understand core ML concepts, algorithms, and implement your first machine learning models.', + prerequisites: ['Data Analysis & Visualization'], + concepts: [ + 'Supervised vs unsupervised learning', + 'Linear and logistic regression', + 'Decision trees and random forests', + 'K-means clustering', + 'Model evaluation and validation', + 'Cross-validation and overfitting', + 'Scikit-learn library' + ], + resources: [ + 'Scikit-learn Documentation', + 'Machine Learning Yearning', + 'Coursera ML Course', + 'Kaggle ML Courses' + ], + projects: [ + { name: 'House Price Predictor', path: 'public/Day-95' }, + { name: 'Customer Segmentation', path: 'public/Day-92' }, + { name: 'Recommendation System', path: 'public/Mood_Music_Suggester' } + ] + }, + { + id: 'deep-learning', + title: 'Deep Learning & Neural Networks', + level: 'Advanced', + description: 'Dive into neural networks, deep learning frameworks, and build AI applications.', + prerequisites: ['Machine Learning Fundamentals'], + concepts: [ + 'Neural network fundamentals', + 'TensorFlow and Keras', + 'Convolutional Neural Networks (CNN)', + 'Recurrent Neural Networks (RNN)', + 'Transfer learning', + 'Model deployment', + 'Computer vision basics' + ], + resources: [ + 'TensorFlow Documentation', + 'Deep Learning Specialization', + 'Fast.ai Course', + 'Papers With Code' + ], + projects: [ + { name: 'Image Classification App', path: 'public/Day-95' }, + { name: 'Chatbot with NLP', path: 'public/Day-88' }, + { name: 'AI Game Player', path: 'public/Day-83' } + ] + } + ] + }, + + 'ui-ux': { + title: 'UI/UX Design', + level: 'Beginner Friendly', + duration: '2-4 months', + projects: '20+ projects', + description: 'Master user interface and experience design principles, tools, and best practices to create beautiful and functional designs.', + icon: 'fas fa-paint-brush', + stages: [ + { + id: 'design-fundamentals', + title: 'Design Fundamentals', + level: 'Beginner', + description: 'Learn core design principles, color theory, typography, and visual hierarchy.', + prerequisites: ['Basic computer skills'], + concepts: [ + 'Design principles (contrast, alignment, repetition, proximity)', + 'Color theory and psychology', + 'Typography and font pairing', + 'Visual hierarchy and layout', + 'Grid systems and composition', + 'Design trends and styles', + 'Accessibility in design' + ], + resources: [ + 'Design Principles Guide', + 'Color Theory Handbook', + 'Typography Fundamentals', + 'Accessibility Guidelines' + ], + projects: [ + { name: 'Brand Identity Design', path: 'public/Day-213_Jwellery-Website' }, + { name: 'Typography Poster', path: 'public/Day-72_Portfolio' }, + { name: 'Color Palette Generator', path: 'public/Day-22_Palette_generator' } + ] + }, + { + id: 'design-tools', + title: 'Design Tools Mastery', + level: 'Beginner', + description: 'Master industry-standard design tools like Figma, Adobe XD, and Sketch.', + prerequisites: ['Design Fundamentals'], + concepts: [ + 'Figma interface and features', + 'Creating and managing design systems', + 'Prototyping and interactions', + 'Collaboration and handoff', + 'Adobe XD workflows', + 'Sketch basics', + 'Design file organization' + ], + resources: [ + 'Figma Official Tutorials', + 'Adobe XD Documentation', + 'Sketch Learning Resources', + 'Design System Examples' + ], + projects: [ + { name: 'Mobile App Design', path: 'public/Day-52_E-Commerce_UI' }, + { name: 'Website Redesign', path: 'public/Day-211_Interior-Design-Website' }, + { name: 'Design System Creation', path: 'public/Day-99' } + ] + }, + { + id: 'user-research', + title: 'User Research & Testing', + level: 'Intermediate', + description: 'Learn to conduct user research, create personas, and validate design decisions.', + prerequisites: ['Design Tools Mastery'], + concepts: [ + 'User research methods', + 'Creating user personas', + 'User journey mapping', + 'Usability testing', + 'A/B testing principles', + 'Analytics and metrics', + 'Interview techniques' + ], + resources: [ + 'UX Research Methods', + 'Persona Creation Guide', + 'Usability Testing Handbook', + 'Google Analytics for Designers' + ], + projects: [ + { name: 'User Research Study', path: 'public/Day-86' }, + { name: 'Persona Development', path: 'public/Mood_Music_Suggester' }, + { name: 'Usability Test Report', path: 'public/Feedback.html' } + ] + }, + { + id: 'interaction-design', + title: 'Interaction & Motion Design', + level: 'Intermediate', + description: 'Create engaging user experiences with animations, micro-interactions, and motion design.', + prerequisites: ['User Research & Testing'], + concepts: [ + 'Interaction design principles', + 'Micro-interactions and animations', + 'Motion design basics', + 'Prototyping advanced interactions', + 'Transition and easing', + 'Loading states and feedback', + 'Mobile interaction patterns' + ], + resources: [ + 'Interaction Design Guide', + 'Motion Design Principles', + 'Prototyping Tools Comparison', + 'Animation Libraries' + ], + projects: [ + { name: 'Interactive Prototype', path: 'public/ParallaxScrollingDemo' }, + { name: 'Animation Showcase', path: 'public/Day-70' }, + { name: 'Mobile App Prototype', path: 'public/TestimonialCarousel' } + ] + } + ] + }, + + 'backend': { + title: 'Backend Development', + level: 'Intermediate', + duration: '4-6 months', + projects: '18+ projects', + description: 'Build robust server-side applications, APIs, and database systems. Learn to create scalable backend architectures.', + icon: 'fas fa-server', + stages: [ + { + id: 'server-fundamentals', + title: 'Server & API Fundamentals', + level: 'Beginner', + description: 'Learn server-side programming concepts, HTTP protocols, and API design principles.', + prerequisites: ['JavaScript Fundamentals'], + concepts: [ + 'Client-server architecture', + 'HTTP methods and status codes', + 'RESTful API design', + 'JSON and data formats', + 'Node.js runtime environment', + 'Express.js framework', + 'Middleware concepts' + ], + resources: [ + 'Node.js Official Documentation', + 'Express.js Guide', + 'REST API Design Best Practices', + 'HTTP Protocol Explained' + ], + projects: [ + { name: 'Simple REST API', path: 'public/Library_Book_Manager' }, + { name: 'File Upload Service', path: 'public/Day-42_NoteTaker' }, + { name: 'URL Shortener API', path: 'public/Day-27_CineSearch' } + ] + }, + { + id: 'database-integration', + title: 'Database Management', + level: 'Intermediate', + description: 'Work with databases, design schemas, and implement data persistence in your applications.', + prerequisites: ['Server & API Fundamentals'], + concepts: [ + 'Database types (SQL vs NoSQL)', + 'MongoDB and Mongoose', + 'PostgreSQL and SQL queries', + 'Database design and modeling', + 'CRUD operations', + 'Database indexing and optimization', + 'Data validation and sanitization' + ], + resources: [ + 'MongoDB University', + 'PostgreSQL Documentation', + 'Database Design Principles', + 'SQL Tutorial and Practice' + ], + projects: [ + { name: 'User Management System', path: 'public/University_managment_system' }, + { name: 'Blog API with Database', path: 'public/Ruchii-Tiffin' }, + { name: 'Inventory Management', path: 'public/Library_Book_Manager' } + ] + }, + { + id: 'authentication-security', + title: 'Authentication & Security', + level: 'Intermediate', + description: 'Implement secure authentication systems and learn backend security best practices.', + prerequisites: ['Database Management'], + concepts: [ + 'JWT tokens and sessions', + 'Password hashing and encryption', + 'OAuth and social login', + 'Role-based access control', + 'API security best practices', + 'CORS and CSRF protection', + 'Input validation and sanitization' + ], + resources: [ + 'JWT.io Documentation', + 'OWASP Security Guidelines', + 'Authentication Best Practices', + 'Node.js Security Checklist' + ], + projects: [ + { name: 'Secure Login System', path: 'public/University_managment_system' }, + { name: 'Multi-role Application', path: 'public/Ruchii-Tiffin' }, + { name: 'API with Authentication', path: 'public/TATA-1mg-Clone' } + ] + }, + { + id: 'deployment-scaling', + title: 'Deployment & Scaling', + level: 'Advanced', + description: 'Deploy applications to production and learn scaling strategies for high-traffic applications.', + prerequisites: ['Authentication & Security'], + concepts: [ + 'Cloud platforms (AWS, Heroku, DigitalOcean)', + 'Containerization with Docker', + 'Environment configuration', + 'Load balancing and caching', + 'Monitoring and logging', + 'CI/CD pipelines', + 'Performance optimization' + ], + resources: [ + 'AWS Documentation', + 'Docker Getting Started', + 'Deployment Best Practices', + 'Performance Monitoring Tools' + ], + projects: [ + { name: 'Production-Ready API', path: 'public/TATA-1mg-Clone' }, + { name: 'Scalable Web Service', path: 'public/Library_Book_Manager' }, + { name: 'Microservices Architecture', path: 'public/University_managment_system' } + ] + } + ] + }, + + 'mobile': { + title: 'Mobile Development', + level: 'Intermediate', + duration: '5-8 months', + projects: '12+ projects', + description: 'Create mobile applications for iOS and Android using modern frameworks and native development approaches.', + icon: 'fas fa-mobile-alt', + stages: [ + { + id: 'mobile-fundamentals', + title: 'Mobile Development Basics', + level: 'Beginner', + description: 'Learn mobile development concepts, platform differences, and choose your development path.', + prerequisites: ['JavaScript or Swift/Kotlin knowledge'], + concepts: [ + 'Mobile app architecture patterns', + 'iOS vs Android development', + 'Native vs cross-platform development', + 'Mobile UI/UX principles', + 'App lifecycle and state management', + 'Device capabilities and APIs', + 'Mobile app distribution' + ], + resources: [ + 'Mobile Development Guide', + 'iOS Human Interface Guidelines', + 'Android Design Guidelines', + 'Cross-Platform Comparison' + ], + projects: [ + { name: 'Simple Mobile Calculator', path: 'public/Day-50_BMI_Calculator_Tanu' }, + { name: 'Todo Mobile App', path: 'public/Day-36_Notes_App' }, + { name: 'Weather Mobile App', path: 'public/World_Clock' } + ] + }, + { + id: 'react-native', + title: 'React Native Development', + level: 'Intermediate', + description: 'Build cross-platform mobile apps using React Native framework.', + prerequisites: ['Mobile Development Basics', 'React knowledge'], + concepts: [ + 'React Native setup and CLI', + 'Components and navigation', + 'State management in mobile apps', + 'Native device APIs', + 'Styling and responsive design', + 'Performance optimization', + 'App store deployment' + ], + resources: [ + 'React Native Documentation', + 'Expo Development Platform', + 'React Navigation Guide', + 'React Native Performance' + ], + projects: [ + { name: 'Social Media App', path: 'public/Day-99' }, + { name: 'E-commerce Mobile App', path: 'public/TATA-1mg-Clone' }, + { name: 'Fitness Tracking App', path: 'public/Stopwatch' } + ] + }, + { + id: 'native-development', + title: 'Native iOS/Android', + level: 'Advanced', + description: 'Develop native mobile applications using Swift for iOS and Kotlin for Android.', + prerequisites: ['React Native Development'], + concepts: [ + 'Swift programming for iOS', + 'Kotlin programming for Android', + 'Platform-specific UI frameworks', + 'Native performance optimization', + 'Platform-specific features', + 'App store guidelines', + 'Native testing frameworks' + ], + resources: [ + 'Swift Documentation', + 'Kotlin for Android', + 'iOS Development Guide', + 'Android Developer Documentation' + ], + projects: [ + { name: 'iOS Game Application', path: 'public/Snake-and-Ladder-Game' }, + { name: 'Android Utility App', path: 'public/Day-95' }, + { name: 'Cross-Platform Feature App', path: 'public/Mood_Music_Suggester' } + ] + } + ] + }, + + 'devops': { + title: 'DevOps & Cloud', + level: 'Advanced', + duration: '6-10 months', + projects: '10+ projects', + description: 'Learn deployment, automation, cloud services, and infrastructure management for modern software development.', + icon: 'fas fa-cogs', + stages: [ + { + id: 'devops-fundamentals', + title: 'DevOps Principles & Tools', + level: 'Intermediate', + description: 'Understand DevOps culture, practices, and essential tools for automation and collaboration.', + prerequisites: ['Backend Development experience'], + concepts: [ + 'DevOps culture and practices', + 'Version control with Git', + 'Continuous Integration/Continuous Deployment', + 'Infrastructure as Code', + 'Monitoring and logging', + 'Collaboration tools', + 'Agile and DevOps integration' + ], + resources: [ + 'DevOps Handbook', + 'Git Documentation', + 'CI/CD Best Practices', + 'Infrastructure as Code Guide' + ], + projects: [ + { name: 'Automated Deployment Pipeline', path: 'public/University_managment_system' }, + { name: 'Monitoring Dashboard', path: 'public/Day-99' }, + { name: 'Infrastructure Automation', path: 'public/Library_Book_Manager' } + ] + }, + { + id: 'containerization', + title: 'Containerization & Orchestration', + level: 'Advanced', + description: 'Master Docker containers and Kubernetes orchestration for scalable application deployment.', + prerequisites: ['DevOps Principles & Tools'], + concepts: [ + 'Docker fundamentals and best practices', + 'Container orchestration with Kubernetes', + 'Microservices architecture', + 'Service mesh and networking', + 'Container security', + 'Helm charts and package management', + 'Container monitoring and logging' + ], + resources: [ + 'Docker Documentation', + 'Kubernetes Official Tutorials', + 'Container Best Practices', + 'Microservices Patterns' + ], + projects: [ + { name: 'Dockerized Application', path: 'public/TATA-1mg-Clone' }, + { name: 'Kubernetes Deployment', path: 'public/Library_Book_Manager' }, + { name: 'Microservices Platform', path: 'public/University_managment_system' } + ] + }, + { + id: 'cloud-platforms', + title: 'Cloud Services & Management', + level: 'Advanced', + description: 'Deploy and manage applications on major cloud platforms with auto-scaling and high availability.', + prerequisites: ['Containerization & Orchestration'], + concepts: [ + 'AWS/Azure/GCP services', + 'Cloud architecture patterns', + 'Auto-scaling and load balancing', + 'Cloud security and compliance', + 'Serverless computing', + 'Cloud cost optimization', + 'Disaster recovery and backup' + ], + resources: [ + 'AWS Documentation', + 'Azure Learning Path', + 'Google Cloud Training', + 'Cloud Architecture Patterns' + ], + projects: [ + { name: 'Cloud-Native Application', path: 'public/TATA-1mg-Clone' }, + { name: 'Serverless Backend', path: 'public/Day-27_CineSearch' }, + { name: 'Multi-Cloud Deployment', path: 'public/Library_Book_Manager' } + ] + } + ] + } +}; + +// Roadmap functionality +class RoadmapManager { + constructor() { + this.currentRoadmap = null; + this.modal = document.getElementById('roadmap-modal'); + this.init(); + } + + init() { + this.bindEvents(); + this.handleThemeToggle(); + } + + bindEvents() { + // Roadmap card clicks + document.querySelectorAll('.roadmap-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const roadmapId = btn.getAttribute('data-roadmap'); + this.showRoadmap(roadmapId); + }); + }); + + // Footer roadmap links + document.querySelectorAll('.roadmap-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const roadmapId = link.getAttribute('data-roadmap'); + this.showRoadmap(roadmapId); + }); + }); + + // Modal close events + if (this.modal) { + const closeBtn = this.modal.querySelector('.modal-close'); + const backdrop = this.modal.querySelector('.modal-backdrop'); + + closeBtn?.addEventListener('click', () => this.closeModal()); + backdrop?.addEventListener('click', () => this.closeModal()); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && this.modal.classList.contains('active')) { + this.closeModal(); + } + }); + } + + // Scroll to top button + const scrollTopBtn = document.querySelector('.scroll-top'); + if (scrollTopBtn) { + scrollTopBtn.addEventListener('click', () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + + window.addEventListener('scroll', () => { + if (window.pageYOffset > 300) { + scrollTopBtn.style.display = 'flex'; + } else { + scrollTopBtn.style.display = 'none'; + } + }); + } + + // Progress bar + this.updateProgressBar(); + window.addEventListener('scroll', () => this.updateProgressBar()); + } + + showRoadmap(roadmapId) { + const roadmapData = roadmapsData[roadmapId]; + if (!roadmapData) return; + + this.currentRoadmap = roadmapData; + this.populateModal(roadmapData); + this.openModal(); + } + + populateModal(roadmapData) { + // Update modal header + document.getElementById('modal-title').textContent = roadmapData.title; + document.getElementById('modal-level').textContent = roadmapData.level; + document.getElementById('modal-duration').textContent = roadmapData.duration; + document.getElementById('modal-projects').textContent = roadmapData.projects; + document.getElementById('modal-description').textContent = roadmapData.description; + + // Populate stages + const stagesContainer = document.getElementById('roadmap-stages'); + stagesContainer.innerHTML = ''; + + roadmapData.stages.forEach((stage, index) => { + const stageElement = this.createStageElement(stage, index + 1); + stagesContainer.appendChild(stageElement); + }); + } + + createStageElement(stage, stageNumber) { + const stageDiv = document.createElement('div'); + stageDiv.className = 'stage'; + stageDiv.setAttribute('data-stage-id', stage.id); + + const roadmapId = Object.keys(roadmapsData).find(key => + roadmapsData[key].title === this.currentRoadmap.title + ); + + const isCompleted = window.progressTracker && roadmapId ? + window.progressTracker.isStageComplete(roadmapId, stage.id) : + false; + + stageDiv.innerHTML = ` +
+
+

${stageNumber}. ${stage.title}

+

${stage.description}

+
+ ${stage.level} +
+
+
+

Prerequisites

+
    + ${stage.prerequisites.map(prereq => `
  • ${prereq}
    • `).join('')} +
+
+
+

Key Concepts

+
    + ${stage.concepts.map(concept => `
  • ${concept}
    • `).join('')} +
+
+
+

Learning Resources

+
    + ${stage.resources.map(resource => `
  • ${resource}
    • `).join('')} +
+
+
+

Practice Projects

+ +
+
+
+
+ +
+ `; + + // Add completion toggle functionality + const checkbox = stageDiv.querySelector('.stage-checkbox'); + const label = stageDiv.querySelector('.completion-label'); + + checkbox.addEventListener('click', () => { + this.toggleStageCompletion(stage.id, checkbox, label); + }); + + label.addEventListener('click', () => { + this.toggleStageCompletion(stage.id, checkbox, label); + }); + + return stageDiv; + } + + toggleStageCompletion(stageId, checkbox, label) { + if (!this.currentRoadmap || !window.progressTracker) return; + + // Find the roadmap ID from the roadmapsData keys + const roadmapId = Object.keys(roadmapsData).find(key => + roadmapsData[key].title === this.currentRoadmap.title + ); + + const isCurrentlyCompleted = window.progressTracker.isStageComplete(roadmapId, stageId); + + if (isCurrentlyCompleted) { + // Remove completion + delete window.progressTracker.progress[roadmapId][stageId]; + checkbox.classList.remove('checked'); + label.textContent = 'Mark as completed'; + } else { + // Mark as completed + window.progressTracker.markStageComplete(roadmapId, stageId); + checkbox.classList.add('checked'); + label.textContent = 'Stage completed!'; + } + + // Update progress bars + window.progressTracker.updateUI(); + } + + openModal() { + if (this.modal) { + this.modal.classList.add('active'); + document.body.style.overflow = 'hidden'; + } + } + + closeModal() { + if (this.modal) { + this.modal.classList.remove('active'); + document.body.style.overflow = ''; + } + } + + updateProgressBar() { + const progressBar = document.querySelector('.scroll-progress-bar'); + if (!progressBar) return; + + const scrollTop = window.pageYOffset; + const docHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollPercent = (scrollTop / docHeight) * 100; + + progressBar.style.width = scrollPercent + '%'; + } + + handleThemeToggle() { + const themeToggle = document.querySelector('.theme-toggle'); + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const mobileNav = document.querySelector('.mobile-nav'); + + if (themeToggle) { + themeToggle.addEventListener('click', () => { + const html = document.documentElement; + const currentTheme = html.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + html.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + }); + + // Load saved theme + const savedTheme = localStorage.getItem('theme') || 'light'; + document.documentElement.setAttribute('data-theme', savedTheme); + } + + if (mobileMenuBtn && mobileNav) { + mobileMenuBtn.addEventListener('click', () => { + mobileNav.classList.toggle('active'); + mobileMenuBtn.classList.toggle('active'); + }); + } + } +} + +// Progress tracking functionality +class ProgressTracker { + constructor() { + this.storageKey = 'roadmap-progress'; + this.progress = this.loadProgress(); + } + + loadProgress() { + try { + return JSON.parse(localStorage.getItem(this.storageKey)) || {}; + } catch { + return {}; + } + } + + saveProgress() { + localStorage.setItem(this.storageKey, JSON.stringify(this.progress)); + } + + markStageComplete(roadmapId, stageId) { + if (!this.progress[roadmapId]) { + this.progress[roadmapId] = {}; + } + this.progress[roadmapId][stageId] = { + completed: true, + completedAt: new Date().toISOString() + }; + this.saveProgress(); + this.updateUI(); + } + + isStageComplete(roadmapId, stageId) { + return this.progress[roadmapId]?.[stageId]?.completed || false; + } + + getCompletionPercentage(roadmapId) { + const roadmap = roadmapsData[roadmapId]; + if (!roadmap) return 0; + + const totalStages = roadmap.stages.length; + const completedStages = roadmap.stages.filter(stage => + this.isStageComplete(roadmapId, stage.id) + ).length; + + return Math.round((completedStages / totalStages) * 100); + } + + updateUI() { + // Update progress indicators in the UI + document.querySelectorAll('.roadmap-card').forEach(card => { + const roadmapId = card.getAttribute('data-roadmap'); + const percentage = this.getCompletionPercentage(roadmapId); + + let progressBar = card.querySelector('.progress-bar'); + if (!progressBar && percentage > 0) { + progressBar = document.createElement('div'); + progressBar.className = 'progress-bar'; + progressBar.innerHTML = ` +
+ ${percentage}% Complete + `; + card.appendChild(progressBar); + } else if (progressBar) { + const fill = progressBar.querySelector('.progress-fill'); + const text = progressBar.querySelector('.progress-text'); + fill.style.width = percentage + '%'; + text.textContent = `${percentage}% Complete`; + } + }); + } +} + +// Initialize when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + const roadmapManager = new RoadmapManager(); + const progressTracker = new ProgressTracker(); + + // Make progress tracker available globally for stage completion + window.progressTracker = progressTracker; + + // Update UI with saved progress + progressTracker.updateUI(); +}); + +// Export for use in other modules +if (typeof module !== 'undefined' && module.exports) { + module.exports = { roadmapsData, RoadmapManager, ProgressTracker }; +} diff --git a/styles/roadmaps.css b/styles/roadmaps.css new file mode 100644 index 00000000..1dd3fdce --- /dev/null +++ b/styles/roadmaps.css @@ -0,0 +1,902 @@ +/* Roadmaps Specific Styles */ + +/* Hero Section */ +.roadmaps-hero { + padding: 6rem 0 4rem; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; + text-align: center; + position: relative; + overflow: hidden; +} + +.roadmaps-hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.roadmaps-hero .container { + position: relative; + z-index: 2; +} + +.roadmaps-hero .hero-content { + text-align: center; + width: 100%; +} + +.roadmaps-hero .hero-title { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + margin-bottom: 1.5rem; + background: linear-gradient(45deg, #ffffff, #f0f9ff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-align: center; +} + +.roadmaps-hero .hero-subtitle { + font-size: 1.25rem; + line-height: 1.6; + max-width: 800px; + margin: 0 auto 3rem; + opacity: 0.95; +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 3rem; + flex-wrap: wrap; +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-size: 2.5rem; + font-weight: 700; + line-height: 1; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 1rem; + opacity: 0.9; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Section Styles */ +.roadmap-categories { + padding: 5rem 0; + background: var(--bg-secondary); +} + +[data-theme="dark"] .roadmap-categories { + background: var(--dark-bg-secondary); +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.section-description { + font-size: 1.125rem; + color: var(--text-secondary); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; +} + +/* Roadmap Grid */ +.roadmap-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +/* Roadmap Cards */ +.roadmap-card { + background: var(--bg-primary); + border-radius: var(--radius-xl); + padding: 2rem; + box-shadow: var(--shadow-lg); + border: 1px solid var(--gray-200); + transition: all 0.3s ease; + cursor: pointer; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .roadmap-card { + background: var(--dark-bg-primary); + border-color: var(--dark-bg-accent); +} + +.roadmap-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +.roadmap-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); +} + +.roadmap-card-header { + margin-bottom: 1.5rem; +} + +.roadmap-icon { + width: 60px; + height: 60px; + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + color: white; + margin-bottom: 1rem; +} + +.roadmap-icon.web-dev { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.roadmap-icon.ai-ml { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); +} + +.roadmap-icon.ui-ux { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); +} + +.roadmap-icon.backend { + background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); +} + +.roadmap-icon.mobile { + background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); +} + +.roadmap-icon.devops { + background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); + color: var(--gray-800); +} + +.roadmap-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: var(--text-primary); +} + +.roadmap-description { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1.5rem; +} + +/* Roadmap Meta */ +.roadmap-meta { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 1.5rem; +} + +.roadmap-level { + display: flex; + align-items: center; +} + +.level-badge { + padding: 0.25rem 0.75rem; + border-radius: 9999px; + font-size: 0.875rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.level-badge.beginner { + background: var(--secondary-light); + color: var(--secondary-color); +} + +.level-badge.intermediate { + background: #fef3c7; + color: #d97706; +} + +.level-badge.advanced { + background: #fee2e2; + color: #dc2626; +} + +[data-theme="dark"] .level-badge.beginner { + background: rgba(16, 185, 129, 0.2); + color: #34d399; +} + +[data-theme="dark"] .level-badge.intermediate { + background: rgba(217, 119, 6, 0.2); + color: #fbbf24; +} + +[data-theme="dark"] .level-badge.advanced { + background: rgba(220, 38, 38, 0.2); + color: #f87171; +} + +.roadmap-duration, +.roadmap-projects { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.875rem; +} + +.roadmap-duration i, +.roadmap-projects i { + color: var(--primary-color); +} + +/* Tech Stack */ +.roadmap-tech-stack { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2rem; +} + +.tech-badge { + padding: 0.25rem 0.75rem; + background: var(--gray-100); + color: var(--gray-700); + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +[data-theme="dark"] .tech-badge { + background: var(--dark-bg-accent); + color: var(--dark-text-secondary); +} + +.tech-badge.html { + background: #fff5f5; + color: #e53e3e; +} + +.tech-badge.css { + background: #ebf8ff; + color: #3182ce; +} + +.tech-badge.js { + background: #fffff0; + color: #d69e2e; +} + +.tech-badge.react { + background: #f0fff4; + color: #38a169; +} + +.tech-badge.python { + background: #fef5e7; + color: #dd6b20; +} + +.tech-badge.numpy, +.tech-badge.pandas { + background: #edf2f7; + color: #4a5568; +} + +.tech-badge.tensorflow { + background: #fff5f5; + color: #e53e3e; +} + +[data-theme="dark"] .tech-badge.html { + background: rgba(229, 62, 62, 0.2); + color: #feb2b2; +} + +[data-theme="dark"] .tech-badge.css { + background: rgba(49, 130, 206, 0.2); + color: #90cdf4; +} + +[data-theme="dark"] .tech-badge.js { + background: rgba(214, 158, 46, 0.2); + color: #f6e05e; +} + +[data-theme="dark"] .tech-badge.react { + background: rgba(56, 161, 105, 0.2); + color: #9ae6b4; +} + +/* Roadmap Button */ +.roadmap-btn { + width: 100%; + padding: 1rem 1.5rem; + background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); + color: white; + border: none; + border-radius: var(--radius-lg); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.roadmap-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); +} + +.roadmap-btn i { + transition: transform 0.3s ease; +} + +.roadmap-btn:hover i { + transform: translateX(4px); +} + +/* Modal Styles */ +.roadmap-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: none; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.roadmap-modal.active { + display: flex; +} + +.modal-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); +} + +.modal-content { + position: relative; + background: var(--bg-primary); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + max-width: 1000px; + width: 100%; + max-height: 90vh; + overflow: hidden; + display: flex; + flex-direction: column; +} + +[data-theme="dark"] .modal-content { + background: var(--dark-bg-primary); + border: 1px solid var(--dark-bg-accent); +} + +.modal-header { + padding: 2rem; + border-bottom: 1px solid var(--gray-200); + display: flex; + justify-content: space-between; + align-items: center; +} + +[data-theme="dark"] .modal-header { + border-bottom-color: var(--dark-bg-accent); +} + +.modal-title { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-primary); +} + +.modal-close { + background: none; + border: none; + font-size: 1.5rem; + color: var(--text-secondary); + cursor: pointer; + padding: 0.5rem; + border-radius: var(--radius-md); + transition: all 0.2s ease; +} + +.modal-close:hover { + background: var(--gray-100); + color: var(--text-primary); +} + +[data-theme="dark"] .modal-close:hover { + background: var(--dark-bg-accent); +} + +.modal-body { + padding: 2rem; + overflow-y: auto; + flex: 1; +} + +/* Roadmap Overview in Modal */ +.roadmap-overview { + margin-bottom: 2rem; +} + +.overview-stats { + display: flex; + gap: 2rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; +} + +.overview-stats .stat { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.875rem; +} + +.overview-stats .stat i { + color: var(--primary-color); +} + +.overview-description { + color: var(--text-secondary); + line-height: 1.6; + font-size: 1.125rem; +} + +/* Roadmap Stages */ +.roadmap-stages { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.stage { + background: var(--bg-secondary); + border-radius: var(--radius-lg); + padding: 2rem; + border-left: 4px solid var(--primary-color); + position: relative; +} + +[data-theme="dark"] .stage { + background: var(--dark-bg-secondary); +} + +.stage-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1.5rem; + gap: 1rem; +} + +.stage-title { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.stage-level { + padding: 0.25rem 0.75rem; + background: var(--primary-light); + color: var(--primary-color); + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + white-space: nowrap; +} + +[data-theme="dark"] .stage-level { + background: rgba(99, 102, 241, 0.2); + color: #a5b4fc; +} + +.stage-description { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 2rem; +} + +.stage-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.stage-section { + background: var(--bg-primary); + border-radius: var(--radius-md); + padding: 1.5rem; + border: 1px solid var(--gray-200); +} + +[data-theme="dark"] .stage-section { + background: var(--dark-bg-primary); + border-color: var(--dark-bg-accent); +} + +.stage-section h4 { + font-size: 1.125rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.stage-section h4 i { + color: var(--primary-color); +} + +.stage-section ul { + list-style: none; + padding: 0; +} + +.stage-section li { + padding: 0.5rem 0; + color: var(--text-secondary); + position: relative; + padding-left: 1.5rem; +} + +.stage-section li::before { + content: '•'; + color: var(--primary-color); + position: absolute; + left: 0; + font-weight: bold; +} + +.project-link { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +.project-link:hover { + color: var(--primary-hover); + text-decoration: underline; +} + +/* Why Roadmaps Section */ +.why-roadmaps { + padding: 5rem 0; + background: var(--bg-primary); +} + +[data-theme="dark"] .why-roadmaps { + background: var(--dark-bg-primary); +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + max-width: 1000px; + margin: 0 auto; +} + +.benefit-card { + text-align: center; + padding: 2rem; + background: var(--bg-secondary); + border-radius: var(--radius-lg); + border: 1px solid var(--gray-200); + transition: transform 0.3s ease; +} + +[data-theme="dark"] .benefit-card { + background: var(--dark-bg-secondary); + border-color: var(--dark-bg-accent); +} + +.benefit-card:hover { + transform: translateY(-4px); +} + +.benefit-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 2rem; + color: white; +} + +.benefit-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 1rem; +} + +.benefit-description { + color: var(--text-secondary); + line-height: 1.6; +} + +/* Progress Bar Styles */ +.progress-bar { + margin-top: 1rem; + background: var(--gray-200); + border-radius: 9999px; + height: 8px; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .progress-bar { + background: var(--dark-bg-accent); +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); + border-radius: 9999px; + transition: width 0.3s ease; +} + +.progress-text { + position: absolute; + top: -25px; + right: 0; + font-size: 0.75rem; + color: var(--text-secondary); + font-weight: 500; +} + +/* Stage completion checkboxes */ +.stage-completion { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; + padding: 1rem; + background: var(--bg-secondary); + border-radius: var(--radius-md); + border: 1px solid var(--gray-200); +} + +[data-theme="dark"] .stage-completion { + background: var(--dark-bg-secondary); + border-color: var(--dark-bg-accent); +} + +.stage-checkbox { + width: 20px; + height: 20px; + border: 2px solid var(--primary-color); + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + position: relative; +} + +.stage-checkbox.checked { + background: var(--primary-color); +} + +.stage-checkbox.checked::after { + content: '✓'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-weight: bold; + font-size: 14px; +} + +.completion-label { + color: var(--text-secondary); + font-size: 0.875rem; + cursor: pointer; +} + +/* Roadmap connection lines */ +.stage::after { + content: ''; + position: absolute; + left: 50%; + bottom: -1rem; + width: 2px; + height: 1rem; + background: var(--primary-color); + transform: translateX(-50%); +} + +.stage:last-child::after { + display: none; +} + +/* Enhanced hover effects */ +.roadmap-card:hover .roadmap-icon { + transform: scale(1.1); + transition: transform 0.3s ease; +} + +.tech-badge:hover { + transform: translateY(-2px); + transition: transform 0.2s ease; +} + +/* Loading animation for modal */ +.modal-content.loading { + opacity: 0.7; + pointer-events: none; +} + +.modal-content.loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 40px; + height: 40px; + border: 4px solid var(--gray-200); + border-top: 4px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + transform: translate(-50%, -50%); +} + +@keyframes spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .roadmap-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .roadmap-card { + padding: 1.5rem; + } + + .hero-stats { + gap: 2rem; + } + + .stat-number { + font-size: 2rem; + } + + .modal-content { + margin: 1rem; + max-height: calc(100vh - 2rem); + } + + .modal-header, + .modal-body { + padding: 1.5rem; + } + + .stage-content { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .stage-header { + flex-direction: column; + align-items: flex-start; + } + + .benefits-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .overview-stats { + flex-direction: column; + gap: 1rem; + } +} + +@media (max-width: 480px) { + .roadmaps-hero { + padding: 4rem 0 3rem; + } + + .roadmaps-hero .hero-title { + font-size: 2.5rem; + } + + .roadmaps-hero .hero-subtitle { + font-size: 1.125rem; + } + + .roadmap-categories { + padding: 3rem 0; + } + + .roadmap-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .roadmap-card { + padding: 1.25rem; + } + + .roadmap-icon { + width: 50px; + height: 50px; + font-size: 1.25rem; + } + + .stage { + padding: 1.5rem; + } + + .stage-section { + padding: 1.25rem; + } +}