+ {pageTitle}
+
+ );
+ });
+
+ return (
+
+
+ );
+ });
+}
+
+// React component that represents the contact section
+const Contact = () => {
+ return socials.map((item, key) => {
+ const linkprefix =
+ item.title === "Email" ? "mailto:" : "https://";
+ const href = `${linkprefix}${item.value}`; // assemble link
+ return (
+ + {section.title} +
+ {links} +
+
+ 
+
+
+ );
+ });
+}
+
+// Main footer component
const Footer: React.FC = () => {
- const [email, setEmail] = useState("");
return (
-
-
-
-
Connect With Us!
-
-
- {cardContents.map((item, key) => {
- const linkprefix =
- item.title === "Email" ? "mailto:" : "https://";
- const href = `${linkprefix}${item.value}`;
- return (
-
-
+
-
-
- 
-
-
-
- );
- })}
-
- {item.title}
-
-
+
+
+ );
+};
+
+export default EventsPage;
\ No newline at end of file
diff --git a/app/resources/page.tsx b/app/resources/page.tsx
new file mode 100644
index 0000000..d5d17ab
--- /dev/null
+++ b/app/resources/page.tsx
@@ -0,0 +1,20 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import WIP from "@/src/sections/WIP-Page";
+import NavigationBar from '@/src/components/navbar';
+import Footer from '@/src/components/footer'
+// here we will compile all the sections of the website together
+
+const ResourcesPage: NextPage = () => {
+ return (
+
+
+ );
+};
+
+export default ResourcesPage;
\ No newline at end of file
diff --git a/src/sections/WIP-Page/index.tsx b/src/sections/WIP-Page/index.tsx
new file mode 100644
index 0000000..6007eb8
--- /dev/null
+++ b/src/sections/WIP-Page/index.tsx
@@ -0,0 +1,12 @@
+"use client";
+import s from './styles.module.scss';
+
+const WIP: React.FC = () => {
+ return (
+
Date: Mon, 9 Feb 2026 17:20:45 -0800
Subject: [PATCH 4/4] Fixing node deployment
---
src/sections/Photo-Gallery/NextJsImage.tsx | 32 ++--
src/sections/Photo-Gallery/index.tsx | 173 ++++++++++-----------
2 files changed, 101 insertions(+), 104 deletions(-)
diff --git a/src/sections/Photo-Gallery/NextJsImage.tsx b/src/sections/Photo-Gallery/NextJsImage.tsx
index d2cc0d4..b71dbd5 100644
--- a/src/sections/Photo-Gallery/NextJsImage.tsx
+++ b/src/sections/Photo-Gallery/NextJsImage.tsx
@@ -1,22 +1,22 @@
import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
-import { CldImage } from 'next-cloudinary';
-import s from "./style.module.scss"
+import { CldImage } from "next-cloudinary";
+import s from "./style.module.scss";
export default function NextJsImage({
- photo,
- imageProps: { alt, title, sizes, className, onClick },
- wrapperStyle,
+ photo,
+ imageProps: { alt, title, sizes, className, onClick },
+ wrapperStyle,
}: RenderPhotoProps) {
- return (
- ) => {
+ setSelectedOption(e.target.value);
+ };
+ const [photos, setPhotos] = useState([]);
- const handleChange = (e: React.ChangeEvent) => {
- setSelectedOption(e.target.value);
+ useEffect(() => {
+ const rawPhotos = [];
+ //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
+ // const cloudinary = require('cloudinary').v2;
+ // cloudinary.config({
+ // cloud_name: 'dgnecfapo',
+ // api_key: '',
+ // api_secret: ''
+ // });
+ const selectedQtrYr = qtr_yr.find((q) => q.value === selectedOption);
+ const numPhotos = selectedQtrYr?.length ?? 0;
+ const indexVertical = selectedQtrYr?.vertical ?? [];
+ for (let i = 1; i <= numPhotos; i++) {
+ const newPhoto = {
+ src: `${selectedOption}_showcase_${i}.jpg`,
+ width: 4032,
+ height: 3024,
+ };
+ if (indexVertical.includes(i)) {
+ newPhoto.width = 4000;
+ newPhoto.height = 6000;
+ }
+ // trying to dynamically read the images from cloudinary
+ // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
+ // newPhoto.width = result.width;
+ // newPhoto.height = result.height;
+ // });
+ rawPhotos.push(newPhoto);
}
- const [photos, setPhotos] = useState([]);
- useEffect(() => {
- const rawPhotos = [];
- //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
- // const cloudinary = require('cloudinary').v2;
- // cloudinary.config({
- // cloud_name: 'dgnecfapo',
- // api_key: '',
- // api_secret: ''
- // });
- const selectedQtrYr = qtr_yr.find(q => q.value === selectedOption);
- const numPhotos = selectedQtrYr?.length ?? 0;
- const indexVertical = selectedQtrYr?.vertical ?? [];
- for (let i = 1; i <= numPhotos; i++) {
- const newPhoto = {src: `${selectedOption}_showcase_${i}.jpg`, width:4032, height:3024};
- if (indexVertical.includes(i)) {
- newPhoto.width = 4000;
- newPhoto.height = 6000;
- }
- // trying to dynamically read the images from cloudinary
- // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
- // newPhoto.width = result.width;
- // newPhoto.height = result.height;
- // });
- rawPhotos.push(newPhoto);
- }
+ const updatedPhotos = rawPhotos.map((photo) => ({
+ src: photo.src,
+ width: photo.width,
+ height: photo.height,
+ srcSet: breakpoints.map((breakpoint) => {
+ const height = Math.round((photo.height / photo.width) * breakpoint);
+ return {
+ src: photo.src,
+ width: breakpoint,
+ height,
+ };
+ }),
+ }));
- const updatedPhotos = rawPhotos.map((photo) => ({
- src: photo.src,
- width: photo.width,
- height: photo.height,
- srcSet: breakpoints.map((breakpoint) => {
- const height = Math.round((photo.height / photo.width) * breakpoint);
- return {
- src: photo.src,
- width: breakpoint,
- height,
- };
- }),
- }));
+ setPhotos(updatedPhotos);
+ }, [selectedOption]);
- setPhotos(updatedPhotos);
- }, [selectedOption]);
+ return (
+ <>
+
+
-
+
+ {/* Projects Logo */}
+
-
+ 
+
+
+ {/* Nav Links */}
+ at UC San Diego
+
+
-
);
diff --git a/src/components/footer/styles.module.scss b/src/components/footer/styles.module.scss
new file mode 100644
index 0000000..99ce855
--- /dev/null
+++ b/src/components/footer/styles.module.scss
@@ -0,0 +1,226 @@
+@use "../../styles/vars.scss" as vars;
+
+$stmw: 834px; // small tablet max width
+$mmw: 530px; // mobile max width
+$mmmw: 375px; // medium mobile max width
+
+// Base styles (Regular desktop view)
+.footer {
+ width: 100%;
+ height: 100%;
+ background-color: vars.$footer-blue;
+ color: vars.$white;
+ z-index: 0;
+ position: relative;
+}
+
+.footerContainer {
+ padding: 3.625rem 7.5rem;
+
+ hr {
+ display: flex;
+ border: none; // this removes border control over styling
+ height: 1px;
+ background-color: vars.$white;
+ margin-bottom: 0;
+ }
+
+ .mainContent {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 5rem;
+
+ .logo {
+ display: flex;
+ align-items: center;
+ gap: 1.5625rem;
+
+ img {
+ width: 4.875rem;
+ height: 4.8125rem;
+ margin: 0;
+ }
+
+ h2 {
+ margin: 0;
+ white-space: nowrap;
+ font-size: 3.25rem;
+ font-weight: 700;
+ }
+ }
+
+ .navLinks {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ // finds gap size from line between points (1332px, 5rem) and
+ // (1844px, 15rem)
+ gap: vars.calc-relative-size(1332px, 5rem, 1844px, 15rem);
+ white-space: nowrap;
+ font-weight: 700;
+
+ h3 {
+ margin: 0;
+ font-size: 1.75rem;
+ color: vars.$white;
+ }
+
+ a {
+ font-size: 1.125rem;
+ color: vars.$white;
+ text-decoration: none;
+ }
+
+ .navSection {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ }
+
+ .pageTitle {
+ a:hover {
+ // color change AND underline for accessibility reasons
+ color: #D6E2FF;
+ text-decoration: underline solid currentColor;
+ }
+ }
+ }
+ }
+
+ .contact {
+ display: flex;
+ gap: 0.9375rem;
+ margin-bottom: 1rem;
+
+ .contactIcon {
+
+ a {
+ display: flex;
+ }
+
+ img {
+ width: 2.625rem;
+ height: 2.625rem;
+ margin: 0;
+ }
+
+ a:hover img {
+ transform: scale(1.05);
+ transition: transform 0.2s;
+ }
+ }
+ }
+}
+
+// Medium tablet view
+@media only screen and (max-width: 1331px) {
+ .footerContainer {
+ .mainContent {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ gap: 3.25rem;
+
+ .navLinks {
+ // finds gap size from line between points (835px, 8rem) and
+ // (1090px, 15rem)
+ gap: vars.calc-relative-size($stmw + 1px, 8rem, 1090px, 15rem);
+ margin-bottom: 3.625rem;
+ }
+ }
+ }
+}
+
+// Small tablet view (834px)
+@media only screen and (max-width: $stmw) {
+ .footerContainer {
+ display: flex;
+ flex-direction: column;
+ padding:
+ // finds top padding size from line between points (531px, 1.6875rem) and
+ // (834px, 3.625rem)
+ vars.calc-relative-size($mmw + 1px, 1.6875rem, $stmw, 3.625rem)
+ // finds side padding size from line between points (531px, 3.1875rem) and
+ // (834px, 7.5rem)
+ vars.calc-relative-size($mmw + 1px, 3.1875rem, $stmw, 7.5rem)
+ // finds bottom padding size from line between points (531px, 2.0625rem)
+ // and (834px, 3.625rem)
+ vars.calc-relative-size($mmw + 1px, 2.0625rem, $stmw, 3.625rem);
+
+ .mainContent {
+ .logo {
+ h2 {
+ // finds font size from line between points (531px, 1.25rem) and
+ // (834px, 3.25rem)
+ font-size:
+ vars.calc-relative-size($mmw + 1px, 1.25rem, $stmw, 3.25rem);
+ }
+ }
+
+ .navLinks {
+ // finds gap size from line between points (531px, 4rem) and
+ // (834px, 8rem)
+ gap: vars.calc-relative-size($mmw + 1px, 4rem, $stmw, 8rem);
+ margin-bottom: 3.625rem;
+ }
+ }
+ }
+}
+
+// Mobile view (530px)
+@media only screen and (max-width: $mmw) {
+ .footerContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 3.625rem;
+ padding: 1.6875rem 3.1875rem 2.0625rem;
+
+ hr {
+ display: none;
+ }
+
+ .mainContent {
+ .logo {
+ gap: 1.5625rem;
+
+ h2 {
+ font-size: 1.25rem;
+ }
+ }
+
+ .navLinks {
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 3.125rem;
+ }
+ }
+
+ .contact {
+ margin: 0;
+ }
+ }
+}
+
+// Medium mobile view (375px)
+@media only screen and (max-width: $mmmw) {
+ .footerContainer {
+ .mainContent {
+ .logo {
+ // finds gap size from line between points (320px, 1rem) and
+ // (375px, 1.5625rem)
+ gap: vars.calc-relative-size(320px, 1rem, $mmmw, 1.5625rem);
+
+ img {
+ // finds width from line between points (320px, 3.03896103rem) and
+ // (375px, 4.875rem)
+ width: vars.calc-relative-size(320px, 3.03896103rem, $mmmw, 4.875rem);
+ // finds width from line between points (320px, 3rem) and
+ // (375px, 4.8125rem)
+ height: vars.calc-relative-size(320px, 3rem, $mmmw, 4.8125rem);
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/footer/styles.scss b/src/components/footer/styles.scss
deleted file mode 100644
index bdef7a4..0000000
--- a/src/components/footer/styles.scss
+++ /dev/null
@@ -1,299 +0,0 @@
-@use "src/styles/vars.scss" as colors;
-
-.footer {
- width: 100%;
- height: 100%;
- background-color: colors.$black;
- color: colors.$white;
- z-index: 0;
- position: relative;
- margin-top: 1rem;
-}
-.footerContainer {
- padding-bottom: 80px;
- display: flex;
- justify-content: center;
-}
-.footerContents {
- h2 {
- font-size: 42px;
- font-weight: 700;
- width: 100%;
- text-align: center;
- padding-top: 56px;
- }
- &__wrapper {
- display: flex;
- align-items: flex-start;
- @media only screen and (max-width: 985px) {
- flex-wrap: wrap;
- padding: 0 40px;
- }
- }
- &__contact {
- width: 100%;
- display: grid;
- grid-template-columns: 1fr 1fr;
- &__card {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 240px;
- height: 75px;
- margin: 10px 5px;
- a:hover img {
- transform: scale(1.05);
- transition: transform 0.2s;
- }
- img {
- float: left;
- width: 45px;
- margin: 10px;
- }
- div {
- margin: 10px;
- width: 140px;
- h3 {
- font-size: 20px;
- font-weight: 500;
- margin: 0px;
- }
- a {
- font-size: 20px;
- font-weight: 500;
- margin: 0px;
- color: white;
- text-decoration: none;
- }
- }
- }
- }
- &__newsletter {
- width: 80%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex-wrap: wrap;
- padding-left: 20px;
- h2 {
- font-size: 20px;
- font-weight: 700;
- width: 100%;
- text-align: left;
- padding-top: 20px;
- margin: 0px;
- }
- p {
- width: 100%;
- font-weight: 400;
- font-size: 16px;
- margin-bottom: 20px;
- }
- input {
- color: rgba(0, 0, 0, 0.5);
- padding: 2px 2px 2px 1em;
- width: 272px;
- margin-bottom: 24px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 16px;
- outline: none;
- }
- .subscribe-btn {
- text-decoration: none;
- padding: 5px 30px;
- cursor: pointer;
- color: colors.$white;
- background-color: colors.$dark-grey;
- height: 2em;
- width: fit-content;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- &:hover {
- cursor: pointer;
- color: colors.$black;
- background-color: colors.$hover-blue;
- transition-duration: 0.2s;
- }
- }
- .vercel-btn {
- text-decoration: none;
- cursor: pointer;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- }
-}
-.acmBlueFade {
- display: none;
- margin: 0 !important;
- position: absolute;
- bottom: 10px;
- right: 0px;
- z-index: 0;
-}
-.mobileFooterContainer {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- margin-bottom: -7px !important;
- h2 {
- padding-top: 56px;
- text-align: center;
- font-size: 32px;
- margin-bottom: 40px;
- }
- a {
- text-align: center;
- font-size: 15px;
- font-weight: 400;
- margin-bottom: 35px;
- color: colors.$white;
- text-decoration: underline;
- }
- &__newsletter {
- width: 272px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex-wrap: wrap;
- margin-left: 0px !important;
- h2 {
- font-size: 20px;
- font-weight: 700;
- text-align: left;
- padding-top: 6px;
- margin: 0px;
- }
- p {
- font-size: 16px;
- margin-bottom: 11px;
- text-align: left;
- }
- input {
- color: rgba(0, 0, 0, 0.5);
- padding: 2px 2px 2px 1em;
- width: 100%;
- margin-top: 11px !important;
- margin-bottom: 23px !important;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 16px;
- outline: none;
- }
- .mobile-subscribe-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: colors.$blue;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- .mobile-vercel-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- .mobile-vercel-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- }
-}
-.community-links {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- flex-direction: row;
- padding-top: 4px;
- width: 272px;
- a {
- height: 50px;
- margin-bottom: 20px;
- border: none;
- background-color: transparent;
- outline: none;
- padding: 0px;
- img {
- width: 70%;
- height: unset;
- &:hover {
- transform: scale(1.05);
- }
- }
- }
- img {
- width: 45px;
- height: 45px;
- }
-}
-@media only screen and (min-width: 984px) {
- .acmBlueFade {
- display: block;
- }
- .mobileFooterContainer {
- display: none;
- }
-}
-@media only screen and (max-width: 986px) {
- .footerContainer {
- display: none;
- }
- .acmBlueFade {
- display: none;
- }
- .mobileFooterContainer {
- display: flex;
- }
-}
\ No newline at end of file
diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss
index c267c71..d6351a8 100644
--- a/src/components/navbar/Navbar.module.scss
+++ b/src/components/navbar/Navbar.module.scss
@@ -1,5 +1,13 @@
@use "../../styles/vars.scss" as vars;
+$bottom-border-width: 4px;
+// the next 3 variables exist to calculate the initial position of the mobile nav dropdown (determined via its height relative to its contents) so that it is positioned off-screen
+$mobileNav-line-height: 3rem;
+$navItem-margin-bottom: 0.5rem;
+$num-navItems: 5; // change this according to how many navlinks there are
+$stmw: 956px; // small tablet max width
+
+// Base styles (Regular desktop view)
.navbarWrapper {
position: sticky;
top: 0;
@@ -7,41 +15,21 @@
width: 100%;
z-index: 10;
white-space: nowrap;
+ background-color: vars.$white; // this is a placeholder; the navbar bg color needs to match the page's bg color (bc of the gradient on the landing page)
// container for fixed navbar (desktop and mobile)
.navbar {
- background-color: vars.$white;
+ $vert-padding: 1.25rem;
+
+ background-color: vars.$white; // this is a placeholder; the navbar bg color needs to match the page's bg color (bc of the gradient on the landing page)
z-index: 20;
- font-size: 18px;
- width: 100vw;
- height: 78px;
+ width: 100%;
justify-content: space-between;
+ gap: 1rem;
align-items: center;
display: flex;
flex-direction: row;
-
- // left side of navbar is just the acm logo
- .left {
- height: 60px;
- margin-left: 2rem;
- display: flex;
- flex-flow: row nowrap;
- }
-
- .logoText {
- font-size: 16px;
- }
-
- .navLinks {
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- gap: 1rem;
-
- &.hidden {
- display: none;
- }
- }
+ padding: $vert-padding 4rem calc($vert-padding - $bottom-border-width);
a {
display: flex;
@@ -54,189 +42,153 @@
margin: 0;
}
> p {
- font-size: 18px;
- font-weight: 800;
+ font-size: 1.125rem;
+ font-weight: 700;
color: vars.$black;
- margin-left: 4px;
- margin-bottom: 2px;
+ margin: 0px;
}
}
a:hover {
cursor: pointer;
}
+ // left side of navbar is just the acm logo
+ .left {
+ display: flex;
+ flex-flow: row nowrap;
+
+ .logo {
+ width: 3.01644rem;
+ height: 3rem;
+ flex-shrink: 0;
+ }
+
+ .logoText {
+ font-size: 1.375rem;
+ font-weight: 700;
+ color: vars.$proj-blue;
+ margin: 0;
+ margin-left: 0.5rem;
+ }
+ }
+
// navbar right side contains all navlinks on desktop
.right {
display: flex;
flex-flow: row nowrap;
- margin-right: 2rem;
-
- // justify-content: center;
- // align-items: center;
-
- // a {
- // display: flex;
- // align-items: center;
- // text-decoration: none;
- // // padding: 0px 16px 0px 16px;
- // flex-shrink: 0;
-
- // > img {
- // height: 60px;
- // margin: 0;
- // }
- // > p {
- // 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;
- // }
- // }
-
- // .navItem {
- // display: flex;
- // align-items: center;
- // flex-flow: row nowrap;
- // text-decoration: none;
- // color: vars.$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: vars.$white;
- // background-color: vars.$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: absolute;
- top: 30px;
- right: 0;
- width: 40px;
- height: 20px;
- margin: 0 30px;
- padding: 0;
- border: none;
- 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: vars.$black;
- position: absolute;
- top: 1.5px;
- transition: 0.3s ease-in-out all;
-
- &.open {
- transform: rotate(-45deg) translateY(-10px);
- transform-origin: top right;
- }
+ .navLinks {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ // finds gap size from line between points (957px, 2rem) and
+ // (1488px, 5rem)
+ gap: vars.calc-relative-size($stmw + 1px, 2rem, 1488px, 5rem);
}
- .bar2 {
- width: 23px;
- height: 5px;
- border-radius: 2px;
- background-color: vars.$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 {
+ // toggle button for mobile menu is only visible on mobile, otherwise hidden
+ .toggleIcon {
display: none;
+ flex-flow: column nowrap;
+ justify-content: flex-start;
+ width: 1.8125rem;
+ height: 2.0625rem;
+ padding: 0.64rem 0;
+ gap: 0.257813333rem;
+ border: none;
+ 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: 1.8125rem;
+ height: 0.257813333rem;
+ border-radius: 4px;
+ background-color: vars.$black;
+ transition: 0.3s ease-in-out all;
+
+ &.open {
+ transform-origin: top right;
+ transform: rotate(-45deg) translateY(-0.49rem);
+ }
+ }
+
+ .bar2 {
+ width: 1.8125rem;
+ height: 0.257813333rem;
+ border-radius: 4px;
+ background-color: vars.$black;
+ transition: 0.3s ease-in-out all;
+
+ &.open {
+ transform-origin: bottom right;
+ transform: rotate(45deg) translateY(0.49rem);
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
}
}
}
.mobileNav {
- width: 100vw;
+ width: 100%;
background-color: vars.$white;
- position: relative;
+ position: absolute;
z-index: -1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
- line-height: 300%;
- transition: 0.3s ease-in-out;
- // mobile menu is hidden by positioning under fixed navbar, we open it by sliding it out
- // if you want to add or remove nav options, change this
- margin-top: -17.5rem;
+ line-height: $mobileNav-line-height;
+ // mobile menu is hidden by positioning under fixed navbar by moving the top margin up; we open it by sliding it out w/ transition and changing margin-top to 0
+ margin-top:
+ -1 * $num-navItems * ($mobileNav-line-height + $navItem-margin-bottom);
+ border-bottom: $bottom-border-width solid vars.$proj-blue;
+ transition: margin-top 0.3s ease-in-out;
+
+ a {
+ text-decoration: none;
+ }
+
&.open {
margin-top: 0;
}
.navItem {
- width: 100%;
+ margin-bottom: $navItem-margin-bottom;
text-align: center;
+ font-size: 1.125rem;
+ font-weight: 700;
color: vars.$black;
- transition: 0.3s ease-in-out all;
- text-decoration: underline solid transparent;
+
&:hover {
text-decoration: underline solid currentColor;
}
}
}
+}
+
+// Small tablet view (956px)
+@media only screen and (max-width: $stmw) {
+ .navbarWrapper {
+ .navbar {
+ $vert-padding: 0.72rem;
- // 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,
- vars.$red 0%,
- vars.$orange 18.75%,
- vars.$green-success 36.98%,
- vars.$blue-ap 55.73%,
- vars.$blue 75%,
- vars.$purple 100%
- );
+ padding:
+ calc($vert-padding + 2.06rem)
+ 1.38rem
+ calc($vert-padding - $bottom-border-width);
+
+ .right {
+ .navLinks {
+ display: none;
+ }
+
+ .toggleIcon {
+ display: flex;
+ }
+ }
+ }
}
}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 2a7adfe..4297c0f 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -2,30 +2,31 @@
import Link from "next/link";
import { useEffect, useState } from "react";
-import ProjLogo from "../../../public/assets/proj_logo.png";
import s from "./Navbar.module.scss";
import { Size, useWindowSize } from "../../utils/general";
-import Banner from "../banner";
+const ProjLogo = "/assets/proj_logo.svg";
+
+// Nav link properties
const navLinks = [
- { href: "/", label: "Home" },
- // { href: "/", label: "Apply" },
- { href: "/about", label: "About" },
{ href: "/archive", label: "Archive" },
+ { href: "/resources", label: "Resources" },
{ href: "/gallery", label: "Gallery" },
+ { href: "/events", label: "Events" },
+ { href: "/about", label: "About" },
];
+// Main navbar component
const NavigationBar: React.FC = () => {
const size: Size = useWindowSize();
+ // size.width !== undefined determines whether the viewport has rendered yet
+ const mobile = size.width !== undefined && size.width <= 956;
+
const [menuOpen, setMenuOpen] = useState(false);
- const [mobile, setMobile] = useState(false);
const toggleMenu = () => setMenuOpen(!menuOpen);
- useEffect(() => {
- size && size.width && setMobile(size.width <= 960);
- }, [size]);
-
+ // close the mobile menu if no longer within mobile viewport width
useEffect(() => {
if (!mobile) setMenuOpen(false);
}, [mobile]);
@@ -33,47 +34,46 @@ const NavigationBar: React.FC = () => {
return (
Connect With Us!
- -
-
- 
-
+
+ {/* Contact Buttons */}
+
Newsletter
-Receive weekly events and news!
- - Subscribe! - - -
+
+
+ {/* Bottom Horizontal Line */}
+
- {/* Navbar ACM Logo */}
+ {/* Projects Logo */}
{/* Mobile Menu Dropdown */}
- 
+
+
+ {/* Main Navbar Content */}
at UC San Diego
-
+ {/* Nav Links */}
+
- {/* Mobile Navbar Toggle */}
-
+ {/* Mobile Navbar Toggle */}
+
+
{navLinks.map((link, key) => (
- {link.label}
))}
{navLinks.map((link, key) => (
-
-
- {/* Bottom Rainbow */}
-
- setMenuOpen(false)}> +
setMenuOpen(false)}> {link.label}
))}
+
+ );
+};
+
+export default WIP;
\ No newline at end of file
diff --git a/src/sections/WIP-Page/styles.module.scss b/src/sections/WIP-Page/styles.module.scss
new file mode 100644
index 0000000..1621805
--- /dev/null
+++ b/src/sections/WIP-Page/styles.module.scss
@@ -0,0 +1,9 @@
+.WIPNotice {
+ display: flex;
+ justify-content: center;
+ padding: 8rem;
+
+ h1 {
+ margin: 0;
+ }
+}
\ No newline at end of file
From 41cef83f7a8a4ba11397402199832871a6fa2180 Mon Sep 17 00:00:00 2001
From: Angela Hu Sorry, this page is under construction.
+
-
- );
+ return (
+
+
+ );
}
diff --git a/src/sections/Photo-Gallery/index.tsx b/src/sections/Photo-Gallery/index.tsx
index 930a10b..290d928 100644
--- a/src/sections/Photo-Gallery/index.tsx
+++ b/src/sections/Photo-Gallery/index.tsx
@@ -2,106 +2,103 @@
import React, { useState, useEffect } from "react";
import s from "./style.module.scss";
-import PhotoAlbum from "react-photo-album";
+import PhotoAlbum, { Photo } from "react-photo-album";
import NextJsImage from "./NextJsImage";
const qtr_yr = [
- {value:"wtr_23", text: "Winter 2023", length: 16},
- {value: "spr_23", text: "Spring 2023", length: 24, vertical:[7, 24, 22]},
- // {value: "sum_23", text: "Summer 2023", length: 1}
-]
+ { value: "wtr_23", text: "Winter 2023", length: 16 },
+ { value: "spr_23", text: "Spring 2023", length: 24, vertical: [7, 24, 22] },
+ // {value: "sum_23", text: "Summer 2023", length: 1}
+];
const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
-type Photo = {
- src: string;
- width: number;
- height: number;
- srcSet: {
- src: string;
- width: number;
- height: number;
- }[];
- };
-
const options = qtr_yr.map((option, index) => {
- return
-})
+ return (
+
+ );
+});
const PhotoGallery: React.FC = () => {
- const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+ const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+
+ const handleChange = (e: React.ChangeEvent
+
- return (
- <>
- Photo Gallery
+ +
-
-
-