accesibility and performance improvements

components/ProjectCard.vue

@@ -12,10 +12,10 @@ export default {
 			<Icon size="64"
 				class="text-[#00FFC2]"
 				:name="headerIcon" />
-			<div role="links"
+			<div class="ml-auto flex">
-				class="ml-auto flex">
 				<a v-if="githubLink"
 					:href="githubLink"
+					:aria-label="`${name}'s Gtihub`"
 					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
 					<Icon size="38"
 						name="tabler:brand-github" />
@@ -28,7 +28,7 @@ export default {
 				</a>
 			</div>
 		</div>
-		<h4 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h4>
+		<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
 		<div id="body"
 			class="mb-4">
 			<slot />

nuxt.config.ts

@@ -12,7 +12,10 @@ export default defineNuxtConfig({
 
 				// hid is used as unique identifier. Do not use `vmid` for it as it will not work
 				{ hid: 'description', name: 'description', content: 'Juls07 is a fullstack web developer' }
-			]
+			],
+			htmlAttrs: {
+				lang: 'en'
+			}
 		},
 	},
 

pages/index.vue

@@ -6,19 +6,24 @@
 				class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
 				<div
 					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
-					<img alt="juls07 profile picture"
+					<nuxt-img alt="juls07 profile picture"
-						src="~/assets/images/juls07.png"
+						src="/images/juls07.png"
+						sizes="128px md:160px"
 						class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
 					<div class="grid grid-rows-5 grid-cols-1 h-fit">
 						<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
 						<p class="text-[#00FFC2] row-span-2 md:text-lg h-fit">
-							<span class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">{{ tagLine }}</span>
+							<span
+								class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">
+								{{ tagLine }}
+							</span>
 						</p>
 					</div>
 				</div>
 			</div>
 		</header>
-		<main id="main" class="grid grid-cols-12 gap-5 justify-center">
+		<main id="main"
+			class="grid grid-cols-12 gap-5 justify-center">
 			<section
 				class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 				<h2 class="md:text-4xl text-3xl mb-1">About me</h2>