Merge branch 'refs/heads/master' into feature_es

# Conflicts: # app/components/AppHeader.vue # app/components/content/Quote.vue # app/components/home/Map.vue # app/pages/index.vue # content/home/en.md # content/home/fr.md # nuxt.config.ts # package.json # pnpm-lock.yaml # tailwind.config.ts
2026-01-25 19:52:36 +01:00 · 2024-11-26 20:10:22 +01:00
parent 2fa861584a 4d203e5b5c
commit f7a6bfd554
75 changed files with 4324 additions and 2987 deletions
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -3,10 +3,7 @@ export default defineAppConfig({
    gray: 'neutral',
    primary: 'gray',
    container: {
-      constrained: 'max-w-3xl'
+      constrained: 'max-w-4xl',
    },
-    icons: {
-      dynamic: true
-    }
-  }
+  },
 })
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+useHead({
+  link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+})
+
+const head = useLocaleHead({
+  addDirAttribute: true,
+  identifierAttribute: 'id',
+  addSeoAttributes: true,
+})
+</script>
+
 <template>
  <Html
    :dir="head.htmlAttrs.dir"
@@ -27,29 +39,19 @@
      </template>
    </Head>
    <Body>
-      <NuxtLoadingIndicator color="#808080" />
-      <AppBackground />
-      <UContainer class="z-50 relative">
-        <AppHeader />
-        <NuxtPage class="mt-12" />
-        <AppFooter />
-      </UContainer>
+      <div>
+        <NuxtLoadingIndicator color="#808080" />
+        <AppBackground />
+        <UContainer class="z-50 relative">
+          <AppHeader />
+          <NuxtPage class="mt-12" />
+          <AppFooter />
+        </UContainer>
+      </div>
    </Body>
  </Html>
 </template>

-<script lang="ts" setup>
-useHead({
-  link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }]
-})
-
-const head = useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: 'id',
-  addSeoAttributes: true
-})
-</script>
-
 <style>
 body {
  font-family: 'DM Sans', sans-serif;
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,28 +1,29 @@
 <script setup lang="ts">
 const socials = [
  {
-    icon: 'i-ph-x-logo-duotone',
+    icon: 'x-logo-duotone',
    label: 'Twitter',
-    link: 'https://twitter.com/ArthurDanj'
+    link: 'https://twitter.com/ArthurDanj',
  },
  {
-    icon: 'i-ph-github-logo-duotone',
+    icon: 'github-logo-duotone',
    label: 'GitHub',
-    link: 'https://github.com/ArthurDanjou'
+    link: 'https://github.com/ArthurDanjou',
  },
  {
-    icon: 'i-ph-linkedin-logo-duotone',
+    icon: 'linkedin-logo-duotone',
    label: 'LinkedIn',
-    link: 'https://www.linkedin.com/in/arthurdanjou/'
-  }, {
-    icon: 'i-ph-discord-logo-duotone',
+    link: 'https://www.linkedin.com/in/arthurdanjou/',
+  },
+  {
+    icon: 'discord-logo-duotone',
    label: 'Discord',
-    link: 'https://discordapp.com/users/179635349100691456'
-  }
+    link: 'https://discordapp.com/users/179635349100691456',
+  },
 ]

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })
 </script>

