updated member list for page.tsx

Author: zz3188

app/about/page.tsx

@@ -3,16 +3,15 @@
 import React from 'react';
 
 import { Heading, majorScale, Pane, Text, useTheme } from 'evergreen-ui';
-import Image from 'next/image';
 
 // --- Helper Components & Data ---
 interface member {
     name: string;
     role: string;
-    year: string;
     imgSrc: string;
     socials: {
         linkedin: string;
+        github: string;
     };
 }
 
@@ -53,31 +52,74 @@ const LinkedinIcon = () => (
     </svg>
 );
 
-// Team data organized for easier management
+const GitHubIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='24'
+        height='24'
+        viewBox='0 0 16 16'
+        fill='currentColor'
+    >
+        <path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8' />
+    </svg>
+);
+
 const teamLeads: member[] = [
     {
         name: 'Jenny Fan',
         role: 'Team Lead',
-        year: '2025 - 2026',
-        imgSrc: 'https://i.imgur.com/zDqurNZ.jpeg',
+        imgSrc: 'https://i.imgur.com/grwgWFZ.jpeg',
         socials: {
             linkedin: 'https://www.linkedin.com/in/jennyfan04/',
+            github: 'https://github.com/jfmath04',
+        },
+    },
+    {
+        name: 'Zhao Song Zhou',
+        role: 'Team Lead',
+        imgSrc: 'https://i.imgur.com/JeUh9dc.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/zhao-song-zhou/',
+            github: 'https://github.com/ZhaoSongZh7',
+        },
+    },
+    {
+        name: 'Alvin Sze',
+        role: 'Team Lead',
+        imgSrc: 'https://i.imgur.com/mZy9kzp.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/alvinsze/',
+            github: 'https://github.com/asze17',
         },
     },
 ];
 
 const teamMembers: member[] = [
-    // Add your name, role, and image here!
-];
-
-const pastLeadership: member[] = [
     {
-        name: 'Spencer Doyle',
-        role: 'Team Lead',
-        year: '2024 - 2025',
-        imgSrc: 'https://i.imgur.com/kUbzXL9.png',
+        name: 'Chloe Lau',
+        role: 'Product Manager',
+        imgSrc: 'https://i.imgur.com/BVrnu64.jpeg',
         socials: {
-            linkedin: 'https://www.linkedin.com/in/spencer-doyle3/',
+            linkedin: 'https://www.linkedin.com/in/chloe-hc-lau/',
+            github: 'https://github.com/lauechlo',
+        },
+    },
+    {
+        name: 'Allison Lee',
+        role: 'Product Manager',
+        imgSrc: 'https://i.imgur.com/3SPqM7z.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/allisonelee/',
+            github: 'https://github.com/allisonelee',
+        },
+    },
+    {
+        name: 'Christal Chen',
+        role: 'Software Engineer',
+        imgSrc: 'https://i.imgur.com/ZshQ3Fj.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/christalchen/',
+            github: 'https://github.com/12chenec',
         },
     },
 ];
@@ -138,13 +180,11 @@ export function App() {
                     <h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
                         Team Leadership
                     </h2>
-                    <div
-                        className={`grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto ${teamLeads.length === 1 ? 'justify-items-center' : ''}`}
-                    >
+                    <div className='grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto'>
                         {teamLeads.map((lead) => (
                             <div
                                 key={lead.name}
-                                className={`bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out w-full ${teamLeads.length === 1 ? 'lg:col-span-2 max-w-lg' : ''}`}
+                                className='bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out w-full'
                             >
                                 <div className='p-8 flex flex-col sm:flex-row items-center'>
                                     <Pane
@@ -158,7 +198,9 @@ export function App() {
                                         boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
                                         overflow='hidden'
                                     >
-                                        <Image
+                                        {/* Intentionally using img so direct Imgur URLs work without Next image domain config. */}
+                                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                                        <img
                                             src={lead.imgSrc}
                                             alt={lead.name}
                                             height={128}
@@ -179,6 +221,11 @@ export function App() {
                                             {lead.role}
                                         </p>
                                         <div className='flex justify-center sm:justify-start space-x-4'>
+                                            <SocialIcon
+                                                href={lead.socials.github}
+                                            >
+                                                <GitHubIcon />
+                                            </SocialIcon>
                                             <SocialIcon
                                                 href={lead.socials.linkedin}
                                             >
@@ -203,7 +250,9 @@ export function App() {
                                 key={member.name}
                                 className='bg-white rounded-xl shadow-md p-6 text-center transform hover:-translate-y-2 transition-transform duration-300 ease-in-out group'
                             >
-                                <Image
+                                {/* Intentionally using img so direct Imgur URLs work without Next image domain config. */}
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img
                                     src={member.imgSrc}
                                     alt={member.name}
                                     className='w-24 h-24 rounded-full mx-auto mb-4 border-4 border-slate-200 group-hover-border transition-colors duration-300'
@@ -221,6 +270,9 @@ export function App() {
                                     {member.role}
                                 </p>
                                 <div className='flex mx-auto w-min mt-2 justify-center sm:justify-start space-x-4'>
+                                    <SocialIcon href={member.socials.github}>
+                                        <GitHubIcon />
+                                    </SocialIcon>
                                     <SocialIcon href={member.socials.linkedin}>
                                         <LinkedinIcon />
                                     </SocialIcon>
@@ -229,68 +281,9 @@ export function App() {
                         ))}
                     </div>
                 </section>
-
-                {/* Past Leadership Section */}
-                <section className='mb-16'>
-                    <h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
-                        Past Leadership
-                    </h2>
-                    <div
-                        className={`grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto ${pastLeadership.length === 1 ? 'justify-items-center' : ''}`}
-                    >
-                        {pastLeadership.map((lead) => (
-                            <div
-                                key={lead.name}
-                                className={`bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out w-full ${pastLeadership.length === 1 ? 'lg:col-span-2 max-w-lg' : ''}`}
-                            >
-                                <div className='p-8 flex flex-col sm:flex-row items-center'>
-                                    <Pane
-                                        flexShrink={0}
-                                        marginBottom={majorScale(3)}
-                                        marginRight={majorScale(4)}
-                                        width={128}
-                                        height={128}
-                                        borderRadius='50%'
-                                        border={`4px solid ${theme.colors.blue300}`}
-                                        boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
-                                        overflow='hidden'
-                                    >
-                                        <Image
-                                            src={lead.imgSrc}
-                                            alt={lead.name}
-                                            height={128}
-                                            width={128}
-                                            style={{ objectFit: 'cover' }}
-                                        />
-                                    </Pane>
-                                    <div className='text-center sm:text-left'>
-                                        <h3 className='text-2xl font-bold text-slate-900'>
-                                            {lead.name}
-                                        </h3>
-                                        <p
-                                            className='text-md font-semibold mb-2'
-                                            style={{
-                                                color: theme.colors.blue500,
-                                            }}
-                                        >
-                                            {lead.year}
-                                        </p>
-                                        <div className='flex justify-center sm:justify-start space-x-4'>
-                                            <SocialIcon
-                                                href={lead.socials.linkedin}
-                                            >
-                                                <LinkedinIcon />
-                                            </SocialIcon>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </section>
             </div>
         </div>
     );
 }
 
-export default App;
+export default App;