From e01e0a6a97ff0b9a68339ad4b24a73db726b0149 Mon Sep 17 00:00:00 2001
From: Kevin Loritsch <kloritsch58@gmail.com>
Date: Wed, 3 Sep 2025 19:34:49 -0700
Subject: [PATCH] harder mobile adjustments

---
 src/app/components/Navbar.tsx  | 104 ++++++++++++++++++++++++++-------
 src/app/components/Project.tsx |   2 +-
 2 files changed, 84 insertions(+), 22 deletions(-)

diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index 00d3c56..0579c58 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -1,8 +1,9 @@
 "use client";
-import { motion } from "motion/react";
+import { motion, AnimatePresence } from "motion/react";
 import { Link as ScrollLink } from "react-scroll";
 import Link from "next/link";
 import { useState, useEffect } from "react";
+import { FaBars, FaTimes } from "react-icons/fa";
 
 import navbarItems from "@/data/NavbarData";
 
@@ -42,28 +43,89 @@ const use10vhAsPixels = () => {
 const Navbar = () => {
   const pixels = use10vhAsPixels();
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-[10vh] w-full cursor-pointer justify-evenly bg-white px-8 shadow-xl">
-      <div className="flex w-1/2 flex-row items-center gap-4 text-left">
-        <Link href="/">
-          <p className="font-bold">Kevin Loritsch</p>
-        </Link>
-      </div>
-      <div className="flex w-1/2 flex-row items-center justify-end text-right">
-        {navbarItems.map(({ name, link }, i) => (
-          <motion.div {...fadeIn(i / 5)} key={i}>
-            <motion.div className="pr-4" {...hoverAnimation}>
-              <ScrollLink
-                to={link}
-                smooth={true}
-                offset={-pixels}
-                duration={500}
-              >
-                {name}
-              </ScrollLink>
+    <div>
+      <div className="fixed left-0 top-0 z-50 hidden h-[10vh] w-full cursor-pointer justify-evenly bg-white px-8 shadow-xl md:flex">
+        <div className="flex w-1/2 flex-row items-center gap-4 text-left">
+          <Link href="/">
+            <p className="font-bold">Kevin Loritsch</p>
+          </Link>
+        </div>
+        <div className="flex w-1/2 flex-row items-center justify-end text-right">
+          {navbarItems.map(({ name, link }, i) => (
+            <motion.div {...fadeIn(i / 5)} key={i}>
+              <motion.div className="pr-4" {...hoverAnimation}>
+                <ScrollLink
+                  to={link}
+                  smooth={true}
+                  offset={-pixels}
+                  duration={500}
+                >
+                  {name}
+                </ScrollLink>
+              </motion.div>
             </motion.div>
-          </motion.div>
-        ))}
+          ))}
+        </div>
+      </div>
+      <div className="fixed left-0 top-0 z-50 w-full bg-white shadow-md md:hidden">
+        <div className="flex items-center justify-between px-4 py-3">
+          <Link href="/" className="text-2xl font-bold">
+            Kevin Loritsch
+          </Link>
+          <button onClick={toggleMenu} className="text-3xl">
+            <AnimatePresence mode="wait" initial={false}>
+              {isOpen ? (
+                <motion.div
+                  key="close"
+                  initial={{ rotate: -90, opacity: 0 }}
+                  animate={{ rotate: 0, opacity: 1 }}
+                  exit={{ rotate: 90, opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <FaTimes />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="open"
+                  initial={{ rotate: 90, opacity: 0 }}
+                  animate={{ rotate: 0, opacity: 1 }}
+                  exit={{ rotate: -90, opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <FaBars />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </button>
+        </div>
+
+        <div
+          className={`overflow-hidden bg-white transition-all duration-300 ${
+            isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+          }`}
+        >
+          <div className="mx-2 flex flex-col items-center gap-6 border-t-2 py-4 text-xl">
+            {navbarItems.map(({ name, link }, i) => (
+              <motion.div {...fadeIn(i / 5)} key={i}>
+                <motion.div className="pr-4" {...hoverAnimation}>
+                  <ScrollLink
+                    to={link}
+                    smooth={true}
+                    offset={-pixels}
+                    duration={500}
+                  >
+                    {name}
+                  </ScrollLink>
+                </motion.div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/components/Project.tsx b/src/app/components/Project.tsx
index 258c636..e6ed7f8 100644
--- a/src/app/components/Project.tsx
+++ b/src/app/components/Project.tsx
@@ -96,7 +96,7 @@ const Project = ({
         </motion.div>
 
         <motion.div
-          className="absolute inset-0 flex items-center justify-center rounded-2xl bg-black/70 p-6 text-center"
+          className="absolute inset-0 flex select-none items-center justify-center rounded-2xl bg-black/70 p-6 text-center"
           style={{ backdropFilter: "blur(6px)" }}
           initial={{ opacity: 0 }}
           whileHover={{ opacity: 1 }}