Jun 24, 2025 · Jul 4, 2025 · Jul 4, 2025
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@splinetool/react-spline": "^2.2.6",
    "@studio-freight/lenis": "^1.0.42",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "clsx": "^2.1.1",
    "eslint-config-next": "13.4.19",
    "framer-motion": "^11.2.13",
    "lucide-react": "^0.511.0",
    "lenis": "^1.3.4",
    "lucide-react": "^0.523.0",
    "next": "13.4.12",
    "next-emoji-rain": "^1.0.2",
    "postcss": "8.4.29",
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx

 const Navbar = () => {
  const [path, setPath] = useState<string[]>([]);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const pathSegments: string[] | undefined = window.location.pathname.split('/').filter(segment => segment);
    if (pathSegments === undefined) setPath([]);
    else setPath(pathSegments.map(segment => segment.toUpperCase()));
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () =>window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className="sticky top-0 flex justify-between items-center relative z-10 shadow-lg rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6">
      <div>
        <Link href="/">
          <Image
            src="/assets/csesoc_logo.svg"
            alt="CSESoc Logo"
            width={200}
            height={200}
            draggable={false}
          />
        </Link>
    <nav className={`sticky top-0 flex justify-between items-center relative z-10 rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6 duration-500 ${isScrolled ? 'shadow-xl' : 'shadow-none'}`}>
      <Link href="/">
        <Image
          src="/assets/csesoc_logo.svg"
          alt="CSESoc Logo"
          width={200}
          height={200}
          draggable={false}
        />
        <p className="font-mono mt-3 font-bold">
          <span className="text-green-500">csesoc@unsw</span>
          <span>:</span>
          {/* The interactive terminal that allows changing pages using 'cd' */}
          <Terminal/>
        </p>
      </div>
      </Link>
      <div>
        <div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
          <Link href="/about">
            />
          </a>
        </div>
        <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
        <div className="sm:hidden xl:hidden lg:hidden text-right font-bold block">
          <Hamburger />
        </div>
      </div>
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
 import type { AppProps } from 'next/app';
 import 'next-emoji-rain/dist/index.css';

 import Lenis from '@studio-freight/lenis';
 import { useEffect } from 'react';

 export default function App({ Component, pageProps }: AppProps) {

  // Basic lenis setup
  // Basically updates on every frame to stay synchronised with browser refresh rate
  useEffect(() => {
    const lenis = new Lenis();

    function raf(time : number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => lenis.destroy();
  }, []);

  return <Component {...pageProps} />;
 }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
 @tailwind components;
 @tailwind utilities;

 html, body {
  scroll-behavior: smooth;
 }

 body {
  color: white;
  background: #000031;
  font-family: 'Raleway', sans-serif;

 }

 @keyframes blink {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,6 +15,7 @@
		"dependencies": {
		"@radix-ui/react-dropdown-menu": "^2.1.15",
		"@splinetool/react-spline": "^2.2.6",
		"@studio-freight/lenis": "^1.0.42",
		"@types/node": "20.5.9",
		"@types/react": "18.2.21",
		"@types/react-dom": "18.2.7",
Expand All		@@ -23,7 +24,8 @@
		"clsx": "^2.1.1",
		"eslint-config-next": "13.4.19",
		"framer-motion": "^11.2.13",
		"lucide-react": "^0.511.0",
		"lenis": "^1.3.4",
		"lucide-react": "^0.523.0",
		"next": "13.4.12",
		"next-emoji-rain": "^1.0.2",
		"postcss": "8.4.29",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,24 +6,33 @@ import Terminal from './Terminal';

		const Navbar = () => {
		const [path, setPath] = useState<string[]>([]);
		const [isScrolled, setIsScrolled] = useState(false);

		useEffect(() => {
		const pathSegments: string[] \| undefined = window.location.pathname.split('/').filter(segment => segment);
		if (pathSegments === undefined) setPath([]);
		else setPath(pathSegments.map(segment => segment.toUpperCase()));
		}, []);

		useEffect(() => {
		const handleScroll = () => {
		setIsScrolled(window.scrollY > 0);
		};

		window.addEventListener('scroll', handleScroll);
		return () =>window.removeEventListener('scroll', handleScroll);
		}, []);

		return (
		<nav className="sticky top-0 flex justify-between items-center relative z-10 shadow-lg rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6">
		<div>
		<Link href="/">
		<Image
		src="/assets/csesoc_logo.svg"
		alt="CSESoc Logo"
		width={200}
		height={200}
		draggable={false}
		/>
		</Link>
		<nav className={`sticky top-0 flex justify-between items-center relative z-10 rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6 duration-500 ${isScrolled ? 'shadow-xl' : 'shadow-none'}`}>
		<Link href="/">
		<Image
		src="/assets/csesoc_logo.svg"
		alt="CSESoc Logo"
		width={200}
		height={200}
		draggable={false}
		/>
		<p className="font-mono mt-3 font-bold">
		<span className="text-green-500">csesoc@unsw</span>
		<span>:</span>
Expand All		@@ -32,7 +41,7 @@ const Navbar = () => {
		{/* The interactive terminal that allows changing pages using 'cd' */}
		<Terminal/>
		</p>
		</div>
		</Link>
		<div>
		<div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
		<Link href="/about">
Expand DownExpand Up		@@ -60,7 +69,7 @@ const Navbar = () => {
		/>
		</a>
		</div>
		<div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
		<div className="sm:hidden xl:hidden lg:hidden text-right font-bold block">
		<Hamburger />
		</div>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,6 +2,25 @@ import '@/styles/globals.css';
		import type { AppProps } from 'next/app';
		import 'next-emoji-rain/dist/index.css';

		import Lenis from '@studio-freight/lenis';
		import { useEffect } from 'react';

		export default function App({ Component, pageProps }: AppProps) {

		// Basic lenis setup
		// Basically updates on every frame to stay synchronised with browser refresh rate
		useEffect(() => {
		const lenis = new Lenis();

		function raf(time : number) {
		lenis.raf(time);
		requestAnimationFrame(raf);
		}

		requestAnimationFrame(raf);

		return () => lenis.destroy();
		}, []);

		return <Component {...pageProps} />;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,14 +2,11 @@
		@tailwind components;
		@tailwind utilities;

		html, body {
		scroll-behavior: smooth;
		}

		body {
		color: white;
		background: #000031;
		font-family: 'Raleway', sans-serif;

		}

		@keyframes blink {
Expand Down