From 6c418e9e7fbd860349fd81abd6738d40ced2f7a3 Mon Sep 17 00:00:00 2001 From: Arvin Zhang Date: Tue, 5 Sep 2023 12:13:16 -0700 Subject: [PATCH 1/5] test --- app/globals.css | 3 +- app/page.tsx | 10 +- src/components/navbar/Navbar.module.scss | 152 +++++++++++++++++++++++ src/components/navbar/index.tsx | 60 +++++++++ src/sections/Timer/index.tsx | 78 ++++++++++++ src/sections/Timer/style.module.scss | 43 ++++++- src/styles/vars.scss | 7 +- src/utils/general.ts | 26 ++++ 8 files changed, 374 insertions(+), 5 deletions(-) create mode 100644 src/components/navbar/Navbar.module.scss create mode 100644 src/utils/general.ts diff --git a/app/globals.css b/app/globals.css index 931dd67..3053409 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,5 @@ * { scroll-behavior: smooth !important; overscroll-behavior: none; -} \ No newline at end of file +} + diff --git a/app/page.tsx b/app/page.tsx index 25ed299..8e5b94c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,13 +2,19 @@ import type { NextPage } from 'next'; import '../src/styles/reset.scss'; import About from '../src/sections/About-Projects'; +import NavigationBar from '@/src/components/navbar'; +import TimerHero from '@/src/sections/Timer'; + + // here we will compile all the sections of the website together const Home: NextPage = () => { return (
- Welcome to the ACM Projects Website! - + + + +
); }; diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss new file mode 100644 index 0000000..5bf233d --- /dev/null +++ b/src/components/navbar/Navbar.module.scss @@ -0,0 +1,152 @@ +@use "src/styles/vars" as colors; + +.navbarWrapper { + position: fixed; + top: 0; + width: 100%; + font-weight: bold; + z-index: 10; + white-space: nowrap; + + // container for fixed navbar (desktop and mobile) + .navbar { + background-color: colors.$white; + z-index: 20; + font-size: 18px; + width: 100%; + + height: 78px; + display: flex; + justify-content: space-between; + align-items: center; + + // left side of navbar is just the acm logo + .left { + height: 78px; + padding-top: 9px; + padding-bottom: 9px; + margin-left: 32px; + a { + display: flex; + flex-direction: row; + align-items: center; + text-decoration: none; + > img { + height: 60px; + margin: 0; + } + > p { + font-size: 24px; + color: colors.$black; + margin-left: 4px; + margin-bottom: 2px; + } + } + } + + // navbar right side contains all navlinks on desktop + .right { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + .navItem { + display: flex; + align-items: center; + text-decoration: none; + color: colors.$black; + margin-right: 32px; + } + + .loginButton { + height: 100%; + align-self: center; + + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + + height: 35px; + width: 150px; + + color: colors.$white; + background-color: colors.$black; + border-radius: 0.5em; + margin-right: 32px; + + &:hover { + opacity: 0.85; + transition: 0.3s; + } + } + &.hidden { + display: none; + } + } + + // toggle button for mobile menu is only visible on mobile, otherwise hidden + .toggleIcon { + position: relative; + width: 40px; + height: 20px; + margin: 0 30px; + padding: 0; + background-color: colors.$white; + + // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x) + .bar1 { + width: 40px; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + top: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + transform: rotate(-45deg) translateY(-10px); + transform-origin: top right; + } + } + + .bar2 { + width: 23px; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + right: 0; + bottom: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + width: 40px; + transform: rotate(45deg) translateY(10px); + transform-origin: bottom right; + } + } + &.hidden { + display: none; + } + } + } + + + // 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; + background: linear-gradient( + 270deg, + colors.$red 0%, + colors.$orange 18.75%, + colors.$green-success 36.98%, + colors.$blue-ap 55.73%, + colors.$blue 75%, + colors.$purple 100% + ); + } +} \ No newline at end of file diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index e69de29..eabf8b7 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -0,0 +1,60 @@ +'use client' + +import Link from "next/link"; +import { useEffect, useState } from "react"; +import ACMLogo from "../../../public/assets/acm_logo.svg"; +import s from "../navbar/Navbar.module.scss"; +import { Size, useWindowSize } from "../../utils/general"; + + +const navLinks = [ + { to: "/", text: "Home" }, + { to: "/", text: "Applications" }, + { to: "/", text: "About" }, + { to: "/", text: "Archive" }, + { to: "/", text: "Gallery" }, +]; + +const NavigationBar: React.FC = () => { + const size: Size = useWindowSize(); + + const [menuOpen, setMenuOpen] = useState(false); + const [mobile, setMobile] = useState(false); + const toggleMenu = () => setMenuOpen(!menuOpen); + + // Switch to mobile less than 960px + // useEffect(() => { + // setMobile(size.width <= 960); + // }, [size]); + + // If they go back to desktop size, don't keep the menu open + // useEffect(() => { + // if (!mobile) setMenuOpen(false); + // }, [mobile]); + + return ( +
+
+ {/* Navbar ACM Logo */} +
+ + ACM Logo +

Projects

+ +
+ + {/* Desktop Nav Links */} +
+ {navLinks.map((link, key) => ( + {link.text} + ))} +
+
+ + {/* Bottom Rainbow */} +
+
+ ); +}; + +export default NavigationBar; \ No newline at end of file diff --git a/src/sections/Timer/index.tsx b/src/sections/Timer/index.tsx index e69de29..10788cc 100644 --- a/src/sections/Timer/index.tsx +++ b/src/sections/Timer/index.tsx @@ -0,0 +1,78 @@ +"use client" + +import { useState, useEffect } from "react"; +import s from "../Timer/style.module.scss"; + + +const TimerHero: React.FC = () => { + + + const [days, setDays] = useState(0) + const [hours, setHours] = useState(0) + const [minutes, setMinutes] = useState(0) + const [seconds, setSeconds] = useState(0) + + useEffect(() => { + + const target = new Date("10/23/2023 23:59:59") + + const interval = setInterval(() =>{ + const now = new Date() + const difference = target.getTime() - now.getTime() + + const d = Math.floor(difference / (1000 * 60 * 60 * 24)) + setDays(d) + + const h = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + setHours(h) + + const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); + setMinutes(m); + + const s = Math.floor((difference % (1000 * 60)) / 1000); + setSeconds(s); + }, 1000) + + + + return () => clearInterval(interval) + + }, []) + + return ( +
+
+
+

Countdown To

+

Fall 2023 Project Application Opening

+
+
+
+
+ {days} + Days +
+ : +
+ {hours} + Hours +
+ : +
+ {minutes} + Minutes +
+ : +
+ {seconds} + Seconds +
+
+
+ +
+
+ ); +}; + +export default TimerHero; \ No newline at end of file diff --git a/src/sections/Timer/style.module.scss b/src/sections/Timer/style.module.scss index 75bfb2f..bc7cf15 100644 --- a/src/sections/Timer/style.module.scss +++ b/src/sections/Timer/style.module.scss @@ -1 +1,42 @@ -@use "..\styles\vars.scss" as v; // allows you to use pre-defined colors \ No newline at end of file +@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors + +.hero { + &__timer { + padding: 0 !important; + margin: 100px 0; + background-color: v.$blue; + justify-content: center; + align-items: center; + text-align: center; + + &__grid { + width: 100% !important; + display: grid; + &__header { + h1 { + font-size: 40px; + font-weight: 700; + } + + p { + font-size: 25px; + font-weight: 400; + } + } + + } + + @media only screen and (max-width: 1050px) { + padding: 3em !important; + } + + @media only screen and (max-width: 500px) { + margin: 40px 0; + + .home__communities__grid { + padding: 0; + } + } + + } +} \ No newline at end of file diff --git a/src/styles/vars.scss b/src/styles/vars.scss index f3020e7..e4e5723 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -7,4 +7,9 @@ $pink: #FF94B4; $gray: #C3C6CF; $red-warning: #AC303E; $green-success: #30AC9E; -$blue-ap: #68b4fc; \ No newline at end of file +$blue-ap: #68b4fc; + + +$turquoise: #51c0c0; +$purple: #816dff; +$black: #333333; \ No newline at end of file diff --git a/src/utils/general.ts b/src/utils/general.ts new file mode 100644 index 0000000..9f952f0 --- /dev/null +++ b/src/utils/general.ts @@ -0,0 +1,26 @@ +import { useState, useEffect } from "react"; + +// Define general type for useWindowSize hook, which includes width and height +export interface Size { + width: number | undefined; + height: number | undefined; +} + +export function useWindowSize(): Size { + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + window.addEventListener("resize", handleResize); + handleResize(); + return () => window.removeEventListener("resize", handleResize); + }, []); + return windowSize; +} \ No newline at end of file From 71a8f0d99548f7352c0efd2a30a10d4a86aebd2e Mon Sep 17 00:00:00 2001 From: Arvin Zhang Date: Fri, 8 Sep 2023 18:03:17 -0700 Subject: [PATCH 2/5] timer page --- app/globals.css | 1 + src/sections/Timer/index.tsx | 79 +++++++++++++--------- src/sections/Timer/style.module.scss | 97 ++++++++++++++++++++++++---- 3 files changed, 137 insertions(+), 40 deletions(-) diff --git a/app/globals.css b/app/globals.css index 3053409..5e0b476 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,5 +1,6 @@ * { scroll-behavior: smooth !important; overscroll-behavior: none; + } diff --git a/src/sections/Timer/index.tsx b/src/sections/Timer/index.tsx index 10788cc..d839d36 100644 --- a/src/sections/Timer/index.tsx +++ b/src/sections/Timer/index.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import s from "../Timer/style.module.scss"; +import ACMLogo from "../../../public/assets/acm_logo.svg" const TimerHero: React.FC = () => { @@ -14,7 +15,7 @@ const TimerHero: React.FC = () => { useEffect(() => { - const target = new Date("10/23/2023 23:59:59") + const target = new Date("9/25/2023 08:00:00") const interval = setInterval(() =>{ const now = new Date() @@ -40,37 +41,57 @@ const TimerHero: React.FC = () => { }, []) return ( -
-
-
-

