refactor: cleanup the code

README.md

@@ -19,9 +19,11 @@ Inside of your Astro project, you'll see the following folders and files:
 .
 ├── astro.config.mjs
 ├── cv.json
+├── LICENSE
 ├── package.json
 ├── pnpm-lock.yaml
 ├── public
+│   ├── CNAME
 │   ├── favicon.ico
 │   ├── favicon.png
 │   └── pattern.svg
@@ -31,14 +33,15 @@ Inside of your Astro project, you'll see the following folders and files:
 │   │   └── images
 │   │       └── pfp.png
 │   ├── components
-│   │   ├── Boxes.astro
+│   │   ├── Boxes.tsx
 │   │   ├── Button.astro
 │   │   ├── Card.astro
 │   │   ├── CollapseText.tsx
+│   │   ├── Footer.astro
+│   │   ├── Header.astro
 │   │   ├── Heading.astro
 │   │   ├── MobileMenu.tsx
-│   │   ├── NavBar.astro
-│   │   ├── navLinks.json
+│   │   ├── path.json
 │   │   ├── Section.astro
 │   │   ├── sections
 │   │   │   ├── Awards.astro
@@ -60,6 +63,8 @@ Inside of your Astro project, you'll see the following folders and files:
 │       └── main.ts
 ├── tailwind.config.mjs
 └── tsconfig.json
+
+11 directories, 36 files
 ```
 
 Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

src/components/NavBar.astro → src/components/Header.astro

@@ -1,8 +1,9 @@
 ---
-import navLinks from "./navLinks.json";
+import path from "./path.json";
 import { basics } from "@cv";
 import MobileMenu from "./MobileMenu";
 const { nickname } = basics;
+const currentPath = Astro.url.pathname;
 ---
 
 <header id="header" class="fixed top-0 z-50 w-full print:hidden">
@@ -20,10 +21,12 @@ const { nickname } = basics;
     >
       <MobileMenu client:load>
         {
-          navLinks.map((link) => (
+          path.map((link) => (
             <a
               href={link.url}
-              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
+              class={`relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0 ${
+                currentPath === link.url ? "text-white" : ""
+              }`}
             >
               {link.name}
             </a>
@@ -32,10 +35,12 @@ const { nickname } = basics;
       </MobileMenu>
       <div class="hidden sm:flex">
         {
-          navLinks.map((link) => (
+          path.map((link) => (
             <a
               href={link.url}
-              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
+              class={`relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0 ${
+                currentPath === link.url ? "text-white" : ""
+              }`}
             >
               {link.name}
             </a>

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import NavBar from "@/components/NavBar.astro";
+import Header from "@/components/Header.astro";
 import Footer from "@/components/Footer.astro";
 import Starry from "@/components/Starry";
 import Boxes from "@/components/Boxes";
@@ -24,7 +24,7 @@ const { title } = Astro.props;
     class="relative flex min-h-screen flex-col bg-black leading-relaxed tracking-wide text-neutral-200 antialiased selection:bg-neutral-300 selection:text-neutral-900"
   >
     <Boxes client:load />
-    <NavBar />
+    <Header />
     <Starry
       client:idle
       id="tsparticlesfullpage"

src/scripts/main.ts

@@ -1,7 +1,6 @@
 interface Window {
   stickyHeaderFuncionality: () => void;
   evaluateHeaderPosition: () => void;
-  applyMenuItemClasses: () => void;
 }
 
 let headerElement: HTMLElement | null = null;
@@ -10,7 +9,6 @@ document.addEventListener("DOMContentLoaded", () => {
   headerElement = document.getElementById("header");
 
   window.stickyHeaderFuncionality();
-  window.applyMenuItemClasses();
   window.evaluateHeaderPosition();
 });
 
@@ -29,12 +27,3 @@ window.evaluateHeaderPosition = () => {
     headerElement.classList.add("h-[75px]");
   }
 };
-
-window.applyMenuItemClasses = () => {
-  const menuItems = document.querySelectorAll<HTMLAnchorElement>("nav a");
-  menuItems.forEach((menuItem) => {
-    if (menuItem.pathname === window.location.pathname) {
-      menuItem.classList.add("text-white");
-    }
-  });
-};