From 05a4a2ee4a534ef63320596c6c72a074e5b8b385 Mon Sep 17 00:00:00 2001 From: louis Date: Tue, 24 Jun 2025 22:29:38 +1000 Subject: [PATCH 1/2] smooth scrolling and navbar sink effects added --- frontend/package-lock.json | 45 +++++++++++++++++++++++------- frontend/package.json | 3 +- frontend/src/components/Navbar.tsx | 35 ++++++++++++++--------- frontend/src/pages/_app.tsx | 19 +++++++++++++ frontend/src/styles/globals.css | 5 +--- 5 files changed, 79 insertions(+), 28 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b469d15..7b05ece 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,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", @@ -18,7 +19,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", "next": "13.4.12", "next-emoji-rain": "^1.0.2", "postcss": "8.4.29", @@ -1097,6 +1098,13 @@ "semver-compare": "^1.0.0" } }, + "node_modules/@studio-freight/lenis": { + "version": "1.0.42", + "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz", + "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==", + "deprecated": "The '@studio-freight/lenis' package has been renamed to 'lenis'. Please update your dependencies: npm install lenis and visit the documentation: https://www.npmjs.com/package/lenis", + "license": "MIT" + }, "node_modules/@swc/helpers": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", @@ -3914,6 +3922,32 @@ "node": ">=0.10" } }, + "node_modules/lenis": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.4.tgz", + "integrity": "sha512-WIGk8wiV2ABm/T7M+NC+tAV8fjzNJD1J4z11aZ3mTtx7WAZX/4QdCNhBO0g/TqXISA+/3hTbzrPC4FW1nhoNMQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/darkroomengineering" + }, + "peerDependencies": { + "@nuxt/kit": ">=3.0.0", + "react": ">=17.0.0", + "vue": ">=3.0.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + }, + "react": { + "optional": true + }, + "vue": { + "optional": true + } + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3989,15 +4023,6 @@ "node": ">=10" } }, - "node_modules/lucide-react": { - "version": "0.511.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz", - "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==", - "license": "ISC", - "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8a3d9a0..9bf915d 100644 --- a/frontend/package.json +++ b/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,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", "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 index 6c43a3b..0241403 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -6,24 +6,33 @@ import Terminal from './Terminal'; const Navbar = () => { const [path, setPath] = useState([]); + 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 ( -