Improve main page

app/components/AppFooter.vue

@@ -34,7 +34,7 @@ const socials = [
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
         <h1>Find me on:</h1>
-        <div class="flex gap-4">
+        <div class="flex gap-4 flex-wrap">
           <HomeLink
             v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
             :key="social.label"

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]">

content/index.md

@@ -1,6 +1,9 @@
 Hey, I'm Arthur Danjou, a mathematics student at the Paris-Saclay Faculty of Science in France.
 
-With a **deep understanding of emerging technologies**, I'm at the heart of a rapidly expanding field. My background in **mathematics** gives me a head start in understanding the concepts and theories behind these **technologies** and in designing them effectively.
+With a **deep understanding of emerging technologies**, I'm at the heart of a rapidly expanding field. My background
+in :hover-text{hover="Maths is my main passion ∑" text="mathematics"} gives me a head start in understanding the
+concepts and theories behind these :hover-text{hover="My second passion 📱" text="technologies"} and in designing them
+effectively.
 
 As a software engineer and mathematics student, my **expertise** covers
 :prose-icon[TypeScript]{icon="i-logos:typescript-icon"},
@@ -17,12 +20,16 @@ I also learned other important technologies, such as
 :prose-icon[MySQL]{icon="i-logos:mysql-icon"} and
 :prose-icon[Git]{icon="i-logos:git-icon"} to **improve** and **complete** my knowledge.
 
-I'm **constantly** learning new things, from technology to finance and entrepreneurship. I love **sharing** my knowledge and learning new theorems and technologies. I'm a **curious** person and eager to continue learning and growing throughout my life.
+I'm :hover-text{hover="As tech is always evolving, I need to be up-to-date 🖥️" text="constantly"} learning new things,
+from technology to finance and entrepreneurship. I love :hover-text{hover="I love sharing my knowledge and helping
+others 🫂" text="sharing"} my knowledge and learning new theorems and technologies. I'm a **curious** person and eager to
+continue learning and growing throughout my life.
 
-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**.
+As well as programming, I enjoy :hover-text{hover="Sport allows me to burn off energy 🏋️‍♂️" text="sport"} and :
+hover-text{hover="Travelling frees me and gets me away from it all ✈️" text="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
-
-:quote
+:quote
+:catch-phrase