From 1a01fa927a78fe139e2ca2670f0144789761bd32 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Mon, 18 Dec 2023 12:52:48 +0200
Subject: [PATCH] chore: write a bit more semantic markup

---
 components/been-working-with.vue |  2 +-
 components/connect.vue           |  2 +-
 components/footer.vue            |  2 +-
 components/introduction.vue      | 10 +++++-----
 components/personal-projects.vue |  2 +-
 components/project.vue           |  2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/been-working-with.vue b/components/been-working-with.vue
index 5860797..47096b7 100644
--- a/components/been-working-with.vue
+++ b/components/been-working-with.vue
@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5">
+  <UContainer class="flex flex-col gap-5" as="section">
     <div class="text-sm text-gray-500">Been working with</div>
     <Company logo="celonis-logo.webp" href="https://celonis.com">
       <template v-slot:title>Celonis</template>
diff --git a/components/connect.vue b/components/connect.vue
index 50ebcef..b704513 100644
--- a/components/connect.vue
+++ b/components/connect.vue
@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5">
+  <UContainer class="flex flex-col gap-5" as="section">
     <div class="text-sm text-gray-500">Let's connect</div>
 
     <div class="flex gap-4 overflow-x-auto">
diff --git a/components/footer.vue b/components/footer.vue
index ff8c6a2..1e27057 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -3,7 +3,7 @@ const currentYear = new Date().getFullYear();
 </script>
 
 <template>
-  <UContainer class="flex flex-col gap-5">
+  <UContainer class="flex flex-col gap-5" as="footer">
     <div class="text-sm text-gray-400">
       © Marios Antonoudiou {{ currentYear }} - 🏛️ Athens, Greece
     </div>
diff --git a/components/introduction.vue b/components/introduction.vue
index 0c79489..4798c86 100644
--- a/components/introduction.vue
+++ b/components/introduction.vue
@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col md:gap-12 gap-5">
+  <UContainer class="flex flex-col md:gap-12 gap-5" as="header">
     <nuxt-img
       placeholder
       alt="Marios Antonoudiou"
@@ -8,7 +8,7 @@
       height="64"
       class="w-16 h-16 rounded-full border dark:border-gray-800 dark:bg-slate-300"
     />
-    <div class="md:text-xl text-lg font-semibold">
+    <h1 class="md:text-xl text-lg font-semibold">
       <ULink
         class="text-blue-500 dark:text-blue-300 hover:underline hover:underline-offset-4"
         to="mailto:mariosant@sent.com"
@@ -21,13 +21,13 @@
         class="text-green-500 dark:text-green-300 hover:underline hover:underline-offset-4"
         >Celonis</ULink
       >.
-    </div>
-    <div class="text-gray-800 dark:text-gray-200">
+    </h1>
+    <p class="text-gray-800 dark:text-gray-200">
       <span class="font-semibold">Full-stack</span> software engineer in the
       <span class="font-semibold">Javascript ecosystem</span>, with a focus on
       building enterprise apps, work with streaming data, and adept at
       structuring solutions for challenging problems. Well-versed in a wide
       range of technologies.
-    </div>
+    </p>
   </UContainer>
 </template>
diff --git a/components/personal-projects.vue b/components/personal-projects.vue
index e04628e..51ceae1 100644
--- a/components/personal-projects.vue
+++ b/components/personal-projects.vue
@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5">
+  <UContainer class="flex flex-col gap-5" as="section">
     <div class="text-sm text-gray-500">Personal projects</div>
 
     <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
diff --git a/components/project.vue b/components/project.vue
index b2c9bdb..15706d0 100644
--- a/components/project.vue
+++ b/components/project.vue
@@ -11,7 +11,7 @@ const props = defineProps<Props>();
 
 <template>
   <div
-    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
+    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-400"
   >
     <ULink :to="props.url" target="_blank">
       <NuxtImg