From a48396f1bce0e5cd1676134ab6d0441092471e9c Mon Sep 17 00:00:00 2001
From: "Wyatt J. Miller" <wyatt@wyattjmiller.com>
Date: Sun, 27 Jul 2025 00:35:01 -0400
Subject: [PATCH] adjusted the header, footer

---
 frontend/components/Footer.tsx | 82 +++++++++++++++++-----------------
 frontend/components/Header.tsx |  4 +-
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
index b4efd4e..6fba002 100644
--- a/frontend/components/Footer.tsx
+++ b/frontend/components/Footer.tsx
@@ -4,49 +4,47 @@ export default function Footer() {
   return (
     <footer class="bg-[#313244] text-[#cdd6f4] py-8 mt-auto">
       <div class="container mx-auto px-4">
-        {/* Grid layout that switches from 2 to 1 column on small screens */}
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div class="space-y-2">
-            <a
-              class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="/rss"
-            >
-              <div class="flex items-center gap-2">
-                <hi.HiOutlineRss />
-                RSS
-              </div>
-            </a>
-            <a
-              class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="/sitemap"
-            >
-              <div class="flex items-center gap-2">
-                <hi.HiOutlineMap />
-                Sitemap
-              </div>
-            </a>
-          </div>
+        {/* 2x2 grid on mobile, horizontal row on desktop - all centered */}
+        <div class="grid grid-cols-2 place-items-center md:flex md:flex-row items-center justify-center md:gap-8">
+          <a
+            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
+            href="/rss"
+          >
+            <div class="flex items-center gap-2">
+              <hi.HiOutlineRss />
+              RSS
+            </div>
+          </a>
 
-          <div>
-            <a
-              class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="/resume.pdf"
-            >
-              <div class="flex items-center gap-2">
-                <hi.HiOutlineBriefcase />
-                Resume
-              </div>
-            </a>
-            <a
-              class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="mailto:wjmiller2016@gmail.com"
-            >
-              <div class="flex items-center gap-2">
-                <hi.HiOutlineEnvelope />
-                Email me
-              </div>
-            </a>
-          </div>
+          <a
+            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
+            href="/sitemap"
+          >
+            <div class="flex items-center gap-2">
+              <hi.HiOutlineMap />
+              Sitemap
+            </div>
+          </a>
+
+          <a
+            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
+            href="/resume.pdf"
+          >
+            <div class="flex items-center gap-2">
+              <hi.HiOutlineBriefcase />
+              Resume
+            </div>
+          </a>
+
+          <a
+            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
+            href="mailto:wjmiller2016@gmail.com"
+          >
+            <div class="flex items-center gap-2">
+              <hi.HiOutlineEnvelope />
+              Email me
+            </div>
+          </a>
         </div>
 
         <div class="border-t border-gray-700 mt-8 pt-4 text-center">
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index c1d09b0..d183341 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -35,14 +35,14 @@ export default function Header() {
   return (
     <header>
       <nav>
-        <div class="bg-[#313244] flex flex-wrap justify-center space-x-6 p-4">
+        <div class="grid grid-cols-2 mt-4 place-items-center md:flex md:flex-row items-center justify-center md:gap-8">
           {headerLinks.map((l) => {
             const newTab = l.newTab ? "_blank" : "_self";
             return (
               <a
                 href={l.linkTo}
                 target={newTab}
-                class="text-[#cdd6f4] text-lg font-medium transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
+                class="text-[#cdd6f4] text-md sm:text-lg font-medium transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
               >
                 <div class="flex items-center gap-2">
                   {l.icon} {l.name}