Merge pull request #125 from rakeshhotker/main
made contributors page based on design
This commit is contained in:
commit
c7df506708
Binary file not shown.
After Width: | Height: | Size: 90 KiB |
|
@ -0,0 +1,98 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import ContributorsStyle from './Contributors.style'
|
||||||
|
import styles from '../../styles/Contributors.module.css'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import profilepic from 'assets/ContributorsImages/sampleImage.jpg'
|
||||||
|
import { GitHub } from '@mui/icons-material'
|
||||||
|
export default function Contributors() {
|
||||||
|
const [contributors, setContributors] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
profilepic,
|
||||||
|
name: 'Jacob Myers',
|
||||||
|
gitHubUsername: '@jacob',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
profilepic,
|
||||||
|
name: 'John Doe',
|
||||||
|
gitHubUsername: '@john',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
profilepic,
|
||||||
|
name: 'Sara Williams',
|
||||||
|
gitHubUsername: '@sara',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
return (
|
||||||
|
<ContributorsStyle>
|
||||||
|
<>
|
||||||
|
<div className={styles.head}>CONTRIBUTORS</div>
|
||||||
|
<div className="contributor-cards">
|
||||||
|
{contributors.map((contributor) => {
|
||||||
|
return (
|
||||||
|
<div className="contributor-card" key={contributor.id}>
|
||||||
|
<div className="contributor-cardPointerStart">
|
||||||
|
<div id="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div id="ImageContainer">
|
||||||
|
<Image
|
||||||
|
src={contributor.profilepic}
|
||||||
|
alt="Contributors Profile Picture"
|
||||||
|
width={'100px'}
|
||||||
|
height={'100px'}
|
||||||
|
className="contributor-Pic"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="contributorDetailsWrapper">
|
||||||
|
<div className="contributor-Name">{contributor.name}</div>
|
||||||
|
<div className="contributor-GithubUsername">
|
||||||
|
<GitHub />
|
||||||
|
<span id="username">{contributor.gitHubUsername}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</ContributorsStyle>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,117 @@
|
||||||
|
import styled from 'styled-components'
|
||||||
|
export default styled.section`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.contributor-cards {
|
||||||
|
margin-top: 100px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto auto auto;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 20px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.contributor-card {
|
||||||
|
width: 190px;
|
||||||
|
height: 210px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.contributor-cardPointerStart {
|
||||||
|
width: 180px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
#circle {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.contributor-Pic {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
#ImageContainer {
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid #35cdf0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.contributor-Name {
|
||||||
|
color: #1d92e0;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#contributorDetailsWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justfiy-content: flex-start;
|
||||||
|
}
|
||||||
|
.contributor-GithubUsername {
|
||||||
|
display: flex;
|
||||||
|
justify-content: baseline;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
#username {
|
||||||
|
color: grey;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.contributor-cards {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 10px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.contributor-card {
|
||||||
|
width: 170px;
|
||||||
|
height: 190px;
|
||||||
|
}
|
||||||
|
.contributor-cardPointerEnd {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.contributor-cardPointerStart {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.contributor-Name {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.contributor-GithubUsername {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.contributor-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
justify-content: space-around;
|
||||||
|
grid-gap: 10px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.contributor-card {
|
||||||
|
width: 130px;
|
||||||
|
height: 190px;
|
||||||
|
}
|
||||||
|
.contributor-cardPointerEnd {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
.contributor-cardPointerStart {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
.contributor-Name {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.contributor-GithubUsername {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
|
@ -50,8 +50,19 @@ function Index(props) {
|
||||||
>
|
>
|
||||||
<Container maxWidth="xl">
|
<Container maxWidth="xl">
|
||||||
<Toolbar disableGutters="false">
|
<Toolbar disableGutters="false">
|
||||||
<span><Logo /></span>
|
<span>
|
||||||
<Typography component={motion.div} initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} variant="h5" sx={{ fontWeight: 'bold', fontFamily: "'Montserrat Alternates', sans-serif;" }}>
|
<Logo />
|
||||||
|
</span>
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ y: -50, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
||||||
|
variant="h5"
|
||||||
|
sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontFamily: "'Montserrat Alternates', sans-serif;",
|
||||||
|
}}
|
||||||
|
>
|
||||||
UrlMiniFy
|
UrlMiniFy
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box
|
<Box
|
||||||
|
@ -94,7 +105,11 @@ function Index(props) {
|
||||||
href="https://github.com/BRAVO68WEB/url-minify"
|
href="https://github.com/BRAVO68WEB/url-minify"
|
||||||
target={'_blank'}
|
target={'_blank'}
|
||||||
>
|
>
|
||||||
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
|
<Typography
|
||||||
|
textAlign="center"
|
||||||
|
variant="h6"
|
||||||
|
sx={{ display: 'flex' }}
|
||||||
|
>
|
||||||
<GitHubIcon fontSize="medium" />
|
<GitHubIcon fontSize="medium" />
|
||||||
GitHub
|
GitHub
|
||||||
</Typography>
|
</Typography>
|
||||||
|
@ -102,7 +117,11 @@ function Index(props) {
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem onClick={handleCloseNavMenu}>
|
<MenuItem onClick={handleCloseNavMenu}>
|
||||||
<a href={NotFound}>
|
<a href={NotFound}>
|
||||||
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
|
<Typography
|
||||||
|
textAlign="center"
|
||||||
|
variant="h6"
|
||||||
|
sx={{ display: 'flex' }}
|
||||||
|
>
|
||||||
CREDITS
|
CREDITS
|
||||||
</Typography>
|
</Typography>
|
||||||
</a>
|
</a>
|
||||||
|
@ -158,7 +177,7 @@ function Index(props) {
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
CREDITS
|
<Link href="./contributors">CREDITS</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -198,16 +217,20 @@ function Index(props) {
|
||||||
</Menu>
|
</Menu>
|
||||||
</Box>
|
</Box>
|
||||||
) : (
|
) : (
|
||||||
<Typography sx={{
|
<Typography
|
||||||
color: 'white',
|
sx={{
|
||||||
display: 'flex',
|
color: 'white',
|
||||||
fontSize: 'h6.fontSize',
|
display: 'flex',
|
||||||
fontFamily: "'Open Sans', sans-serif;",
|
fontSize: 'h6.fontSize',
|
||||||
fontWeight: 'bold',
|
fontFamily: "'Open Sans', sans-serif;",
|
||||||
}} component={motion.div}
|
fontWeight: 'bold',
|
||||||
|
}}
|
||||||
|
component={motion.div}
|
||||||
initial={{ y: -50, opacity: 0 }}
|
initial={{ y: -50, opacity: 0 }}
|
||||||
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
||||||
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }} onClick={login}>
|
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
|
||||||
|
onClick={login}
|
||||||
|
>
|
||||||
<Link href="./login">LOGIN</Link>
|
<Link href="./login">LOGIN</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"verbose": true,
|
||||||
|
"ignore": ["node_modules", ".next"],
|
||||||
|
"watch": ["server/**/*", "index.js"],
|
||||||
|
"ext": "js json"
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -57,6 +57,7 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/bravo68web/url-minify#readme",
|
"homepage": "https://github.com/bravo68web/url-minify#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"nodemon": "^2.0.15",
|
||||||
"prettier": "2.5.1"
|
"prettier": "2.5.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Navbar from 'components/NavBar'
|
||||||
|
import Contributors from 'components/Contributors/Contributors'
|
||||||
|
function contributors() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className={'main-bg'}>
|
||||||
|
<Navbar />
|
||||||
|
<Contributors />
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default contributors
|
|
@ -0,0 +1,17 @@
|
||||||
|
.head {
|
||||||
|
font-family: 'Montserrat Alternates', sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
/* text-shadow: 3px 2px 1px black; */
|
||||||
|
margin-top: 100px;
|
||||||
|
line-height: 1.15;
|
||||||
|
font-size: 5.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.head {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue