Role vs tool distinction in roadmaps

content/roadmaps.json

@@ -35,6 +35,7 @@
     "description": "Step by step guide to becoming a modern frontend developer in 2022",
     "featuredTitle": "Frontend",
     "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
+    "type": "role",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
@@ -82,6 +83,7 @@
     },
     "title": "Backend Developer",
     "description": "Step by step guide to becoming a modern backend developer in 2022",
+    "type": "role",
     "featuredTitle": "Backend",
     "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
     "featured": true,
@@ -126,6 +128,7 @@
     "title": "DevOps Roadmap",
     "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
     "featuredTitle": "DevOps",
+    "type": "role",
     "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
     "featured": true,
     "imageUrl": "/roadmaps/devops.png",
@@ -169,6 +172,7 @@
     "title": "React Developer",
     "description": "Everything that is there to learn about React and the ecosystem in 2022.",
     "featuredTitle": "React",
+    "type": "tool",
     "featuredDescription": "Step by step guide to become a React Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
@@ -211,6 +215,7 @@
     "title": "Angular Developer",
     "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
     "featuredTitle": "Angular",
+    "type": "tool",
     "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
@@ -253,6 +258,7 @@
     "title": "Android Developer",
     "description": "Step by step guide to becoming an Android developer in 2022",
     "featuredTitle": "Android",
+    "type": "role",
     "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
     "isTextHeavy": true,
     "isCommunity": false,
@@ -294,6 +300,7 @@
     "title": "Python Developer",
     "description": "Step by step guide to becoming a Python developer in 2022",
     "featuredTitle": "Python",
+    "type": "tool",
     "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
     "isTextHeavy": true,
     "isCommunity": false,
@@ -344,6 +351,7 @@
     "title": "Go Developer",
     "description": "Step by step guide to becoming a Go developer in 2022",
     "featuredTitle": "Go",
+    "type": "tool",
     "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
@@ -395,6 +403,7 @@
     "title": "Java Developer",
     "description": "Step by step guide to becoming a Java developer in 2022",
     "featuredTitle": "Java",
+    "type": "tool",
     "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
@@ -444,6 +453,7 @@
     "title": "PostgreSQL DBA",
     "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
     "featuredTitle": "DBA",
+    "type": "role",
     "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
     "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
     "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
@@ -479,6 +489,7 @@
     "title": "AWS",
     "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
     "featuredTitle": "AWS",
+    "type": "tool",
     "featuredDescription": "Step by step guide to learn AWS in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
@@ -520,6 +531,7 @@
     "title": "QA Engineer",
     "description": "Steps to follow in order to become a modern QA Engineer in 2022",
     "featuredTitle": "QA",
+    "type": "role",
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
     "featured": true,

content/roadmaps/100-frontend/meta.json

@@ -34,6 +34,7 @@
   "description": "Step by step guide to becoming a modern frontend developer in 2022",
   "featuredTitle": "Frontend",
   "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
+  "type": "role",
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"

content/roadmaps/101-backend/meta.json

@@ -31,6 +31,7 @@
   },
   "title": "Backend Developer",
   "description": "Step by step guide to becoming a modern backend developer in 2022",
+  "type": "role",
   "featuredTitle": "Backend",
   "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
   "featured": true,

content/roadmaps/102-devops/meta.json

@@ -26,6 +26,7 @@
   "title": "DevOps Roadmap",
   "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
   "featuredTitle": "DevOps",
+  "type": "role",
   "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
   "featured": true,
   "imageUrl": "/roadmaps/devops.png",
@@ -42,4 +43,4 @@
   },
   "pdfUrl": "/pdfs/devops.pdf",
   "contentPathsFilePath": "./content-paths.json"
-}
+}

content/roadmaps/103-react/meta.json

@@ -21,6 +21,7 @@
   "title": "React Developer",
   "description": "Everything that is there to learn about React and the ecosystem in 2022.",
   "featuredTitle": "React",
+  "type": "tool",
   "featuredDescription": "Step by step guide to become a React Developer in 2022",
   "isTextHeavy": false,
   "isCommunity": false,

content/roadmaps/104-angular/meta.json

@@ -19,6 +19,7 @@
   "title": "Angular Developer",
   "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
   "featuredTitle": "Angular",
+  "type": "tool",
   "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
   "isTextHeavy": false,
   "isCommunity": false,

content/roadmaps/105-android/meta.json

@@ -19,6 +19,7 @@
   "title": "Android Developer",
   "description": "Step by step guide to becoming an Android developer in 2022",
   "featuredTitle": "Android",
+  "type": "role",
   "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
   "isTextHeavy": true,
   "isCommunity": false,

