From 283cf7352e2fc66ebdb0748cc0508681ac914787 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 4 Sep 2025 15:42:13 +0200
Subject: [PATCH] feat: add Writings section with dynamic content; enhance
 localization for projects and writings

---
 app/components/chat/MessageContainer.vue |  3 +
 app/components/post/Alert.vue            | 18 ++---
 app/components/tool/Projects.vue         | 17 +++--
 app/components/tool/Writings.vue         | 51 ++++++++++++++
 app/pages/writings/[slug].vue            | 90 ++++++++++++++++++++++++
 content/writings/log-lin-reg.md          |  2 +-
 locales/en.json                          | 10 ++-
 locales/es.json                          | 12 ++--
 locales/fr.json                          |  8 +--
 9 files changed, 174 insertions(+), 37 deletions(-)
 create mode 100644 app/components/tool/Writings.vue
 create mode 100644 app/pages/writings/[slug].vue

diff --git a/app/components/chat/MessageContainer.vue b/app/components/chat/MessageContainer.vue
index 28bee28..c8d343b 100644
--- a/app/components/chat/MessageContainer.vue
+++ b/app/components/chat/MessageContainer.vue
@@ -89,6 +89,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.PROJECTS">
           <ToolProjects />
         </div>
+        <div v-else-if="message.type === ChatType.WRITINGS">
+          <ToolWritings />
+        </div>
         <div v-else>
           {{ message }}
         </div>
diff --git a/app/components/post/Alert.vue b/app/components/post/Alert.vue
index 3b47593..c8d854c 100644
--- a/app/components/post/Alert.vue
+++ b/app/components/post/Alert.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
 const { t, locale } = useI18n()
-const closed = ref(false)
 </script>
 
 <template>
-  <UAlert
-    v-if="locale !== 'en' && !closed"
-    :description="t('alert.description')"
-    :title="t('alert.title')"
-    color="error"
-    icon="i-ph-warning-duotone"
-    variant="soft"
-    :close="{
-      color: 'error',
-    }"
-    @update:open="closed = true"
-  />
+  <h3
+    v-if="locale !== 'en'"
+  >
+    ⚠️ {{ t('alert') }}
+  </h3>
 </template>
diff --git a/app/components/tool/Projects.vue b/app/components/tool/Projects.vue
index ee68168..d2979f9 100644
--- a/app/components/tool/Projects.vue
+++ b/app/components/tool/Projects.vue
@@ -1,21 +1,28 @@
 <script lang="ts" setup>
-const { locale, locales, t } = useI18n()
+const { locale, locales } = useI18n()
 const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
 
