-
-
👤
-
- {authorName}
-
+
+ {authors.map((author, idx) => (
+
+
+
+
+ {author.name || "recode hive Team"}
+ {renderSocialIcons(author)}
+
+
+ ))}
5 min read
diff --git a/src/pages/roadmap/index.tsx b/src/pages/roadmap/index.tsx
new file mode 100644
index 00000000..4fec75b3
--- /dev/null
+++ b/src/pages/roadmap/index.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Head from "@docusaurus/Head";
+import { motion } from "framer-motion";
+import { roadmaps } from "../../data/roadmaps";
+import "./roadmap.css";
+
+const RoadmapCard = ({ roadmap, index }: { roadmap: any; index: number }) => {
+ return (
+
+
+ {roadmap.id === "html" ? "🌐" : roadmap.id === "css" ? "🎨" : "🚀"}
+
+ {roadmap.title}
+ {roadmap.description}
+
+
+
+ );
+};
+
+export default function RoadmapPage(): JSX.Element {
+ return (
+
+
+
+
+
+
+ Learning Roadmaps
+
+
+ Guided paths to help you navigate through the vast landscape of modern technology.
+ Step by step, from zero to hero.
+
+
+
+
+ {roadmaps.map((roadmap, index) => (
+
+
+
+ );
+}
diff --git a/src/pages/roadmap/roadmap.css b/src/pages/roadmap/roadmap.css
new file mode 100644
index 00000000..8408f201
--- /dev/null
+++ b/src/pages/roadmap/roadmap.css
@@ -0,0 +1,123 @@
+.roadmap-page {
+ padding: 4rem 0;
+ min-height: 100vh;
+ background-color: var(--ifm-background-color);
+}
+
+.roadmap-hero {
+ text-align: center;
+ margin-bottom: 4rem;
+ padding: 0 1rem;
+}
+
+.roadmap-hero-title {
+ font-size: 3.5rem;
+ font-weight: 800;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.roadmap-hero-subtitle {
+ font-size: 1.25rem;
+ color: var(--ifm-color-emphasis-700);
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.roadmap-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 2rem;
+ padding: 0 1rem;
+}
+
+.roadmap-card {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 1.5rem;
+ padding: 2rem;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+[data-theme='light'] .roadmap-card {
+ background: rgba(0, 0, 0, 0.02);
+ border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.roadmap-card:hover {
+ transform: translateY(-10px);
+ border-color: #3b82f6;
+ box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1);
+}
+
+.roadmap-card-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.roadmap-card-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+}
+
+.roadmap-card-description {
+ color: var(--ifm-color-emphasis-600);
+ margin-bottom: 2rem;
+ line-height: 1.6;
+ flex-grow: 1;
+}
+
+.roadmap-card-stats {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 1.5rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+[data-theme='light'] .roadmap-card-stats {
+ border-top-color: rgba(0, 0, 0, 0.05);
+}
+
+.roadmap-stat {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--ifm-color-emphasis-500);
+}
+
+.roadmap-button {
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.75rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-decoration: none !important;
+ display: inline-block;
+ text-align: center;
+}
+
+.roadmap-button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .roadmap-hero-title {
+ font-size: 2.5rem;
+ }
+
+ .roadmap-grid {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/theme/BlogPostAuthor/Socials/index.tsx b/src/theme/BlogPostAuthor/Socials/index.tsx
new file mode 100644
index 00000000..dd1ed98c
--- /dev/null
+++ b/src/theme/BlogPostAuthor/Socials/index.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {
+ FaGithub,
+ FaTwitter,
+ FaLinkedin,
+ FaInstagram,
+ FaYoutube,
+ FaFacebook,
+ FaStackOverflow,
+ FaMedium,
+ // FaHashnod÷e,
+ FaExternalLinkAlt,
+ FaRss,
+} from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
+import { SiBluesky, SiSubstack } from 'react-icons/si';
+import styles from './styles.module.css';
+
+const SocialIcons = {
+ github: FaGithub,
+ twitter: FaTwitter,
+ x: FaXTwitter,
+ linkedin: FaLinkedin,
+ instagram: FaInstagram,
+ youtube: FaYoutube,
+ facebook: FaFacebook,
+ stackoverflow: FaStackOverflow,
+ medium: FaMedium,
+ // hashnode: FaHashn÷ode,
+ newsletter: SiSubstack,
+ substack: SiSubstack,
+ bluesky: SiBluesky,
+ rss: FaRss,
+};
+
+export default function BlogPostAuthorSocials({author}) {
+ const {socials} = author;
+ if (!socials) {
+ return null;
+ }
+
+ const renderSocialLink = (platform, handle) => {
+ const Icon = SocialIcons[platform.toLowerCase()] || FaExternalLinkAlt;
+ let href = handle;
+
+ if (!handle.startsWith('http')) {
+ switch (platform.toLowerCase()) {
+ case 'github':
+ href = `https://github.com/${handle}`;
+ break;
+ case 'twitter':
+ case 'x':
+ href = `https://x.com/${handle}`;
+ break;
+ case 'linkedin':
+ href = `https://www.linkedin.com/in/${handle}`;
+ break;
+ case 'instagram':
+ href = `https://www.instagram.com/${handle}`;
+ break;
+ case 'youtube':
+ href = `https://www.youtube.com/@${handle}`;
+ break;
+ case 'facebook':
+ href = `https://www.facebook.com/${handle}`;
+ break;
+ case 'medium':
+ href = `https://medium.com/@${handle}`;
+ break;
+ case 'hashnode':
+ href = `https://hashnode.com/@${handle}`;
+ break;
+ case 'stackoverflow':
+ href = `https://stackoverflow.com/users/${handle}`;
+ break;
+ case 'bluesky':
+ href = `https://bsky.app/profile/${handle}`;
+ break;
+ default:
+ break;
+ }
+ }
+
+ return (
+
+
+
+ );
+ };
+
+ return (
+
+ {Object.entries(socials).map(([platform, handle]) =>
+ renderSocialLink(platform, handle),
+ )}
+
+ );
+}
diff --git a/src/theme/BlogPostAuthor/Socials/styles.module.css b/src/theme/BlogPostAuthor/Socials/styles.module.css
new file mode 100644
index 00000000..f1ea7212
--- /dev/null
+++ b/src/theme/BlogPostAuthor/Socials/styles.module.css
@@ -0,0 +1,37 @@
+.socials {
+ display: flex;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.socialLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background-color: var(--ifm-color-emphasis-100);
+ color: var(--ifm-color-emphasis-700);
+ transition: all 0.2s ease;
+ font-size: 1.1rem;
+}
+
+.socialLink:hover {
+ background-color: var(--ifm-color-primary);
+ color: white;
+ transform: translateY(-2px);
+ text-decoration: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme='dark'] .socialLink {
+ background-color: var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-800);
+}
+
+[data-theme='dark'] .socialLink:hover {
+ background-color: var(--ifm-color-primary);
+ color: white;
+}
diff --git a/src/theme/BlogPostAuthor/index.tsx b/src/theme/BlogPostAuthor/index.tsx
new file mode 100644
index 00000000..71dddc60
--- /dev/null
+++ b/src/theme/BlogPostAuthor/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Socials from '@theme/BlogPostAuthor/Socials';
+import styles from './styles.module.css';
+
+export default function BlogPostAuthor({author, className}) {
+ const {name, title, url, imageURL, socials} = author;
+ return (
+
+ {imageURL && (
+
+
+
+ )}
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/theme/BlogPostAuthor/styles.module.css b/src/theme/BlogPostAuthor/styles.module.css
new file mode 100644
index 00000000..00583808
--- /dev/null
+++ b/src/theme/BlogPostAuthor/styles.module.css
@@ -0,0 +1,16 @@
+.authorPhoto {
+ width: 3.5rem;
+ height: 3.5rem;
+ border: 2px solid var(--ifm-color-emphasis-200);
+ padding: 2px;
+ background: var(--ifm-background-color);
+ transition: border-color 0.2s ease;
+}
+
+.authorPhoto:hover {
+ border-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .authorPhoto {
+ border-color: var(--ifm-color-emphasis-300);
+}
diff --git a/src/utils/authors.ts b/src/utils/authors.ts
index 491bac28..8cbe7eee 100644
--- a/src/utils/authors.ts
+++ b/src/utils/authors.ts
@@ -1,22 +1,75 @@
-export const authorsMap = {
- "ajay-dhangar": "Ajay Dhangar",
- "sanjay-kv": "Sanjay Viswanthan",
- "hitesh-gahanolia": "Hitesh Gahanolia",
- "sowmiya-v": "Sowmiya Venkatesan",
- "abhijith-m-s": "Abhijith M S",
- "khushi-kalra": "Khushi Kalra",
- nayanikamukherjee: "Nayanika Mukherjee",
- "pujan-sarkar": "Pujan Sarkar",
- mohitmuktikant: "Mohit Muktikant",
- "santhosh-siddhardha": "Lingamuneni Santhosh Siddhardha",
- "akshitha-chiluka": "Akshitha Chiluka",
- "Aditya-Singh-Rathore": "Aditya Singh Rathore",
+export const authorsMap: Record
}> = {
+ "ajay-dhangar": {
+ name: "Ajay Dhangar",
+ socials: {
+ github: "ajay-dhangar",
+ linkedin: "ajay-dhangar",
+ x: "CodesWithAjay",
+ }
+ },
+ "sanjay-kv": {
+ name: "Sanjay Viswanthan",
+ socials: {
+ github: "sanjay-kv",
+ linkedin: "sanjay-k-v",
+ x: "sanjay_kv_",
+ }
+ },
+ "hitesh-gahanolia": {
+ name: "Hitesh Gahanolia",
+ socials: { github: "Hitesh4278" }
+ },
+ "sowmiya-v": {
+ name: "Sowmiya Venkatesan",
+ socials: {
+ github: "sowmiyeh",
+ linkedin: "sowmiyavenkatesan",
+ x: "sowmiyeh",
+ }
+ },
+ "abhijith-m-s": {
+ name: "Abhijith M S",
+ socials: { github: "AMS003010" }
+ },
+ "khushi-kalra": {
+ name: "Khushi Kalra",
+ socials: { github: "abckhush" }
+ },
+ nayanikamukherjee: {
+ name: "Nayanika Mukherjee",
+ socials: { github: "Nayanika1402" }
+ },
+ "pujan-sarkar": {
+ name: "Pujan Sarkar",
+ socials: { github: "Pujan-sarkar" }
+ },
+ mohitmuktikant: {
+ name: "Mohit Muktikant",
+ socials: { github: "mohitmuktikant" }
+ },
+ "santhosh-siddhardha": {
+ name: "Lingamuneni Santhosh Siddhardha",
+ socials: { github: "Santhosh-Siddhardha" }
+ },
+ "akshitha-chiluka": {
+ name: "Akshitha Chiluka",
+ socials: { github: "AKSHITHA-CHILUKA" }
+ },
+ "Aditya-Singh-Rathore": {
+ name: "Aditya Singh Rathore",
+ socials: {
+ github: "Adez017",
+ linkedin: "aditya-singh-rathore0017",
+ x: "Adez017",
+ }
+ },
};
export const getAuthorNames = (authorIds: string[]): string => {
const firstNames = authorIds
.map((id) => {
- const fullName = authorsMap[id] || id;
+ const author = authorsMap[id];
+ const fullName = author ? author.name : id;
return fullName.split(" ")[0];
})
.slice(0, 2);