content/roadmaps/106-python/meta.json

@@ -19,6 +19,7 @@
   "title": "Python Developer",
   "description": "Step by step guide to becoming a Python developer in 2022",
   "featuredTitle": "Python",
+  "type": "tool",
   "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
   "isTextHeavy": true,
   "isCommunity": false,

content/roadmaps/107-golang/meta.json

@@ -29,6 +29,7 @@
   "title": "Go Developer",
   "description": "Step by step guide to becoming a Go developer in 2022",
   "featuredTitle": "Go",
+  "type": "tool",
   "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
   "isTextHeavy": false,
   "isCommunity": false,

content/roadmaps/108-java/meta.json

@@ -28,6 +28,7 @@
   "title": "Java Developer",
   "description": "Step by step guide to becoming a Java developer in 2022",
   "featuredTitle": "Java",
+  "type": "tool",
   "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
   "isTextHeavy": false,
   "isCommunity": false,

content/roadmaps/109-postgresql-dba/meta.json

@@ -26,6 +26,7 @@
   "title": "PostgreSQL DBA",
   "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
   "featuredTitle": "DBA",
+  "type": "role",
   "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
   "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",

content/roadmaps/110-aws/meta.json

@@ -17,6 +17,7 @@
   "title": "AWS",
   "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
   "featuredTitle": "AWS",
+  "type": "tool",
   "featuredDescription": "Step by step guide to learn AWS in 2022",
   "isTextHeavy": false,
   "isCommunity": false,

content/roadmaps/111-qa/meta.json

@@ -20,6 +20,7 @@
   "title": "QA Engineer",
   "description": "Steps to follow in order to become a modern QA Engineer in 2022",
   "featuredTitle": "QA",
+  "type": "role",
   "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
   "isUpcoming": true,
   "featured": true,

lib/roadmap.ts

@@ -14,6 +14,7 @@ export type RoadmapType = {
     name: string;
     url: string;
   };
+  type: "role" | "tool";
   featured: boolean;
   imageUrl?: string;
   jsonUrl?: string;

pages/index.tsx

@@ -3,9 +3,9 @@ import {
   Container,
   Heading,
   Link,
-  SimpleGrid,
+  SimpleGrid, Tag,
   Text,
-  useMediaQuery,
+  useMediaQuery
 } from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
@@ -55,29 +55,27 @@ export default function Home(props: HomeProps) {
               educational content to help guide the developers in picking up the
               path and guide their learnings.
             </Text>
-
-            <Text fontSize={['14px', '14px', '16px']}>
-              We also have a{' '}
-              <Link
-                textDecoration={'underline'}
-                href={siteConfig.url.youtube}
-                onClick={() =>
-                  event({
-                    category: 'Subscription',
-                    action: 'Clicked the YouTube link',
-                    label: 'YouTube link on home',
-                  })
-                }
-                target="_blank"
-                fontWeight={600}
-              >
-                YouTube channel
-              </Link>{' '}
-              which we hope you are going to love.
-            </Text>
           </Box>
-          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
+
-            {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+          <Tag bg='gray.400' mb={4}>Role Based Roadmaps</Tag>
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+            {roadmaps.filter(roadmap => roadmap.type === 'role').map((roadmap: RoadmapType, counter: number) => (
+              <HomeRoadmapItem
+                isUpcoming={roadmap.isUpcoming}
+                url={`/${roadmap.id}`}
+                key={roadmap.id}
+                colorIndex={counter}
+                title={roadmap.featuredTitle}
+                isCommunity={roadmap.isCommunity}
+                subtitle={roadmap.featuredDescription}
+              />
+            ))}
+          </SimpleGrid>
+
+          <Tag bg='gray.400' mb={4}>Tool Based Skill Trees</Tag>
+
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='30px'>
+            {roadmaps.filter(roadmap => roadmap.type === 'tool').map((roadmap: RoadmapType, counter: number) => (
               <HomeRoadmapItem
                 isUpcoming={roadmap.isUpcoming}
                 url={`/${roadmap.id}`}

public/sitemap.xml

@@ -3,73 +3,73 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.766Z</lastmod>
+              <lastmod>2022-08-04T11:36:54.909Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/backend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.766Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.841Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/devops</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-08-03T15:24:13.858Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.845Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/react</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.767Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.834Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/angular</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.767Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.838Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/android</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:32:00.124Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.837Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/python</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.844Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/golang</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.847Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/java</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.840Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/postgresql-dba</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.273Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.848Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/aws</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.852Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.842Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/qa</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.633Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.836Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -255,7 +255,7 @@
 <url>
               <loc>https://roadmap.sh/</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-01-13T15:46:46.881Z</lastmod>
+              <lastmod>2022-08-04T11:36:26.733Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>