-const { data: projects } = await useAsyncData('projects-index', async () => await queryCollection('projects').where('favorite', '=', true).select().all())
+const { data: projects } = await useAsyncData('projects-index', async () => await queryCollection('projects').where('favorite', '=', true).select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').all())
 const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
 </script>
 
 <template>
   <section>
-    <PostAlert class="mb-2" />
     <div class="prose dark:prose-invert">
-      <p>{{ t('tool.projects') }}</p>
+      <PostAlert class="mb-2" />
+      <i18n-t keypath="tool.projects" tag="p">
+        <template #canva>
+          CANVA
+        </template>
+        <template #space>
+          <br>
+        </template>
+      </i18n-t>
     </div>
     <div v-if="projects" class="m-1 my-4 flex flex-col gap-4">
       <div v-for="project in projects" :key="project.id">
         <NuxtLink :to="`/projects/${project.slug}`">
-          <UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900">
+          <UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-black duration-300">
             <h1 class="text-xl font-medium">
               {{ project.title }}
             </h1>
diff --git a/app/components/tool/Writings.vue b/app/components/tool/Writings.vue
new file mode 100644
index 0000000..0509114
--- /dev/null
+++ b/app/components/tool/Writings.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const { locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
+
+const { data: writings } = await useAsyncData('writings-index', async () => await queryCollection('writings').order('publishedAt', 'DESC').select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').limit(2).all())
+const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
+</script>
+
+<template>
+  <section>
+    <div class="prose dark:prose-invert">
+      <PostAlert class="mb-2" />
+      <i18n-t keypath="tool.writings" tag="p">
+        <template #canva>
+          CANVA
+        </template>
+        <template #space>
+          <br>
+        </template>
+      </i18n-t>
+    </div>
+    <div v-if="writings" class="m-1 my-4 flex flex-col gap-4">
+      <div v-for="writing in writings" :key="writing.id">
+        <NuxtLink :to="`/writings/${writing.slug}`">
+          <UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-black duration-300">
+            <h1 class="text-xl font-medium">
+              {{ writing.title }}
+            </h1>
+            <h3 class="text-muted my-2">
+              {{ writing.description }}
+            </h3>
+            <div class="flex items-center justify-between">
+              <p class="text-sm text-muted-foreground">
+                {{ date(writing.publishedAt).value }}
+              </p>
+              <div class="flex flex-wrap gap-2">
+                <UBadge
+                  v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                  :key="tag"
+                  variant="soft"
+                >
+                  {{ tag }}
+                </UBadge>
+              </div>
+            </div>
+          </UCard>
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
new file mode 100644
index 0000000..c5262e3
--- /dev/null
+++ b/app/pages/writings/[slug].vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { data: writing } = await useAsyncData(`writings/${route.params.slug}`, () =>
+  queryCollection('writings').path(`/writings/${route.params.slug}`).first())
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: writing.value?.title,
+  description: writing.value?.description,
+  author: 'Arthur Danjou',
+})
+</script>
+
+<template>
+  <main v-if="writing" 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"
+        >
+          {{ writing.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(writing.publishedAt, 'DD MMMM YYYY').value }} </p>
+        </div>
+      </div>
+      <p class="mt-2 text-base">
+        {{ writing.description }}
+      </p>
+    </div>
+    <div
+      v-if="writing.cover"
+      class="w-full rounded-md my-8"
+    >
+      <ProseImg
+        :src="`/projects/${writing.cover}`"
+        label="Project cover"
+      />
+    </div>
+    <USeparator
+      class="my-4"
+      icon="i-ph-pencil-line-duotone"
+    />
+    <ClientOnly>
+      <ContentRenderer
+        :value="writing"
+        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>
diff --git a/content/writings/log-lin-reg.md b/content/writings/log-lin-reg.md
index 82a7546..b197b73 100644
--- a/content/writings/log-lin-reg.md
+++ b/content/writings/log-lin-reg.md
@@ -1,5 +1,5 @@
 ---
-slug: log-ling-reg
+slug: log-lin-reg
 title: "Linear vs. Logistic Regression: A Comprehensive Guide to Understanding
   Their Differences and Applications"
 description: This article compares linear and logistic regression, highlighting
diff --git a/locales/en.json b/locales/en.json
index 7d84a27..d96f4fb 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -181,19 +181,17 @@
       "humidity": "Humidity",
       "wind": "Wind"
     },
-    "projects": "Here are the projects that I am most proud of: some are of statistical modeling, others of software development, and others of the deployment of infrastructure. \nEveryone reflects my commitment to rigorously mobilize my skills in the service of concrete issues linked to artificial intelligence, mathematics or development."
+    "projects": "A selection of my projects developed in R, Python, and web development, covering diverse areas such as data analysis, machine learning, and web applications. These projects highlight my skills in coding, problem-solving, and solution design. {space}Here, I present the three projects I am most proud of, but you can explore all my projects directly on the {canva}.",
+    "writings": "I share my reflections on mathematics, artificial intelligence, development and my passions, by organizing them to follow the evolution of my ideas and projects. {space}Here you will find the two most recent articles, but all my writings are accessible on the {canva}, to explore my universe more in depth, Maths and AI."
   },
   "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."
