Working on site

app/components/AppHeader.vue

@@ -5,6 +5,7 @@ watch(isDark, () => {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 })
 
+const { cloud } = useRuntimeConfig()
 const navs = [
   {
     label: 'home',
@@ -23,7 +24,7 @@ const navs = [
   },
   {
     label: 'resume',
-    to: 'https://cvws.icloud-content.com/B/AX71VtCX0vhZs6_jUHDuotOGnb0VAQE4MV8KB7QIeY5Q5Gik5J1erx4y/CV+English.pdf?o=AkIvC5IrO-5fS21fwPXq7UGd0lswyMuXT-P7E5CowQQ0&v=1&x=3&a=CAogqklcIUioRMDFGNGnrRfaDkS9YEmojlUNZ6rG0QyMiuwSbxDU2oOLhDIY1LffjIQyIgEAUgSGnb0VWgRerx4yaieUQJCUnGaHq9iuUS1_UtlGN8Ioa3fXnJFInkj9n6PaXX4XnUO2y_ByJ8VXz1TffVsstlH_R9jT0WX2nkZVem0ZdiIZue6zB1iI0RG7vslM9A&e=1719087389&fl=&r=76b32fd5-6d83-4903-83a5-2ab70677813b-1&k=_NuEhyMkXeSuqqVw_4seIg&ckc=com.apple.clouddocs&ckz=com.apple.CloudDocs&p=160&s=j5LuqIi_tMAZoyRrQVfV3PNfcjI&cd=i',
+    to: '',
     target: '_blank',
     icon: 'i-ph-address-book-duotone'
   }

app/components/content/Activity.vue

@@ -1,43 +1,87 @@
 <script lang="ts" setup>
-import { type Activity, IDEs } from '~~/types'
+import { type Activity, type CodingActivity, IDEs } from '~~/types'
 
 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
 useIntervalFn(async () => await refresh(), 5000)
 const codingActivity = computed(() => activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])
 
-function formatDate(date: number) {
+// eslint-disable-next-line vue/return-in-computed-property
-  return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}`
+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}`
+        }
+      }
+  }
+})
 </script>
 
 <template>
-  <p
+  <div
-    v-if="codingActivity"
+    v-if="getActivity"
     class="flex items-start gap-2"
   >
-    <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
+    <UTooltip :text="getActivity.active ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
       <div class="relative flex h-3 w-3 mt-2">
         <div
-          v-if="codingActivity.state.toLowerCase().includes('editing')"
+          v-if="getActivity.active"
           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="getActivity.active ? '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')">
+    <span
-      I'm actually working on <strong>{{ codingActivity.details }}</strong>,
+      v-if="getActivity.active"
-      {{ codingActivity.state.charAt(0).toLowerCase() + codingActivity.state.slice(1) }}.
+      class="space-x-1"
-      using <strong>{{ codingActivity.name }}</strong>.
+    >
-      I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
+      <span>I'm actually working on <strong>{{ getActivity.project }}</strong>, {{ getActivity.state }}, using</span>
-      <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
+      <UIcon
+        :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+        size="16"
+      />
+      <span>
+        <strong>{{ getActivity.name }}</strong>.
+        I've started <strong>{{ getActivity.start.ago }}</strong>, the <strong>{{ getActivity.start.formated }}</strong>.
+      </span>
     </span>
-    <span v-else>
+    <div
-      I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
+      v-else
-    </span>
+      class="space-x-1"
-  </p>
+    >
+      <span>I'm Idling on my computer with</span>
+      <UIcon
+        :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+        size="20"
+      />
+      <span>
+        <strong>{{ getActivity.name }}</strong> running in background.
+      </span>
+    </div>
+  </div>
   <div
     v-else
     class="my-5 flex md:items-start gap-2"

app/components/content/ProseIcon.vue

@@ -12,7 +12,6 @@ defineProps({
     <UIcon
       class="mb-1 mr-1"
       :name="icon"
-      :dynamic="true"
     />
     <span class="sofia font-medium underline decoration-neutral-300 dark:decoration-neutral-700">
       <slot />

app/components/content/Stats.vue

@@ -5,18 +5,20 @@ const { data: stats } = await useFetch<Stats>('/api/stats')
 </script>
 
 <template>
-  <p v-if="stats">
+  <ClientOnly>
-    I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
+    <p v-if="stats">
-    <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
+      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-    I've coded for a total of <strong>{{
+      <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
-      usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+      I've coded for a total of <strong>{{
-    }}</strong> hours.
+        usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
-    My best editors are
+      }}</strong> hours.
-    {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
+      My best editors are
-    <template v-if="stats.os.data[0]">
+      {{ 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 }}%).
+      <template v-if="stats.os.data[0]">
-    </template>
+        My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
-    My top languages are
+      </template>
-    {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
+      My top languages are
-  </p>
+      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
+    </p>
+  </ClientOnly>
 </template>

nuxt.config.ts

@@ -80,6 +80,9 @@ export default defineNuxtConfig({
       editors: '',
       languages: '',
       os: ''
+    },
+    cloud: {
+      resume: ''
     }
   }
 })

package.json

@@ -22,15 +22,15 @@
     "nuxt": "^3.12.2"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^1.3.6",
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxt/ui": "^2.17.0",
-    "@types/node": "^20.14.6",
+    "@types/node": "^20.14.8",
     "@vueuse/core": "^10.11.0",
     "@vueuse/nuxt": "^10.11.0",
     "eslint": "^9.5.0",
     "typescript": "^5.5.2",
-    "vue-tsc": "^2.0.21",
+    "vue-tsc": "^2.0.22",
     "wrangler": "^3.61.0"
   }
 }

types.ts

@@ -41,12 +41,23 @@ export interface Activity {
 }
 
 export const IDEs = [
-  { name: 'Visual Studio Code', icon: 'i-skill-icons-vscode-light' },
+  { name: 'Visual Studio Code', icon: 'i-logos-visual-studio-code' },
-  { name: 'IntelliJ IDEA Ultimate', icon: 'i-skill-icons-idea-light' },
+  { name: 'IntelliJ IDEA Ultimate', icon: 'i-logos-intellij-idea' },
-  { name: 'WebStorm', icon: 'i-skill-icons-webstorm-light' }
+  { name: 'WebStorm', icon: 'i-logos-webstorm' }
 ]
 
 export interface UsesItem {
   name: string
   description: string
 }
+
+export interface CodingActivity {
+  name: string
+  active: boolean
+  project: string
+  state: string
+  start: {
+    ago: string
+    formated: string
+  }
+}