Alex/events page

client/src/components/EventsElement.tsx

@@ -0,0 +1,41 @@
+{/* types for events variables */}
+type EventsElement = {
+    eventName: string;
+    eventImage: string;
+    eventLink: string;
+    eventDescription: string;
+    eventIsDone: boolean;
+    eventDate: Date;
+    eventTag: string;
+};
+
+{/* properties */}
+type Props = {
+    element: EventsElement;
+};
+
+{/* eventsInfo function that define how each event element should look in the grid */}
+export default function EventsInfo({ element }: Props) {
+    return(
+        <>
+        {/* opens link when clicked, and change visual depending on the true or false argument of element.eventIsDone */}
+        <a href={element.eventLink} target="_blank" rel="noopener noreferrer" 
+            className={
+                `flex flex-col h-full w-full cursor-pointer rounded-lg p-5 
+                ${element.eventIsDone ? 'bg-gray-700 opacity-50' : 'bg-gray-900 hover:bg-gray-800 transition-all duration-300 hover:scale-105'}`
+            }
+        >
+            <h1 className="font-bold text-xl mb-2">
+                {element.eventName}
+            </h1>
+
+            <img className="rounded-md object-cover"
+                src={element.eventImage} alt={element.eventName}
+            />
+            <p className="text-sm mt-2 hyphens-auto">
+                {element.eventDescription}
+            </p>
+        </a>
+        </>
+    )
+}

client/src/components/Navbar.tsx

