formatting and adding organizers

Author: CooperW824

app/page.tsx

@@ -58,7 +58,9 @@ export default function Home() {
 				<Footer />
 
 				<div
-					className={`${showHighlightDot ? "fixed top-32 right-3.5 block" : "opacity-0"} w-12 h-12 z-[5] bg-white border-[6px] border-hackrpi-primary-blue rounded-full transition-opacity duration-500`}
+					className={`${
+						showHighlightDot ? "fixed top-32 right-3.5 block" : "opacity-0"
+					} w-12 h-12 z-[5] bg-white border-[6px] border-hackrpi-primary-blue rounded-full transition-opacity duration-500`}
 				></div>
 
 				<div

app/resources/page.tsx

@@ -94,8 +94,8 @@ export default function page() {
 					</HackRPILink>
 					<p>
 						This URL will take you to a sign-in page and prompt you to log in using your Wolfram ID. If you don&apos;t
-						already have a Wolfram ID, you&apos;ll be prompted to create one using an active email address. Once logged in,
-						you will see in the Downloads section which platforms of the software you have access to, with their
+						already have a Wolfram ID, you&apos;ll be prompted to create one using an active email address. Once logged
+						in, you will see in the Downloads section which platforms of the software you have access to, with their
 						accompanying activation keys. Please download the desktop version to your machine, boot up the application
 						and use the associated activation key when prompted. This will grant you full access for 30 days from your
 						activation date.

components/team/team.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import HackRPILink from "../themed-components/hackrpi-link";
 import { Director, team } from "../../data/members";
-// import { teamColors } from "../../data/members";
+import { teamColors } from "../../data/members";
 import { executive } from "../../data/members";
 import Image from "next/image";
 
@@ -13,14 +13,14 @@ export default function TeamComponent() {
 		offset: 0,
 		hover: false,
 	});
-	// const [organizersAnim, setOrganizersAnim] = useState({
-	// 	organizers: team.organizers,
-	// 	offset: 0,
-	// 	hover: false,
-	// });
+	const [organizersAnim, setOrganizersAnim] = useState({
+		organizers: team.organizers,
+		offset: 0,
+		hover: false,
+	});
 
 	const DIRECTOR_DX_PERCENT = 0.5;
-	// const ORGANIZER_DX_PERCENT = 1.25;
+	const ORGANIZER_DX_PERCENT = 1.25;
 
 	const animate_directors = useCallback(() => {
 		setDirectorsAnim((prev) => {
@@ -33,29 +33,26 @@ export default function TeamComponent() {
 		requestAnimationFrame(animate_directors);
 	}, []);
 
-	// const animate_organizers = useCallback(() => {
-	// 	setOrganizersAnim((prev) => {
-	// 		if (prev.hover) return prev;
-	// 		if (prev.offset <= -105) {
-	// 			return { organizers: [...prev.organizers.slice(1), prev.organizers[0]], offset: 11.5, hover: prev.hover };
-	// 		}
-	// 		return { organizers: prev.organizers, offset: prev.offset - ORGANIZER_DX_PERCENT, hover: prev.hover };
-	// 	});
-	// 	requestAnimationFrame(animate_organizers);
-	// }, []);
+	const animate_organizers = useCallback(() => {
+		setOrganizersAnim((prev) => {
+			if (prev.hover) return prev;
+			if (prev.offset <= -111.5) {
+				return { organizers: [...prev.organizers.slice(1), prev.organizers[0]], offset: 11.5, hover: prev.hover };
+			}
+			return { organizers: prev.organizers, offset: prev.offset - ORGANIZER_DX_PERCENT, hover: prev.hover };
+		});
+		requestAnimationFrame(animate_organizers);
+	}, []);
 
 	useEffect(() => {
 		const animID = requestAnimationFrame(animate_directors);
-		// const animID2 = requestAnimationFrame(animate_organizers);
+		const animID2 = requestAnimationFrame(animate_organizers);
 
 		return () => {
 			cancelAnimationFrame(animID);
-			// cancelAnimationFrame(animID2);
+			cancelAnimationFrame(animID2);
 		};
-	}, [
-		animate_directors,
-		//animate_organizers
-	]);
+	}, [animate_directors, animate_organizers]);
 
 	return (
 		<div className="w-full flex items-center justify-center mb-4  desktop:pl-0">
@@ -107,7 +104,7 @@ export default function TeamComponent() {
 						return DirectorCard(director, directorsAnim.offset);
 					})}
 				</div>
-				{/*<h2 className="text-2xl font-bold text-white">Thank You to All of our Organizers</h2>
+				<h2 className="text-2xl font-bold text-white">Thank You to All of our Organizers</h2>
 				<div
 					className="w-full h-fit overflow-hidden flex text-nowrap py-4"
 					onMouseEnter={() => {
@@ -129,7 +126,7 @@ export default function TeamComponent() {
 								style={{ transform: `translate(${organizersAnim.offset}%, 0%)` }}
 							>
 								<div
-									className="w-fit h-fit rounded-full flex items-center justify-center px-8 "
+									className="w-32 aspect-square rounded-full flex items-center justify-center px-8 "
 									style={{ backgroundColor: teamColors[organizer.team].bg }}
 								>
 									<div className="my-2 w-full rounded-full flex items-center justify-center flex-col text-white text-center">
@@ -140,7 +137,7 @@ export default function TeamComponent() {
 							</div>
 						);
 					})}
-				</div>*/}
+				</div>
 			</div>
 		</div>
 	);

