updata

app/components/Header.tsx

@@ -7,56 +7,39 @@ export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <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>
-        <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
-            </Link>
-          </li>
-          <li>
-            <Link href="#projects" className="hover:underline">
-              Projects
-            </Link>
-          </li>
-          <li>
-            <Link href="#contact" className="hover:underline">
-              Contact
-            </Link>
-          </li>
-          {/* DarkModeToggle removed */}
-        </ul>
-      </nav>
-    </header>
+      <header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg">
+        <nav className="flex justify-between items-center max-w-6xl mx-auto">
+          <h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1>
+          <div className="flex items-center">
+            <button
+                className="md:hidden p-2 rounded-md bg-white/30 backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+              Menu
+            </button>
+            <ul
+                className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${
+                    isOpen ? "translate-x-0" : "translate-x-full"
+                } md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`}
+            >
+              {["About", "Projects", "Contact"].map((item, index) => (
+                  <li
+                      key={item}
+                      className={`transition-opacity duration-500 delay-${index * 150} ${
+                          isOpen ? "opacity-100" : "opacity-0"
+                      } md:opacity-100`}
+                  >
+                    <Link
+                        href={`#${item.toLowerCase()}`}
+                        className="bg-white/30 p-2 rounded-md backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
+                    >
+                      {item}
+                    </Link>
+                  </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      </header>
   );
-}
+}