Merge pull request codeharborhub#2713 from CodeHarborHub/dev-3

Technology Roadmap is added

Author: ajay-dhangar

authors.json

@@ -213,19 +213,26 @@ const config = {
             position: "left",
             items: [
               {
-                html: '<span class="nav-emoji">🌍</span> Web Dev',
+                label: "🌍 Web Dev",
                 to: "/web-dev/",
               },
+
+              {
+                label: "🛣️ Roadmap",
+                to: "/roadmap/",
+              },
+
               {
-                html: '<span class="nav-emoji"> 📊</span> Quiz',
+                label: "📊 Quiz",
                 to: "https://quiz-app-ajay-dhangar.vercel.app/",
-              },              
+              },
+
               {
                 label: "🧑‍💻 Live Editor",
                 to: "/LiveEditor/",
               },
               {
-                html: '<span class="nav-emoji"> 📺</span> Broadcast',
+                label: "📺 Broadcast",
                 to: "https://codeharborhub-broadcast-web.vercel.app/",
               },
               {

docusaurus.config.js

@@ -1,58 +1,117 @@
+
 .roadmap-container {
   padding: 20px;
 }
 
-.roadmap-title {
+.roadmap-container .roadmap-title {
   text-align: center;
-  font-size: 2rem;
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  background: linear-gradient(
+    90deg,
+    rgb(106, 0, 255) 0%,
+    rgb(152 0 255) 30%,
+    rgb(246 41 41) 65%,
+    rgb(255 169 8) 100%
+  );
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.roadmap-container .roadmap-controls {
+  display: flex;
+  justify-content: center;
   margin-bottom: 20px;
 }
 
-.roadmap-category {
-  margin-bottom: 40px;
+.roadmap-container .roadmap-search {
+  padding: 10px;
+  font-size: 1.2rem;
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: 5px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.roadmap-container .roadmap-category {
+  margin-bottom: 30px;
 }
 
-.roadmap-category-title {
+.roadmap-container .roadmap-category .roadmap-category-title {
   text-align: center;
   font-size: 1.5rem;
-  margin-bottom: 20px;
+  cursor: pointer;
+  color: var(--ifm-color-primary);
+  margin:40px 0;
+}
+
+
+.roadmap-container .roadmap-category .roadmap-category-title::after {
+  content: "";
+  display: block;
+  width: 40%;
+  height: 1px;
+  background: linear-gradient(to left, var(--ifm-color-primary), transparent);
+  margin-top: -14px;
+  margin-left: auto;
 }
 
-.roadmap-cards {
+.roadmap-container .roadmap-category .roadmap-category-title::before {
+  content: "";
+  display: block;
+  width: 40%;
+  height: 1px;
+  background: linear-gradient(to right, var(--ifm-color-primary), transparent);
+  margin-bottom: -20px;
+
+}
+
+.roadmap-container .roadmap-category .roadmap-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 20px;
   list-style: none;
   padding: 0;
 }
 
-.roadmap-card {
+.roadmap-container .roadmap-category .roadmap-cards .roadmap-card {
   border: 1px solid var(--ifm-color-primary);
   border-radius: 8px;
-  padding: 20px;
+  padding: 15px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-align: center;
 }
 
-.roadmap-card:hover {
-  transform: translateY(-8px);
+.roadmap-container .roadmap-category .roadmap-cards .roadmap-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
-.roadmap-link {
+.roadmap-container .roadmap-category .roadmap-cards .roadmap-card .roadmap-link {
   text-decoration: none;
-  color: inherit;
-  font-size: 1rem;
+  color: var(--ifm-color-primary);
+  font-size: 1.1rem;
+}
+
+.roadmap-container .roadmap-category .roadmap-cards .roadmap-card .roadmap-link:hover {
+  color: var(--ifm-color-primary-darkest);
 }
 
 @media (min-width: 600px) {
-  .roadmap-cards {
+  .roadmap-container .roadmap-category .roadmap-cards {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (min-width: 900px) {
-  .roadmap-cards {
+  .roadmap-container .roadmap-category .roadmap-cards {
     grid-template-columns: repeat(3, 1fr);
   }
 }
+
+@media (min-width: 380px) {
+  .roadmap-container .roadmap-category .roadmap-cards {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}

src/components/Roadmap/Roadmap.css

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Roadmap.css";
 
 interface TechCategory {
@@ -269,23 +269,56 @@ const techCategories: TechCategory[] = [
     ],
   },
 ];
-
 const Roadmap: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [collapsedCategories, setCollapsedCategories] = useState<number[]>([]);
+
+  const toggleCollapse = (id: number) => {
+    setCollapsedCategories((prev) =>
+      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
+    );
+  };
+
+  const filteredCategories = techCategories
+    .map((category) => ({
+      ...category,
+      technologies: category.technologies.filter((tech) =>
+        tech.name.toLowerCase().includes(searchTerm.toLowerCase())
+      ),
+    }))
+    .filter((category) => category.technologies.length > 0);
+
   return (
     <div className="roadmap-container">
       <h1 className="roadmap-title">Technology Roadmap</h1>
-      {techCategories.map((category) => (
+      <div className="roadmap-controls">
+        <input
+          type="text"
+          placeholder="Search technologies..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="roadmap-search"
+        />
+      </div>
+      {filteredCategories.map((category) => (
         <div key={category.id} className="roadmap-category">
-          <h2 className="roadmap-category-title">{category.title}</h2>
-          <ul className="roadmap-cards">
-            {category.technologies.map((tech) => (
-              <li key={tech.id} className="roadmap-card">
-                <a href={tech.link} className="roadmap-link">
-                  {tech.name}
-                </a>
-              </li>
-            ))}
-          </ul>
+          <h2
+            className="roadmap-category-title"
+            onClick={() => toggleCollapse(category.id)}
+          >
+            {category.title}
+          </h2>
+          {!collapsedCategories.includes(category.id) && (
+            <ul className="roadmap-cards">
+              {category.technologies.map((tech) => (
+                <li key={tech.id} className="roadmap-card">
+                  <a href={tech.link} className="roadmap-link">
+                    {tech.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       ))}
     </div>

src/components/Roadmap/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Layout from "@theme/Layout";
-import Roadmap from "../components/Roadmap";
+import Roadmaps from "../../components/Roadmap";
 
 
 export default function RoadMap() {
@@ -11,9 +11,7 @@ export default function RoadMap() {
       description="RoadMap for Learning"
     >
       <main>
-        <div>
-          <Roadmap />
-        </div>
+          <Roadmaps />
       </main>
     </Layout>
   );