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

Add about page

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-22 22:21:34 +02:00
parent 1c065f563d
commit 0a3fd7b894
6 changed files with 135 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/content-page-header.tsx
View File

@ -10,7 +10,7 @@ export function ContentPageHeader(props: GuideHeaderProps) {
const { title, subtitle } = props;
return (
<Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='center' position='static' top='10px'>
<Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='center'>
<Container maxW='container.md' position='relative' textAlign='center'>
<Flex alignItems='center' justifyContent='center' fontSize='14px'>
<Link href='#' d='flex' alignItems='center' fontWeight={600} color='gray.500'>

6
components/icons/github.svg
View File

@ -1,5 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512" width="22px" height="20px">
<rect width="512" height="512" rx="15%"/>
<path fill="#fff"
d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 841 B

2
components/icons/twitter.svg
View File

@ -1,3 +1,3 @@
<svg width="29" height="29">
<svg width="29" height="29" fill="currentColor">
<path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 550 B

67
content/pages/about.md Normal file
View File

@ -0,0 +1,67 @@
## What is roadmap.sh?
Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding
developers. It started as a [set of charts to guide the developers](https://github.com/kamranahmedse/developer-roadmap)
who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get
more contributors involved.
## What are the plans for roadmap.sh?
The website started off as
a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and
based on my personal opinions but it could have been much more than that so I decided to expand it to a website where
people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc.
We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into
a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the
learnings, get feedbacks on their projects etc.
## How did you build roadmap.sh?
The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
## How does it make money?
It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with
any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in.
Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to
make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll
continue growing the site however I can. My focus at the moment is not making money from it and just add content that
creates value for the people.
> Sponsor the efforts by [paying as little as 5$ per month](https://github.com/sponsors/kamranahmedse) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com).
## Can I contribute?
You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
be:
* Adding a new roadmap
* Updating existing roadmap
* Suggesting changes to the existing roadmaps
* Writing a Guide
* Updating an existing guide
* Fixing grammar mistakes, typos on the website or the content
* Updating the UI of the website
* Refactoring the codebase
* Becoming a sponsor
Just make sure
to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
decide to contribute.
## Can I redistribute the content?
No, the license of the content on this website does not allow you to redistribute any of the content on this website
anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not
allowed.
## What is the best way to contact you?
Tweet or send me a message [@kamranahmedse](https://twitter.com/kamranahmedse) or email me
at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com). I get lots of messages so apologies in advance if you don't hear back
from me soon but I do reply to everyone.

63
pages/about.tsx Normal file
View File

@ -0,0 +1,63 @@
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='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='left' position='static' top='10px'>
<Container maxW='container.md' position='relative' textAlign='left'>
<Flex alignItems='center'>
<Image src='/kamran.jpeg' h='170px' rounded='10px' mr='25px' />
<Box>
<Heading as='h1' color='black' fontSize='40px' fontWeight={700} mb='10px'>Hello, I am Kamran
Ahmed</Heading>
<Text fontSize='17px' color='gray.700' mb='10px'>
I created roadmap.sh to help developers find their path if they are confused and help them grow in
their career.</Text>
<Stack isInline>
<Button as={Link} bg='blue.500' color='white' size='sm'
_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>
);
}

BIN
public/kamran.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB