parent dd3aad0

author Albert Wang <56945244+waalbert@users.noreply.github.com> 1694217932 -0700 committer Tyler Yu <tyleryy@uci.edu> 1695095646 -0700 draft: sticker component + animations + layout * feat: create navigation bar * feat: create footer * refactor: font, dependencies, scss, footer * fix: navbar on mobile * refactor: added routes and other small changes * feat: active page link has corresponding color * feat: add ZotHacks logo * fix: use responsive css and add bold weight * chore: use absolute asset path for navbar background * fix: logo moves upon navbar expansion and navbar is fixed to top of the screen * refactor: clean up css and use bootstrap grid * fix: remove horizontal scroll * fix: switch Twitter to Hack and SVG to PNG * fix: move Hack to front of footer --------- Co-authored-by: Alexander Liu <a@alexanderliu.com> feat: draggable sticker component fix: pull from main * feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <Taesung@CM17.local> Set up Home page content including Landing (#21) Set up Home page content including Landing - Reorganize Landing into Home - To match common naming, rename primary page to Home - Landing is now the first view of the Home page - Wrap primary layout children in `<main>` - Use container layout for Home page sections - Add `Container` elements for sections w/ responsive vertical padding - Create yellow Apply button with bs-btn variant in Home page Landing - Use `bootstrap.button-variant` mixin for Apply button styles - Specify empty variant to React Bootstrap - Remove unnecessary sizing and layout styles - Separate usage of theme variables and Bootstrap mixins --------- Co-authored-by: Taesung Hwang <taesungh@uci.edu> feat: draggable sticker enhancements feat: sticker dragConstraints and elastic added type sticker spring transition reduced spring stiffness shadow adjustments feat: base sticker component individual sticker example rename to Base Sticker imports feat: sticker layout, file structure, animations hoisted transition object hack sticker w/ light shake animation heart sticker quickshake animation animation transition timing adjustments positioning on stickerLayout Navigation Bar and Footer (#14) * feat: create navigation bar * feat: create footer * refactor: font, dependencies, scss, footer * fix: navbar on mobile * refactor: added routes and other small changes * feat: active page link has corresponding color * feat: add ZotHacks logo * fix: use responsive css and add bold weight * chore: use absolute asset path for navbar background * fix: logo moves upon navbar expansion and navbar is fixed to top of the screen * refactor: clean up css and use bootstrap grid * fix: remove horizontal scroll * fix: switch Twitter to Hack and SVG to PNG * fix: move Hack to front of footer --------- Co-authored-by: Alexander Liu <a@alexanderliu.com> feat: sticker start + framer install feat: draggable sticker component Bootstrap Sass Organization (#17) * feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <Taesung@CM17.local> Set up Home page content including Landing (#21) Set up Home page content including Landing - Reorganize Landing into Home - To match common naming, rename primary page to Home - Landing is now the first view of the Home page - Wrap primary layout children in `<main>` - Use container layout for Home page sections - Add `Container` elements for sections w/ responsive vertical padding - Create yellow Apply button with bs-btn variant in Home page Landing - Use `bootstrap.button-variant` mixin for Apply button styles - Specify empty variant to React Bootstrap - Remove unnecessary sizing and layout styles - Separate usage of theme variables and Bootstrap mixins --------- Co-authored-by: Taesung Hwang <taesungh@uci.edu> feat: sticker start + framer install feat: draggable sticker component removed use state import Bootstrap Sass Organization (#17) * feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <Taesung@CM17.local> Set up Home page content including Landing (#21) Set up Home page content including Landing - Reorganize Landing into Home - To match common naming, rename primary page to Home - Landing is now the first view of the Home page - Wrap primary layout children in `<main>` - Use container layout for Home page sections - Add `Container` elements for sections w/ responsive vertical padding - Create yellow Apply button with bs-btn variant in Home page Landing - Use `bootstrap.button-variant` mixin for Apply button styles - Specify empty variant to React Bootstrap - Remove unnecessary sizing and layout styles - Separate usage of theme variables and Bootstrap mixins --------- Co-authored-by: Taesung Hwang <taesungh@uci.edu> feat: draggable sticker component feat: sticker dragConstraints and elastic added type sticker spring transition reduced spring stiffness shadow adjustments feat: base sticker component individual sticker example rename to Base Sticker imports Navigation Bar and Footer (#14) * feat: create navigation bar * feat: create footer * refactor: font, dependencies, scss, footer * fix: navbar on mobile * refactor: added routes and other small changes * feat: active page link has corresponding color * feat: add ZotHacks logo * fix: use responsive css and add bold weight * chore: use absolute asset path for navbar background * fix: logo moves upon navbar expansion and navbar is fixed to top of the screen * refactor: clean up css and use bootstrap grid * fix: remove horizontal scroll * fix: switch Twitter to Hack and SVG to PNG * fix: move Hack to front of footer --------- Co-authored-by: Alexander Liu <a@alexanderliu.com> feat: sticker start + framer install feat: draggable sticker component Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <Taesung@CM17.local> linting fix: removed unused import
HackAtUCI · Sep 19, 2023 · 4127f3f · 4127f3f
1 parent dd3aad0
commit 4127f3f
Show file tree

Hide file tree

Showing 51 changed files with 7,210 additions and 2,818 deletions.
diff --git a/apps/sanity/package.json b/apps/sanity/package.json
@@ -34,4 +34,4 @@
 		"prettier": "^2.8.8",
 		"typescript": "^4.9.5"
 	}
-}
+}
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -1,6 +1,11 @@
+const path = require("path");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
+	sassOptions: {
+		includePaths: [path.join(__dirname, "src", "lib", "styles")],
+	},
 };
 
 module.exports = nextConfig;
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -14,10 +14,13 @@
 		"@types/node": "20.4.9",
 		"@types/react": "18.2.20",
 		"@types/react-dom": "^18.2.0",
+		"bootstrap": "^5.3.1",
 		"eslint": "8.46.0",
 		"eslint-config-next": "^13.4.1",
+		"framer-motion": "^10.16.4",
 		"next": "^13.4.1",
 		"react": "18.2.0",
+		"react-bootstrap": "^2.8.0",
 		"react-dom": "^18.2.0",
 		"sass": "^1.65.1",
 		"typescript": "5.1.6"

diff --git a/apps/site/src/app/globals.scss b/apps/site/src/app/globals.scss
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,8 +1,11 @@
-import "./globals.scss";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ["latin"] });
+import FontProvider from "@/lib/FontProvider";
+
+import NavBar from "@/components/NavBar/NavBar";
+import Footer from "@/components/Footer/Footer";
+import "@/lib/styles/bootstrap.scss";
+import "@/lib/styles/globals.scss";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -16,7 +19,12 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<FontProvider />
+			<body className="background">
+				<NavBar />
+				<main>{children}</main>
+				<Footer />
+			</body>
 		</html>
 	);
 }