@@ -13,6 +13,7 @@ export default function Navbar() {
         <div className="flex gap-6 text-sm">
           <NavLink to="/" end className={linkClass}>home</NavLink>
           <NavLink to="/project-team" className={linkClass}>project team</NavLink>
+          <NavLink to="/events" className={linkClass}>events</NavLink>
           <NavLink to="/sign-up" className={linkClass}>Sign Up</NavLink>
           <NavLink to="/gallery" className={linkClass}>Gallery</NavLink>
         </div>

client/src/main.tsx

@@ -3,8 +3,11 @@ import * as ReactDOM from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import RootLayout from './layouts/RootLayout'
 import App from './App'
-import ProjectTeam from './pages/Project-Team'
 import './index.css'
+
+{/* page imports */}
+import ProjectTeam from './pages/Project-Team'
+import Events from './pages/Events'
 import SignUp from './pages/SignUp'
 import Gallery from './pages/Gallery'
 
@@ -13,22 +16,26 @@ import Pruna from "./pages/project-team/Pruna";
 import Alanna from './pages/project-team/Alanna'
 import Tadiwa from './pages/project-team/Tadiwa'
 import Terrence from './pages/project-team/Terrence'
+import Alex from './pages/project-team/Alex'
 
 {/* here's where we set up all our routing */}
 const router = createBrowserRouter([
   {
     path: "/",
     element: <RootLayout />,
     children: [
-      {index: true,             element: <App /> },
-      {path: 'project-team',    element: <ProjectTeam /> },
-      {path: 'sign-up',         element: <SignUp />},
-      {path: 'gallery',         element: <Gallery />},
+      { index: true,              element: <App /> },
+      { path: 'events',           element: <Events /> },
+      { path: 'project-team',    element: <ProjectTeam /> },
+      { path: 'sign-up',         element: <SignUp />},
+      { path: 'gallery',         element: <Gallery />},
 
-      {path: 'alanna',          element: <Alanna /> },
-      {path: 'tadiwa', element: <Tadiwa />},
-      {path: 'terrence',         element: <Terrence />},
-      {path: "pruna", element: <Pruna />},
+      { path: 'alanna',          element: <Alanna /> },
+      { path: 'tadiwa', element: <Tadiwa />},
+      { path: 'terrence',         element: <Terrence />},
+      { path: "pruna", element: <Pruna />},
+      { path: 'alex',            element: <Alex/> }
+
     ],
   },
 ]);

client/src/pages/Events.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import EventsInfo from "../components/EventsElement"; 
+import EventImage from "../assets/about-us/Copy of UMSA_Guitar.png"
+
+{/* constant events array */}
+const events = [
+    {
+        eventName: "Jalinan Raya",
+        eventImage: EventImage,
+        eventLink: "https://www.instagram.com/p/DWPgAxmky6q/?img_index=1",
+        eventDescription: "very cool and very descriptive description",
+        eventIsDone: false,
+        eventDate: new Date("2026-05-20"),
+        eventTag: "Social",
+    },
+    {
+        eventName: "Bersatu Trials",
+        eventImage: EventImage,
+        eventLink: "https://www.instagram.com/p/DV7o4eZmPHH/?img_index=1",
+        eventDescription: "even cooler and even more descriptive description",
+        eventIsDone: false,
+        eventDate: new Date("2026-05-28"),
+        eventTag: "Social",
+    },
+    {
+        eventName: "Clash of UMSA",
+        eventImage: EventImage,
+        eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/",
+        eventDescription: "even even cooler and way wayyyyy more descriptive description",
+        eventIsDone: false,
+        eventDate: new Date("2026-06-21"),
+        eventTag: "Competition",
+    },
+    {
+        eventName: "Clash of UMSA",
+        eventImage: EventImage,
+        eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/",
+        eventDescription: "even even cooler and way wayyyyy more descriptive description",
+        eventIsDone: false,
+        eventDate: new Date("2026-03-21"),
+        eventTag: "Social",
+    },
+    {
+        eventName: "Clash of UMSA",
+        eventImage: EventImage,
+        eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/",
+        eventDescription: "even even cooler and way wayyyyy more descriptive description",
+        eventIsDone: true,
+        eventDate: new Date("2026-04-20"),
+        eventTag: "Competition",
+    },
+];
+
+{/* eventIsDone is overriden depending on if event.eventDate is before todays date */}
+const today = new Date();
+const processedEvents = events.map((event) => ({
+    ...event, eventIsDone: event.eventDate < today,
+}))
+.sort((a, b) => { //sorting the array based on how close the date is to origin(today)
+    if (a.eventIsDone == false && b.eventIsDone == false) {
+        return a.eventDate.getTime() - b.eventDate.getTime();
+    } 
+    else {
+        return b.eventDate.getTime() - a.eventDate.getTime();
+    }
+});
+
+{/* use .filter() to make new array depending on events.eventIsDone is true or false */}
+const upcomingEvents = processedEvents.filter((event) => event.eventIsDone == false);
+const pastEvents = processedEvents.filter((event) => event.eventIsDone == true);
+
+export default function Events() {
+
+    useEffect(() => {
+        document.title = "Events | UMSA";
+        }, []);
+
+    {/* state variable and setter function using useState with default value All, to rerender the activeTag based on onClick event from button */}
+    const [activeTag, setActiveTag] = useState("All");
+    {/* when initial or new activeTag, EventsArrays are filtered for activeTag */}
+    const filteredUpcomingEvents = 
+        activeTag == "All" ? upcomingEvents : upcomingEvents.filter((event) => event.eventTag == activeTag);
+
+    const filteredPastEvents = 
+        activeTag == "All" ? pastEvents : pastEvents.filter((event) => event.eventTag == activeTag);
+
+    return(
+        <>
+        <div className="flex flex-col items-center justify-center">
+            <div className="flex flex-col w-4/5">
+                <h1 className="text-3xl font-bold mb-6">
+                    Upcoming Events
+                </h1>
+            </div>
+            <div className="flex flex-wrap-reverse justify-end w-4/5 mb-3 gap-4">
+                <button onClick={() => setActiveTag("All")} //onClick calls setActiveTag function, useState updates - react rerenders - activeTag returns new value
+                    className={
+                        `w-fit text-sm text-gray-400 hover:text-white cursor-pointer 
+                        ${activeTag == "All" ? "text-white font-bold" : ""}`
+                    }>
+                    all
+                </button>
+                <button onClick={() => setActiveTag("Social")} 
+                    className={
+                        `w-fit text-sm text-gray-400 hover:text-white cursor-pointer 
+                        ${activeTag == "Social" ? "text-white font-bold" : ""}`
+                    }>
+                    social
+                </button>
+                <button onClick={() => setActiveTag("Competition")} 
+                    className={
+                        `w-fit text-sm text-gray-400 hover:text-white cursor-pointer 
+                        ${activeTag == "Competition" ? "text-white font-bold" : ""}`
+                    }>
+                    competition
+                </button>
+
+            </div>
+            {/* grid only containing upcoming events, using the upcomingEvents array */}
+            <div className="w-4/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {filteredUpcomingEvents.map((upcomingEvent) => (
+                    <EventsInfo key={upcomingEvent.eventName} element={upcomingEvent}/>
+                ))}
+            </div>
+            <div className="flex flex-col w-4/5">
+                <h1 className="text-3xl font-bold mt-12 mb-6">
+                    Past Events
+                </h1>
+            </div>
+            {/* grid only containing past events, using the pastEvents array */}
+            <div className="w-4/5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {filteredPastEvents.map((pastEvent) => (
+                    <EventsInfo key={pastEvent.eventName} element={pastEvent}/>
+                ))}
+            </div>
+        </div>
+        </>
+    )
+}

client/src/pages/Project-Team.tsx

