wow

src/components/Header.astro

@@ -4,6 +4,7 @@ const navigationItems = [
     { label: "About", href: "#about" },
     { label: "Projects", href: "#projects" },
     { label: "Experience", href: "#experience" },
+    { label: "Carrer", href: "#carrer" },
     { label: "Contact", href: "#contact" },
 ] as const;
 
@@ -20,8 +21,10 @@ const mobileLinkClass =
     <a
         class="shrink-0 text-2xl font-bold leading-[normal] text-foreground no-underline max-md:text-xl"
         href="#home"
-        data-node-id="43:28">@imnya.ng</a
+        data-node-id="43:28"
     >
+        @imnya.ng
+    </a>
 
     <div id="navigation" class="relative flex shrink-0 items-center">
         <nav
@@ -29,16 +32,11 @@ const mobileLinkClass =
             aria-label="주요 메뉴"
             data-node-id="43:40"
         >
-            {
+            {navigationItems.map((item) => (
-                navigationItems.map((item) => (
+                <a class={desktopLinkClass} href={item.href}>
-                    <a
-                        class={desktopLinkClass}
-                        href={item.href}
-                    >
                     {item.label}
                 </a>
-                ))
+            ))}
-            }
         </nav>
 
         <button
@@ -56,7 +54,8 @@ const mobileLinkClass =
             ></span>
             <span
                 aria-hidden="true"
-                class="absolute h-px w-5 bg-foreground"></span>
+                class="absolute h-px w-5 bg-foreground"
+            ></span>
             <span
                 aria-hidden="true"
                 class="absolute h-px w-5 translate-y-1.5 bg-foreground"
@@ -68,13 +67,11 @@ const mobileLinkClass =
             class="absolute right-0 top-[calc(100%+12px)] z-50 hidden min-w-40 flex-col gap-1 rounded-2xl border border-border bg-background p-2 shadow-[0_12px_30px_rgba(0,0,0,0.18)] md:hidden"
             aria-label="모바일 메뉴"
         >
-            {
+            {navigationItems.map((item) => (
-                navigationItems.map((item) => (
                 <a class={mobileLinkClass} href={item.href}>
                     {item.label}
                 </a>
-                ))
+            ))}
-            }
         </nav>
     </div>
 </header>
@@ -109,7 +106,10 @@ const mobileLinkClass =
         });
 
         document.addEventListener("click", (event) => {
-            if (event.target instanceof Node && !navigation.contains(event.target)) {
+            if (
+                event.target instanceof Node &&
+                !navigation.contains(event.target)
+            ) {
                 setMenuOpen(false);
             }
         });