feat: added sticky navbar for easy access & removed completion tracker

Author: steadyfall

site/src/app/page.tsx

@@ -13,8 +13,8 @@ import { personalDetails, experiencesArray, projectsArray, skillsArray } from '@
 export default function Portfolio() {
   return (
     <div className="bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
-      <Navbar />
       <div className="mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
+        <Navbar />
         <Header {...personalDetails} />
         <main className="container mx-auto py-8 z-1">
           <About />

site/src/components/Header.tsx

@@ -1,5 +1,4 @@
 import { ArrowUpRight, Copy, CopyCheck } from 'lucide-react'
-import ThemeSwitch from './ThemeSwitch'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
 import Image from 'next/image'
@@ -43,7 +42,6 @@ const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linke
                     <BlurFade delay={BLUR_FADE_DELAY}>
                         <div className="flex items-center justify-center md:justify-start">
                             <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">{name}</h1>
-                            <ThemeSwitch />
                         </div>
                     </BlurFade>
                     <div className="flex justify-center md:justify-start mt-4 space-x-4">

site/src/components/Navbar.tsx

@@ -1,18 +1,23 @@
 import useReadingProgress from '@/hooks/useReadingProgress'
+import ThemeSwitch from './ThemeSwitch';
 
 const Navbar = () => {
     const completion = useReadingProgress();
 
     return (
-        <nav className="z-50 py-0.5 sticky top-0">
-            {/* <div className="flex items-center justify-between container mx-auto text-xl"></div> */}
-            <div className="h-0.5 overflow-hidden">
-                <span
-                    className="absolute bg-emerald-600 dark:bg-emerald-400 h-full w-full top-0 bottom-0"
-                    style={{ transform: `translateX(${completion - 100}%)` }}
-                />
-            </div>
-        </nav>
+        <div className="sticky top-0 z-50 py-6 backdrop-blur-sm">
+            <nav className="flex items-center justify-between">
+                <ul className="flex gap-4 sm:gap-8">
+                    <li><a href="#about" className="hover:underline hover:underline-offset-4">home</a></li>
+                    <li><a href="#experience" className="hover:underline hover:underline-offset-4">experience</a></li>
+                    <li><a href="#education" className="hover:underline hover:underline-offset-4">education</a></li>
+                    <li><a href="#projects" className="hover:underline hover:underline-offset-4">projects</a></li>
+                </ul>
+                <div className="flex gap-0 sm:gap-4">
+                    <ThemeSwitch />
+                </div>
+            </nav>
+        </div>
     )
 }
 

site/src/components/ThemeSwitch.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import { Moon, Sun } from 'lucide-react'
 import { useState, useEffect } from 'react'
@@ -23,10 +23,17 @@ export default function ThemeSwitch() {
     // priority={false}
   )
 
-  if (resolvedTheme === 'dark') {
-    return <Sun onClick={() => setTheme('light')} />
-  }
-  if (resolvedTheme === 'light') {
-    return <Moon onClick={() => setTheme('dark')} />
-  }
+  return (
+    <button
+    className="cursor-pointer"
+    onClick={() => {
+      setTheme(resolvedTheme === "dark" ? "light" : "dark");
+    }}>
+      {
+        resolvedTheme === 'dark' 
+        ? <Sun className="w-4 h-4 md:w-5 md:h-5 text-orange-300"/> 
+        : <Moon className="w-4 h-4 md:w-5 md:h-5 text-indigo-500"/>
+      }
+    </button>
+  )
 }