Merge pull request #147 from BUGS-NYU/ui-changes

updated ui on website for teams and events

Author: fwinford

src/components/EventsList.tsx

@@ -19,41 +19,65 @@ export const getDateText = (event: Event) => {
 };
 
 const EventsList = ({ events, count }: EventsListProps) => {
+  // Slice events array if count is provided
   events = events.slice(0, count);
   if (events.length === 0) return null;
 
   return (
-    <>
-      <div className='grid gap-12 grid-cols-1 sm:grid-cols-2'>
-        {events.map((event) => {
-          /* If imgsList or shortDescription is defined, this event will have its own page */
-          const hasOwnPage = event.imgsList || event.shortDescription;
-
-          return <Card shadow='none' 
-              link={hasOwnPage ? `/event?index=${event.eventIndex}` : undefined} 
-              key={event.title}>
-            <div className='-m-8 mb-0'>
-              <img className='w-full h-48 rounded-t-lg object-cover' src={event.cover} alt='' />
+    // Grid layout: 1 column on mobile, 2 on medium screens, 3 on large
+    <div className='grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
+      {events.map((event) => {
+        const hasOwnPage = event.imgsList || event.shortDescription;
+        const isPastEvent = new Date(event.date) < new Date();
+
+        return (
+          <Card 
+            shadow='none' 
+            link={hasOwnPage ? `/event?index=${event.eventIndex}` : undefined} 
+            key={event.title}
+          >
+            {/* Event image container */}
+            <div className='-mx-8 -mt-8'>
+              <img 
+                className='w-full h-[225px] object-cover rounded-t-lg' 
+                src={event.cover} 
+                alt='' 
+              />
             </div>
-            <div className='flex justify-between items-center p-2 pt-3'> 
-              <h3 className='text-xl font-bold'>{event.title}</h3> 
-              {hasOwnPage ? <div className='group-hover:bg-neutral-600 border-2 px-3 py-2 text-lg rounded-md transition-colors'> View </div> : null}
+
+            {/* Card content wrapper */}
+            <div className='p-4'>
+              {/* Title and view button container */}
+              <div className='flex justify-between items-start mb-4'> 
+                <h3 className='text-xl font-bold leading-tight'>{event.title}</h3> 
+                {hasOwnPage && (
+                  <button className='ml-4 group-hover:bg-neutral-600 border-2 px-3 py-1 text-sm rounded-md transition-colors'>
+                    View
+                  </button>
+                )}
+              </div>
+
+              {/* Event details for upcoming events */}
+              {!isPastEvent && (
+                <ul className='text-zinc-600 dark:text-zinc-400 space-y-2 mb-4'>
+                  <li className='flex items-center gap-x-2'>
+                    <Clock className='flex-shrink-0 h-5 w-5' />
+                    <span>{getDateText(event)}</span>
+                  </li>
+                  <li className='flex items-center gap-x-2'>
+                    <PinAlt className='flex-shrink-0 h-5 w-5' />
+                    <span>{event.location}</span>
+                  </li>
+                </ul>
+              )}
+
+              {/* Event description */}
+              <p className='text-sm leading-relaxed'>{event.description}</p>
             </div>
-            <ul className='text-zinc-600 dark:text-zinc-400'>
-              <li className='my-2 flex gap-x-2'>
-                <Clock className='flex-shrink-0 inline-block' />
-                {getDateText(event)}
-              </li>
-              <li className='my-2 flex gap-x-2'>
-                <PinAlt className='flex-shrink-0 inline-block' />
-                {event.location}
-              </li>
-            </ul>
-            <p className='mt-4'>{event.description}</p>
           </Card>
-        })}
-      </div>
-    </>
+        );
+      })}
+    </div>
   );
 };
 

src/components/NavBar.tsx