components/themed-components/hackrpi-button.tsx

@@ -12,11 +12,17 @@ export default function HackRPIButton(props: HackRPIButtonProps) {
 			onClick={props.onClick}
 			aria-label={props.ariaLabel}
 			aria-pressed={props.active}
-			className={`${props.className} ${props.active ? "bg-hackrpi-secondary-yellow text-hackrpi-secondary-dark-blue border-hackrpi-secondary-yellow" : "border-hackrpi-secondary-yellow text-white"} flex group  border-2  hover:bg-hackrpi-secondary-yellow hover:text-hackrpi-secondary-dark-blue transition-colors duration-200 font-sans font-medium ring-hackrpi-secondary-yellow relative pr-4`}
+			className={`${props.className} ${
+				props.active
+					? "bg-hackrpi-secondary-yellow text-hackrpi-secondary-dark-blue border-hackrpi-secondary-yellow"
+					: "border-hackrpi-secondary-yellow text-white"
+			} flex group  border-2  hover:bg-hackrpi-secondary-yellow hover:text-hackrpi-secondary-dark-blue transition-colors duration-200 font-sans font-medium ring-hackrpi-secondary-yellow relative pr-4`}
 		>
 			<div className="p-2 w-full">{props.children}</div>
 			<svg
-				className={`absolute top-1 right-1 group-hover:fill-hackrpi-secondary-dark-blue ${props.active ? "fill-hackrpi-secondary-dark-blue" : "fill-hackrpi-secondary-yellow"}  transition-colors duration-200`}
+				className={`absolute top-1 right-1 group-hover:fill-hackrpi-secondary-dark-blue ${
+					props.active ? "fill-hackrpi-secondary-dark-blue" : "fill-hackrpi-secondary-yellow"
+				}  transition-colors duration-200`}
 				xmlns="http://www.w3.org/2000/svg"
 				width="15"
 				height="15"

data/members.ts

@@ -195,56 +195,52 @@ export const team: Team = {
 	],
 	organizers: [
 		{
-			name: "Test Organizer",
-			team: "Technology",
-		},
-		{
-			name: "Test Organizer",
-			team: "Logistics",
+			name: "Iain",
+			team: "Sponsorship",
 		},
 		{
-			name: "Test Organizer",
-			team: "Marketing",
+			name: "Brian Witanowski",
+			team: "Sponsorship",
 		},
 		{
-			name: "Test Organizer",
-			team: "Outreach",
+			name: "Jackson Baimel",
+			team: "Sponsorship",
 		},
 		{
-			name: "Test Organizer",
-			team: "Finance",
+			name: "Christian Marinkovich",
+			team: "Technology",
 		},
 		{
-			name: "Test Organizer",
+			name: "Peter Ermishkin",
 			team: "Sponsorship",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Anthony Smith",
+			team: "Technology",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Devan Patel",
+			team: "Finance",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Tobias Manayath",
+			team: "Logistics",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Matthew Treanor",
+			team: "Technology",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Olivia Lee",
+			team: "Marketing",
 		},
 		{
-			name: "Test Organizer",
+			name: "Mrunal Athaley",
 			team: "Sponsorship",
 		},
 		{
-			name: "Test Organizer",
-			team: "Sponsorship",
+			name: "Evan Chen",
+			team: "Logistics",
 		},
 	],
 };