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

Add visual guides navigation

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 4428e8d82b
commit cadf9ba4a7
4 changed files with 1339 additions and 42 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. 1351
      package-lock.json
  2. 20
      pages/icons/text-icon.tsx
  3. 21
      pages/icons/video-icon.tsx
  4. 47
      pages/index.tsx

1351
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
pages/icons/text-icon.tsx
Unescape 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
Unescape 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
Unescape View File

@ -1,5 +1,7 @@
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() {
return (
@ -95,7 +97,6 @@ export default function Home() {
<Container maxW='container.md'>
<Box pt='40px' mb='20px'>
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
{/*<Text>Programming topics explained succinctly through visuals.</Text>*/}
</Box>
<Stack>
@ -108,8 +109,10 @@ export default function Home() {
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Session based
Authentication</Text>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Session based Authentication
</Text>
<Text fontSize='13px' color='gray.500' as='span'>June 12, 2021</Text>
</Link>
@ -122,7 +125,8 @@ export default function Home() {
}
}} borderBottomWidth={1}
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
</Text>
<Text fontSize='13px' color='gray.500' as='span'>June 05, 2021</Text>
@ -137,7 +141,8 @@ export default function Home() {
}
}} borderBottomWidth={1}
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
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text>
@ -153,7 +158,9 @@ export default function Home() {
}
}} borderBottomWidth={1}
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>
</Link>
@ -166,8 +173,10 @@ export default function Home() {
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>SSL vs TLS vs HTTPs vs
SSH</Text>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
SSL vs TLS vs HTTPs vs SSH
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link>
@ -180,7 +189,9 @@ export default function Home() {
}
}} borderBottomWidth={1}
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>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link>
@ -194,7 +205,9 @@ export default function Home() {
}
}} borderBottomWidth={1}
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>
</Link>
@ -207,7 +220,8 @@ export default function Home() {
}
}} borderBottomWidth={1}
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
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text>
@ -223,7 +237,8 @@ export default function Home() {
}
}} borderBottomWidth={1}
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
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@ -238,7 +253,8 @@ export default function Home() {
}
}} borderBottomWidth={1}
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
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@ -252,7 +268,8 @@ export default function Home() {
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>
</Stack>
</Container>

Write Preview
Loading…
Cancel
Save