Merge pull request #202 from UWB-ACM/meet-the-team-changes

Meet the team changes

Author: UWB-ACM-OFFICIAL

src/components/landing-page/(MeetTheTeamSectionComponents)/Committees.tsx

@@ -56,7 +56,7 @@ export const committees = [
                 name: "Jonah Uellenberg",
                 role: "Digital Experience Co-lead, Developer",
                 photo: "/MeetTheTeamPhotos/jonah-uellenberg.jpg",
-                link: "https://www.linkedin.com/in/uellenberg",
+                link: "https://uellenberg.org",
             },
             {
                 id: "jui-bangali",
@@ -173,14 +173,14 @@ export const committees = [
                 name: "Jonah Uellenberg",
                 role: "Digital Experience Co-lead, Developer",
                 photo: "/MeetTheTeamPhotos/jonah-uellenberg.jpg",
-                link: "https://www.linkedin.com/in/uellenberg",
+                link: "https://uellenberg.org",
             },
             {
                 id: "khushpreet-gobindpuri",
                 name: "Preeti Gobindpuri",
                 role: "Lead Frontend Developer",
                 photo: "/MeetTheTeamPhotos/default.jpg",
-                link: undefined,
+                link: null,
             },
             {
                 id: "kat-tran",

src/components/landing-page/(MeetTheTeamSectionComponents)/MemberCard.tsx

@@ -8,19 +8,18 @@ interface MemberCardProps {
         name: string;
         role: string;
         photo: string;
-        link?: string;
+        link: string | null;
     };
 }
 
 const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
-    const isClickable = !!member.link;
-
     const cardContent = (
         <div className="relative flex flex-col sm:flex-row items-center sm:items-start p-4 border-4 border-black shadow-lg bg-white transition-transform transform group hover:scale-105 cursor-pointer duration-300 w-[130px] h-[180px] sm:w-[340px] sm:h-[160px] flex-shrink-0">
             {/* Profile Image */}
             <Image
                 src={member.photo}
-                alt={member.name}
+                // No alt because it'll get read out below.
+                alt=""
                 className="border-4 border-black w-24 h-24 object-cover object-center"
                 width={96}
                 height={96}
@@ -38,19 +37,19 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
 
             {/* LinkedIn Logo */}
             <div className="pl-8">
-                {isClickable && (
+                {member.link && (
                     <Image
                         src={LinkedInImage}
                         width={30}
-                        alt="LinkedIn"
+                        alt="Open Profile"
                         className="absolute top-2 right-2 hidden sm:block"
                     />
                 )}
             </div>
         </div>
     );
 
-    return isClickable ? (
+    return member.link ? (
         <a href={member.link} target="_blank" rel="noopener noreferrer">
             {cardContent}
         </a>

src/components/landing-page/(MeetTheTeamSectionComponents)/MembersGrid.tsx

@@ -8,7 +8,7 @@ interface TeamMembersGridProps {
         name: string;
         role: string;
         photo: string;
-        link?: string;
+        link: string | null;
     }[];
 }
 

src/components/landing-page/MeetTheTeamSection.tsx

@@ -15,10 +15,6 @@ const MeetTheTeamSection = () => {
         committees[0].id,
     );
 
-    const activeCommittee = committees.find(
-        (committee) => committee.id === activeCommitteeId,
-    );
-
     return (
         <Panel id="meetTheTeamPanel" panelColor="white" className={panelMargin}>
             {/* Heading */}
@@ -42,9 +38,18 @@ const MeetTheTeamSection = () => {
                 />
 
                 {/* Team Members */}
-                {activeCommittee && (
-                    <MembersGrid members={activeCommittee.members} />
-                )}
+                {committees.map((committee) => (
+                    <div
+                        className={
+                            committee.id === activeCommitteeId
+                                ? undefined
+                                : "hidden w-0 h-0"
+                        }
+                        key={committee.id}
+                    >
+                        <MembersGrid members={committee.members} />
+                    </div>
+                ))}
             </PanelContent>
         </Panel>
     );