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

Responsive homepage

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 8d05031e51
commit 3f2ef9ae48
3 changed files with 31 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      components/links-list-item.tsx
  2. 41
      pages/index.tsx
  3. 4
      pages/roadmaps/components/home-roadmap-item.tsx

10
components/links-list-item.tsx
Unescape View File

@ -5,15 +5,16 @@ type LinksListItemProps = {
title: string; title: string;
subtitle: string; subtitle: string;
badgeText?: string; badgeText?: string;
icon?: React.ReactChild icon?: React.ReactChild;
hideSubtitleOnMobile?: boolean;
}; };
export function LinksListItem(props: LinksListItemProps) { export function LinksListItem(props: LinksListItemProps) {
const { title, subtitle, badgeText, icon } = props; const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false } = props;
return ( return (
<Link <Link
fontSize='15px' fontSize={['14px', '14px', '15px']}
py='9px' py='9px'
d='flex' d='flex'
flexDirection={['column', 'row', 'row']} flexDirection={['column', 'row', 'row']}
@ -37,7 +38,8 @@ export function LinksListItem(props: LinksListItemProps) {
{badgeText && {badgeText &&
<Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>} <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
</Flex> </Flex>
<Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text> <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
</Link> </Link>
); );
} }

41
pages/index.tsx
Unescape View File

@ -15,18 +15,19 @@ export default function Home() {
<GlobalHeader /> <GlobalHeader />
<Box> <Box>
<Container maxW='container.md'> <Container maxW='container.md'>
<Box py='35px'> <Box py={['23px', '23px', '35px']}>
<Heading fontSize='28px' mb='15px'>Hey there! 👋</Heading> <Heading fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
<Text fontSize='16px' mb='10px'> <Text fontSize={['14px', '14px', '16px']} mb='10px'>
<Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and <Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
other educational content other educational content
to help guide the developers in picking up the path and guide their learnings. to help guide the developers in picking up the path and guide their learnings.
</Text> </Text>
<Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={'#'}
fontWeight={600}>YouTube
channel</Link> which we hope you are going to love.</Text> channel</Link> which we hope you are going to love.</Text>
</Box> </Box>
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing={['10px', '10px', '15px']}> <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
<HomeRoadmapItem colorIndex={0} title={'Frontend'} <HomeRoadmapItem colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'} /> subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
<HomeRoadmapItem colorIndex={1} title={'Backend'} <HomeRoadmapItem colorIndex={1} title={'Backend'}
@ -45,8 +46,8 @@ export default function Home() {
<Box> <Box>
<Container maxW='container.md' position='relative'> <Container maxW='container.md' position='relative'>
<Box pt='60px' mb='20px'> <Box pt='60px' mb={['10px', '15px', '20px']}>
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading> <Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Visual Guides</Heading>
</Box> </Box>
<LinksList> <LinksList>
@ -73,25 +74,29 @@ export default function Home() {
</Box> </Box>
<LinksList> <LinksList>
<LinksListItem title='Transport Protocols: TCP vs UDP' subtitle='15 minutes' icon={<VideoIcon <LinksListItem hideSubtitleOnMobile title='Transport Protocols: TCP vs UDP' subtitle='15 minutes'
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> icon={<VideoIcon
<LinksListItem title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> <LinksListItem hideSubtitleOnMobile title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon
<LinksListItem title='Creating a React App' badgeText='pro' subtitle='15 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro' subtitle='15 minutes' <LinksListItem hideSubtitleOnMobile title='Creating a React App' badgeText='pro' subtitle='15 minutes'
icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem hideSubtitleOnMobile title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro'
subtitle='15 minutes'
icon={<VideoIcon icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Everything you need to know about HTTP caching' badgeText='pro' subtitle='10 minutes' <LinksListItem hideSubtitleOnMobile title='Everything you need to know about HTTP caching' badgeText='pro'
subtitle='10 minutes'
icon={<VideoIcon icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon <LinksListItem hideSubtitleOnMobile title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Load Balancers in Depth' subtitle='15 minutes' icon={<VideoIcon <LinksListItem hideSubtitleOnMobile title='Load Balancers in Depth' subtitle='15 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='DNS and how does it work?' subtitle='2 minutes' icon={<VideoIcon <LinksListItem hideSubtitleOnMobile title='DNS and how does it work?' subtitle='2 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='JavaScript Fetch API' subtitle='22 minutes' icon={<VideoIcon <LinksListItem hideSubtitleOnMobile title='JavaScript Fetch API' subtitle='22 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} /> style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<DimmedMore text={'View all Videos'} /> <DimmedMore text={'View all Videos'} />

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

@ -39,8 +39,8 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
</Tooltip> </Tooltip>
)} )}
<Heading fontSize='22px' mb='5px'>{title}</Heading> <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
<Text color='gray.200' fontSize='13px'>{subtitle}</Text> <Text color='gray.200' fontSize={[ '13px']}>{subtitle}</Text>
</Link> </Link>
); );
} }

Write Preview
Loading…
Cancel
Save