feat: add Skills component and integrate skills data; enhance CommandPalette and MessageContainer with improved UI and animations

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 {

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"

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>

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>

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>

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>

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(),
+        id: z.string(),
-        icon: z.string(),
+        name: z.object({
-        color: z.string(),
+          en: z.string(),
+          fr: z.string(),
+          es: z.string(),
+        }),
+        items: z.array(z.object({
+          name: z.string(),
+          icon: z.string(),
+        })),
       }),
     }),
   }),

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"
+        }
+      ]
+    }
+  ]
+}

content/stack/0.programming-languages.json

@@ -1,4 +0,0 @@
-{
-  "name": "Programming",
-  "description": "Java, Python, Html, Css, JavaScript, TypeScript, SQL."
-}

content/stack/1.frontend.json

@@ -1,4 +0,0 @@
-{
-  "name": "FrontEnd",
-  "description": "Nuxt Stack (Framework, UI, Hub, Content, Studio), VueJS, TailwindCSS, Vite."
-}

content/stack/2.backend.json

@@ -1,4 +0,0 @@
-{
-  "name": "BackEnd",
-  "description": "AdonisJs, Nuxt (powered by Nitro), PostgreSQL, Redis, MariaDB."
-}

content/stack/3.devops.json

@@ -1,4 +0,0 @@
-{
-  "name": "DevOps",
-  "description": "Docker, Git, GitHub, Traefik, Proxmox, Linux."
-}

content/stack/4.python.json

@@ -1,4 +0,0 @@
-{
-  "name": "Python Frameworks",
-  "description": "Pytorch, Scikit-learn, Tensorflow, Numpy, Matplotlib, Pandas, Seaborn."
-}

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

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

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

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',