Skip to content

Home and About Page Animations #165

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.

Sign up for GitHub

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

Open
kevwu27 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Home and About Page Animations #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aec6eea
animations~
kevwu27 May 30, 2024
25aa6bb
more small changes to animations
kevwu27 May 30, 2024
4406a58
Reapply commits for forked repo
kevwu27 Oct 2, 2024
14783e5
Merge branch 'feature/Kevin-Wu-Shreya-Nagunuri/FE-HomeAnimations' of …
kevwu27 Oct 2, 2024
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
444 changes: 356 additions & 88 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"axios": "^1.4.0",
"bootstrap": "^5.3.0",
"dayjs": "^1.11.9",
"framer-motion": "^6.5.1",
"install": "^0.13.0",
"npm": "^9.8.1",
"react": "^18.2.0",
Expand Down
111 changes: 64 additions & 47 deletions frontend/src/components/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Button from '../Button/Button';
import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
Expand All @@ -9,16 +9,45 @@ import books from '../../images/aboutbooks.png';
import lightBulb from '../../images/aboutlightbulb.png';
import MeetTheTeam from './MeetTheTeam';
import Communities from './OurCommunities';
import HowtoJoin from './HowToJoin';
import about1 from '../../images/aboutpage/about_1.jpg';
import about3 from '../../images/aboutpage/about_3.jpg';
import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
import Typewriter from './TypeWriter';
import { motion } from "framer-motion"

const About = () => {
const navigate = useNavigate();
const styles = aboutStyles();
const theme = createTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));

const [isInView, setIsInView] = useState(false);
const ref = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsInView(true);
observer.disconnect(); // Disconnect after first trigger
}
},
{
threshold: 0.1, // Adjust this value as needed
}
);

if (ref.current) {
observer.observe(ref.current);
}

return () => {
if (ref.current) {
observer.unobserve(ref.current);
}
};
}, []);

return (
<Box sx={{ position: 'relative', overflow: 'hidden' }}>
<Box sx={styles.root}>
Expand Down Expand Up @@ -47,7 +76,7 @@ const About = () => {
fontWeight: '700',
}}
>
WHAT IS CSE Society?
<Typewriter text="WHHAT IS CSES?" speed={200} />
</h1>

<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
Expand Down Expand Up @@ -79,20 +108,36 @@ const About = () => {
lg={3}
sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
<motion.div
ref={ref}
initial={{ x: -100, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : {}}
transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
>
<img src={books} alt="img" style={{ width: '80%' }} />
</motion.div>
</Grid>
<Grid item sm={5} lg={5}>
<motion.div
ref={ref}
initial={{ x: 100, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : {}}
transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
>
<Box
sx={{
color: 'white',
textAlign: { lg: 'left', sm: 'left', xs: 'center' },
}}
>
<h1>Our History</h1>

<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
CSES was the first CSE organization at UCSD starting over twenty years ago, and we have innovated over the years to stay relevant in serving the CSE community. We are open to all majors and indivduals who are interested in computing!
</p>

</Box>
</motion.div>
</Grid>
</Grid>
<Grid
Expand All @@ -104,6 +149,12 @@ const About = () => {
direction={isSmallScreen ? 'column-reverse' : 'row'}
>
<Grid item sm={5}>
<motion.div
ref={ref}
initial={{ x: -100, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : {}}
transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
>
<Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
<h1>Our Future</h1>
</Box>
Expand All @@ -116,55 +167,21 @@ const About = () => {
>
Our mission statement is to help our members get professional opportunities while fostering a network of individuals. We do this through quarterly career fairs, mentorship programs for career development, and project opportunities to gain experience.
</p>
</motion.div>
</Grid>

<Grid item sm={4} md={3} lg={3} maxHeight={'100%'}>
<motion.div
ref={ref}
initial={{ x: 100, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : {}}
transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
>
<img src={lightBulb} alt="img" />
</motion.div>
</Grid>
</Grid>

<Container maxWidth="xl" sx={styles.body}>
<Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
<Grid
container
justifyContent="center"
mt={12}
mb={12}
direction={isSmallScreen ? 'column-reverse' : 'row'}
>
<Grid item sm={7} pl={{ lg: '8%' }}>
<Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
<h1>How do I join?</h1>
</Box>
<Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
To become a general member, simply sign up with your UCSD email!
</p>
<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
Do you want to be a part of the internal team? Become a member and follow us
on our socials to be notified of when board applications open on a rolling
basis.
</p>
<Box
sx={{
marginLeft: '-2%',
display: 'flex',
justifyContent: { xs: 'center', sm: 'left' },
}}
>
<Button
size="large"
text="Become a Member ->"
onClick={() => navigate('/membership')}
/>
</Box>
</Box>
</Grid>
<Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
<ImageWithBoxShadow src={about3} alt="img" />
</Grid>
</Grid>
</Box>
</Container>
<HowtoJoin />
<Communities />
<MeetTheTeam />
</Container>
Expand Down
96 changes: 96 additions & 0 deletions frontend/src/components/About/HowToJoin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Button from '../Button/Button';
import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
import { aboutStyles } from './styles';
import about3 from '../../images/aboutpage/about_3.jpg';
import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
import { motion } from "framer-motion"

const HowtoJoin = () => {
const navigate = useNavigate();
const styles = aboutStyles();
const theme = createTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
const [isInView1, setIsInView1] = useState(false);
const ref1 = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsInView1(true);
observer.disconnect(); // Disconnect after first trigger
}
},
{
threshold: 0.1, // Adjust this value as needed
}
);

if (ref1.current) {
observer.observe(ref1.current);
}

return () => {
if (ref1.current) {
observer.unobserve(ref1.current);
}
};
}, []);

return (
<motion.div
ref={ref1}
initial={{ x: 100, opacity: 0 }}
animate={isInView1 ? { x: 0, opacity: 1 } : {}}
transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
>
<Container maxWidth="xl" sx={styles.body}>
<Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
<Grid
container
justifyContent="center"
mt={12}
mb={12}
direction={isSmallScreen ? 'column-reverse' : 'row'}
>
<Grid item sm={7} pl={{ lg: '8%' }}>
<Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
<h1>How do I join?</h1>
</Box>
<Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
To become a general member, simply sign up with your UCSD email!
</p>
<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
Do you want to be a part of the internal team? Become a member and follow us
on our socials to be notified of when board applications open on a rolling
basis.
</p>
<Box
sx={{
marginLeft: '-2%',
display: 'flex',
justifyContent: { xs: 'center', sm: 'left' },
}}
>
<Button
size="large"
text="Become a Member ->"
onClick={() => navigate('/membership')}
/>
</Box>
</Box>
</Grid>
<Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
<ImageWithBoxShadow src={about3} alt="img" />
</Grid>
</Grid>
</Box>
</Container>
</motion.div>
);
};

export default HowtoJoin;
64 changes: 62 additions & 2 deletions frontend/src/components/About/OurCommunities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,59 @@
import { useEffect, useRef, useState } from 'react';
import { Container, Box, Link, Grid, useMediaQuery } from '@mui/material';
import { aboutStyles } from './styles';
import innovate from '../../images/ourCommunitiesImages/cses_innovate.png';
import opensource from '../../images/ourCommunitiesImages/cses_opensource.png';
import webdev from '../../images/ourCommunitiesImages/cses_webdev.png';
import dev from '../../images/ourCommunitiesImages/cses_dev.png';
import { motion } from "framer-motion";
import { styled } from '@mui/system';


const MotionGrid = styled(motion.div)`
display: flex;
width: 100%; // Inherit full width of the parent
height: auto; // Inherit height of the content
`;

const Communities = () => {
const styles = aboutStyles();
const verySmallScreen = useMediaQuery('(max-width:350px')

const [isInView, setIsInView] = useState(false);
const ref = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsInView(true);
observer.disconnect(); // Disconnect after first trigger
}
},
{
threshold: 0.1, // Adjust this value as needed
}
);

