[I2-29] Smooth-scroll

frontend/package.json

@@ -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",
@@ -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",

frontend/src/components/Navbar.tsx

@@ -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>
@@ -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">
@@ -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>  

frontend/src/pages/_app.tsx

@@ -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} />;
 }

frontend/src/styles/globals.css

@@ -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 {