feat: add dark mode

app.vue

@@ -8,6 +8,12 @@ useSeoMeta({
     "An experienced software engineer. Enabling teams and crafting user interfaces at Celonis",
   twitterCard: "summary_large_image",
 });
+
+useHead({
+  bodyAttrs: {
+    class: "dark:bg-slate-900",
+  },
+});
 </script>
 <template>
   <Introduction />

components/been-working-with.vue

@@ -8,7 +8,7 @@
       </template>
     </Company>
 
-    <Company logo="chat-engineers-logo.webp" href="https://chatengineers.com">
+    <Company logo="chat-engineers-logo.png" href="https://chatengineers.com">
       <template v-slot:title>Chat Engineers</template>
       <template v-slot:description>
         Apps and customization for the Livechat platform

components/company.vue

@@ -14,6 +14,7 @@ const props = defineProps<Props>();
         placeholder
         :src="props.logo"
         class="block rounded min-w-[50px]"
+        format="webp"
         height="50"
         width="50"
         fit="outside"
@@ -23,7 +24,7 @@ const props = defineProps<Props>();
       <NuxtLink
         :href="props.href"
         target="_blank"
-        class="text-xl font-semibold hover:underline hover:underline-offset-4"
+        class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
       >
         <slot name="title">Company</slot>
       </NuxtLink>

components/introduction.vue

@@ -5,11 +5,11 @@
       src="mariosant.webp"
       width="64"
       height="64"
-      class="w-16 h-16 rounded-full border"
+      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">
       <ULink
-        class="text-blue-500 hover:underline hover:underline-offset-4"
+        class="text-blue-500 dark:text-blue-300 hover:underline hover:underline-offset-4"
         to="mailto:mariosant@sent.com"
         >Marios Antonoudiou</ULink
       >, an experienced software engineer.<br />
@@ -17,7 +17,7 @@
       <ULink
         to="https://celonis.com"
         target="_blank"
-        class="text-green-500 hover:underline hover:underline-offset-4"
+        class="text-green-500 dark:text-green-300 hover:underline hover:underline-offset-4"
         >Celonis</ULink
       >.
     </div>