Merge pull request #270 from WICS-UCI/2024-meet-the-team

2024 Meet The Team

src/app/components/meet-team/team.jsx

@@ -1,65 +1,21 @@
-import React from "react";
-import './team.scss';
+import { organizers } from "src/app/data/team-info";
+import "./team.scss";
 
+const Team = () => {
+	const images = organizers.map((organizer, i) => (
+		<div key={i} style={{ display: "inline-block" }}>
+			<div className="organizer-img-wrapper">
+				<img
+					src={
+						"assets/images/2024-organizer-photos/" + organizer.photo + ".jpg"
+					}
+					alt={organizer.photo + "'s profile picture"}
+				/>
+			</div>
+			<p>{organizer.name}</p>
+		</div>
+	));
+	return <div id="organizer-photos">{images}</div>;
+};
 
-export default class Team extends React.Component {
-    render() {
-        let organizers = [
-            {photo: "alan", name: "Alan Chang"},
-            {photo: "alicia", name: "Alicia Chuang"},
-            {photo: "alisa", name: "Alisa Lu"},
-            {photo: "araam", name: "Araam Abutaha"},
-            {photo: "audrey", name: "Audrey Lam"},
-            {photo: "avent", name: "Avent Chiu"},
-            {photo: "brian", name: "Brian Lin"},
-            {photo: "caroline", name: "Caroline Wang"},
-            {photo: "cheryl", name: "Cheryl Chen"},
-            {photo: "chloe", name: "Chloe Cheng"},
-            {photo: "cinta", name: "Cinta Adhiningrat"},
-            {photo: "crystal", name: "Crystal Lai"},
-            {photo: "grace", name: "Grace Manning"},
-            {photo: "graceW", name: "Grace Wang"},
-            {photo: "hang", name: "Hang Cao"},
-            {photo: "jefferey", name: "Jefferey Lee Chea"},
-            {photo: "jenny", name: "Jenny Liu"},
-            {photo: "kirby", name: "Kirby Ammari"},
-            {photo: "kristen", name: "Kristen Yee"},
-            {photo: "mason", name: "Mason Wong"},
-            {photo: "mignon", name: "Mignon April Lee"},
-            {photo: "mirelle", name: "Mirelle George"},
-            {photo: "nathanC", name: "Nathan Choi"},
-            {photo: "nathan", name: "Nathan Huey"},
-            {photo: "nicole", name: "Nicole Nguyen"},
-            {photo: "philip", name: "Philip Truong"},
-            {photo: "randy", name: "Randy Huynh"},
-            {photo: "riley", name: "Riley Wong"},
-            {photo: "rochelle", name: "Rochelle Nixon"},
-            {photo: "rosalind", name: "Rosalind Guo"},
-            {photo: "ruslan", name: "Ruslan Manoharan"},
-            {photo: "ryan", name: "Ryan Eurich"},
-            {photo: "sam", name: "Sam Der"},
-            {photo: "shreshta", name: "Shreshta Kumar"},
-            {photo: "taylor", name: "Taylor Quach"}
-        ];
-
-        const images = organizers.map((organizer, i) =>
-            <div key={i} style={{display:"inline-block" }}>
-                <div className="organizer-img-wrapper">
-                    <img 
-                        src = {require('assets/images/organizer-photos/'+organizer.photo+'.jpg')}
-                        alt = {organizer.photo + "'s profile picture"}
-                        //onMouseOver={e => (e.currentTarget.src = require('assets/images/organizer-photos-funny/'+organizer.photo+'-funny.jpeg'))}
-                        //onMouseOut={e => (e.currentTarget.src = require('assets/images/organizer-photos/'+organizer.photo+'.jpeg'))}
-                    />
-                </div>
-                <p>{organizer.name}</p>
-            </div>
-        );
-        return ( 
-            <div id = "organizer-photos">
-                {images}
-            </div>
-
-      );
-    }
-}
+export default Team;

src/app/components/meet-team/team.scss

