Implement blog

app/components/AppHeader.vue

@@ -31,10 +31,13 @@ const navs = [
 </script>
 
 <template>
-  <header class="flex justify-between my-8">
-    <div>
-      Logo
-    </div>
+  <header class="flex items-center justify-between my-8">
+    <NuxtLink
+      class="handwriting text-3xl flex gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
+      to="/"
+    >
+      Arthur Danjou
+    </NuxtLink>
     <nav class="flex gap-2 items-center">
       <div
         v-for="nav in navs"
@@ -62,15 +65,13 @@ const navs = [
             @click="isDark = !isDark"
           />
         </UTooltip>
-        <UTooltip text="open menu">
-          <UButton
-            color="gray"
-            icon="i-ph-command-duotone"
-            size="sm"
-            variant="link"
-          />
-        </UTooltip>
       </ClientOnly>
     </nav>
   </header>
 </template>
+
+<style>
+.handwriting {
+  font-family: 'Dancing Script', cursive;
+}
+</style>

app/components/AppTitle.vue

@@ -18,7 +18,7 @@ defineProps({
     >
       {{ title }}
     </h1>
-    <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
+    <p class="mt-6 text-base">
       {{ description }}
     </p>
   </div>

app/components/content/Activity.vue

@@ -17,10 +17,16 @@ useIntervalFn(async () => await refresh(), 5000)
     class="flex items-start gap-2"
   >
     <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
-      <div
-        :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
-        class="h-3 w-3 inline-flex rounded-full cursor-help mt-2"
-      />
+      <div class="relative flex h-3 w-3 mt-2">
+        <div
+          v-if="codingActivity.state.toLowerCase().includes('editing')"
+          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
+        />
+        <div
+          :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
+          class="relative inline-flex rounded-full h-3 w-3"
+        />
+      </div>
     </UTooltip>
     <span v-if="codingActivity.state.toLowerCase().includes('editing')">
       I'm actually working on <strong>{{ codingActivity.details }}</strong>,

app/components/uses/Item.vue

@@ -15,7 +15,7 @@ defineProps({
     <p class="text-base font-semibold text-black dark:text-white">
       {{ item.name }}
     </p>
-    <p class="text-sm text-gray-600 dark:text-gray-400">
+    <p class="text-sm">
       {{ item.description }}
     </p>
   </li>