2024 Speakers (#269)

* update partner logos

* update json for 2024 speakers

* add speaker photos

* change font of name and title

src/app/components/speakers/speakers.jsx

@@ -1,47 +1,43 @@
-
-import React from 'react';
-import { speakersData } from "assets/data/speakers-info.js";
-import './speakers.scss'
+import React from "react";
+import { speakersData } from "src/app/data/speakers-info.js";
+import "./speakers.scss";
 
 const Speaker = (name, title, photo, index) => {
-    return (
-        <div className="speaker-img-wrapper">
-            <img 
-                src = {require('assets/images/speaker-photos/'+photo+'.jpeg')}
-                alt = {name + "'s profile picture"}
-            />
-            <div className="text">
-                <h4>{name}</h4>
-                <p>{title}</p>
-            </div>
-        </div>
-    );
-}
+	return (
+		<div className="speaker-img-wrapper">
+			<img
+				src={"assets/images/2024-speaker-photos/" + photo + ".png"}
+				alt={name + "'s profile picture"}
+			/>
+			<div className="text">
+				<h4>{name}</h4>
+				<p>{title}</p>
+			</div>
+		</div>
+	);
+};
 
 const renderSpeakers = (speakers) => {
-    return (
-        <div className="speaker-photos">
-            {speakers.map((speaker, index) => 
-                Speaker(speaker.name, speaker.title, speaker.photo, index)
-            )}
-        </div>
-    ) 
-}
+	return (
+		<div className="speaker-photos">
+			{speakers.map((speaker, index) =>
+				Speaker(speaker.name, speaker.title, speaker.photo, index)
+			)}
+		</div>
+	);
+};
 
-export default class Speakers extends React.Component {
-    render() {
-        return (
-            <div id="speakers">
-                <p className="subheader">Opening Speakers</p>
-                {renderSpeakers(speakersData.opening)}
-                <p className="subheader">Closing Speakers</p>
-                {renderSpeakers(speakersData.closing)}
-                <p className="subheader">Panelists</p>
-                {renderSpeakers(speakersData.panelists)}
-            </div>
-        )
-    }
-}
+const Speakers = () => {
+	return (
+		<div id="speakers">
+			<p className="subheader">Opening Speakers</p>
+			{renderSpeakers(speakersData.opening)}
+			<p className="subheader">Closing Speakers</p>
+			{renderSpeakers(speakersData.closing)}
+			<p className="subheader">Panelists</p>
+			{renderSpeakers(speakersData.panelists)}
+		</div>
+	);
+};
 
-// <p className="subheader">Keynote</p>
-// {renderSpeakers(speakersData.keynotes)}
+export default Speakers;

src/app/components/speakers/speakers.scss

@@ -5,6 +5,11 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-evenly;
+	font-family: "Varela", sans-serif;
+
+	@media screen and (max-width: $break-small) {
+		margin: 10px 0px 40px;
+	}
 
 	.speaker-img-wrapper {
 		padding: 1em;
@@ -16,6 +21,11 @@
 			margin-bottom: 20px;
 			object-fit: cover;
 			border-radius: 50%;
+
+			@media screen and (max-width: $break-small) {
+				height: 150px;
+				width: 150px;
+			}
 		}
 	}
 

src/app/data/speakers-info.js

@@ -1,50 +1,63 @@
 let speakersData = {
-  panelists: [
-    {
-      photo: "alyssa_darjuan",
-      name: "Alyssa Darjuan",
-      title: "Software Engineer at Zillow",
-    },
-    {
-      photo: "rupa_prasad",
-      name: "Rupa Prasad",
-      title: "Program Manager at Crowdstrike ",
-    },
-    {
-      photo: "dayana_alvarez",
-      name: "Dayana Alvarez",
-      title: "Product Designer at Spotify ",
-    },
-  ],
-  closing: [
-    {
-      photo: "tara_elsey",
-      name: "Tara Elsey",
-      title: "Sr. Software Engineer at Cox Automotive",
-    },
-    {
-      photo: "janet_chavez_erazo",
-      name: "Janet Chavez Erazo",
-      title: "Data & Analytics Consultant at Slalom ",
-    },
-  ],
-  opening: [
-    {
-      photo: "valentyna_yurtyn",
-      name: "Valentyna Yurtyn",
-      title: "Principal Software Engineer at Cox Automotive",
-    },
-    {
-      photo: "thomas_andriola",
-      name: "Tom Andriola",
-      title: "Chief Digital Officer at UC Irvine",
-    },
-    {
-      photo: "shohreh_bozorgmehri",
-      name: "Shohreh Bozorgmehri",
-      title: "Divisional Director at UC Irvine OIT",
-    },
-  ],
+	panelists: [
+		{
+			photo: "sarah_ahmad",
+			name: "Sarah Ahmad",
+			title:
+				"Software & Semiconductor Portfolio Director at Dassault Systèmes, ENOVIA",
+		},
+		{
+			photo: "grace_mccubbins",
+			name: "Grace McCubbins",
+			title: "CEO of Darmok Designs",
+		},
+		{
+			photo: "nadia_ahmed",
+			name: "Nadia Ahmed",
+			title:
+				"Assistant Professor of Computer Science, Saddleback College & UC Irvine",
+		},
+		{
+			photo: "jennifer_lee_wong-Ma",
+			name: "Jennifer Lee Wong-Ma",
+			title:
+				"Associate Professor of Teaching, Vice Chair of Undergraduate Studies at UC Irvine",
+		},
+	],
+	closing: [
+		{
+			photo: "dionne_mejer",
+			name: "Dionne Mejer",
+			title: "Founder of Revenue by Design",
+		},
+		{
+			photo: "tanesha_moody",
+			name: "Tanesha Moody",
+			title: "Chief Empowerment Officer at Full Out Coaching",
+		},
+		{
+			photo: "salma_elmalaki",
+			name: "Salma Elmalaki",
+			title: "Assistant Professor of Teaching at UC Irvine",
+		},
+	],
+	opening: [
+		{
+			photo: "sheryl_sandberg",
+			name: "Sheryl Sandberg",
+			title: "Previous COO of Meta",
+		},
+		{
+			photo: "daniel_kha_le",
+			name: "Daniel Kha Le",
+			title: "Chief Data Officer of Melissa",
+		},
+		{
+			photo: "ikram_guerd",
+			name: "Ikram Guerd",
+			title: "VP of Global Marketing – Managing Director US of ASPIVIX",
+		},
+	],
 };
 
 export { speakersData };

src/app/views/home/Home.jsx

@@ -1,11 +1,13 @@
 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 { Footer } 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 "./Home.scss";
 
@@ -93,6 +95,13 @@ const Home = () => {
 			</section>
 			<Sponsors />
 			<Partners />
+
+			{/* SPEAKERS ******************/}
+			<section id="speakers">
+				<img className="section-title" src={speakers_title} alt="Speakers" />
+				<Speakers />
+			</section>
+
 			<Footer />
 		</div>
 	);

src/app/views/home/Home.scss

@@ -397,11 +397,11 @@ body {
 		align-items: center;
 		flex-direction: column;
 		margin-top: 50px;
+		color: $darkPurple;
 
 		.section-title {
-			height: 110px;
+			height: 250px;
 			@media screen and (max-width: $break-medium) {
-				height: 25vw;
 				max-height: 150px;
 			}
 		}