Fix inconsistent navs, profile photo width

Author: xHayden

blog/assets/css/tailwind.css

@@ -77,6 +77,6 @@
         @apply w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2 2xl:w-2/5; 
     }
     nav a {
-        @apply text-gray-900 hover:text-gray-600 transition-colors duration-200 font-medium;
+        @apply text-gray-900 hover:text-gray-600 transition-colors duration-200;
     }
 }

src/components/hero/HeroDesktop.jsx

@@ -35,9 +35,9 @@ const HeroDesktop = () => {
           </p>
         </div>
       </div>
-      <div className="w-full flex justify-center">
+      <div className="w-max justify-self-end">
         <img
-          className="block h-auto md:max-h-[520px] w-auto max-w-full object-contain rounded mx-auto"
+          className="block h-auto md:max-h-[520px] w-auto max-w-full object-contain rounded"
           src="/photos/nJuWFumzv4.webp"
           alt="Hayden Carpenter profile photo"
         />

src/components/layouts/DesignLayout.jsx

@@ -20,16 +20,16 @@ const DesignLayout = () => {
         )}
       >
         <div className="flex w-full md:justify-end sticky right-0 top-0 px-4 md:px-12 py-4 z-10 bg-white">
-          <nav className="flex items-center w-full text-black justify-end gap-6">
-            <div className="flex gap-6">
+          <nav className="flex items-center w-full text-black justify-end gap-4">
+            <div className="flex gap-4">
               <a href="/blog/" className="hover:opacity-50 transition-opacity">
                 Blog
               </a>
               <a
                 href="/blog/about/"
                 className="hover:opacity-50 transition-opacity"
               >
-                About Me
+                About
               </a>
               <a
                 href="/blog/contact/"