From 3fa141d81afbb2530c7d09f629e03645807f501c Mon Sep 17 00:00:00 2001 From: Sam Der Date: Sun, 17 Sep 2023 14:57:39 -0700 Subject: [PATCH] feat: mentor section --- .../src/assets/images/MentorStickyGreen.svg | 18 ++++ .../src/assets/images/MentorStickyYellow.svg | 18 ++++ .../src/assets/images/YellowVertPost-it.png | Bin 0 -> 8535 bytes apps/site/src/assets/images/bookmark.png | Bin 0 -> 3620 bytes .../src/assets/images/bookmark_border.png | Bin 0 -> 3677 bytes apps/site/src/assets/images/tape.svg | 3 + .../BookmarkLink/BookmarkLink.module.scss | 18 ++++ .../components/BookmarkLink/BookmarkLink.tsx | 26 +++++ .../src/components/Intro/Intro.module.scss | 3 +- apps/site/src/components/Intro/Intro.tsx | 2 +- .../src/components/Mentor/Mentor.module.scss | 102 ++++++++++++++++++ apps/site/src/components/Mentor/Mentor.tsx | 56 ++++++++++ apps/site/src/lib/useWindowWidth.tsx | 16 +++ apps/site/src/views/Landing/Landing.tsx | 10 +- 14 files changed, 267 insertions(+), 5 deletions(-) create mode 100644 apps/site/src/assets/images/MentorStickyGreen.svg create mode 100644 apps/site/src/assets/images/MentorStickyYellow.svg create mode 100644 apps/site/src/assets/images/YellowVertPost-it.png create mode 100644 apps/site/src/assets/images/bookmark.png create mode 100644 apps/site/src/assets/images/bookmark_border.png create mode 100644 apps/site/src/assets/images/tape.svg create mode 100644 apps/site/src/components/BookmarkLink/BookmarkLink.module.scss create mode 100644 apps/site/src/components/BookmarkLink/BookmarkLink.tsx create mode 100644 apps/site/src/components/Mentor/Mentor.module.scss create mode 100644 apps/site/src/components/Mentor/Mentor.tsx create mode 100644 apps/site/src/lib/useWindowWidth.tsx diff --git a/apps/site/src/assets/images/MentorStickyGreen.svg b/apps/site/src/assets/images/MentorStickyGreen.svg new file mode 100644 index 00000000..adc5b675 --- /dev/null +++ b/apps/site/src/assets/images/MentorStickyGreen.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/MentorStickyYellow.svg b/apps/site/src/assets/images/MentorStickyYellow.svg new file mode 100644 index 00000000..7503e304 --- /dev/null +++ b/apps/site/src/assets/images/MentorStickyYellow.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/YellowVertPost-it.png b/apps/site/src/assets/images/YellowVertPost-it.png new file mode 100644 index 0000000000000000000000000000000000000000..dec94147c3f9e1da9caf0ed5b14dfe816128b24f GIT binary patch literal 8535 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 literal 0 HcmV?d00001 diff --git a/apps/site/src/assets/images/bookmark.png b/apps/site/src/assets/images/bookmark.png new file mode 100644 index 0000000000000000000000000000000000000000..22e81c9c4c8eb6406774a001cf09b56b241f11e9 GIT binary patch literal 3620 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 vOivDQ|6$8@%>RS>ci6Ps&o50 + + diff --git a/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss b/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss new file mode 100644 index 00000000..c2820911 --- /dev/null +++ b/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss @@ -0,0 +1,18 @@ +.bookmarkLink { + background-image: url("~@/assets/images/bookmark.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-position: center; + text-decoration: none; + color: black; + padding-left: 2.5rem; + padding-right: 3rem; + transition: background-image 0.2s ease, font-weight 0.2s ease; + + &:hover { + background-image: url("~@/assets/images/bookmark_border.png"); + transition: background-image 0.2s ease, font-weight 0.2s ease; + color: black; + font-weight: bold; + } +} \ No newline at end of file diff --git a/apps/site/src/components/BookmarkLink/BookmarkLink.tsx b/apps/site/src/components/BookmarkLink/BookmarkLink.tsx new file mode 100644 index 00000000..50d4da26 --- /dev/null +++ b/apps/site/src/components/BookmarkLink/BookmarkLink.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import Button from "react-bootstrap/Button"; + +import styles from "./BookmarkLink.module.scss"; + +interface BookmarkLinkProps { + className?: string; + href: string; + children: React.ReactNode; +} + +export default function BookmarkLink({ + className, + href, + children, +}: BookmarkLinkProps) { + return ( + + ); +} diff --git a/apps/site/src/components/Intro/Intro.module.scss b/apps/site/src/components/Intro/Intro.module.scss index 60071e48..1bf96cf1 100644 --- a/apps/site/src/components/Intro/Intro.module.scss +++ b/apps/site/src/components/Intro/Intro.module.scss @@ -1,5 +1,4 @@ @use "bootstrap-utils" as bootstrap; -@use "zothacks-theme" as theme; .intro { background-image: url("~src/assets/images/index-card.png"); @@ -10,7 +9,7 @@ position: relative; text-align: center; - h1 { + h2 { margin-bottom: 70px; } diff --git a/apps/site/src/components/Intro/Intro.tsx b/apps/site/src/components/Intro/Intro.tsx index c05ca735..13be733f 100644 --- a/apps/site/src/components/Intro/Intro.tsx +++ b/apps/site/src/components/Intro/Intro.tsx @@ -14,7 +14,7 @@ export default function Intro() { height="100" alt="Index card pin" /> -

What is ZotHacks?

+

What is ZotHacks?

ZotHacks is a beginner-friendly hackathon where students with minimal computer science experience will learn to build their first CS project. diff --git a/apps/site/src/components/Mentor/Mentor.module.scss b/apps/site/src/components/Mentor/Mentor.module.scss new file mode 100644 index 00000000..21123510 --- /dev/null +++ b/apps/site/src/components/Mentor/Mentor.module.scss @@ -0,0 +1,102 @@ +@use "bootstrap-utils" as bootstrap; + +.applySticky { + background-image: url("~@/assets/images/MentorStickyYellow.svg"); + background-repeat: no-repeat; + background-size: contain; + padding-top: 3rem; + padding-left: 5rem; + padding-right: 5rem; + padding-bottom: 8rem; + margin-left: 22%; + position: relative; + height: 325px; + + h2 { + font-size: 1.8rem; + } + + a { + position: absolute; + bottom: 10%; + left: 5%; + transform: rotate(7.5deg); + } + + + @include bootstrap.media-breakpoint-down(xxl) { + & { + margin-left: 17.5%; + } + } +} + +.descSticky { + background-image: url("~@/assets/images/MentorStickyGreen.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: 60%; + padding: 6rem; + position: absolute; + z-index: -1; + top: 15%; + left: 40%; + width: 41.667%; + + p { + transform: rotate(-5deg); + } + + @include bootstrap.media-breakpoint-down(xxl) { + & { + top: 10%; + left: 42%; + } + } + + @include bootstrap.media-breakpoint-down(xl) { + & { + width: 50%; + padding: 5rem; + } + } +} + +.applyStickyMobile { + background-image: url("~@/assets/images/YellowVertPost-it.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + z-index: 1; +} + +.descStickyMobile { + background-image: url("~@/assets/images/MentorStickyGreen.svg"); + background-repeat: no-repeat; + background-size: contain; + position: absolute; + width: 300px; + height: 300px; + right: 0; + bottom: -15%; + z-index: 0; + + a { + position: absolute; + bottom: 0; + z-index: 100; + transform: rotate(-5deg); + } + + @include bootstrap.media-breakpoint-up(sm) { + & { + bottom: -25%; + } + } +} + +.tape { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/apps/site/src/components/Mentor/Mentor.tsx b/apps/site/src/components/Mentor/Mentor.tsx new file mode 100644 index 00000000..706211d3 --- /dev/null +++ b/apps/site/src/components/Mentor/Mentor.tsx @@ -0,0 +1,56 @@ +import Image from "next/image"; +import Col from "react-bootstrap/Col"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; + +import useWindowWidth from "@/lib/useWindowWidth"; +import BookmarkLink from "@/components/BookmarkLink/BookmarkLink"; +import tape from "@/assets/images/tape.svg"; +import styles from "./Mentor.module.scss"; + +const MENTOR_APP_URL = "https://hack.ics.uci.edu"; + +export default function Mentor() { + const width = useWindowWidth(); + + const mentorHeader = ( +

Interested in becoming a mentor?

+ ); + const mentorDescEl = ( +

+ Have a knack for innovation? Interested in inspiring the next generation + of developers? Our mentors are vital to making ZotHacks 2023 successful + and enjoyable for our hackers. Apply to be a mentor today! +

+ ); + const applyLink = ( + + Apply to Mentor! + + ); + + return ( + + {width >= 992 ? ( + + + {mentorHeader} + {applyLink} + + + {mentorDescEl} + + + ) : ( + + + post-it tape + {mentorHeader} + {mentorDescEl} + + {applyLink} + + )} + + ); +} diff --git a/apps/site/src/lib/useWindowWidth.tsx b/apps/site/src/lib/useWindowWidth.tsx new file mode 100644 index 00000000..cad6a061 --- /dev/null +++ b/apps/site/src/lib/useWindowWidth.tsx @@ -0,0 +1,16 @@ +import { useState, useEffect } from "react"; + +export default function useWindowWidth() { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + function handleResize() { + setWindowWidth(window.innerWidth); + } + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }); + + return windowWidth; +} diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx index 53efe031..0d1e5931 100644 --- a/apps/site/src/views/Landing/Landing.tsx +++ b/apps/site/src/views/Landing/Landing.tsx @@ -1,13 +1,19 @@ "use client"; +import Container from "react-bootstrap/Container"; + import Intro from "@/components/Intro/Intro"; import "./Landing.module.scss"; +import Mentor from "@/components/Mentor/Mentor"; export default function Landing() { return (
-

ZotHacks 2023

- + +

ZotHacks 2023

+ + +
); }