diff --git a/public/assets/images/2024-speaker-photos/daniel_kha_le.png b/public/assets/images/2024-speaker-photos/daniel_kha_le.png new file mode 100644 index 0000000..e6a35ea Binary files /dev/null and b/public/assets/images/2024-speaker-photos/daniel_kha_le.png differ diff --git a/public/assets/images/2024-speaker-photos/dionne_mejer.png b/public/assets/images/2024-speaker-photos/dionne_mejer.png new file mode 100644 index 0000000..7de1b95 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/dionne_mejer.png differ diff --git a/public/assets/images/2024-speaker-photos/grace_mccubbins.png b/public/assets/images/2024-speaker-photos/grace_mccubbins.png new file mode 100644 index 0000000..1ab2fa3 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/grace_mccubbins.png differ diff --git a/public/assets/images/2024-speaker-photos/ikram_guerd.png b/public/assets/images/2024-speaker-photos/ikram_guerd.png new file mode 100644 index 0000000..ab6bf59 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/ikram_guerd.png differ diff --git a/public/assets/images/2024-speaker-photos/jennifer_lee_wong-Ma.png b/public/assets/images/2024-speaker-photos/jennifer_lee_wong-Ma.png new file mode 100644 index 0000000..5d7052c Binary files /dev/null and b/public/assets/images/2024-speaker-photos/jennifer_lee_wong-Ma.png differ diff --git a/public/assets/images/2024-speaker-photos/nadia_ahmed.png b/public/assets/images/2024-speaker-photos/nadia_ahmed.png new file mode 100644 index 0000000..902f8da Binary files /dev/null and b/public/assets/images/2024-speaker-photos/nadia_ahmed.png differ diff --git a/public/assets/images/2024-speaker-photos/salma_elmalaki.png b/public/assets/images/2024-speaker-photos/salma_elmalaki.png new file mode 100644 index 0000000..af10c75 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/salma_elmalaki.png differ diff --git a/public/assets/images/2024-speaker-photos/sarah_ahmad.png b/public/assets/images/2024-speaker-photos/sarah_ahmad.png new file mode 100644 index 0000000..cd9c776 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/sarah_ahmad.png differ diff --git a/public/assets/images/2024-speaker-photos/sheryl_sandberg.png b/public/assets/images/2024-speaker-photos/sheryl_sandberg.png new file mode 100644 index 0000000..9005812 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/sheryl_sandberg.png differ diff --git a/public/assets/images/2024-speaker-photos/tanesha_moody.png b/public/assets/images/2024-speaker-photos/tanesha_moody.png new file mode 100644 index 0000000..69d2426 Binary files /dev/null and b/public/assets/images/2024-speaker-photos/tanesha_moody.png differ diff --git a/public/assets/images/titles/vh-speakers.png b/public/assets/images/titles/vh-speakers.png deleted file mode 100644 index 3989635..0000000 Binary files a/public/assets/images/titles/vh-speakers.png and /dev/null differ diff --git a/public/assets/images/titles/vh-speakers.svg b/public/assets/images/titles/vh-speakers.svg new file mode 100644 index 0000000..77ef4dc --- /dev/null +++ b/public/assets/images/titles/vh-speakers.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/components/speakers/speakers.jsx b/src/app/components/speakers/speakers.jsx index a73c747..2ebc678 100644 --- a/src/app/components/speakers/speakers.jsx +++ b/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 ( -
- {name -
-

{name}

-

{title}

-
-
- ); -} + return ( +
+ {name +
+

{name}

+

{title}

+
+
+ ); +}; const renderSpeakers = (speakers) => { - return ( -
- {speakers.map((speaker, index) => - Speaker(speaker.name, speaker.title, speaker.photo, index) - )} -
- ) -} + return ( +
+ {speakers.map((speaker, index) => + Speaker(speaker.name, speaker.title, speaker.photo, index) + )} +
+ ); +}; -export default class Speakers extends React.Component { - render() { - return ( -
-

Opening Speakers

- {renderSpeakers(speakersData.opening)} -

Closing Speakers

- {renderSpeakers(speakersData.closing)} -

Panelists

- {renderSpeakers(speakersData.panelists)} -
- ) - } -} +const Speakers = () => { + return ( +
+

Opening Speakers

+ {renderSpeakers(speakersData.opening)} +

Closing Speakers

+ {renderSpeakers(speakersData.closing)} +

Panelists

+ {renderSpeakers(speakersData.panelists)} +
+ ); +}; -//

Keynote

-// {renderSpeakers(speakersData.keynotes)} +export default Speakers; diff --git a/src/app/components/speakers/speakers.scss b/src/app/components/speakers/speakers.scss index cd6cc7f..9d7bd66 100644 --- a/src/app/components/speakers/speakers.scss +++ b/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; + } } } diff --git a/src/app/data/speakers-info.js b/src/app/data/speakers-info.js index 1f21575..ec0042e 100644 --- a/src/app/data/speakers-info.js +++ b/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 }; diff --git a/src/app/views/home/Home.jsx b/src/app/views/home/Home.jsx index a464670..9957008 100644 --- a/src/app/views/home/Home.jsx +++ b/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 = () => { + + {/* SPEAKERS ******************/} +
+ Speakers + +
+