From 9519c91e615a2d54a42fdc7f165f532356434da5 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Sep 2025 16:04:44 +0200
Subject: [PATCH] feat: add Skills component and integrate skills data; enhance
 CommandPalette and MessageContainer with improved UI and animations

---
 app/assets/css/main.css                    |   8 +
 app/components/chat/CommandPalette.vue     |  18 ++-
 app/components/chat/Main.vue               |  14 +-
 app/components/chat/MessageContainer.vue   |   9 +-
 app/components/tool/Skills.vue             |  32 ++++
 app/pages/index.vue                        |   5 +
 content.config.ts                          |  17 +-
 content/skills.json                        | 178 +++++++++++++++++++++
 content/skills/java.json                   |   0
 content/stack/0.programming-languages.json |   4 -
 content/stack/1.frontend.json              |   4 -
 content/stack/2.backend.json               |   4 -
 content/stack/3.devops.json                |   4 -
 content/stack/4.python.json                |   4 -
 locales/en.json                            |   9 +-
 locales/es.json                            |   9 +-
 locales/fr.json                            |   9 +-
 types/chat.ts                              |   1 +
 18 files changed, 288 insertions(+), 41 deletions(-)
 create mode 100644 app/components/tool/Skills.vue
 create mode 100644 content/skills.json
 delete mode 100644 content/skills/java.json
 delete mode 100644 content/stack/0.programming-languages.json
 delete mode 100644 content/stack/1.frontend.json
 delete mode 100644 content/stack/2.backend.json
 delete mode 100644 content/stack/3.devops.json
 delete mode 100644 content/stack/4.python.json

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index bdc986c..c0d6664 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -18,6 +18,10 @@
 
     --ui-font-family: 'DM Sans', sans-serif;
     transition-duration: 0.7s;
