diff --git a/.vscode/settings.json b/.vscode/settings.json index b0d07499..ad92582b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "editor.formatOnSave": false -} \ No newline at end of file + "editor.formatOnSave": true +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 86aa0329..388c005d 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -9,7 +9,6 @@ import "src/components/ScrollDownArrow/styles.scss"; import "src/components/Statistic/styles.scss"; // section css imports import "src/sections/about/styles.scss"; -import "src/sections/community/styles.scss"; import "src/sections/home/styles.scss"; import "src/sections/sponsorship/styles.scss"; diff --git a/pages/communities.tsx b/pages/communities.tsx index 04e4ee4d..e59d4693 100644 --- a/pages/communities.tsx +++ b/pages/communities.tsx @@ -1,21 +1,10 @@ -import { useState, useEffect } from "react"; -import { Size, useWindowSize } from "src/utils/general"; - import SEO from "src/components/SEO"; -import CommunityHero from "src/sections/community/Community.Hero"; -import CommunitySuborgs from "src/sections/community/Community.Suborgs"; +import CommunitySuborgs from "src/sections/community/Suborgs"; import ACMWhiteLogo from "public/assets/ACMWhiteLogo.png"; import { NextPage } from "next"; const CommunitiesPage: NextPage = () => { - const size: Size = useWindowSize(); - const [isMobile, setIsMobile] = useState(false); - - useEffect(() => { - setIsMobile((size.width || 0) <= 812); - }, [size]); - return ( <> { description="ACM at UCSD is one large community, but it is made up of several smaller communities focused on specific areas of technology." image={ACMWhiteLogo.src} /> - + ); }; diff --git a/public/assets/communities-images/DesignACM/Design1.jpg b/public/assets/communities-images/DesignACM/Design1.jpg new file mode 100644 index 00000000..dde9d669 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design1.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design2.jpg b/public/assets/communities-images/DesignACM/Design2.jpg new file mode 100644 index 00000000..fd56124d Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design2.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design3.jpg b/public/assets/communities-images/DesignACM/Design3.jpg new file mode 100644 index 00000000..e4a0f793 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design3.jpg differ diff --git a/public/assets/communities-images/DesignACM/Design4.jpg b/public/assets/communities-images/DesignACM/Design4.jpg new file mode 100644 index 00000000..7e742a63 Binary files /dev/null and b/public/assets/communities-images/DesignACM/Design4.jpg differ diff --git a/public/assets/communities-images/Projects/Project2.png b/public/assets/communities-images/Projects/Project2.png new file mode 100644 index 00000000..3a53275d Binary files /dev/null and b/public/assets/communities-images/Projects/Project2.png differ diff --git a/public/assets/communities-images/Projects/Project3.png b/public/assets/communities-images/Projects/Project3.png new file mode 100644 index 00000000..a4fe29dd Binary files /dev/null and b/public/assets/communities-images/Projects/Project3.png differ diff --git a/public/assets/communities-images/Projects/Project4.png b/public/assets/communities-images/Projects/Project4.png new file mode 100644 index 00000000..7dc8074e Binary files /dev/null and b/public/assets/communities-images/Projects/Project4.png differ diff --git a/public/assets/communities-images/Projects/ProjectShowcase.png b/public/assets/communities-images/Projects/ProjectShowcase.png new file mode 100644 index 00000000..3273c0e6 Binary files /dev/null and b/public/assets/communities-images/Projects/ProjectShowcase.png differ diff --git a/public/assets/communities-links/outreach-discord.svg b/public/assets/communities-links/outreach-discord.svg new file mode 100644 index 00000000..b8b5bdaf --- /dev/null +++ b/public/assets/communities-links/outreach-discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/communities-links/outreach-home.svg b/public/assets/communities-links/outreach-home.svg new file mode 100644 index 00000000..762aa7bf --- /dev/null +++ b/public/assets/communities-links/outreach-home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/communities-links/projects-home.svg b/public/assets/communities-links/projects-home.svg new file mode 100644 index 00000000..b05ca56f --- /dev/null +++ b/public/assets/communities-links/projects-home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/communities-links/space-home.svg b/public/assets/communities-links/space-home.svg new file mode 100644 index 00000000..797eacca --- /dev/null +++ b/public/assets/communities-links/space-home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/communities-navigation/ai-selected.svg b/public/assets/communities-navigation/ai-selected.svg deleted file mode 100644 index e99cbd37..00000000 --- a/public/assets/communities-navigation/ai-selected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/communities-navigation/cyber-selected.svg b/public/assets/communities-navigation/cyber-selected.svg deleted file mode 100644 index 6a5ac4c8..00000000 --- a/public/assets/communities-navigation/cyber-selected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/communities-navigation/design-selected.svg b/public/assets/communities-navigation/design-selected.svg deleted file mode 100644 index a38be4d9..00000000 --- a/public/assets/communities-navigation/design-selected.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/public/assets/communities-navigation/hack-selected.svg b/public/assets/communities-navigation/hack-selected.svg deleted file mode 100644 index 73ca5e7d..00000000 --- a/public/assets/communities-navigation/hack-selected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/communities-navigation/innovate-selected.svg b/public/assets/communities-navigation/innovate-selected.svg deleted file mode 100644 index cd51e5af..00000000 --- a/public/assets/communities-navigation/innovate-selected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/logos/acm-ai.svg b/public/assets/logos/acm-ai.svg index b909510f..dc3e871b 100644 --- a/public/assets/logos/acm-ai.svg +++ b/public/assets/logos/acm-ai.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/public/assets/logos/acm-cyber.svg b/public/assets/logos/acm-cyber.svg index 822bbe8a..d8721c55 100644 --- a/public/assets/logos/acm-cyber.svg +++ b/public/assets/logos/acm-cyber.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/public/assets/logos/acm-design.svg b/public/assets/logos/acm-design.svg index deb5af2e..00e08eee 100644 --- a/public/assets/logos/acm-design.svg +++ b/public/assets/logos/acm-design.svg @@ -1,8 +1,4 @@ - - - - - - + + + - diff --git a/public/assets/logos/acm-hack.svg b/public/assets/logos/acm-hack.svg index b18b1090..87775498 100644 --- a/public/assets/logos/acm-hack.svg +++ b/public/assets/logos/acm-hack.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/public/assets/logos/acm-innovate.png b/public/assets/logos/acm-innovate.png deleted file mode 100644 index 65886800..00000000 Binary files a/public/assets/logos/acm-innovate.png and /dev/null differ diff --git a/public/assets/logos/acm-innovate.svg b/public/assets/logos/acm-innovate.svg index 1db4f46a..4d15d4b2 100644 --- a/public/assets/logos/acm-innovate.svg +++ b/public/assets/logos/acm-innovate.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/public/assets/logos/acm-outreach.svg b/public/assets/logos/acm-outreach.svg new file mode 100644 index 00000000..4b356033 --- /dev/null +++ b/public/assets/logos/acm-outreach.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/bitbyte.png b/public/assets/logos/bitbyte.png new file mode 100644 index 00000000..88008b92 Binary files /dev/null and b/public/assets/logos/bitbyte.png differ diff --git a/public/assets/logos/bitbyte.svg b/public/assets/logos/bitbyte.svg deleted file mode 100644 index 50114626..00000000 --- a/public/assets/logos/bitbyte.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/logos/hackathon.svg b/public/assets/logos/hackathon.svg deleted file mode 100644 index 5a33b6f4..00000000 --- a/public/assets/logos/hackathon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/logos/projects-temp.svg b/public/assets/logos/projects-temp.svg deleted file mode 100644 index 9ba62bc3..00000000 --- a/public/assets/logos/projects-temp.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/logos/projects.png b/public/assets/logos/projects.png index 92ececa4..eb8f0c1d 100644 Binary files a/public/assets/logos/projects.png and b/public/assets/logos/projects.png differ diff --git a/public/assets/logos/reach-temp.svg b/public/assets/logos/reach-temp.svg deleted file mode 100644 index 78c4dfce..00000000 --- a/public/assets/logos/reach-temp.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/logos/reach.png b/public/assets/logos/reach.png deleted file mode 100644 index 26e35bb9..00000000 Binary files a/public/assets/logos/reach.png and /dev/null differ diff --git a/public/assets/logos/space-temp.svg b/public/assets/logos/space-temp.svg deleted file mode 100644 index f3c1ef28..00000000 --- a/public/assets/logos/space-temp.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/logos/space.svg b/public/assets/logos/space.svg index 5e5c73b2..34f04018 100644 --- a/public/assets/logos/space.svg +++ b/public/assets/logos/space.svg @@ -12,7 +12,7 @@ - + diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss index f4596cf8..50b8fe95 100644 --- a/src/components/NavigationBar/Navbar.module.scss +++ b/src/components/NavigationBar/Navbar.module.scss @@ -15,14 +15,14 @@ font-size: 18px; width: 100%; - height: 78px; + height: 4.875rem; display: flex; justify-content: space-between; align-items: center; // left side of navbar is just the acm logo .left { - height: 78px; + height: 4.875rem; padding-top: 9px; padding-bottom: 9px; margin-left: 32px; @@ -165,8 +165,8 @@ // rainbow bar is always visible below navbar, positioned to be at the bottom of the container even when mobile slides out and height changes .rainbow { width: 100vw; - height: 0.4em; - bottom: -0.4em; + height: 0.4rem; + bottom: -0.4rem; background: linear-gradient( 270deg, colors.$red 0%, diff --git a/src/sections/community/Community.Hero.tsx b/src/sections/community/Community.Hero.tsx deleted file mode 100644 index 25aa1cbf..00000000 --- a/src/sections/community/Community.Hero.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import Link from "next/link"; -import { useState } from "react"; - -import CommunitiesGrid from "src/components/CommunitiesGrid"; -import ScrollDownArrow from "src/components/ScrollDownArrow"; -import CommunitySubOrgs from "./Community.Suborgs"; - -const CommunityHero: React.FC<{ isMobile: boolean }> = ({ isMobile }) => { - const [activeLink, setActiveLink] = useState("communities"); - - const handleLinkClick = (link) => { - setActiveLink(link); - } - - return ( -
- {isMobile ? null : ( - <> -
-

- -

-

- -

-
- -

- ACM at UCSD is one large community, but it is made up of several - smaller communities focused on specific areas of technology. -

-
- -
- - - )} - - ); -}; - -export default CommunityHero; diff --git a/src/sections/community/Community.Suborgs.tsx b/src/sections/community/Community.Suborgs.tsx deleted file mode 100644 index f2036a08..00000000 --- a/src/sections/community/Community.Suborgs.tsx +++ /dev/null @@ -1,666 +0,0 @@ -import { useState } from "react"; -import AIDiscord from "public/assets/communities-links/ai-discord.svg"; -import AIHome from "public/assets/communities-links/ai-home.svg"; -import AIInstagram from "public/assets/communities-links/ai-instagram.svg"; -import CyberDiscord from "public/assets/communities-links/cyber-discord.svg"; -import CyberHome from "public/assets/communities-links/cyber-home.svg"; -import SDCTFIcon from "public/assets/communities-links/sdctf.svg"; -import HackDiscord from "public/assets/communities-links/hack-discord.svg"; -import HackHome from "public/assets/communities-links/hack-home.svg"; -import AILogoSelected from "public/assets/communities-navigation/ai-selected.svg"; -import CyberLogoSelected from "public/assets/communities-navigation/cyber-selected.svg"; -import HackLogoSelected from "public/assets/communities-navigation/hack-selected.svg"; -import DesignLogoSelected from "public/assets/communities-navigation/design-selected.svg"; -import AILogo from "public/assets/logos/acm-ai.svg"; -import CyberLogo from "public/assets/logos/acm-cyber.svg"; -import HackLogo from "public/assets/logos/acm-hack.svg"; -import DesignLogo from "public/assets/logos/acm-design.svg"; -import BitByteLogo from "public/assets/logos/bitbyte.svg"; -import HackathonLogo from "public/assets/logos/hackathon.svg"; -import OutreachLogo from "public/assets/logos/reach.png"; -import ProjectsLogo from "public/assets/logos/projects.png"; -import SpaceLogo from "public/assets/logos/space.svg"; - -import CatLong from "public/assets/communities-images/cat-long.svg"; -import CatSquare from "public/assets/communities-images/cat-square.svg"; - -import BitByte1 from "public/assets/communities-images/BitByte/BitByte1.jpg"; -import BitByte2 from "public/assets/communities-images/BitByte/BitByte2.jpg"; -import BitByte3 from "public/assets/communities-images/BitByte/BitByte3.jpg"; -import BitByte4 from "public/assets/communities-images/BitByte/BitByte4.jpg"; - -import Outreach1 from "public/assets/communities-images/Outreach/Reach1.jpg"; -import Outreach2 from "public/assets/communities-images/Outreach/Reach2.jpg"; -import Outreach3 from "public/assets/communities-images/Outreach/Reach3.jpg"; -import Outreach4 from "public/assets/communities-images/Outreach/Reach4.png"; - -import SPACE1 from "public/assets/communities-images/SPACE/SPACE1.jpg"; -import SPACE2 from "public/assets/communities-images/SPACE/SPACE2.jpg"; -import SPACE3 from "public/assets/communities-images/SPACE/SPACE3.jpg"; -import SPACE4 from "public/assets/communities-images/SPACE/SPACE4.jpg"; - -import AI1 from "public/assets/communities-images/AI/AIOldTown.jpg"; -import AI2 from "public/assets/communities-images/AI/AIBeach.jpg"; -import AI3 from "public/assets/communities-images/AI/AIOldTown2.jpg"; -import AI4 from "public/assets/communities-images/AI/AIStudy.jpg"; - -import Cyber1 from "public/assets/communities-images/Cyber/Cyber1.jpeg"; -import Cyber2 from "public/assets/communities-images/Cyber/Cyber2.jpeg"; -import Cyber3 from "public/assets/communities-images/Cyber/Cyber3.jpeg"; -import Cyber4 from "public/assets/communities-images/Cyber/CyberBoardGame.jpeg"; - -import Hack1 from "public/assets/communities-images/Hack/Hack1.jpeg"; -import Hack2 from "public/assets/communities-images/Hack/Hack2.jpeg"; -import Hack3 from "public/assets/communities-images/Hack/Hack3.png"; -import Hack4 from "public/assets/communities-images/Hack/Hack4.png"; - -import Image from "next/image"; - - -const CommunityImages: React.FC<{ - srcs: string[]; - alts: string[]; -}> = ({ srcs, alts }) => { - return( -
-
- {alts[0] -
- -
- {alts[1] -
- - -
- {alts[2] -
- - -
- {alts[3] -
- -
- ); -}; - -const CommunitiesTitle: React.FC<{ - open?: boolean; - org: string; - color: string; - logo: string; - website: string; - glowClassName: string; - isMobile: boolean; - setSelected: (org: string) => void; -}> = ({ - open, - logo, - org, - color, - setSelected, -}) => { - - const getFullName = (org: string) => { - switch (org) { - case "AI": - return "Artificial Intelligence"; - case "Cyber": - return "Cyber Security"; - case "Hack": - return "Software Engineering"; - case "Design": - return "Design"; - case "Reach": - return "Outreach"; - case "Space": - return "Space Career Fair"; - default: - return org; - } - } - - const [hover, setHover] = useState(false); - - const filterDropShadow = ` - drop-shadow(0px 0px 1px #FF0000) - drop-shadow(0px 0px 1px #FF7F00) - drop-shadow(0px 0px 1px #FFFF00) - drop-shadow(0px 0px 1px #00FF00) - drop-shadow(0px 0px 1px #0000FF) - drop-shadow(0px 0px 1px #2E2B5F) - drop-shadow(0px 0px 1px #8B00FF) - `; - - return ( - <> -
- {`ACM setSelected(org)} - style={{'--shadow-color': color, filter: (open || hover) ? ` ${color=='' ? `` : `drop-shadow(0 0 1rem ${color})`} ` : 'none'} as React.CSSProperties} - onMouseEnter={() => setHover(true)} - onMouseLeave={() => setHover(false)} - data-glow={open || hover} - /> - - {open ? ( -
-

ACM {org}

-

{getFullName(org)}

-
- ) : null} -
- - ); -}; - -const CommunityComponent: React.FC<{ - org: string; - color: string; - isMobile: boolean; - links: { src: string; logo: string; alt: string }[]; - description: React.ReactNode; // Input is HTML - srcs: string[]; - alts: string[]; - -}> = ({ isMobile, color, org, links, description, srcs, alts }) => { - return ( -
-
-
- {isMobile ? null : ( - - )} -
-
-

ACM {org}

-
- {links.map((link, index) => ( - - {link.alt} - - ))} -
-
- {description} -
- - - { - // Mobile images go below description - isMobile ? ( - - ) : null} -
-
- ); -}; - -const AICommunity: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - Our goals are to help build a community of AI enthusiasts at UCSD and - connect that community to the broader AI network. -
-
- We strive to keep AI fun and accessible to all. We want to help you - navigate your path around the complex world of AI through workshops, fun - hands on competitions, mentor guided projects, networking events and - more! -
-
- Join our discord and signup for an account on our website to get access - to all the perks and be up to date on AI and the community! -

- } - - srcs={[AI1.src, AI2.src, AI3.src, AI4.src]} - alts={[]} - /> -); - -const AITitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string }> = ({ isMobile, open, setSelected, glowClassName }) => ( - -); - -const CyberCommunity: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - ACM Cyber aims to provide member-first opportunities to learn, teach, - and practice critical cybersecurity skills to help the UCSD community - thrive. -
-
- With over 300 members currently registered, we are one of the fastest - growing organizations on campus. We host hands-on workshops, industry - panels, competitive CTF training, and mentorship opportunities for our - members. Our largest event of the year is San Diego CTF (Capture the - Flag), a 48 hour jeopardy style hacking game. -

- } - srcs={[Cyber1.src, Cyber2.src, Cyber3.src, Cyber4.src]} - alts={["Picture of Cyber Event, Picture of Cyber Event, Picture of Cyber Event, Picture of Cyber Members Playing Board Games"]} - /> -); - -const CyberTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName }) => ( - -); - -const HackCommunity: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - ACM Hack is a community centered around software engineering and exploring what is possible through code. -
-
- Our name comes from Hackathons – events where software engineers write code to produce innovative projects. - Our goal is to enable and prepare a community of software engineers to build new things and excel in industry. - We do this through technical workshops on industry-relevant tools, bootcamps, and projects. -
-
- Join our Discord to engage with our community, and check out our website to learn more about us! -

- } - srcs={[Hack1.src, Hack2.src, Hack3.src, Hack4.src]} - alts={["Picture of Hack Event", "Picture of Hack Event", "Picture of Hack Event", "Picture of Hack Event"]} - /> -); - -const HackTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName}) => ( - -); - -const DesignCommunity: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - ACM Design centers around UI/UX design and exploring what is possible through all parts of design like research, graphic, and product. -
-
- We uplift new designers and curious developers to learn how to think like a designer. As a growing community, we host events to teach designers to go from mapping out ideas to building innovative prototypes. We strive to allow designers to have better conversations with developers while making developers more conscious of design methods. -

- } - srcs={[]} - alts={[]} - /> -); - -const DesignTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string,}> = ({ isMobile, open, setSelected, glowClassName}) => ( - -); - -const BitByteTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName }) => ( - -); - -const BitByteDescription: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - Join ACM’s Bit-Byte program that pairs students to make lifelong friendships! - Our upperclassmen bigs (bytes) help their littles (bits) grow in their academic, - social, and professional lives. -

- } - srcs={[BitByte1.src, BitByte2.src, BitByte4.src, BitByte3.src]} - alts={['Bit Byte 1', 'Bit Byte 2', 'Bit Byte 3', 'Bit Byte 4']} - /> -); - -const OutreachTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string}> = ({ isMobile, open, setSelected, glowClassName }) => ( - -); - -const OutreachDescription: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - Welcome to ACM Outreach at UCSD, where our mission is to ignite a passion for computing - and STEM among K-12 students, with a special focus on those who are underrepresented - in the computing community. Our goal is to empower students to explore the exciting - world of computing by nurturing their curiosity and enthusiasm for technology. - Join us in inspiring the next generation of innovators and problem solvers! -

- } - srcs={[Outreach1.src, Outreach2.src, Outreach3.src, Outreach4.src]} - alts={['Outreach 1', 'Outreach 2', 'Outreach 3', 'Outreach 4']} - /> -); - -const ProjectsTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string,}> = ({ isMobile, open, setSelected, glowClassName }) => ( - -); - -const ProjectsDescription: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - Sign up to join a team in our quarter-long projects. - Grow your skills in coding, design, or project management. -

- } - - srcs={[]} - alts={[]} - /> -); - -const SpaceTitle: React.FC<{ isMobile: boolean, open?:boolean, setSelected: (org: string) => void; glowClassName: string,}> = ({ isMobile, open, setSelected, glowClassName}) => ( - -); - -const SpaceDescription: React.FC<{ isMobile: boolean }> = ({ isMobile }) => ( - - Through SPACE, students and recruiters can connect and interact with - each other regarding professional opportunities such as internships, - full or part-time positions, and student programs. -

- } - srcs={[SPACE1.src, SPACE2.src, SPACE3.src, SPACE4.src]} - alts={['Space 1', 'Space 2', 'Space 3', 'Space 4']} - /> -); - -const CommunitySubOrgs: React.FC<{ isMobile: boolean }> = ({ isMobile }) => { - const [selected, setSelected] = useState("general"); - const [activeLink, setActiveLink] = useState("communities"); - - const handleLinkClick = (link) => { - setActiveLink(link); - } - - const communityComponents = { - ai: , - cyber: , - hack: , - design: , - general: ( -
-

- ACM at UCSD is one large community, but it is made up of several - smaller communities focused on specific areas of technology. -

-

Learn more about each community

-
- ), - }; - - const titleClassName = `link ${activeLink === 'initiatives' ? 'glow-on-hover' : ''}`; - - return ( - <> - {isMobile ? ( -
-

setSelected("general")} - > - Communities -

-
- - - - -
- {communityComponents[selected]} -
- ) : ( - <> -
- -

- ACM at UCSD is one large community, but it is made up of several - smaller communities focused on specific areas of technology. -

- {activeLink === "communities" && ( -
- - - - -
- )} - {activeLink === "initiatives" && ( -
- - - - -
- )} -
-
- - {selected.toLocaleLowerCase() === "ai" ? : null} - {selected.toLocaleLowerCase() === "cyber" ? : null } - {selected.toLocaleLowerCase() === "hack" ? : null} - {selected.toLocaleLowerCase() === "design" ? : null} -
- -
- {selected.toLocaleLowerCase() === "bit byte" ? : null} - {selected.toLocaleLowerCase() === "reach" ? : null } - {selected.toLocaleLowerCase() === "projects" ? : null} - {selected.toLocaleLowerCase() === "space" ? : null} -
- - - - )} - - ); -}; - -export default CommunitySubOrgs; diff --git a/src/sections/community/CommunityDescription.module.scss b/src/sections/community/CommunityDescription.module.scss new file mode 100644 index 00000000..558e80ae --- /dev/null +++ b/src/sections/community/CommunityDescription.module.scss @@ -0,0 +1,95 @@ +.communityCard { + display: flex; + min-height: calc(100vh - 5.275rem); + box-sizing: border-box; + padding-top: 10rem; + padding-bottom: 4em; + justify-content: space-between; + align-items: center; + position: relative; + scroll-snap-align: start; + + .content { + display: flex; + flex-direction: row-reverse; + margin: 0 2rem; + + @media only screen and (max-width: 812px) { + flex-direction: column; + gap: 1rem; + } + justify-content: center; + width: 100%; + gap: 3.5rem; + align-items: center; + height: fit-content; + .descHolder { + flex: 1 0 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 1rem; + + .title { + font-size: 2.25rem; + color: var(--main-color); + margin: 0; + } + + .subtitle { + font-size: 1.5rem; + color: rgba(0, 0, 0, 0.5); + } + + @media only screen and (max-width: 812px) { + .title, + .subtitle { + text-align: center; + } + } + + p { + margin: 0; + } + + .communityLinks { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + + a { + position: relative; + display: block; + width: 2rem; + height: 2rem; + transition: transform 0.2s; + + img { + width: 100%; + height: 100%; + } + + &:hover { + transform: scale(1.05); + } + } + + @media only screen and (max-width: 812px) { + justify-content: center; + } + } + } + } + + .blob { + width: 80%; + position: absolute; + bottom: -2rem; + height: 3rem; + left: 10%; + border-radius: 2rem; + background-color: var(--main-color); + filter: blur(2rem); + } +} diff --git a/src/sections/community/CommunityDescription.module.scss.d.ts b/src/sections/community/CommunityDescription.module.scss.d.ts new file mode 100644 index 00000000..0fddbe5d --- /dev/null +++ b/src/sections/community/CommunityDescription.module.scss.d.ts @@ -0,0 +1,17 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace CommunityDescriptionModuleScssNamespace { + export interface ICommunityDescriptionModuleScss { + blob: string; + communityCard: string; + communityLinks: string; + content: string; + descHolder: string; + subtitle: string; + title: string; + } +} + +declare const CommunityDescriptionModuleScssModule: CommunityDescriptionModuleScssNamespace.ICommunityDescriptionModuleScss; + +export = CommunityDescriptionModuleScssModule; diff --git a/src/sections/community/CommunityDescription.tsx b/src/sections/community/CommunityDescription.tsx new file mode 100644 index 00000000..cf3ae7ba --- /dev/null +++ b/src/sections/community/CommunityDescription.tsx @@ -0,0 +1,48 @@ +import CommunityImages from "./CommunityImages"; +import styles from "./CommunityDescription.module.scss"; +import Image from "next/image"; + +const CommunityDescription: React.FC<{ + id: string; + name: string; + subtitle: string; + colorClass: string; + links: { src: string; logo: string; alt: string }[]; + description: React.ReactNode; // Input is HTML + srcs: string[]; + alts: string[]; +}> = ({ colorClass, id, name, subtitle, links, description, srcs, alts }) => { + return ( +
+
+
+
+

{name}

+

{subtitle}

+
+ {description} +
+ {links.map((link, index) => ( + + {link.alt} + + ))} +
+
+ + +
+
+
+ ); +}; + +export default CommunityDescription; diff --git a/src/sections/community/CommunityImages.module.scss b/src/sections/community/CommunityImages.module.scss new file mode 100644 index 00000000..8d77e9b7 --- /dev/null +++ b/src/sections/community/CommunityImages.module.scss @@ -0,0 +1,77 @@ +.imageGrid { + flex: 1 0 0; + display: grid; + height: 350px; + width: 100%; + gap: 0.5rem; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + + @media only screen and (max-width: 812px) { + flex: none; + } + + // For some reason if the grid-template-columns are set to + // auto 17% auto auto auto auto; right side doesn't expand + // if all are auto nothing expands + // Code reviewer if you know please explain + grid-template-rows: 1fr 1fr; + overflow: hidden; + transition: 300ms; + + &:has(.pic1:hover) { + grid-template-columns: 1fr 1fr 1fr 0fr 0fr 0fr; + grid-template-rows: 1fr 0fr; + gap: 0rem; + } + + &:has(.pic2:hover) { + grid-template-columns: 0fr 0fr 0fr 1fr 1fr 1fr; + grid-template-rows: 1fr 0fr; + gap: 0rem; + } + + &:has(.pic3:hover) { + grid-template-columns: 1fr 1fr 0fr 0fr 0fr 0fr; + grid-template-rows: 0fr 1fr; + gap: 0rem; + } + + &:has(.pic4:hover) { + grid-template-columns: 0fr 0fr 1fr 1fr 1fr 1fr; + grid-template-rows: 0fr 1fr; + gap: 0rem; + } + + .nextImageHolder { + overflow: hidden; + border-radius: 20px; + width: 100%; + height: 100%; + margin-bottom: 0; + position: relative; + + img { + object-fit: cover; + } + } + + .pic1 { + grid-column: 1 / 4; + grid-row: 1; + } + + .pic2 { + grid-column: 4 / -1; + grid-row: 1; + } + + .pic3 { + grid-column: 1 / 3; + grid-row: 2; + } + + .pic4 { + grid-column: 3 / -1; + grid-row: 2; + } +} diff --git a/src/sections/community/CommunityImages.module.scss.d.ts b/src/sections/community/CommunityImages.module.scss.d.ts new file mode 100644 index 00000000..ee709a2d --- /dev/null +++ b/src/sections/community/CommunityImages.module.scss.d.ts @@ -0,0 +1,16 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace CommunityImagesModuleScssNamespace { + export interface ICommunityImagesModuleScss { + imageGrid: string; + nextImageHolder: string; + pic1: string; + pic2: string; + pic3: string; + pic4: string; + } +} + +declare const CommunityImagesModuleScssModule: CommunityImagesModuleScssNamespace.ICommunityImagesModuleScss; + +export = CommunityImagesModuleScssModule; diff --git a/src/sections/community/CommunityImages.tsx b/src/sections/community/CommunityImages.tsx new file mode 100644 index 00000000..1c6aeb1d --- /dev/null +++ b/src/sections/community/CommunityImages.tsx @@ -0,0 +1,52 @@ +import Image from "next/image"; +import styles from "./CommunityImages.module.scss"; + +import CatLong from "public/assets/communities-images/cat-long.svg"; +import CatSquare from "public/assets/communities-images/cat-square.svg"; + +const CommunityImages: React.FC<{ + srcs: string[]; + alts: string[]; +}> = ({ srcs, alts }) => { + return ( +
+
+ {alts[0] +
+ +
+ {alts[1] +
+ +
+ {alts[2] +
+ +
+ {alts[3] +
+
+ ); +}; + +export default CommunityImages; diff --git a/src/sections/community/Suborgs.module.scss b/src/sections/community/Suborgs.module.scss new file mode 100644 index 00000000..16733106 --- /dev/null +++ b/src/sections/community/Suborgs.module.scss @@ -0,0 +1,153 @@ +@use "src/styles/colors.scss" as colors; + +.title { + font-size: 3rem; + text-align: center; + font-weight: 500; + margin-top: 4rem; +} + +.tagLine { + text-align: center; + padding: 0 1rem; + max-width: 35rem; + margin: 0 auto; +} + +.sectionNav { + position: sticky; + top: 5.275rem; + height: 4rem; + margin-bottom: 4rem; + z-index: 3; + display: flex; + justify-content: center; + background-image: linear-gradient(to bottom, white 75%, transparent 100%); + + a { + display: flex; + align-items: center; + color: inherit; + text-decoration: none; + font-size: 1.2rem; + padding: 0 1.2rem; + position: relative; + + &::after { + content: ""; + position: absolute; + left: 0.5rem; + right: 0.5rem; + bottom: 0.8rem; + height: 3px; + background: linear-gradient( + to right, + #ff6d6d, + #fda44e, + #ffdc24, + #38cf6b, + #62b0ff, + #816dff, + #ff6d6d + ); + clip-path: xywh(50% 0 0 100%); + transition: clip-path 0.2s; + } + + &.active::after { + clip-path: xywh(0 0 100% 100%); + } + } +} + +.sectionHeading { + font-size: 2.5rem; + text-align: center; + font-weight: 500; + position: relative; + z-index: 2; + margin: 0; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + margin-top: 10rem; +} + +.subOrgNav { + position: sticky; + top: 5.275rem; + margin-top: -4rem; + padding-top: 4rem; + background-image: linear-gradient(to bottom, white 75%, transparent 100%); + z-index: 1; + display: flex; + justify-content: center; + gap: 1rem; + + .logoCard { + display: block; + width: 4rem; + height: 4rem; + position: relative; + + .logo, + .logoHover { + width: 100%; + height: 100%; + } + .logoHover { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + filter: blur(0.5rem); + transition: opacity 0.2s; + z-index: -1; + } + &:hover, + &.active { + .logoHover { + opacity: 1; + } + } + + &.spaceLogo { + .logo, + .logoHover { + transform: scale(1.32); + } + } + } +} + +.red { + --main-color: #{colors.$red}; +} +.orange { + --main-color: #{colors.$orange}; +} +.turquoise { + --main-color: #{colors.$turquoise}; +} +.yellow { + --main-color: #{colors.$orange}; +} +.purple { + --main-color: #{colors.$purple}; +} +.pink { + --main-color: #{colors.$pink}; +} +.outreachGreen { + --main-color: #{colors.$outreach-green}; +} +.blue { + --main-color: #{colors.$blue}; +} +.grey { + --main-color: #{colors.$dark-grey}; +} +.spaceBlue { + --main-color: #053561; +} diff --git a/src/sections/community/Suborgs.module.scss.d.ts b/src/sections/community/Suborgs.module.scss.d.ts new file mode 100644 index 00000000..e1eed6f3 --- /dev/null +++ b/src/sections/community/Suborgs.module.scss.d.ts @@ -0,0 +1,30 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace SuborgsModuleScssNamespace { + export interface ISuborgsModuleScss { + active: string; + blue: string; + grey: string; + logo: string; + logoCard: string; + logoHover: string; + orange: string; + outreachGreen: string; + pink: string; + purple: string; + red: string; + sectionHeading: string; + sectionNav: string; + spaceBlue: string; + spaceLogo: string; + subOrgNav: string; + tagLine: string; + title: string; + turquoise: string; + yellow: string; + } +} + +declare const SuborgsModuleScssModule: SuborgsModuleScssNamespace.ISuborgsModuleScss; + +export = SuborgsModuleScssModule; diff --git a/src/sections/community/Suborgs.tsx b/src/sections/community/Suborgs.tsx new file mode 100644 index 00000000..7ee82f17 --- /dev/null +++ b/src/sections/community/Suborgs.tsx @@ -0,0 +1,518 @@ +import { useEffect, useState } from "react"; +import styles from "./Suborgs.module.scss"; + +import AIDiscord from "public/assets/communities-links/ai-discord.svg"; +import AIHome from "public/assets/communities-links/ai-home.svg"; +import AIInstagram from "public/assets/communities-links/ai-instagram.svg"; +import CyberDiscord from "public/assets/communities-links/cyber-discord.svg"; +import CyberHome from "public/assets/communities-links/cyber-home.svg"; +import SDCTFIcon from "public/assets/communities-links/sdctf.svg"; +import HackDiscord from "public/assets/communities-links/hack-discord.svg"; +import HackHome from "public/assets/communities-links/hack-home.svg"; +import OutreachDiscord from "public/assets/communities-links/outreach-discord.svg"; +import OutreachHome from "public/assets/communities-links/outreach-home.svg"; +import ProjectsHome from "public/assets/communities-links/projects-home.svg"; +import SpaceHome from "public/assets/communities-links/space-home.svg"; +import AILogo from "public/assets/logos/acm-ai.svg"; +import CyberLogo from "public/assets/logos/acm-cyber.svg"; +import HackLogo from "public/assets/logos/acm-hack.svg"; +import DesignLogo from "public/assets/logos/acm-design.svg"; +import BitByteLogo from "public/assets/logos/bitbyte.png"; +import OutreachLogo from "public/assets/logos/acm-outreach.svg"; +import ProjectsLogo from "public/assets/logos/projects.png"; +import SpaceLogo from "public/assets/logos/space.svg"; + +import BitByte1 from "public/assets/communities-images/BitByte/BitByte1.jpg"; +import BitByte2 from "public/assets/communities-images/BitByte/BitByte2.jpg"; +import BitByte3 from "public/assets/communities-images/BitByte/BitByte3.jpg"; +import BitByte4 from "public/assets/communities-images/BitByte/BitByte4.jpg"; + +import Outreach1 from "public/assets/communities-images/Outreach/Reach1.jpg"; +import Outreach2 from "public/assets/communities-images/Outreach/Reach2.jpg"; +import Outreach3 from "public/assets/communities-images/Outreach/Reach3.jpg"; +import Outreach4 from "public/assets/communities-images/Outreach/Reach4.png"; + +import SPACE1 from "public/assets/communities-images/SPACE/SPACE1.jpg"; +import SPACE2 from "public/assets/communities-images/SPACE/SPACE2.jpg"; +import SPACE3 from "public/assets/communities-images/SPACE/SPACE3.jpg"; +import SPACE4 from "public/assets/communities-images/SPACE/SPACE4.jpg"; + +import Project1 from "public/assets/communities-images/Projects/ProjectShowcase.png"; +import Project2 from "public/assets/communities-images/Projects/Project2.png"; +import Project3 from "public/assets/communities-images/Projects/Project3.png"; +import Project4 from "public/assets/communities-images/Projects/Project4.png"; + +import AI1 from "public/assets/communities-images/AI/AIOldTown.jpg"; +import AI2 from "public/assets/communities-images/AI/AIBeach.jpg"; +import AI3 from "public/assets/communities-images/AI/AIOldTown2.jpg"; +import AI4 from "public/assets/communities-images/AI/AIStudy.jpg"; + +import Cyber1 from "public/assets/communities-images/Cyber/Cyber1.jpeg"; +import Cyber2 from "public/assets/communities-images/Cyber/Cyber2.jpeg"; +import Cyber3 from "public/assets/communities-images/Cyber/Cyber3.jpeg"; +import Cyber4 from "public/assets/communities-images/Cyber/CyberBoardGame.jpeg"; + +import Hack1 from "public/assets/communities-images/Hack/Hack1.jpeg"; +import Hack2 from "public/assets/communities-images/Hack/Hack2.jpeg"; +import Hack3 from "public/assets/communities-images/Hack/Hack3.png"; +import Hack4 from "public/assets/communities-images/Hack/Hack4.png"; + +import Design1 from "public/assets/communities-images/DesignACM/Design1.jpg"; +import Design2 from "public/assets/communities-images/DesignACM/Design2.jpg"; +import Design3 from "public/assets/communities-images/DesignACM/Design3.jpg"; +import Design4 from "public/assets/communities-images/DesignACM/Design4.jpg"; + +import CommunityDescription from "./CommunityDescription"; + +const CommunitiesTitle: React.FC<{ + selected: string; + logo: StaticImageData; + label: string; + id: string; + spaceLogo?: boolean; +}> = ({ selected, logo, label, id, spaceLogo }) => { + return ( + + + {label} + + ); +}; + +const AICommunity: React.FC = () => ( + +

+ Our goals are to help build a community of AI enthusiasts at UCSD and + connect that community to the broader AI network. +

+

+ We strive to keep AI fun and accessible to all. We want to help you + navigate your path around the complex world of AI through workshops, + fun hands on competitions, mentor-guided projects, networking events + and more! +

+

+ Join our Discord and sign up for an account on our website to get + access to all the perks and be up to date on AI and the community! +

+ + } + srcs={[AI1.src, AI2.src, AI3.src, AI4.src]} + alts={[ + "members sitting at a table smiling", + "three people, one holding a massive water jug, hiking by the sea", + "a bunch of people sitting and smiling at a table", + "people masked outside the elevators at Nobel Drive Station", + ]} + /> +); + +const CyberCommunity: React.FC = () => ( + +

+ ACM Cyber aims to provide member-first opportunities to learn, teach, + and practice critical cybersecurity skills to help the UCSD community + thrive. +

+

+ With over 700 members currently registered, we are one of the fastest + growing organizations on campus. We host hands-on workshops, industry + panels, competitive CTF training, and mentorship opportunities for our + members. Our largest event of the year is San Diego CTF (Capture the + Flag), a 48 hour jeopardy-style hacking game. +

+ + } + srcs={[Cyber1.src, Cyber2.src, Cyber3.src, Cyber4.src]} + alts={[ + 'ACM Cyber Board stands in front of a UCSD kiosk set to display "Cyber"', + "members picking locks at Lockpicking 102", + "ACM Cyber president Nick helps members pick a lock", + "Cyber Members Playing Board Games", + ]} + /> +); + +const HackCommunity: React.FC = () => ( + +

+ ACM Hack is a community centered around software engineering and + exploring what is possible through code. +

+

+ Our name comes from hackathons—events where software engineers write + code to produce innovative projects. Our goal is to enable and prepare + a community of software engineers to build new things and excel in + industry. We do this through technical workshops on industry-relevant + tools, bootcamps, and projects. +

+

+ Join our Discord to engage with our community, and check out our + website to learn more about us! +

+ + } + srcs={[Hack1.src, Hack2.src, Hack3.src, Hack4.src]} + alts={[ + "members locking in at a Hack workshop", + "members watch presentation at a Hack Event", + "ACM Hack president Nikhil helps someone at a Hack Event", + "members consider what their project responsibilities and technologies are at a Hack Event", + ]} + /> +); + +const DesignCommunity: React.FC = () => ( + +

+ ACM Design centers around UI/UX design and exploring what is possible + through all parts of design like research, graphic, and product. +

+

+ We uplift new designers and curious developers to learn how to think + like a designer. As a growing community, we host events to teach + designers to go from mapping out ideas to building innovative + prototypes. We strive to allow designers to have better conversations + with developers while making developers more conscious of design + methods. +

+ + } + srcs={[Design1.src, Design2.src, Design3.src, Design4.src]} + alts={[ + "People brainstorming designs on sticky notes", + "Design presenter presenting", + "Design event wide shot", + "Example design project", + ]} + /> +); + +const BitByteDescription: React.FC = () => ( + + Join ACM’s Bit–Byte program that pairs students to make lifelong + friendships! Our upperclassmen bigs (bytes) help their littles (bits) + grow in their academic, social, and professional lives. +

+ } + srcs={[BitByte1.src, BitByte2.src, BitByte4.src, BitByte3.src]} + alts={[ + "one or two trees in the bit byte program", + "VP Membership Tony presents tips for success for the bit byte program", + 'members talk over some tapioca express "boba"', + "members at bit byte allocation", + ]} + /> +); + +const OutreachDescription: React.FC = () => ( + + Welcome to ACM Outreach at UCSD, where our mission is to ignite a + passion for computing and STEM among K-12 students, with a special focus + on those who are underrepresented in the computing community. Our goal + is to empower students to explore the exciting world of computing by + nurturing their curiosity and enthusiasm for technology. Join us in + inspiring the next generation of innovators and problem solvers! +

+ } + srcs={[Outreach1.src, Outreach2.src, Outreach3.src, Outreach4.src]} + alts={[ + "Boy Scouts and Outreach volunteers make diamond signs with their hands in front of the Warren Bear", + "Outreach volunteers help out Boy Scouts with their Scratch projects", + "a child studiously considers whether to leave Scratch with their project changes unsaved", + "Boy Scouts and Outreach volunteers share their favorite video games", + ]} + /> +); + +const ProjectsDescription: React.FC = () => ( + + Sign up to join a team in our quarter-long projects. Grow your skills in + coding, design, or project management. +

+ } + srcs={[Project1.src, Project2.src, Project3.src, Project4.src]} + alts={[ + "members check out projects at project showcase", + "a project team makes diamond signs with their hands at project showcase, celebrating the completion of their project over the course of a quarter", + "a team hangs out at a social to take a break from their project", + "a project team", + ]} + /> +); + +const SpaceDescription: React.FC = () => ( + + Through SPACE, students and recruiters can connect and interact with + each other regarding professional opportunities such as internships, + full or part-time positions, and student programs. +

+ } + srcs={[SPACE1.src, SPACE2.src, SPACE3.src, SPACE4.src]} + alts={[ + "students talk to a company at SPACE", + "students talk to a recruiter at SPACE", + "LPL financial is hiring! recruiters give a thumbs-up", + "students excitedly await their turn to present themselves to companies", + ]} + /> +); + +const CommunitySubOrgs: React.FC = () => { + const [section, setSection] = useState<"communities" | "initiatives">( + "communities" + ); + const [selected, setSelected] = useState(""); + + useEffect(() => { + const handleScroll = () => { + const middle = window.innerHeight / 2; + + setSection( + middle > + (document.getElementById("initiatives")?.getBoundingClientRect() + .top ?? 0) + ? "initiatives" + : "communities" + ); + + const communities = document.getElementsByClassName( + "community-description" + ); + for (const community of Array.from(communities).reverse()) { + const { top } = community.getBoundingClientRect(); + if (middle > top) { + setSelected(community.id); + return; + } + } + setSelected(""); + }; + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + return ( + <> +

+ Explore ACM +

+

+ ACM at UCSD is one large community, but it is made up of several smaller + communities focused on specific areas of technology. +

+ +
+

Communities

+ + + + + +
+
+

Initiatives

+ + + + + +
+ + ); +}; + +export default CommunitySubOrgs; diff --git a/src/sections/community/styles.scss b/src/sections/community/styles.scss deleted file mode 100644 index 87150d69..00000000 --- a/src/sections/community/styles.scss +++ /dev/null @@ -1,548 +0,0 @@ -@use "src/styles/colors.scss" as colors; - -.community { - &__hero { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - width: 100%; - padding-top: 140px; - height: 650px; - > h1 { - font-size: 45px; - margin-bottom: 30px; - text-align: center; - } - > p { - font-size: 20px; - font-weight: 500; - width: 650px; - margin-bottom: 40px; - text-align: center; - } - - &__toggle { - display: flex; - flex-direction: row; - text-align: center; - gap: 8rem; - - a { - position: relative; - color: rgba(0, 0, 0, 0.8); - text-decoration: none; - cursor: pointer; - } - - a.active { - position: relative; - display: inline-block; - padding-bottom: 12px; - } - - a.active::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 3px; - background: linear-gradient(to right, #FF6D6D, #FDA44E, #FFDC24, #38CF6B, #62B0FF, #816DFF, #FF6D6D); - background-size: 150% 150%; - } - } - - &__communities { - text-align: left; - } - @media only screen and (max-width: 812px) { - padding-top: 20px; - height: 0; - margin-top: 50px; - > h1 { - text-align: left; - } - > p { - display: none; - } - } - } - &__sub-orgs { - &--mobile { - h1 { - font-weight: 500; - font-size: 40px; - margin-bottom: 30px; - } - &__description > p { - padding: 0 2rem; - text-align: center; - font-size: 1.1rem; - font-weight: 500; - } - &__navigation { - display: flex; - justify-content: center; - padding: 1em; - > button { - width: 90px; - background: none; - outline: none; - border: none; - img { - width: 90px; - margin: 0; - } - &:hover { - cursor: pointer; - img { - transform: scale(1.1); - transition: transform 0.2s; - } - } - } - } - } - .selected { - border: solid 5px colors.$black; - } - &__community-card { - display: flex; - height: calc(100vh - 78px); - min-height: 564px; - height: fit-content; - margin-bottom: 10px; - gap: 2.5rem; - justify-content: space-between; - - - - .color_slide { - // To help move the color side bar all the way to the left - // 960px is the max width of the div above the
tag - @media (min-width: 960px) { - margin-left: calc(-1 * ((100vw - 960px) / 2)) !important; - } - position: relative; - top: 0; - left: 0; - min-width: 70px; - z-index: -1; - } - &__header { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 1rem; - flex-direction: column; - img { - height: 60px; - margin-right: 10px; - } - - h1 { - flex-basis: 100%; - justify-self: flex-star; - align-self: flex-start; - } - } - &__logo { - min-width: 226px; - max-width: 226px; - margin: 66px; - } - &__content { - display: flex; - flex-direction: row; - &.mobile{ - flex-direction: column; - gap: 1rem; - } - justify-content: center; - width: 100%; - gap: 3.5rem; - align-items: center; - height: fit-content; - &__desc-holder { - flex-basis: 500px; - display: flex; - flex-direction: column; - justify-content: flex-start; - height: fit-content; - flex-grow: 1; - > h1 { - font-weight: 500; - font-size: 45px; - } - > p { - font-weight: 500; - font-size: 18px; - margin-bottom: 30px; - } - .community-links { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - padding-top: 4px; - width: 100%; - - a { - border: none; - background-color: transparent; - outline: none; - padding-right: 30px; - img { - width: 40px; - &:hover { - transform: scale(1.05); - transition: transform 0.2s; - } - } - } - - - } - } - } - } - - &__logo-card { - display: flex; - height: fit-content; - margin-bottom: 10px; - - align-items: center; - - max-width: 20%; - - &[data-open=true] { - flex-grow: 1; - max-width: 40%; - } - - &__header { - display: flex; - align-items: center; - justify-content: flex-start; - - h1 { - flex-basis: 100%; - } - } - - > button { - background: none; - outline: none; - border: none; - padding: 0; - } - &__logo { - min-width: 120px; - max-width: 194px; - width: 194px; - margin: 36px 0; - margin-right: 46px; - cursor: pointer; - } - - &__content { - display: flex; - flex-direction: column; - justify-content: center; - max-width: 50%; - height: fit-content; - overflow-wrap: break-word; - > a { - display: flex; - justify-content: center; - &:hover img { - transition: transform 0.2s; - transform: scale(1.05); - } - } - > div { - max-width: 570px; - display: flex; - flex-direction: column; - justify-content: flex-start; - height: fit-content; - > h1 { - font-weight: 500; - font-size: 45px; - } - > p { - font-weight: 500; - font-size: 18px; - margin-bottom: 30px; - } - .community-links { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - padding-top: 4px; - width: 100%; - - a { - border: none; - background-color: transparent; - outline: none; - padding-right: 30px; - img { - width: 40px; - &:hover { - transform: scale(1.05); - } - } - } - } - } - } - } - - @media only screen and (max-width: 812px) { - p { - padding: 3em !important; - } - &__community-card { - padding: 0 3em !important; - .color_slide { - display: none; - } - &__header { - justify-content: left; - h1 { - font-size: 28px; - } - } - &__content { - div { - p { - font-size: 16px; - } - .community-links a { - padding-right: 20px; - } - } - } - } - } - } - - &__navigator { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - } - - &__image-grid { - display: grid; - height: 350px; - width: 90%; - gap: 0.5rem; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - - // For some reason if the grid-template-columns are set to - // auto 17% auto auto auto auto; right side doesn't expand - // if all are auto nothing expands - // Code reviewer if you know please explain - grid-template-rows: 1fr 1fr; - overflow: hidden; - flex-grow: 2; - flex-shrink: 1; - transition: 300ms; - - &:has(.pic1:hover) { - grid-template-columns: 1fr 1fr 1fr 0fr 0fr 0fr; - grid-template-rows: 1fr 0fr; - gap: 0rem; - } - - &:has(.pic2:hover) { - grid-template-columns: 0fr 0fr 0fr 1fr 1fr 1fr; - grid-template-rows: 1fr 0fr; - gap: 0rem; - } - - &:has(.pic3:hover) { - grid-template-columns: 1fr 1fr 0fr 0fr 0fr 0fr; - grid-template-rows: 0fr 1fr; - gap: 0rem; - } - - &:has(.pic4:hover) { - grid-template-columns: 0fr 0fr 1fr 1fr 1fr 1fr; - grid-template-rows: 0fr 1fr; - gap: 0rem; - } - - .nextImageHolder { - overflow: hidden; - border-radius: 20px; - width: 100%; - height: 100%; - margin-bottom: 0; - position: relative; - - img{ - object-fit: cover; - } - } - - .pic1 { - grid-column: 1 / 4; - grid-row: 1; - } - - .pic2 { - grid-column: 4 / -1; - grid-row: 1; - } - - .pic3 { - grid-column: 1 / 3; - grid-row: 2; - } - - .pic4 { - grid-column: 3 / -1; - grid-row: 2; - } - } -} - -.fullName { - color: rgba(0, 0, 0, 0.70); - font-size: 26px; - font-weight: 400; - line-height: normal; -} -.red { - color: colors.$red; -} -.redbg { - background-color: colors.$light-red; -} -.redfill { - fill: colors.$red !important; -} -.orange { - color: colors.$orange; -} -.orangebg { - background-color: colors.$light-orange; -} -.orangefill { - fill: colors.$orange !important; -} -.turquoise { - color: colors.$turquoise; -} -.turquoisebg { - background-color: colors.$light-turquoise; -} -.yellow { - color: colors.$orange; -} -.yellowbg { - background-color: colors.$light-orange; -} -.purple { - color: colors.$purple; -} -.purplebg { - background-color: colors.$light-purple; -} -.pink { - color: colors.$pink; -} -.pinkbg { - background-color: colors.$light-pink; -} -.spacer80px { - height: 80px; -} - - -// Rainbow glow behind initiative sections NOT WORKING - -/* -.glow-on-hover { - border: none; - outline: none; - color: #fff; - cursor: pointer; - position: relative; - z-index: 0; - border-radius: 10px; - background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); -} - -.glow-on-hover:before { - content: 'BEFORE'; - background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); - position: absolute; - top: -2px; - left:-2px; - background-size: 400%; - z-index: 1; - filter: blur(5px); - width: calc(100% + 4px); - height: calc(100% + 4px); - animation: glowing 20s linear infinite; - opacity: 1; - transition: opacity .3s ease-in-out; - border-radius: 10px; -} - -.glow-on-hover[data-glow=true]:after { - background: transparent; -} - -.glow-on-hover[data-glow=true]:before { - opacity: 1; -} - -.glow-on-hover:after { - z-index: -1; - content: 'AFTER'; - position: absolute; - width: 100%; - height: 100%; - background: #1e3a8a; - left: 0; - top: 0; - border-radius: 10px; -} - -@keyframes glowing { - 0% { background-position: 0 0; } - 50% { background-position: 400% 0; } - 100% { background-position: 0 0; } -}*/ - -.glow-on-hover { - --s: 10px; /* the spread */ - position: relative; -} -.glow-on-hover::before { - inset: calc(-1 * var(--s)); - clip-path: polygon( - -100vmax -100vmax, - 100vmax -100vmax, - 100vmax 100vmax, - -100vmax 100vmax, - -100vmax -100vmax, - calc(0px + var(--s)) calc(0px + var(--s)), - calc(0px + var(--s)) calc(100% - var(--s)), - calc(100% - var(--s)) calc(100% - var(--s)), - calc(100% - var(--s)) calc(0px + var(--s)), - calc(0px + var(--s)) calc(0px + var(--s)) - ); -} \ No newline at end of file diff --git a/src/styles/colors.scss b/src/styles/colors.scss index ce0ab80a..d4fd055d 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -6,6 +6,7 @@ $blue: #62b0ff; $turquoise: #51c0c0; $purple: #816dff; $pink: #e981a0; +$outreach-green: rgb(70, 155, 104); $white: #ffffff; $grey: #f8f8f8; @@ -21,3 +22,4 @@ $light-purple: rgba(129, 109, 255, 0.2); $light-orange: rgba(249, 168, 87, 0.2); $link-blue: #0659bc; $light-pink: rgba(233, 129, 160, 0.2); +$light-outreach-green: rgba(70, 155, 104, 0.2); diff --git a/src/styles/index.css b/src/styles/index.css index a5d874d4..40a249cd 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,6 +6,7 @@ padding: 0; box-sizing: border-box; } + body { color: #222; font-size: 1rem; diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 1087223b..51ec30a5 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -5,10 +5,8 @@ html { box-sizing: border-box; overflow-y: scroll; scroll-behavior: smooth; -} - -* { - scroll-margin-top: 88px; + scroll-padding-top: 5.275rem; + scroll-snap-type: y proximity; } body {