From 1950e8fca94baca747fbe4c50109fdede8515044 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Sat, 11 Jan 2025 00:08:47 -0500
Subject: [PATCH] header improvements, add error handling for images on about
 page, update deps

---
 app/components/Header.tsx      | 58 ++++++++++++++++++++--------------
 app/components/pages/About.tsx | 32 ++++++++++++++++---
 app/globals.css                | 23 ++++++++------
 next.config.ts                 |  1 +
 package.json                   |  6 ++--
 5 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 43a8153..ab197ee 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -6,34 +6,45 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons';
 import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal, faMusic } from '@fortawesome/free-solid-svg-icons';
 
+interface NavItemProps {
+  href: string;
+  icon: any;
+  children: React.ReactNode;
+}
+
+const NavItem = ({ href, icon, children }: NavItemProps) => (
+  <li>
+    <Link href={href} className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all duration-300">
+      <FontAwesomeIcon icon={icon} className="text-md mr-2" />
+      {children}
+    </Link>
+  </li>
+);
+
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
+  const toggleMenu = () => setIsOpen(!isOpen);
 
   return (
-    <header className="bg-gray-800">
-      <nav className="container mx-auto px-4 py-6 flex justify-between items-center">
-        <Link href="/" className="text-gray-300 hover:text-white text-2xl">aidxn.cc</Link>
-        <div className="md:hidden">
-          <button onClick={toggleMenu} className="text-gray-300 focus:outline-none">
-            <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
-          </button>
-        </div>
-        <ul className={`flex-col md:flex-row md:flex space-x-0 md:space-x-3 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden'}`}>
-          <li><Link href="/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faHouse} className="text-md mr-2" /> Home</Link></li>
-          <li><Link href="/about" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faUser} className="text-md mr-2" /> About</Link></li>
-          <li><Link href="/contact" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faPhone} className="text-md mr-2" /> Contact</Link></li>
-          <li><Link href="/domains" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faLink} className="text-md mr-2" /> Domains</Link></li>
-          <li><Link href="https://blog.aidxn.fun/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faWordpressSimple} className="text-md mr-2" /> Blog</Link></li>
-          <li><Link href="/music" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faMusic} className="text-md mr-2" /> Music by Time</Link></li>
+    <header className="bg-gray-800 shadow-lg">
+      <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
+          aidxn.cc
+        </Link>
+        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
+          <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
+        </button>
+        <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>
+          <NavItem href="/" icon={faHouse}>Home</NavItem>
+          <NavItem href="/about" icon={faUser}>About</NavItem>
+          <NavItem href="/contact" icon={faPhone}>Contact</NavItem>
+          <NavItem href="/domains" icon={faLink}>Domains</NavItem>
+          <NavItem href="https://blog.aidxn.fun/" icon={faWordpressSimple}>Blog</NavItem>
+          <NavItem href="/music" icon={faMusic}>Music by Time</NavItem>
           <li className="flex items-center">
-            <Link href="https://tilde.club/~lxu" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all">
-              <FontAwesomeIcon icon={faTerminal} className="text-md mr-2" /> Tilde
-            </Link>
-            <a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1" target="_blank" rel="noopener noreferrer">
+            <NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
+            <a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1 text-sm" target="_blank" rel="noopener noreferrer">
               <sup>what?</sup>
             </a>
           </li>
@@ -41,4 +52,5 @@ export default function Header() {
       </nav>
     </header>
   );
-}
\ No newline at end of file
+}
+
diff --git a/app/components/pages/About.tsx b/app/components/pages/About.tsx
index a92e230..fa56b32 100644
--- a/app/components/pages/About.tsx
+++ b/app/components/pages/About.tsx
@@ -1,9 +1,13 @@
+"use client"
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 import GitHubFeatured from '../widgets/GitHubFeatured'
-import Image from 'next/image'
+import { useState } from 'react'
 
 export default function About() {
+  const [imageError, setImageError] = useState(false);
+
   return (
     <div className="max-w-2xl mx-auto text-center">
       <FontAwesomeIcon icon={faUser} className="text-6xl mb-6" />
@@ -29,10 +33,28 @@ export default function About() {
       <div className="mt-12">
         <h2 className="text-2xl font-semibold mb-4 text-gray-200">My GitHub Contributions</h2>
         <p className="text-gray-300 mb-4">You can find me on GitHub as <a href="https://github.com/ihatenodejs/" className="text-blue-400 hover:underline">ihatenodejs</a>.</p>
-        <div className="flex flex-col md:flex-row justify-center gap-4">
-          <Image src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" width={500} height={200} className="w-full md:w-1/2" />
-          <Image src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" width={500} height={200} className="w-full md:w-1/3" />
-        </div>
+        {!imageError && (
+          <div className="flex flex-col md:flex-row justify-center gap-4">
+            <img 
+              src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" 
+              alt="ihatenodejs's Stats" 
+              width={500} 
+              height={200} 
+              className="w-full md:w-1/2" 
+              onError={() => setImageError(true)}
+              loading="eager"
+            />
+            <img 
+              src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" 
+              alt="ihatenodejs's Top Languages" 
+              width={500} 
+              height={200} 
+              className="w-full md:w-1/3" 
+              onError={() => setImageError(true)}
+              loading="eager"
+            />
+          </div>
+        )}
       </div>
       <div className="mt-12">
         <h2 className="text-2xl font-semibold mb-4 text-gray-200">Featured Projects</h2>
diff --git a/app/globals.css b/app/globals.css
index ffee602..1c682be 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,16 +24,6 @@ body {
   }
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
-.transition-colors {
-  transition-property: background-color, border-color, color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -42,3 +32,16 @@ html {
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
 }
 
+@keyframes pulse-glow {
+  0%, 100% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 1);
+  }
+}
+
+.hover\:glow:hover {
+  animation: pulse-glow 2s infinite;
+}
+
diff --git a/next.config.ts b/next.config.ts
index 36604e1..fe5c876 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -22,6 +22,7 @@ const nextConfig: NextConfig = {
         pathname: '/**',
       },
     ],
+    dangerouslyAllowSVG: true,
   },
 };
 
diff --git a/package.json b/package.json
index 0b32044..aa80c4c 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,13 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "@types/node": "^20.17.12",
-    "@types/react": "^19.0.3",
+    "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-config-next": "15.1.3",
     "@eslint/eslintrc": "^3.2.0"
   },