From 262f8d3b86bc9e3f8708f7effdb8d5892eb7f863 Mon Sep 17 00:00:00 2001
From: Denshooter <dennis@konkol.net>
Date: Wed, 29 Jan 2025 19:03:18 +0100
Subject: [PATCH] update

---
 app/components/Header.tsx | 215 +++++++++++++++++++++++++++++++-------
 app/components/Hero.tsx   |  31 +++---
 app/globals.css           |   1 +
 app/page.tsx              |  13 +--
 4 files changed, 204 insertions(+), 56 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 6121ce8..29a1b83 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,45 +1,188 @@
 "use client";
 
+import {useState} from "react";
 import Link from "next/link";
-import { useState } from "react";
+import {Roboto} from "next/font/google";
+
+const inter = Roboto({weight: '400', subsets: ["latin"]});
 
 export default function Header() {
-  const [isOpen, setIsOpen] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  return (
-      <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"
+    const toggleSidebar = () => {
+        setIsSidebarOpen(!isSidebarOpen);
+    };
+
+    return (
+        <div className={inter.className}>
+            <header
+                className={`p-5 bg-white/30 text-gray-700 fixed w-full z-10 backdrop-blur-md shadow-xl rounded-b-2xl transition-transform ${isSidebarOpen ? 'transform -translate-y-full' : ''}`}>
+                <nav className="flex justify-between items-center mx-auto">
+                    <h1 className="text-2xl md:text-4xl">Dennis</h1>
+                    <button
+                        className="md:hidden text-gray-700 hover:text-gray-900"
+                        onClick={toggleSidebar}
                     >
-                      {item}
+                        <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2"
+                                d="M4 6h16M4 12h16M4 18h16"
+                            />
+                        </svg>
+                    </button>
+                    <div className="hidden md:flex space-x-4 md:space-x-6">
+                        <Link href="#projects">
+                            <button
+                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                <span
+                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
+                  Projects
+                  <svg
+                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                  >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M3 8.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C4.52 5 5.08 5 6.2 5h3.475c.489 0 .733 0 .963.055.204.05.4.13.579.24.201.123.374.296.72.642l.126.126c.346.346.519.519.72.642.18.11.375.19.579.24.23.055.474.055.963.055H17.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C21 8.52 21 9.08 21 10.2v5.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C19.48 19 18.92 19 17.8 19H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C3 17.48 3 16.92 3 15.8V8.2Z"
+                    />
+                  </svg>
+                </span>
+                            </button>
+                        </Link>
+                        <Link href="#contact">
+                            <button
+                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                <span
+                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
+                  Contact
+                  <svg
+                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                  >
+                    <path
+                        d="M22 12.27v4.37a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7.36a2 2 0 0 1 2-2h6.76"
+                        style={{
+                            strokeLinejoin: "bevel",
+                            fillRule: "evenodd",
+                            fill: "none",
+                            strokeLinecap: "round",
+                            strokeWidth: "1.5px",
+                        }}
+                    />
+                    <path
+                        d="M19.3 4.25a1 1 0 0 0-1.42 0l-6 6h0l-.1 3a.21.21 0 0 0 .23.22l3-.1h0l6-6A1 1 0 0 0 21 6Z"
+                        style={{
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            strokeLinecap: "round",
+                            strokeWidth: "1.5px",
+                        }}
+                    />
+                  </svg>
+                </span>
+                            </button>
+                        </Link>
+                        <Link href="#about">
+                            <button
+                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                <span
+                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
+                  About
+                  <svg
+                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                  >
+                    <path
+                        fillRule="evenodd"
+                        d="M10 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"
+                        clipRule="evenodd"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-1.052 1.761C18.908 16.611 15.884 19.5 12 19.5c-3.884 0-6.908-2.889-7.948-6.739A2 2 0 0 1 3 11V7Zm2-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3.335a1 1 0 0 1-.284-.041l-2.529-.75a2.999 2.999 0 0 0-1.704 0l-2.529.75a1 1 0 0 1-.284.041H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm.166 7C6.23 16.256 8.834 18.5 12 18.5c3.166 0 5.77-2.244 6.834-5.5h-3.169c-.192 0-.384-.028-.568-.082l-2.529-.75c-.37-.11-.765-.11-1.136 0l-2.529.75a2.002 2.002 0 0 1-.568.082H5.166Z"
+                        clipRule="evenodd"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        d="M10 14.5a.5.5 0 0 1 .5.5v.003l.003.01c.004.009.014.027.036.053a.86.86 0 0 0 .27.194c.28.14.7.24 1.191.24.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.214.214 0 0 0 .039-.063V15a.5.5 0 0 1 1 0c0 .568-.447.947-.862 1.154-.445.223-1.025.346-1.638.346s-1.193-.123-1.638-.346C9.947 15.947 9.5 15.568 9.5 15a.5.5 0 0 1 .5-.5Z"
+                        clipRule="evenodd"
+                    />
+                  </svg>
+                </span>
+                            </button>
+                        </Link>
+                    </div>
+                </nav>
+            </header>
+
+            <div
+                className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+                onClick={toggleSidebar}
+            ></div>
+
+            <div
+                className={`fixed top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}`}
+            >
+                <button
+                    className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
+                    onClick={toggleSidebar}
+                >
+                    <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M6 18L18 6M6 6l12 12"
+                        />
+                    </svg>
+                </button>
+                <div className="pt-8 space-y-4 flex-grow">
+                    <Link href="#projects">
+                        <button
+                            className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                            Projects
+                        </button>
                     </Link>
-                  </li>
-              ))}
-            </ul>
-          </div>
-        </nav>
-      </header>
-  );
+                    <Link href="#contact">
+                        <button
+                            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                            Contact
+                        </button>
+                    </Link>
+                    <Link href="#about">
+                        <button
+                            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
+                            About
+                        </button>
+                    </Link>
+                </div>
+                <h6 className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</h6>
+            </div>
+        </div>
+    );
 }
\ No newline at end of file
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 54bf80d..cc715c5 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,18 +1,21 @@
 import Link from "next/link";
 
 export default function Hero() {
-  return (
-    <section
-      id="hero"
-      className="text-center p-20 text-white"
-    >
-      <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
-      <p className="mt-4 text-xl">A passionate developer and student.</p>
-      <Link href="#projects">
-        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
-          See My Work
-        </button>
-      </Link>
-    </section>
-  );
+    return (
+        <div id="hero">
+            <section
+                id="hero"
+                className="text-center p-20 text-black"
+            >
+                <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
+                <p className="mt-4 text-xl">A passionate developer and student.</p>
+                <Link href="#projects">
+                    <button
+                        className="mt-6 inline-block px-6 py-2 bg-black text-black rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
+                        See My Work
+                    </button>
+                </Link>
+            </section>
+        </div>
+    );
 }
diff --git a/app/globals.css b/app/globals.css
index c41f7e1..57eec3e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,6 +5,7 @@
 /* Custom Global Styles */
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background-color: #e7e7e7;
 }
 
 .neumorphism {
diff --git a/app/page.tsx b/app/page.tsx
index 5ba01a7..90b362e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,12 +10,13 @@ export default function Home() {
     return (
         <>
             <Header/>
-                <main>
-                    <Hero/>
-                    <Projects/>
-                    <Contact/>
-                    <Footer/>
-                </main>
+            <div className="h-10"></div>
+            <main>
+                <Hero/>
+                <Projects/>
+                <Contact/>
+                <Footer/>
+            </main>
         </>
     );
 }
\ No newline at end of file