if (ref.current) {
observer.observe(ref.current);
}

return () => {
if (ref.current) {
observer.unobserve(ref.current);
}
};
}, []);

return (
<Container disableGutters sx={{ width: '100%', backgroundColor: 'rgba(0,0,0,0.8)', marginTop: { xs: '15%', sm: '10%', md: '5%' }}}>
<Grid item xs={12} sm={7} md={6} lg={5} sx={{padding: { xs: '6% 4%', sm: '4% 6%', md: '5% 5%' }}}>
<motion.div
ref={ref}
initial={{ opacity: 0 }} // Set initial opacity to 0 (invisible)
animate={isInView ? { opacity: 1 } : {}}
transition={{ duration: 1 }} // Define transition duration
>
<Box
sx={{
...styles.mainTitleTop,
Expand All @@ -29,8 +70,11 @@ const Communities = () => {
<p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)', marginBottom: '6%' }}>
Websites are coming soon, but for now, check out our <Link href="https://linktr.ee/csesucsd" rel="noopener noreferrer" color="inherit" target="_blank">Linktree</Link> and come to our quarterly kick-off events for the latest updates on each community's recruitment and projects!
</p>

</motion.div>
<Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center'}}>
<Grid item xs={12} sm={6}>
<MotionGrid whileHover={{ scale: 1.1 }}
transition={{ type: 'spring', stiffness: 300 }}>
<Grid item
sx={{
...styles.communityCard,
Expand All @@ -52,6 +96,13 @@ const Communities = () => {
</p>
</Box>
</Grid>
</MotionGrid>
</Grid>
<Grid item xs={12} sm={6}>
<MotionGrid
whileHover={{ scale: 1.1 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<Grid item
sx={{
...styles.communityCard,
Expand All @@ -73,6 +124,13 @@ const Communities = () => {
</p>
</Box>
</Grid>
</MotionGrid>
</Grid>
<Grid item xs={12} sm={6}>
<MotionGrid
whileHover={{ scale: 1.1 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<Grid item
sx={{
...styles.communityCard,
Expand All @@ -94,6 +152,8 @@ const Communities = () => {
</p>
</Box>
</Grid>
</MotionGrid>
</Grid>
</Grid>
</Grid>
</Container>
Expand Down
Loading