refactor: migrate from Biome to oxlint/oxfmt, remove contact form

- Replace Biome with oxlint + oxfmt (OXC toolchain) for linting and formatting
- Add .oxlintrc.json and .oxfmtrc.json configuration files
- Update VS Code settings and devcontainer to use oxc-vscode extension
- Remove contact form, Resend email integration, and related server action/schema
- Remove unused UI components (accordion, alert, card, tabs, toggle, etc.)

components/layout/footer.tsx

@@ -1,8 +1,9 @@
 import Link from "next/link";
+
 import siteConfig from "@/lib/config/site";
 
 const Footer = () => (
-  <footer className="mt-8 w-full py-6 text-center text-[13px] text-muted-foreground leading-loose">
+  <footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
     All content is licensed under{" "}
     <Link href="/license" className="underline underline-offset-4">
       {siteConfig.license}

components/layout/header.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { MoonIcon, SunIcon } from "lucide-react";
+import { AtSignIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
-import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+
 import avatarImg from "@/app/avatar.jpg";
 import { GitHubIcon } from "@/components/icons";
 import { Menu } from "@/components/layout/menu";
@@ -42,24 +43,24 @@ const Header = ({ className }: { className?: string }) => {
         className,
       )}
     >
-      <header className="mx-auto flex w-full max-w-4xl items-center justify-between px-5 py-4">
+      <header className="mx-auto mt-2 flex w-full max-w-[720px] items-center justify-between px-5 py-4">
         <div className="flex items-center gap-3">
           <Link
             href="/"
             rel="author"
             aria-label={siteConfig.name}
-            className="flex shrink-0 items-center gap-2.5 pr-2 hover:text-foreground/85 hover:no-underline"
+            className="hover:text-foreground/85 flex shrink-0 items-center gap-2.5 pr-2 hover:no-underline"
           >
             <Image
               src={avatarImg}
               alt={`Photo of ${siteConfig.name}`}
-              className="size-[40px] rounded-full border border-ring/30 md:size-[32px]"
+              className="border-ring/30 size-7 rounded-full border"
               width={40}
               height={40}
               quality={75}
               priority
             />
-            <span className="whitespace-nowrap font-medium text-[17.5px] tracking-tight max-md:sr-only">
+            <span className="text-[17.5px] font-medium tracking-tight whitespace-nowrap max-md:sr-only">
               {siteConfig.name}
             </span>
           </Link>
@@ -71,16 +72,26 @@ const Header = ({ className }: { className?: string }) => {
           <Button
             variant="ghost"
             size="sm"
-            aria-label="Open GitHub profile"
-            asChild
+            nativeButton={false}
+            aria-label="Email Me"
+            render={<a href={`mailto:${authorConfig.email}`} />}
           >
-            <a
-              href={`https://github.com/${authorConfig.social.github}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <GitHubIcon />
-            </a>
+            <AtSignIcon />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            nativeButton={false}
+            aria-label="Open GitHub profile"
+            render={
+              <a
+                href={`https://github.com/${authorConfig.social.github}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              />
+            }
+          >
+            <GitHubIcon />
           </Button>
           <Button
             variant="ghost"
@@ -89,10 +100,7 @@ const Header = ({ className }: { className?: string }) => {
             aria-label="Toggle theme"
             className="group"
           >
-            <SunIcon
-              className="group-hover:stroke-orange-600 dark:hidden"
-              aria-hidden="true"
-            />
+            <SunIcon className="group-hover:stroke-orange-600 dark:hidden" aria-hidden="true" />
             <MoonIcon
               className="not-dark:hidden group-hover:stroke-yellow-400"
               aria-hidden="true"

components/layout/menu.tsx

@@ -1,15 +1,9 @@
 "use client";
 
-import { ChevronDownIcon } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
+
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 const menuItems = [
   {
@@ -20,79 +14,31 @@ const menuItems = [
     text: "Projects",
     href: "/projects",
   },
-  {
-    text: "Contact",
-    href: "/contact",
-  },
 ] as const;
 
 const Menu = () => {
   const segment = useSelectedLayoutSegment() || "";
 
-  const currentItem = menuItems.find(
-    (item) => item.href?.split("/")[1] === segment,
-  );
-  const currentLabel = segment === "" ? "Home" : currentItem?.text || "Menu";
-
   return (
-    <nav data-slot="navigation-menu">
-      {/* Desktop: Show all buttons */}
-      <div className="hidden items-center gap-2 sm:flex">
-        {menuItems.map((item) => {
-          const isCurrent = item.href?.split("/")[1] === segment;
+    <nav data-slot="navigation-menu" className="flex items-center gap-2">
+      {menuItems.map((item) => {
+        const isCurrent = item.href?.split("/")[1] === segment;
 
-          return (
-            <Button
-              asChild
-              key={item.href}
-              variant="ghost"
-              size="sm"
-              aria-label={item.text}
-              data-current={isCurrent || undefined}
-              className="text-[15px] leading-none data-current:bg-accent/60 data-current:text-accent-foreground"
-            >
-              <Link href={item.href}>{item.text}</Link>
-            </Button>
-          );
-        })}
-      </div>
-
-      {/* Mobile: Show dropdown menu */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+        return (
           <Button
+            key={item.href}
             variant="ghost"
             size="sm"
-            className="flex gap-2 text-[17.5px] sm:hidden data-[state=open]:[&_svg]:rotate-180"
+            nativeButton={false}
+            aria-label={item.text}
+            data-current={isCurrent || undefined}
+            className="data-current:bg-accent/60 data-current:text-accent-foreground text-[15px] leading-none"
+            render={<Link href={item.href} />}
           >
-            {currentLabel}
-            <ChevronDownIcon className="size-3.5 opacity-60 transition-transform duration-200" />
+            {item.text}
           </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="min-w-[140px]">
-          <DropdownMenuItem
-            asChild
-            data-current={segment === ""}
-            aria-current={segment === "" ? "page" : undefined}
-          >
-            <Link href="/">Home</Link>
-          </DropdownMenuItem>
-          {menuItems.map((item) => {
-            const isCurrent = item.href?.split("/")[1] === segment;
-
-            return (
-              <DropdownMenuItem
-                asChild
-                key={item.href}
-                data-current={isCurrent || undefined}
-                aria-current={isCurrent ? "page" : undefined}
-              >
-                <Link href={item.href}>{item.text}</Link>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        );
+      })}
     </nav>
   );
 };

components/layout/page-title.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+
 import { cn } from "@/lib/utils";
 
 const PageTitle = ({
@@ -11,14 +12,14 @@ const PageTitle = ({
 }) => (
   <h1
     className={cn(
-      "not-prose mt-0 mb-6 text-left font-medium text-3xl lowercase tracking-tight",
+      "not-prose mt-0 mb-6 text-left text-3xl font-medium tracking-tight lowercase",
       className,
     )}
     {...rest}
   >
     <Link
       href={canonical}
-      className="text-foreground no-underline before:text-muted-foreground before:tracking-wider before:content-['\002E\002F']"
+      className="text-foreground before:text-muted-foreground no-underline before:tracking-wider before:content-['./']"
     >
       {children}
     </Link>