@@ -41,7 +41,7 @@ function NavBar() {
           <button 
             className={`${currentTheme === "light" ? "text-black" : "text-white"} flex w-10 h-10 items-center justify-center`}
             onClick={toggleMobileMenu}>
-            {isMobileMenuOpen ? <Cancel /> : <Menu />}
+            {isMobileMenuOpen ? <Cancel width={24} height={24} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} /> : <Menu width={24} height={24} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />}
           </button>
         </div>
 

src/data/events.ts

@@ -19,6 +19,33 @@ export interface Event {
 }
 
 export const EVENTS: Event[] = [
+  {
+    title: 'Bugs x HRT',
+    description: 'learn about the role of open source in the financial sector from kamen yotov, a tandon professor.',
+    date: new Date('September 24, 2024'),
+    startTime: '5:00 PM',
+    endTime: '6:30 PM',
+    location: 'WWH Room 101',
+    cover: '/images/events/fall-2024/bugs_HRT.png',
+  },
+  {
+    title: 'Bugs End of Semester Party',
+    description: 'join us at our end of semester party and relax with some boba before finals week',
+    date: new Date('May 3, 2024'),
+    startTime: '5:00 PM',
+    endTime: '6:00 PM',
+    location: 'WWH Room 101',
+    cover: '/images/events/end_of_semester_bugs.png',
+  },
+  {
+    title: 'Bugs x Google Life of a Feature',
+    description: 'learn about the deisgn and development cycle for creating new features for large projects',
+    date: new Date('April 26, 2024'),
+    startTime: '3:30 PM',
+    endTime: '5:00 PM',
+    location: 'WWH Room 101',
+    cover: '/images/events/bugs_google_life_of_a_feature.png',
+  },
   {
     title: 'BUGS x Girls Who Code SQL Workshop',
     description: 'learn about the basics of SQL query and create an employee check-in system! free food, drinks, and database knowledge',

src/data/team.ts

@@ -3,36 +3,40 @@ export interface TeamMember {
   description: string;
   profileImg: string;
   role: string;
+  interests?: string[];
 }
 
 export const TEAM: TeamMember[] = [
   {
     name: 'Abigail Zhou',
     description:
-      'Abigail is a senior majoring in CS at CAS with an interest in operating systems and machine learning. She\'s currently exploring the finance industry and enjoys trying new restaurants and running in her free time!!',
+      'Abigail is a senior majoring in CS at CAS. She enjoys trying new restaurants and running in her free time!',
     profileImg: '/images/team/abigal.jpg',
     role: 'President',
+    interests: ["Operating Systems", "Machine Learning", "Finance"]
   },
   {
     name: 'Alex Ying',
     description:
-      'Alex is a senior studying CS at Tandon. He enjoys skiing, rock climbing, doing escape rooms, and learning about cool algorithms in his free time. He is currently learning how to juggle.',
+      'Alex is a senior studying CS at Tandon. He enjoys skiing, rock climbing, doing escape rooms in his free time. He is currently learning how to juggle.',
     profileImg: '/images/team/alexyi.jpg',
     role: 'Lead Event Coordinator',
+    interests: ["Cool Algorithms"]
   },
    {
     name: 'Rishabh Verma',
     description:
-      'Rishabh is a 2nd year MS CS student at NYU Tandon. In his free time, he likes to learn more about financial markets, algorithmic trading strategies, and system design.',
+      'Rishabh is a 2nd year MS CS student at NYU Tandon. In his free time, he likes to learn more about algorithmic trading strategies',
     profileImg: '/images/team/rishabh.jpg',
     role: 'Lead Developer',
+    interests: ["Financial Markets", "Systems Design"]
   },
   {
-    name: 'Alex Jia',
-    description:
-      'Hello everyone my name is Alex, I am a Sophomore who is majoring in computer science and mathematics at CAS. I was born in Xi’an and raised in Seattle, and I am interested in the intersection between image processing and machine learning. In my free time, I love hanging out with friends and discovering local restaurants with Beli!',
-    profileImg: '/images/team/alexj.jpg',
-    role: 'Developer',
+    name: "Alex Jia",
+    description: "Alex, a Sophomore majoring in computer science and mathematics at NYU CAS, explores the intersection of image processing and machine learning. Outside of academics, Alex enjoys discovering local restaurants and spending time with friends.",
+    profileImg: "/images/team/alexj.jpg",
+    role: "Developer",
+    interests: ["Image Processing", "Machine Learning"]
   },
   {
     name: 'Grace He',
@@ -44,9 +48,10 @@ export const TEAM: TeamMember[] = [
   {
     name: 'Aryan Rai',
     description: 
-      'Aryan is a second-year master\'s student in CS at Tandon with a strong interest in machine learning and finance. He’s currently exploring the intersection of artificial intelligence and financial technology, focusing on how AI can transform the finance industry. In his free time, Aryan enjoys trekking, playing badminton, and seeking out new experiences around New York.',
+      'Aryan is a second-year master\'s student in CS at Tandon. He’s currently exploring the intersection of artificial intelligence and financial technology, focusing on how AI can transform the finance industry. In his free time, Aryan enjoys trekking, playing badminton, and seeking out new experiences around New York.',
     profileImg: '/images/team/aryan.jpg',
     role: 'Event Coordinator',
+    interests: ["Finance", "Machine Learning"]
   },
   {
     name: 'Angela Liu',
@@ -88,9 +93,10 @@ export const TEAM: TeamMember[] = [
   },
   {
     name: 'Faith Winford',
-    description: 'Faith Winford is a sophomore studying CS and Philosophy at CAS. She’s interested in the intersection of AI and ethics. In her free time, she likes listening to music and going to concerts.',
+    description: 'Faith Winford is a sophomore studying CS and Philosophy at CAS. In her free time, she likes listening to music and going to concerts.',
     profileImg: '/images/team/faith.jpg',
     role: 'Website Maintainer',
+    interests: ["AI", "Product Managment","Software Design"]
   },
 
 ];

src/pages/about.tsx

@@ -4,14 +4,41 @@ import Layout from '../components/Layout';
 import Card from '../components/Card';
 import { TEAM, TeamMember } from '../data/team';
 
-const TeamMemberCard: React.FC<TeamMember> = ({ name, description, profileImg, role }) => (
-  <Card shadow='none'  className='flex flex-col items-center'>
+const InterestTag: React.FC<{ interest: string }> = ({ interest }) => (
+  <span className='inline-block px-3 py-1 text-sm rounded-full bg-purple-100 text-[#8900e1] dark:bg-purple-900 dark:text-purple-200 mr-2 mb-2'>
+    {interest}
+  </span>
+);
+
+const TeamMemberCard: React.FC<TeamMember> = ({ 
+  name, 
+  description, 
+  profileImg, 
+  role, 
+  interests = [] 
+}) => (
+  <Card 
+    shadow='none' 
+    className='flex flex-col items-center group transition-transform duration-300 hover:-translate-y-1 p-0'
+  >
     <div className='w-full h-64 overflow-hidden rounded-t-lg'>
-      <img className='w-full h-full object-cover' src={profileImg} alt='' />
+      <img 
+        className='w-full h-full object-cover transition-transform duration-300 group-hover:scale-105' 
+        src={profileImg} 
+        alt={`${name} - ${role}`} 
+        loading="lazy"
+      />
+    </div>
+    <div className='mt-6 px-4 pb-4 w-full'>
+      <h3 className='text-xl font-bold'>{name}</h3>
+      <h3 className='text-xl' style={{ color: '#7b5aa6' }}>{role}</h3>
+      <p className='mt-2 mb-3'>{description}</p>
+      <div className='flex flex-wrap'>
+        {interests.map((interest) => (
+          <InterestTag key={interest} interest={interest} />
+        ))}
+      </div>
     </div>
-    <h3 className='mt-6 text-xl font-bold'>{name}</h3>
-    <h3 className=' text-xl'>{role}</h3>
-    <p className='mt-2'>{description}</p>
   </Card>
 );