created array.map and worked on responsiveness

frontend/components/Contributors/Contributors.jsx

@@ -1,72 +1,96 @@
-import React from 'react'
+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">
-          <div className="contributor-card">
+          {contributors.map((contributor) => {
-            <div className="contributor-cardPointerStart">
+            return (
-              <div id="circle"></div>
+              <div className="contributor-card" key={contributor.id}>
-            </div>
+                <div className="contributor-cardPointerStart">
-            <div id="ImageContainer">
+                  <div id="circle"></div>
-              <Image
+                </div>
-                src={profilepic}
+                <div id="ImageContainer">
-                alt="Contributors Profile Picture"
+                  <Image
-                width={'100px'}
+                    src={contributor.profilepic}
-                height={'100px'}
+                    alt="Contributors Profile Picture"
-                className="contributor-Pic"
+                    width={'100px'}
-              />
+                    height={'100px'}
-            </div>
+                    className="contributor-Pic"
-            <div className="contributor-Name">Jacob Myers</div>
+                  />
-            <div className="contributor-GithubUsername">
+                </div>
-              <GitHub />
+                <div id="contributorDetailsWrapper">
-              <span id="username">@jacob</span>
+                  <div className="contributor-Name">{contributor.name}</div>
-            </div>
+                  <div className="contributor-GithubUsername">
-          </div>
+                    <GitHub />
-          <div className="contributor-card">
+                    <span id="username">{contributor.gitHubUsername}</span>
-            <div className="contributor-cardPointerCenter">
+                  </div>
-              <div id="circle"></div>
+                </div>
-            </div>
+              </div>
-            <div id="ImageContainer">
+            )
-              <Image
+          })}
-                src={profilepic}
-                alt="Contributors Profile Picture"
-                width={'100px'}
-                height={'100px'}
-                className="contributor-Pic"
-              />
-            </div>
-            <div className="contributor-Name">Jacob Myers</div>
-            <div className="contributor-GithubUsername">
-              <GitHub />
-              <span id="username">@jacob</span>
-            </div>
-          </div>
-          <div className="contributor-card">
-            <div className="contributor-cardPointerEnd">
-              <div id="circle"></div>
-            </div>
-            <div id="ImageContainer">
-              <Image
-                src={profilepic}
-                alt="Contributors Profile Picture"
-                width={'100px'}
-                height={'100px'}
-                className="contributor-Pic"
-              />
-            </div>
-            <div className="contributor-Name">Jacob Myers</div>
-            <div className="contributor-GithubUsername">
-              <GitHub />
-              <span id="username">@jacob</span>
-            </div>
-          </div>
         </div>
       </>
     </ContributorsStyle>

frontend/components/Contributors/Contributors.style.js

@@ -4,9 +4,13 @@ export default styled.section`
   flex-direction: column;
   justify-content: center;
   .contributor-cards {
-    margin-top: -200px;
+    margin-top: 100px;
-    display: flex;
+    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;
@@ -23,16 +27,6 @@ export default styled.section`
     display: flex;
     justify-content: flex-start;
   }
-  .contributor-cardPointerCenter {
-    width: 180px;
-    display: flex;
-    justify-content: center;
-  }
-  .contributor-cardPointerEnd {
-    width: 180px;
-    display: flex;
-    justify-content: flex-end;
-  }
   #circle {
     height: 10px;
     width: 10px;
@@ -40,17 +34,24 @@ export default styled.section`
     background-color: green;
   }
   .contributor-Pic {
-    border-radius: 50%;
+    width: 100px;
+    height: 100px;
   }
   #ImageContainer {
     border-radius: 50%;
-    border: 3px solid green;
+    border: 3px solid #35cdf0;
+    overflow: hidden;
   }
   .contributor-Name {
-    color: #00bfff;
+    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;
@@ -59,10 +60,17 @@ export default styled.section`
   #username {
     color: grey;
     font-weight: bold;
+    padding-left: 4px;
   }
   @media (max-width: 600px) {
     .contributor-cards {
-      width: 100vw;
+      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;
@@ -78,12 +86,16 @@ export default styled.section`
       font-size: 20px;
     }
     .contributor-GithubUsername {
-      font-size: 15px;
+      font-size: 16px;
     }
   }
   @media (max-width: 400px) {
     .contributor-cards {
-      width: 100vw;
+      display: grid;
+      grid-template-columns: auto auto;
+      justify-content: space-around;
+      grid-gap: 10px;
+      overflow: scroll;
     }
     .contributor-card {
       width: 130px;

frontend/styles/Contributors.module.css

@@ -2,15 +2,16 @@
   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;
-  margin-bottom: 300px;
   text-align: center;
 }
 @media (max-width: 600px) {
   .head {
     font-size: 2.5rem;
-    margin-bottom: 250px;
+    margin-top: 2em;
+    margin-bottom: 100px;
   }
 }