@@ -19,6 +19,8 @@ export default function ProjectTeam() {
       <p className="pl-15 text-left">
       {/* make a link to your page here! */}
       <Link to="/alanna" className="text-white-500 text-lg hover:italic">Alanna Santoso</Link>
+      <br></br>
+      <Link to="/alex" className="text-white-500 text-lg hover:italic">Alex Lee</Link>
       <br></br><Link to="/terrence" className="text-white-500 text-lg hover:italic">Terrence Wu</Link>
       </p>
     </div>

client/src/pages/project-team/Alex.tsx

@@ -0,0 +1,86 @@
+import { FaInstagram, FaGithub, FaLinkedin, FaFilm, FaSpotify } from "react-icons/fa";
+import MemberStatsTable from "../../components/StatsTable";
+import bgImage from "../../assets/about-us/alexBackground.jpeg"; 
+import AlexImage from "../../assets/about-us/alex.jpeg";
+import { useEffect } from "react";
+
+export default function Alex(){
+    useEffect(() => {
+    document.title = "Alex(#1 Developer) | UMSA";
+    }, []);
+
+    return(
+        <>
+        <div className="relative min-h-screen w-full flex flex-col items-center justify-center rounded-lg">
+            {/* bg image */}
+            <div style={{ backgroundImage: `url(${bgImage})` }} className="absolute inset-0 bg-cover bg-center opacity-50 rounded-lg"></div>
+
+            {/* contents */}
+            <div className ="relative h-full max-w-175 flex flex-col">
+                {/* header */}
+                <div className="flex flex-col items-center mt-8">
+                    <h1 className="text-3xl font-sans font-bold mb-4">ALEXANDER THE GREAT</h1>
+                </div>
+
+                {/* main */}
+                <div className="md:grid grid-cols-3 flex flex-col w-full gap-10 items-center justify-center">
+                    {/* beautiful photo of me */}
+                    <img src={AlexImage} className="col-span-1 object-cover w-full max-w-sm md:max-w-none h-full min-h-75 rounded-2xl shadow-lg shadow-xl/30"/>
+
+                    {/* stats */}
+                    <div className="col-span-2 w-full max-w-sm md:max-w-none flex flex-col bg-gray-900 p-6 rounded-lg shadow-lg shadow-xl/30">
+
+                        <MemberStatsTable 
+                        stats={{
+                            fullName: "Alex Lee",
+                            age: 19,
+                            ethnicity: "Korean🇰🇷🇰🇷🇰🇷",
+                            year: "First year",
+                            degree: "compsci & IT management(im gonna drop this for Finance conjoint)",
+                            typingSpeed: "16 wpm",
+                            favouritePaper: "A4",
+                            favouriteFood: "3am maccas mish(Big Mac, 2 Cheeseburgers, medium fries, 6pcs chicken nugget with 2 sweet and sour sauce and medium Sprite zero)",
+
+                        }}
+                        />       
+                    </div>
+                </div>
+
+                {/* about me */}
+                <div className="w-full mb-32"> 
+                    <p className="text-sm mt-4 leading-relaxed">
+                        about me:<br/>
+                    </p>
+                    <a href="https://www.instagram.com/p/DXXXjSwxI9m" target="_blank" rel="noopener noreferrer"><u>https://www.instagram.com/p/DXXXjSwxI9m</u></a>
+                </div>
+
+                {/* social media section */}
+                <div className="w-full flex flex-col items-center pt-20 mb-2">
+                    <h1 className="text-3xl mb-1 font-bold italic text-left">✨Socials✨</h1>
+                    <div className="flex grid-cols-4 gap-4 mt-1">
+
+                        {/* the <a></a> tags are for creating links */}
+                        <a href="https://github.com/AiexProjects" target="_blank" rel="noopener noreferrer">
+                            <FaGithub className="text-3xl text-grey-300 hover:text-white" />
+                        </a>
+                        <a href="https://www.linkedin.com/in/alex-lee-571736358/" target="_blank" rel="noopener noreferrer">
+                            <FaLinkedin className="text-3xl text-grey-300 hover:text-white" />
+                        </a>
+                        <a href="https://www.instagram.com/aiex.lee/" target="_blank" rel="noopener noreferrer">
+                               <FaInstagram className="text-3xl text-grey-300 hover:text-white" />
+                        </a>
+                        <a href="https://letterboxd.com/alexree121/" target="_blank" rel="noopener noreferrer">
+                            <FaFilm className="text-3xl text-grey-300 hover:text-white" />
+                        </a>
+                        <a href="https://open.spotify.com/user/cq4c5m8ihueunpkfykn1l3s2f" target="_blank" rel="noopener noreferrer">
+                            <FaSpotify className="text-3xl text-grey-300 hover:text-white" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </>
+
+
+    )
+}