update packages and fix broken thingies

components/footer.js

@@ -24,9 +24,7 @@ export default function Footer() {
                 <p className="text-xl">
                     © {RomanNumerals(new Date().getFullYear())}
                     {" "}
-                    <Link href="/">
                         <a>Robert S.</a>
-                    </Link>
                 </p>
                 <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start gap-x-4 md:gap-2.5">
                     <a href="mailto:admin@robert-s.dev" className="text-gray-400">

components/navbar.js

@@ -3,20 +3,20 @@ import {useState} from "react";
 import NavLink from "./navlink";
 
 export default function Navbar() {
-    const [active, setActive] = useState(false)
+    const [active, setActive] = useState(false);
 
     const handleClick = () => {
-        setActive(!active)
+        setActive(!active);
-    }
+    };
 
     return (
         <>
             <nav className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row">
                 <div className="flex">
                     <Link href="/">
-                        <a className="flex font-medium items-center mb-4 md:mb-0">
+                        <span className="flex font-medium items-center mb-4 md:mb-0 cursor-pointer">
                             <span className="text-2xl font-bold duration-200">Robert S.</span>
-                        </a>
+                        </span>
                     </Link>
                     <button
                         className="inline-block md:hidden w-8 h-8 text-gray-400 focus:text-white p-1 ml-auto"
@@ -44,28 +44,12 @@ export default function Navbar() {
                         active ? "flex" : "hidden"
                     }   md:ml-auto md:flex flex-wrap flex-col md:flex-row md:space-x-4 items-center w-full pt-2 md:pt-0 md:w-auto text-lg justify-center font-semibold`}
                 >
-                    <NavLink href="/">
+                    <NavLink href="/" text="Home" />
-                        <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
+                    <NavLink href="/work" text="Work" />
-                            Home
+                    <NavLink href="/about" text="About" />
-                        </a>
+                    <NavLink href="/contact" text="Contact" />
-                    </NavLink>
-                    <NavLink href="/work">
-                        <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
-                            Work
-                        </a>
-                    </NavLink>
-                    <NavLink href="/about">
-                        <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
-                            About
-                        </a>
-                    </NavLink>
-                    <NavLink href="/contact">
-                        <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
-                            Contact
-                        </a>
-                    </NavLink>
                 </div>
             </nav>
         </>
-    )
+    );
 }

components/navlink.js

@@ -2,17 +2,16 @@ import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-const NavLink = ({ href, children }) => {
+const NavLink = ({ href, text }) => {
     const router = useRouter()
 
-    let className = children.props.className || ''
+    let childClassName = (router.pathname === href) ? 'text-white' : 'text-gray-400';
-    if (router.pathname === href) {
-        className = `${className} text-white`
-    } else {
-        className = `${className} text-gray-400`
-    }
 
-    return <Link href={href}>{React.cloneElement(children, { className })}</Link>
+    return (
+        <Link href={href}>
+            <span className={childClassName}>{text}</span>
+        </Link>
+    );
 }
 
 export default NavLink

package.json

@@ -7,17 +7,17 @@
     "export": "next export"
   },
   "dependencies": {
-    "framer-motion": "^7.6.12",
+    "framer-motion": "^7.10.3",
     "lucide-react": "^0.102.0",
-    "next": "^13.0.5",
+    "next": "^13.5.6",
     "prop-types": "^15.8.1",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
-    "simple-icons": "^7.20.0"
+    "simple-icons": "^7.21.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.35",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.4.1"
   }
 }