From dee931f3a872e08b23160deebbbd7ab407768ea9 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Sat, 23 Aug 2025 23:39:05 -0400
Subject: [PATCH] better padding, bump

p-4 will now be the default for small screens (mobile devices), and p-8
for sm+ sized devices. this does not apply everywhere, like in the
TopPick.tsx component
---
 app/about/page.tsx                   | 16 ++++++++--------
 app/ai/components/AIStack.tsx        |  8 ++++----
 app/ai/components/FavoriteModels.tsx |  4 ++--
 app/ai/components/ToolReviews.tsx    |  4 ++--
 app/ai/components/TopPick.tsx        |  4 ++--
 app/page.tsx                         |  8 ++++----
 components/Header.tsx                | 13 +++++++++----
 components/widgets/NowPlaying.tsx    |  4 ++--
 package.json                         |  6 +++---
 9 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 05f223c..1414c4c 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -45,7 +45,7 @@ export default function About() {
           {mainStrings.map((section, index) => {
             if (mainSections[index] === t('about.sections.featuredProjects')) {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg lg:col-span-2 hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg lg:col-span-2 hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {section.map((text, index) => (
                     <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -57,7 +57,7 @@ export default function About() {
               )
             } else if (mainSections[index] === t('about.sections.contributions')) {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {section.map((text, index) => (
                     <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -78,7 +78,7 @@ export default function About() {
                   {!imageError && (
                     <div className="flex flex-col justify-center items-center w-full mt-4 gap-4">
                       <Image
-                        src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" 
+                        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={420}
                         height={200}
@@ -89,7 +89,7 @@ export default function About() {
                         className="max-w-full h-auto"
                       />
                       <Image
-                        src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" 
+                        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={300}
                         height={200}
@@ -105,7 +105,7 @@ export default function About() {
               )
             } else if (mainSections[index] === t('about.sections.devices')) {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {Object.entries(section).map(([key, value], index) => (
                     <div key={index}>
@@ -160,7 +160,7 @@ export default function About() {
               )
             } else if (mainSections[index] === t('about.sections.hobbies')) {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {section.map((text, index) => (
                     <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -185,7 +185,7 @@ export default function About() {
               )
             } else if (mainSections[index] === t('about.sections.projects')) {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {section.map((text, index) => (
                     <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -213,7 +213,7 @@ export default function About() {
               )
             } else {
               return (
-                <section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+                <section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
                   <h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
                   {section.map((text, index) => (
                     <p key={index} className="text-gray-300 leading-relaxed mt-2">
diff --git a/app/ai/components/AIStack.tsx b/app/ai/components/AIStack.tsx
index c24cd91..7bf51d5 100644
--- a/app/ai/components/AIStack.tsx
+++ b/app/ai/components/AIStack.tsx
@@ -8,7 +8,7 @@ interface AIStackProps {
 
 export default function AIStack({ tools }: AIStackProps) {
   const getStatusColor = (status: string) => {
-    switch(status) {
+    switch (status) {
       case 'primary': return 'text-green-400 border-green-400 bg-green-400/10'
       case 'active': return 'text-blue-400 border-blue-400 bg-blue-400/10'
       case 'occasional': return 'text-yellow-400 border-yellow-400 bg-yellow-400/10'
@@ -17,7 +17,7 @@ export default function AIStack({ tools }: AIStackProps) {
   }
 
   const getStatusLabel = (status: string) => {
-    switch(status) {
+    switch (status) {
       case 'primary': return 'Primary'
       case 'active': return 'Active Use'
       case 'occasional': return 'Occasional Use'
@@ -26,7 +26,7 @@ export default function AIStack({ tools }: AIStackProps) {
   }
 
   return (
-    <section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+    <section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
       <h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
         <Bot size={24} />
         My AI Stack
@@ -70,4 +70,4 @@ export default function AIStack({ tools }: AIStackProps) {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/app/ai/components/FavoriteModels.tsx b/app/ai/components/FavoriteModels.tsx
index 9212d0d..12ea967 100644
--- a/app/ai/components/FavoriteModels.tsx
+++ b/app/ai/components/FavoriteModels.tsx
@@ -7,7 +7,7 @@ interface FavoriteModelsProps {
 
 export default function FavoriteModels({ models }: FavoriteModelsProps) {
   return (
-    <section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+    <section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
       <h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
         <Star size={24} />
         Favorite Models
@@ -36,4 +36,4 @@ export default function FavoriteModels({ models }: FavoriteModelsProps) {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/app/ai/components/ToolReviews.tsx b/app/ai/components/ToolReviews.tsx
index 2dff2f4..88d77a5 100644
--- a/app/ai/components/ToolReviews.tsx
+++ b/app/ai/components/ToolReviews.tsx
@@ -7,7 +7,7 @@ interface ToolReviewsProps {
 
 export default function ToolReviews({ reviews }: ToolReviewsProps) {
   return (
-    <section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+    <section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
       <h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
         <MessageSquare size={24} />
         Tool Reviews
@@ -51,4 +51,4 @@ export default function ToolReviews({ reviews }: ToolReviewsProps) {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/app/ai/components/TopPick.tsx b/app/ai/components/TopPick.tsx
index 0ec8dd2..2faccd3 100644
--- a/app/ai/components/TopPick.tsx
+++ b/app/ai/components/TopPick.tsx
@@ -9,7 +9,7 @@ export default function TopPick() {
         <Trophy size={32} />
         Top Pick of 2025
       </h2>
-      <div className="p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
+      <div className="p-6 sm:p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
         <div className="grid md:grid-cols-2 gap-6">
           <div className="flex items-center gap-4">
             <SiClaude className="text-6xl text-[#c15f3c]" />
@@ -46,4 +46,4 @@ export default function TopPick() {
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index 1942c84..f40b23e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -57,7 +57,7 @@ export default function Home() {
           </div>
 
           {mainSections.map((section, secIndex) => (
-            <section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+            <section key={secIndex} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
               <h2 className="text-2xl font-semibold mb-4 text-gray-200">{section}</h2>
               {mainStrings[secIndex].map((text: string, index: number) => (
                 <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -67,7 +67,7 @@ export default function Home() {
             </section>
           ))}
 
-          <section id="contact" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+          <section id="contact" className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
             <h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.contact.title')}</h2>
             <p className="text-gray-300 mb-6">{t('home.contact.description')}</p>
             <Button
@@ -78,7 +78,7 @@ export default function Home() {
             </Button>
           </section>
 
-          <section id="donation" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
+          <section id="donation" className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
             <h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.donation.title')}</h2>
             <p className="text-gray-300 mb-6">{t('home.donation.description')}</p>
             <h4 className="text-lg font-semibold mb-2 text-gray-200">{t('home.donation.charities.title')}</h4>
@@ -129,4 +129,4 @@ export default function Home() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/Header.tsx b/components/Header.tsx
index 7898fd5..69b35df 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -134,15 +134,21 @@ export default function Header() {
   const toggleMenu = () => setIsOpen(!isOpen);
 
   return (
-    <header className="bg-gray-800 shadow-lg">
-      <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
+    <header className="bg-gray-800 relative">
+      {isOpen && (
+        <div
+          className="fixed inset-0 backdrop-blur-md z-40 lg:hidden"
+          onClick={toggleMenu}
+        />
+      )}
+      <nav className="container mx-auto px-4 py-4 flex justify-between items-center relative z-50">
         <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="lg:hidden text-gray-300 focus:outline-hidden">
           {isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
         </button>
-        <ul className={`flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 absolute lg:static bg-gray-800 lg:bg-transparent w-full lg:w-auto left-0 lg:left-auto top-16 lg:top-auto p-4 lg:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden lg:flex'}`}>
+        <ul className={`flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 absolute lg:static bg-gray-800 lg:bg-transparent w-full lg:w-auto left-0 lg:left-auto top-full lg:top-auto p-4 lg:p-0 transition-all duration-300 ease-in-out z-50 ${isOpen ? 'flex' : 'hidden lg:flex'}`}>
           <NavItem href="/" icon={House}>Home</NavItem>
           <NavItem href="/about" icon={User}>About</NavItem>
           <NavItem href="/ai" icon={Brain}>AI</NavItem>
@@ -160,4 +166,3 @@ export default function Header() {
     </header>
   );
 }
-
diff --git a/components/widgets/NowPlaying.tsx b/components/widgets/NowPlaying.tsx
index 275c125..de349b6 100644
--- a/components/widgets/NowPlaying.tsx
+++ b/components/widgets/NowPlaying.tsx
@@ -272,7 +272,7 @@ const NowPlaying: React.FC = () => {
 
   return (
     <div className="flex justify-center items-center">
-      <div className="relative w-52 h-95 bg-[#D4C29A] rounded-xs shadow-2xl border border-[#BFAF8A]">
+      <div className="relative w-52 h-95 bg-[#D4C29A] rounded-xs border border-[#BFAF8A] z-10">
         {/* Volume buttons */}
         <div className="absolute -left-[2.55px] top-8 rounded-l w-[1.75px] flex flex-col z-0">
           <div className="h-8 bg-[#BFAF8A] border-b border-[#A09070] rounded-l cursor-pointer" onClick={() => setVolume(v => Math.min(100, v + 5))}></div> {/* up */}
@@ -379,4 +379,4 @@ const NowPlaying: React.FC = () => {
   )
 }
 
-export default NowPlaying
\ No newline at end of file
+export default NowPlaying
diff --git a/package.json b/package.json
index 5aea997..5510745 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "next": "^15.5.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-i18next": "^15.7.1",
+    "react-i18next": "^15.7.2",
     "react-icons": "^5.5.0",
     "recharts": "^3.1.2",
     "tailwind-merge": "^3.3.1",
@@ -30,9 +30,9 @@
     "@eslint/eslintrc": "^3.3.1",
     "@tailwindcss/postcss": "^4.1.12",
     "@types/node": "^20.19.11",
-    "@types/react": "^19.1.10",
+    "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-config-next": "15.1.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.12",