diff --git a/package-lock.json b/package-lock.json index b9f48bf..6578920 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "hackerblog", "version": "0.0.0", "dependencies": { + "@studio-freight/lenis": "^1.0.42", "@tailwindcss/vite": "^4.1.13", "axios": "^1.12.2", "framer-motion": "^12.23.22", @@ -1285,6 +1286,13 @@ "win32" ] }, + "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/@tailwindcss/node": { "version": "4.1.13", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz", diff --git a/package.json b/package.json index e11b239..f90780e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@studio-freight/lenis": "^1.0.42", "@tailwindcss/vite": "^4.1.13", "axios": "^1.12.2", "framer-motion": "^12.23.22", diff --git a/src/index.css b/src/index.css index a3fa9c8..50723bc 100644 --- a/src/index.css +++ b/src/index.css @@ -7,3 +7,26 @@ --font-google-code: "Google Sans Code", monospace; --font-press-start: "Press Start 2P", cursive; } + +/* ===== Hide scrollbars globally but keep scroll functional ===== */ +::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} + +* { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* ===== If you only want to hide scrollbars for a specific container ===== */ +/* Example usage:
...
*/ + +.scroll-container { + overflow: auto; /* or scroll */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.scroll-container::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} diff --git a/src/routes.jsx b/src/routes.jsx index 86839e9..739225b 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -1,30 +1,92 @@ -import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { + createBrowserRouter, + useLocation, +} from "react-router-dom"; +import { useEffect } from "react"; import Layout from "./layout/Layout"; import LandingPage from "./pages/LandingPage"; import LoginPage from "./pages/LoginPage"; import RegisterPage from "./pages/RegisterPage"; import ProtectedRoute from "./routes/ProtectedRoute"; import PublicRoute from "./routes/PublicRoute"; -import FeaturesPage from "./pages/FeaturesPage"; -import AboutPage from "./pages/AboutPage"; +import Lenis from "@studio-freight/lenis"; -// Placeholder component for dashboard +// ===== Scroll & Smooth Wrapper ===== +const SmoothScrollWrapper = ({ children }) => { + const { pathname } = useLocation(); + + useEffect(() => { + // Initialize Lenis + const lenis = new Lenis({ + duration: 1.0, // higher = heavier / more viscous feel + easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), + smoothWheel: true, + smoothTouch: true, + }); + + // RAF loop + const raf = (time) => { + lenis.raf(time); + requestAnimationFrame(raf); + }; + requestAnimationFrame(raf); + + // Scroll to top smoothly on route change + lenis.scrollTo(0, { offset: 0, duration: 1.2 }); + + return () => { + lenis.destroy(); + }; + }, [pathname]); + + return ( +
+ {children} + +
+ ); +}; + +// ===== Dashboard Placeholder ===== const DashboardPage = () => (

Dashboard

-

- Welcome to your dashboard! User functionality will be implemented here. -

+

Welcome to your dashboard! User functionality will be implemented here.

+ {/* Extra content for scroll testing */} +
); +// ===== Routes ===== const routes = createBrowserRouter([ { path: "/", element: ( - - - + + + + + ), }, { @@ -46,31 +108,37 @@ const routes = createBrowserRouter([ { path: "/login", element: ( - - - - - + + + + + + + ), }, { path: "/register", element: ( - - - - - + + + + + + + ), }, { path: "/dashboard", element: ( - - - - - + + + + + + + ), }, ]);