feat: enhance navigation and localization for projects and writings sections

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

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"

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')"

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"

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')"