From 4a20fa8b27e50d59a8180458fcaf60178bf8180c Mon Sep 17 00:00:00 2001
From: juls0730 <juliangarner240@gmail.com>
Date: Sun, 18 Dec 2022 00:08:34 -0600
Subject: [PATCH] accesibility and performance improvements

---
 components/ProjectCard.vue           |   6 +++---
 nuxt.config.ts                       |   7 +++++--
 pages/index.vue                      |  13 +++++++++----
 {assets => public}/images/juls07.png | Bin
 4 files changed, 17 insertions(+), 9 deletions(-)
 rename {assets => public}/images/juls07.png (100%)

diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index a0ab8e3..7200395 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -12,10 +12,10 @@ export default {
 			<Icon size="64"
 				class="text-[#00FFC2]"
 				:name="headerIcon" />
-			<div role="links"
-				class="ml-auto flex">
+			<div 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 />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7ef72d5..9b63e18 100644
--- a/nuxt.config.ts
+++ b/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'
+			}
 		},
 	},
 
@@ -37,7 +40,7 @@ export default defineNuxtConfig({
 		}
 	},
 
-	content: {		
+	content: {
 		highlight: {
 			theme: {
 				default: 'github-dark'
diff --git a/pages/index.vue b/pages/index.vue
index 78b80a2..84d1b32 100644
--- a/pages/index.vue
+++ b/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"
-						src="~/assets/images/juls07.png"
+					<nuxt-img alt="juls07 profile picture"
+						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>
diff --git a/assets/images/juls07.png b/public/images/juls07.png
similarity index 100%
rename from assets/images/juls07.png
rename to public/images/juls07.png