+
+    .prose {
+      max-width: none;
+    }
 }
 
 .dark {
@@ -31,6 +35,10 @@
 
     --ui-font-family: 'DM Sans', sans-serif;
     transition-duration: 0.7s;
+
+    .prose {
+      max-width: none;
+    }
 }
 
 @keyframes wave {
diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index b549586..4b1470e 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/app/components/chat/CommandPalette.vue
@@ -2,6 +2,13 @@
 import type { CommandPaletteItem } from '@nuxt/ui'
 import { ChatState } from '~~/types'
 
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const searchTerm = ref('')
 const openMessageModal = ref(false)
 const openClearModal = ref(false)
@@ -51,10 +58,15 @@ const commandPaletteUi = {
   item: 'data-highlighted:not-data-disabled:before:bg-muted',
   content: 'flex-1 overflow-y-auto',
 }
+
+// const isDesktop = computed(() => window.innerWidth >= 768)
 </script>
 
 <template>
-  <nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-8">
+  <nav
+    class="fixed z-50 pb-8 duration-700"
+    :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'md:bottom-1/4 left-1/2 -translate-x-1/2 bottom-0'"
+  >
     <UCard variant="outline" class="rounded-xl shadow-lg" :ui="{ body: 'p-2 sm:p-2 flex gap-2' }">
       <UFieldGroup>
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
@@ -65,6 +77,7 @@ const commandPaletteUi = {
             size="xl"
             icon="i-ph-paper-plane-tilt-duotone"
             class="rounded-lg cursor-pointer"
+            :class="active ? '' : 'p-6'"
             :disabled="loading"
           >
             <template #trailing>
@@ -119,6 +132,7 @@ const commandPaletteUi = {
           </template>
         </UModal>
         <UModal
+          v-if="active"
           v-model:open="openClearModal"
           :title="t('palette.clear.title')"
           :description="t('palette.clear.description')"
@@ -142,7 +156,7 @@ const commandPaletteUi = {
         </UModal>
       </UFieldGroup>
       <ClientOnly>
-        <UFieldGroup>
+        <UFieldGroup class="flex items-center justify-center" :orientation="active ? 'horizontal' : 'vertical'">
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
diff --git a/app/components/chat/Main.vue b/app/components/chat/Main.vue
index fb028a5..31e48c9 100644
--- a/app/components/chat/Main.vue
+++ b/app/components/chat/Main.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <div class="flex flex-col my-16 md:my-32">
     <h1
@@ -11,10 +15,11 @@
         opacity: 1,
         y: 0,
         scale: 1,
+        transition: { ease: 'linear' },
       }"
-      class="font-bold text-3xl sm:text-4xl"
+      class="font-bold text-3xl sm:text-4xl duration-200"
     >
-      Welcome to ArtChat
+      {{ t('chat.welcome') }}
     </h1>
     <h3
       v-motion
@@ -29,11 +34,12 @@
         scale: 1,
         transition: {
           delay: 400,
+          ease: 'linear',
         },
       }"
-      class="text-3xl sm:text-4xl bg-gradient-to-r from-inverted/40 to-inverted/75 to-50% bg-clip-text text-transparent font-medium"
+      class="text-3xl sm:text-4xl bg-gradient-to-r from-inverted/40 to-inverted/75 to-50% bg-clip-text text-transparent font-medium duration-200"
     >
-      Ask me anything about Arthur DANJOU
+      {{ t('chat.ask') }}
     </h3>
   </div>
 </template>
diff --git a/app/components/chat/MessageContainer.vue b/app/components/chat/MessageContainer.vue
index b021953..bd1ff35 100644
--- a/app/components/chat/MessageContainer.vue
+++ b/app/components/chat/MessageContainer.vue
@@ -14,7 +14,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
 </script>
 
 <template>
-  <div v-if="!isArthur" class="group flex flex-col gap-2">
+  <div v-if="!isArthur" class="group flex flex-col gap-2 duration-200">
     <div class="flex flex-col-reverse md:flex-row-reverse items-end">
       <UCard
         variant="solid"
@@ -28,7 +28,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       {{ formatted }}
     </div>
   </div>
-  <div v-else class="group space-y-2">
+  <div v-else class="group space-y-2 duration-200">
     <div class="flex flex-col-reverse gap-2 items-start md:flex-row-reverse">
       <UCard
         v-if="message.state === ChatState.LOADING && message.fetchStates && message.fetchStates.length > 0"
@@ -41,7 +41,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       <UCard
         v-else
         variant="soft"
-        class="mt-1 w-full bg-transparent"
+        class="mt-1 w-full max-w-none bg-transparent"
         :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
       >
         <div v-if="message.type === ChatType.INIT">
@@ -74,6 +74,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.LOCATION">
           <ToolLocation />
         </div>
+        <div v-else-if="message.type === ChatType.SKILLS">
+          <ToolSkills />
+        </div>
         <div v-else>
           {{ message }}
         </div>
diff --git a/app/components/tool/Skills.vue b/app/components/tool/Skills.vue
new file mode 100644
index 0000000..b3ead83
--- /dev/null
+++ b/app/components/tool/Skills.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const { data: skills } = await useAsyncData('skills', async () => await queryCollection('skills').first())
+
+const { t, locale } = useI18n()
+</script>
+
+<template>
+  <section>
+    <div class="prose dark:prose-invert">
+      <p>{{ t('skills.main') }}</p>
+    </div>
+    <div v-if="skills" class="space-y-12 m-1 my-4">
+      <div v-for="category in skills.items" :key="category.id" class="space-y-8">
+        <USeparator
+          :label="locale === 'en' ? category.name.en : locale === 'es' ? category.name.es : category.name.fr"
+          size="xs"
+        />
+        <div class="flex gap-3 flex-wrap">
+          <UButton
+            v-for="skill in category.items"
+            :key="skill.id"
+            :label="skill.name"
+            variant="subtle"
+            color="neutral"
+            class="shadow-md"
+            :icon="skill.icon"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 049d28f..52e2095 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,8 +34,10 @@ watch(
         scale: 1,
         transition: {
           delay: 1600,
+          ease: 'easeOut',
         },
       }"
+      :active="messages.length > 0"
     />
     <ChatMain />
     <div ref="parents" class="space-y-4 my-32">
@@ -52,6 +54,7 @@ watch(
           scale: 1,
           transition: {
             delay: 800,
+            ease: 'easeOut',
           },
         }"
         :message="{
@@ -75,6 +78,7 @@ watch(
           scale: 1,
           transition: {
             delay: 1200,
+            ease: 'easeOut',
           },
         }"
         :message="{
@@ -97,6 +101,7 @@ watch(
         :enter="{
           opacity: 1,
           scale: 1,
+          transition: { ease: 'easeOut' },
         }"
       />
     </div>
diff --git a/content.config.ts b/content.config.ts
index 493844c..1051f62 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -55,14 +55,19 @@ export const collections = {
   }),
   skills: defineCollection({
     type: 'data',
-    source: 'skills/*.json',
+    source: 'skills.json',
     schema: z.object({
-      name: z.string(),
-      description: z.string(),
       items: z.object({
-        name: z.string(),
-        icon: z.string(),
-        color: z.string(),
+        id: z.string(),
+        name: z.object({
+          en: z.string(),
+          fr: z.string(),
+          es: z.string(),
+        }),
+        items: z.array(z.object({
+          name: z.string(),
+          icon: z.string(),
+        })),
       }),
     }),
   }),
diff --git a/content/skills.json b/content/skills.json
new file mode 100644
index 0000000..ced9e03
--- /dev/null
+++ b/content/skills.json
@@ -0,0 +1,178 @@
+{
+  "items": [
+    {
+      "id": "programmation",
+      "name": {
+        "en": "Programming",
+        "fr": "Programmation",
+        "es": "Programación"
+      },
+      "items": [
+        {
+          "name": "TypeScript",
+          "icon": "i-logos-typescript-icon"
+        },
+        {
+          "name": "JavaScript",
+          "icon": "i-logos-javascript"
+        },
+        {
+          "name": "HTML5",
+          "icon": "i-logos-html-5"
+        },
+        {
+          "name": "CSS3",
+          "icon": "i-logos-css-3"
+        },
+        {
+          "name": "Java",
+          "icon": "i-logos-java"
+        },
+        {
+          "name": "Python",
+          "icon": "i-logos-python"
+        },
+        {
+          "name": "R Lang",
+          "icon": "i-logos-r-lang"
+        }
+      ]
+    },
+    {
+      "id": "frontend",
+      "name": {
+        "en": "Frontend Development",
+        "fr": "Développement Frontend",
+        "es": "Desarrollo Frontend"
+      },
+      "items": [
+        {
+          "name": "Nuxt Stack",
+          "icon": "i-logos-nuxt-icon"
+        },
+        {
+          "name": "Vue",
+          "icon": "i-logos-vue"
+        },
+        {
+          "name": "Vite",
+          "icon": "i-logos-vitejs"
+        },
+        {
+          "name": "TailwindCss",
+          "icon": "i-logos-tailwindcss-icon"
+        }
+      ]
+    },
+    {
+      "id": "devops",
+      "name": {
+        "en": "DevOps & Infrastructure",
+        "fr": "DevOps & Infrastructure",
+        "es": "DevOps & Infrastructure"
+      },
+      "items": [
+        {
+          "name": "Docker",
+          "icon": "i-logos-docker-icon"
+        },
+        {
+          "name": "Git",
+          "icon": "i-logos-git-icon"
+        },
+        {
+          "name": "GitHub",
+          "icon": "i-logos-github-icon"
+        },
+        {
+          "name": "Traefik",
+          "icon": "i-devicon-traefikproxy"
+        },
+        {
+          "name": "Proxmox",
+          "icon": "i-devicon-proxmox-wordmark"
+        },
+        {
+          "name": "Linux",
+          "icon": "i-logos-linux-tux"
+        },
+        {
+          "name": "Vercel",
+          "icon": "i-logos-vercel-icon"
+        },
+        {
+          "name": "CloudFlare",
+          "icon": "i-logos-cloudflare-icon"
+        }
+      ]
+    },
+    {
+      "id": "backend",
+      "name": {
+        "en": "BackEnd & Data",
+        "fr": "BackEnd & Data",
+        "es": "BackEnd & Data"
+      },
+      "items": [
+        {
+          "name": "AdonisJs",
+          "icon": "i-logos-adonisjs-icon"
+        },
+        {
+          "name": "Nuxt (powered by Nitro)",
+          "icon": "i-logos-nuxt-icon"
+        },
+        {
+          "name": "PostgreSQL",
+          "icon": "i-logos-postgresql"
+        },
+        {
+          "name": "Redis",
+          "icon": "i-logos-redis"
+        },
+        {
+          "name": "MariaDB",
+          "icon": "i-logos-mariadb-icon"
+        }
+      ]
+    },
+    {
+      "id": "python-frameworks",
+      "name": {
+        "en": "Python Frameworks",
+        "fr": "Frameworks Python",
+        "es": "Frameworks de Python"
+      },
+      "items": [
+        {
+          "name": "Tensorflow",
+          "icon": "i-logos-tensorflow"
+        },
+        {
+          "name": "PyTorch",
+          "icon": "i-logos-pytorch-icon"
+        },
+        {
+          "name": "Scikit-Learn",
+          "icon": "i-devicon-scikitlearn"
+        },
+        {
+          "name": "Numpy",
+          "icon": "i-devicon-numpy"
+        },
+        {
+          "name": "MatPlotLib",
+          "icon": "i-devicon-matplotlib"
+        },
+        {
+          "name": "Seaborn",
+          "icon": "i-logos-seaborn-icon"
+        },
+        {
+          "name": "Pandas",
+          "icon": "i-devicon-pandas"
+        }
+      ]
+    }
+  ]
+}
diff --git a/content/skills/java.json b/content/skills/java.json
deleted file mode 100644
index e69de29..0000000
diff --git a/content/stack/0.programming-languages.json b/content/stack/0.programming-languages.json
deleted file mode 100644
index eeae949..0000000
--- a/content/stack/0.programming-languages.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "Programming",
-  "description": "Java, Python, Html, Css, JavaScript, TypeScript, SQL."
-}
diff --git a/content/stack/1.frontend.json b/content/stack/1.frontend.json
deleted file mode 100644
index 357a913..0000000
--- a/content/stack/1.frontend.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "FrontEnd",
-  "description": "Nuxt Stack (Framework, UI, Hub, Content, Studio), VueJS, TailwindCSS, Vite."
-}
diff --git a/content/stack/2.backend.json b/content/stack/2.backend.json
deleted file mode 100644
index f4c2a9c..0000000
--- a/content/stack/2.backend.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "BackEnd",
-  "description": "AdonisJs, Nuxt (powered by Nitro), PostgreSQL, Redis, MariaDB."
-}
diff --git a/content/stack/3.devops.json b/content/stack/3.devops.json
deleted file mode 100644
index 15e4033..0000000
--- a/content/stack/3.devops.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "DevOps",
-  "description": "Docker, Git, GitHub, Traefik, Proxmox, Linux."
-}
diff --git a/content/stack/4.python.json b/content/stack/4.python.json
deleted file mode 100644
index 3d28fc4..0000000
--- a/content/stack/4.python.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "Python Frameworks",
-  "description": "Pytorch, Scikit-learn, Tensorflow, Numpy, Matplotlib, Pandas, Seaborn."
-}
diff --git a/locales/en.json b/locales/en.json
index f9f2bb6..efd9c07 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -13,7 +13,7 @@
     },
     "cmd": {
       "placeholder": "Use the arrow keys to navigate through the preset prompts. Press Enter to send the message.",
-      "send": "Send message",
+      "send": "Send new message",
       "sending": "Sending..."
     }
   },
