fix: perf upgrades

Author: Rigo-m

components/PizziHeader.vue

@@ -7,22 +7,25 @@
       <NuxtLink
         to="/"
         class="pizzi-smol"
+        aria-label="Go to homepage"
       >
-        <img
+        <NuxtImg
           src="/img/pizziboi.png"
           alt="Alessandro Pizzigolotto"
-        > AP
+        /> AP
       </NuxtLink>
     </div>
     <div class="row">
       <nav>
         <NuxtLink
           :class="{ active: $route.path === '/' }"
           to="/"
+          aria-label="Go to homepage desktop"
         >home</NuxtLink>
         <NuxtLink
           :class="{ active: $route.path === '/research' }"
           to="/research"
+          aria-label="Research page"
         >research</NuxtLink>
         <a
           href="/files/Pizzigolotto_CV.pdf"
@@ -31,11 +34,13 @@
         <NuxtLink
           :class="{ active: $route.path === '/teaching' }"
           to="/teaching"
+          aria-label="Teaching page"
         >teaching</NuxtLink>
       </nav>
       <a
         href="mailto:[email protected]"
         class="mail-link"
+        aria-label="Write me an email"
       >[email protected]</a>
     </div>
   </div>

nuxt.config.ts

@@ -12,6 +12,9 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   app: {
     head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
       titleTemplate: 'Alessandro Pizzigolotto: %s',
       meta: [
         { charset: 'utf-8' },
@@ -61,4 +64,13 @@ export default defineNuxtConfig({
   gtag: {
     id: 'G-8KX8483ME2',
   },
+  image: {
+    provider: 'ipx',
+    format: ['avif', 'webp'],
+    ipx: {
+      modifiers: {
+        format: 'webp',
+      },
+    },
+  },
 })

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "build": "NITRO_PRESET=github_pages nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",

pages/index.vue

@@ -29,6 +29,9 @@
           src="/img/pizziboi.png"
           sizes="sm:23vw md:28vw lg:28vw xl:28vw"
           alt="pizziboi status symbol"
+          preload
+          placeholder
+          :modifiers="{ format: 'webp' }"
         />
       </div>
     </div>