From 28f6495326f730763d88f918b24568b262841b5c Mon Sep 17 00:00:00 2001
From: ethanfox <ethanj.fx@gmail.com>
Date: Thu, 25 Jul 2024 07:53:42 -0500
Subject: [PATCH] Fixed About Overlay Styling, Updated Mobile Nav Links

---
 src/components/AboutOverlay.vue | 10 +++++-----
 src/components/Navigation.vue   | 17 ++++++++---------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/AboutOverlay.vue b/src/components/AboutOverlay.vue
index d7eaa5d..d335828 100644
--- a/src/components/AboutOverlay.vue
+++ b/src/components/AboutOverlay.vue
@@ -34,7 +34,7 @@
             </p>
           </div>
           <div class="flex flex-col gap-4 w-full px-2 md:px-8">
-            <p class="text-lg font-semibold text-neutral-950">
+            <p class="text-lg text-left font-semibold text-neutral-950">
               To learn more about me:
             </p>
             <div class="flex flex-col lg:flex-row gap-4">
@@ -42,12 +42,12 @@
                 <img
                   src="../assets/user.svg"
                   alt="Search"
-                  class="h-8 mx-auto my-auto object-contain rounded-l-sm"
+                  class="size-8 mx-auto my-auto object-contain rounded-l-sm"
                 />
                 <a
                   href="https://www.ethanjamesfox.com"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >Visit my website</a
                 >
               </div>
@@ -60,7 +60,7 @@
                 <a
                   href="https://github.com/ethanfox"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >View Github Profile</a
                 >
               </div>
@@ -73,7 +73,7 @@
                 <a
                   href="https://www.linkedin.com/in/ethanjamesfox/"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >Connect on LinkedIn</a
                 >
               </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index c262a7a..6268692 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -57,27 +57,26 @@
           class="h-full w-32 object-cover rounded-l-sm"
         />
       </a>
-      <div
-        class="w-full justify-between flex border border-neutral-200 hover:bg-neutral-200 transition-all"
-      >
+      <div class="w-full justify-between flex border border-neutral-200">
         <a
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 object-center w-full h-full text-center flex content-center transition-all"
           href="https://www.artic.edu/visit"
           target="_blank"
-          rel="noopener noreferrer"
         >
           <span class="mx-auto my-auto">Visit</span>
         </a>
-        <a
-          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center"
+        <button
+          @click="aboutButtonClicked"
+          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center hover:bg-neutral-200 transition-all"
           href="/about"
-          ><span class="mx-auto my-auto">About</span></a
         >
+          <span class="mx-auto my-auto">About</span>
+        </button>
       </div>
 
       <button
-        @click="buttonClicked"
-        class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center"
+        @click="searchButtonClicked"
+        class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center hover:bg-neutral-200 transition-all"
         href="/about"
       >
         <img