diff --git a/apps/site/src/app/page.tsx b/apps/site/src/app/page.tsx
@@ -1 +1 @@
-export { Landing as default } from "@/views"; 
+export { Home as default } from "@/views";
diff --git a/apps/site/src/app/resources/page.tsx b/apps/site/src/app/resources/page.tsx
@@ -1 +1 @@
-export { Resources as default } from "@/views";
+export { Resources as default } from "@/views";
diff --git a/apps/site/src/app/schedule/page.tsx b/apps/site/src/app/schedule/page.tsx
@@ -1 +1 @@
-export { Schedule as default } from "@/views";
+export { Schedule as default } from "@/views";
diff --git a/apps/site/src/assets/background/anteater-head-tiling.gif b/apps/site/src/assets/background/anteater-head-tiling.gif
diff --git a/apps/site/src/assets/icons/facebook.png b/apps/site/src/assets/icons/facebook.png
diff --git a/apps/site/src/assets/icons/hack.png b/apps/site/src/assets/icons/hack.png
diff --git a/apps/site/src/assets/icons/insta.png b/apps/site/src/assets/icons/insta.png
diff --git a/apps/site/src/assets/icons/mail.png b/apps/site/src/assets/icons/mail.png
diff --git a/apps/site/src/assets/icons/zothacks-logo.png b/apps/site/src/assets/icons/zothacks-logo.png
diff --git a/apps/site/src/assets/images/heart_emoji.png b/apps/site/src/assets/images/heart_emoji.png
diff --git a/apps/site/src/assets/images/lined_paper.png b/apps/site/src/assets/images/lined_paper.png
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -0,0 +1,15 @@
+.footer {
+	padding-bottom: 7vw;
+}
+
+.text {
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: black;
+	text-align: center;
+	margin-bottom: 0;
+}
+
+.socials {
+	margin: 10px;
+}
diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+
+import styles from "./Footer.module.scss";
+
+import Mail from "@/assets/icons/mail.png";
+import Facebook from "@/assets/icons/facebook.png";
+import Instagram from "@/assets/icons/insta.png";
+import Hack from "@/assets/icons/hack.png";
+
+type Social = {
+	icon: any;
+	link: string;
+	alt: string;
+	width: number;
+	height: number;
+};
+
+const SOCIALS: Social[] = [
+	{
+		icon: Hack,
+		link: "https://hack.ics.uci.edu/",
+		alt: "Hack at UCI",
+		width: 70,
+		height: 70,
+	},
+	{
+		icon: Mail,
+		link: "mailto:hack@uci.edu",
+		alt: "Mail",
+		width: 79,
+		height: 59,
+	},
+	{
+		icon: Facebook,
+		link: "https://www.facebook.com/UCI.Hack/",
+		alt: "Facebook",
+		width: 59,
+		height: 59,
+	},
+	{
+		icon: Instagram,
+		link: "https://www.instagram.com/hackatuci/",
+		alt: "Instagram",
+		width: 69,
+		height: 72,
+	},
+];
+
+export default function Footer() {
+	return (
+		<footer className={styles.footer}>
+			<p className={styles.text}>Made with &lt;3 in Irvine, CA - Hack @ UCI</p>
+			<div className="text-center">
+				{SOCIALS.map(({ icon, link, alt, width, height }) => (
+					<a key={link} href={link} target="_blank" className={styles.socials}>
+						<Image src={icon.src} alt={alt} width={width} height={height} />
+					</a>
+				))}
+			</div>
+		</footer>
+	);
+}
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -0,0 +1,70 @@
+@use "bootstrap-utils" as utils;
+@use "zothacks-theme" as theme;
+
+.nav {
+	position: sticky;
+	width: 100%;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
+}
+
+.navbar {
+	background-image: url("~@/assets/images/lined_paper.png");
+	background-size: cover;
+	background-position: left bottom;
+	background-repeat: no-repeat;
+}
+
+.logo {
+	position: absolute;
+	left: 30px;
+	width: 20vw;
+	height: 20vw;
+	text-align: center;
+	transform: rotate(-16.81deg) translateY(-5vw);
+}
+
+.text {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.notActive {
+	@extend .text;
+	color: black;
+}
+
+.homeActive {
+	@extend .text;
+	color: theme.$green;
+}
+
+.resourcesActive {
+	@extend .text;
+	color: theme.$blue;
+}
+
+.scheduleActive {
+	@extend .text;
+	color: theme.$navbar-red;
+}
+
+@include utils.media-breakpoint-down(md) {
+	.logo {
+		left: 3vw;
+		transform: rotate(-16.81deg) translateY(-6vw);
+	}
+	.text {
+		font-size: 1.5rem;
+	}
+}
+
+@include utils.media-breakpoint-up(lg) {
+	.logo {
+		width: 180px;
+		height: 180px;
+		transform: rotate(-16.81deg) translateY(-50px);
+	}
+}
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+
+import ZotHacksLogo from "@/assets/icons/zothacks-logo.png";
+
+import styles from "./NavBar.module.scss";
+
+export default function NavBar() {
+	const activeRoute = usePathname();
+
+	return (
+		<nav className={styles.nav}>
+			<Navbar expand="md" className={`bg-body-tertiary ${styles.navbar}`}>
+				<Container fluid>
+					<Navbar.Brand />
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Collapse id="basic-navbar-nav">
+						<Nav className="ms-auto text-center">
+							<Link
+								href="/"
+								className={
+									activeRoute === "/" ? styles.homeActive : styles.notActive
+								}
+							>
+								Home
+							</Link>
+							<Link
+								href="/resources"
+								className={
+									activeRoute === "/resources"
+										? styles.resourcesActive
+										: styles.notActive
+								}
+							>
+								Resources
+							</Link>
+							<Link
+								href="/schedule"
+								className={
+									activeRoute === "/schedule"
+										? styles.scheduleActive
+										: styles.notActive
+								}
+							>
+								Schedule
+							</Link>
+						</Nav>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+			<Link href="/">
+				<div className={styles.logo}>
+					<Image src={ZotHacksLogo.src} alt="ZotHacks Logo" fill />
+				</div>
+			</Link>
+		</nav>
+	);
+}
diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/apps/site/src/components/Sticker/BaseSticker.module.scss
@@ -0,0 +1,5 @@
+.stickerContainer {
+	cursor: grab;
+	filter: drop-shadow(0 0 0 rgba(black, 0.5));
+	// inital state for framer animation (stuck in onHover animation state if missing)
+}
diff --git a/apps/site/src/components/Sticker/BaseSticker.tsx b/apps/site/src/components/Sticker/BaseSticker.tsx
@@ -0,0 +1,79 @@
+import Image from "next/image";
+import { motion } from "framer-motion";
+import styles from "./BaseSticker.module.scss";
+import { MutableRefObject } from "react";
+
+export default function Sticker({
+	imageSrc,
+	alt,
+	height = 100,
+	width = 100,
+	draggable = false,
+	// TODO replace with useWindowDimensions hook
+	dragConstraints = {
+		top: 0,
+		left: 0,
+		right: window.innerWidth,
+		bottom: window.innerHeight,
+	},
+	animate,
+	transition,
+}: StickerProps) {
+	let transitionProps = { ...transition };
+
+	if (draggable)
+		transitionProps = { ...transition, type: "spring", stiffness: 100 };
+	const drag = draggable
+		? {
+				whileTap: {
+					scale: 1.15,
+					filter: `drop-shadow(${0.15 * width}px ${0.17 * height}px ${
+						0.1 * height
+					}px rgba(0, 0, 0, 0.15)`,
+				},
+				whileHover: {
+					scale: 1.05,
+					filter: `drop-shadow(${0.07 * width}px ${0.09 * height}px ${
+						0.09 * height
+					}px rgba(0, 0, 0, 0.25)`,
+				},
+				drag: true,
+				dragMomentum: false,
+				dragConstraints: dragConstraints,
+				dragElastic: 0.2,
+				transition: transitionProps,
+		  }
+		: {};
+
+	return (
+		<motion.div
+			style={{
+				height,
+				width,
+			}}
+			className={styles.stickerContainer}
+			animate={animate}
+			{...drag}
+		>
+			<Image
+				src={imageSrc}
+				alt={alt}
+				height={height}
+				width={width}
+				style={{ pointerEvents: "none" }}
+			/>
+		</motion.div>
+	);
+}
+
+interface StickerProps {
+	imageSrc: string;
+	alt: string;
+	height?: number | undefined;
+	width?: number | undefined;
+	draggable: boolean;
+	dragConstraints: object | false | MutableRefObject<any> | undefined;
+	// dragConstraints prop can be an object, a Falsy boolean, or a parent ref (https://www.framer.com/motion/gestures/#:~:text=%23-,dragConstraints%3A,-false%20%7C%20Partial%3CBoundingBox2D)
+	animate: object | undefined;
+	transition: object | undefined;
+}
diff --git a/apps/site/src/app/page.module.scss → ...rc/components/Sticker/Sticker.module.scss b/apps/site/src/app/page.module.scss → ...rc/components/Sticker/Sticker.module.scss
diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss
@@ -0,0 +1,3 @@
+.stickerContainer {
+	filter: drop-shadow(3px 5px 5px rgba(black, 0.3));
+}