Improve main page

app/components/content/Activity.vue

@@ -5,34 +5,24 @@ const { data: activity, refresh } = await useAsyncData<Activity>('activity', ()
 useIntervalFn(async () => await refresh(), 5000)
 const codingActivity = computed(() => activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])
 
-// eslint-disable-next-line vue/return-in-computed-property
 const getActivity = computed<CodingActivity | undefined>(() => {
   const activity = codingActivity.value
   if (!activity) return
-  switch (activity.name) {
-    case 'Visual Studio Code':
-      return {
-        active: !activity.details.includes('Idling'),
-        name: activity.name,
-        project: activity.state ? activity.state.replace('Workspace:', '') : '',
-        state: activity.details.charAt(0).toLowerCase() + activity.details.slice(1),
-        start: {
-          ago: useTimeAgo(activity.timestamps.start).value,
-          formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
-        }
-      }
-    case 'WebStorm':
-    case 'IntelliJ IDEA Ultimate':
-      return {
-        active: activity.state.toLowerCase().includes('editing'),
-        project: activity.details,
-        state: activity.state.charAt(0).toLowerCase() + activity.state.slice(1),
-        name: activity.name,
-        start: {
-          ago: useTimeAgo(activity.timestamps.start).value,
-          formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
-        }
-      }
+
+  const active = activity.name === 'Visual Studio Code' ? !activity.details.includes('Idling') : activity.state.toLowerCase().includes('editing')
+  const project = activity.state ? activity.state.replace('Workspace:', '') : ''
+  const state = activity.details.charAt(0).toLowerCase() + activity.details.slice(1)
+  const start = {
+    ago: useTimeAgo(activity.timestamps.start).value,
+    formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
+  }
+
+  return {
+    active,
+    name: activity.name,
+    project,
+    state,
+    start
   }
 })
 </script>
@@ -66,9 +56,8 @@ const getActivity = computed<CodingActivity | undefined>(() => {
         />
         <span>
           <strong>{{ getActivity.name }}</strong>.
-          I've started <strong>{{ getActivity.start.ago }}</strong>, the <strong>{{
-            getActivity.start.formated
-          }}</strong>.
+          I've started <strong>{{ getActivity.start.ago }}</strong>, the
+          <strong>{{ getActivity.start.formated }}</strong>.
         </span>
       </span>
       <div

app/components/content/CatchPhrase.vue

@@ -0,0 +1,18 @@
+<template>
+  <ClientOnly>
+    <div
+      v-if="width > 1024"
+      class="text-[12px] italic flex items-center gap-1"
+    >
+      <UIcon
+        class="transform -rotate-12"
+        name="i-ph-hand-pointing-duotone"
+      />
+      <p>Hover some of the bold text to find out more about me.</p>
+    </div>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const { width } = useWindowSize()
+</script>

app/components/content/HoverText.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineProps({
+  text: {
+    type: [String, Number],
+    required: true
+  },
+  hover: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <UTooltip :text="hover">
+    <strong class="leading-3">{{ text }}</strong>
+  </UTooltip>
+</template>

app/components/content/Quote.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="flex items-center gap-2 mt-4">
-    <div>
-      <div class="flex items-center w-12 h-12">
-        <NuxtImg
-          alt="Arthur Danjou picture"
-          class="w-full h-full"
-          src="/favicon.png"
-        />
-      </div>
+    <div class="flex items-center">
+      <UTooltip text="It's me 👋">
+        <div class="flex items-center w-12 h-12">
+          <NuxtImg
+            alt="Arthur Danjou picture"
+            class="w-full h-full"
+            src="/favicon.png"
+          />
+        </div>
+      </UTooltip>
     </div>
     <div>
       Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions,
@@ -15,6 +17,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts" setup>
-</script>

app/components/content/Stats.vue

@@ -8,10 +8,17 @@ const { data: stats } = await useFetch<Stats>('/api/stats')
   <ClientOnly>
     <p v-if="stats">
       I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-      <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.
+      <HoverText
+        :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
+        hover="That was so long ago 🫣"
+      />
+      .
+      I've coded for a total of
+      <HoverText
+        :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
+        hover="That's a lot 😮"
+      />
+      hours.
       My best editors are
       {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
       <template v-if="stats.os.data[0]">