src/pages/Team.js: Add degree and graduation year of all members

uf-mil · Oct 28, 2024 · 044a566 · 044a566
1 parent 815cab4
commit 044a566
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/src/components/MemberCard.js b/src/components/MemberCard.js
@@ -1,12 +1,16 @@
 import React from 'react';
 
-function MemberCard({ name, role, image }) {
+function MemberCard({ name, role, image, degree, graduationYear }) {
   return (
     <div className="bg-white rounded-lg shadow-lg p-3">
-      <img src={image} alt={name} className="w-full object-cover rounded-lg" />
+      <div className="w-full h-48 overflow-hidden rounded-lg relative">
+        <img src={image} alt={name} className="object-cover w-full h-full absolute top-0 left-0" />
+      </div>
       <div className="mt-2 text-center">
         <h3 className="text-xl font-bold">{name}</h3>
         <p className="text-gray-600">{role}</p>
+        <p className="text-gray-500 text-sm mt-1">{degree}</p>
+        <p className="text-gray-500 text-sm mt-1">{graduationYear}</p>
       </div>
     </div>
   );

diff --git a/src/pages/Team.js b/src/pages/Team.js
@@ -8,30 +8,32 @@ import advisorImages from "../assets/advisors";
 
 const Leadership = () => {
   const members = [
-    { image: memberImages["cameron.jpeg"], name: 'Cameron Brown', role: 'Team Lead' },
-    { image: memberImages["lorant.png"], name: 'Lorant Domokos', role: 'Mechanical Lead' },
-    { image: memberImages["daniel.jpeg"], name: 'Daniel Parra', role: 'Software Lead' },
-    { image: memberImages["adrian.png"], name: 'Adrian Fernandez', role: 'Electrical Lead' },
-    { image: memberImages["adam_h.png"], name: 'Adam Hamdan', role: 'Mechanical Lead, Operations' },
-    { image: memberImages["keith.jpeg"], name: 'Keith Khadar', role: 'Software Lead' },
-    { image: memberImages["kayleigh.jpg"], name: 'Kayleigh Beron', role: 'Electrical Lead, Operations' },
-    { image: memberImages["adam_m.jpeg"], name: 'Adam McAleer', role: 'Mechanical Lead, Mechanisms' },
-    { image: memberImages["andrew.png"], name: 'Andrew Knee', role: 'Software Lead' },
-    { image: memberImages["lester.jpg"], name: 'Lester Bonilla', role: 'Drone Lead' },
+    { image: memberImages["cameron.jpeg"], name: 'Cameron Brown', role: 'Team Lead', degree: 'BS, Computer Science', graduationYear: 'Spring 2025'},
+    { image: memberImages["lorant.png"], name: 'Lorant Domokos', role: 'Mechanical Lead', degree: 'BS, Mechanical Engineering', graduationYear: 'Spring 2025'},
+    { image: memberImages["daniel.jpeg"], name: 'Daniel Parra', role: 'Software Lead', degree: 'BS, Computer Science', graduationYear: 'Spring 2026'},
+    { image: memberImages["adrian.png"], name: 'Adrian Fernandez', role: 'Electrical Lead', degree: 'BS, Electrical Engineering', graduationYear: 'Fall 2024'},
+    { image: memberImages["adam_h.png"], name: 'Adam Hamdan', role: 'Mechanical Lead, Operations', degree: 'BS, Mechanical Engineering', graduationYear: 'Spring 2026'},
+    { image: memberImages["keith.jpeg"], name: 'Keith Khadar', role: 'Software Lead', degree: 'BS, Computer Engineering', graduationYear: 'Spring 2025' },
+    { image: memberImages["kayleigh.jpg"], name: 'Kayleigh Beron', role: 'Electrical Lead, Operations', degree: 'BS, Computer Engineering', graduationYear: 'Fall 2024'},
+    { image: memberImages["adam_m.jpeg"], name: 'Adam McAleer', role: 'Mechanical Lead, Mechanisms', degree: 'BS, Mechanical Engineering', graduationYear: 'Fall 2024'},
+    { image: memberImages["andrew.png"], name: 'Andrew Knee', role: 'Software Lead', degree: 'MS, Computer Science', graduationYear: 'Fall 2024'},
+    { image: memberImages["lester.jpg"], name: 'Lester Bonilla', role: 'Drone Lead', degree: 'BS, Computer Engineering', graduationYear: 'Spring 2025'},
   ];
 
   return (
     <section className="max-w-6xl mx-auto py-16 bg-gray-300">
       <div className="text-center mb-12">
         <h2 className="text-3xl font-bold mb-10">Leadership</h2>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-4 lg:grid-cols-6 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-6">
         {members.map((member, index) => (
           <MemberCard
             key={index}
             image={member.image}
             name={member.name}
             role={member.role}
+            degree={member.degree}
+            graduationYear={member.graduationYear}
           />
         ))}
       </div>
@@ -51,7 +53,7 @@ const Advisors = () => {
       <div className="text-center mb-12">
         <h2 className="text-3xl font-bold mb-10">Advisors</h2>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-4 lg:grid-cols-6 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-6">
         {advisors.map((member, index) => (
           <MemberCard key={index} image={member.image} name={member.name} role={member.role} />
         ))}