From d40f30a06a497c65b947932575a5038e4005022b Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sat, 6 Sep 2025 12:34:41 +0200
Subject: [PATCH] feat: enhance navigation and localization for projects and
 writings sections

---
 app/components/chat/CommandPalette.vue |  4 ++--
 app/pages/projects/[slug].vue          | 13 +++++++++++--
 app/pages/projects/index.vue           |  2 +-
 app/pages/writings/[slug].vue          | 13 +++++++++++--
 app/pages/writings/index.vue           |  4 ++--
 locales/en.json                        |  9 ++++++---
 locales/es.json                        |  9 ++++++---
 locales/fr.json                        |  9 ++++++---
 8 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index 3d583f9..24be324 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/app/components/chat/CommandPalette.vue
@@ -88,8 +88,8 @@ function isRoute(name: string): boolean {
 
 <template>
   <nav
-    class="fixed z-50 mb-4 md:pb-8 duration-700 mx-auto px-8 sm:px-0 flex gap-2"
-    :class="active || mode === 'work' ? 'bottom-0 left-1/2 -translate-x-1/2' : 'max-w-[40rem] w-full md:bottom-1/6 left-1/2 -translate-x-1/2 bottom-0'"
+    class="fixed z-50 mb-4 duration-700 mx-auto px-8 sm:px-0 flex gap-2"
+    :class="active || mode === 'work' ? 'bottom-0 left-1/2 -translate-x-1/2' : 'max-w-[40rem] w-full md:bottom-24 left-1/2 -translate-x-1/2 bottom-0'"
   >
     <UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
       <UFieldGroup v-if="mode === 'chat'" class="w-full">
diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index 7e457f1..6405992 100644
--- a/app/pages/projects/[slug].vue
+++ b/app/pages/projects/[slug].vue
@@ -15,11 +15,19 @@ useSeoMeta({
   description: project.value?.description,
   author: 'Arthur Danjou',
 })
+
+const { t } = useI18n()
 </script>
 
 <template>
-  <UContainer v-if="project" class="mt-8 md:mt-16 md:mb-36 mb-20">
-    <PostAlert class="mb-8" />
+  <UContainer v-if="project" class="mt-16 mb-22">
+    <NuxtLink
+      to="/projects"
+      class="mb-4 text-sm text-neutral-500 duration-300 flex items-center gap-1 hover:text-black dark:hover:text-white"
+    >
+      <UIcon name="ph:arrow-left-duotone" size="16" />
+      <span>{{ t('projects.back') }}</span>
+    </NuxtLink>
     <div>
       <div class="flex items-end justify-between gap-2 flex-wrap">
         <h1
@@ -47,6 +55,7 @@ useSeoMeta({
         label="Project cover"
       />
     </div>
+    <PostAlert class="mb-8 font-bold" />
     <USeparator
       class="my-4"
       icon="i-ph-pencil-line-duotone"
diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
index fb4512d..7b1285d 100644
--- a/app/pages/projects/index.vue
+++ b/app/pages/projects/index.vue
@@ -14,7 +14,7 @@ const { data: projects } = await useAsyncData('all-projects', () => {
 </script>
 
 <template>
-  <UContainer class="space-y-12 mb-20 mt-16 md:mb-32 relative">
+  <UContainer class="space-y-12 mb-20 mt-8 md:mt-16 relative">
     <PostTitle
       :description="t('projects.description')"
       :title="t('projects.title')"
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index 282862e..4b6bae0 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -15,11 +15,19 @@ useSeoMeta({
   description: writing.value?.description,
   author: 'Arthur Danjou',
 })
+
+const { t } = useI18n()
 </script>
 
 <template>
-  <UContainer v-if="writing" class="mt-16 md:mt-16 md:mb-36 mb-22">
-    <PostAlert class="mb-8" />
+  <UContainer v-if="writing" class="mt-16 mb-22">
+    <NuxtLink
+      to="/writings"
+      class="mb-4 text-sm text-neutral-500 duration-300 flex items-center gap-1 hover:text-black dark:hover:text-white"
+    >
+      <UIcon name="ph:arrow-left-duotone" size="16" />
+      <span>{{ t('writings.back') }}</span>
+    </NuxtLink>
     <div>
       <div class="flex items-end justify-between gap-2 flex-wrap">
         <h1
@@ -47,6 +55,7 @@ useSeoMeta({
         label="Project cover"
       />
     </div>
+    <PostAlert class="my-8 font-bold" />
     <USeparator
       class="my-4"
       icon="i-ph-pencil-line-duotone"
diff --git a/app/pages/writings/index.vue b/app/pages/writings/index.vue
index 496f8d5..0542eaf 100644
--- a/app/pages/writings/index.vue
+++ b/app/pages/writings/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const { t } = useI18n()
 useSeoMeta({
-  title: 'My Shelf',
+  title: 'My Shelf - Arthur DANJOU',
   description: t('writings.description'),
 })
 
@@ -25,7 +25,7 @@ const groupedWritings = computed(() => {
 </script>
 
 <template>
-  <UContainer class="space-y-12 mb-20 mt-16 md:mb-32 relative">
+  <UContainer class="space-y-12 mb-20 mt-8 md:mt-16 relative">
     <PostTitle
       :description="t('writings.description')"
       :title="t('writings.title')"
diff --git a/locales/en.json b/locales/en.json
index 38dee74..6c7cc34 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -26,7 +26,8 @@
       "language": "Change the language",
       "chat": "Go back to ArtChat to resume the conversation",
       "writings": "Read more articles",
-      "projects": "Discover other projects"
+      "projects": "Discover other projects",
+      "back": "Go back"
     }
   },
   "command": {
@@ -232,10 +233,12 @@
   },
   "writings": {
     "description": "All my reflections on programming, mathematics, the conception of artificial intelligence, etc., are put in chronological order.",
-    "title": "Writings on math, artificial intelligence, development, and my passions."
+    "title": "Writings on math, artificial intelligence, development, and my passions.",
+    "back": "Return to the writings"
   },
   "projects": {
     "description": "A collection of my projects using R, Python, or web development technologies. These projects span various domains, including data analysis, machine learning, and web applications, showcasing my skills in coding, problem-solving, and project development.",
-    "title": "All my projects I have worked on, both academic and personal"
+    "title": "All my projects I have worked on, both academic and personal",
+    "back": "Return to projects"
   }
 }
diff --git a/locales/es.json b/locales/es.json
index d8f5118..b13f13d 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -26,7 +26,8 @@
       "language": "Cambiar la language",
       "chat": "Vuelve a ArtChat para reanudar la conversación",
       "projects": "Descubre otros proyectos",
-      "writings": "Leer más artículos"
+      "writings": "Leer más artículos",
+      "back": "Volver"
     }
   },
   "command": {
@@ -233,10 +234,12 @@
   },
   "writings": {
     "description": "Todas mis reflexiones sobre programación, matemáticas, la concepción de la inteligencia artificial, etc., están organizadas en orden cronológico.",
-    "title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones."
+    "title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones.",
+    "back": "Volver a los escritos"
   },
   "projects": {
     "description": "Una colección de mis proyectos utilizando R, Python o tecnologías de desarrollo web. Estos proyectos abarcan varios dominios, incluyendo análisis de datos, aprendizaje automático y aplicaciones web, mostrando mis habilidades en codificación, resolución de problemas y desarrollo de proyectos.",
-    "title": "Todos mis proyectos en los que he trabajado, tanto académicos como personales"
+    "title": "Todos mis proyectos en los que he trabajado, tanto académicos como personales",
+    "back": "Volver a proyectos"
   }
 }
diff --git a/locales/fr.json b/locales/fr.json
index 30bc525..737fa58 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -26,7 +26,8 @@
       "language": "Changer la langue",
       "chat": "Retourner sur ArtChat pour reprendre la conversation",
       "writings": "Lire plus d'articles",
-      "projects": "Découvrir les autres projets"
+      "projects": "Découvrir les autres projets",
+      "back": "Revenir en arrière"
     }
   },
   "command": {
@@ -233,10 +234,12 @@
   },
   "writings": {
     "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique.",
-    "title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions."
+    "title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions.",
+    "back": "Revenir aux écrits"
   },
   "projects": {
     "description": "Une collection de mes projets réalisés en R, Python, ou en développement web. Ces projets couvrent divers domaines, y compris l'analyse de données, l'apprentissage automatique et les applications web, mettant en avant mes compétences en codage, résolution de problèmes et développement de projets.",
-    "title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels"
+    "title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels",
+    "back": "Revenir aux projets"
   }
 }