@@ -96,7 +96,9 @@
       "fetching": "Fetching the data...",
       "generating": "Generating the component...",
       "done": "Done!"
-    }
+    },
+    "welcome": "Welcome to ArtChat",
+    "ask": "Ask me anything about Arthur DANJOU"
   },
   "tool": {
     "language": {
@@ -161,5 +163,8 @@
   "error": {
     "main": "I think you're lost, let's go back to the",
     "redirect": "homepage"
+  },
+  "skills": {
+    "main": "As a software engineer and mathematics student, I combine scientific rigor with technical pragmatism to design solutions tailored to the challenges of data and mathematical projects. My approach focuses on a deep understanding of needs, from data preparation to deployment, while emphasizing modeling and performance optimization.\nPassionate about artificial intelligence and data science, I strive to balance innovation with statistical robustness. Always eager to learn, I explore both technological advancements and entrepreneurial or financial challenges. Curious and enthusiastic, I enjoy sharing knowledge and discovering new concepts, whether in theorems or emerging technologies."
   }
 }
diff --git a/locales/es.json b/locales/es.json
index 8aaa386..57450d5 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -13,7 +13,7 @@
     },
     "cmd": {
       "placeholder": "Use las flechas para navegar entre los prefacios de inmediato. Presione Entrar para enviar el mensaje.",
-      "send": "Enviar el mensaje",
+      "send": "Enviar un nuevo mensaje",
       "sending": "Enviando..."
     }
   },
