github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add roadmaps listing

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 4459b7d062
commit 55f7d00e83
4 changed files with 198 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages/index.tsx
  2. 46
      pages/roadmaps/components/home-roadmap-item.tsx
  3. 72
      pages/roadmaps/components/roadmap-grid-item.tsx
  4. 100
      pages/roadmaps/index.tsx

14
pages/index.tsx
Unescape View File

@ -4,10 +4,10 @@ import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner';
import { OpensourceBanner } from '../components/opensource-banner';
import { DimmedMore } from '../components/dimmed-more';
import { RoadmapGridItem } from './roadmaps/components/roadmap-grid-item';
import { LinksListItem } from '../components/links-list-item';
import { VideoIcon } from '../icons/video-icon';
import { LinksList } from '../components/links-list';
import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
export default function Home() {
return (
@ -27,17 +27,17 @@ export default function Home() {
channel</Link> which we hope you are going to love.</Text>
</Box>
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'>
<RoadmapGridItem colorIndex={0} title={'Frontend'}
<HomeRoadmapItem colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
<RoadmapGridItem colorIndex={1} title={'Backend'}
<HomeRoadmapItem colorIndex={1} title={'Backend'}
subtitle={'Step by step guide to becoming a backend developer in 2021'} />
<RoadmapGridItem colorIndex={2} title={'DevOps'}
<HomeRoadmapItem colorIndex={2} title={'DevOps'}
subtitle={'Step by step guide for DevOps or Operations role in 2021'} />
<RoadmapGridItem colorIndex={3} title={'React'}
<HomeRoadmapItem colorIndex={3} title={'React'}
subtitle={'Step by step guide to become a React Developer in 2021'} />
<RoadmapGridItem colorIndex={4} title={'DBA'}
<HomeRoadmapItem colorIndex={4} title={'DBA'}
subtitle={'Step by step guide to become a PostgreSQL DBA in 2021'} isCommunity />
<RoadmapGridItem colorIndex={5} title={'Android'}
<HomeRoadmapItem colorIndex={5} title={'Android'}
subtitle={'Step by step guide to become an Android Developer in 2021'} isCommunity />
</SimpleGrid>
</Container>

46
pages/roadmaps/components/home-roadmap-item.tsx
Unescape View File

@ -0,0 +1,46 @@
import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
isCommunity?: boolean;
colorIndex?: number
};
const bgColorList = [
'blue.900',
'red.800',
'green.800',
'teal.800',
'gray.800',
'red.900'
];
export function HomeRoadmapItem(props: RoadmapGridItemProps) {
const { title, subtitle, isCommunity, colorIndex = 0 } = props;
return (
<Link
as={Box}
href={'#'}
_hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
flex={1}
shadow='2xl'
bg={bgColorList[colorIndex] ?? bgColorList[0]}
color='white'
p='15px'
rounded='10px'
pos='relative'
>
{isCommunity && (
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
)}
<Heading fontSize='22px' mb='5px'>{title}</Heading>
<Text color='gray.200' fontSize='13px'>{subtitle}</Text>
</Link>
);
}

72
pages/roadmaps/components/roadmap-grid-item.tsx
Unescape View File

@ -1,46 +1,66 @@
import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
date: string;
isCommunity?: boolean;
colorIndex?: number
colorIndex?: number;
};
const bgColorList = [
'gray.900',
'purple.900',
'blue.900',
'red.900',
'green.900',
'teal.900',
'yellow.900',
'cyan.900',
'pink.900',
'gray.800',
'purple.800',
'blue.800',
'red.800',
'green.800',
'teal.800',
'gray.800',
'red.900'
'yellow.800',
'cyan.800',
'pink.800',
'gray.700',
'purple.700',
'blue.700',
'red.700',
'green.700',
'teal.700',
'yellow.700',
'cyan.700',
'pink.700',
'gray.600',
'purple.600',
'blue.600',
'red.600',
'green.600',
'teal.600',
'yellow.600',
'cyan.600',
'pink.600'
];
export function RoadmapGridItem(props: RoadmapGridItemProps) {
const { title, subtitle, isCommunity, colorIndex = 0 } = props;
const { title, subtitle, date, isCommunity = false, colorIndex = 0 } = props;
return (
<Link
as={Box}
href={'#'}
_hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
flex={1}
shadow='2xl'
bg={bgColorList[colorIndex] ?? bgColorList[0]}
color='white'
p='15px'
rounded='10px'
pos='relative'
>
{isCommunity && (
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
)}
<Heading fontSize='22px' mb='5px'>{title}</Heading>
<Text color='gray.200' fontSize='13px'>{subtitle}</Text>
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
{isCommunity && <Text mt='10px' fontSize='13px' color='gray.400'>
<Badge colorScheme={'yellow'} mr='10px'>Community</Badge>
</Text>}
</Link>
);
}

100
pages/roadmaps/index.tsx
Unescape View File

@ -1,5 +1,103 @@
import { Box, Container, SimpleGrid } from '@chakra-ui/react';
import { Header } from '../../components/header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { PageHeader } from '../../components/page-header';
import { HomeRoadmapItem } from './components/home-roadmap-item';
import { RoadmapGridItem } from './components/roadmap-grid-item';
export default function Roadmaps() {
return (
<h1>Hello world</h1>
<Box bg='white' minH='100vh'>
<Header />
<Box mb='60px'>
<PageHeader
title={'Developer Roadmaps'}
subtitle={'Step by step guides and paths to learn different tools or technologies'}
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={{ md: 2 }} mb='30px' spacing='15px'>
<RoadmapGridItem
colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'}
date={'June 12, 2021'}
/>
<RoadmapGridItem
colorIndex={1}
title={'Backend'}
subtitle={'Step by step guide to becoming a backend developer in 2021'}
date='June 15, 2021'
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={2}
title={'DevOps'}
subtitle={'Step by step guide for DevOps or Operations role in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={3}
title={'React'}
subtitle={'Step by step guide to become a React Developer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={4}
title={'DBA'}
subtitle={'Step by step guide to becoming a PostgreSQL Database Administrator in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={5}
title={'Android'}
subtitle={'Step by step guide to become an Android Developer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={6}
title={'QA Engineer'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={7}
title={'AI Engineer'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={8}
title={'iOS Engineer'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={9}
title={'Golang'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={10}
title={'Java'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
<RoadmapGridItem
date={'August 25, 2021'}
colorIndex={10}
title={'Angular'}
subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
/>
</SimpleGrid>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}

Write Preview
Loading…
Cancel
Save