From 60b6f463ddbe9d1330142e88787bf3f2e1764e1f Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 22 Jul 2025 20:28:13 +0200
Subject: [PATCH] Refactor project and writings components: streamline i18n
 usage and enhance styling for better readability

---
 app/pages/projects/[slug].vue |  3 +--
 app/pages/projects/index.vue  | 42 +++++++++++++++++------------------
 app/pages/writings/index.vue  |  6 ++---
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index 0d65454..8134f05 100644
--- a/app/pages/projects/[slug].vue
+++ b/app/pages/projects/[slug].vue
@@ -3,8 +3,7 @@ const route = useRoute()
 const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
   queryCollection('projects').path(`/projects/${route.params.slug}`).first())
 
-const { locale } = useI18n()
-const { t } = useI18n({
+const { t, locale } = useI18n({
   useScope: 'local',
 })
 
diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
index b67c618..afdd16f 100644
--- a/app/pages/projects/index.vue
+++ b/app/pages/projects/index.vue
@@ -23,21 +23,21 @@ const { data: projects } = await useAsyncData('all-projects', () => {
       :description="t('description')"
       :title="t('title')"
     />
-    <ul class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
       <NuxtLink
         v-for="(project, id) in projects"
         :key="id"
         :to="project.path"
       >
         <li
-          class="flex flex-col justify-between h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600 duration-300"
+          class="flex flex-col h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors justify-center"
         >
           <article class="space-y-2">
             <div
-              class="flex flex-col gap-2"
+              class="flex flex-col"
             >
               <div class="flex items-center gap-2">
-                <h1 class="font-bold text-lg text-black dark:text-white">
+                <h1 class="font-bold duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">
                   {{ project.title }}
                 </h1>
                 <UTooltip
@@ -56,29 +56,29 @@ const { data: projects } = await useAsyncData('all-projects', () => {
                   />
                 </UTooltip>
               </div>
-              <h3 class="text-md text-neutral-500 dark:text-neutral-400">
+              <h3 class="text-md text-neutral-500 dark:text-neutral-400 italic">
                 {{ project.description }}
               </h3>
             </div>
           </article>
-          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-2">
+          <div class="flex flex-col sm:flex-row sm:items-center mt-1">
             <div
-              class="text-sm text-neutral-500 flex items-center gap-1"
+              class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
             >
-              <UIcon name="ph:calendar-duotone" size="16" />
-              <p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
-            </div>
-            <div class="flex gap-2 flex-wrap">
-              <ClientOnly>
-                <UBadge
-                  v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
-                  :key="tag"
-                  variant="soft"
-                  size="sm"
-                >
-                  {{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
-                </UBadge>
-              </ClientOnly>
+              <p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
+              <span class="w-2" />
+              <div class="flex gap-2 flex-wrap">
+                <ClientOnly>
+                  <UBadge
+                    v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                    :key="tag"
+                    variant="soft"
+                    size="sm"
+                  >
+                    {{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
+                  </UBadge>
+                </ClientOnly>
+              </div>
             </div>
           </div>
         </li>
diff --git a/app/pages/writings/index.vue b/app/pages/writings/index.vue
index f88b42d..d50b81d 100644
--- a/app/pages/writings/index.vue
+++ b/app/pages/writings/index.vue
@@ -48,14 +48,14 @@ const groupedWritings = computed(() => {
         <h2 class="text-3xl absolute -left-16 font-bold text-white opacity-10 select-none pointer-events-none [writing-mode:vertical-rl] [text-orientation:upright]">
           {{ year[0] }}
         </h2>
-        <ul class="relative grid grid-cols-1 gap-8">
+        <ul class="relative grid grid-cols-1 gap-2">
           <NuxtLink
             v-for="(writing, id) in year[1]"
             :key="id"
             :to="writing.path"
           >
             <li
-              class="h-full group"
+              class="h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors"
             >
               <h1
                 class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"
@@ -65,7 +65,7 @@ const groupedWritings = computed(() => {
               <h3 class="text-neutral-600 dark:text-neutral-400 italic">
                 {{ writing.description }}
               </h3>
-              <div class="flex flex-col sm:flex-row sm:items-center justify-between mt-2">
+              <div class="flex flex-col sm:flex-row sm:items-center justify-between mt-1">
                 <div
                   class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
                 >