Fix/image alt tags and general seo

components/AboutSection.vue

@@ -2,7 +2,7 @@
     <div class="text-center py-12 lg:py-28 text-base-content">
         <div class="w-full md:w-2/3 px-4 md:px-20 mx-auto">
             <h1 class="text-5xl lg:text-6xl mb-4">{{ props.title }}</h1>
-            <img class="mx-auto w-64 lg:w-80 my-14" :src="props.imagePath" />
+            <img class="mx-auto w-64 lg:w-80 my-14" :src="props.imagePath" :alt="props.imgAlt" />
             <p class="text-2xl">{{ props.description }}</p>
         </div>
 
@@ -13,6 +13,7 @@
     const props = defineProps({
         title: String,
         imagePath: String,
+        imgAlt: String,
         description: String
     })
 </script>

components/BottomNav.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="btm-nav border-t border-primary border-opacity-50">
         <ClientOnly>
-            <NuxtLink to="/" class="text-primary h-5/6 border-r">
+            <NuxtLink to="/" class="text-primary h-5/6 border-r" aria-label="Navigate to the home page">
                 <font-awesome-icon icon="fa-solid fa-house"></font-awesome-icon>
             </NuxtLink>
 
-            <NuxtLink to="/projects" class="text-primary h-5/6 border-r">
+            <NuxtLink to="/projects" class="text-primary h-5/6 border-r" aria-label="Navigate to the projects page">
                 <font-awesome-icon icon="fa-solid fa-rocket"></font-awesome-icon>
             </NuxtLink>
 
-            <NuxtLink to="/about" class="text-primary">
+            <NuxtLink to="/about" class="text-primary" aria-label="Navigate to the about page">
                 <font-awesome-icon icon="fa-solid fa-briefcase"></font-awesome-icon>
             </NuxtLink>
         </ClientOnly>

components/Footer.vue

@@ -3,9 +3,9 @@
         <div class="flex flex-col items-center text-2xl gap-4 mx-auto">
             <div class="flex flex-row gap-3">
                 <ClientOnly>
-                    <NuxtLink to="https://github.com/AbandonTech" target="_blank"><font-awesome-icon icon="fa-brands fa-github" /></NuxtLink>
-                    <NuxtLink to="mailto:[email protected]" target="_blank"><font-awesome-icon icon="fa-solid fa-envelope" /></NuxtLink>
-                    <NuxtLink to="https://discord.gg/SeQYbPt5ps" target="_blank"><font-awesome-icon icon="fa-brands fa-discord" /></NuxtLink>
+                    <NuxtLink to="https://github.com/AbandonTech" target="_blank" aria-label="Navigate to AbandonTech's Github organization"><font-awesome-icon icon="fa-brands fa-github" /></NuxtLink>
+                    <NuxtLink to="mailto:[email protected]" target="_blank" aria-label="Send an email to AbandonTech"><font-awesome-icon icon="fa-solid fa-envelope" /></NuxtLink>
+                    <NuxtLink to="https://discord.gg/SeQYbPt5ps" target="_blank" aria-label="Navigate to Discord to join AbandonTech's official Discord guild"><font-awesome-icon icon="fa-brands fa-discord" /></NuxtLink>
                 </ClientOnly>
             </div>
             <p>[email protected]</p>

components/HeroBanner.vue

@@ -7,8 +7,8 @@
                     <h1 class="hidden lg:block text-4xl lg:text-9xl mb-10">AbandonTech</h1>
                     <ClientOnly>
                         <div class="block lg:hidden w-full mx-auto mb-10">
-                            <img v-if="$colorMode.value == 'dark'" src="/img/logoVerticalColorLightText.svg">
-                            <img v-else src="/img/logoVerticalColor.svg">
+                            <img v-if="$colorMode.value == 'dark'" src="/img/logoVerticalColorLightText.svg" alt="The AbandonTech logo that depicts a sailing ship">
+                            <img v-else src="/img/logoVerticalColor.svg" alt="The AbandonTech logo that depicts a sailing ship">
                         </div>
                     </ClientOnly>
                     <div class="divider divider-primary mb-10"></div>

components/ProjectCard.vue

@@ -2,7 +2,7 @@
     <div class="bg-base-100 text-base-content flex flex-col lg:flex-row justify-center lg:justify-between items-center border border-base-content/20 rounded-2xl w-11/12 lg:w-8/12 2xl:w-1/2 h-[85vh] lg:h-80 mx-auto mt-12 p-4 lg:p-0">
         <div class="w-full lg:w-1/2">
             <h3 class="text-center text-4xl">{{ props.title }}</h3>
-            <img class="w-1/3 mx-auto mt-4" :src="props.imagePath" />
+            <img class="w-1/3 mx-auto mt-4" :src="props.imagePath" :alt="`The logo for ${props.title }`" />
         </div>
 
         <div class="flex flex-col w-full  gap-10 justify-center lg:w-1/2">

components/navbar.vue

@@ -2,7 +2,7 @@
     <div class="navbar px-7 h-20 fixed bg-primary">
         <div class="flex-1">
             <NuxtLink to="/">
-                <img class="h-8 select-none" src="/img/logoHorizontalDarkMode.svg" />
+                <img class="h-8 select-none" src="/img/logoHorizontalDarkMode.svg" alt="The AbandonTech logo that depicts a sailing ship" />
             </NuxtLink>
         </div>
 

nuxt.config.ts

@@ -20,6 +20,9 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: "AbandonTech",
+      htmlAttrs: {
+        lang: 'en',
+      }
     }
   },
 })

pages/index.vue

@@ -11,18 +11,21 @@
         hosting: {
             title: "Hosting and Management",
             imagePath: "/img/aboutHosting.svg",
+            imgAlt: "simple depiction of web servers",
             description: `We offer a variety of solutions for hosting applications and services. Whether you need a simple, 
                     static website or a complex application, our goal is to provide you with a personalized experience tailored to your needs.`
         },
         webDev: {
             title: "Web Dev",
             imagePath: "/img/aboutWebDev.svg",
+            imgAlt: "simple depiction of a web developer and a generic diagram",
             description: `Our team consists of talented developers and designers with a diverse range of skills in full-stack web development. 
                     We aim to create distinctive solutions that are specifically crafted to align with your business or personal goals.`
         },
         other: {
             title: "Anything Else",
             imagePath: "/img/aboutOther.svg",
+            imgAlt: "simple depiction of a person programming on a laptop",
             description: `Our expertise goes beyond web development and deployments. If you don't 
                     see what you need listed, please reach out to us for personalized assistance.`
         }