update

app/components/Header.tsx

@@ -1,14 +1,44 @@
-// app/components/Header.tsx
 "use client";
 
 import Link from "next/link";
+import { useState } from "react";
 
 export default function Header() {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <header className="p-5 bg-gray-800 text-white">
-      <nav className="flex justify-between items-center">
+    <header className="p-5 bg-gray-800 text-white fixed w-full z-10">
+      <nav className="flex justify-between items-center max-w-6xl mx-auto">
         <h1 className="text-lg font-bold">My Portfolio</h1>
-        <ul className="flex space-x-4 items-center">
+        <button
+          className="md:hidden block focus:outline-none"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {isOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 8h16M4 16h16"
+              />
+            )}
+          </svg>
+        </button>
+        <ul className={`flex space-x-4 ${isOpen ? "block" : "hidden"} md:flex`}>
           <li>
             <Link href="#about" className="hover:underline">
               About