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

Add homepage UI

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 9c81d818ed
commit f15e7a18b8
8 changed files with 86 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .prettierrc
  2. 5
      pages/_app.tsx
  3. 13
      pages/api/hello.ts
  4. 129
      pages/index.tsx
  5. 9
      pages/theme.ts
  6. 4
      public/logo.svg
  7. 121
      styles/Home.module.css
  8. 16
      styles/globals.css

3
.prettierrc
Unescape View File

@ -1,4 +1,5 @@
{ {
"semi": true, "semi": true,
"singleQuote": true "singleQuote": true,
"tabWidth": 2
} }

5
pages/_app.tsx
Unescape View File

@ -1,11 +1,10 @@
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react'; import { ChakraProvider } from '@chakra-ui/react';
import { roadmapTheme } from './theme';
import '../styles/globals.css';
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<ChakraProvider> <ChakraProvider theme={roadmapTheme}>
<Component {...pageProps} /> <Component {...pageProps} />
</ChakraProvider> </ChakraProvider>
); );

13
pages/api/hello.ts
Unescape View File

@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

129
pages/index.tsx
Unescape View File

@ -1,69 +1,78 @@
import Head from 'next/head' import { Box, Container, Divider, Heading, Image, Text, Flex, Link, Stack, Button, SimpleGrid } from '@chakra-ui/react';
import Image from 'next/image' import { Head } from 'next/document';
import styles from '../styles/Home.module.css'
export default function Home() { export default function Home() {
return ( return (
<div className={styles.container}> <Box bg='teal.50' minH='100vh'>
<Head> <Box bg='black' p='20px 30px'>
<title>Create Next App</title> <Container maxW='container.md'>
<meta name="description" content="Generated by create next app" /> <Flex justifyContent='space-between'>
<link rel="icon" href="/favicon.ico" /> <Link d='flex' href='/'>
</Head> <Image h='45px' src='/logo.svg' />
</Link>
<Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Read</Link>
<Link borderBottomWidth={0} borderBottomColor='gray.500'
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
href='#'>Watch</Link>
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
fontWeight={500} href={'#'}>Become a Member</Link>
</Stack>
</Flex>
</Container>
</Box>
<Box>
<Container maxW='container.md'>
<Box py='30px'>
<Heading fontSize='28px' mb='10px'>Hey there! 👋</Heading>
<Text fontSize='16px'>
<Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
other educational content
to help guide the developers in picking up the path and guide their learnings.
</Text>
</Box>
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} isInline spacing='20px'>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
bg='blue.900' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Frontend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text>
</Link>
<main className={styles.main}> <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<h1 className={styles.title}> bg='red.800' color='white' p='15px' rounded='10px'>
Welcome to <a href="https://nextjs.org">Next.js!</a> <Heading fontSize='22px' mb='5px'>Backend</Heading>
</h1> <Text color='gray.200' fontSize='13px'>Step by step guide to becoming a backend developer in 2021</Text>
</Link>
<p className={styles.description}> <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
Get started by editing{' '} bg='green.800' color='white' p='15px' rounded='10px'>
<code className={styles.code}>pages/index.js</code> <Heading fontSize='22px' mb='5px'>DevOps</Heading>
</p> <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<div className={styles.grid}> <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<a href="https://nextjs.org/docs" className={styles.card}> bg='teal.800' color='white' p='15px' rounded='10px'>
<h2>Documentation &rarr;</h2> <Heading fontSize='22px' mb='5px'>React</Heading>
<p>Find in-depth information about Next.js features and API.</p> <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</a> </Link>
<a href="https://nextjs.org/learn" className={styles.card}> <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
<h2>Learn &rarr;</h2> bg='gray.800' color='white' p='15px' rounded='10px'>
<p>Learn about Next.js in an interactive course with quizzes!</p> <Heading fontSize='22px' mb='5px'>DBA</Heading>
</a> <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<a <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
href="https://github.com/vercel/next.js/tree/master/examples" bg='red.900' color='white' p='15px' rounded='10px'>
className={styles.card} <Heading fontSize='22px' mb='5px'>Android</Heading>
> <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
<h2>Examples &rarr;</h2> </Link>
<p>Discover and deploy boilerplate example Next.js projects.</p> </SimpleGrid>
</a> </Container>
</Box>
<a </Box>
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" );
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
} }

9
pages/theme.ts
Unescape View File

@ -0,0 +1,9 @@
import { extendTheme } from '@chakra-ui/react';
export const roadmapTheme = extendTheme({
colors: {
brand: {
bg: '#222222'
}
}
});

4
public/logo.svg
Unescape View File

@ -0,0 +1,4 @@
<svg width="283" height="283" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 39C0 17.4609 17.4609 0 39 0H244C265.539 0 283 17.4609 283 39V244C283 265.539 265.539 283 244 283H39C17.4609 283 0 265.539 0 244V39Z" fill="black"></path>
<path d="M121.215 210.72C119.348 211.28 116.361 211.84 112.255 212.4C108.335 212.96 104.228 213.24 99.9347 213.24C95.828 213.24 92.0947 212.96 88.7347 212.4C85.5614 211.84 82.8547 210.72 80.6147 209.04C78.3747 207.36 76.6014 205.12 75.2947 202.32C74.1747 199.333 73.6147 195.507 73.6147 190.84V106.84C73.6147 102.547 74.3614 98.9067 75.8547 95.92C77.5347 92.7467 79.868 89.9467 82.8547 87.52C85.8414 85.0933 89.4814 82.9467 93.7747 81.08C98.2547 79.0267 103.015 77.2533 108.055 75.76C113.095 74.2667 118.321 73.1467 123.735 72.4C129.148 71.4667 134.561 71 139.975 71C148.935 71 156.028 72.7733 161.255 76.32C166.481 79.68 169.095 85.28 169.095 93.12C169.095 95.7333 168.721 98.3467 167.975 100.96C167.228 103.387 166.295 105.627 165.175 107.68C161.255 107.68 157.241 107.867 153.135 108.24C149.028 108.613 145.015 109.173 141.095 109.92C137.175 110.667 133.441 111.507 129.895 112.44C126.535 113.187 123.641 114.12 121.215 115.24V210.72ZM166.387 188.32C166.387 180.48 168.813 173.947 173.667 168.72C178.52 163.493 185.147 160.88 193.547 160.88C201.947 160.88 208.573 163.493 213.427 168.72C218.28 173.947 220.707 180.48 220.707 188.32C220.707 196.16 218.28 202.693 213.427 207.92C208.573 213.147 201.947 215.76 193.547 215.76C185.147 215.76 178.52 213.147 173.667 207.92C168.813 202.693 166.387 196.16 166.387 188.32Z" fill="white"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

121
styles/Home.module.css
Unescape View File

@ -1,121 +0,0 @@
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
width: 45%;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

16
styles/globals.css
Unescape View File

@ -1,16 +0,0 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
Write Preview
Loading…
Cancel
Save