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

Add visual guides navigation

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-02 13:22:21 +02:00
parent 4428e8d82b
commit cadf9ba4a7
4 changed files with 1334 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1283
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
pages/icons/text-icon.tsx Normal file
View File

@ -0,0 +1,20 @@
export function TextIcon(props: any) {
return (
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 20 20'
height='1em'
width='1em'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<path
fillRule='evenodd'
d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z'
clipRule='evenodd'
/>
</svg>
);
}

21
pages/icons/video-icon.tsx Normal file
View File

@ -0,0 +1,21 @@
export function VideoIcon(props: any) {
return (
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 24 24'
height='1em'
width='1em'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<g>
<path fill='none' d='M0 0h24v24H0z' />
<path
d='M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z'
/>
</g>
</svg>
);
}

47
pages/index.tsx
View File

@ -1,5 +1,7 @@
import { Badge, Box, Container, Flex, Heading, Image, Link, SimpleGrid, Stack, Text, Tooltip } from '@chakra-ui/react'; import { Badge, Box, Container, Flex, Heading, Image, Link, SimpleGrid, Stack, Text, Tooltip } from '@chakra-ui/react';
import { ArrowForwardIcon, InfoIcon } from '@chakra-ui/icons'; import { InfoIcon } from '@chakra-ui/icons';
import { TextIcon } from './icons/text-icon';
import { VideoIcon } from './icons/video-icon';
export default function Home() { export default function Home() {
return ( return (
@ -95,7 +97,6 @@ export default function Home() {
<Container maxW='container.md'> <Container maxW='container.md'>
<Box pt='40px' mb='20px'> <Box pt='40px' mb='20px'>
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading> <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
{/*<Text>Programming topics explained succinctly through visuals.</Text>*/}
</Box> </Box>
<Stack> <Stack>
@ -108,8 +109,10 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Session based <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
Authentication</Text> as='span'>
Session based Authentication
</Text>
<Text fontSize='13px' color='gray.500' as='span'>June 12, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>June 12, 2021</Text>
</Link> </Link>
@ -122,7 +125,8 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
JSON Web Tokens JSON Web Tokens
</Text> </Text>
<Text fontSize='13px' color='gray.500' as='span'>June 05, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>June 05, 2021</Text>
@ -137,7 +141,8 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Token Based Authentication Token Based Authentication
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge> <Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text> </Text>
@ -153,7 +158,9 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Character Encodings</Text> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Encodings</Text>
<Text fontSize='13px' color='gray.500' as='span'>March 06, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>March 06, 2021</Text>
</Link> </Link>
@ -166,8 +173,10 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>SSL vs TLS vs HTTPs vs <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
SSH</Text> as='span'>
SSL vs TLS vs HTTPs vs SSH
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link> </Link>
@ -180,7 +189,9 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Continuous Integration and <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Integration and
Deployment</Text> Deployment</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link> </Link>
@ -194,7 +205,9 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Basic Authentication</Text> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Authentication</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link> </Link>
@ -207,7 +220,8 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Character Encodings Character Encodings
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge> <Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text> </Text>
@ -223,7 +237,8 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
DHCP in One Picture DHCP in One Picture
</Text> </Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@ -238,7 +253,8 @@ export default function Home() {
} }
}} borderBottomWidth={1} }} borderBottomWidth={1}
py='5px' color='gray.600'> py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'> <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Session Based Authentication Session Based Authentication
</Text> </Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text> <Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@ -252,7 +268,8 @@ export default function Home() {
transform: 'translateX(3px)' transform: 'translateX(3px)'
} }
}}> }}>
View all Guides <Text d='inline-block' as='span' transition='200ms' className='forward-arrow'>&rarr;</Text> View all Guides <Text d='inline-block' as='span' transition='200ms'
className='forward-arrow'>&rarr;</Text>
</Link> </Link>
</Stack> </Stack>
</Container> </Container>