New Board Photos (#65)

* Added new board photos and changed styling

* Updated Nathan's LinkedIn URL

---------

Co-authored-by: Uliyaah Dionisio <[email protected]>

src/components/team-card/index.tsx

@@ -1,78 +1,76 @@
-import React from 'react';
-import styles from './style.module.css';
-
+import Image from 'next/image';
 import EmailIcon from './email';
 import LinkedInIcon from './linkedin';
+import styles from './style.module.css';
 
 const TeamCard: React.FC = () => {
   const teamMembers = [
     {
-      name: 'Nikhil Dange',
+      name: 'Angela Hu',
       position: 'Hack President',
-      email: 'nikhil@acmucsd.org',
-      linkedinLink: 'https://www.linkedin.com/in/nsdange/',
-      imageUrl: 'assets/nikhil.JPG',
+      email: 'angelahu@acmucsd.org',
+      linkedinLink: 'https://www.linkedin.com/in/angelahu925/',
+      imageUrl: '/assets/board/angela.jpeg',
     },
     {
-      name: 'Angela Hu',
+      name: 'Kevin Lu',
       position: 'Hack Technical Event Director',
-      email: 'angelahu@acmucsd.org',
-      linkedinLink: 'https://www.linkedin.com/in/angelahu925/',
-      imageUrl: 'assets/angela.jpeg',
+      email: 'kevinlu@acmucsd.org',
+      linkedinLink: 'https://www.linkedin.com/in/kevin-lu-92b026245/',
+      imageUrl: '/assets/board/kevin.png',
     },
     {
-      name: 'Khushi Patel',
+      name: 'Nathan Wang',
       position: 'Hack Technical Event Director',
-      email: 'khushi@acmucsd.org',
-      linkedinLink: 'http://www.linkedin.com/in/pateljkhushi',
-      imageUrl: 'assets/khushi.jpeg',
+      email: 'nathan@acmucsd.org',
+      linkedinLink: 'https://www.linkedin.com/in/nathan-wang-100b1a212/',
+      imageUrl: '/assets/board/nathan.png',
     },
     {
-      name: 'Charvi Shukla',
+      name: 'Pansy Kuang',
       position: 'Hack Technical Event Director',
-      email: 'charvi@acmucsd.org',
-      linkedinLink: 'https://www.linkedin.com/in/charvi-shukla-439b681b2/',
-      imageUrl: 'assets/charvi.jpeg',
+      email: 'pansy@acmucsd.org',
+      linkedinLink: 'http://www.linkedin.com/in/pansykuang',
+      imageUrl: '/assets/board/pansy.jpeg',
     },
     {
-      name: 'Alexis Vergnet',
+      name: 'Shreya Nagunuri',
       position: 'Hack Technical Event Director',
-      email: 'alexis@acmucsd.org',
-      linkedinLink: 'https://www.linkedin.com/in/avergnet/',
-      imageUrl: 'assets/alexis.jpeg',
+      email: 'shreya@acmucsd.org',
+      linkedinLink: 'https://www.linkedin.com/in/shreya-nagunuri/',
+      imageUrl: '/assets/board/shreya.png',
     },
     {
       name: 'Uliyaah Dionisio',
-      position: 'Hack Diamond Staff',
+      position: 'Hack Technical Event Director',
       email: '[email protected]',
       linkedinLink: 'https://www.linkedin.com/in/uliyaah-dionisio-246695233/',
-      imageUrl: 'assets/uliyaah.jpg',
-    },
-    {
-      name: 'Nathan Wang',
-      position: 'Hack Diamond Staff',
-      email: '[email protected]',
-      linkedinLink: 'https://www.linkedin.com/in/nathan-wang-100b1a212/',
-      imageUrl: 'assets/nathan.jpeg',
+      imageUrl: '/assets/board/uliyaah.png',
     },
   ];
 
   return (
     <div className={styles.team}>
-      {teamMembers.map((member, index) => (
+      {teamMembers.map(member => (
         <div key={member.name} className={styles.card}>
-          <div className={styles.cardOutline}>
-            <img src={member.imageUrl} alt={member.name} />
-            <h4>{member.name}</h4>
-            <h5>{member.position}</h5>
-            <div className={styles.icons}>
-              <a href={`mailto:${member.email}`} target="_blank" rel="noopener noreferrer">
-                <EmailIcon />
-              </a>
-              <a href={member.linkedinLink} target="_blank" rel="noopener noreferrer">
-                <LinkedInIcon />
-              </a>
-            </div>
+          <div className={styles.imageCropper}>
+            <Image
+              className={styles.cardImage}
+              src={member.imageUrl}
+              alt={member.name}
+              width={100}
+              height={100}
+            />
+          </div>
+          <h4>{member.name}</h4>
+          <h5>{member.position}</h5>
+          <div className={styles.icons}>
+            <a href={`mailto:${member.email}`} target="_blank" rel="noopener noreferrer">
+              <EmailIcon />
+            </a>
+            <a href={member.linkedinLink} target="_blank" rel="noopener noreferrer">
+              <LinkedInIcon />
+            </a>
           </div>
         </div>
       ))}

src/components/team-card/style.module.css

@@ -1,74 +1,51 @@
 .team {
   display: flex;
   flex-wrap: wrap;
-  row-gap: 2rem;
-  column-gap: 2rem;
-  max-width: 90%;
-  text-align: center;
   justify-content: center;
+  gap: 2rem;
   margin-bottom: 2rem;
   margin-top: 1rem;
-  margin-left: 13%; 
-  margin-right: 13%; 
+  max-width: 80%;
+  text-align: center;
 }
-
-  .card {
-    text-align: center;
-    flex-basis: 20%;
-  }
 
-  .cardOutline {
-    border: 2px solid #f9a857;
-    padding: 16px;
-    border-radius: 10px;
-    height: 100%;
-  }
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 250px;
+  height: 325px;
+  min-height: 100%;
+  padding: 1rem 1.5rem;
+  border: 2px solid #f9a857;
+  border-radius: 10px;
+}
 
-  .card h4 {
-    font-weight: bold;
-    margin-top: 10px;
-  }
-
-  .icons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1.5rem;
-    margin-top: 0.25rem;
-  }
-
-  .icons svg {
-    fill: #f9a857;
-  }
-
-  .card img {
-    border-radius: 50%;
-  }
+.card h4 {
+  margin-top: 1rem;
+  font-weight: bold;
+}
 
-  @media screen and (max-width: 1100px) {
-    .card {
-      text-align: center;
-      flex-basis: 28%;
-    }
-  }
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-top: 0.25rem;
+}
+
+.icons svg {
+  fill: #f9a857;
+}
+
+.imageCropper {
+  margin: 0 auto;
+  width: 180px;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+}
 
-  @media screen and (max-width: 810px) {
-    .team {
-      margin-left: 5%;
-      margin-right: 5%;
-    }
-    .card {
-      text-align: center;
-      flex-basis: 33%;
-    }
-  }
-  @media screen and (max-width: 600px) {
-    .team {
-      display: grid;
-      grid-template-columns: 50%;
-      gap: 0.3rem; 
-      margin-left: 5%;
-      margin-right: 5%;
-    }
-  }
-
+.cardImage {
+  min-width: 100%;
+}

src/sections/Team/style.module.css

@@ -1,9 +1,8 @@
-.team {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 30vh;
-    max-height: 100vh;
+.container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+
 }
 
 .h1 {