@@ -96,7 +96,9 @@
       "fetching": "Obteniendo los datos...",
       "generating": "Generando el componente...",
       "done": "¡Hecho!"
-    }
+    },
+    "welcome": "Bienvenido en Artchat",
+    "ask": "Pregúntame cualquier cosa sobre Arthur Danjou"
   },
   "tool": {
     "language": {
@@ -161,5 +163,8 @@
   "error": {
     "main": "Creo que estás perdido, volvamos a la",
     "redirect": "página de inicio"
+  },
+  "skills": {
+    "main": "Como ingeniero de software y estudiante de matemáticas, combino el rigor científico con el pragmatismo técnico para diseñar soluciones adaptadas a los desafíos de proyectos de datos y matemáticos. Mi enfoque se centra en una comprensión profunda de las necesidades, desde la preparación de datos hasta su implementación, pasando por la modelización y la optimización del rendimiento.\nApasionado por la inteligencia artificial y la ciencia de datos, me esfuerzo por equilibrar la innovación con la robustez estadística. Siempre en busca de aprendizaje, exploro tanto los avances tecnológicos como los retos emprendedores o financieros. Curioso y entusiasta, disfruto compartiendo conocimientos y descubriendo nuevos conceptos, ya sean teoremas o tecnologías emergentes."
   }
 }
diff --git a/locales/fr.json b/locales/fr.json
index 4f12051..b6c6fb8 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -13,7 +13,7 @@
     },
     "cmd": {
       "placeholder": "Utilisez les flèches pour naviguer parmi les prompts préfaits. Appuyez sur Entrer pour envoyer le message.",
-      "send": "Envoyer le message",
+      "send": "Envoyer un nouveau message",
       "sending": "Envoi..."
     }
   },
