Skip to content

Commit

Permalink
Merge pull request #134 from HackHPI/feature/website-2.0-add-speakers
Browse files Browse the repository at this point in the history 
Feature/website 2.0 add speakers
  • Loading branch information
@DerCed
DerCed authored Feb 28, 2024
2 parents 5465dfe + 8d37831 commit 92db8d6
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 167 deletions.
2 changes: 2 additions & 0 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {TimeTable} from "../src/components/TimeTable/TimeTable";
import {Gallery} from "../src/components/Gallery/Gallery";
import {Faq} from "../src/components/Faq/Faq";
import Team from "../src/components/Team/Team";
import Speakers from "../src/components/Speakers/Speakers";
import {Features} from "../src/components/Features/Features";

export default function Page() {
Expand All @@ -19,6 +20,7 @@ export default function Page() {
<Features/>
<Sponsors />
<Registration/>
<Speakers/>
<TimeTable />
<Gallery />
<Faq />
Expand Down
Binary file added src/assets/images/speakers/FelixLennardHake.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 22 additions & 25 deletions src/components/Gallery/Gallery.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ import DSC02998 from '../../assets/images/event/DSC02998_1920.webp'
import DSC03006 from '../../assets/images/event/DSC03006_1920.webp'
import DSC03022 from '../../assets/images/event/DSC03022_1920.webp'
import DSC03032 from '../../assets/images/event/DSC03032_1920.webp'
import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";


/*
Expand Down Expand Up @@ -167,11 +166,10 @@ export function Gallery() {
setSelectedIndex(index);
};
return (
<HackHPIWrapper>
<Container sx={{paddingTop: 10, paddingBottom: 10}}>
<Typography variant={"h2"} component={"h1"} gutterBottom>Gallery</Typography>
<Grid container spacing={7} alignItems="center">
{/*<Grid item xs={12} md={4}>
<Container sx={{paddingTop: 10, paddingBottom: 10}}>
<Typography variant={"h2"} component={"h1"} gutterBottom>Gallery</Typography>
<Grid container spacing={7} alignItems="center">
{/*<Grid item xs={12} md={4}>
<Card sx={{width: '100%', bgcolor: 'background.paper'}}>
<List component="nav" aria-label="main mailbox folders">
{
Expand All @@ -194,26 +192,25 @@ export function Gallery() {
</List>
</Card>
</Grid> */}
<Grid item xs={12} md={12}>
<Box sx={{maxHeight: "30rem", overflowY: "scroll"}}>
<ImageList variant="masonry" cols={3} gap={8}>
{faqs[selectedIndex].items.map((item, i) => (
<ImageListItem key={i}>
<img
key={"img"+i}
srcSet={`${item.src}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.src}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</Box>
</Grid>
<Grid item xs={12} md={12}>
<Box sx={{maxHeight: "30rem", overflowY: "scroll"}}>
<ImageList variant="masonry" cols={3} gap={8}>
{faqs[selectedIndex].items.map((item, i) => (
<ImageListItem key={i}>
<img
key={"img" + i}
srcSet={`${item.src}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.src}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</Box>
</Grid>
</Container>
</HackHPIWrapper>
</Grid>
</Container>
)

}
156 changes: 43 additions & 113 deletions src/components/Speakers/Speakers.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,70 @@
import {Avatar, Box, Card, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
import CedricRischeProfile from "../../assets/images/team/cedric_rische.jpg"
"use client"
import {Box, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
import FelixLennardHake from "../../assets/images/speakers/FelixLennardHake.jpg"
import {WindowCard} from "../WindowCard/WindowCard";

const speakers = {
primary: [
{
name: "Cedric Rische",
position: "Some HackHPI Stuff",
profilePicture: CedricRischeProfile.src,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget magna vel purus blandit tincidunt. Integer auctor aliquam mauris, sit amet ultricies lacus bibendum sit amet. Nullam scelerisque, orci nec congue tristique, metus justo iaculis odio, ac suscipit arcu metus vitae orci. Nam tincidunt quam eget dui bibendum varius. Ut ultricies et erat non feugiat. In quis ex in turpis mattis vestibulum vitae quis lorem. Pellentesque ac consectetur lacus, imperdiet semper metus. Praesent tincidunt diam augue, vitae luctus quam lacinia ac."
},
{
name: "Cedric Rische",
position: "Some HackHPI Stuff",
profilePicture: CedricRischeProfile.src,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget magna vel purus blandit tincidunt. Integer auctor aliquam mauris, sit amet ultricies lacus bibendum sit amet. Nullam scelerisque, orci nec congue tristique, metus justo iaculis odio, ac suscipit arcu metus vitae orci. Nam tincidunt quam eget dui bibendum varius. Ut ultricies et erat non feugiat. In quis ex in turpis mattis vestibulum vitae quis lorem. Pellentesque ac consectetur lacus, imperdiet semper metus. Praesent tincidunt diam augue, vitae luctus quam lacinia ac."
name: "Felix Lennard Hake",
position: "Mobility policy officer at Bitkom, Germany's digital association",
profilePicture: FelixLennardHake.src,
description: "Felix is responsible for Bitkom's political and regulatory work on smart mobility. Together with manufacturers, tech companies, mobility service providers and transport companies, Felix is committed to a connected, intelligent and sustainable mobility ecosystem - in rural areas as well as in cities and metropolitan regions. He is also responsible for the Digital Aviation working group. Prior to joining Bitkom, Felix worked for a political strategy and communications consultancy for several years and completed a Blue Book traineeship in the EU Commission's DG CONNECT. He studied sociology, politics and economics as well as European studies and political science in Friedrichshafen, Paris and Berlin.",
linkedIn: "felix-lennart-hake"
},
],
secondary: [
{
name: "Cedric Rische",
position: "Some HackHPI Stuff",
profilePicture: CedricRischeProfile.src,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget magna vel purus blandit tincidunt. Integer auctor aliquam mauris, sit amet ultricies lacus bibendum sit amet. Nullam scelerisque, orci nec congue tristique, metus justo iaculis odio, ac suscipit arcu metus vitae orci. Nam tincidunt quam eget dui bibendum varius. Ut ultricies et erat non feugiat. In quis ex in turpis mattis vestibulum vitae quis lorem. Pellentesque ac consectetur lacus, imperdiet semper metus. Praesent tincidunt diam augue, vitae luctus quam lacinia ac."
},
{
name: "Cedric Rische",
position: "Some HackHPI Stuff",
profilePicture: CedricRischeProfile.src,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget magna vel purus blandit tincidunt. Integer auctor aliquam mauris, sit amet ultricies lacus bibendum sit amet. Nullam scelerisque, orci nec congue tristique, metus justo iaculis odio, ac suscipit arcu metus vitae orci. Nam tincidunt quam eget dui bibendum varius. Ut ultricies et erat non feugiat. In quis ex in turpis mattis vestibulum vitae quis lorem. Pellentesque ac consectetur lacus, imperdiet semper metus. Praesent tincidunt diam augue, vitae luctus quam lacinia ac."
},
{
name: "Cedric Rische",
position: "Some HackHPI Stuff",
profilePicture: CedricRischeProfile.src,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget magna vel purus blandit tincidunt. Integer auctor aliquam mauris, sit amet ultricies lacus bibendum sit amet. Nullam scelerisque, orci nec congue tristique, metus justo iaculis odio, ac suscipit arcu metus vitae orci. Nam tincidunt quam eget dui bibendum varius. Ut ultricies et erat non feugiat. In quis ex in turpis mattis vestibulum vitae quis lorem. Pellentesque ac consectetur lacus, imperdiet semper metus. Praesent tincidunt diam augue, vitae luctus quam lacinia ac."
},
]
}

function Speakers() {
const theme = useTheme();
console.log(theme.components.MuiCard.styleOverrides.root)
return (
<Container sx={{paddingBottom: 20}} maxWidth={false}>
<Typography variant={"h1"} gutterBottom>Speakers</Typography>
<Container sx={{paddingBottom: 10, paddingTop: 10}}>
<Typography variant={"h2"} gutterBottom>Speakers</Typography>
<Grid container spacing={10}>
<Grid item xs={12} md={6}>
<Grid item xs={12} md={12}>
<Stack spacing={3}>
{speakers.primary.map(speaker => (
<Card elevation={5} key={speaker.name} sx={{height: "17rem"}}>
<Grid container>
<Grid item xs={12} md={3}>
<Paper sx={{
borderRadius: theme.components.MuiCard.styleOverrides.root.borderRadius,
background: `url(${speaker.profilePicture})`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundColor: "#e0e0e0",
aspectRatio: "1 / 1 !important",
height: "auto",
maxWidth: "100%"
}}
/>
</Grid>
<Grid item xs={12} md={9} p={3}>
<Stack spacing={3}>
<Box>
<Typography variant={"h3"}>{speaker.name}</Typography>
<Typography variant={"subtitle"} color={"text.disabled"}>
{speaker.position}
</Typography>
</Box>
<Typography
sx={{
display: "-webkit-box",
"-webkit-box-orient": "vertical",
"-webkit-line-clamp": "7",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{speaker.description}
</Typography>
</Stack>
</Grid>
</Grid>
</Card>
))}
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Box>
<Grid container spacing={3}>
{speakers.secondary.map(speaker => (
<Grid item xs={12} md={6} key={speaker.name}>
<Card elevation={2} sx={{p: 3, height: "17rem"}}>
{speakers.primary.map(speaker => (
<WindowCard elevation={5} key={speaker.name}>
<Grid container spacing={5}>
<Grid item xs={12} md={3}>
<Paper sx={{
borderRadius: theme.components.MuiCard.styleOverrides.root.borderRadius,
background: `url(${speaker.profilePicture})`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundColor: "#e0e0e0",
aspectRatio: "1 / 1 !important",
height: "auto",
maxWidth: "100%"
}}
/>
</Grid>
<Grid item xs={12} md={9}>
<Stack spacing={3}>
<Box>
<Grid container spacing={3} alignItems={"center"}>
<Grid item xs={3}>
<Avatar src={speaker.profilePicture} sx={{
aspectRatio: "1 / 1",
height: "auto",
width: "100%"
}}/>
</Grid>
<Grid item xs={8}>
<Typography variant={"h4"}>{speaker.name}</Typography>
<Typography variant={"subtitle"} color={"text.disabled"}>
{speaker.position}
</Typography>
</Grid>
</Grid>

<Typography variant={"h4"}>{speaker.name}</Typography>
<Typography variant={"subtitle"} color={"text.disabled"}>
{speaker.position}
</Typography>
</Box>
<Typography
sx={{
display: "-webkit-box",
"-webkit-box-orient": "vertical",
"-webkit-line-clamp": "4",
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
//display: "-webkit-box",
//"-webkit-box-orient": "vertical",
//"-webkit-line-clamp": "7",
//overflow: "hidden",
//textOverflow: "ellipsis"
}}>
{speaker.description}
</Typography>
</Stack>
</Card>
</Grid>
</Grid>
))}
</Grid>
</Box>

</WindowCard>
))}
</Stack>
</Grid>
</Grid>


</Container>
)
}
Expand Down
Loading

0 comments on commit 92db8d6

Please sign in to comment.