diff --git a/package-lock.json b/package-lock.json index 7f06eab..ff72a33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1797,44 +1797,70 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/bare-events": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz", - "integrity": "sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==", + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz", + "integrity": "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==", "optional": true }, "node_modules/bare-fs": { - "version": "2.3.5", - "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz", - "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.1.2.tgz", + "integrity": "sha512-8wSeOia5B7LwD4+h465y73KOdj5QHsbbuoUfPBi+pXgFJIPuG7SsiOdJuijWMyfid49eD+WivpfY7KT8gbAzBA==", "optional": true, "dependencies": { - "bare-events": "^2.0.0", - "bare-path": "^2.0.0", - "bare-stream": "^2.0.0" + "bare-events": "^2.5.4", + "bare-path": "^3.0.0", + "bare-stream": "^2.6.4" + }, + "engines": { + "bare": ">=1.16.0" + }, + "peerDependencies": { + "bare-buffer": "*" + }, + "peerDependenciesMeta": { + "bare-buffer": { + "optional": true + } } }, "node_modules/bare-os": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz", - "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==", - "optional": true + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz", + "integrity": "sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==", + "optional": true, + "engines": { + "bare": ">=1.14.0" + } }, "node_modules/bare-path": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz", - "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz", + "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==", "optional": true, "dependencies": { - "bare-os": "^2.1.0" + "bare-os": "^3.0.1" } }, "node_modules/bare-stream": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.1.tgz", - "integrity": "sha512-eVZbtKM+4uehzrsj49KtCy3Pbg7kO1pJ3SKZ1SFrIH/0pnj9scuGGgUlNDf/7qS8WKtGdiJY5Kyhs/ivYPTB/g==", + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz", + "integrity": "sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==", "optional": true, "dependencies": { "streamx": "^2.21.0" + }, + "peerDependencies": { + "bare-buffer": "*", + "bare-events": "*" + }, + "peerDependenciesMeta": { + "bare-buffer": { + "optional": true + }, + "bare-events": { + "optional": true + } } }, "node_modules/base64-js": { @@ -6680,16 +6706,16 @@ } }, "node_modules/tar-fs": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz", - "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==", + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz", + "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==", "dependencies": { "pump": "^3.0.0", "tar-stream": "^3.1.5" }, "optionalDependencies": { - "bare-fs": "^2.1.1", - "bare-path": "^2.1.0" + "bare-fs": "^4.0.1", + "bare-path": "^3.0.0" } }, "node_modules/tar-stream": { diff --git a/public/about-images/people/angela.png b/public/about-images/people/angela.png new file mode 100644 index 0000000..7e8b5b0 Binary files /dev/null and b/public/about-images/people/angela.png differ diff --git a/public/about-images/people/ankita.png b/public/about-images/people/ankita.png new file mode 100644 index 0000000..451b594 Binary files /dev/null and b/public/about-images/people/ankita.png differ diff --git a/public/about-images/people/caity.png b/public/about-images/people/caity.png new file mode 100644 index 0000000..5859656 Binary files /dev/null and b/public/about-images/people/caity.png differ diff --git a/public/about-images/people/claudio.png b/public/about-images/people/claudio.png new file mode 100644 index 0000000..c0d0977 Binary files /dev/null and b/public/about-images/people/claudio.png differ diff --git a/public/about-images/people/cole.png b/public/about-images/people/cole.png new file mode 100644 index 0000000..70c963e Binary files /dev/null and b/public/about-images/people/cole.png differ diff --git a/public/about-images/people/colin.png b/public/about-images/people/colin.png new file mode 100644 index 0000000..487b95d Binary files /dev/null and b/public/about-images/people/colin.png differ diff --git a/public/about-images/people/dayanita.png b/public/about-images/people/dayanita.png new file mode 100644 index 0000000..96889b7 Binary files /dev/null and b/public/about-images/people/dayanita.png differ diff --git a/public/about-images/people/ethan.png b/public/about-images/people/ethan.png new file mode 100644 index 0000000..c054da9 Binary files /dev/null and b/public/about-images/people/ethan.png differ diff --git a/public/about-images/people/hana.png b/public/about-images/people/hana.png new file mode 100644 index 0000000..0861c24 Binary files /dev/null and b/public/about-images/people/hana.png differ diff --git a/public/about-images/people/lena.png b/public/about-images/people/lena.png new file mode 100644 index 0000000..416ca4c Binary files /dev/null and b/public/about-images/people/lena.png differ diff --git a/public/about-images/people/megan.jpg b/public/about-images/people/megan.jpg new file mode 100644 index 0000000..00c6a4b Binary files /dev/null and b/public/about-images/people/megan.jpg differ diff --git a/public/about-images/people/taran.png b/public/about-images/people/taran.png new file mode 100644 index 0000000..b31f6c0 Binary files /dev/null and b/public/about-images/people/taran.png differ diff --git a/public/about-images/people/wilbert.png b/public/about-images/people/wilbert.png new file mode 100644 index 0000000..d69559f Binary files /dev/null and b/public/about-images/people/wilbert.png differ diff --git a/public/about-images/people/william.png b/public/about-images/people/william.png new file mode 100644 index 0000000..e75ab26 Binary files /dev/null and b/public/about-images/people/william.png differ diff --git a/src/components/about/Team.tsx b/src/components/about/Team.tsx index 834b0aa..2dac5c7 100644 --- a/src/components/about/Team.tsx +++ b/src/components/about/Team.tsx @@ -1,18 +1,133 @@ +// src/components/about/Team.tsx - Main team component with team data +import { TeamSection } from "./TeamSection"; +import { TeamMemberProps } from "./TeamCard"; + +// Define team data structure - easy to update with new members or sections +type TeamData = { + [key: string]: TeamMemberProps[]; +}; + +// Team data populated from the images you shared +const teamData: TeamData = { + "Executive Team": [ + { + name: "Megan Mendez", + role: "President", + imageSrc: "/about-images/people/megan.jpg", + linkedinUrl: "https://www.linkedin.com/in/megan-mendez-870826257/", + }, + { + name: "Ethan Ruddell", + role: "Vice-President", + imageSrc: "/about-images/people/ethan.png", + linkedinUrl: "https://www.linkedin.com/in/ethan-ruddell/", + }, + { + name: "Nathan Kim", + role: "Secretary", + imageSrc: "/about-images/people/matthew-li.jpg", + }, + { + name: "Angela Ung", + role: "Member Involvement", + imageSrc: "/about-images/people/angela.png", + linkedinUrl: "https://www.linkedin.com/in/angelaunguf/", + }, + { + name: "Caity Beasley", + role: "Event Coordinator", + imageSrc: "/about-images/people/caity.png", + }, + { + name: "William Zhu", + role: "Build Director", + imageSrc: "/about-images/people/william.png", + linkedinUrl: "https://www.linkedin.com/in/william-zhu-uf/", + }, + { + name: "Taran", + role: "Build Director", + imageSrc: "/about-images/people/taran.png", + }, + ], + TechTeam: [ + { + name: "Claudio Sciotto", + role: "Lead Developer", + imageSrc: "/about-images/people/claudio.png", + linkedinUrl: "https://www.linkedin.com/in/claudiosciotto/", + }, + { + name: "Cole Morgan", + role: "Developer", + imageSrc: "/about-images/people/cole.png", + linkedinUrl: "https://www.linkedin.com/in/cole-morgan-/", + }, + { + name: "Wilbert Hernandez", + role: "Product Manager", + imageSrc: "/about-images/people/wilbert.png", + linkedinUrl: "https://www.linkedin.com/in/hernandez-wilbert/", + }, + ], + UIUXTeam: [ + { + name: "Colin Mendoza", + role: "UI/UX Product Manager", + imageSrc: "/about-images/people/colin.png", + linkedinUrl: "https://www.linkedin.com/in/colin-mendoza/", + }, + { + name: "Dayanita Kumar", + role: "UI/UX Designer", + imageSrc: "/about-images/people/dayanita.png", + linkedinUrl: "https://www.linkedin.com/in/dayanita-kumar/", + }, + { + name: "Hana Checketts", + role: "UI/UX Designer", + imageSrc: "/about-images/people/hana.png", + linkedinUrl: "https://www.linkedin.com/in/hanachecketts/", + }, + { + name: "Ankita Narayan", + role: "UI/UX Designer", + imageSrc: "/about-images/people/ankita.png", + linkedinUrl: "https://www.linkedin.com/in/narayanankita/", + }, + { + name: "Lena Nguyen", + role: "UI/UX Designer", + imageSrc: "/about-images/people/lena.png", + linkedinUrl: "https://www.linkedin.com/in/lena-t-nguyen/", + }, + ], + // You can easily add more sections as needed + // "Web Team": [], + // "Build Team": [], +}; + export default function Team() { return (
-
+

Meet Our Team

-

- Behind the Society of PC Building is a passionate team of - officers who work hard to bring our community together, organize - events, and foster a love for PC building. +

+ Behind the Society of PC Building is a passionate team of officers + who work hard to bring our community together, organize events, and + foster a love for PC building.

-
- Coming Soon! -
+ + {/* Render team sections dynamically from data */} + {Object.entries(teamData).map(([sectionTitle, members]) => ( + + ))}
diff --git a/src/components/about/TeamCard.tsx b/src/components/about/TeamCard.tsx new file mode 100644 index 0000000..752882d --- /dev/null +++ b/src/components/about/TeamCard.tsx @@ -0,0 +1,68 @@ +// src/components/about/TeamCard.tsx +"use client"; +import Image from "next/image"; +import { FaLinkedin } from "react-icons/fa"; +import { useState } from "react"; + +export type TeamMemberProps = { + name: string; + role: string; + imageSrc: string; + linkedinUrl?: string; // Optional LinkedIn URL + altText?: string; // Optional alt text for image +}; + +export const TeamCard: React.FC = ({ + name, + role, + imageSrc, + linkedinUrl, + altText, +}) => { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + {/* Card with image and info */} +
+ {/* Image container with fixed aspect ratio */} +
+ {altText +
+ + {/* Info section */} +
+

{name}

+
+ {role} +
+
+
+ + {/* LinkedIn overlay that appears on hover */} + {linkedinUrl && ( + + + + )} +
+ ); +}; diff --git a/src/components/about/TeamSection.tsx b/src/components/about/TeamSection.tsx new file mode 100644 index 0000000..ee99075 --- /dev/null +++ b/src/components/about/TeamSection.tsx @@ -0,0 +1,29 @@ +// src/components/about/TeamSection.tsx +import { TeamCard, TeamMemberProps } from "./TeamCard"; + +type TeamSectionProps = { + title: string; + members: TeamMemberProps[]; +}; + +export const TeamSection: React.FC = ({ title, members }) => { + return ( +
+

+ {title} +

+
+ {members.map((member, index) => ( + + ))} +
+
+ ); +};