Workign on activity and on stats

app/components/AppFooter.vue

@@ -20,7 +20,7 @@ const socials = [
 
 <template>
   <footer class="mb-16">
-    <div class="flex justify-center my-8">
+    <div class="flex justify-center mb-8">
       <UDivider
         class="md:w-2/3"
         size="2xs"

app/components/content/Activity.vue

@@ -1,42 +1,3 @@
-<template>
-  <div
-    v-if="codingActivity"
-    class="mb-4"
-  >
-    <div
-      v-if="codingActivity"
-      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-7"
-        />
-      </UTooltip>
-      <p v-if="codingActivity.state.toLowerCase().includes('editing')">
-        I'm actually working on <strong>{{ codingActivity.details }}</strong>, {{ codingActivity.state.toLowerCase() }}
-        using <strong>{{ codingActivity.name }}</strong>.
-        I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
-        <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
-      </p>
-      <p v-else>
-        I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
-      </p>
-    </div>
-    <div
-      v-else
-      class="flex items-center gap-2"
-    >
-      <UTooltip text="I'm offline 🫥">
-        <div class="h-3 w-3 inline-flex rounded-full bg-red-500" />
-      </UTooltip>
-      <p>
-        I'm currently offline. Come back later to see what I'm working on.
-      </p>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { type Activity, IDEs } from '~~/types'
 
@@ -49,3 +10,37 @@ function formatDate(date: number) {
 
 useIntervalFn(async () => await refresh(), 5000)
 </script>
+
+<template>
+  <div
+    v-if="codingActivity"
+    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-7"
+      />
+    </UTooltip>
+    <p v-if="codingActivity.state.toLowerCase().includes('editing')">
+      I'm actually working on <strong>{{ codingActivity.details }}</strong>, {{ codingActivity.state.toLowerCase() }}
+      using <strong>{{ codingActivity.name }}</strong>.
+      I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
+      <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
+    </p>
+    <p v-else>
+      I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
+    </p>
+  </div>
+  <div
+    v-else
+    class="flex items-center gap-2"
+  >
+    <UTooltip text="I'm offline 🫥">
+      <div class="h-3 w-3 inline-flex rounded-full bg-red-500" />
+    </UTooltip>
+    <p>
+      I'm currently offline. Come back later to see what I'm working on.
+    </p>
+  </div>
+</template>

app/components/content/Stats.vue

@@ -11,9 +11,10 @@ const stats = await $fetch<Stats>('/api/stats')
   >
     <p>
       I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-      {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}.
-      I've coded for a total of
-      {{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours.
+      <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
+      I've coded for a total of <strong>{{
+        usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+      }}</strong> hours.
       My best editors are
       {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
       My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).

content/index.md

@@ -18,4 +18,5 @@ I'm **constantly** learning new things, from technology to finance and entrepren
 As well as programming, I enjoy **sport** and **travelling**. My passion, commitment and eagerness to learn and progress are the qualities that enable me to succeed in my **career** and **studies**.
 
 :stats
+
 :activity