Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
2.5 KiB

3 years ago
import React from 'react';
import { Box, Button, Container, Flex, Heading, Image, Link, Stack, Text } from '@chakra-ui/react';
import { GlobalHeader } from '../components/global-header';
import { OpensourceBanner } from '../components/opensource-banner';
import { UpdatesBanner } from '../components/updates-banner';
import { Footer } from '../components/footer';
import MdRenderer from '../components/md-renderer';
function AboutHeader() {
return (
<Box pt={['45px', '45px', '70px']} pb={['45px', '45px', '55px']} borderBottomWidth={1} mb='30px' textAlign='left' position='static'
top='10px'>
3 years ago
<Container maxW='container.md' position='relative' textAlign='left'>
<Flex alignItems='center'>
<Image d={['none', 'none', 'block']} src='/kamran.jpeg' h='170px' rounded='10px' mr='25px' />
3 years ago
<Box>
<Heading as='h1' color='black' fontSize={['35px', '35px', '40px']} fontWeight={700} mb='10px'>Hello, I am
Kamran Ahmed
</Heading>
<Text fontSize={['15px', '15px', '17px']} color='gray.700' mb='15px'>
3 years ago
I created roadmap.sh to help developers find their path if they are confused and help them grow in
their career.</Text>
<Stack isInline flexDirection={['column', 'column', 'row']} spacing={0} shouldWrapChildren>
3 years ago
<Button as={Link} bg='blue.500' color='white' size='sm'
mr='10px'
mb={['7px', '7px', 0]}
3 years ago
_hover={{ textDecoration: 'none', bg: 'blue.700' }} href='https://twitter.com/kamranahmedse'
arget='_blank'>
@kamranahmedse
</Button>
<Button as={Link} bg='green.500' color='white' size='sm'
_hover={{ textDecoration: 'none', bg: 'green.700' }} href='mailto:kamranahmed.se@gmail.com'
target='_blank'>
kamranahmed.se@gmail.com
</Button>
</Stack>
</Box>
</Flex>
</Container>
</Box>
);
}
export default function About() {
const AboutContent = require(`../content/pages/about.md`).default;
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
<Box mb='60px'>
<AboutHeader />
<Container maxW={'container.md'} position='relative'>
<MdRenderer>
<AboutContent />
</MdRenderer>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}