Skip to content

Commit 9e2a621

Browse files
emilymarkovaemilymarkova
authored
Merge pull request #23 from mvhacks/infoslide
Adding animation to info boxes
2 parents 4c8bea8 + e74b9e3 commit 9e2a621

File tree

4 files changed

+190
-112
lines changed

4 files changed

+190
-112
lines changed

‎package-lock.json

Lines changed: 40 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@types/node": "^16.18.113",
1717
"@types/react": "^18.3.11",
1818
"@types/react-dom": "^18.3.1",
19+
"framer-motion": "^11.17.0",
1920
"react": "^18.3.1",
2021
"react-dom": "^18.3.1",
2122
"react-multi-carousel": "^2.8.5",

‎src/components/InfoPage.tsx

Lines changed: 148 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Typography from '@mui/joy/Typography';
33
import Card from '@mui/joy/Card';
44
import CardContent from '@mui/joy/CardContent';
55
import React, {useState, useEffect} from 'react';
6+
import { motion } from 'framer-motion';
67

78
export default function InfoPage() {
89
const [isMobile, setIsMobile] = useState<Boolean>(false);
@@ -22,121 +23,157 @@ export default function InfoPage() {
2223
return (
2324
<div>
2425
{!isMobile && (<div style={{marginTop: "100px"}}>
25-
<Card
26-
orientation="horizontal"
27-
size="md"
28-
variant="outlined"
29-
sx={{
30-
"--Card-padding": "16px",
31-
"--Card-radius": "26px",
32-
display: "flex",
33-
flexDirection: "column",
34-
width: "40%",
35-
marginLeft: "10%",
36-
backgroundColor: "black"
37-
}}>
38-
<CardContent sx={{alignItems: "center"}}>
39-
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
40-
<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>
41-
</CardContent>
42-
</Card>
43-
<Card
44-
orientation="horizontal"
45-
size="md"
46-
variant="outlined"
47-
sx={{
48-
"--Card-padding": "16px",
49-
"--Card-radius": "26px",
50-
display: "flex",
51-
flexDirection: "column",
52-
marginLeft: "48%",
53-
marginRight: "10%",
54-
marginTop: "100px",
55-
backgroundColor: "black"
56-
}}>
57-
<CardContent sx={{alignItems: "center"}}>
58-
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
59-
<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>
60-
</CardContent>
61-
</Card>
62-
<Card
63-
orientation="horizontal"
64-
size="md"
65-
variant="outlined"
66-
sx={{
67-
"--Card-padding": "16px",
68-
"--Card-radius": "26px",
69-
display: "flex",
70-
flexDirection: "column",
71-
marginTop: "100px",
72-
marginLeft: "10%",
73-
marginBottom: "5%",
74-
width: "40%",
75-
backgroundColor: "black"
76-
}}
26+
<motion.div
27+
initial={{ opacity: 0, y: 50}}
28+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
29+
viewport={{ once: true, amount: 1 }}
7730
>
78-
<CardContent sx={{alignItems: "center"}}>
79-
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
80-
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
81-
</CardContent>
82-
</Card>
31+
<Card
32+
orientation="horizontal"
33+
size="md"
34+
variant="outlined"
35+
sx={{
36+
"--Card-padding": "16px",
37+
"--Card-radius": "26px",
38+
display: "flex",
39+
flexDirection: "column",
40+
width: "40%",
41+
marginLeft: "10%",
42+
backgroundColor: "black"
43+
}}>
44+
<CardContent sx={{alignItems: "center"}}>
45+
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
46+
<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>
47+
</CardContent>
48+
</Card>
49+
</motion.div>
50+
<motion.div
51+
initial={{ opacity: 0, y: 50}}
52+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
53+
viewport={{ once: true, amount: 1 }}
54+
>
55+
<Card
56+
orientation="horizontal"
57+
size="md"
58+
variant="outlined"
59+
sx={{
60+
"--Card-padding": "16px",
61+
"--Card-radius": "26px",
62+
display: "flex",
63+
flexDirection: "column",
64+
marginLeft: "48%",
65+
marginRight: "10%",
66+
marginTop: "100px",
67+
backgroundColor: "black"
68+
}}>
69+
<CardContent sx={{alignItems: "center"}}>
70+
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
71+
<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>
72+
</CardContent>
73+
</Card>
74+
</motion.div>
75+
<motion.div
76+
initial={{ opacity: 0, y: 50}}
77+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
78+
viewport={{ once: true, amount: 1 }}
79+
>
80+
<Card
81+
orientation="horizontal"
82+
size="md"
83+
variant="outlined"
84+
sx={{
85+
"--Card-padding": "16px",
86+
"--Card-radius": "26px",
87+
display: "flex",
88+
flexDirection: "column",
89+
marginTop: "100px",
90+
marginLeft: "10%",
91+
marginBottom: "5%",
92+
width: "40%",
93+
backgroundColor: "black"
94+
}}
95+
>
96+
<CardContent sx={{alignItems: "center"}}>
97+
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
98+
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
99+
</CardContent>
100+
</Card>
101+
</motion.div>
83102
</div>)}
84103
{isMobile && (<div style={{marginTop: "100px"}}>
85-
<Card
86-
orientation="horizontal"
87-
size="md"
88-
variant="outlined"
89-
sx={{
90-
"--Card-padding": "16px",
91-
"--Card-radius": "26px",
92-
display: "flex",
93-
margin: "0 10%",
94-
flexDirection: "column",
95-
backgroundColor: "black",
96-
padding: "5%"
97-
}}>
98-
<CardContent sx={{alignItems: "center"}}>
99-
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
100-
<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>
101-
</CardContent>
102-
</Card>
103-
<Card
104-
orientation="horizontal"
105-
size="md"
106-
variant="outlined"
107-
sx={{
108-
"--Card-padding": "16px",
109-
"--Card-radius": "26px",
110-
display: "flex",
111-
flexDirection: "column",
112-
margin: "10% 10%" ,
113-
backgroundColor: "black",
114-
padding: "5%"
115-
}}>
116-
<CardContent sx={{alignItems: "center"}}>
117-
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
118-
<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>
119-
</CardContent>
120-
</Card>
121-
<Card
122-
orientation="horizontal"
123-
size="md"
124-
variant="outlined"
125-
sx={{
126-
"--Card-padding": "16px",
127-
"--Card-radius": "26px",
128-
display: "flex",
129-
flexDirection: "column",
130-
margin: "10% 10%" ,
131-
backgroundColor: "black",
132-
padding: "5%"
133-
}}
104+
<motion.div
105+
initial={{ opacity: 0, y: 50}}
106+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
107+
viewport={{ once: true, amount: 1 }}
108+
>
109+
<Card
110+
orientation="horizontal"
111+
size="md"
112+
variant="outlined"
113+
sx={{
114+
"--Card-padding": "16px",
115+
"--Card-radius": "26px",
116+
display: "flex",
117+
margin: "0 10%",
118+
flexDirection: "column",
119+
backgroundColor: "black",
120+
padding: "5%"
121+
}}>
122+
<CardContent sx={{alignItems: "center"}}>
123+
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
124+
<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>
125+
</CardContent>
126+
</Card>
127+
</motion.div>
128+
<motion.div
129+
initial={{ opacity: 0, y: 50}}
130+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
131+
viewport={{ once: true, amount: 1 }}
132+
>
133+
<Card
134+
orientation="horizontal"
135+
size="md"
136+
variant="outlined"
137+
sx={{
138+
"--Card-padding": "16px",
139+
"--Card-radius": "26px",
140+
display: "flex",
141+
flexDirection: "column",
142+
margin: "10% 10%" ,
143+
backgroundColor: "black",
144+
padding: "5%"
145+
}}>
146+
<CardContent sx={{alignItems: "center"}}>
147+
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
148+
<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>
149+
</CardContent>
150+
</Card>
151+
</motion.div>
152+
<motion.div
153+
initial={{ opacity: 0, y: 50}}
154+
whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}}
155+
viewport={{ once: true, amount: 1 }}
134156
>
135-
<CardContent sx={{alignItems: "center"}}>
136-
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
137-
<Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
138-
</CardContent>
139-
</Card>
157+
<Card
158+
orientation="horizontal"
159+
size="md"
160+
variant="outlined"
161+
sx={{
162+
"--Card-padding": "16px",
163+
"--Card-radius": "26px",
164+
display: "flex",
165+
flexDirection: "column",
166+
margin: "10% 10%" ,
167+
backgroundColor: "black",
168+
padding: "5%"
169+
}}
170+
>
171+
<CardContent sx={{alignItems: "center"}}>
172+
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
173+
<Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
174+
</CardContent>
175+
</Card>
176+
</motion.div>
140177
</div>)}
141178
</div>
142179
);

‎src/components/Title.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function Title() {
5858
level="body-lg"
5959
variant="plain"
6060
textColor="common.white"
61-
sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
61+
sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", marginTop: "10px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
6262
>
6363
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.
6464
The date and time of this event are not finalized yet, but will be in Spring 2025 in the Bay Area.

0 commit comments

Comments
 (0)