Skip to content

Commit

Permalink
Merge pull request #23 from mvhacks/infoslide
Browse files Browse the repository at this point in the history 
Adding animation to info boxes
  • Loading branch information
@emilymarkova
emilymarkova authored Jan 12, 2025
2 parents 4c8bea8 + e74b9e3 commit 9e2a621
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 112 deletions.
40 changes: 40 additions & 0 deletions package-lock.json
View file

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

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@types/node": "^16.18.113",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"framer-motion": "^11.17.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-multi-carousel": "^2.8.5",
Expand Down
259 changes: 148 additions & 111 deletions src/components/InfoPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Typography from '@mui/joy/Typography';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import React, {useState, useEffect} from 'react';
import { motion } from 'framer-motion';

export default function InfoPage() {
const [isMobile, setIsMobile] = useState<Boolean>(false);
Expand All @@ -22,121 +23,157 @@ export default function InfoPage() {
return (
<div>
{!isMobile && (<div style={{marginTop: "100px"}}>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "40%",
marginLeft: "10%",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginLeft: "48%",
marginRight: "10%",
marginTop: "100px",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "100px",
marginLeft: "10%",
marginBottom: "5%",
width: "40%",
backgroundColor: "black"
}}
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "40%",
marginLeft: "10%",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginLeft: "48%",
marginRight: "10%",
marginTop: "100px",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "100px",
marginLeft: "10%",
marginBottom: "5%",
width: "40%",
backgroundColor: "black"
}}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
</motion.div>
</div>)}
{isMobile && (<div style={{marginTop: "100px"}}>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
margin: "0 10%",
flexDirection: "column",
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
margin: "10% 10%" ,
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
margin: "10% 10%" ,
backgroundColor: "black",
padding: "5%"
}}
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
margin: "0 10%",
flexDirection: "column",
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
margin: "10% 10%" ,
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50}}
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
viewport={{ once: true, amount: 1 }}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
margin: "10% 10%" ,
backgroundColor: "black",
padding: "5%"
}}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
</motion.div>
</div>)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Title.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Title() {
level="body-lg"
variant="plain"
textColor="common.white"
sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", marginTop: "10px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
>
Each year, high school hackers from across the Bay Area come together at MVHacks to create cool projects, learn from experts, and participate in 12 hours of hacking! Hackers of all skill levels are welcome to compete, individually or as a group.
The date and time of this event are not finalized yet, but will be in Spring 2025 in the Bay Area.
Expand Down

0 comments on commit 9e2a621

Please sign in to comment.