Update Cards Styles

src/components/CardList.js

@@ -23,7 +23,19 @@ const PeopleCard = (props) => {
             alignItems: "center",
           }}
         >
-          <img src={props.img} alt="Image alt text" title="Logo Title Text 1" />
+          <img
+            src={props.img}
+            className="cardImage"
+            alt="Image alt text"
+            title="Logo Title Text"
+            style={{
+              maxWidth: "250px",
+              maxHeight: "250px",
+              objectFit: "contain",
+              width: "100%",
+              height: "100%",
+            }}
+          />
         </div>
         <div
           className="card__footer"
@@ -55,15 +67,22 @@ const PeopleCard = (props) => {
 };
 
 const CardList = () => {
+  const half = Math.ceil(contributors.length / 2);
+  const firstHalf = contributors.slice(0, half);
+  const secondHalf = contributors.slice(half);
   return (
-    <>
-      <h2 style={{ textAlign: "center",margin:'0.5rem' }}>People</h2>
-      <div className={styles.peopleContainer}>
-        {contributors.map((person, index) => {
-          return <PeopleCard key={index} {...person} />;
-        })}
+    <div className={styles.mainContainer}>
+      <div className={styles.column}>
+        {firstHalf.map((person, index) => (
+          <PeopleCard key={index} {...person} />
+        ))}
       </div>
-    </>
+      <div className={styles.column}>
+        {secondHalf.map((person, index) => (
+          <PeopleCard key={index} {...person} />
+        ))}
+      </div>
+    </div>
   );
 };
 export default CardList;

src/components/people.module.css

@@ -1,12 +1,34 @@
-.peopleContainer {
+.card {
+  margin: 2rem;
+  max-width: 400px;
+  flex: 1 1 auto;
+}
+
+.mainContainer {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin: 2rem 0;
+  margin: 0;
+  padding: 0 5rem;
+  max-width: 100%;
 }
-.card {
-  margin: 2rem 4rem;
-  max-width: 400px;
-  flex: 1 1 auto;
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  margin: 0 1rem;
 }
+
+@media (max-width: 768px) {
+  .mainContainer {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .column {
+    margin: 0;
+    width: 100%;
+  }
+}

src/pages/alumni.js

@@ -56,19 +56,32 @@ const PeopleCard = (props) => {
 };
 
 const Alumni = () => {
+  // Splitting the projectAlumni array into two
+  const half = Math.ceil(projectAlumni.length / 2);
+  const firstHalf = projectAlumni.slice(0, half);
+  const secondHalf = projectAlumni.slice(half);
+
   return (
     <Layout title="people">
       <div>
         <h2 style={{ textAlign: "center", margin: "0.5rem" }}>
           Project Alumni
         </h2>
-        <div className={styles.peopleContainer}>
-          {projectAlumni.map((person, index) => {
-            return <PeopleCard key={index} {...person} />;
-          })}
+        <div className={styles.mainContainer}>
+          <div className={styles.column}>
+            {firstHalf.map((person, index) => (
+              <PeopleCard key={index} {...person} />
+            ))}
+          </div>
+          <div className={styles.column}>
+            {secondHalf.map((person, index) => (
+              <PeopleCard key={index} {...person} />
+            ))}
+          </div>
         </div>
       </div>
     </Layout>
   );
 };
+
 export default Alumni;

static/utils/contributors.js

@@ -11,7 +11,7 @@ const contributors = [
     email: "[email protected]",
     role: "PEcAn Co-PI",
     profession: "Staff Scientist, Indigo Ag",
-    img: "https://datascience.cct.arizona.edu/sites/datascience.cct.arizona.edu/files/styles/large/public/images/people/david_lebauer.jpg",
+    img: "https://datascience.cct.arizona.edu/sites/datascience.cct.arizona.edu/files/styles/az_medium/public/2023-11/david_lebauer.jpeg",
   },
   {
     name: "Dr. Kenton McHenry",