From 998d788cefb053bca82e6174da1b3ee549ba7f5f Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 15 Jan 2024 10:57:01 +0100
Subject: [PATCH] refactor: update mobile-nav, projects-item, timeline, and
 tools-item components

---
 src/lib/components/site/nav/mobile-nav.svelte         | 1 +
 src/lib/components/site/projects/projects-item.svelte | 2 +-
 src/lib/components/site/timeline/timeline.svelte      | 2 +-
 src/lib/components/site/tools/tools-item.svelte       | 8 +++++---
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/site/nav/mobile-nav.svelte b/src/lib/components/site/nav/mobile-nav.svelte
index 21bf5ac..e04e153 100644
--- a/src/lib/components/site/nav/mobile-nav.svelte
+++ b/src/lib/components/site/nav/mobile-nav.svelte
@@ -23,6 +23,7 @@
 	</Sheet.Trigger>
 	<Sheet.Content side="right" class="pr-0">
 		<MobileLink href="/" class="flex items-center" bind:open>
+			<span class="sr-only">Return to home</span>
 			<img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" />
 			<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
 		</MobileLink>
diff --git a/src/lib/components/site/projects/projects-item.svelte b/src/lib/components/site/projects/projects-item.svelte
index c2c23fc..99eec1d 100644
--- a/src/lib/components/site/projects/projects-item.svelte
+++ b/src/lib/components/site/projects/projects-item.svelte
@@ -12,7 +12,7 @@
 <Card.Root class="hover:bg-muted/50">
 	<Card.Header class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
 		<div class="space-y-1">
-			<Card.Title>{title}</Card.Title>
+			<Card.Title tag="h2">{title}</Card.Title>
 			<Card.Description>
 				{description}
 			</Card.Description>
diff --git a/src/lib/components/site/timeline/timeline.svelte b/src/lib/components/site/timeline/timeline.svelte
index 6f52196..4841f3b 100644
--- a/src/lib/components/site/timeline/timeline.svelte
+++ b/src/lib/components/site/timeline/timeline.svelte
@@ -6,7 +6,7 @@
 
 <Card.Root>
 	<Card.Header class="pb-3">
-		<Card.Title>Timeline</Card.Title>
+		<Card.Title tag="h2">Timeline</Card.Title>
 		<Card.Description>
 			A time-based overview showcasing when I embarked on projects, jobs, certifications, and
 			various events.
diff --git a/src/lib/components/site/tools/tools-item.svelte b/src/lib/components/site/tools/tools-item.svelte
index 0f78b2a..645dcfb 100644
--- a/src/lib/components/site/tools/tools-item.svelte
+++ b/src/lib/components/site/tools/tools-item.svelte
@@ -8,10 +8,12 @@
 
 <Card.Root class="mb-4 inline-block h-full w-full hover:bg-muted/50">
 	<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-1">
-		<Card.Title>
-			<h4 class="text-2xl font-bold">{name}</h4>
+		<div>
+			<Card.Title tag="h2" class="text-2xl font-bold">
+				{name}
+			</Card.Title>
 			<span class="text-sm font-medium">{tagLine}</span>
-		</Card.Title>
+		</div>
 		{#if enhanced}
 			<enhanced:img
 				src={logo}