Add new documents and images to the public directory

- Added essays: qui-sumus-existential-dread.pdf and licencjat.pdf
- Added scripts: loop.pdf
- Added images: DSC_1283.avif, GAK00015.avif, GAK00017.avif, GAK00041.avif, GAK00042.avif, painter.avif, parasitic-god-1.avif, parasitic-god-2.avif, parasitic-god-3.avif, parasitic-god-4.avif, parasitic-god-5.avif, spanish-inq-1.avif, spanish-inq-2.avif, spanish-inq-3.avif, spanish-inq-4.avif, typing-game-1.avif, typing-game-2.avif

components/navbar.tsx

@@ -3,9 +3,11 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
 
 const Navbar = () => {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
@@ -20,6 +22,10 @@ const Navbar = () => {
     };
   }, []);
 
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [pathname]);
+
   const navLinks = [
     { href: "/", label: "Home" },
     { href: "/k-suite", label: "K-Suite" },
@@ -33,46 +39,71 @@ const Navbar = () => {
     { href: "/about", label: "About" },
   ];
 
-
   const baseClasses =
     "fixed z-20 flex w-full items-center justify-center p-4 transition-all duration-300";
   const scrolledClasses = "bg-gray-900/80 backdrop-blur-md";
   const transparentClasses = "bg-transparent";
 
+  const renderLink = (link: (typeof navLinks)[number], className: string) => {
+    const isActive = pathname === link.href;
+    const linkClasses = `${className} hover:text-yellow-400 transition-colors ${
+      isActive ? "text-yellow-400 font-semibold" : "text-white"
+    }`;
+
+    if (link.external) {
+      return (
+        <a
+          key={link.href}
+          href={link.href}
+          className={linkClasses}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {link.label}
+        </a>
+      );
+    }
+
+    return (
+      <Link key={link.href} href={link.href} className={linkClasses}>
+        {link.label}
+      </Link>
+    );
+  };
+
   return (
-    <nav
-      className={`${baseClasses} ${isScrolled ? scrolledClasses : transparentClasses
+    <>
+      <nav
+        className={`${baseClasses} ${
+          isScrolled || isMenuOpen ? scrolledClasses : transparentClasses
         }`}
-    >
-      <div className="flex flex-1"></div>
-      <div className="flex gap-4">
-        {navLinks.map((link) => {
-          const isActive = pathname === link.href;
-          const linkClasses = `text-lg hover:text-yellow-400 transition-colors ${isActive ? "text-yellow-400 font-semibold" : "text-white"
-            }`;
+      >
+        <div className="flex flex-1"></div>
 
-          if (link.external) {
-            return (
-              <a
-                key={link.href}
-                href={link.href}
-                className={linkClasses}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {link.label}
-              </a>
-            );
-          }
+        {/* Desktop links */}
+        <div className="hidden md:flex gap-4">
+          {navLinks.map((link) => renderLink(link, "text-lg"))}
+        </div>
 
-          return (
-            <Link key={link.href} href={link.href} className={linkClasses}>
-              {link.label}
-            </Link>
-          );
-        })}
-      </div>
-    </nav>
+        {/* Mobile hamburger */}
+        <button
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="md:hidden text-white hover:text-yellow-400 transition-colors"
+        >
+          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </nav>
+
+      {/* Mobile menu */}
+      {isMenuOpen && (
+        <div role="dialog" aria-label="Navigation menu" className="fixed inset-0 z-10 pt-16 bg-gray-900/95 backdrop-blur-md md:hidden">
+          <div className="flex flex-col items-center gap-6 pt-8">
+            {navLinks.map((link) => renderLink(link, "text-2xl"))}
+          </div>
+        </div>
+      )}
+    </>
   );
 };