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

Add guides listing page

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 6dbf170076
commit 7d27cb0b9f
3 changed files with 70 additions and 3 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. 2
      components/opensource-banner.tsx
  2. 69
      pages/guides/index.tsx
  3. 2
      pages/index.tsx

2
components/opensource-banner.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() {
return (
<Box borderTopWidth={1} mt='60px' pt='70px' pb='30px' textAlign='center'>
<Box borderTopWidth={1} pt='70px' pb='30px' textAlign='center'>
<Container maxW='container.md'>
<Heading fontSize='35px' mb='20px'>Open Source</Heading>
<Text lineHeight='26px' fontSize='16px' mb='20px'>The project is OpenSource,&nbsp;

69
pages/guides/index.tsx
Unescape View File

@ -1,5 +1,72 @@
import { Badge, Box, Button, Container, Heading, Link, Stack, Text } from '@chakra-ui/react';
import { Header } from '../../components/header';
import { LinksList } from '../../components/links-list';
import { LinksListItem } from '../../components/links-list-item';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
export default function Guides() {
return (
<h1>Hello world</h1>
<Box bg='white' minH='100vh'>
<Header />
<Box mb='60px'>
<Box pt='50px' pb='30px' borderBottomWidth={1}>
<Container maxW='container.md' position='relative'>
<Heading as='h1' color='black' fontSize='40px' fontWeight={700} mb='5px'>Visual Guides</Heading>
<Text>Succinct graphical explanations to development related topics.</Text>
</Container>
</Box>
<Container maxW='container.md' position='relative'>
<Badge mt='40px' mb='10px' variant='solid' colorScheme='green'>Recent Guides</Badge>
{/*<Text mt='40px' mb='10px' fontWeight={700} color='green.500'>Recent Guides</Text>*/}
{/*<Heading mt='40px' mb='15px' color='green.500' fontSize='20px'>Recent Guides</Heading>*/}
<Stack isInline mb='30px' spacing='15px'>
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'gray.700'} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
<Heading color='white' mb={'6px'} fontSize='22px'>Session Based Authentication</Heading>
<Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
.</Text>
</Link>
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'purple.800'} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
<Heading color='white' mb={'6px'} fontSize='22px'>JSON Web Tokens</Heading>
<Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
and how you can implement it in your
apps.</Text>
</Link>
</Stack>
<Badge mt='30px' mb='10px' variant='solid' colorScheme='green'>Past Guides</Badge>
<LinksList>
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
</LinksList>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}

2
pages/index.tsx
Unescape View File

@ -66,7 +66,7 @@ export default function Home() {
</Container>
</Box>
<Box>
<Box mb='60px'>
<Container maxW='container.md'>
<Box pt='40px' mb='20px'>
<Heading color='green.500' fontSize='25px' mb='5px'>Video Explanations</Heading>

Write Preview
Loading…
Cancel
Save