feat: implement ChatCommandPalette with dynamic mode handling; enhance localization for tooltips and post footer; add new project pages and content

app/app.vue

@@ -5,6 +5,9 @@ import { SpeedInsights } from '@vercel/speed-insights/nuxt'
 useHead({
   link: [{ rel: 'icon', type: 'image/webp', href: '/favicon.webp' }],
 })
+
+const route = useRoute()
+const { messages } = useChatStore()
 </script>
 
 <template>
@@ -12,6 +15,25 @@ useHead({
     <NuxtLoadingIndicator color="#808080" />
     <AppBackground />
     <UContainer>
+      <ChatCommandPalette
+        v-motion
+        :active="messages.length > 0"
+        :mode="route.path.includes('/projects') || route.path.includes('/writings') || route.path.includes('/canva') ? 'work' : 'chat'"
+        :initial="{
+          opacity: 0,
+          y: 200,
+          scale: 0.6,
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          transition: {
+            delay: route.path === '/' ? 1800 : 0,
+            ease: 'easeIn',
+          },
+        }"
+      />
       <NuxtPage />
     </UContainer>
     <SpeedInsights />

app/components/chat/CommandPalette.vue

@@ -2,11 +2,13 @@
 import type { CommandPaletteItem } from '@nuxt/ui'
 import { ChatState } from '~~/types'
 
-defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
+interface Props {
+  mode?: 'chat' | 'work'
+  active: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  mode: 'chat',
 })
 
 const searchTerm = ref('')
@@ -54,63 +56,26 @@ const commandPaletteUi = {
   content: 'flex-1 overflow-y-auto',
 }
 
-function up() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function down() {
-  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
-}
-
 const toolTipContent = {
   align: 'center',
   side: 'top',
   sideOffset: 0,
 }
+
+const router = useRouter()
+function goHome() {
+  clearMessages()
+  router.push('/')
+}
 </script>
 
 <template>
   <nav
-    class="fixed z-50 pb-8 duration-700 mx-auto px-8 sm:px-0"
-    :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'max-w-[40rem] w-full md:bottom-1/5 left-1/2 -translate-x-1/2 bottom-0'"
+    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/5 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' }">
-      <ClientOnly>
-        <UFieldGroup v-if="active" class="flex items-center justify-center">
-          <UTooltip
-            :text="t('palette.tooltip.up')"
-            arrow
-            :content="toolTipContent"
-            :delay-duration="0"
-          >
-            <UButton
-              icon="i-ph-arrow-fat-up-duotone"
-              color="neutral"
-              variant="outline"
-              class="cursor-pointer"
-              size="xl"
-              @click.prevent="up"
-            />
-          </UTooltip>
-
-          <UTooltip
-            :text="t('palette.tooltip.down')"
-            arrow
-            :content="toolTipContent"
-            :delay-duration="0"
-          >
-            <UButton
-              icon="i-ph-arrow-fat-down-duotone"
-              color="neutral"
-              variant="outline"
-              class="cursor-pointer"
-              size="xl"
-              @click.prevent="down"
-            />
-          </UTooltip>
-        </UFieldGroup>
-      </ClientOnly>
-      <UFieldGroup class="w-full">
+      <UFieldGroup v-if="mode === 'chat'" class="w-full">
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
           <UTooltip
             :text="t('palette.tooltip.send')"
