Split up header into multiple readable parts

src/web/src/app/page.jsx

@@ -6,6 +6,6 @@ import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
 // Exports
 export default function Index() {
   return (
-    <HeroSection1 />
+    <div></div>
   );
 }

src/web/src/components/header.jsx

@@ -1,12 +1,11 @@
 "use client";
 
-import ThemeToggle from "@/components/theme-toggle"
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { motion, AnimatePresence } from "framer-motion";
-import { useState, useEffect } from "react";
 
-
-let tabs = [
+// Tabs(links to be converted into a tab menu)
+const tabs = [
   { id: "/", label: "Home", color: "green" },
   { id: "projects", label: "Projects", color: "yellow" },
   { id: "resume", label: "Resume", color: "blue" },
@@ -14,41 +13,19 @@ let tabs = [
   { id: "shop", label: "Shop", color: "aqua" }
 ];
 
+// Tab theme colors
 const tabColors = {
-  "green": "bg-light-green-1 dark:bg-dark-green-1",
-  "yellow": "bg-light-yellow-1 dark:bg-dark-yellow-1",
-  "blue": "bg-light-blue-1 dark:bg-dark-blue-1",
-  "purple": "bg-light-purple-1 dark:bg-dark-purple-1",
-  "aqua": "bg-light-aqua-1 dark:bg-dark-aqua-1"
-}
-
-function Header() {
-  const [mounted, setMounted] = useState(false);
-  let [activeTab, setActiveTab] = useState(tabs[0].id);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  green: "bg-light-green-1 dark:bg-dark-green-1",
+  yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1",
+  blue: "bg-light-blue-1 dark:bg-dark-blue-1",
+  purple: "bg-light-purple-1 dark:bg-dark-purple-1",
+  aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1"
+};
 
+// Individual tab links
+function Tab({ tab, activeTab, setActiveTab }) {
   return (
-    <div className="flex justify-center items-center">
-      <AnimatePresence>
-        {mounted && (
-          <motion.div
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
-            variants={{
-              visible: {
-                opacity: 1,
-                transition: { staggerChildren: 0.1 }
-              },
-              hidden: { opacity: 0 }
-            }}
-            className="flex space-x-1"
-          >
-            {tabs.map((tab, index) => (
-              <Link key={tab.id} href={`/${tab.id}`} passHref>
+    <Link href={`/${tab.id}`} passHref>
       <motion.a
         onClick={() => setActiveTab(tab.id)}
         className={`${
@@ -61,7 +38,7 @@ function Header() {
         transition-all focus-visible:outline-2
       `}
         style={{
-                    WebkitTapHighlightColor: "transparent",
+          WebkitTapHighlightColor: "transparent"
         }}
         variants={{
           visible: { opacity: 1, x: 0 },
@@ -85,11 +62,49 @@ function Header() {
         {tab.label}
       </motion.a>
     </Link>
+  );
+}
+
+// List of tabs
+function TabMenu({ tabs, activeTab, setActiveTab }) {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      variants={{
+        visible: {
+          opacity: 1,
+          transition: { staggerChildren: 0.1 }
+        },
+        hidden: { opacity: 0 }
+      }}
+      className="flex space-x-1"
+    >
+      {tabs.map((tab) => (
+        <Tab key={tab.id} tab={tab} activeTab={activeTab} setActiveTab={setActiveTab} />
       ))}
     </motion.div>
+  );
+}
+
+function Header() {
+  const [mounted, setMounted] = useState(false);
+  const [activeTab, setActiveTab] = useState(tabs[0].id);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center">
+      <AnimatePresence>
+        {mounted && (
+          <TabMenu tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
         )}
       </AnimatePresence>
     </div>
   );
 }
+
 export default Header;

src/web/src/components/hero.jsx

@@ -1,4 +1,5 @@
-use client";
+"use client"
+
 import { Suspense, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
 import { motion, AnimatePresence } from "framer-motion";