@@ -43,7 +44,7 @@ const { t } = useI18n({
            v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
            :key="social.label"
            :href="social.link"
-            :icon="social.icon"
+            :icon="`i-ph:${social.icon}`"
            :label="social.label"
            target="_blank"
          />
@@ -63,7 +64,7 @@ const { t } = useI18n({
    <div class="mt-8 w-full flex justify-center text-xs">
      {{
        t('copyright', {
-          date: new Date().getFullYear()
+          date: new Date().getFullYear(),
        })
      }}
    </div>
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -14,7 +14,7 @@ const navs = [
      es: 'inicio'
    },
    to: '/',
-    icon: 'i-ph-house-line-duotone',
+    icon: 'house-line-duotone',
    shortcut: {
      en: 'H',
      fr: 'A',
@@ -28,7 +28,7 @@ const navs = [
      es: 'usos'
    },
    to: '/uses',
-    icon: 'i-ph-backpack-duotone',
+    icon: 'backpack-duotone',
    shortcut: {
      en: 'U',
      fr: 'U',
@@ -37,12 +37,12 @@ const navs = [
  },
  {
    label: {
-      en: 'writings',
-      fr: 'écrits',
+      en: 'portfolio',
+      fr: 'portfolio',
      es: 'escritos'
    },
-    to: '/writings',
-    icon: 'i-ph-books-duotone',
+    to: '/portfolio',
+    icon: 'books-duotone',
    shortcut: {
      en: 'W',
      fr: 'E',
@@ -55,9 +55,8 @@ const navs = [
      fr: 'cv',
      es: 'currículum'
    },
-    to: config.public.cloud.resume,
+    to: '/Resume2024.pdf',
    target: '_blank',
-    icon: 'i-ph-address-book-duotone',
    shortcut: {
      en: 'R',
      fr: 'C',
@@ -78,6 +77,7 @@ async function toggleTheme() {
 }

 const { locale, setLocale, locales, t, availableLocales } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])

 async function changeLocale(newLocale?: string) {
  document.body.style.animation = 'switch-on .2s'
@@ -103,16 +103,9 @@ watch(lang, () => changeLocale(lang.value))

 const router = useRouter()
 defineShortcuts({
-  h: () => router.push('/'),
-  a: () => router.push('/'),
-  u: () => router.push('/uses'),
-  w: () => router.push('/writings'),
-  e: () => router.push('/writings'),
-  r: () => window.open(config.public.cloud.resume, '_blank'),
-  c: () => window.open(config.public.cloud.resume, '_blank'),
  t: () => toggleTheme(),
  l: () => changeLocale(),
-  backspace: () => router.back()
+  backspace: () => router.back(),
 })
 </script>

@@ -128,11 +121,10 @@ defineShortcuts({
      <UTooltip
        v-for="nav in navs"
        :key="nav.label.en"
-        :shortcuts="[nav.shortcut[locale]]"
        :text="nav.label[locale]!"
      >
        <UButton
-          :icon="nav.icon"
+          :icon="`i-ph:${nav.icon}`"
          :target="nav.target ? nav.target : '_self'"
          :to="nav.to"
          :aria-label="nav.label"
--- a/app/components/AppTitle.vue
+++ b/app/components/AppTitle.vue
@@ -2,12 +2,12 @@
 defineProps({
  title: {
    type: String,
-    required: true
+    required: true,
  },
  description: {
    type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>

--- a/app/components/content/Activity.vue
+++ b/app/components/content/Activity.vue
@@ -3,40 +3,56 @@ import { type Activity, 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])
+const codingActivity = computed(() => activity.value!.data.activities.find(activity => IDEs.some(ide => ide.name === activity.name)))

 const { locale, locales } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))

 const getActivity = computed(() => {
-  const activity = codingActivity.value
-  if (!activity) return
+  if (!codingActivity.value)
+    return

-  const active = activity.name === 'Visual Studio Code' ? !activity.details.includes('Idling') : activity.state.toLowerCase().includes('editing')
-  const capitalise = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
-  const project = activity.details ? capitalise(activity.details.replace('Workspace:', '')) : ''
-  const state = activity.state.split(' ')[1]
-  const start = {
-    ago: useTimeAgo(activity.timestamps.start).value,
-    formated: `${useDateFormat(
-      activity.timestamps.start,
-      'DD MMM YYYY',
-      { locales: currentLocale.value!.code ?? 'en' }
-    ).value} ${t('separator')}
-    ${useDateFormat(activity.timestamps.start, 'HH:mm:ss', { locales: currentLocale.value!.code ?? 'en' }).value}`
-  }
+  const { name, details, state, timestamps } = codingActivity.value
+  const isActive = name === 'Visual Studio Code'
+    ? !details.includes('Idling')
+    : state.toLowerCase().includes('editing')
+  const project = details
+    ? details
+      .charAt(0)
+      .toUpperCase()
+      + details
+        .slice(1)
+        .replace('Workspace:', '')
+        .trim()
+    : ''
+  const stateWord = state.split(' ')[1]
+  const timeAgo = useTimeAgo(timestamps.start).value
+  const formatDate = (date: number, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value

  return {
-    active,
-    name: activity.name,
+    active: isActive,
+    name,
    project,
-    state,
-    start
+    state: stateWord,
+    start: {
+      ago: locale.value === 'en'
+        ? timeAgo
+        : timeAgo
+          .replace('ago', '')
+          .replace('hours', 'heures')
+          .replace('minutes', 'minutes')
+          .replace('seconds', 'secondes')
+          .trim(),
+      formated: {
+        date: formatDate(timestamps.start, 'DD MMM YYYY'),
+        time: formatDate(timestamps.start, 'HH:mm:ss'),
+      },
+    },
  }
 })

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })
 </script>

@@ -62,7 +78,6 @@ const { t } = useI18n({
        v-if="getActivity.active"
        keypath="working"
        tag="div"
-        class="space-x-1"
      >
        <template #project>
          <strong>{{ getActivity.project }}</strong>
@@ -71,17 +86,19 @@ const { t } = useI18n({
          {{ getActivity.state }}
        </template>
        <template #editor>
-          <UIcon
-            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-            size="16"
-          />
-          <strong>{{ getActivity.name }}</strong>
+          <span class="space-x-1">
+            <UIcon
+              :name="`i-logos:${IDEs.find(ide => ide.name === getActivity!.name)!.icon}`"
+              size="16"
+            />
+            <strong>{{ getActivity.name }}</strong></span>
        </template>
        <template #start>
          <strong>{{ getActivity.start.ago }}</strong>
        </template>
        <template #format>
-          <strong>{{ getActivity.start.formated }}</strong>
+          <strong>{{ getActivity.start.formated.date }}</strong> {{ t('separator') }}
+          <strong>{{ getActivity.start.formated.time }}</strong>
        </template>
      </i18n-t>
      <i18n-t
--- a/app/components/content/CatchPhrase.vue
+++ b/app/components/content/CatchPhrase.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+const { width } = useWindowSize()
+const { t } = useI18n({
+  useScope: 'local',
+})
+</script>
+
 <template>
  <ClientOnly>
    <div
@@ -13,13 +20,6 @@
  </ClientOnly>
 </template>

-<script lang="ts" setup>
-const { width } = useWindowSize()
-const { t } = useI18n({
-  useScope: 'local'
-})
-</script>
-
 <i18n lang="json">
 {
  "en": {
--- a/app/components/content/HoverText.vue
+++ b/app/components/content/HoverText.vue
@@ -4,15 +4,15 @@ import type { PropType } from 'vue'
 defineProps({
  text: {
    type: [String, Number],
-    required: true
+    required: true,
  },
  hover: {
    type: String,
-    required: true
+    required: true,
  },
  position: {
-    type: String as PropType<'top' | 'right' | 'bottom' | 'left'>
-  }
+    type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,
+  },
 })
 </script>

--- a/app/components/content/ProseA.vue
+++ b/app/components/content/ProseA.vue
@@ -4,13 +4,13 @@ import type { PropType } from 'vue'
 defineProps({
  href: {
    type: String,
-    default: ''
+    default: '',
  },
  target: {
    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
    default: undefined,
-    required: false
-  }
+    required: false,
+  },
 })
 </script>

--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
+
 <template>
  <h2
    :id="id"
@@ -12,12 +21,3 @@
    <slot v-else />
  </h2>
 </template>
-
-<script lang="ts" setup>
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
-</script>
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
+
 <template>
  <h2
    :id="id"
@@ -12,12 +21,3 @@
    <slot v-else />
  </h2>
 </template>
-
-<script lang="ts" setup>
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
-</script>
--- a/app/components/content/ProseIcon.vue
+++ b/app/components/content/ProseIcon.vue
@@ -2,18 +2,25 @@
 defineProps({
  icon: {
    type: String,
-    required: true
-  }
+    required: true,
+  },
+  color: {
+    type: String,
+    default: 'gray',
+  },
 })
 </script>

 <template>
  <span class="inline-flex items-center">
    <UIcon
-      class="mb-1 mr-1"
-      :name="icon"
+      class="mr-1"
+      :name="`i-logos:${icon}`"
    />
-    <span class="sofia font-medium underline-offset-2 underline decoration-neutral-300 dark:decoration-neutral-700">
+    <span
+      :class="`text-${color}-500 decoration-${color}-300`"
+      class="sofia font-medium underline-offset-2 underline"
+    >
      <slot />
    </span>
  </span>
--- a/app/components/content/Quote.vue
+++ b/app/components/content/Quote.vue
@@ -1,16 +1,21 @@
+<script lang="ts" setup>
+const { t } = useI18n({
+  useScope: 'local',
+})
+</script>
+
 <template>
  <div class="flex items-center gap-2 mt-4">
    <div class="flex items-center">
      <UTooltip text="It's me 👋">
-        <UAvatar
-          alt="Avatar"
-          chip-color="gray"
-          chip-position="top-right"
-          chip-text="!"
-          class="hover:rotate-[360deg] duration-500 transform-gpu"
-          size="md"
-          src="/favicon.png"
-        />
+        <div class="flex items-center w-12 h-12">
+          <UAvatar
+            alt="Avatar"
+            class="hover:rotate-[360deg] duration-500 transform-gpu"
+            size="md"
+            src="/favicon.png"
+          />
+        </div>
      </UTooltip>
    </div>
    <p class="not-prose">
@@ -19,12 +24,6 @@
  </div>
 </template>

-<script lang="ts" setup>
-const { t } = useI18n({
-  useScope: 'local'
-})
-</script>
-
 <i18n lang="json">
 {
  "en": {
--- a/app/components/content/Stats.vue
+++ b/app/components/content/Stats.vue
@@ -1,10 +1,15 @@
 <script lang="ts" setup>
 import type { Stats } from '~~/types'

+const { locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
+
 const { data: stats } = await useFetch<Stats>('/api/stats')
 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })
+
+const formatDate = (date: Date, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
 </script>

 <template>
@@ -15,12 +20,12 @@ const { t } = useI18n({
      tag="p"
    >
      <template #time>
-        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}
+        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value.split(' ')[0] }}
      </template>
      <template #date>
        <HoverText
          :hover="t('tooltip.date')"
-          :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
+          :text="formatDate(new Date(stats.coding.data.range.start), 'DD MMMM YYYY')"
        />
      </template>
      <template #hours>
@@ -29,6 +34,9 @@ const { t } = useI18n({
          :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
        />
      </template>
+      <template #editors>
+        {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}
+      </template>
      <template
        v-if="stats.os.data[0]"
        #os
@@ -47,7 +55,7 @@ const { t } = useI18n({
 <i18n lang="json">
 {
  "en": {
-    "stats": "I collect some data for {time}, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
+    "stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
    "separator": " and ",
    "tooltip": {
      "date": "That was so long ago 🫣",
@@ -55,7 +63,7 @@ const { t } = useI18n({
    }
  },
  "fr": {
-    "stats": "Je collecte des données depuis {time}, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
+    "stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
    "separator": " et ",
    "tooltip": {
      "date": "C'était il y a si longtemps 🫣",
--- a/app/components/home/Link.vue
+++ b/app/components/home/Link.vue
@@ -2,19 +2,19 @@
 defineProps({
  label: {
    type: String,
-    required: true
+    required: true,
  },
  href: {
    type: String,
-    required: true
+    required: true,
  },
  icon: {
-    type: String
+    type: String,
  },
  blanked: {
    type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 </script>

--- a/app/components/home/Map.vue
+++ b/app/components/home/Map.vue
@@ -21,7 +21,7 @@ function adjustZoom(amount: number) {
 }

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })

 const config = useRuntimeConfig()
@@ -36,7 +36,7 @@ const config = useRuntimeConfig()
          style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
          center: coordinates,
          zoom,
-          projection: 'globe'
+          projection: 'globe',
        }"
        class="relative z-10"
        map-id="map"
@@ -45,7 +45,7 @@ const config = useRuntimeConfig()
          :lnglat="coordinates"
          :options="{
            color: '#808080',
-            size: 1.5
+            size: 1.5,
          }"
          marker-id="marker"
        />
@@ -87,7 +87,7 @@ const config = useRuntimeConfig()

 <style lang="scss">
 .map-button {
-  @apply z-30 absolute bottom-2 dark:bg-gray-800 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
+  @apply z-30 absolute bottom-2 dark:bg-gray-900 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
 }

 .mapboxgl-control-container {
--- a/app/components/uses/Item.vue
+++ b/app/components/uses/Item.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { UsesItem } from '#components'
+import type { PropType } from 'vue'

 defineProps({
  item: {
    type: Object as PropType<typeof UsesItem>,
-    required: true
-  }
+    required: true,
+  },
 })

 const { locale } = useI18n()
--- a/app/components/uses/List.vue
+++ b/app/components/uses/List.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
 <template>
  <div class="space-y-8">
    <UDivider
@@ -9,12 +18,3 @@
    </ul>
  </div>
 </template>
-
-<script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
-</script>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,10 +1,10 @@
+<script lang="ts" setup>
+const { locale } = useI18n()
+</script>
+
 <template>
  <main class="!max-w-none prose dark:prose-invert">
    <ContentDoc :path="`/home/${locale}`" />
    <HomeMap />
  </main>
 </template>
-
-<script lang="ts" setup>
-const { locale } = useI18n()
-</script>
--- a/app/pages/portfolio/[slug].vue
+++ b/app/pages/portfolio/[slug].vue
@@ -1,35 +1,35 @@
 <script lang="ts" setup>
 const route = useRoute()
-const { data: post } = await useAsyncData(`writing:${route.params.slug}`, () => queryContent(`/writings/${route.params.slug}`).findOne())
+const { data: post } = await useAsyncData(`portfolio:${route.params.slug}`, () => queryContent(`/portfolio/${route.params.slug}`).findOne())
 const {
  data: postDB,
-  refresh
-} = await useAsyncData(`writing:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
+  refresh,
+} = await useAsyncData(`portfolio:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))

 const { locale, locales } = useI18n()
 const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })

 function top() {
  window.scrollTo({
    top: 0,
    left: 0,
-    behavior: 'smooth'
+    behavior: 'smooth',
  })
 }

 const { copy, copied } = useClipboard({
-  source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
-  copiedDuring: 4000
+  source: `https://arthurdanjou.fr/portfolio/${route.params.slug}`,
+  copiedDuring: 4000,
 })

 useSeoMeta({
  title: post.value?.title,
  description: post.value?.description,
-  author: 'Arthur Danjou'
+  author: 'Arthur Danjou',
 })

 function getDetails() {
@@ -39,15 +39,19 @@ function getDetails() {
  const like = likes > 1 ? t('likes.many') : t('likes.one')
  const view = views > 1 ? t('views.many') : t('views.one')

-  return `${likes} ${like} · ${views} ${view}`
+  return {
+    likes: `${likes} ${like}`,
+    views: `${views} ${view}`,
+  }
 }

 const likeCookie = useCookie<boolean>(`post:like:${route.params.slug}`, {
-  maxAge: 7200
+  maxAge: 7200,
 })

 async function handleLike() {
-  if (likeCookie.value) return
+  if (likeCookie.value)
+    return
  await $fetch(`/api/posts/like/${route.params.slug}`, { method: 'PUT' })
  await refresh()
  likeCookie.value = true
@@ -59,7 +63,7 @@ async function handleLike() {
    <div class="flex">
      <NuxtLinkLocale
        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
-        to="/writings"
+        to="/portfolio"
      >
        <UIcon
          class="group-hover:-translate-x-1 transform duration-300"
@@ -78,20 +82,27 @@ async function handleLike() {
      icon="i-ph-warning-duotone"
      variant="outline"
    />
-    <p class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
-      {{ getDetails() }}
-    </p>
+    <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm flex gap-1 items-center">
+      <UIcon name="i-ph-heart-duotone" size="16" />
+      <p>{{ getDetails().likes }} </p>·
+      <UIcon name="i-ph-eye-duotone" size="16" />
+      <p>{{ getDetails().views }}</p>
+    </div>
    <div class="mt-2">
-      <div class="flex items-end gap-2 flex-wrap">
+      <div class="flex items-end gap-4 flex-wrap">
        <h1
          class="font-bold text-3xl text-black dark:text-white"
        >
          {{ post.title }}
        </h1>
-        <p class="text-sm text-neutral-500">
-          {{ useDateFormat(post.publishedAt, 'DD MMMM YYYY', { locales: currentLocale!.code ?? 'en' }).value }} ·
-          {{ post.readingTime }}min long
-        </p>
+        <div
+          class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+        >
+          <UIcon name="ph:calendar-duotone" size="16" />
+          <p>{{ useDateFormat(post.publishedAt, 'DD MMMM YYYY').value }} </p>·
+          <UIcon name="ph:timer-duotone" size="16" />
+          <p>{{ post.readingTime }}min long</p>
+        </div>
      </div>
      <p class="mt-4 text-base">
        {{ post.description }}
@@ -102,7 +113,7 @@ async function handleLike() {
      class="w-full rounded-md my-8"
    >
      <NuxtImg
-        :src="`/writings/${post.cover}`"
+        :src="`/portfolio/${post.cover}`"
        alt="Writing cover"
      />
    </div>
@@ -133,7 +144,7 @@ async function handleLike() {
        <div class="flex gap-4 items-center flex-wrap">
          <UButton
            :label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
-            :color="likeCookie ? 'red': 'white'"
+            :color="likeCookie ? 'red' : 'white'"
            icon="i-ph-heart-duotone"
            size="lg"
            variant="solid"
--- a/app/pages/portfolio/index.vue
+++ b/app/pages/portfolio/index.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { type Tag, TAGS } from '~~/types'
+
+const { t, locale } = useI18n({
+  useScope: 'local',
+})
+useSeoMeta({
+  title: 'My Shelf',
+  description: t('description'),
+})
+
+const tagFilter = ref<string | undefined>(undefined)
+
+const { data: writings, refresh } = await useAsyncData('all-portfolio', () => queryContent('/portfolio')
+  .sort({ publishedAt: -1 })
+  .where({
+    tags: { $contains: tagFilter.value },
+  })
+  .without('body')
+  .find())
+
+watch(tagFilter, async () => await refresh())
+
+const tags: Array<{ label: string, icon: string } & Tag> = [
+  {
+    label: 'All',
+    icon: 'i-ph-books-duotone',
+    color: 'black',
+  },
+  ...TAGS,
+]
+
+function updateTag(index: number) {
+  const tag = tags[index]
+  tagFilter.value = tag?.label.toLowerCase() === 'all' ? undefined : tag?.label.toLowerCase()
+}
+</script>
+
+<template>
+  <main class="space-y-12">
+    <AppTitle
+      :description="t('description')"
+      :title="t('title')"
+    />
+    <UAlert
+      v-if="locale !== 'en'"
+      :description="t('alert.description')"
+      :title="t('alert.title')"
+      color="red"
+      icon="i-ph-warning-duotone"
+      variant="outline"
+    />
+    <UTabs :items="tags" class="hidden md:block" @change="updateTag" />
+    <UTabs :items="tags" orientation="vertical" class="md:hidden" @change="updateTag" />
+    <ul class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <NuxtLink
+        v-for="(writing, id) in writings"
+        :key="id"
+        :to="writing._path"
+      >
+        <li
+          class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500  duration-300"
+        >
+          <article class="space-y-2">
+            <h1
+              class="font-bold text-lg duration-300 text-black dark:text-white"
+            >
+              {{ writing.title }}
+            </h1>
+            <div
+              class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+            >
+              <UIcon name="ph:calendar-duotone" size="16" />
+              <p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>·
+              <UIcon name="ph:timer-duotone" size="16" />
+              <p>{{ writing.readingTime }}min long</p>
+            </div>
+            <h3>
+              {{ writing.description }}
+            </h3>
+          </article>
+          <div class="flex gap-2 mt-4 flex-wrap">
+            <UBadge
+              v-for="tag in writing.tags"
+              :key="tag"
+              :color="TAGS.find(color => color.label.toLowerCase() === tag)?.color || 'black'"
+              variant="soft"
+              size="sm"
+              :ui="{ rounded: 'rounded-full' }"
+            >
+              {{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
+            </UBadge>
+          </div>
+        </li>
+      </NuxtLink>
+    </ul>
+  </main>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Writing on my life, development, academic and personal projects and passions",
+    "description": "All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.",
+    "alert": {
+      "title": "Translations alert!",
+      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
+    }
+  },
+  "fr": {
+    "title": "Écrits sur ma vie, le développement, mes projets et mes passions.",
+    "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique. J'écris aussi sur mes projets, mes découvertes et mes pensées.",
+    "alert": {
+      "title": "Attentions aux traductions!",
+      "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
+    }
+  }
+}
+</i18n>
--- a/app/pages/uses.vue
+++ b/app/pages/uses.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })

 useSeoMeta({
  title: 'Things I use',
-  description: t('description')
+  description: t('description'),
 })

-const { data: items } = await useAsyncData('uses', () => queryContent('/uses').find()
-)
+const { data: items } = await useAsyncData('uses', () => queryContent('/uses').find())

 const hardware = items.value!.filter(item => item.category === 'hardware')
 const software = items.value!.filter(item => item.category === 'software')
--- a/app/pages/writings/index.vue
+++ b/app/pages/writings/index.vue
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-const { t, locale } = useI18n({
-  useScope: 'local'
-})
-useSeoMeta({
-  title: 'My Shelf',
-  description: t('description')
-})
-
-const { data: writings } = await useAsyncData('all-writings', () =>
-  queryContent('/writings').sort({ published: -1 }).without('body').find()
-)
-
-const { data: writingsDB } = await useAsyncData('all-writings-db', () =>
-  $fetch(`/api/posts`)
-)
-
-function getDetails(slug: string) {
-  const writing = writingsDB.value!.find(writing => writing.slug === slug)
-  if (!writing) return ''
-
-  const like = writing.likes! > 1 ? t('likes.many') : t('likes.one')
-  const view = writing.views! > 1 ? t('views.many') : t('views.one')
-
-  return `${writing.likes} ${like} · ${writing.views} ${view}`
-}
-</script>
-
-<template>
-  <main>
-    <AppTitle
-      :description="t('description')"
-      :title="t('title')"
-    />
-    <UAlert
-      v-if="locale !== 'en'"
-      :description="t('alert.description')"
-      :title="t('alert.title')"
-      class="mt-12"
-      color="red"
-      icon="i-ph-warning-duotone"
-      variant="outline"
-    />
-    <ul class="mt-12 space-y-24">
-      <li
-        v-for="(writing, id) in writings"
-        :key="id"
-      >
-        <NuxtLink
-          :to="writing._path"
-          class="group"
-        >
-          <article class="space-y-1">
-            <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
-              <p>{{ getDetails(writing.slug) }}</p>
-            </div>
-            <div class="flex items-end gap-2 flex-wrap">
-              <h1
-                class="font-bold text-lg duration-300 text-neutral-600 group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
-              >
-                {{ writing.title }}
-              </h1>
-              <p
-                class="mb-0.5 text-sm text-neutral-500 group-hover:text-black dark:group-hover:text-white duration-300"
-              >
-                {{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} · {{ writing.readingTime }}min long
-              </p>
-            </div>
-            <h3>
-              {{ writing.description }}
-            </h3>
-          </article>
-        </NuxtLink>
-      </li>
-    </ul>
-  </main>
-</template>
-
-<i18n lang="json">
-{
-  "en": {
-    "title": "Writing on my life, development and my passions.",
-    "description": "All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.",
-    "likes": {
-      "one": "like",
-      "many": "likes"
-    },
-    "views": {
-      "one": "view",
-      "many": "views"
-    },
-    "alert": {
-      "title": "Translations alert!",
-      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
-    }
-  },
-  "fr": {
-    "title": "Écrits sur ma vie, le développement et mes passions.",
-    "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique. J'écris aussi sur mes projets, mes découvertes et mes pensées.",
-    "likes": {
-      "one": "like",
-      "many": "likes"
-    },
-    "views": {
-      "one": "vue",
-      "many": "vues"
-    },
-    "alert": {
-      "title": "Attentions aux traductions!",
-      "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
-    }
-  }
-}
-</i18n>