@@ -9,6 +9,7 @@
 	}
 
 	.organizer-img-wrapper {
+		display: inline-block;
 		width: 200px;
 		height: 200px;
 		margin: 15px;

src/app/components/speakers/speakers.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { speakersData } from "src/app/data/speakers-info.js";
 import "./speakers.scss";
 
-const Speaker = (name, title, photo, index) => {
+const Speaker = ({ name, title, photo }) => {
 	return (
 		<div className="speaker-img-wrapper">
 			<img
@@ -20,9 +20,14 @@ const Speaker = (name, title, photo, index) => {
 const renderSpeakers = (speakers) => {
 	return (
 		<div className="speaker-photos">
-			{speakers.map((speaker, index) =>
-				Speaker(speaker.name, speaker.title, speaker.photo, index)
-			)}
+			{speakers.map((speaker, index) => (
+				<Speaker
+					name={speaker.name}
+					title={speaker.title}
+					photo={speaker.photo}
+					key={index}
+				/>
+			))}
 		</div>
 	);
 };

src/app/data/team-info.js

@@ -0,0 +1,39 @@
+let organizers = [
+	{ photo: "Adhiti", name: "Adhiti Chandramohan" },
+	{ photo: "Albert", name: "Albert Wang" },
+	{ photo: "Alice", name: "Alice Tran" },
+	{ photo: "Angelina", name: "Angelina Wang" },
+	{ photo: "Anjali", name: "Anjali Bhimanadham" },
+	{ photo: "Arnav", name: "Arnav Nigam" },
+	{ photo: "Audrey", name: "Audrey Lam" },
+	{ photo: "Chi-Wei", name: "Chi-Wei Tai" },
+	{ photo: "Clara", name: "Clara Chen" },
+	{ photo: "Crystal", name: "Crystal Lai" },
+	{ photo: "Heather", name: "Heather Nguyen Phuoc" },
+	{ photo: "Jefferey", name: "Jefferey Chea" },
+	{ photo: "Jyoti", name: "Jyoti Maharjan" },
+	{ photo: "Kali", name: "Kali Daschoudhary " },
+	{ photo: "Kristin", name: "Kristin Lim" },
+	{ photo: "Maitreyi", name: "Maitreyi Pareek" },
+	{ photo: "Meena", name: "Meenakshi Mynampati" },
+	{ photo: "Mehek", name: "Mehek Bhatnagar" },
+	{ photo: "Mirelle", name: "Mirelle George" },
+	{ photo: "Nayeli_Karlisle", name: "Nayeli Karlisle Soon" },
+	{ photo: "Nicole", name: "Nicole Nguyen" },
+	{ photo: "Ryan", name: "Ryan Eurich" },
+	{ photo: "Rylie", name: "Rylie Kim" },
+	{ photo: "Sam", name: "Sam Der" },
+	{ photo: "Sanika", name: "Sanika Bhamare" },
+	{ photo: "Sharmada", name: "Sharmada Honnavalli" },
+	{ photo: "Shreshta", name: "Shreshta Kumar" },
+	{ photo: "Sophia", name: "Sophia Zhang" },
+	{ photo: "Sriharshini", name: "Sriharshini Gubbala" },
+	{ photo: "Tanusree", name: "Tanusree Banerjee" },
+	{ photo: "Taylor", name: "Taylor Quach" },
+	{ photo: "Timothy", name: "Timothy Pham" },
+	{ photo: "Vimala", name: "Vimala Machiraju" },
+	{ photo: "Violet", name: "Violet Hays" },
+	{ photo: "Wendy", name: "Wendy Sanka" },
+];
+
+export { organizers };

src/app/views/home/Home.jsx

@@ -2,12 +2,14 @@ import FAQs from "src/app/components/faqs/FAQs";
 import Sponsors from "src/app/components/sponsors/Sponsors";
 import Partners from "src/app/components/partners/Partners";
 import Speakers from "src/app/components/speakers/speakers";
+import Team from "src/app/components/meet-team/team";
 import { Footer, VenusButton } from "src/app/components";
 
 import vh_title from "/assets/images/titles/venushacks.svg";
 import about_title from "/assets/images/titles/vh-about.svg";
 import faq_title from "/assets/images/titles/vh-faq.png";
 import speakers_title from "/assets/images/titles/vh-speakers.svg";
+import meet_team_title from "/assets/images/titles/vh-meet-the-team.svg";
 
 import "./Home.scss";
 
@@ -106,6 +108,15 @@ const Home = () => {
 				<Speakers />
 			</section>
 
+			<section id="meet-team">
+				<img
+					className="section-title"
+					src={meet_team_title}
+					alt="Meet the Team"
+				/>
+				<Team />
+			</section>
+
 			<Footer />
 		</div>
 	);

src/app/views/home/Home.scss

@@ -428,12 +428,13 @@ body {
 		align-items: center;
 		flex-direction: column;
 		margin-top: 50px;
+		color: $darkPurple;
 
 		.section-title {
-			height: 100px;
+			height: 250px;
 			@media screen and (max-width: $break-medium) {
-				height: 15vw;
-				max-height: 70px;
+				// height: 15vw;
+				max-height: 150px;
 			}
 		}
 	}