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: (
-
-
-
-
-
+
+
+
+
+
+
+
),
},
]);