Merge pull request #125 from rakeshhotker/main

made contributors page based on design

frontend/components/Contributors/Contributors.jsx

@@ -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>
+  )
+}

frontend/components/Contributors/Contributors.style.js

@@ -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;
+    }
+  }
+`

frontend/components/NavBar/index.js

@@ -50,8 +50,19 @@ function Index(props) {
     >
       <Container maxWidth="xl">
         <Toolbar disableGutters="false">
-          <span><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;" }}>
+          <span>
+            <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
           </Typography>
           <Box
@@ -94,7 +105,11 @@ function Index(props) {
                   href="https://github.com/BRAVO68WEB/url-minify"
                   target={'_blank'}
                 >
-                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
+                  <Typography
+                    textAlign="center"
+                    variant="h6"
+                    sx={{ display: 'flex' }}
+                  >
                     <GitHubIcon fontSize="medium" />
                     GitHub
                   </Typography>
@@ -102,7 +117,11 @@ function Index(props) {
               </MenuItem>
               <MenuItem onClick={handleCloseNavMenu}>
                 <a href={NotFound}>
-                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
+                  <Typography
+                    textAlign="center"
+                    variant="h6"
+                    sx={{ display: 'flex' }}
+                  >
                     CREDITS
                   </Typography>
                 </a>
@@ -158,7 +177,7 @@ function Index(props) {
                   fontWeight: 'bold',
                 }}
               >
-                CREDITS
+                <Link href="./contributors">CREDITS</Link>
               </Button>
             </a>
           </Box>
@@ -198,16 +217,20 @@ function Index(props) {
               </Menu>
             </Box>
           ) : (
-            <Typography sx={{
-              color: 'white',
-              display: 'flex',
-              fontSize: 'h6.fontSize',
-              fontFamily: "'Open Sans', sans-serif;",
-              fontWeight: 'bold',
-            }} component={motion.div}
+            <Typography
+              sx={{
+                color: 'white',
+                display: 'flex',
+                fontSize: 'h6.fontSize',
+                fontFamily: "'Open Sans', sans-serif;",
+                fontWeight: 'bold',
+              }}
+              component={motion.div}
               initial={{ y: -50, opacity: 0 }}
               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>
             </Typography>
           )}

frontend/nodemon.json

@@ -0,0 +1,6 @@
+{
+    "verbose": true,
+    "ignore": ["node_modules", ".next"],
+    "watch": ["server/**/*", "index.js"],
+    "ext": "js json"
+}

frontend/package.json

@@ -57,6 +57,7 @@
   },
   "homepage": "https://github.com/bravo68web/url-minify#readme",
   "devDependencies": {
+    "nodemon": "^2.0.15",
     "prettier": "2.5.1"
   }
 }

frontend/pages/contributors.js

@@ -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

frontend/styles/Contributors.module.css

@@ -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;
+  }
+}