gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add guides listing design

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-01 21:38:34 +02:00
parent 0d21be3796
commit 3bfd06d704
3 changed files with 104 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
package-lock.json generated
View File

@ -7,6 +7,7 @@
"": {
"version": "0.1.0",
"dependencies": {
"@chakra-ui/icons": "^1.0.14",
"@chakra-ui/react": "^1.6.5",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
@ -932,6 +933,19 @@
"react": ">=16.8.6"
}
},
"node_modules/@chakra-ui/icons": {
"version": "1.0.14",
"resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.0.14.tgz",
"integrity": "sha512-VM21FkQc4rWcES1D6ddNIq6VYaCnTwWBIaqM9GRQZ7FpsLeVNk6UFYiE8MMtGWVIXq3k9jEYLbQHm7YdEF9yLQ==",
"dependencies": {
"@chakra-ui/icon": "1.1.10",
"@types/react": "^17.0.0"
},
"peerDependencies": {
"@chakra-ui/system": ">=1.0.0",
"react": ">=16.8.6"
}
},
"node_modules/@chakra-ui/image": {
"version": "1.0.17",
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.17.tgz",
@ -2045,14 +2059,12 @@
"node_modules/@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"devOptional": true
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"node_modules/@types/react": {
"version": "17.0.15",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
"integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -2062,8 +2074,7 @@
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"devOptional": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/tinycolor2": {
"version": "1.4.2",
@ -8372,6 +8383,15 @@
"@chakra-ui/utils": "1.8.1"
}
},
"@chakra-ui/icons": {
"version": "1.0.14",
"resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.0.14.tgz",
"integrity": "sha512-VM21FkQc4rWcES1D6ddNIq6VYaCnTwWBIaqM9GRQZ7FpsLeVNk6UFYiE8MMtGWVIXq3k9jEYLbQHm7YdEF9yLQ==",
"requires": {
"@chakra-ui/icon": "1.1.10",
"@types/react": "^17.0.0"
}
},
"@chakra-ui/image": {
"version": "1.0.17",
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.17.tgz",
@ -9237,14 +9257,12 @@
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"devOptional": true
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/react": {
"version": "17.0.15",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
"integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
"devOptional": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -9254,8 +9272,7 @@
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"devOptional": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/tinycolor2": {
"version": "1.4.2",

1
package.json
View File

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@chakra-ui/icons": "^1.0.14",
"@chakra-ui/react": "^1.6.5",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",

105
pages/index.tsx
View File

@ -1,27 +1,16 @@
import {
Box,
Container,
Divider,
Heading,
Image,
Text,
Flex,
Link,
Stack,
Button,
SimpleGrid,
Badge
} from '@chakra-ui/react';
import { Head } from 'next/document';
import { Box, Container, Flex, Heading, Image, Link, SimpleGrid, Stack, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
export default function Home() {
return (
<Box bg='teal.50' minH='100vh'>
<Box bg='black' p='20px 30px'>
<Box bg='gray.900' p='20px 30px'>
<Container maxW='container.md'>
<Flex justifyContent='space-between'>
<Link d='flex' href='/'>
<Image h='45px' src='/logo.svg' />
<Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
_hover={{ textDecoration: 'none' }} fontSize='18px'>
<Image h='30px' w='30px' src='/logo.svg' mr='10px' />
roadmap.sh
</Link>
{/*<Link d='flex' href='/' color='white' fontWeight={600} fontSize='20px'>*/}
{/* roadmap.sh*/}
@ -50,50 +39,108 @@ export default function Home() {
to help guide the developers in picking up the path and guide their learnings.
</Text>
<Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube channel</Link> and <Link textDecoration='underline' href={'#'} fontWeight={600}>graphical guides</Link> which we hope you are going to love.</Text>
<Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube
channel</Link> and <Link textDecoration='underline' href={'#'} fontWeight={600}>graphical
guides</Link> which we hope you are going to love.</Text>
</Box>
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} isInline spacing='20px'>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
shadow='2xl'
bg='blue.900' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Frontend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='red.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Backend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a backend developer in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='green.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>DevOps</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='teal.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>React</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='gray.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>DBA</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
bg='red.900' color='white' p='15px' rounded='10px'>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
shadow='2xl'
bg='red.900' color='white' p='15px' rounded='10px' position='relative'>
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
<Heading fontSize='22px' mb='5px'>Android</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
<Badge mt='10px' variant="subtle" colorScheme="green">
Community
</Badge>
{/*<Badge mt='10px' variant="subtle" colorScheme="green">*/}
{/* Community*/}
{/*</Badge>*/}
</Link>
</SimpleGrid>
</Container>
</Box>
<Box>
<Container maxW='container.md'>
<Box pt='40px' mb='20px'>
<Heading fontSize='25px' mb='5px'>Visual Guides</Heading>
<Text>Programming topics explained succinctly through visuals.</Text>
</Box>
<Stack>
<Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Session based
Authentication</Text>
<Text fontSize='14px' color='gray.500' as='span'>June 12, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>JSON Web Tokens</Text>
<Text fontSize='14px' color='gray.500' as='span'>June 05, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Token Based Authentication</Text>
<Text fontSize='14px' color='gray.500' as='span'>May 15, 2021</Text>
</Link>
</Stack>
</Container>
</Box>
</Box>
);
}