codecoogs · coco-wizard · Mar 18, 2025 · Feb 28, 2025 · Mar 3, 2025 · Mar 16, 2025
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,7 @@ import Members from "./members/Members";
 import Sponsors from "./sponsors/Sponsors";
 import Success from "./payments/Success";
 import Opportunities from "./opportunities/Opportunities";
-import Teams from "./teams/Teams";
+import Resources from "./resources/Resources";
 
 const App = () => {
 	return (
@@ -21,6 +21,7 @@ const App = () => {
 					<Route path="/sponsors" element={<Sponsors />} />
 					<Route path="/success" element={<Success />} />
 					<Route path="/opportunities" element={<Opportunities />} />
+					<Route path="/resources" element={<Resources />} />
 				</Routes>
 			</Layout>
 		</BrowserRouter>

diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -1,7 +1,35 @@
 import { useEffect } from "react";
+import type { Resource } from "../data/resources";
 
 export function useTitle(title: string) {
 	useEffect(() => {
 		document.title = title;
 	}, [title]);
 }
+
+export function getDateFromResourceName(resource: Resource) {
+	if (resource.date !== undefined) {
+		return resource.date;
+	}
+
+	// Matches for date in name in format (00.00.00)
+	const regex = /\((\d+)\.(\d+)\.(\d+)\)/;
+	const match = resource.name.match(regex)?.slice(1);
+
+	const dateParts = match?.map((value) => Number.parseInt(value));
+	let date: Date | undefined;
+
+	if (dateParts?.every((value) => value !== undefined)) {
+		date = new Date(dateParts[2], dateParts[0], dateParts[1], 0, 0, 0);
+	}
+
+	if (match) {
+		resource.date = date;
+		resource.name = resource.name.slice(
+			0,
+			resource.name.indexOf(match[0]) - match[0].length,
+		);
+	}
+
+	return date;
+}
diff --git a/src/data/resources.ts b/src/data/resources.ts
@@ -0,0 +1,157 @@
+// THIS FILE WAS GENERATED AUTOMATICALLY AND SHOULD NOT BE EDITED BY HAND!
+export interface Resource {
+	thumbnailUrl: string;
+	extension: string;
+	category: string;
+	name: string;
+	link: string;
+	id: string;
+
+	date?: Date;
+}
+export const resources: Resource[] = [
+	{
+		id: "11WlAL-0sy_o0KPtequbBW7ECuhsCVsRw",
+		link: "https://drive.google.com/file/d/11WlAL-0sy_o0KPtequbBW7ECuhsCVsRw/view?usp=drivesdk",
+		name: "Code Coogs x CSGirls - Introduction to Data Science Workshop (02.13.2025).pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1xrfDmgoksBGYeM7UZX6Gfpgu0pDcA8Sz",
+		link: "https://drive.google.com/file/d/1xrfDmgoksBGYeM7UZX6Gfpgu0pDcA8Sz/view?usp=drivesdk",
+		name: "(Code Coogs Slides) Code Coogs x APM - Product Lifecycle Workshop (02.25.2025).pdf.pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1DeVLxVxrRE3FPEJlXhqqXwlaPogHJFJc",
+		link: "https://drive.google.com/file/d/1DeVLxVxrRE3FPEJlXhqqXwlaPogHJFJc/view?usp=drivesdk",
+		name: "(APM Slides) Code Coogs x APM - Product Lifecycle Workshop (02.25.2025).pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1tqySSLpiXKyRohZaxoQ7UsU4Bt9pWOtW",
+		link: "https://drive.google.com/file/d/1tqySSLpiXKyRohZaxoQ7UsU4Bt9pWOtW/view?usp=drivesdk",
+		name: "Code Coogs x SASE - Leetcode Workshop Reference Sheet (2.11.2025).pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1Qngsj3Np14cp1dGn-mtNLsQRO-nA1e7e",
+		link: "https://drive.google.com/file/d/1Qngsj3Np14cp1dGn-mtNLsQRO-nA1e7e/view?usp=drivesdk",
+		name: "Code Coogs x SASE - Leetcode Workshop (2.11.2025).pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1XT8496Gyj1_EFy4A4sE_9Fws5V7OZxwo",
+		link: "https://drive.google.com/file/d/1XT8496Gyj1_EFy4A4sE_9Fws5V7OZxwo/view?usp=drivesdk",
+		name: "Code Coogs  x SASE - Elevator Pitch Workshop (01.29.2025).pdf",
+		category: "Collaborations",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1U1vNpouM_fwZ7jleENl18k4wupgSXQH4",
+		link: "https://drive.google.com/file/d/1U1vNpouM_fwZ7jleENl18k4wupgSXQH4/view?usp=drivesdk",
+		name: "Introduction to Cloud Computing Workshop (02.12.2025).pdf",
+		category: "Workshops",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1T2VjRYy17mmjNneqdbAFCvrFxTfy03xN",
+		link: "https://drive.google.com/file/d/1T2VjRYy17mmjNneqdbAFCvrFxTfy03xN/view?usp=drivesdk",
+		name: "Intro_to_NumPy_answers_DEMO (02.27.2025).ipynb",
+		category: "Workshops",
+		extension: "ipynb",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1VfCcSeCN6Onexd_aZ3v9TZjEALA9X4E-",
+		link: "https://drive.google.com/file/d/1VfCcSeCN6Onexd_aZ3v9TZjEALA9X4E-/view?usp=drivesdk",
+		name: "Intro_to_NumPy_DEMO (02.27.2025).ipynb",
+		category: "Workshops",
+		extension: "ipynb",
+		thumbnailUrl: "",
+	},
+	{
+		id: "12-6QzPUp2KSP9BfNYEWvpZKdjnmANijq",
+		link: "https://drive.google.com/file/d/12-6QzPUp2KSP9BfNYEWvpZKdjnmANijq/view?usp=drivesdk",
+		name: "Intro_ DataScience_Wk_Pandas_DEMO (02.13.2025).ipynb",
+		category: "Workshops",
+		extension: "ipynb",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1vCoZfieyFbfm_hrHO13QhIPjylJluYNe",
+		link: "https://drive.google.com/file/d/1vCoZfieyFbfm_hrHO13QhIPjylJluYNe/view?usp=drivesdk",
+		name: "Intro_ DataScience_Wk_NumPy_DEMO (02.13.2025).ipynb",
+		category: "Workshops",
+		extension: "ipynb",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1xvB5a0-00b5EOOiXQNmi8qOHZlW7pGan",
+		link: "https://drive.google.com/file/d/1xvB5a0-00b5EOOiXQNmi8qOHZlW7pGan/view?usp=drivesdk",
+		name: "Intro_ DataScience_Wk_MatPlot_DEMO (02.13.2025).ipynb",
+		category: "Workshops",
+		extension: "ipynb",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1QhHy-eoCO8Ju8iLxdUZo6ESJNI-0BW4f",
+		link: "https://drive.google.com/file/d/1QhHy-eoCO8Ju8iLxdUZo6ESJNI-0BW4f/view?usp=drivesdk",
+		name: "Code Coogs x CSGirls - Introduction to Data Science Workshop (02.13.2025).pdf",
+		category: "Workshops",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1orGqOXvJXXo80DsYFMD68jwCH6ruh3YD",
+		link: "https://drive.google.com/file/d/1orGqOXvJXXo80DsYFMD68jwCH6ruh3YD/view?usp=drivesdk",
+		name: "Frontend Basics Intro to React(02.20.2025).pdf",
+		category: "Workshops",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1zm67rCKghPRHXVH6C4qcyAeab7ZyvMyF",
+		link: "https://drive.google.com/file/d/1zm67rCKghPRHXVH6C4qcyAeab7ZyvMyF/view?usp=drivesdk",
+		name: "Internship Insider Workshop (02.04.2025).pdf",
+		category: "Workshops",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1_Y9M0HbeABz4OUdLw3oC1eXynW9wMH19",
+		link: "https://drive.google.com/file/d/1_Y9M0HbeABz4OUdLw3oC1eXynW9wMH19/view?usp=drivesdk",
+		name: "Introduction to NumPy Workshop (02.27.2025).pdf",
+		category: "Workshops",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1cfxM4uGKBTuq950ikWicOzn-2bnX-tPP",
+		link: "https://drive.google.com/file/d/1cfxM4uGKBTuq950ikWicOzn-2bnX-tPP/view?usp=drivesdk",
+		name: "Competition Workshop #2 (02.17.2025).pdf",
+		category: "Competitions",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+	{
+		id: "1KDBoNVKfbEt3yRVpRp2s4ULNutJUlPzo",
+		link: "https://drive.google.com/file/d/1KDBoNVKfbEt3yRVpRp2s4ULNutJUlPzo/view?usp=drivesdk",
+		name: "Competition Workshop #1 (02.03.2025).pdf",
+		category: "Competitions",
+		extension: "pdf",
+		thumbnailUrl: "",
+	},
+];
diff --git a/src/home/About.tsx b/src/home/About.tsx
@@ -15,6 +15,7 @@ import {
 	partners,
 } from "../data/about";
 import FadeInSection from "../common/FadeInSection";
+import { Link } from "react-router-dom";
 
 interface AboutSectionProps {
 	id: string;
@@ -363,6 +364,14 @@ const About = () => {
 										<h2 className="text-lg text-dark-primary">Competitions</h2>
 										<p className="text-sm opacity-70">{competitionsDesc}</p>
 									</>
+
+									<Link
+										className="w-fit mt-3 flex bg-dark-surface-variant hover:ring-dark-primary px-4 h-10 items-center text-center text-sm text-white rounded-lg ring-1 ring-inset ring-white"
+										to="/resources"
+										target="_self"
+									>
+										See Resources
+									</Link>
 								</FadeInSection>
 							</div>
 						</div>

diff --git a/src/resources/ResourceCategory.tsx b/src/resources/ResourceCategory.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+interface ResourceCategoryProps {
+	category: string;
+	selected: boolean;
+
+	onClick: (category: string) => void;
+}
+
+export function ResourceCategory({
+	category,
+	onClick,
+	selected,
+}: ResourceCategoryProps) {
+	const [hovering, setHovering] = useState(false);
+	const [text, setText] = useState(category);
+
+	useEffect(() => {
+		if (hovering) {
+			setText(`[${category}]`);
+		} else {
+			setText(category);
+		}
+	}, [hovering, category]);
+
+	return (
+		<button
+			type="button"
+			className={`md:w-52 w-full hover:text-dark-primary ${selected ? "text-dark-primary" : "text-white"}`}
+			 => onClick(category)}
+			 => setHovering(true)}
+			 => setHovering(false)}
+		>
+			{text}
+		</button>
+	);
+}
diff --git a/src/resources/ResourceItem.tsx b/src/resources/ResourceItem.tsx
@@ -0,0 +1,38 @@
+import { Link } from "react-router-dom";
+import type { Resource } from "../data/resources";
+
+interface ResourceItemProps extends Resource {
+	visible: boolean;
+}
+
+function ResourceItem(props: ResourceItemProps) {
+	return (
+		<Link
+			target="_blank"
+			to={props.link}
+			className={`${props.visible ? "visible" : "hidden"}`}
+		>
+			<div className="flex flex-col bg-dark-surface-variant rounded-xl text-center text-white p-4 hover:ring-dark-primary ring-1 ring-inset ring-white/[.3] transform transition-all hover:-translate-y-2 duration-300">
+				<div className="w-[250px] h-[375px]">
+					<div className="mx-auto">
+						<img
+							className="w-full h-full relative object-cover rounded-md"
+							src={"/assets/happy-coco.webp"}
+							alt={props.name}
+						/>
+					</div>
+					<span className="inline-block text-sm font-bold pt-4 justify-center align-middle">
+						{props.name}
+					</span>
+
+					<span className="block text-sm opacity-50">{props.extension}</span>
+					<span className="block text-sm opacity-50">
+						{props.date?.toLocaleDateString()}
+					</span>
+				</div>
+			</div>
+		</Link>
+	);
+}
+
+export default ResourceItem;