From e1a634fa4a45c3580eb9d7142141fa545844949e Mon Sep 17 00:00:00 2001 From: ciphervaishnavi Date: Tue, 7 Oct 2025 03:34:33 +0530 Subject: [PATCH] added roadmaps --- docusaurus.config.ts | 5 + src/pages/Index.tsx | 17 +- src/pages/index.module.css | 516 ++++++++++++++++++++++++++++++++++++- src/pages/roadmaps.tsx | 210 +++++++++++++++ 4 files changed, 746 insertions(+), 2 deletions(-) create mode 100644 src/pages/roadmaps.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 74dbf1a..3a7a397 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -90,6 +90,11 @@ const config: Config = { label: 'Blog', position: 'left' }, + { + to: '/roadmaps', + label: 'Roadmaps', + position: 'left' + }, { type: 'dropdown', label: 'More', diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 4375347..7e88121 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -133,7 +133,7 @@ export default function Home(): React.ReactElement { - + See RoadMap + + 🗺️ Roadmap.sh + + + + + + diff --git a/src/pages/index.module.css b/src/pages/index.module.css index f6537ce..3310025 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -271,6 +271,31 @@ transform: translateY(-2px); } +.btnTertiary { + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + color: white; + padding: 1rem 2rem; + border: none; + border-radius: 12px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.btnTertiary:hover { + color: white; + text-decoration: none; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); +} + .heroVisual { flex: 1 1 45%; display: flex; @@ -633,7 +658,8 @@ } .btnPrimary, - .btnSecondary { + .btnSecondary, + .btnTertiary { width: 100%; justify-content: center; } @@ -959,3 +985,491 @@ border-radius: 8px; margin-top: 0.5rem; } + +/* Roadmaps Page Styles */ +.roadmapsHeader { + text-align: center; + margin-bottom: 4rem; +} + +.roadmapsHeader h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.roadmapsSubtitle { + font-size: 1.2rem; + color: var(--text-secondary); + max-width: 800px; + margin: 0 auto; + line-height: 1.6; +} + +.benefitsSection { + margin-bottom: 4rem; +} + +.benefitsSection h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 2rem; + color: var(--text-primary); +} + +.benefitsList { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.benefit { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1.5rem; + background: var(--bg-card); + border-radius: 12px; + border: 1px solid var(--border-primary); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.benefit:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.benefit h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.benefit p { + color: var(--text-secondary); + margin: 0; +} + +.roadmapsGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; +} + +.roadmapCard { + background: var(--bg-card); + border: 1px solid var(--border-primary); + border-radius: 16px; + padding: 2rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; +} + +.roadmapCard:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.roadmapCard::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6); +} + +.roadmapHeader { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.roadmapIcon { + padding: 1rem; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; +} + +.roadmapTitle h3 { + font-size: 1.5rem; + margin: 0 0 0.25rem 0; + color: var(--text-primary); + font-weight: 600; +} + +.difficulty { + font-size: 0.85rem; + color: var(--text-tertiary); + background: var(--bg-elevated); + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-weight: 500; +} + +.roadmapDescription { + color: var(--text-secondary); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.roadmapMeta { + margin-bottom: 1.5rem; +} + +.estimatedTime { + color: var(--text-secondary); + font-size: 0.9rem; +} + +.estimatedTime strong { + color: var(--text-primary); +} + +.skillsList { + margin-bottom: 2rem; +} + +.skillsList h4 { + font-size: 1.1rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.skillsList ul { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0.5rem; +} + +.skillsList li { + color: var(--text-secondary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--border-primary); + font-size: 0.9rem; + position: relative; + padding-left: 1.5rem; +} + +.skillsList li::before { + content: "✓"; + position: absolute; + left: 0; + color: #10b981; + font-weight: bold; +} + +.roadmapActions { + margin-top: auto; +} + +.viewRoadmapBtn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: #3b82f6; + color: white; + text-decoration: none; + border-radius: 8px; + font-weight: 500; + transition: all 0.2s ease; + border: none; + cursor: pointer; + font-size: 0.95rem; +} + +.viewRoadmapBtn:hover { + background: #2563eb; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + color: white; + text-decoration: none; +} + +.callToAction { + text-align: center; + padding: 3rem 2rem; + background: var(--bg-card); + border-radius: 16px; + border: 1px solid var(--border-primary); +} + +.callToAction h2 { + font-size: 2rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.callToAction p { + font-size: 1.1rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.ctaButtons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.ctaButton { + padding: 1rem 2rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: all 0.2s ease; + border: none; + cursor: pointer; + font-size: 1rem; +} + +.ctaButton.primary { + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + color: white; +} + +.ctaButton.primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); + color: white; + text-decoration: none; +} + +.ctaButton.secondary { + background: transparent; + color: var(--text-primary); + border: 2px solid var(--border-secondary); +} + +.ctaButton.secondary:hover { + background: var(--bg-elevated); + border-color: #3b82f6; + color: var(--text-primary); + text-decoration: none; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .roadmapsGrid { + grid-template-columns: 1fr; + } + + .benefitsList { + grid-template-columns: 1fr; + } + + .roadmapsHeader h1 { + font-size: 2.5rem; + } + + .roadmapsSubtitle { + font-size: 1.1rem; + } + + .roadmapCard { + padding: 1.5rem; + } + + .skillsList ul { + grid-template-columns: 1fr; + } + + .ctaButtons { + flex-direction: column; + align-items: center; + } + + .ctaButton { + width: 100%; + max-width: 300px; + } +} + +.roadmapsSection::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.roadmapsContainer { + max-width: 1200px; + margin: 0 auto; + position: relative; + z-index: 1; +} + +.roadmapsHeader { + text-align: center; + margin-bottom: 4rem; +} + +.roadmapsTitle { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, #3b82f6, #8b5cf6, #10b981); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 200% 200%; + animation: gradientShift 3s ease-in-out infinite; +} + +.roadmapsSubtitle { + font-size: 1.2rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.roadmapCardsPreview { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.roadmapCardPreview { + background: var(--bg-card); + border: 1px solid var(--border-primary); + border-radius: 16px; + padding: 2rem; + text-align: center; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.roadmapCardPreview:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-lg); + border-color: #3b82f6; +} + +.roadmapCardPreview::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981); + background-size: 200% 200%; + animation: gradientShift 2s ease-in-out infinite; +} + +.roadmapCardIcon { + width: 80px; + height: 80px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + transition: transform 0.3s ease; +} + +.roadmapCardPreview:hover .roadmapCardIcon { + transform: scale(1.1); +} + +.roadmapCardPreview h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--text-primary); + font-weight: 600; +} + +.roadmapCardPreview p { + color: var(--text-secondary); + margin-bottom: 1rem; + line-height: 1.5; +} + +.roadmapTime { + display: inline-block; + background: var(--bg-elevated); + color: var(--text-tertiary); + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; +} + +.roadmapsCTA { + text-align: center; +} + +.roadmapsButton { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2.5rem; + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + color: white; + text-decoration: none; + border-radius: 12px; + font-weight: 600; + font-size: 1.1rem; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); +} + +.roadmapsButton:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); + color: white; + text-decoration: none; +} + +@keyframes gradientShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +/* Responsive for roadmaps preview */ +@media (max-width: 768px) { + .roadmapsTitle { + font-size: 2.5rem; + } + + .roadmapCardsPreview { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .roadmapCardPreview { + padding: 1.5rem; + } + + .roadmapsButton { + padding: 0.875rem 2rem; + font-size: 1rem; + } +} diff --git a/src/pages/roadmaps.tsx b/src/pages/roadmaps.tsx new file mode 100644 index 0000000..5da1869 --- /dev/null +++ b/src/pages/roadmaps.tsx @@ -0,0 +1,210 @@ +import React from "react"; +import Layout from "@theme/Layout"; +import Head from "@docusaurus/Head"; +import { ExternalLink, Target, BookOpen, Code2 } from "lucide-react"; +import styles from './index.module.css'; + +// Roadmap data structure +const roadmaps = [ + { + id: "frontend", + title: "Frontend Developer", + description: "Complete roadmap for frontend development including HTML, CSS, JavaScript, React, and modern tools", + icon: Code2, + url: "https://roadmap.sh/frontend", + color: "#3b82f6", + skills: [ + "HTML & CSS Fundamentals", + "JavaScript (ES6+)", + "React.js", + "TypeScript", + "State Management", + "Build Tools & Bundlers", + "Testing", + "Performance Optimization" + ], + estimatedTime: "6-12 months", + difficulty: "Beginner to Advanced" + }, + { + id: "backend", + title: "Backend Developer", + description: "Comprehensive backend development path covering server-side technologies, databases, and APIs", + icon: BookOpen, + url: "https://roadmap.sh/backend", + color: "#10b981", + skills: [ + "Programming Language (Python/Node.js/Java)", + "Databases (SQL & NoSQL)", + "APIs & RESTful Services", + "Authentication & Security", + "Caching & Performance", + "DevOps Basics", + "Testing & Monitoring", + "System Design" + ], + estimatedTime: "8-15 months", + difficulty: "Intermediate to Advanced" + }, + { + id: "fullstack", + title: "Full Stack Developer", + description: "Complete full stack development journey combining frontend and backend technologies", + icon: Target, + url: "https://roadmap.sh/full-stack", + color: "#8b5cf6", + skills: [ + "Frontend Technologies", + "Backend Development", + "Database Management", + "Version Control (Git)", + "Deployment & Hosting", + "API Development", + "Security Best Practices", + "Project Management" + ], + estimatedTime: "12-18 months", + difficulty: "Beginner to Advanced" + }, + { + id: "dsa", + title: "Data Structures & Algorithms", + description: "Essential DSA concepts for programming interviews and problem-solving skills", + icon: BookOpen, + url: "https://roadmap.sh/computer-science", + color: "#f59e0b", + skills: [ + "Arrays & Strings", + "Linked Lists", + "Stacks & Queues", + "Trees & Graphs", + "Dynamic Programming", + "Sorting & Searching", + "Recursion & Backtracking", + "System Design Basics" + ], + estimatedTime: "6-12 months", + difficulty: "Beginner to Advanced" + } +]; + +const RoadmapCard = ({ roadmap }) => { + const IconComponent = roadmap.icon; + + return ( +
+
+
+ +
+
+

{roadmap.title}

+ {roadmap.difficulty} +
+
+ +

{roadmap.description}

+ +
+
+ Estimated Time: {roadmap.estimatedTime} +
+
+ +
+

Key Skills You'll Learn:

+
    + {roadmap.skills.map((skill, index) => ( +
  • {skill}
    • + ))} +
+
+ +
+ + View Interactive Roadmap + + +
+
+ ); +}; + +export default function RoadmapsPage() { + return ( + + + Learning Roadmaps - LearnHub + + + +
+
+

Learning Roadmaps

+

+ Choose your learning path and follow structured roadmaps to master your chosen technology stack. + These roadmaps are curated from roadmap.sh - the community-driven platform for developer roadmaps. +

+
+ +
+

Why Follow a Roadmap?

+
+
+ +
+

Clear Learning Path

+

Get a structured sequence of topics to study, eliminating confusion about what to learn next.

+
+
+
+ +
+

Goal-Oriented Learning

+

Plan your 30-day learning schedule effectively with milestone-based progression.

+
+
+
+ +
+

Industry-Standard Skills

+

Learn skills that are in high demand and follow industry best practices.

+
+
+
+
+ +
+ {roadmaps.map((roadmap) => ( + + ))} +
+ +
+

Ready to Start Your Journey?

+

+ Select a roadmap that aligns with your goals and start learning today. + Each roadmap provides detailed guidance on topics, resources, and the optimal learning sequence. +

+ +
+
+ + ); +} \ No newline at end of file