From f1d02c9f7706ade72249dd09e2d5bb5fb9020520 Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 26 Aug 2025 18:18:19 +1000 Subject: [PATCH 1/5] removed space above navbar for all pages --- frontend/src/components/Event/index.tsx | 2 +- frontend/src/components/Hamburger.tsx | 167 ++++++++++-------------- frontend/src/components/Layout.tsx | 2 +- frontend/src/components/PageBody.tsx | 2 +- frontend/src/pages/events.tsx | 2 +- frontend/src/pages/index.tsx | 1 - 6 files changed, 75 insertions(+), 101 deletions(-) diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index dce454e..7ec892a 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -5,7 +5,7 @@ import EventGallery from './EventsGallery'; const Event = () => { return ( -
+

EVENTS

diff --git a/frontend/src/components/Hamburger.tsx b/frontend/src/components/Hamburger.tsx index ff82444..deec602 100644 --- a/frontend/src/components/Hamburger.tsx +++ b/frontend/src/components/Hamburger.tsx @@ -1,103 +1,78 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; +import { Menu, X } from 'lucide-react'; import Link from 'next/link'; -import { motion } from 'framer-motion'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -export default function Hamburger() { - const [isOpenDropdown, setIsOpenDropdown] = useState(false); - - useEffect(() => { - const handleResize = () => { - setIsOpenDropdown(false); - }; - - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); +export default function SideMenu() { + const [isOpen, setIsOpen] = useState(false); return ( - - - - - - + + + {isOpen && ( + <> + {/* Backdrop overlay */} +
setIsOpen(false)} + /> + + {/* Sidebar */} +
+ + +
+
+ setIsOpen(false)}> +
+ About Us +
+ + + setIsOpen(false)}> +
+ Events +
+ + + setIsOpen(false)}> +
+ Resources +
+ + + setIsOpen(false)}> +
+ Sponsors +
+ + + setIsOpen(false)}> +
+ Contact Us +
+ + + setIsOpen(false)}> +
+ Merch +
+ +
+
+
+ + )} +
); } \ No newline at end of file diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index f684d22..53df3a9 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -4,7 +4,7 @@ import React from 'react'; const Layout = ({ children }: { children: React.ReactNode }) => { return ( -
+
diff --git a/frontend/src/components/PageBody.tsx b/frontend/src/components/PageBody.tsx index e63d960..f0a9d8e 100644 --- a/frontend/src/components/PageBody.tsx +++ b/frontend/src/components/PageBody.tsx @@ -3,7 +3,7 @@ import React from "react"; const PageBody = ({ children }: { children: React.ReactNode }) => { return (
-
+
{children}
diff --git a/frontend/src/pages/events.tsx b/frontend/src/pages/events.tsx index 831d33a..6a9e01c 100644 --- a/frontend/src/pages/events.tsx +++ b/frontend/src/pages/events.tsx @@ -11,7 +11,7 @@ export default function EventsPage() { Events | CSESoc UNSW -
+
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 7f243f2..ef95d31 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -13,7 +13,6 @@ export default function HomePage() {
-
From ab1506d09cebacfe314f3e34292a8c6d82132612 Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 26 Aug 2025 20:36:14 +1000 Subject: [PATCH 2/5] ran prettier formatting, added hamburger sidemenu --- frontend/components.json | 2 +- frontend/public/data/events.ts | 94 ++--- frontend/public/data/execs.ts | 42 +- frontend/public/data/portfolios.ts | 286 +++++++++---- frontend/public/data/socialInfos.ts | 2 +- frontend/public/data/sponsorInfos.ts | 6 +- .../src/components/About/AboutHomepage.tsx | 32 +- .../src/components/About/PortfolioCard.tsx | 16 +- .../src/components/About/PortfolioDisplay.tsx | 34 +- frontend/src/components/Contacts/index.tsx | 170 ++++---- frontend/src/components/Event/EventsBrief.tsx | 15 +- .../src/components/Event/EventsCarousel.tsx | 23 +- .../src/components/Event/EventsGallery.tsx | 19 +- frontend/src/components/Event/index.tsx | 90 ++--- frontend/src/components/Footer.tsx | 11 +- frontend/src/components/Hamburger.tsx | 177 +++++--- frontend/src/components/Landing/index.tsx | 12 +- frontend/src/components/Layout.tsx | 5 +- frontend/src/components/Navbar.tsx | 16 +- frontend/src/components/PageBody.tsx | 8 +- frontend/src/components/PageTitle.tsx | 6 +- .../components/Sponsors/SponsorCarousel.tsx | 20 +- .../src/components/Sponsors/SponsorModal.tsx | 41 +- frontend/src/components/Sponsors/index.tsx | 4 +- frontend/src/components/Stats.tsx | 377 +++++++++++------- frontend/src/components/Terminal.tsx | 77 ++-- frontend/src/components/ui/dropdown-menu.tsx | 107 +++-- frontend/src/lib/utils.ts | 6 +- frontend/src/pages/404.tsx | 1 - frontend/src/pages/about/constitution.tsx | 40 +- frontend/src/pages/about/election-guide.tsx | 112 +++--- .../pages/about/execs-directors-subcoms.tsx | 35 +- frontend/src/pages/about/faqs.tsx | 61 +-- frontend/src/pages/about/index.tsx | 113 ++++-- frontend/src/pages/about/our-history.tsx | 49 ++- frontend/src/pages/contact-us.tsx | 2 +- frontend/src/pages/events.tsx | 9 +- frontend/src/pages/index.tsx | 4 +- frontend/src/pages/resources.tsx | 2 +- frontend/src/pages/sponsors.tsx | 26 +- frontend/src/styles/globals.css | 31 +- frontend/src/typing/types.d.ts | 2 +- frontend/tailwind.config.ts | 6 +- frontend/tsconfig.json | 20 +- 44 files changed, 1299 insertions(+), 912 deletions(-) diff --git a/frontend/components.json b/frontend/components.json index 90e9bf9..992c230 100644 --- a/frontend/components.json +++ b/frontend/components.json @@ -18,4 +18,4 @@ "hooks": "@/hooks" }, "iconLibrary": "lucide" -} \ No newline at end of file +} diff --git a/frontend/public/data/events.ts b/frontend/public/data/events.ts index 9aa3c29..79497b2 100644 --- a/frontend/public/data/events.ts +++ b/frontend/public/data/events.ts @@ -10,70 +10,70 @@ export type eventInfo = { export const events: eventInfo[] = [ { - title: "Startup Spotlight Barbeque", - startTime: "Wednesday, 11 June 2025 12:00:00", - endTime: "Wednesday, 11 June 2025 14:00:00", - location: "John Lions Garden", - image: "/images/events/startup_spotlight_bbq.jpg", - link: "https://www.facebook.com/events/1018289650496840" + title: 'Startup Spotlight Barbeque', + startTime: 'Wednesday, 11 June 2025 12:00:00', + endTime: 'Wednesday, 11 June 2025 14:00:00', + location: 'John Lions Garden', + image: '/images/events/startup_spotlight_bbq.jpg', + link: 'https://www.facebook.com/events/1018289650496840' }, { title: "Mister Maker's Magic Table", - startTime: "Wednesday, 18 June 2025 13:00:00", - endTime: "Wednesday, 18 June 2025 15:00:00", - location: "UNSW Quad", - image: "/images/events/mister_makers_magic_table.jpg", - link: "https://www.facebook.com/events/1224929275882537" + startTime: 'Wednesday, 18 June 2025 13:00:00', + endTime: 'Wednesday, 18 June 2025 15:00:00', + location: 'UNSW Quad', + image: '/images/events/mister_makers_magic_table.jpg', + link: 'https://www.facebook.com/events/1224929275882537' }, { - title: "Industry Mentoring Program Launch", - startTime: "Wednesday, 18 June 2025 18:00:00", - endTime: "Wednesday, 18 June 2025 20:00:00", - location: "Rex Vowels Theatre", - image: "/images/events/industry_mentoring_program.jpg", - link: "https://www.facebook.com/events/1776932683235783" + title: 'Industry Mentoring Program Launch', + startTime: 'Wednesday, 18 June 2025 18:00:00', + endTime: 'Wednesday, 18 June 2025 20:00:00', + location: 'Rex Vowels Theatre', + image: '/images/events/industry_mentoring_program.jpg', + link: 'https://www.facebook.com/events/1776932683235783' }, { - title: "Rookie Code Rumble", - startTime: "Friday, 30 May 2025 18:00:00", - endTime: "Friday, 6 June 2025 23:59:59", - location: "Online (kick-off location TBD)", - image: "/images/events/rookie_code_rumble.jpg", - link: "https://www.facebook.com/events/1062484559164505" + title: 'Rookie Code Rumble', + startTime: 'Friday, 30 May 2025 18:00:00', + endTime: 'Friday, 6 June 2025 23:59:59', + location: 'Online (kick-off location TBD)', + image: '/images/events/rookie_code_rumble.jpg', + link: 'https://www.facebook.com/events/1062484559164505' } ]; export const previousEvents: eventInfo[] = [ { - title: "Brawl Stars Tournament", - startTime: "Thursday, 29 May 2025 20:00:00", - endTime: "Thursday, 29 May 2025 22:30:00", - location: "Online via Discord", - image: "/images/events/brawl_stars.jpg", - link: "https://www.facebook.com/events/1251081513377441" + title: 'Brawl Stars Tournament', + startTime: 'Thursday, 29 May 2025 20:00:00', + endTime: 'Thursday, 29 May 2025 22:30:00', + location: 'Online via Discord', + image: '/images/events/brawl_stars.jpg', + link: 'https://www.facebook.com/events/1251081513377441' }, { - title: "Flower Exchange", - startTime: "Wednesday, 23 Apr 2025 13:00:00", - endTime: "Wednesday, 23 Apr 2025 15:00:00", - location: "The Quad, UNSW", - image: "/images/events/flower_exchange.jpg", - link: "https://www.facebook.com/events/623535984011063" + title: 'Flower Exchange', + startTime: 'Wednesday, 23 Apr 2025 13:00:00', + endTime: 'Wednesday, 23 Apr 2025 15:00:00', + location: 'The Quad, UNSW', + image: '/images/events/flower_exchange.jpg', + link: 'https://www.facebook.com/events/623535984011063' }, { - title: "All the Stars Pubcrawl", - startTime: "Friday, 28 Mar 2025 19:00:00", - endTime: "Friday, 28 Mar 2025 23:30:00", - location: "Meet at Hyde Park", - image: "/images/events/all_the_stars.jpg", - link: "https://www.facebook.com/events/1171496917957222" + title: 'All the Stars Pubcrawl', + startTime: 'Friday, 28 Mar 2025 19:00:00', + endTime: 'Friday, 28 Mar 2025 23:30:00', + location: 'Meet at Hyde Park', + image: '/images/events/all_the_stars.jpg', + link: 'https://www.facebook.com/events/1171496917957222' }, { - title: "Wheelchair Basketball Tournament", - startTime: "Sunday, 13 Apr 2025 13:00:00", - endTime: "Sunday, 13 Apr 2025 16:00:00", - location: "UNSW Village Green (Multi-purpose caged courts near Sam Cracknell Pavilion)", - image: "/images/events/wheelchair_basketball.jpg", - link: "https://www.facebook.com/events/3852672894949394" + title: 'Wheelchair Basketball Tournament', + startTime: 'Sunday, 13 Apr 2025 13:00:00', + endTime: 'Sunday, 13 Apr 2025 16:00:00', + location: 'UNSW Village Green (Multi-purpose caged courts near Sam Cracknell Pavilion)', + image: '/images/events/wheelchair_basketball.jpg', + link: 'https://www.facebook.com/events/3852672894949394' } ]; diff --git a/frontend/public/data/execs.ts b/frontend/public/data/execs.ts index 0dd3377..39ac4a4 100644 --- a/frontend/public/data/execs.ts +++ b/frontend/public/data/execs.ts @@ -1,45 +1,45 @@ // TODO: Combine with portfolios.ts export type Exec = { - name: string, - role: string, + name: string; + role: string; }; export const EXECS: Exec[] = [ { - name: "Joyce He", - role: "Co-President", + name: 'Joyce He', + role: 'Co-President' }, { - name: "Susie Xia", - role: "Co-President", + name: 'Susie Xia', + role: 'Co-President' }, { - name: "Zitian Qin", - role: "Secretary", + name: 'Zitian Qin', + role: 'Secretary' }, { - name: "Lisa Lin", - role: "Treasurer", + name: 'Lisa Lin', + role: 'Treasurer' }, { - name: "Leo Maisnam", - role: "Arc Delegate", + name: 'Leo Maisnam', + role: 'Arc Delegate' }, { - name: "Aryan Chauhan", - role: "Grievance, Equity, Diversity and Inclusion Officer", + name: 'Aryan Chauhan', + role: 'Grievance, Equity, Diversity and Inclusion Officer' }, { - name: "Emma Nguyen", - role: "Vice President (External)", + name: 'Emma Nguyen', + role: 'Vice President (External)' }, { - name: "Jordan Djamaan", - role: "Vice President (Internal)", + name: 'Jordan Djamaan', + role: 'Vice President (Internal)' }, { - name: "JJ Roberts-White", - role: "Vice President (Technical)", - }, + name: 'JJ Roberts-White', + role: 'Vice President (Technical)' + } ]; diff --git a/frontend/public/data/portfolios.ts b/frontend/public/data/portfolios.ts index f810131..8d4a5fb 100644 --- a/frontend/public/data/portfolios.ts +++ b/frontend/public/data/portfolios.ts @@ -1,132 +1,256 @@ export type PortfolioData = { - name: string, - description: string, - members: PortfolioMember[], + name: string; + description: string; + members: PortfolioMember[]; }; export type PortfolioMember = { - name: string, - role: PortfolioRole, + name: string; + role: PortfolioRole; imageUrl: string; -} +}; export enum PortfolioRole { - DIRECTOR = "Director", - SUBCOM = "Subcommittee", + DIRECTOR = 'Director', + SUBCOM = 'Subcommittee' } export const PORTFOLIOS: PortfolioData[] = [ { - name: "Careers", - description: "Facilitates industry sponsor relations, as well as creating events focused on interpersonal development and networking.", + name: 'Careers', + description: + 'Facilitates industry sponsor relations, as well as creating events focused on interpersonal development and networking.', members: [ - { name: "Nathan Lin", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Michael Liu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Angel Yu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Nathan Lin', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Michael Liu', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { name: 'Angel Yu', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' } + ] }, { - name: "Events", - description: "Plans a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!", + name: 'Events', + description: + 'Plans a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!', members: [ - { name: "Lee Torr Chin", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Ethan Gu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Kayla Lee", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Lee Torr Chin', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { name: 'Ethan Gu', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' }, + { name: 'Kayla Lee', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' } + ] }, { - name: "Outreach", - description: "Creates inclusive and approachable events targeted towards overlooked and underrepresented students.", + name: 'Outreach', + description: + 'Creates inclusive and approachable events targeted towards overlooked and underrepresented students.', members: [ - { name: "Qiandai Huang", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Hayden Ho", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Liem Phan", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Qiandai Huang', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Hayden Ho', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { name: 'Liem Phan', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' } + ] }, { - name: "Socials", - description: "Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!", + name: 'Socials', + description: + 'Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!', members: [ - { name: "Patrick Sun", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Makeen Alaeddin", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "April Choi", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Patrick Sun', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Makeen Alaeddin', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'April Choi', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Creative", - description: "Lays the groundwork for CSESoc's aesthetic branding, providing an outlet for creative expression.", + name: 'Creative', + description: + "Lays the groundwork for CSESoc's aesthetic branding, providing an outlet for creative expression.", members: [ - { name: "Jasmine Chiu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Louis Policarpio", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Ralph Capricho", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Jasmine Chiu', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Louis Policarpio', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Ralph Capricho', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "HR", - description: "Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.", + name: 'HR', + description: + 'Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.', members: [ - { name: "Darien Trinh", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Isabella Tan", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Jenny Tran", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Darien Trinh', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Isabella Tan', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Jenny Tran', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Marketing", - description: "Promotes CSESoc on our social media as well as creating supplementary marketing material to engage our audience.", + name: 'Marketing', + description: + 'Promotes CSESoc on our social media as well as creating supplementary marketing material to engage our audience.', members: [ - { name: "Sienna Gunawan", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Vedant Vaghela", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Joanna Wong", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Sienna Gunawan', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Vedant Vaghela', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Joanna Wong', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Media", - description: "Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.", + name: 'Media', + description: + 'Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.', members: [ - { name: "Hae Kim", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Bella Li", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Christine Park", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { name: 'Hae Kim', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' }, + { name: 'Bella Li', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' }, + { + name: 'Christine Park', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Competitions", - description: "Organises a variety of contests to empower students beyond coursework and allow them meet others.", + name: 'Competitions', + description: + 'Organises a variety of contests to empower students beyond coursework and allow them meet others.', members: [ - { name: "Luke Zeng", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Xuanyu Liu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Valerie Chan", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Luke Zeng', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Xuanyu Liu', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Valerie Chan', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Education", - description: "Teaches interesting technical skills to the community, whether that's through workshops, articles, or programs.", + name: 'Education', + description: + "Teaches interesting technical skills to the community, whether that's through workshops, articles, or programs.", members: [ - { name: "Eric Xu", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Erica Lin", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Andrew Zhang", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { name: 'Eric Xu', role: PortfolioRole.DIRECTOR, imageUrl: '/images/members/blank-pfp.png' }, + { + name: 'Erica Lin', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Andrew Zhang', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "IT", - description: "Oversees the development of the CSESoc's internal projects and plays an active role in the technical aspects of our society.", + name: 'IT', + description: + "Oversees the development of the CSESoc's internal projects and plays an active role in the technical aspects of our society.", members: [ - { name: "Dylan Zhang", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Justine Kim", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Dylan Zhang', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Justine Kim', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Digital", - description: "Expands CSESoc's vibrant community into the virtual world, running online events and managing our online spaces to make sure everyone feels welcomed in our community.", + name: 'Digital', + description: + "Expands CSESoc's vibrant community into the virtual world, running online events and managing our online spaces to make sure everyone feels welcomed in our community.", members: [ - { name: "Jasmine Chia", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - { name: "Aaron Tian", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, - ], + { + name: 'Jasmine Chia', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + }, + { + name: 'Aaron Tian', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } + ] }, { - name: "Platforms", - description: "Maintains the infrastructure underlying the CSESoc IT Portfolio Projects.", + name: 'Platforms', + description: 'Maintains the infrastructure underlying the CSESoc IT Portfolio Projects.', members: [ - { name: "Dominic Cheung", role: PortfolioRole.DIRECTOR, imageUrl: "/images/members/blank-pfp.png" }, + { + name: 'Dominic Cheung', + role: PortfolioRole.DIRECTOR, + imageUrl: '/images/members/blank-pfp.png' + } ] } ]; diff --git a/frontend/public/data/socialInfos.ts b/frontend/public/data/socialInfos.ts index f8b3957..c46c53e 100644 --- a/frontend/public/data/socialInfos.ts +++ b/frontend/public/data/socialInfos.ts @@ -3,7 +3,7 @@ export type socialInfo = { src: string; alt: string; }; - + export const socialLinks: socialInfo[] = [ { href: 'https://bit.ly/CSESocDiscord', diff --git a/frontend/public/data/sponsorInfos.ts b/frontend/public/data/sponsorInfos.ts index 49bfadd..b2ce01e 100644 --- a/frontend/public/data/sponsorInfos.ts +++ b/frontend/public/data/sponsorInfos.ts @@ -81,7 +81,7 @@ export const goldLinks: sponsorInfo[] = [ alt: 'SafetyCulture logo', description: 'Get to the root cause of workplace trends with total visibility across your organization. Use data from completed inspections, reported incidents, sensors, and asset history to keep workers safe, and prevent things from happening in the first place.' - }, + } ]; export const silverLinks: sponsorInfo[] = [ @@ -91,7 +91,7 @@ export const silverLinks: sponsorInfo[] = [ svg: '/assets/quantium_logo.svg', alt: 'Quantium logo', description: - "We combine the best of human and artificial intelligence to power possibilities for individuals, organisations and society. Through the application of world leading, advanced analytics solutions, we help our clients solve their most complex problems." + 'We combine the best of human and artificial intelligence to power possibilities for individuals, organisations and society. Through the application of world leading, advanced analytics solutions, we help our clients solve their most complex problems.' }, { name: 'Optiver', @@ -163,5 +163,5 @@ export const silverLinks: sponsorInfo[] = [ alt: 'revolutioniseSport logo', description: 'revolutioniseSPORT is an online management platform for sports of all shapes and sizes.' - }, + } ]; diff --git a/frontend/src/components/About/AboutHomepage.tsx b/frontend/src/components/About/AboutHomepage.tsx index 4492b71..1492b19 100644 --- a/frontend/src/components/About/AboutHomepage.tsx +++ b/frontend/src/components/About/AboutHomepage.tsx @@ -1,4 +1,4 @@ -import Image from "next/image"; +import Image from 'next/image'; export default function AboutHomePage() { return ( @@ -29,22 +29,30 @@ export default function AboutHomePage() {
{/* RIGHT SIDE */}

- We are one of the largest and most active societies at UNSW, and {" "} - the largest computing society in the southern hemisphere. -

- CSESoc comprises {" "} - over 16k members - {" "}spanning across various degrees including Computer Science, - Software Engineering, Bioinformatics and Computer Engineering. -

- We are here to fulfil the social, personal and professional needs of CSE students, - and promote computing through a variety of forms. + We are one of the largest and most active societies at UNSW, and{' '} + + the largest computing society in the southern hemisphere + + . +
+
+ CSESoc comprises + over 16k members + {' '} + spanning across various degrees including Computer Science, Software Engineering, + Bioinformatics and Computer Engineering. +
+
+ We are here to fulfil the social, personal and professional needs of CSE students, and + promote computing through a variety of forms.

diff --git a/frontend/src/components/About/PortfolioCard.tsx b/frontend/src/components/About/PortfolioCard.tsx index 7160a1b..642f571 100644 --- a/frontend/src/components/About/PortfolioCard.tsx +++ b/frontend/src/components/About/PortfolioCard.tsx @@ -1,20 +1,18 @@ // import Image from 'next/image'; -import { PortfolioData } from "@/../public/data/portfolios"; +import { PortfolioData } from '@/../public/data/portfolios'; interface PortfolioCardProps { - portfolio: PortfolioData, + portfolio: PortfolioData; } // NOTE: Profile pictures can be added in the future const PortfolioCard = ({ portfolio }: PortfolioCardProps) => { return (
-

- {portfolio.description} -

+

{portfolio.description}

- {portfolio.members.map(member => ( + {portfolio.members.map((member) => (
{/* { width={150} height={150} /> */} - +

{member.name}

{member.role}

@@ -32,6 +30,6 @@ const PortfolioCard = ({ portfolio }: PortfolioCardProps) => {
); -} +}; -export default PortfolioCard; \ No newline at end of file +export default PortfolioCard; diff --git a/frontend/src/components/About/PortfolioDisplay.tsx b/frontend/src/components/About/PortfolioDisplay.tsx index 433c8b1..78d2644 100644 --- a/frontend/src/components/About/PortfolioDisplay.tsx +++ b/frontend/src/components/About/PortfolioDisplay.tsx @@ -1,22 +1,24 @@ -import { useState } from "react"; -import PortfolioCard from "./PortfolioCard"; -import { PORTFOLIOS } from "@/../public/data/portfolios"; +import { useState } from 'react'; +import PortfolioCard from './PortfolioCard'; +import { PORTFOLIOS } from '@/../public/data/portfolios'; const PortfolioDisplay = () => { - const [selectedPortfolio, setSelectedPortfolio] = useState("Careers"); - - const names = PORTFOLIOS.map(port => port.name); + const [selectedPortfolio, setSelectedPortfolio] = useState('Careers'); + + const names = PORTFOLIOS.map((port) => port.name); return (
-
+ [&::-webkit-scrollbar-thumb]:bg-gray-300" + > {names.map((name) => ( - ))}
- - port.name === selectedPortfolio) ?? PORTFOLIOS[0]} /> + + port.name === selectedPortfolio) ?? PORTFOLIOS[0]} + />
- ) -} + ); +}; -export default PortfolioDisplay; \ No newline at end of file +export default PortfolioDisplay; diff --git a/frontend/src/components/Contacts/index.tsx b/frontend/src/components/Contacts/index.tsx index ef96541..453b634 100644 --- a/frontend/src/components/Contacts/index.tsx +++ b/frontend/src/components/Contacts/index.tsx @@ -8,95 +8,91 @@ const socialsBoxStyling = const Contacts = () => { return ( ); }; diff --git a/frontend/src/components/Event/EventsBrief.tsx b/frontend/src/components/Event/EventsBrief.tsx index 65105eb..e64d875 100644 --- a/frontend/src/components/Event/EventsBrief.tsx +++ b/frontend/src/components/Event/EventsBrief.tsx @@ -9,18 +9,19 @@ const EventBrief = () => {

UPCOMING EVENTS

- {events.length !== 0 ? - : + {events.length !== 0 ? ( + + ) : (

No upcoming events... check back here later!

- } + )}
diff --git a/frontend/src/components/Event/EventsCarousel.tsx b/frontend/src/components/Event/EventsCarousel.tsx index df08091..8d74395 100644 --- a/frontend/src/components/Event/EventsCarousel.tsx +++ b/frontend/src/components/Event/EventsCarousel.tsx @@ -6,20 +6,20 @@ export default function EventsCarousel() { const responsive = { superLargeDesktop: { breakpoint: { max: 4000, min: 1024 }, - items: 3, + items: 3 }, desktop: { breakpoint: { max: 1024, min: 768 }, - items: 3, + items: 3 }, tablet: { breakpoint: { max: 768, min: 464 }, - items: 2, + items: 2 }, mobile: { breakpoint: { max: 464, min: 0 }, - items: 1, - }, + items: 1 + } }; return ( @@ -36,7 +36,12 @@ export default function EventsCarousel() { > {events.map((event, index) => ( @@ -69,7 +72,7 @@ const formatEventDate = (startTime: string, endTime: string): string => { }; const sameDay = startDate.toDateString() === endDate.toDateString(); - + if (sameDay) { return formatDate(startDate); // Return single date in dd/mm/yyyy } else { diff --git a/frontend/src/components/Event/EventsGallery.tsx b/frontend/src/components/Event/EventsGallery.tsx index 83738be..87d204f 100644 --- a/frontend/src/components/Event/EventsGallery.tsx +++ b/frontend/src/components/Event/EventsGallery.tsx @@ -8,19 +8,18 @@ const EventGallery = () => { return (
- - {event.title} + + {event.title}

{event.title}

{event.location}

-

- {formatEventDate(event.startTime, event.endTime)} -

+

{formatEventDate(event.startTime, event.endTime)}

 @@ -45,4 +44,4 @@ const formatEventDate = (startTime: string, endTime: string): string => { } else { return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`; } -}; \ No newline at end of file +}; diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index 7ec892a..be908b8 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -1,45 +1,45 @@ -import React from 'react'; -import { events } from '../../../public/data/events'; -import EventsCarousel from './EventsCarousel'; -import EventGallery from './EventsGallery'; - -const Event = () => { - return ( -
-
-

EVENTS

-
-
-
-

- We run a wide-variety of events for fun, learning new skills and careers. For full - listings, check out our {' '} - Facebook page! -

-
-
-
-

- Explore upcoming events -

-
- {events.length !== 0 ? - : -
-

No upcoming events... check back here later!

-
- } -
-

- Previous events -

-
- -
- ); -}; - -export default Event; +import React from 'react'; +import { events } from '../../../public/data/events'; +import EventsCarousel from './EventsCarousel'; +import EventGallery from './EventsGallery'; + +const Event = () => { + return ( +
+
+

EVENTS

+
+
+
+

+ We run a wide-variety of events for fun, learning new skills and careers. For full + listings, check out our{' '} + + Facebook page + + ! +

+
+
+
+

Explore upcoming events

+
+ {events.length !== 0 ? ( + + ) : ( +
+

No upcoming events... check back here later!

+
+ )} +
+

Previous events

+
+ +
+ ); +}; + +export default Event; diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index dfd66f1..380ab10 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -9,7 +9,12 @@ const Footer = () => {
- CSESoc Logo + CSESoc Logo Ollie {
B03 CSE Building K17, UNSW
- csesoc@csesoc.org.au + + csesoc@csesoc.org.au +

© 2025 — CSESoc UNSW

diff --git a/frontend/src/components/Hamburger.tsx b/frontend/src/components/Hamburger.tsx index deec602..e006612 100644 --- a/frontend/src/components/Hamburger.tsx +++ b/frontend/src/components/Hamburger.tsx @@ -1,78 +1,129 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; +import ReactDOM from 'react-dom'; import { Menu, X } from 'lucide-react'; import Link from 'next/link'; -export default function SideMenu() { +const Hamburger = () => { const [isOpen, setIsOpen] = useState(false); - return ( -
- + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'scroll'; + } + + return () => { + document.body.style.overflow = 'scroll'; + }; + }, [isOpen]); + + useEffect(() => { + const handleEscape = (e: KeyboardEvent) => { + if (e.key === 'Escape') setIsOpen(false); + }; + + if (isOpen) document.addEventListener('keydown', handleEscape); + + return () => { + document.removeEventListener('keydown', handleEscape); + }; + }, [isOpen, setIsOpen]); + + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'scroll'; + } + + return () => { + document.body.style.overflow = 'scroll'; + }; + }, [isOpen]); + + // Portal renders the backdrop at document.body level + // Hence, instead of showing just at nav, it shows over all components + const backdrop = + isOpen && typeof document !== 'undefined' + ? ReactDOM.createPortal( +
+ {/* Backdrop */} +
setIsOpen(false)} /> + + {/* Sidebar */} +
+ - {isOpen && ( - <> - {/* Backdrop overlay */} -
setIsOpen(false)} - /> - - {/* Sidebar */} -
- - -
-
- setIsOpen(false)}> -
- About Us -
+
+ setIsOpen(false)} + > + About Us - - setIsOpen(false)}> -
- Events -
+ + setIsOpen(false)} + > + Events - - setIsOpen(false)}> -
- Resources -
+ + setIsOpen(false)} + > + Resources - - setIsOpen(false)}> -
- Sponsors -
+ + setIsOpen(false)} + > + Sponsors - - setIsOpen(false)}> -
- Contact Us -
+ + setIsOpen(false)} + > + Contact Us - - setIsOpen(false)}> -
- Merch -
+ + setIsOpen(false)} + > + Merch
-
- - )} -
+
, + document.body + ) + : null; + + return ( + <> + + {backdrop} + ); -} \ No newline at end of file +}; + +export default Hamburger; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index 1eeff62..7005ffe 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -6,7 +6,6 @@ const Landing = () => { className="flex flex-col min-h-screen justify-end py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden" id="landing" > -
@@ -19,13 +18,14 @@ const Landing = () => {

{'

'}

We are the principal representative body for{' '} - UNSW computing - - {' '}students. + {' '} + students.

{''}

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 53df3a9..429a928 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -6,12 +6,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return (
- -
+ +
{children}
-
); }; diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 6c43a3b..c164813 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -7,9 +7,11 @@ import Terminal from './Terminal'; const Navbar = () => { const [path, setPath] = useState([]); useEffect(() => { - const pathSegments: string[] | undefined = window.location.pathname.split('/').filter(segment => segment); + const pathSegments: string[] | undefined = window.location.pathname + .split('/') + .filter((segment) => segment); if (pathSegments === undefined) setPath([]); - else setPath(pathSegments.map(segment => segment.toUpperCase())); + else setPath(pathSegments.map((segment) => segment.toUpperCase())); }, []); return ( @@ -27,10 +29,12 @@ const Navbar = () => {

csesoc@unsw : - ~{path.map(segment => '/' + segment.toLowerCase())} + + ~{path.map((segment) => '/' + segment.toLowerCase())} + $ {/* The interactive terminal that allows changing pages using 'cd' */} - +

@@ -50,7 +54,7 @@ const Navbar = () => {
{'//'} contact us
- + Merchandise Store Icon {
-
+
); }; diff --git a/frontend/src/components/PageBody.tsx b/frontend/src/components/PageBody.tsx index f0a9d8e..4d9a3c0 100644 --- a/frontend/src/components/PageBody.tsx +++ b/frontend/src/components/PageBody.tsx @@ -1,13 +1,11 @@ -import React from "react"; +import React from 'react'; const PageBody = ({ children }: { children: React.ReactNode }) => { return (
-
- {children} -
+
{children}
); -} +}; export default PageBody; diff --git a/frontend/src/components/PageTitle.tsx b/frontend/src/components/PageTitle.tsx index 0ea158f..cd40bb7 100644 --- a/frontend/src/components/PageTitle.tsx +++ b/frontend/src/components/PageTitle.tsx @@ -3,7 +3,7 @@ const PageTitle = ({ title }: { title: string }) => {

{title}

- ) -} + ); +}; -export default PageTitle; \ No newline at end of file +export default PageTitle; diff --git a/frontend/src/components/Sponsors/SponsorCarousel.tsx b/frontend/src/components/Sponsors/SponsorCarousel.tsx index ea13c4e..a256e47 100644 --- a/frontend/src/components/Sponsors/SponsorCarousel.tsx +++ b/frontend/src/components/Sponsors/SponsorCarousel.tsx @@ -1,4 +1,4 @@ -import { diamondLinks, goldLinks } from "@/../public/data/sponsorInfos"; +import { diamondLinks, goldLinks } from '@/../public/data/sponsorInfos'; import Carousel from 'react-multi-carousel'; import 'react-multi-carousel/lib/styles.css'; @@ -6,20 +6,20 @@ export default function SponsorCarousel() { const responsive = { superLargeDesktop: { breakpoint: { max: 4000, min: 1024 }, - items: 3, + items: 3 }, desktop: { breakpoint: { max: 1024, min: 768 }, - items: 3, + items: 3 }, tablet: { breakpoint: { max: 768, min: 464 }, - items: 2, + items: 2 }, mobile: { breakpoint: { max: 464, min: 0 }, - items: 1, - }, + items: 1 + } }; // Show diamond and gold sponsors in carousel @@ -39,13 +39,9 @@ export default function SponsorCarousel() { > {sponsors.map((sponsor, index) => (
- {sponsor.alt} + {sponsor.alt}
))} ); -} \ No newline at end of file +} diff --git a/frontend/src/components/Sponsors/SponsorModal.tsx b/frontend/src/components/Sponsors/SponsorModal.tsx index a28c1b1..a6062c2 100644 --- a/frontend/src/components/Sponsors/SponsorModal.tsx +++ b/frontend/src/components/Sponsors/SponsorModal.tsx @@ -1,33 +1,33 @@ -import { X } from "lucide-react" -import { useEffect } from "react" -import type { sponsorInfo } from "@/../public/data/sponsorInfos" +import { X } from 'lucide-react'; +import { useEffect } from 'react'; +import type { sponsorInfo } from '@/../public/data/sponsorInfos'; export default function SponsorModal({ sponsorInfo, - setFalse, + setFalse }: { - sponsorInfo: sponsorInfo | null - setFalse: () => void + sponsorInfo: sponsorInfo | null; + setFalse: () => void; }) { // Close modal with Escape key useEffect(() => { const handleEscKey = (event: KeyboardEvent) => { - if (event.key === "Escape") setFalse() - } + if (event.key === 'Escape') setFalse(); + }; - window.addEventListener("keydown", handleEscKey) - return () => window.removeEventListener("keydown", handleEscKey) - }, [setFalse]) + window.addEventListener('keydown', handleEscKey); + return () => window.removeEventListener('keydown', handleEscKey); + }, [setFalse]); if (sponsorInfo === null) { - return null + return null; } return (
{ - if (e.target === e.currentTarget) setFalse() + if (e.target === e.currentTarget) setFalse(); }} > @@ -100,7 +104,12 @@ export default function SponsorModal({ viewBox="0 0 24 24" stroke="currentColor" > - + Close @@ -108,5 +117,5 @@ export default function SponsorModal({
- ) + ); } diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index 14ebb1f..e73cff2 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -13,9 +13,7 @@ const Sponsors = () => {

OUR SPONSORS

-
+
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx index 087050c..c3e067f 100644 --- a/frontend/src/components/Stats.tsx +++ b/frontend/src/components/Stats.tsx @@ -1,92 +1,144 @@ import Image from 'next/image'; -import { motion, useAnimationControls } from "framer-motion" +import { motion, useAnimationControls } from 'framer-motion'; import { useEffect } from 'react'; const Stats = () => { - const r = 80; - const controls = useAnimationControls() + const r = 80; + const controls = useAnimationControls(); - const progress = { - hidden: { pathLength: 0, opacity: 0 }, - visible: { - pathLength: 0.7, - opacity: 1, - transition: { - pathLength: { type: "spring", duration: 1.5, bounce: 0 }, - opacity: { duration: 0.05 } - } - } + const progress = { + hidden: { pathLength: 0, opacity: 0 }, + visible: { + pathLength: 0.7, + opacity: 1, + transition: { + pathLength: { type: 'spring', duration: 1.5, bounce: 0 }, + opacity: { duration: 0.05 } + } } + }; - useEffect(() => { - controls.start("hidden") - controls.start("visible") - controls.stop(); - }, []); + useEffect(() => { + controls.start('hidden'); + controls.start('visible'); + controls.stop(); + }, []); - const revert = async() => { - await controls.start("hidden") - return await controls.start("visible") - } + const revert = async () => { + await controls.start('hidden'); + return await controls.start('visible'); + }; return (
-
- CSESoc Icon - - - - -

CSESoc

-

unsw-computer-science-engineering-society

-
-
{revert()}}> - People - 433 - total members -
-
{revert()}}> - People - 53 - events held -
-
{revert()}}> - People - 343 - subcom -
-
{revert()}}> - People - 343 - subcom -
-{/*
+
+ CSESoc Icon + + + + +

CSESoc

+

unsw-computer-science-engineering-society

+
+
{ + revert(); + }} + > + People + 433 + total members +
+
{ + revert(); + }} + > + People + + 53 + + + events held + +
+
{ + revert(); + }} + > + People + 343 + subcom +
+
{ + revert(); + }} + > + People + 343 + subcom +
+ {/*
53
People @@ -101,8 +153,8 @@ const Stats = () => { People 52 events held
*/} -
-{/*
+
+ {/*
CSESoc Icon
@@ -113,7 +165,7 @@ const Stats = () => {
*/} -{/*
+ {/*
Location Sydney, Australia
@@ -138,70 +190,111 @@ const Stats = () => {

Events held

*/} - -
-
-
-
- People - CSESoc is the principal representative body for UNSW computing students. -
-
- Location - Sydney, Australia -
-
- Mail - info@csesoc.org.au -
-
+
+
+
+
+ People + + CSESoc is the principal representative body for UNSW computing students. + +
+
+ Location + Sydney, Australia +
+
+ Mail + info@csesoc.org.au +
+
-
-
-
-

- csesoc/README.md -

-

- 1   CSESoc is one of the biggest and most active societies at
- 2   UNSW, catering to over 3500 CSE students spanning across
- 3   degrees in Computer Science, Software Engineering,
- 4   Bioinformatics and Computer Engineering. -

- 5   We are here to fulfil the social, personal and professional
- 6   needs of CSE students, and promote computing through a
- 7   variety of forms. -

-
-
- - - -
-
-
-
-

- execs-directors-subcoms.md -

-

- 1   100+ events (35+ careers related revents)
- 2   41 sponsors
- 3   480 000 discord messages
- 4   200+ volunteers.
- 5   Tiktok: 27.2k views, 2k+ likes
- 6   Podcast: 10k downloads, 600+ average viewers
- 7   500+ high school students reached. -

-
-
- - - -
-
+
+
+
+

+ csesoc/README.md +

+

+ 1    + + CSESoc is one of the biggest and most active societies at + +
+ 2   UNSW, catering to over 3500 CSE students spanning across +
+ 3   degrees in Computer Science, Software Engineering, +
+ 4   Bioinformatics and Computer Engineering. +
+
+ 5   We are here to fulfil the social, personal and professional +
+ 6   needs of CSE students, and promote computing through a
7 +   variety of forms. +

+
+
+ + + +
+
+
+
+

+ execs-directors-subcoms.md +

+

+ 1    + 100+ events (35+ careers related revents) +
+ 2   41 sponsors +
+ 3   480 000 discord messages +
+ 4   200+ volunteers. +
+ 5   Tiktok: 27.2k views, 2k+ likes +
+ 6   Podcast: 10k downloads, 600+ average viewers +
7   500+ high school students reached. +

+
+
+ + + +
+
); }; diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx index e143021..b93b9b8 100644 --- a/frontend/src/components/Terminal.tsx +++ b/frontend/src/components/Terminal.tsx @@ -1,8 +1,8 @@ -import { useRouter } from "next/router"; -import { useEffect, useRef, useState } from "react"; +import { useRouter } from 'next/router'; +import { useEffect, useRef, useState } from 'react'; const Terminal = () => { - const [value, setValue] = useState(""); + const [value, setValue] = useState(''); const [inputFocused, setInputFocused] = useState(false); const inputRef = useRef(null); @@ -19,8 +19,8 @@ const Terminal = () => { // Use localStorage to keep focus on the terminal if redirecting using terminal useEffect(() => { - if (localStorage.getItem("fromTerminal") === "true") { - localStorage.removeItem("fromTerminal"); + if (localStorage.getItem('fromTerminal') === 'true') { + localStorage.removeItem('fromTerminal'); if (inputRef.current) { inputRef.current.focus(); setInputEnd(); @@ -30,54 +30,57 @@ const Terminal = () => { }, []); const goToPage = (target: string) => { - localStorage.setItem("fromTerminal", "true"); + localStorage.setItem('fromTerminal', 'true'); router.push(target); }; // Checking for "Enter" and if so, changing to // the inputted page const handleKey = (key: string) => { - if (key !== "Enter") return; + if (key !== 'Enter') return; const cmd = value.toLowerCase().trim(); - if (["~", "cd", "cd ~", "cd .."].includes(cmd)) { - goToPage("/"); - } else if (["cd about", "cd about us", "cd about_us"].includes(cmd)) { - goToPage("/about"); - } else if (["cd events", "cd event"].includes(cmd)) { - goToPage("/events"); - } else if (["cd resources", "cd resource"].includes(cmd)) { - goToPage("/resources"); - } else if (["cd sponsors", "cd sponsor"].includes(cmd)) { - goToPage("/sponsors"); - } else if (["cd contact", "cd contacts", "cd contact us", "cd contact_us"].includes(cmd)) { - goToPage("/contact-us"); - } else if (cmd === "cd constitution") { - goToPage("/about/constitution"); + if (['~', 'cd', 'cd ~', 'cd ..'].includes(cmd)) { + goToPage('/'); + } else if (['cd about', 'cd about us', 'cd about_us'].includes(cmd)) { + goToPage('/about'); + } else if (['cd events', 'cd event'].includes(cmd)) { + goToPage('/events'); + } else if (['cd resources', 'cd resource'].includes(cmd)) { + goToPage('/resources'); + } else if (['cd sponsors', 'cd sponsor'].includes(cmd)) { + goToPage('/sponsors'); + } else if (['cd contact', 'cd contacts', 'cd contact us', 'cd contact_us'].includes(cmd)) { + goToPage('/contact-us'); + } else if (cmd === 'cd constitution') { + goToPage('/about/constitution'); } else if ( - ["cd execs", "cd directors", "cd subcom", "cd execs directors subcom", "cd execs-directors-subcom", "cd execs_directors_subcom"].includes(cmd) + [ + 'cd execs', + 'cd directors', + 'cd subcom', + 'cd execs directors subcom', + 'cd execs-directors-subcom', + 'cd execs_directors_subcom' + ].includes(cmd) ) { - goToPage("/about/execs-directors-subcom"); + goToPage('/about/execs-directors-subcom'); + } else if (['history', 'cd our history', 'cd our-history', 'cd our_history'].includes(cmd)) { + goToPage('/about/our-history'); } else if ( - ["history", "cd our history", "cd our-history", "cd our_history"].includes(cmd) + ['cd faq', 'cd faqs', 'cd questions', 'cd frequently asked questions'].includes(cmd) ) { - goToPage("/about/our-history"); - } else if ( - ["cd faq", "cd faqs", "cd questions", "cd frequently asked questions"].includes(cmd) - ) { - goToPage("/about/faqs"); - } else if ( - ["cd election-guide", "cd election guide", "cd election"].includes(cmd) - ) { - goToPage("/about/election-guide"); + goToPage('/about/faqs'); + } else if (['cd election-guide', 'cd election guide', 'cd election'].includes(cmd)) { + goToPage('/about/election-guide'); } clearInput(); }; const clearInput = () => { - setValue(""); + setValue(''); }; return ( @@ -101,13 +104,11 @@ const Terminal = () => { }} /> - - {value} - + {value} _ diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx index e804bca..b3b293d 100644 --- a/frontend/src/components/ui/dropdown-menu.tsx +++ b/frontend/src/components/ui/dropdown-menu.tsx @@ -1,32 +1,32 @@ -import * as React from "react" -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" -import { Check, ChevronRight, Circle } from "lucide-react" +import * as React from 'react'; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { Check, ChevronRight, Circle } from 'lucide-react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; -const DropdownMenu = DropdownMenuPrimitive.Root +const DropdownMenu = DropdownMenuPrimitive.Root; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; -const DropdownMenuGroup = DropdownMenuPrimitive.Group +const DropdownMenuGroup = DropdownMenuPrimitive.Group; -const DropdownMenuPortal = DropdownMenuPrimitive.Portal +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; -const DropdownMenuSub = DropdownMenuPrimitive.Sub +const DropdownMenuSub = DropdownMenuPrimitive.Sub; -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, children, ...props }, ref) => ( -)) -DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName +)); +DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -45,14 +44,13 @@ const DropdownMenuSubContent = React.forwardRef< -)) -DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName +)); +DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName; const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -63,33 +61,33 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", - "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", + 'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className )} {...props} /> -)) -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName +)); +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( svg]:size-4 [&>svg]:shrink-0", - inset && "pl-8", + 'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0', + inset && 'pl-8', className )} {...props} /> -)) -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName +)); +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, @@ -98,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} -)) -DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName +)); +DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -122,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef< {children} -)) -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName +)); +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName +)); +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; const DropdownMenuSeparator = React.forwardRef< React.ElementRef, @@ -161,24 +154,18 @@ const DropdownMenuSeparator = React.forwardRef< >(({ className, ...props }, ref) => ( -)) -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName +)); +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; -const DropdownMenuShortcut = ({ - className, - ...props -}: React.HTMLAttributes) => { +const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return ( - - ) -} -DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + + ); +}; +DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; export { DropdownMenu, @@ -195,5 +182,5 @@ export { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, - DropdownMenuRadioGroup, -} + DropdownMenuRadioGroup +}; diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index bd0c391..2819a83 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { clsx, type ClassValue } from "clsx" -import { twMerge } from "tailwind-merge" +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx index a97c9c7..6ebd497 100644 --- a/frontend/src/pages/404.tsx +++ b/frontend/src/pages/404.tsx @@ -30,6 +30,5 @@ export default function Custom404() {
- ); } diff --git a/frontend/src/pages/about/constitution.tsx b/frontend/src/pages/about/constitution.tsx index d8136ec..81337b0 100644 --- a/frontend/src/pages/about/constitution.tsx +++ b/frontend/src/pages/about/constitution.tsx @@ -1,7 +1,7 @@ -import Layout from "@/components/Layout"; -import PageBody from "@/components/PageBody"; -import PageTitle from "@/components/PageTitle"; -import TabTitle from 'next/head' +import Layout from '@/components/Layout'; +import PageBody from '@/components/PageBody'; +import PageTitle from '@/components/PageTitle'; +import TabTitle from 'next/head'; const ConstitutionPage = () => { return ( @@ -13,11 +13,15 @@ const ConstitutionPage = () => {

- Since the end of 2013, the constitution has been hosted on Github. The constitution by which CSESoc runs can be found here: + Since the end of 2013, the constitution has been hosted on Github. The constitution by + which CSESoc runs can be found here:

- + ); -} +}; export default ConstitutionPage; diff --git a/frontend/src/pages/about/election-guide.tsx b/frontend/src/pages/about/election-guide.tsx index 5c8468f..4fe2d52 100644 --- a/frontend/src/pages/about/election-guide.tsx +++ b/frontend/src/pages/about/election-guide.tsx @@ -1,7 +1,7 @@ -import Layout from "@/components/Layout"; -import PageBody from "@/components/PageBody"; -import PageTitle from "@/components/PageTitle"; -import TabTitle from 'next/head' +import Layout from '@/components/Layout'; +import PageBody from '@/components/PageBody'; +import PageTitle from '@/components/PageTitle'; +import TabTitle from 'next/head'; const ElectionGuidePage = () => { return ( @@ -13,56 +13,78 @@ const ElectionGuidePage = () => {

- Before considering any executive position for CSESoc, it - is highly recommended that you read the constitution beforehand: + Before considering any executive position for CSESoc, it is highly recommended that you + read the constitution beforehand:
- https://github.com/csesoc/constitution/blob/master/README.md + + https://github.com/csesoc/constitution/blob/master/README.md +

- The constitution clearly outlines the roles, responsibilities and - expectations of executives. Should you be elected, a thorough - understanding of this document will be required so best to read it now! + The constitution clearly outlines the roles, responsibilities and expectations of + executives. Should you be elected, a thorough understanding of this document will be + required so best to read it now!

- In order to run for a position in the CSESoc Elections, you will need - to either nominate yourself for a position or be nominated by someone else. + In order to run for a position in the CSESoc Elections, you will need to either nominate + yourself for a position or be nominated by someone else.

- Once nominations are open, you will be able to submit your nomination by - emailing copresidents@csesoc.org.au with: + Once nominations are open, you will be able to submit your nomination by emailing{' '} + + copresidents@csesoc.org.au + {' '} + with:

    -
  • Your full name and zID, or the full name and zID of the person you are nominating
    • +
  • + Your full name and zID, or the full name and zID of the person you are nominating +
  • The position you or the person you are nominating is going for
    • -
  • A link to a website, page, or document where people can find out more about you (optional)
  • - CC either the person you are nominating, or a person who will second your nomination of yourself - (if you are nominating yourself, the person who is seconding you has to reply to your email seconding - your nomination. If you're nominating someone else, that person has to reply to the email confirming - their nomination). Be sure to use a zID email! + A link to a website, page, or document where people can find out more about you + (optional) +
    • +
  • + CC either the person you are nominating, or a person who will second your nomination + of yourself (if you are nominating yourself, the person who is seconding you has to + reply to your email seconding your nomination. If you're nominating someone else, + that person has to reply to the email confirming their nomination). Be sure to use a + zID email!

- If you're planning on running for multiple positions, then make sure you include your preference - for positions. + If you're planning on running for multiple positions, then make sure you include your + preference for positions.

-

- Please remember that to run for an executive position, you have to be a full member of CSESoc when - you nominate yourself. This means that you should be doing a degree affiliated with the School of - CSE (and if you're transferring, you have already accepted your transfer at the time of nomination). +

+ Please remember that to run for an executive position, you have to be a full member of + CSESoc when you nominate yourself. This means that you should be doing a degree + affiliated with the School of CSE (and if you're transferring, you have already accepted + your transfer at the time of nomination).

- If you would like to create a website, you can find some helpful templates here: https://html5up.net/. + If you would like to create a website, you can find some helpful templates here:{' '} + + https://html5up.net/ + + .
- Another simple option is Google sites: https://sites.google.com/ + Another simple option is Google sites:{' '} + + https://sites.google.com/ +

@@ -70,42 +92,42 @@ const ElectionGuidePage = () => {

Details you might consider including on your website or document

- +
-

- Overview of yourself -

+

Overview of yourself

  • Name
  • Position you are running for
  • Degree + stage
    • -
  • Anything else that paints a good picture of who you are for members that haven’t met you!
    • +
  • + Anything else that paints a good picture of who you are for members that haven’t met + you! +
-

- Experience -

+

Experience

- Note: it is strongly encouraged that - applicants for the executive have previously held an executive or directorship - position within CSESoc. + Note: it is strongly encouraged that applicants for + the executive have previously held an executive or directorship position within + CSESoc.

    -
  • Previous involvement and achievements within CSESoc, the CSE community, as well as UNSW more broadly.
    • +
  • + Previous involvement and achievements within CSESoc, the CSE community, as well as + UNSW more broadly. +
  • Leadership experience
  • - Any other relevant volunteering or work situations where you feel - you’ve exemplified or developed the skills required for the role + Any other relevant volunteering or work situations where you feel you’ve exemplified + or developed the skills required for the role
-

- Policies / vision -

+

Policies / vision

  • What you'd like to achieve next year as part of your role
  • Aspects of the society you value most, what will you uphold?
    • diff --git a/frontend/src/pages/about/execs-directors-subcoms.tsx b/frontend/src/pages/about/execs-directors-subcoms.tsx index 38fd4de..dba9aaf 100644 --- a/frontend/src/pages/about/execs-directors-subcoms.tsx +++ b/frontend/src/pages/about/execs-directors-subcoms.tsx @@ -1,9 +1,9 @@ -import PortfolioDisplay from "@/components/About/PortfolioDisplay"; -import Layout from "@/components/Layout"; -import PageBody from "@/components/PageBody"; -import PageTitle from "@/components/PageTitle"; -import { EXECS } from "@/../public/data/execs"; -import TabTitle from 'next/head' +import PortfolioDisplay from '@/components/About/PortfolioDisplay'; +import Layout from '@/components/Layout'; +import PageBody from '@/components/PageBody'; +import PageTitle from '@/components/PageTitle'; +import { EXECS } from '@/../public/data/execs'; +import TabTitle from 'next/head'; const ExecsDirectorsSubcommitteesPage = () => { return ( @@ -16,14 +16,18 @@ const ExecsDirectorsSubcommitteesPage = () => { {/* CSESOC TEAM */}

    - The Executives and Directors are responsible for organising the society to make sure that things get done. - Execs are elected annually by CSE students at the end of the preceding year and Directors are selected by Execs. -

    -

    - The CSESoc Executive and Director team for 2025: + The Executives and Directors are responsible for organising the society to make sure + that things get done. Execs are elected annually by CSE students at the end of the + preceding year and Directors are selected by Execs.

    +

    The CSESoc Executive and Director team for 2025:

    - CSESoc Team 2025 + CSESoc Team 2025
    @@ -31,7 +35,7 @@ const ExecsDirectorsSubcommitteesPage = () => {

    Execs

    - {EXECS.map(exec => ( + {EXECS.map((exec) => (

    {exec.name}

    @@ -49,7 +53,8 @@ const ExecsDirectorsSubcommitteesPage = () => {

    Directors & Subcommitees

    - Subcommittees are the teams led by Directors that run CSESoc and its events to the benefit of all UNSW Computing students. Click to see the directors of each team! + Subcommittees are the teams led by Directors that run CSESoc and its events to the + benefit of all UNSW Computing students. Click to see the directors of each team!

    @@ -62,6 +67,6 @@ const ExecsDirectorsSubcommitteesPage = () => { ); -} +}; export default ExecsDirectorsSubcommitteesPage; diff --git a/frontend/src/pages/about/faqs.tsx b/frontend/src/pages/about/faqs.tsx index 20df787..86abd33 100644 --- a/frontend/src/pages/about/faqs.tsx +++ b/frontend/src/pages/about/faqs.tsx @@ -1,7 +1,7 @@ -import Layout from "@/components/Layout"; -import PageBody from "@/components/PageBody"; -import PageTitle from "@/components/PageTitle"; -import TabTitle from 'next/head' +import Layout from '@/components/Layout'; +import PageBody from '@/components/PageBody'; +import PageTitle from '@/components/PageTitle'; +import TabTitle from 'next/head'; const FaqsPage = () => { return ( @@ -12,45 +12,46 @@ const FaqsPage = () => {
    -

    - What is CSESoc? -

    +

    What is CSESoc?

    - CSESoc is a student-run society within the School of Computer Science and - Engineering. We organize various events such as BBQs, trivia nights, - and coding workshops for CSE students. For more details, visit - our About page. + CSESoc is a student-run society within the School of Computer Science and Engineering. + We organize various events such as BBQs, trivia nights, and coding workshops for CSE + students. For more details, visit our{' '} + + About page + + .

    -

    - How do I become a member? -

    +

    How do I become a member?

    - While you are enrolled in a CSE course or a CSE program, you - are automatically considered a member of the society and you - will automatically receive emails about our upcoming events. + While you are enrolled in a CSE course or a CSE program, you are automatically + considered a member of the society and you will automatically receive emails about our + upcoming events.
    - If you are not enrolled at CSE, then you can still become a - member by emailing us at csesoc@csesoc.org.au. + If you are not enrolled at CSE, then you can still become a member by emailing us at{' '} + + csesoc@csesoc.org.au + + .

    -

    - How do I become a sponsor? -

    +

    How do I become a sponsor?

    For information about how you can sponsor CSESoc, please see our sponsorship page.
    - For further enquiries and to discuss sponsorship opportunities, please - email sponsorship@csesoc.org.au. + For further enquiries and to discuss sponsorship opportunities, please email{' '} + + sponsorship@csesoc.org.au + + .

    -

    - How do I volunteer to help with events? -

    +

    How do I volunteer to help with events?

    - Follow our Facebook page to stay up to date with volunteering opportunities! If - being a dedicated part of the CSESoc team interests you, also consider joining a - subcommittee. Subcommittee recruitment opens during T1 of each year. + Follow our Facebook page to stay up to date with volunteering opportunities! If being a + dedicated part of the CSESoc team interests you, also consider joining a subcommittee. + Subcommittee recruitment opens during T1 of each year.

    diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx index ff4896b..c520471 100644 --- a/frontend/src/pages/about/index.tsx +++ b/frontend/src/pages/about/index.tsx @@ -1,5 +1,5 @@ -import Layout from "@/components/Layout"; -import PageTitle from "@/components/PageTitle"; +import Layout from '@/components/Layout'; +import PageTitle from '@/components/PageTitle'; import Image from 'next/image'; import Link from 'next/link'; import TabTitle from 'next/head'; @@ -21,13 +21,15 @@ export default function AboutPage() { CSESoc Icon

    CSESoc

    -

    unsw-computer-science-engineering-society

    +

    + unsw-computer-science-engineering-society +

    - + -

    - CSESoc is the principal representative body for UNSW computing students. -

    +

    CSESoc is the principal representative body for UNSW computing students.

    People
    @@ -41,7 +43,9 @@ export default function AboutPage() {
    {/* RIGHT SIDE */} @@ -52,24 +56,47 @@ export default function AboutPage() {

    - CSESoc is the official representative body of computing students at UNSW. We are one of the - largest and most active societies at UNSW, and the largest computing society in the southern hemisphere. - CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering, - Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional - needs of CSE students, and promote computing through a variety of forms. + CSESoc is the official representative body of computing students at UNSW. We are + one of the largest and most active societies at UNSW, and the largest computing + society in the southern hemisphere. CSESoc comprises over 16k members spanning + across various degrees including Computer Science, Software Engineering, + Bioinformatics and Computer Engineering. We are here to fulfil the social, + personal and professional needs of CSE students, and promote computing through a + variety of forms.


    - We are a society for the students, by the students. Here’s an overview of what we do: + We are a society for the students, by the students. Here’s an overview of what + we do:

      -
    • Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ
      • -
    • Create original media content, including Podcasts, articles, YouTube videos, and live streams
      • -
    • Run a highly successful First Year Camp and Peer Mentoring program, offering new CSE students (both undergraduate and postgraduate) a chance to meet and mingle with other newcomers
      • -
    • Engage students with industry sponsors and representatives to develop their professional capacity and curiosity
      • -
    • Develop our own open-source projects for students to get learn new skills and develop tools for our community
      • -
    • Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers
      • +
    • + Run weekly social and educational events, including trivia, movie, boardgames + nights, LAN parties, workshops, coding competitions, tech talks, and our + famous free weekly BBQ +
      • +
    • + Create original media content, including Podcasts, articles, YouTube videos, + and live streams +
      • +
    • + Run a highly successful First Year Camp and Peer Mentoring program, offering + new CSE students (both undergraduate and postgraduate) a chance to meet and + mingle with other newcomers +
      • +
    • + Engage students with industry sponsors and representatives to develop their + professional capacity and curiosity +
      • +
    • + Develop our own open-source projects for students to get learn new skills and + develop tools for our community +
      • +
    • + Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, + ~1.9k YouTube subs, and ~7.7k Instagram followers +
    @@ -79,9 +106,17 @@ export default function AboutPage() {
    - Book + Book - execs-directors-subcoms + + execs-directors-subcoms +
    CSESoc's execs, directors, subcommittees
    @@ -89,7 +124,13 @@ export default function AboutPage() {
    - Book + Book constitution @@ -101,7 +142,13 @@ export default function AboutPage() {
    - Book + Book our-history @@ -111,7 +158,13 @@ export default function AboutPage() {
    - Book + Book faqs @@ -121,12 +174,18 @@ export default function AboutPage() {
    -
    - Book + Book election-guide diff --git a/frontend/src/pages/about/our-history.tsx b/frontend/src/pages/about/our-history.tsx index cd11b44..3b8a0c7 100644 --- a/frontend/src/pages/about/our-history.tsx +++ b/frontend/src/pages/about/our-history.tsx @@ -1,8 +1,8 @@ -import Layout from "@/components/Layout"; -import PageBody from "@/components/PageBody"; -import PageTitle from "@/components/PageTitle"; -import TabTitle from 'next/head' -import { useState } from "react"; +import Layout from '@/components/Layout'; +import PageBody from '@/components/PageBody'; +import PageTitle from '@/components/PageTitle'; +import TabTitle from 'next/head'; +import { useState } from 'react'; const MIN_YEAR = 2007; const MAX_YEAR = 2020; @@ -22,28 +22,27 @@ const OurHistoryPage = () => {

    - CSESoc was formed in October 2006 from the old CompSoc and SESoc societies. - CompSoc helped represent the interest of students studying Computer Engineering, - Computer Science and postgraduate courses, while SESoc was the representative body - for Software Engineering students. Both societies provided technical and social - support to their members. In the best interest of everyone, the societies merged to - provide a better experience to all CSE students. + CSESoc was formed in October 2006 from the old CompSoc and SESoc societies. CompSoc + helped represent the interest of students studying Computer Engineering, Computer + Science and postgraduate courses, while SESoc was the representative body for Software + Engineering students. Both societies provided technical and social support to their + members. In the best interest of everyone, the societies merged to provide a better + experience to all CSE students.

    - CSESoc now represents students enrolled in Computer Science, Computer Engineering, - Software Engineering, Bioinformatics Engineering, or a post‐graduate program + CSESoc now represents students enrolled in Computer Science, Computer Engineering, + Software Engineering, Bioinformatics Engineering, or a post‐graduate program administered by CSE (research or coursework).

    - Even today CSESoc continues to be an integral part of the student experience. - Many students make the most of their time at university by joining a working - group in first year to get a taste of the society. If you are enthusiastic and - interested you can nominate yourself or be nominated for a position in the Exec - at the end of the year. + Even today CSESoc continues to be an integral part of the student experience. Many + students make the most of their time at university by joining a working group in first + year to get a taste of the society. If you are enthusiastic and interested you can + nominate yourself or be nominated for a position in the Exec at the end of the year.

    - Being part of a society is a great way to meet new people and gain extra skills - that employers look for in the industry. + Being part of a society is a great way to meet new people and gain extra skills that + employers look for in the industry.

    @@ -52,7 +51,7 @@ const OurHistoryPage = () => {

    {year}

    - { step={1} className="w-full h-2 bg-blue-300 rounded-lg appearance-none cursor-pointer" onChange={(e) => { - setYear(parseInt(e.target.value)) - setShouldDisplayTip(false) + setYear(parseInt(e.target.value)); + setShouldDisplayTip(false); }} />
    @@ -75,12 +74,12 @@ const OurHistoryPage = () => { )}
    - {`CSESoc + {`CSESoc
    ); -} +}; export default OurHistoryPage; diff --git a/frontend/src/pages/contact-us.tsx b/frontend/src/pages/contact-us.tsx index 59e8a56..76e015a 100644 --- a/frontend/src/pages/contact-us.tsx +++ b/frontend/src/pages/contact-us.tsx @@ -10,7 +10,7 @@ export default function ContactUsPage() { Contact Us | CSESoc UNSW - + diff --git a/frontend/src/pages/events.tsx b/frontend/src/pages/events.tsx index 6a9e01c..3c5a35b 100644 --- a/frontend/src/pages/events.tsx +++ b/frontend/src/pages/events.tsx @@ -2,7 +2,7 @@ import Navbar from '@/components/Navbar'; import Footer from '@/components/Footer'; // import axios from 'axios'; import Events from '@/components/Event'; -import TabTitle from 'next/head' +import TabTitle from 'next/head'; export default function EventsPage() { return ( @@ -13,12 +13,11 @@ export default function EventsPage() {
    - -
    - + +
    +
    -
    ); diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index ef95d31..fdb11d0 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -13,11 +13,10 @@ export default function HomePage() {
    -
    - +
    @@ -25,6 +24,5 @@ export default function HomePage() {
    - ); } diff --git a/frontend/src/pages/resources.tsx b/frontend/src/pages/resources.tsx index f5b16fa..d8fb6a4 100644 --- a/frontend/src/pages/resources.tsx +++ b/frontend/src/pages/resources.tsx @@ -15,7 +15,7 @@ export default function ResourcesPage() { - +
    diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx index 210b0de..2748353 100644 --- a/frontend/src/pages/sponsors.tsx +++ b/frontend/src/pages/sponsors.tsx @@ -44,14 +44,16 @@ export default function SponsorsPage() {
    -

    handleRainClick('diamond')}>DIAMOND SPONSORS

    +

    handleRainClick('diamond')} + > + DIAMOND SPONSORS +

    {showModal && ( - setShowModal(false)} - /> + setShowModal(false)} /> )}
    {diamondLinks.map((item, index) => { @@ -64,7 +66,12 @@ export default function SponsorsPage() {
    -

    handleRainClick('gold')}>GOLD SPONSORS

    +

    handleRainClick('gold')} + > + GOLD SPONSORS +

    {goldLinks.map((item, index) => { @@ -76,7 +83,12 @@ export default function SponsorsPage() { })}
    -

    handleRainClick('silver')}>SILVER SPONSORS

    +

    handleRainClick('silver')} + > + SILVER SPONSORS +

    {silverLinks.map((item, index) => { diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index e75bbf1..ace409b 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -2,7 +2,8 @@ @tailwind components; @tailwind utilities; -html, body { +html, +body { scroll-behavior: smooth; } @@ -68,7 +69,7 @@ body { transform-origin: top; } -.dropdown-content[data-state="closed"] { +.dropdown-content[data-state='closed'] { animation: smoothClose 0.3s ease-in-out; transform-origin: top; } @@ -78,13 +79,25 @@ body { animation: fadeInUp 0.5s ease-out forwards; } -.dropdown-item:nth-child(1) { animation-delay: 0.1s; } -.dropdown-item:nth-child(2) { animation-delay: 0.2s; } -.dropdown-item:nth-child(3) { animation-delay: 0.3s; } -.dropdown-item:nth-child(4) { animation-delay: 0.4s; } -.dropdown-item:nth-child(5) { animation-delay: 0.5s; } -.dropdown-item:nth-child(6) { animation-delay: 0.6s; } +.dropdown-item:nth-child(1) { + animation-delay: 0.1s; +} +.dropdown-item:nth-child(2) { + animation-delay: 0.2s; +} +.dropdown-item:nth-child(3) { + animation-delay: 0.3s; +} +.dropdown-item:nth-child(4) { + animation-delay: 0.4s; +} +.dropdown-item:nth-child(5) { + animation-delay: 0.5s; +} +.dropdown-item:nth-child(6) { + animation-delay: 0.6s; +} .carousel-container .react-multiple-carousel__arrow { z-index: 5; -} \ No newline at end of file +} diff --git a/frontend/src/typing/types.d.ts b/frontend/src/typing/types.d.ts index 2d26ccc..fad0d35 100644 --- a/frontend/src/typing/types.d.ts +++ b/frontend/src/typing/types.d.ts @@ -1 +1 @@ -declare module 'next-emoji-rain'; \ No newline at end of file +declare module 'next-emoji-rain'; diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index c31d073..fd048ed 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -11,11 +11,11 @@ const config: Config = { keyframes: { 'bounce-right': { '0%, 100%': { transform: 'translateX(0)' }, - '50%': { transform: 'translateX(6px)' }, - }, + '50%': { transform: 'translateX(6px)' } + } }, animation: { - 'bounce-right': 'bounce-right 1.0s ease-in-out infinite', + 'bounce-right': 'bounce-right 1.0s ease-in-out infinite' }, fontFamily: { game: "'Press Start 2P', cursive" diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index c0a5209..aa18e90 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -18,18 +14,10 @@ "jsx": "preserve", "incremental": true, "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] }, "forceConsistentCasingInFileNames": true }, - "include": [ - "./next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } From bef40cb11adb541bc5d2c53347000d10864043ee Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 26 Aug 2025 21:50:26 +1000 Subject: [PATCH 3/5] transition addded to sidebar menu, had to use dual state approach to fix sliding animation --- frontend/src/components/Hamburger.tsx | 86 ++++++++++++++++----------- 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/Hamburger.tsx b/frontend/src/components/Hamburger.tsx index e006612..2045113 100644 --- a/frontend/src/components/Hamburger.tsx +++ b/frontend/src/components/Hamburger.tsx @@ -4,10 +4,28 @@ import { Menu, X } from 'lucide-react'; import Link from 'next/link'; const Hamburger = () => { + // Needs dom element to be same bfore and after + // setIsOpen(true) occurs first while dom portal doesnt exist + // Then creates dom portal + // So it tries to go from isOpen=true to isOpen=true + // So no animation occurs as it starts from its finishing val + // So we need to create dom portal first, then menu + // animation should only start after dom portal is created const [isOpen, setIsOpen] = useState(false); + const [showMenu, setShowMenu] = useState(false); + + const openMenu = () => { + setShowMenu(true); + setTimeout(() => setIsOpen(true), 10); + }; + + const closeMenu = () => { + setIsOpen(false); + setTimeout(() => setShowMenu(false), 300); + }; useEffect(() => { - if (isOpen) { + if (showMenu) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'scroll'; @@ -16,55 +34,53 @@ const Hamburger = () => { return () => { document.body.style.overflow = 'scroll'; }; - }, [isOpen]); + }, [showMenu]); useEffect(() => { const handleEscape = (e: KeyboardEvent) => { - if (e.key === 'Escape') setIsOpen(false); + if (e.key === 'Escape') closeMenu(); }; - if (isOpen) document.addEventListener('keydown', handleEscape); + if (showMenu) document.addEventListener('keydown', handleEscape); return () => { document.removeEventListener('keydown', handleEscape); }; - }, [isOpen, setIsOpen]); - - useEffect(() => { - if (isOpen) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = 'scroll'; - } - - return () => { - document.body.style.overflow = 'scroll'; - }; - }, [isOpen]); + }, [showMenu]); // Portal renders the backdrop at document.body level - // Hence, instead of showing just at nav, it shows over all components + // Hence, instead of showing just at nav, shows over all components const backdrop = - isOpen && typeof document !== 'undefined' + showMenu && typeof document !== 'undefined' ? ReactDOM.createPortal( -
    - {/* Backdrop */} -
    setIsOpen(false)} /> - + // Backdrop +
    {/* Sidebar */} -
    +
    e.stopPropagation()} + > -
    +
    setIsOpen(false)} + onClick={closeMenu} > About Us @@ -72,7 +88,7 @@ const Hamburger = () => { setIsOpen(false)} + onClick={closeMenu} > Events @@ -80,7 +96,7 @@ const Hamburger = () => { setIsOpen(false)} + onClick={closeMenu} > Resources @@ -88,7 +104,7 @@ const Hamburger = () => { setIsOpen(false)} + onClick={closeMenu} > Sponsors @@ -96,7 +112,7 @@ const Hamburger = () => { setIsOpen(false)} + onClick={closeMenu} > Contact Us @@ -105,7 +121,7 @@ const Hamburger = () => { href="https://csesoc-merch.square.site/" target="_blank" className="text-white text-lg p-3 hover:underline" - onClick={() => setIsOpen(false)} + onClick={closeMenu} > Merch @@ -118,7 +134,7 @@ const Hamburger = () => { return ( <> - {backdrop} @@ -126,4 +142,4 @@ const Hamburger = () => { ); }; -export default Hamburger; +export default Hamburger; \ No newline at end of file From 62d7c443837ccffc0861210347866478396072ef Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 26 Aug 2025 21:58:04 +1000 Subject: [PATCH 4/5] fixed jittery effect when scroll bar vanishes by adding padding=scrollbar-width --- frontend/src/components/Hamburger.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Hamburger.tsx b/frontend/src/components/Hamburger.tsx index 2045113..4d260e8 100644 --- a/frontend/src/components/Hamburger.tsx +++ b/frontend/src/components/Hamburger.tsx @@ -26,13 +26,15 @@ const Hamburger = () => { useEffect(() => { if (showMenu) { + // Add padding when scrollbar vanishes + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = 'scroll'; + document.body.style.paddingRight = `${scrollbarWidth}px`; } return () => { document.body.style.overflow = 'scroll'; + document.body.style.paddingRight = '0px'; }; }, [showMenu]); From 1ba519667980f2e290e79cab4a486f4e6af69175 Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 26 Aug 2025 22:27:45 +1000 Subject: [PATCH 5/5] added socials to bottom of side menu --- frontend/src/components/Hamburger.tsx | 124 +++++++++++++++----------- 1 file changed, 73 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/Hamburger.tsx b/frontend/src/components/Hamburger.tsx index 4d260e8..fd9333b 100644 --- a/frontend/src/components/Hamburger.tsx +++ b/frontend/src/components/Hamburger.tsx @@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { Menu, X } from 'lucide-react'; import Link from 'next/link'; +import Image from 'next/image'; +import { socialLinks } from '@/../public/data/socialInfos'; const Hamburger = () => { // Needs dom element to be same bfore and after @@ -33,8 +35,8 @@ const Hamburger = () => { } return () => { - document.body.style.overflow = 'scroll'; - document.body.style.paddingRight = '0px'; + document.body.style.overflow = ''; + document.body.style.paddingRight = ''; }; }, [showMenu]); @@ -78,55 +80,75 @@ const Hamburger = () => { -
    - - About Us - - - - Events - - - - Resources - - - - Sponsors - - - - Contact Us - - - - Merch - +
    +
    + + About Us + + + + Events + + + + Resources + + + + Sponsors + + + + Contact Us + + + + Merch + +
    + +
    + +
    + {socialLinks.map((item, index) => { + return ( + + {item.alt} + + ); + })} +
    ,