Countdown To

-

Fall 2023 Project Application Opening

-
-
-
-
- {days} - Days -
- : -
- {hours} - Hours -
- : -
- {minutes} - Minutes -
- : -
- {seconds} - Seconds -
-
+
+
+
+
+

Countdown To

+

Fall 2023 Project Application Opening

+
+ +
+
+ {days} + days +
+ : +
+ {hours} + hours +
+ : +
+ {minutes} + mins +
+ : +
+ {seconds} + secs +
+
+
+
+ + +
+
+ +

The application for ACM Projects is now closed. Applications will reopen in Fall 2023.

+
+ ACM Logo + +
+
+
+ ACM Projects is our quarterly projects program where students work in a tight knit team. The program gives students the opportunity to be hands-on outside of courses in fields such as AI, design, and software engineering. The program culminates in a projects showcase and the finished product looks great on resumes. We welcome all skill levels to apply! +
+
); }; diff --git a/src/sections/Timer/style.module.scss b/src/sections/Timer/style.module.scss index bc7cf15..9ce48d2 100644 --- a/src/sections/Timer/style.module.scss +++ b/src/sections/Timer/style.module.scss @@ -1,28 +1,71 @@ @use "../../styles/vars.scss" as v; // allows you to use pre-defined colors .hero { + padding-top: 64px; + padding-bottom: 64px; + font-family: 'DM Sans'; + font-size: 22px; + + &__timer { padding: 0 !important; - margin: 100px 0; + margin-top: 85px; background-color: v.$blue; justify-content: center; align-items: center; text-align: center; + display:flex; + height: 400px; - &__grid { + &__header { width: 100% !important; - display: grid; - &__header { - h1 { - font-size: 40px; - font-weight: 700; - } + margin-top: 20px; + padding: 25px; + display: flex; + flex-direction: column; + h1 { + font-size: 52px; + font-weight: 700; + } + + p { + font-size: 41px; + font-weight: 300; + } + } + + &__time { + width: 100% !important; + display:flex; + flex-direction: row; + justify-content: center; + height: 150px; + padding: 8px; - p { - font-size: 25px; - font-weight: 400; + &__segment { + display:flex; + flex-direction: column; + text-align: center; + width: 90px; + + &__digits { + font-size: 66px; + font-weight: 800; + height: 50px; + } + &__label { + font-size: 20px; + font-weight: 500; + height: 50px; } } + &__divider { + font-size: 66px; + font-weight: 800; + height: 50px; + margin-left: 10px; + margin-right: 10px; + }; } @@ -39,4 +82,36 @@ } } +} + +.description { + padding-top: 64px; + padding-bottom: 64px; + display: flex; + flex-direction: row; + justify-content: center; + &__info { + width: 550px !important; + padding: 20px; + text-align: left; + font-size: 18px; + + button { + width: 100% !important; + height: 80px; + border-radius: 40px; + border: none; + font-size: 32px; + color: gray; + } + p { + text-align: center; + padding: 10px; + color: v.$red-warning; + } + &__logo { + width: 240px; + margin: 0px auto; + } + } } \ No newline at end of file From 1d22dcc7692e49d4572eaa3086079e6d642af77f Mon Sep 17 00:00:00 2001 From: Arvin Zhang Date: Fri, 8 Sep 2023 18:16:22 -0700 Subject: [PATCH 3/5] remove navbar --- src/components/navbar/index.tsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index eabf8b7..6f9834b 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -34,25 +34,7 @@ const NavigationBar: React.FC = () => { return (
-
- {/* Navbar ACM Logo */} - - - {/* Desktop Nav Links */} -
- {navLinks.map((link, key) => ( - {link.text} - ))} -
-
- - {/* Bottom Rainbow */} -
+
); }; From 676128a2ed7a6f4ee5dbd53ef6fd558ddd5607cf Mon Sep 17 00:00:00 2001 From: Arvin Zhang Date: Sun, 17 Sep 2023 15:13:41 -0700 Subject: [PATCH 4/5] navbar --- src/components/navbar/Navbar.module.scss | 65 ++++++++++++++++-------- src/components/navbar/index.tsx | 54 +++++++++++--------- 2 files changed, 73 insertions(+), 46 deletions(-) diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss index 5bf233d..e6626df 100644 --- a/src/components/navbar/Navbar.module.scss +++ b/src/components/navbar/Navbar.module.scss @@ -1,47 +1,68 @@ -@use "src/styles/vars" as colors; +@use "../../styles/vars.scss" as vars; .navbarWrapper { position: fixed; top: 0; + font-weight: 400; width: 100%; - font-weight: bold; z-index: 10; white-space: nowrap; // container for fixed navbar (desktop and mobile) .navbar { - background-color: colors.$white; + background-color: vars.$white; z-index: 20; font-size: 18px; width: 100%; height: 78px; - display: flex; justify-content: space-between; align-items: center; // left side of navbar is just the acm logo .left { height: 78px; - padding-top: 9px; - padding-bottom: 9px; + //padding-top: 9px; + //padding-bottom: 9px; + padding: 16px 30px 16px 30px; margin-left: 32px; + display: flex; + a { display: flex; - flex-direction: row; align-items: center; text-decoration: none; + padding: 0px 16px 0px 16px; + flex-shrink: 0; + > img { - height: 60px; + height: 48px; margin: 0; } > p { - font-size: 24px; - color: colors.$black; + font-size: 23px; + color: vars.$black; + margin-left: 4px; + margin-bottom: 2px; + } + } + a:hover { + cursor: pointer + } + + .divider { + display: flex; + align-items: center; + text-decoration: none; + padding-right: 16px; + span { + font-size: 23px; + color: vars.$black; margin-left: 4px; margin-bottom: 2px; } } + } // navbar right side contains all navlinks on desktop @@ -55,7 +76,7 @@ display: flex; align-items: center; text-decoration: none; - color: colors.$black; + color: vars.$black; margin-right: 32px; } @@ -71,8 +92,8 @@ height: 35px; width: 150px; - color: colors.$white; - background-color: colors.$black; + color: vars.$white; + background-color: vars.$black; border-radius: 0.5em; margin-right: 32px; @@ -93,14 +114,14 @@ height: 20px; margin: 0 30px; padding: 0; - background-color: colors.$white; + background-color: vars.$white; // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x) .bar1 { width: 40px; height: 5px; border-radius: 2px; - background-color: colors.$black; + background-color: vars.$black; position: absolute; top: 1.5px; transition: 0.3s ease-in-out all; @@ -115,7 +136,7 @@ width: 23px; height: 5px; border-radius: 2px; - background-color: colors.$black; + background-color: vars.$black; position: absolute; right: 0; bottom: 1.5px; @@ -141,12 +162,12 @@ bottom: -0.4em; background: linear-gradient( 270deg, - colors.$red 0%, - colors.$orange 18.75%, - colors.$green-success 36.98%, - colors.$blue-ap 55.73%, - colors.$blue 75%, - colors.$purple 100% + vars.$red 0%, + vars.$orange 18.75%, + vars.$green-success 36.98%, + vars.$blue-ap 55.73%, + vars.$blue 75%, + vars.$purple 100% ); } } \ No newline at end of file diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index 6f9834b..f81d473 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -6,35 +6,41 @@ import ACMLogo from "../../../public/assets/acm_logo.svg"; import s from "../navbar/Navbar.module.scss"; import { Size, useWindowSize } from "../../utils/general"; - -const navLinks = [ - { to: "/", text: "Home" }, - { to: "/", text: "Applications" }, - { to: "/", text: "About" }, - { to: "/", text: "Archive" }, - { to: "/", text: "Gallery" }, -]; - const NavigationBar: React.FC = () => { const size: Size = useWindowSize(); - const [menuOpen, setMenuOpen] = useState(false); - const [mobile, setMobile] = useState(false); - const toggleMenu = () => setMenuOpen(!menuOpen); - - // Switch to mobile less than 960px - // useEffect(() => { - // setMobile(size.width <= 960); - // }, [size]); - - // If they go back to desktop size, don't keep the menu open - // useEffect(() => { - // if (!mobile) setMenuOpen(false); - // }, [mobile]); - return (
- + + + {/* Bottom Rainbow */} +
); }; From ffb8a8cd097bbc8f7a6d873a851ddc747ac497df Mon Sep 17 00:00:00 2001 From: Arvin Zhang Date: Tue, 19 Sep 2023 17:16:51 -0700 Subject: [PATCH 5/5] navbar scolling links --- src/components/navbar/index.tsx | 23 +++++++++++++---------- src/sections/About-Projects/index.tsx | 2 +- src/sections/Archive/index.tsx | 2 +- src/sections/Timer/index.tsx | 4 ++-- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index f81d473..29249c7 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -14,25 +14,28 @@ const NavigationBar: React.FC = () => {
{/* Navbar ACM Logo */}
- + ACM Logo

Projects
|
- +

Home

- - -

Application

- - + + + +

Apply

+ + +

About

- - + + +

Archive

- +

Gallery

 diff --git a/src/sections/About-Projects/index.tsx b/src/sections/About-Projects/index.tsx index 101d0c4..8726ba6 100644 --- a/src/sections/About-Projects/index.tsx +++ b/src/sections/About-Projects/index.tsx @@ -15,7 +15,7 @@ const About: React.FC = () => { ]; return ( -
+
{images_arr.map((image, index) => ( diff --git a/src/sections/Archive/index.tsx b/src/sections/Archive/index.tsx index 0be9bd7..bc6a750 100644 --- a/src/sections/Archive/index.tsx +++ b/src/sections/Archive/index.tsx @@ -6,7 +6,7 @@ import ProjectCards from '../../components/project-card'; const Archive: React.FC = () => { const [quarter, setQuarter] = useState('Spring 2023'); return ( -
+

Past Project Archives