@@ -96,7 +96,9 @@
       "fetching": "Récupération des données...",
       "generating": "Génération du composant...",
       "done": "Terminé !"
-    }
+    },
+    "welcome": "Bienvenue sur Artchat",
+    "ask": "Demandez-moi n'importe quoi sur Arthur Danjou"
   },
   "tool": {
     "language": {
@@ -161,5 +163,8 @@
   "error": {
     "main": "Je pense que vous êtes perdu, retournons en arrière à la",
     "redirect": "page d'accueil"
+  },
+  "skills": {
+    "main": "En tant qu’ingénieur logiciel et étudiant en mathématiques, j’allie rigueur scientifique et pragmatisme technique pour concevoir des solutions adaptées aux enjeux des projets data et mathématiques. Mon approche repose sur une compréhension approfondie des besoins, de la préparation des données à la mise en production, en passant par la modélisation et l’optimisation des performances. Passionné par l’intelligence artificielle et la data science, je m’attache à concilier innovation et robustesse statistique. Toujours en quête d’apprentissage, je m’intéresse autant aux avancées technologiques qu’aux défis entrepreneuriaux ou financiers. Curieux et enthousiaste, j’aime partager mes connaissances et explorer de nouveaux concepts, qu’il s’agisse de théorèmes ou de technologies émergentes."
   }
 }
diff --git a/types/chat.ts b/types/chat.ts
index 8f88077..40eaf1e 100644
--- a/types/chat.ts
+++ b/types/chat.ts
@@ -149,6 +149,7 @@ export const ChatMessages = [
         icon: 'i-ph-rocket-duotone',
         prompt: 'command.skills.prompt',
         type: ChatType.SKILLS,
+        fetchStates: [ChatFetchState.FETCHING],
       },
       {
         label: 'command.resume.label',