-  },
-  "alert": {
-    "description": "For lack of time, the French translation is not available. \nThank you for your understanding.",
-    "title": "Watch out for translations"
+    "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.Passionate 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."
   },
+  "alert": "For lack of time, I did not have time to translate this content into English. Thank you for your understanding.",
   "post": {
     "footer": {
       "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!",
diff --git a/locales/es.json b/locales/es.json
index 57d63b7..d4a2876 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -181,18 +181,15 @@
       "humidity": "Humedad",
       "wind": "Viento"
     },
-    "projects": "Estos son los proyectos de los que estoy más orgulloso: algunos son de modelado estadístico, otros de desarrollo de software y otros del despliegue de infraestructura. Todos reflejan mi compromiso de movilizar rigurosamente mis habilidades al servicio de temas concretos vinculados a la inteligencia artificial, las matemáticas o el desarrollo."
+    "writings": "Comparto mis reflexiones sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones, organizándolas para seguir la evolución de mis ideas y proyectos. {space}Aquí encontrará los dos artículos más recientes, pero todos mis escritos son accesibles en el {canva}, para explorar mi universo más en profundidad, matemáticas y IA.",
+    "projects": "Una selección de mis proyectos realizados en R, Python y desarrollo web, que abarcan áreas diversas como el análisis de datos, el aprendizaje automático y las aplicaciones web. Estos proyectos destacan mis habilidades en programación, resolución de problemas y diseño de soluciones. {space}Aquí presento los tres proyectos de los que estoy más orgulloso, pero puedes consultar todos mis proyectos directamente en el {canva}."
   },
   "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."
-  },
-  "alert": {
-    "description": "En falta de tiempo, la traducción al español no está disponible. Gracias por su comprensión.",
-    "title": "Cuidado con las traducciones"
+    "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.Apasionado 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."
   },
   "post": {
     "footer": {
@@ -205,5 +202,6 @@
       "copy": "Copiar link"
     },
     "top": "Ir arriba"
-  }
+  },
+  "alert": "Por falta de tiempo, no tuve tiempo para traducir este contenido al francés. Gracias por su comprensión."
 }
diff --git a/locales/fr.json b/locales/fr.json
index 760ce39..406e022 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -181,7 +181,8 @@
       "humidity": "Humidité",
       "wind": "Vent"
     },
-    "projects": "Voici les projets dont je suis le plus fier : certains relèvent de la modélisation statistique, d'autres du développement logiciel, et d'autres encore du déploiement d’infrastructures. Chacun reflète mon engagement à mobiliser rigoureusement mes compétences au service de problématiques concrètes liées à l’intelligence artificielle, aux mathématiques ou au développement."
+    "projects": "Une sélection de mes projets réalisés en R, Python et développement web, couvrant des domaines variés comme l'analyse de données, l'apprentissage automatique et les applications web. Ces projets mettent en lumière mes compétences en codage, résolution de problèmes et conception de solutions. {space} Ici, je présente les trois projets dont je suis le plus fier, mais vous pouvez découvrir tous mes projets directement sur le {canva}.",
+    "writings": "Je partage mes réflexions sur les mathématiques, l’intelligence artificielle, le développement et mes passions, en les organisant pour suivre l’évolution de mes idées et projets. {space}Ici, vous trouverez les deux articles les plus récents, mais tous mes écrits sont accessibles sur le {canva}, pour explorer plus en profondeur mon univers entre code, maths et IA."
   },
   "error": {
     "main": "Je pense que vous êtes perdu, retournons en arrière à la",
@@ -190,10 +191,7 @@
   "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."
   },
-  "alert": {
-    "description": "Par manque de temps, la traduction française n'est pas disponible. Merci de votre compréhension.",
-    "title": "Attention aux traductions"
-  },
+  "alert": "Par manque de temps, je n'ai pas eu le temps de traduire ce contenu en français. Merci de votre compréhension.",
   "post": {
     "footer": {
       "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 !",