Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to Leadership as well as notes update #177

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,4 @@

## Get Access to The Lab:

[Getting Swite Access](docs/swipe-access)

[Getting Swipe Access](docs/swipe-access)
43 changes: 25 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

72 changes: 37 additions & 35 deletions src/comps/LeadershipBox/LeadershipBox.jsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
import React, { Component } from "react";
import React from "react";
import { Box, Typography, Avatar, Grid } from "@mui/material";

import styles from "@/comps/LeadershipBox/leadership.module.css";

import Image from "next/image";

class LeadershipBox extends Component {
/*
Expects an image prop, which is a string
This will then generate a div with the image
If the string is blank, the uid will be used instead

Props needed: name, title, email
*/

// Check if any of the expected props are undefined

render() {
// Simple div with a title and value
if (this.props.src !== undefined) {
return (
<div class={styles.leadershipBox}>
<div class={styles.alignImage}>
<Image src={this.props.src} alt={this.props.name + "Image"}></Image>
</div>
<p>
<em>{this.props.title}</em>
</p>
<p>
<a href={"mailto:" + this.props.email}>{this.props.email}</a>
</p>
</div>
);
}
}
}
const LeadershipBox = ({ name, title, email, src }) => {
return (
<Grid item xs={12} sm={6} md={4}>
<Box sx={{ textAlign: "center" }}>
<Avatar
src={src.src}
alt={`Headshot of ${name}`}
sx={{
width: {
xs: '40vw', // 30% of the viewport width on small screens
sm: '40vw', // 20% on medium screens
md: '25vw', // 15% on larger screens
},
height: {
xs: '40vw',
sm: '40vw',
md: '25vw',
},
margin: "0 auto" }}
/>
<Typography variant="h6" sx={{ marginTop: 2 }}>
{name}
</Typography>
<Typography variant="subtitle1" color="textSecondary">
{title}
</Typography>
<Typography variant="body2">
<a href={`mailto:${email}`} aria-label={`Send an email to ${name}`}>
{email}
</a>
</Typography>
</Box>
</Grid>
);
};

export default LeadershipBox;
115 changes: 58 additions & 57 deletions src/pages/Leadership.jsx
Original file line number Diff line number Diff line change
@@ -1,71 +1,72 @@
//https://react-icons.github.io/react-icons/icons?name=bs
import React from "react";

import { Box, Grid, Typography, Divider } from "@mui/material";
import LeadershipBox from "@/comps/LeadershipBox/LeadershipBox.jsx";
import Baumann from "../../public/Headshots/Baumann.jpg";
import Gibbons from "../../public/Headshots/Gibbons.jpg";
import Forsyth from "../../public/Headshots/Forsyth2.jpg";
import Meadows from "../../public/Headshots/Meadows.jpg";
import Pritchard from "../../public/Headshots/Pritchard.jpeg";
import Blank from "../../public/Headshots/blank.jpeg";
import Ethan from "../../public/Headshots/Ethan.jpg";
import PB from "../../public/Headshots/pb.jpeg";

export default function Leadership() {
return (
<div>
<div class="App-pageHelper">
<h2>Meet Our Team: Student Staff</h2>
<hr></hr>
<div class="flex-row-left">
<LeadershipBox
name="Richard Gibbons"
src={Gibbons}
title="Richard Gibbons: Team Lead"
email="[email protected]"
></LeadershipBox>
<LeadershipBox
name="Henry Forsyth"
src={Forsyth}
title="Henry Forsyth: Mentor/Webdev"
email="[email protected]"
></LeadershipBox>
<LeadershipBox
name="Eddie Pritchard"
src={Pritchard}
title="Eddie Pritchard: Mentor"
email="[email protected]"
></LeadershipBox>
<LeadershipBox
name="Purv Bavishi"
src={PB}
title="Purv Bavishi: Mentor"
email="[email protected]"
></LeadershipBox>
<LeadershipBox
name="Ethan James"
src={Ethan}
title="Ethan James: Mentor"
email="[email protected]"
></LeadershipBox>
</div>
<h2>Meet Our Team: Professors</h2>
<hr></hr>
<div class="flex-row-left">
<LeadershipBox
name="William Baumann"
src={Baumann}
title="Dr.William Baumann: Professor"
email="[email protected]"
></LeadershipBox>
<LeadershipBox
name="Toby Meadows"
src={Meadows}
title="Dr.Toby Meadows: Professor"
email="[email protected]"
></LeadershipBox>
</div>
</div>
</div>
<Box sx={{ padding: 3 }}>
<Typography variant="h4" gutterBottom>
Meet Our Team: Student Staff
</Typography>
<Divider />
<Grid container spacing={3} sx={{ marginTop: 2 }}>
<LeadershipBox
name="Richard Gibbons"
src={Gibbons}
title="Team Lead"
email="[email protected]"
/>
<LeadershipBox
name="Henry Forsyth"
src={Forsyth}
title="Mentor / Web Developer"
email="[email protected]"
/>
<LeadershipBox
name="Eddie Pritchard"
src={Pritchard}
title="Mentor"
email="[email protected]"
/>
<LeadershipBox
name="Purv Bavishi"
src={PB}
title="Mentor"
email="[email protected]"
/>
<LeadershipBox
name="Ethan James"
src={Ethan}
title="Mentor"
email="[email protected]"
/>
</Grid>

<Typography variant="h4" gutterBottom sx={{ marginTop: 4 }}>
Meet Our Team: Professors
</Typography>
<Divider />
<Grid container spacing={3} sx={{ marginTop: 2 }}>
<LeadershipBox
name="William Baumann"
src={Baumann}
title="Professor"
email="[email protected]"
/>
<LeadershipBox
name="Toby Meadows"
src={Meadows}
title="Professor"
email="[email protected]"
/>
</Grid>
</Box>
);
}
7 changes: 7 additions & 0 deletions src/pages/getting_started.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { RxDiscordLogo } from "react-icons/rx";
import { BiPurchaseTagAlt } from "react-icons/bi";
import { GiSwipeCard } from "react-icons/gi";

import {Alert} from "@mui/material";

export default function GettingStarted({ new_members, returning_members }) {
return (
<div className="min-h-screen">
Expand All @@ -40,6 +42,11 @@ export default function GettingStarted({ new_members, returning_members }) {
buttonTitle="Click here to begin"
color="#f9f9f9"
>
<Alert severity="info">
If you need help with any of this process, please don't hesitate to
come into the lab and ask for help! Or reach out to leadership through
the Discord!
</Alert>
<ReactMarkdown class="App-standardPage" rehypePlugins={[rehypeRaw]}>
{new_members}
</ReactMarkdown>
Expand Down
Loading