diff --git a/gcl-website/src/Components/Navbar.js b/gcl-website/src/Components/Navbar.js index 8227fbd..136b1dd 100644 --- a/gcl-website/src/Components/Navbar.js +++ b/gcl-website/src/Components/Navbar.js @@ -19,6 +19,7 @@ const Navbar = () => { const location = useLocation(); const tabs = [ + { label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }, { label: 'Join Clubs', href: '/join-clubs' }, { label: 'Get Involved', href: '/get-involved' }, @@ -54,7 +55,7 @@ const Navbar = () => { setValue(false)} + onClick={() => setValue(0)} > { + const members = [ + { + name: 'Elsbeth Magilton', + title: 'President + Member of Nominating Committee', + email: 'elsbeth@girlscodelincoln.org', + }, + { + name: 'Jenna Vitosh', + title: 'Vice President + Member of Nominating Committee', + email: 'jenna@girlscodelincoln.org', + }, + { + name: 'Bonita Sharif', + title: 'Treasurer + Finance Committee Chair', + email: 'bonita@girlscodelincoln.org', + }, + { + name: 'Danielle Miller', + title: 'At Large Member + Finance Committee', + email: 'danielle@girlscodelincoln.org', + }, + { + name: 'Lana Zumbrunn', + title: 'At Large Member', + email: 'lana@girlscodelincoln.org', + }, + { + name: 'Ron Gallagher', + title: 'At Large Member', + email: 'ron@girlscodelincoln.org', + }, + { + name: 'Jaxon McCue', + title: 'At Large Member', + email: 'jaxon@girlscodelincoln.org', + }, + { + name: 'Ryan Olsen', + title: 'At Large Member', + email: 'ryangrace@girlscodelincoln.org', + }, + { + name: 'Maura Penas', + title: 'At Large Member', + email: 'maura@girlscodelincoln.org', + }, + { + name: 'Abby Rogers', + title: 'At Large Member', + email: 'abby@girlscodelincoln.org', + }, + { + name: 'Ryan Wolff', + title: 'At Large Member', + email: 'ryan@girlscodelincoln.org', + }, + ]; + + return ( + <> + Board + + {members.map((member) => ( + + + + ))} + + + ); +}; + +export default Board; diff --git a/gcl-website/src/Domains/About/LeadershipTeam.js b/gcl-website/src/Domains/About/LeadershipTeam.js new file mode 100644 index 0000000..46a050c --- /dev/null +++ b/gcl-website/src/Domains/About/LeadershipTeam.js @@ -0,0 +1,60 @@ +import { Grid, Typography } from '@mui/material'; +import PersonCard from './PersonCard'; + +import photoVal from './Assets/ValStehlik.jpg'; +import photoCiara from './Assets/CiaraBaumert.jpg'; +import photoVivian from './Assets/VivianJacobitz.jpg'; +import photoLeah from './Assets/LeahOlson.jpg'; + +const LeadershipTeam = () => { + const members = [ + { + name: 'Val Stehlik', + title: 'Director of Clubs', + image: photoVal, + }, + { + name: 'Ciara Baumert', + title: 'Director of Volunteers', + image: photoCiara, + email: 'volunteers@girlscodelincoln.org', + }, + { + name: 'Vivian Jacobitz', + title: 'Director of Curriculum', + image: photoVivian, + }, + { + name: 'Leah Olson', + title: 'Website Chair', + image: photoLeah, + }, + ]; + + return ( + <> + Leadership Team + + {members.map((member) => ( + + + + ))} + + + ); +}; + +export default LeadershipTeam; diff --git a/gcl-website/src/Domains/About/PersonCard.js b/gcl-website/src/Domains/About/PersonCard.js index 91a440b..957dd12 100644 --- a/gcl-website/src/Domains/About/PersonCard.js +++ b/gcl-website/src/Domains/About/PersonCard.js @@ -2,44 +2,43 @@ import { Card, CardContent, CardMedia, - Grid, - Link, + IconButton, Typography, - useTheme, } from '@mui/material'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; const PersonCard = (props) => { - const theme = useTheme(); - return ( - - - - - + + {props.image && ( + + )} + + + + {props.name} + + + {props.title} - - - {props.name} - - {props.title} - - {props.email && ( - - {props.email} - - )} - - - + {props.email && ( + + + + )} + ); }; diff --git a/gcl-website/src/Domains/About/index.js b/gcl-website/src/Domains/About/index.js index bb1de3b..bee19ba 100644 --- a/gcl-website/src/Domains/About/index.js +++ b/gcl-website/src/Domains/About/index.js @@ -1,99 +1,34 @@ -import { Box, Container, Grid, Typography } from '@mui/material'; +import { Box, Container, Typography } from '@mui/material'; import Header from '../../Components/Header'; -import PersonCard from './PersonCard'; -import sampleImg from '../../Assets/clubs-background.jpg'; +import Board from './Board'; +import LeadershipTeam from './LeadershipTeam'; const About = () => { - const leadershipTeamMembers = [ - { - name: 'Val Stehlik', - title: 'Director of Clubs', - image: sampleImg, - }, - { - name: 'Ciara Baumert', - title: 'Director of Volunteers', - image: sampleImg, - email: 'volunteers@girlscodelincoln.org' - }, - { - name: 'Vivian Jacobitz', - title: 'Director of Curriculum', - image: sampleImg, - }, - { - name: 'Leah Olson', - title: 'Website Chair', - image: sampleImg, - }, - ]; - - const boardMembers = [ - { name: 'Elsbeth Magilton', title: 'Board President' }, - { name: 'Abby Rogers' }, - { name: 'Angela Garbacz' }, - { name: 'Bonita Sharif' }, - { name: 'Danielle Miller' }, - { name: 'Jaxon McCue' }, - { name: 'Jenna Vitosh' }, - { name: 'Lana Zumbrunn' }, - { name: 'Maura Penas' }, - { name: 'Ron Gallagher' }, - { name: 'Ryan Olsen' }, - { name: 'Ryan Wolff' }, - ]; - return ( - +
About Us
- + Girls Code Lincoln is a 501(c)(3) nonprofit organization. We strive to ignite passion for technology and leadership in young girls with the long-term goal of closing the gender gap in STEM. - - We host multiweek technology clubs for 4th through 9th grade girls. All clubs - are completely free and 100% volunteer-run. + We host multiweek technology clubs for 4th through 9th grade girls. + All clubs are completely free and 100% volunteer-run. - We partner with Nebraska organizations and build in-house curriculum to teach technology, leadership, and life skills. - Leadership Team - - {leadershipTeamMembers.map((member) => ( - - - - ))} - - - Board - - {boardMembers.map((member) => ( - - - - ))} - + + );