@@ -211,6 +176,40 @@ const toolTipContent = {
           </template>
         </UModal>
       </UFieldGroup>
+      <UFieldGroup v-else>
+        <UTooltip
+          :text="t('palette.tooltip.chat')"
+          arrow
+          :content="toolTipContent"
+          :delay-duration="0"
+        >
+          <UButton
+            :label="t('palette.cmd.chat')"
+            variant="outline"
+            color="neutral"
+            size="xl"
+            icon="i-ph-house-duotone"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
+            @click.prevent="goHome"
+          />
+        </UTooltip>
+        <UTooltip
+          :text="t('palette.tooltip.canva')"
+          arrow
+          :content="toolTipContent"
+          :delay-duration="0"
+        >
+          <UButton
+            :label="t('palette.cmd.canva')"
+            variant="outline"
+            color="neutral"
+            size="xl"
+            icon="i-ph-presentation-duotone"
+            href="/canva"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
+          />
+        </UTooltip>
+      </UFieldGroup>
       <ClientOnly>
         <UFieldGroup class="flex items-center justify-center">
           <UTooltip

app/components/chat/Main.vue

@@ -3,7 +3,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex flex-col my-16 md:my-32">
+  <div class="flex flex-col my-8 md:my-32">
     <h1
       v-motion
       :initial="{

app/components/post/Footer.vue

@@ -1,23 +1,21 @@
 <script lang="ts" setup>
-const { t } = useI18n({
-  useScope: 'local',
-})
+const { t } = useI18n()
 </script>
 
 <template>
-  <div class="p-8 border bg-white/70 dark:bg-black/70 border-gray-200 dark:border-neutral-700 rounded-md">
+  <div class="mt-8 p-8 border bg-white/70 dark:bg-black/70 border-gray-200 dark:border-neutral-700 rounded-md">
     <NuxtImg
-      src="/arthur.webp"
+      src="/arthur pro.webp"
       alt="Arthur Danjou"
       class="w-24 h-24 rounded-full float-left mr-4 mb-4"
     />
     <i18n-t
-      keypath="thanks"
+      keypath="post.footer.thanks"
       tag="p"
       class="text-neutral-600 dark:text-neutral-400 text-justify"
     >
       <template #linkedin>
-        <HomeLink
+        <PostLink
           href="https://www.linkedin.com/in/arthurdanjou/"
           icon="i-ph-linkedin-logo-duotone"
           label="LinkedIn"
@@ -26,7 +24,7 @@ const { t } = useI18n({
         />
       </template>
       <template #github>
-        <HomeLink
+        <PostLink
           href="https://github.com/arthurdanjou"
           icon="i-ph-github-logo-duotone"
           label="GitHub"
@@ -35,10 +33,10 @@ const { t } = useI18n({
         />
       </template>
       <template #comment>
-        <strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
+        <strong class="text-neutral-800 dark:text-neutral-200">{{ t('post.footer.comment') }}</strong>
       </template>
       <template #name>
-        <strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
+        <strong class="text-neutral-800 dark:text-neutral-200">Arthur</strong>
       </template>
       <template #jump>
         <br> <br>
@@ -46,23 +44,3 @@ const { t } = useI18n({
     </i18n-t>
   </div>
 </template>
-
-<i18n lang="json">
-{
-    "en": {
-        "thanks": "Thanks for reading! My name is {name}, and I love writing about AI, data science, and the intersection between mathematics and programming. {jump} I've been coding and exploring math for years, and I'm always learning something new—whether it's self-hosting tools in my homelab, experimenting with machine learning models, or diving into statistical methods. {jump} I share my knowledge here because I know how valuable clear, hands-on resources can be, especially when you're just getting started or exploring something deeply technical. {jump} If you have any questions or just want to chat, feel free to reach out to me on {linkedin} or {github  }. {jump} I hope you enjoyed this post and learned something useful. If you did, {comment}—it really helps and means a lot!",
-        "comment": "consider sharing it",
-        "name": "Arthur"
-    },
-    "es": {
-        "thanks": "¡Gracias por leer! Me llamo {name} y me encanta escribir sobre inteligencia artificial, ciencia de datos y todo lo que se encuentra en la intersección entre las matemáticas y la programación. {jump} Llevo años programando y explorando las matemáticas, y cada día aprendo algo nuevo — ya sea autoalojando herramientas en mi homelab, experimentando con modelos de aprendizaje automático o profundizando en métodos estadísticos. {jump} Comparto mis conocimientos aquí porque sé lo valiosos que pueden ser los recursos claros, prácticos y accesibles, especialmente cuando uno está empezando o explorando temas técnicos en profundidad. {jump} Si tienes alguna pregunta o simplemente quieres charlar, no dudes en dejar un comentario abajo o contactarme por {linkedin} o {github}. {jump} Espero que este artículo te haya gustado y que hayas aprendido algo útil. Si es así, {comment} — ¡me ayuda mucho y significa mucho para mí!",
-        "comment": "considera compartirlo",
-        "name": "Arthur"
-    },
-    "fr": {
-        "thanks": "Merci de votre lecture ! Je m'appelle {name}, et j'adore écrire sur l'intelligence artificielle, la data science, et tout ce qui se situe à l'intersection entre les mathématiques et la programmation. {jump} Je code et j'explore les maths depuis des années, et j'apprends encore de nouvelles choses chaque jour — que ce soit en auto-hébergeant des outils dans mon homelab, en expérimentant des modèles de machine learning ou en approfondissant des méthodes statistiques. {jump} Je partage mes connaissances ici parce que je sais à quel point des ressources claires, pratiques et accessibles peuvent être précieuses, surtout quand on débute ou qu'on explore un sujet technique en profondeur. {jump} Si vous avez des questions ou simplement envie d'échanger, n'hésitez pas à laisser un commentaire ci-dessous ou à me contacter sur {linkedin} ou {github}. {jump} J'espère que cet article vous a plu et qu'il vous a appris quelque chose d'utile. Si c'est le cas, {comment} — ça m'aide beaucoup et ça me fait vraiment plaisir !",
-        "comment": "pensez à le partager",
-        "name": "Arthur"
-    }
-}
-</i18n>

app/components/post/PostLink.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  href: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+  },
+  blanked: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    :target="blanked ? '_blank' : '_self'"
+    class="sofia flex gap-1 items-center group"
+  >
+    <Icon
+      v-if="icon"
+      :name="icon"
+      size="20"
+    />
+    <span
+      class="duration-300 underline-offset-2 font-semibold text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 group-hover:decoration-black dark:group-hover:decoration-white"
+    >
+      {{ label }}
+    </span>
+  </NuxtLink>
+</template>

app/components/tool/Location.vue

@@ -10,7 +10,7 @@
     <div class="md:max-w-2/3 shadow-lg rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative z-10">
       <NuxtImg class="rounded-xl" src="/location.png" />
       <div class="size-12 rounded-full border-2 border-sky-500 absolute z-50 top-2/5 -translate-y-1/2 left-1/5 -translate-x-1/2 animate-bounce">
-        <NuxtImg src="/arthur pro.webp" class="rounded-full" />
+        <NuxtImg src="/arthur pro.webp" class="rounded-full" alt="Location of Arthur" />
       </div>
     </div>
   </section>

app/pages/canva.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/index.vue

@@ -26,26 +26,8 @@ watch(
 
 <template>
   <main>
-    <ChatCommandPalette
-      v-motion
-      :initial="{
-        opacity: 0,
-        y: 200,
-        scale: 0.6,
-      }"
-      :enter="{
-        opacity: 1,
-        y: 0,
-        scale: 1,
-        transition: {
-          delay: 1800,
-          ease: 'easeIn',
-        },
-      }"
-      :active="messages.length > 0"
-    />
     <ChatMain />
-    <div ref="parents" class="space-y-4 my-32">
+    <div ref="parents" class="space-y-4 md:my-32 mb-16">
       <ChatMessageContainer
         :id="99999999998"
         v-motion

app/pages/projects/[slug].vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
+  queryCollection('projects').path(`/projects/${route.params.slug}`).first())
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: project.value?.title,
+  description: project.value?.description,
+  author: 'Arthur Danjou',
+})
+</script>
+
+<template>
+  <main v-if="project" class="mt-8 md:mt-16 md:mb-32 mb-20">
+    <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="/canva"
+      >
+        <UIcon
+          class="group-hover:-translate-x-1 transform duration-300"
+          name="i-ph-arrow-left-duotone"
+          size="20"
+        />
+        {{ t('post.back') }}
+      </NuxtLinkLocale>
+    </div>
+    <PostAlert class="mb-8" />
+    <div>
+      <div class="flex items-end justify-between gap-2 flex-wrap">
+        <h1
+          class="font-bold text-3xl text-black dark:text-white"
+        >
+          {{ project.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(project.publishedAt, 'DD MMMM YYYY').value }} </p>
+        </div>
+      </div>
+      <p class="mt-2 text-base">
+        {{ project.description }}
+      </p>
+    </div>
+    <div
+      v-if="project.cover"
+      class="w-full rounded-md my-8"
+    >
+      <ProseImg
+        :src="`/projects/${project.cover}`"
+        label="Project cover"
+      />
+    </div>
+    <USeparator
+      class="my-4"
+      icon="i-ph-pencil-line-duotone"
+    />
+    <ClientOnly>
+      <ContentRenderer
+        :value="project"
+        class="!max-w-none prose dark:prose-invert"
+      />
+    </ClientOnly>
+    <PostFooter />
+  </main>
+</template>
+
+<style scoped>
+.prose h2 a,
+.prose h3 a,
+.prose h4 a {
+  text-decoration: none;
+}
+
+.prose img {
+  margin: 0;
+}
+
+.katex-html {
+  display: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+</style>