feat: added smooth scrolling

components/UI/SmoothScrolling.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+
+export default function SmoothScroll({ children }) {
+  useEffect(() => {
+    (async () => {
+      const LocomotiveScroll = (await import("locomotive-scroll")).default;
+
+      const scrollEl = document.querySelector("[data-scroll-container]");
+
+      if (scrollEl) {
+        const scroll = new LocomotiveScroll({
+          el: scrollEl,
+          smooth: true,
+          lerp: 0.07, // lower = smoother, slower
+          multiplier: 1.2, // scroll speed
+          class: "is-reveal", // when elements appear
+          smartphone: {
+            smooth: true, // enable on mobile
+            lerp: 0.09,
+            multiplier: 1.0,
+          },
+          tablet: {
+            smooth: true,
+            lerp: 0.08,
+            multiplier: 1.0,
+          },
+        });
+
+        // Update on resize
+        const handleResize = () => scroll.update();
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+          window.removeEventListener("resize", handleResize);
+          if (scroll) scroll.destroy();
+        };
+      }
+    })();
+  }, []);
+
+  return <div data-scroll-container>{children}</div>;
+}

package.json

@@ -18,6 +18,7 @@
     "globby": "^13.1.3",
     "google-spreadsheet": "^3.3.0",
     "googleapis": "^110.0.0",
+    "locomotive-scroll": "^4.1.4",
     "mongodb": "^4.13.0",
     "next": "^13.1.1",
     "next-auth": "^4.18.10",

pages/_app.js

@@ -1,7 +1,7 @@
 import Script from "next/script";
 import { Analytics } from "@vercel/analytics/react";
 import { SessionProvider } from "next-auth/react";
-
+import SmoothScroll from "../components/UI/SmoothScrolling";
 import Layout from "../components/Layout/Layout";
 
 import "../styles/external.css";
@@ -10,32 +10,34 @@ import "../styles/globals.css";
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <SessionProvider session={session}>
-      <Layout>
-        {process.env.NODE_ENV === "production" && (
-          <>
-            <Script
-              id="google-tag-manager"
-              strategy="afterInteractive"
-              src="https://www.googletagmanager.com/gtag/js?id=G-0GK7ZH57SK"
-            ></Script>
-            <Script id="google-analytics" strategy="afterInteractive">
-              {`window.dataLayer = window.dataLayer || []; function gtag()
-                {dataLayer.push(arguments)}
-              gtag('js', new Date()); gtag('config', 'G-0GK7ZH57SK');
-            `}
-            </Script>
-            <Script id="microsoft-clarity" strategy="afterInteractive">
-              {`(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "fovtfnoy8f");`}
-            </Script>
-          </>
-        )}
-        <Component {...pageProps} />;
-        <Analytics />
-      </Layout>
+      <SmoothScroll>
+        <Layout>
+          {process.env.NODE_ENV === "production" && (
+            <>
+              <Script
+                id="google-tag-manager"
+                strategy="afterInteractive"
+                src="https://www.googletagmanager.com/gtag/js?id=G-0GK7ZH57SK"
+              ></Script>
+              <Script id="google-analytics" strategy="afterInteractive">
+                {`window.dataLayer = window.dataLayer || []; function gtag()
+                  {dataLayer.push(arguments)}
+                gtag('js', new Date()); gtag('config', 'G-0GK7ZH57SK');
+              `}
+              </Script>
+              <Script id="microsoft-clarity" strategy="afterInteractive">
+                {`(function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "fovtfnoy8f");`}
+              </Script>
+            </>
+          )}
+          <Component {...pageProps} />
+          <Analytics />
+        </Layout>
+      </SmoothScroll>
     </SessionProvider>
   );
 }

pages/index.js

@@ -35,7 +35,7 @@ export default function Home({
         <meta
           name="description"
           content="Hi there! My name is Piyush Garg and I’m a software engineer with over 5 years of experience in the industry. I love all things tech and coding, and on my channel, I share my knowledge and experience with others. Whether you’re a beginner looking to learn the basics or an experienced developer looking to expand your skills, I’ve got something for you."
-        />
+        />  
 
         {/* <!-- Open Graph / Facebook --> */}
         <meta property="og:type" content="website" />

styles/globals.css

@@ -5,6 +5,26 @@
 :root {
   --site-theme-color: #01d293;
 }
+html, body {
+  height: 100%;
+  overflow: hidden; /* locomotive handles scroll */
+}
+
+[data-scroll-container] {
+  will-change: transform;
+}
+
+.is-reveal {
+  opacity: 0;
+  transform: translateY(60px);
+  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.is-reveal[data-scroll-visible] {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
 
 html,
 body {