mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-03-15 12:49:43 +01:00
Desktop screen UI
This commit is contained in:
Kamran Ahmed
parent
45086a6314
commit
1092528de0
@ -4,8 +4,337 @@ import SimplePageHeader from '../components/SimplePageHeader.astro';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { getRoadmapsByTag } from '../lib/roadmap';
|
||||
|
||||
const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
|
||||
const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
|
||||
const groups = [
|
||||
{
|
||||
group: 'Absolute Beginners',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Frontend Beginner',
|
||||
link: '/frontend?r=frontend-beginner',
|
||||
},
|
||||
{
|
||||
title: 'Backend Beginner',
|
||||
link: '/backend?r=backend-beginner',
|
||||
},
|
||||
{
|
||||
title: 'DevOps Beginner',
|
||||
link: '/devops?r=devops-beginner',
|
||||
},
|
||||
{
|
||||
title: 'Full-Stack Developer',
|
||||
link: '/fullstack',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Languages / Platforms',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'JavaScript',
|
||||
link: '/javascript',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'TypeScript',
|
||||
link: '/typescript',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
link: '/nodejs',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'C++',
|
||||
link: '/cpp',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Go',
|
||||
link: '/golang',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Rust',
|
||||
link: '/rust',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Python',
|
||||
link: '/python',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Java',
|
||||
link: '/java',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'SQL',
|
||||
link: '/sql',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Web Development',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Frontend',
|
||||
link: '/frontend',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Backend',
|
||||
link: '/backend',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'DevOps',
|
||||
link: '/devops',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Full Stack',
|
||||
link: '/full-stack',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'QA',
|
||||
link: '/qa',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'GraphQL',
|
||||
link: '/graphql',
|
||||
type: 'role',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Frameworks',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'React',
|
||||
link: '/react',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
link: '/vue',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Angular',
|
||||
link: '/angular',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Spring Boot',
|
||||
link: '/spring-boot',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'ASP.NET Core',
|
||||
link: '/aspnet-core',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Mobile Development',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'React Native',
|
||||
link: '/react-native',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Flutter',
|
||||
link: '/flutter',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Android',
|
||||
link: '/android',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Databases',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'PostgreSQL',
|
||||
link: '/postgresql-dba',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'MongoDB',
|
||||
link: '/mongodb',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Computer Science',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Computer Science',
|
||||
link: '/computer-science',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Data Structures',
|
||||
link: '/data-structures-and-algorithms',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'System Design',
|
||||
link: '/system-design',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Design and Architecture',
|
||||
link: '/software-design-architecture',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Software Architect',
|
||||
link: '/software-architect',
|
||||
type: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Code Review',
|
||||
link: '/code-review',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Technical Writer',
|
||||
link: '/technical-writer',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Machine Learning',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'AI and Data Scientist',
|
||||
link: '/ai-data-scientist',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'MLOps',
|
||||
link: '/mlops',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Prompt Engineering',
|
||||
link: '/prompt-engineering',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Game Development',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Client Side Development',
|
||||
link: '/game-developer',
|
||||
type: 'skill',
|
||||
},
|
||||
{
|
||||
title: 'Server Side Development',
|
||||
link: '/server-side-game-developer',
|
||||
type: 'skill',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Design',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'UX Design',
|
||||
link: '/ux-design',
|
||||
},
|
||||
{
|
||||
title: 'Design System',
|
||||
link: '/design-system',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'DevOps',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'DevOps',
|
||||
link: '/devops',
|
||||
},
|
||||
{
|
||||
title: 'Docker',
|
||||
link: '/docker',
|
||||
},
|
||||
{
|
||||
title: 'Kubernetes',
|
||||
link: '/kubernetes',
|
||||
},
|
||||
{
|
||||
title: 'AWS',
|
||||
link: '/aws',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Blockchain',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Blockchain',
|
||||
link: '/blockchain',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Cyber Security',
|
||||
roadmaps: [
|
||||
{
|
||||
title: 'Cyber Security',
|
||||
link: '/cyber-security',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const shownTitles = groups
|
||||
.map((group) => group.roadmaps.map((roadmap) => roadmap.title))
|
||||
.flat()
|
||||
.concat([
|
||||
'Frontend Beginner',
|
||||
'Backend Beginner',
|
||||
'DevOps Beginner',
|
||||
'Full-Stack Developer',
|
||||
'Data Structures & Algorithms',
|
||||
'Server Side Game Developer',
|
||||
'Game Developer',
|
||||
]);
|
||||
|
||||
const roleRoadmaps = (await getRoadmapsByTag('role-roadmap')).filter(
|
||||
(roadmap) => !shownTitles.includes(roadmap.frontmatter.briefTitle),
|
||||
);
|
||||
const skillRoadmaps = (await getRoadmapsByTag('skill-roadmap')).filter(
|
||||
(roadmap) => !shownTitles.includes(roadmap.frontmatter.briefTitle),
|
||||
);
|
||||
|
||||
const otherRoadmaps = roleRoadmaps.concat(skillRoadmaps);
|
||||
if (otherRoadmaps.length > 0) {
|
||||
groups.push({
|
||||
group: 'Uncategorized',
|
||||
roadmaps: otherRoadmaps.map((roadmap) => ({
|
||||
title: roadmap.frontmatter.briefTitle,
|
||||
link: roadmap.url,
|
||||
})),
|
||||
});
|
||||
}
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
@ -13,36 +342,67 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
|
||||
description={'Step by step guides and paths to learn different tools or technologies'}
|
||||
permalink={'/roadmaps'}
|
||||
>
|
||||
<SimplePageHeader
|
||||
title='Developer Roadmaps'
|
||||
description='Step by step guides and paths to learn different tools or technologies'
|
||||
showYouTubeAlert={true}
|
||||
/>
|
||||
<div class=''>
|
||||
<div class='bg-white py-12'>
|
||||
<div class='container'>
|
||||
<div class='flex flex-col items-center bg-white'>
|
||||
<h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
|
||||
<p class='text-lg my-3'>
|
||||
Browse ever-growing list of up-to-date, community driven roadmaps
|
||||
</p>
|
||||
<p class="flex flex-row gap-3">
|
||||
<a class="inline-block bg-black py-1.5 text-base px-3.5 rounded-md text-white" href="#">
|
||||
Draw your own roadmap
|
||||
</a>
|
||||
<a class="inline-block bg-gray-300 py-1.5 text-base px-3.5 rounded-md text-black" href="#">
|
||||
Generate Roadmap with AI
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='flex bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
|
||||
<div class='container'>
|
||||
<div class='grid grid-cols-1 gap-1 sm:grid-cols-2 sm:gap-3'>
|
||||
{
|
||||
roleRoadmaps.map((roleRoadmap) => (
|
||||
<GridItem
|
||||
url={`/${roleRoadmap.id}`}
|
||||
isNew={roleRoadmap.frontmatter.isNew}
|
||||
title={roleRoadmap.frontmatter.title}
|
||||
description={roleRoadmap.frontmatter.description}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<div class='bg-gray-100 border-t'>
|
||||
<div class='container flex flex-row gap-4'>
|
||||
<div class='w-[180px] border-r pt-8 bg-gradient-to-l from-gray-100'>
|
||||
<div class='sticky top-10 pb-20'>
|
||||
<div class='grid grid-cols-1 gap-1'>
|
||||
<a class='text-right pr-3 text-sm border-b pb-1 font-bold'> All Roadmaps</a>
|
||||
{
|
||||
groups.map((group) => (
|
||||
<a
|
||||
class='text-right pr-3 text-sm border-b py-1 text-gray-500 hover:text-gray-900 transition-all'
|
||||
href={`#${group.group.toLowerCase().replace(' ', '-')}`}
|
||||
>
|
||||
{group.group}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='flex flex-grow flex-col gap-6 pt-8 pb-20'>
|
||||
{
|
||||
groups.map((group) => (
|
||||
<div>
|
||||
<h2 class='mb-2 text-xs uppercase tracking-wide text-gray-400'>
|
||||
{group.group}
|
||||
</h2>
|
||||
|
||||
{
|
||||
skillRoadmaps.map((skillRoadmap) => (
|
||||
<GridItem
|
||||
url={`/${skillRoadmap.id}`}
|
||||
isNew={skillRoadmap.frontmatter.isNew}
|
||||
title={skillRoadmap.frontmatter.title}
|
||||
description={skillRoadmap.frontmatter.description}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<div class='grid grid-cols-3 gap-1.5'>
|
||||
{group.roadmaps.map((roadmap) => (
|
||||
<a
|
||||
class='rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50'
|
||||
href={roadmap.link}
|
||||
>
|
||||
{roadmap.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user