Fix: Performance/SEO issues | Images and Links

AE517 · Oct 1, 2024 · f5d4cb3 · f5d4cb3
2 parents cbd0206 + 8b18c50
commit f5d4cb3
Show file tree

Hide file tree

Showing 8 changed files with 926 additions and 821 deletions.
diff --git a/components/BentoImages.vue b/components/BentoImages.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="image" class="size-full animate-fade-up rounded-lg" :class="`animate-delay-${200 * props.index}`">
-    <img :src="props.source" loading="lazy" class="size-full rounded-lg" />
+    <NuxtImg :src="props.source" class="size-full rounded-lg" alt="gallery-image-preview.webp" />
   </div>
 </template>
 

diff --git a/components/Socials.vue b/components/Socials.vue
@@ -9,15 +9,15 @@
       class="rounded-xl border-2 border-sundress p-2"
       :href="item.link"
       target="_blank"
+      :aria-label="item.name"
     >
       <Icon :name="`mdi:${item.name}`" :size="props.size" color="#EBCA89" />
     </a>
   </div>
 </template>
 
 <script setup lang="ts">
-
-const props = defineProps(['size'])
+const props = defineProps(['size']);
 
 const socials: Array<{ name: string; link: string }> = [
   { name: 'github', link: 'https://github.com/guilherme-hja' },

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -12,11 +12,17 @@ export default defineNuxtConfig({
       wrapperStyle: true,
     },
   },
+  image: {
+    inject: true
+  },
   app: {
     head: {
       charset: 'utf-8',
       viewport: 'width=device-width, initial-scale=1',
       link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
+      htmlAttrs: {
+        lang: 'en',
+      },
     },
     // layoutTransition: {
     //   name: 'layout',

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@nuxt/image": "^1.7.0",
+    "@nuxt/image": "^1.8.0",
     "fast-xml-parser": "^4.4.1",
     "nuxt": "^3.11.2",
     "octokit": "^4.0.2",

diff --git a/pages/about.vue b/pages/about.vue
@@ -5,7 +5,7 @@
         <section id="profile" class="flex animate-fade-up flex-col gap-y-5 animate-delay-500">
           <div id="profile-picture">
             <figure id="picture-image" class="flex justify-center">
-              <img
+              <NuxtImg
                 class="aspect-square rounded-md transition-all sm:max-lg:size-3/5 lg:size-2/3"
                 src="/assets/images/profile.webp"
                 alt="Guilherme-profile-picture"

diff --git a/pages/gallery.vue b/pages/gallery.vue
@@ -6,7 +6,12 @@
         <div class="flex animate-fade-right flex-col justify-evenly gap-5 animate-delay-[1000ms] lg:flex-row">
           <div id="greet-images" class="flex flex-col gap-5 sm:flex-row">
             <figure>
-              <img class="rounded-md transition-all" loading="lazy" src="/art/1.webp" alt="Facade of Ambitious Ego" />
+              <NuxtImg
+                class="rounded-md transition-all"
+                loading="lazy"
+                src="/art/1.webp"
+                alt="Facade of Ambitious Ego"
+              />
               <figcaption class="mt-1 text-center text-lg font-semibold">
                 Facade of Ambitious Ego -
                 <a
@@ -18,7 +23,12 @@
               </figcaption>
             </figure>
             <figure>
-              <img class="rounded-md transition-all" loading="lazy" src="/art/4.webp" alt="The Eternity Traveller" />
+              <NuxtImg
+                class="rounded-md transition-all"
+                loading="lazy"
+                src="/art/4.webp"
+                alt="The Eternity Traveller"
+              />
               <figcaption class="mt-1 text-center text-lg font-semibold">
                 The Eternity Traveller -
                 <a
@@ -64,35 +74,35 @@
         <section id="gallery-images">
           <div class="flex size-full flex-row flex-wrap justify-evenly gap-5 *:max-w-[320px] *:text-lg">
             <figure>
-              <img class="rounded-md" src="/art/6.webp" alt="Never-Lost Pride - Alf" />
+              <NuxtImg class="rounded-md" src="/art/6.webp" alt="Never-Lost Pride - Alf" />
               <figcaption class="mt-1 text-center font-semibold">Never-Lost Pride - Alf</figcaption>
             </figure>
             <figure>
-              <img class="rounded-md" src="/art/5.webp" alt="Invi" />
+              <NuxtImg class="rounded-md" src="/art/5.webp" alt="Invi" />
               <figcaption class="mt-1 text-center font-semibold">Invi</figcaption>
             </figure>
             <figure>
-              <img class="rounded-md" src="/art/3.webp" alt="Jotunn" />
+              <NuxtImg class="rounded-md" src="/art/3.webp" alt="Jotunn" />
               <figcaption class="mt-1 text-center font-semibold">Memoir of Countless Origins - Jötunn</figcaption>
             </figure>
             <figure>
-              <img class="rounded-md" src="/art/8.webp" alt="Invi" />
+              <NuxtImg class="rounded-md" src="/art/8.webp" alt="Invi" />
               <figcaption class="mt-1 text-center font-semibold">Berand</figcaption>
             </figure>
             <figure>
-              <img class="rounded-md" src="/art/9.webp" alt="Invi" />
+              <NuxtImg class="rounded-md" src="/art/9.webp" alt="Invi" />
               <figcaption class="mt-1 text-center font-semibold">Dumiurgis</figcaption>
             </figure>
           </div>
         </section>
         <section id="gallery-animations">
           <div class="flex flex-col justify-center gap-5 lg:flex-row">
             <figure>
-              <img class="rounded-md" src="/art/7.webp" alt="Project SIGNUS" />
+              <NuxtImg class="rounded-md" src="/art/7.webp" alt="Project SIGNUS" />
               <figcaption class="mt-1 text-center font-semibold">Project SIGNUS</figcaption>
             </figure>
             <figure>
-              <img class="rounded-md" src="/art/11.webp" alt="Project SIGNUS" />
+              <NuxtImg class="rounded-md" src="/art/11.webp" alt="Project SIGNUS" />
               <figcaption class="mt-1 text-center font-semibold">
                 <strong>Project SIGNUS</strong> - Hidden Files
               </figcaption>

diff --git a/pages/index.vue b/pages/index.vue
@@ -21,7 +21,7 @@
         class="animate-delay-50 relative animate-fade-down overflow-hidden lg:col-start-1 lg:row-start-2"
       >
         <div id="logo" class="absolute z-10 flex size-full items-center justify-center bg-midnight">
-          <img src="/G.svg" alt="guilherme-araujo-logo" class="size-full" />
+          <NuxtImg src="/G.svg" loading="lazy" alt="guilherme-araujo-logo" class="size-full" />
         </div>
       </div>
       <div id="tech-stack" class="animate-fade-left animate-delay-200 lg:col-span-2 lg:row-start-2">