Fixing things without breaking other things

app/components/navbar.jsx

@@ -43,21 +43,21 @@ function Navbar() {
               <a
                   href="/#experience"
                   className="block px-4 py-2 no-underline outline-none hover:no-underline"
-                  onClick={(e) => handleScroll(e, "experience")}
+                  onClick={(e) => handleScroll(e, "skills")}
               >
                 <div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">
-                  EXPERIENCE
+                  SKILLS
                 </div>
               </a>
             </li>
             <li>
               <a
                   href="/#skills"
                   className="block px-4 py-2 no-underline outline-none hover:no-underline"
-                  onClick={(e) => handleScroll(e, "skills")}
+                  onClick={(e) => handleScroll(e, "experience")}
               >
                 <div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">
-                  SKILLS
+                  EXPERIENCE
                 </div>
               </a>
             </li>

app/css/card.scss → app/css/card.css

@@ -1,50 +1,34 @@
 .glow-container {
   --spread: 60;
 }
-
 .glow-card {
   --active: 0.15;
   --start: 0;
 }
-
 .glow-card:is(:hover, :focus-visible) {
   z-index: 2;
 }
-
 .glows {
   pointer-events: none;
   position: absolute;
   inset: 0;
   filter: blur(calc(var(--blur) * 1px));
 }
-
-.glows::after,
-.glows::before {
+.glows::after, .glows::before {
   --alpha: 0;
   content: "";
-  background: conic-gradient(from 180deg at 50% 70%,
-      #f626af 0deg,
-      #8228ec 72.0000010728836deg,
-      #f626af 144.0000021457672deg,
-      #0025ba 216.00000858306885deg,
-      #f626af 288.0000042915344deg,
-      #fafafa 1turn);
+  background: conic-gradient(from 180deg at 50% 70%, #f626af 0deg, #8228ec 72.0000010729deg, #f626af 144.0000021458deg, #0025ba 216.0000085831deg, #f626af 288.0000042915deg, #fafafa 1turn);
   background-attachment: fixed;
   position: absolute;
   inset: -5px;
   border: 8px solid transparent;
   border-radius: 12px;
-  mask: linear-gradient(#0000, #0000),
-    conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
-      #000 0deg,
-      #fff,
-      #0000 calc(var(--spread) * 1deg));
+  mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
   mask-composite: intersect;
   mask-clip: padding-box, border-box;
   opacity: var(--active);
   transition: opacity 1s;
 }
-
 .glow-card::before {
   position: absolute;
   inset: 0;
@@ -55,42 +39,27 @@
   background: #84738c;
   background-attachment: fixed;
   border-radius: 12px;
-  mask: linear-gradient(#0000, #0000),
-    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
-      #ffffff26 0deg,
-      white,
-      #ffffff26 calc(var(--spread) * 2.5deg));
+  mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), #ffffff26 0deg, white, #ffffff26 calc(var(--spread) * 2.5deg));
   mask-clip: padding-box, border-box;
   mask-composite: intersect;
   opacity: var(--active);
   transition: opacity 1s;
 }
-
 .glow-card::after {
   --bg-size: 100%;
   content: "";
   pointer-events: none;
   position: absolute;
-  background: conic-gradient(from 180deg at 50% 70%,
-      #f626af 0deg,
-      #8228ec 72.0000010728836deg,
-      #f626af 144.0000021457672deg,
-      #0025ba 216.00000858306885deg,
-      #f626af 288.0000042915344deg,
-      #fafafa 1turn);
+  background: conic-gradient(from 180deg at 50% 70%, #f626af 0deg, #8228ec 72.0000010729deg, #f626af 144.0000021458deg, #0025ba 216.0000085831deg, #f626af 288.0000042915deg, #fafafa 1turn);
   background-attachment: fixed;
   border-radius: 12px;
   opacity: var(--active, 0);
   transition: opacity 1s;
   --alpha: 0;
   inset: 0;
   border: 2px solid transparent;
-  mask: linear-gradient(#0000, #0000),
-    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
-      #0000 0deg,
-      #fff,
-      #0000 calc(var(--spread) * 0.5deg));
+  mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
   filter: brightness(1.5);
   mask-clip: padding-box, border-box;
   mask-composite: intersect;
-}
+}

app/css/globals.scss → app/css/globals.css

@@ -3,37 +3,35 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: rgb(211, 216, 232);
+  --foreground-rgb: #d3d8e8;
 }
-
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
   }
 }
-
 body {
   color: rgb(var(--foreground-rgb));
   background-color: #0d1224;
+  position: relative;
+  width: 100%;
 }
-
 #sticky-card-1 {
   --index: 1;
 }
-
 #sticky-card-2 {
   --index: 2;
 }
-
 #sticky-card-3 {
   --index: 3;
 }
-
 #sticky-card-4 {
   --index: 4;
 }
-
 .sticky-card {
-  // padding-top: calc(var(--index) * 2.5rem);
   top: calc(var(--index) * 4rem);
-}
+}
+
+html {
+  width: 100%;
+}

app/layout.js

@@ -4,8 +4,8 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Footer from "./components/footer";
 import Navbar from "./components/navbar";
-import "./css/card.scss";
-import "./css/globals.scss";
+import "./css/card.css";
+import "./css/globals.css";
 import ScrollToTop from "./components/helper/scroll-to-top";
 const inter = Inter({ subsets: ["latin"] });
 

app/page.js

@@ -3,7 +3,6 @@ import Experience from "./components/homepage/experience";
 import HeroSection from "./components/homepage/hero-section";
 import Projects from "./components/homepage/projects";
 import Skills from "./components/homepage/skills";
-import './css/antiScroll.css';
 
 export default async function Home() {