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!
@@ -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.
+
+
+
+
-
-
-
-
-
-
-
How do I join?
-
-
-
- To become a general member, simply sign up with your UCSD email!
-
-
- 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.
-
+ To become a general member, simply sign up with your UCSD email!
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default HowtoJoin;
\ No newline at end of file
diff --git a/frontend/src/components/About/OurCommunities.tsx b/frontend/src/components/About/OurCommunities.tsx
index f6afede1..559db2e0 100644
--- a/frontend/src/components/About/OurCommunities.tsx
+++ b/frontend/src/components/About/OurCommunities.tsx
@@ -1,18 +1,60 @@
+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 (
+ {
Websites are coming soon, but for now, check out our Linktree and come to our quarterly kick-off events for the latest updates on each community's recruitment and projects!