Refactor: Update favicon and enhance user profile display

- Replaced the favicon with a new webp format for better performance.
- Updated the user avatar component in the Quote.vue file to use the new favicon and adjusted its size and styling.
- Added a new section in the projects and writings pages to introduce the author, including links to LinkedIn and GitHub profiles with a personalized message.
- Improved the layout and styling of the author introduction for better visual appeal.

app/app.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 useHead({
-  link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+  link: [{ rel: 'icon', type: 'image/webp', href: '/favicon.webp' }],
 })
 </script>
 

app/components/home/Quote.vue

@@ -9,12 +9,12 @@ const { t } = useI18n({
     <div class="flex items-center">
       <ClientOnly>
         <UTooltip text="It's me 👋">
-          <div class="flex items-center w-12 h-12">
+          <div class="flex items-center6">
             <UAvatar
               alt="Avatar"
-              class="hover:rotate-[360deg] duration-500 transform-gpu"
-              size="md"
-              src="/favicon.png"
+              class="hover:rotate-[360deg] duration-500 transform-gpu rounded-full"
+              size="xl"
+              src="/favicon.webp"
             />
           </div>
         </UTooltip>

app/pages/projects/[slug].vue

@@ -74,6 +74,43 @@ useSeoMeta({
       :value="project"
       class="!max-w-none prose dark:prose-invert"
     />
+    <div class="mt-16 flex gap-8 items-start p-8 border border-gray-200 dark:border-neutral-700 rounded-md">
+      <NuxtImg
+        src="/arthur.webp"
+        alt="Arthur Danjou"
+        class="w-24 h-24 rounded-full"
+      />
+      <i18n-t
+        keypath="thanks"
+        tag="p"
+        class="text-neutral-600 dark:text-neutral-400"
+      >
+        <template #linkedin>
+          <HomeLink
+            href="https://www.linkedin.com/in/arthur-danjou/"
+            icon="i-ph-linkedin-logo-duotone"
+            label="LinkedIn"
+            target="_blank"
+            class="inline-flex items-start gap-1 transform translate-y-1"
+          />
+        </template>
+        <template #github>
+          <HomeLink
+            href="https://github.com/arthurdanjou"
+            icon="i-ph-github-logo-duotone"
+            label="GitHub"
+            target="_blank"
+            class="inline-flex items-start gap-1 transform translate-y-1"
+          />
+        </template>
+        <template #name>
+          <strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
+        </template>
+        <template #jump>
+          <br> <br>
+        </template>
+      </i18n-t>
+    </div>
   </main>
 </template>
 
@@ -104,21 +141,28 @@ html {
       "title": "Translations alert!",
       "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
     },
-    "back": "Go back"
+    "back": "Go back",
+    "thanks": "Hi! I'm {name}, a Master's student in Applied Mathematics with a passion for AI, statistics, and building cool things with code. {jump} I love turning ideas into real, working systems—whether it's a machine learning model, a self-hosted service, or a data-driven project.{jump} This project is part of my journey to explore and apply what I learn every day. I share it here hoping it'll inspire or help others, just like I've been inspired by the open-source and tech communities. {jump} Feel free to reach out on {linkedin} or {github} if you have questions, feedback, or just want to connect!",
+    "name": "Arthur"
+
   },
   "fr": {
     "alert": {
       "title": "Attentions aux traductions!",
       "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
     },
-    "back": "Retourner en arrière"
+    "back": "Retourner en arrière",
+    "thanks": "Bonjour ! Je suis {name}, étudiant en Master de Mathématiques Appliquées avec une passion pour l'IA, les statistiques et la création de projets intéressants avec du code. {jump} J'adore transformer des idées en systèmes réels et fonctionnels, que ce soit un modèle de machine learning, un service auto-hébergé ou un projet basé sur les données. {jump} Ce projet fait partie de mon parcours pour explorer et appliquer ce que j'apprends chaque jour. Je le partage ici dans l'espoir qu'il inspire ou aide d'autres personnes, tout comme j'ai été inspiré par les communautés open-source et tech. {jump} N'hésitez pas à me contacter sur {linkedin} ou {github} si vous avez des questions, des retours ou si vous souhaitez simplement échanger !",
+    "name": "Arthur"
   },
   "es": {
     "alert": {
       "title": "Cuidado con las traducciones!",
       "description": " Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
     },
-    "back": "Volver atrás"
+    "back": "Volver atrás",
+    "thanks": "¡Hola! Soy {name}, estudiante de Máster en Matemáticas Aplicadas con una pasión por la IA, la estadística y la creación de cosas interesantes con código. {jump} Me encanta convertir ideas en sistemas reales y funcionales, ya sea un modelo de aprendizaje automático, un servicio autoalojado o un proyecto basado en datos. {jump} Este proyecto forma parte de mi camino para explorar y aplicar lo que aprendo cada día. Lo comparto aquí con la esperanza de que inspire o ayude a otros, así como yo he sido inspirado por las comunidades de código abierto y tecnología. {jump} No dudes en contactarme en {linkedin} o {github} si tienes preguntas, comentarios o simplemente quieres conectar!",
+    "name": "Arthur"
   }
 }
 </i18n>

app/pages/writings/[slug].vue

@@ -131,7 +131,7 @@ function scrollToSection(id: string) {
         />
 
         <template #content>
-          <div class="text-neutral-500">
+          <div class="text-neutral-500 p-2">
             <div
               v-for="link in post!.body!.toc!.links"
               :key="link.id"
@@ -143,7 +143,7 @@ function scrollToSection(id: string) {
                 variant="link"
                 color="neutral"
                 :block="true"
-                class="flex justify-start items-start"
+                class="flex justify-start items-start p-1"
                 @click="scrollToSection(link.id)"
               />
             </div>
@@ -169,20 +169,48 @@ function scrollToSection(id: string) {
         :value="post"
         class="!max-w-none prose dark:prose-invert"
       />
-      <USeparator
-        class="my-16"
-        icon="i-ph-hands-clapping-duotone"
-      />
-      <div class="space-y-8">
-        <i18n-t
-          keypath="thanks"
-          tag="p"
-        >
-          <template #like>
-            <strong>{{ t('like') }}</strong>
-          </template>
-        </i18n-t>
-        <div class="flex gap-4 items-center flex-wrap">
+      <div class="space-y-8 mt-16">
+        <div class="flex gap-8 items-start p-8 border border-gray-200 dark:border-neutral-700 rounded-md">
+          <NuxtImg
+            src="/arthur.webp"
+            alt="Arthur Danjou"
+            class="w-24 h-24 rounded-full"
+          />
+          <i18n-t
+            keypath="thanks"
+            tag="p"
+            class="text-neutral-600 dark:text-neutral-400"
+          >
+            <template #linkedin>
+              <HomeLink
+                href="https://www.linkedin.com/in/arthur-danjou/"
+                icon="i-ph-linkedin-logo-duotone"
+                label="LinkedIn"
+                target="_blank"
+                class="inline-flex items-start gap-1 transform translate-y-1"
+              />
+            </template>
+            <template #github>
+              <HomeLink
+                href="https://github.com/arthurdanjou"
+                icon="i-ph-github-logo-duotone"
+                label="GitHub"
+                target="_blank"
+                class="inline-flex items-start gap-1 transform translate-y-1"
+              />
+            </template>
+            <template #comment>
+              <strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
+            </template>
+            <template #name>
+              <strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
+            </template>
+            <template #jump>
+              <br> <br>
+            </template>
+          </i18n-t>
+        </div>
+        <div class="flex gap-8 items-center flex-wrap">
           <UButton
             :label="(postDB?.likes ?? 0) > 1 ? `${postDB?.likes ?? 0} likes` : `${postDB?.likes ?? 0} like`"
             :color="likeCookie ? 'red' : 'neutral'"
@@ -258,8 +286,9 @@ html {
       "title": "Translations alert!",
       "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
     },
-    "thanks": "Thanks for reading this post! If you liked it, please consider sharing it with your friends. {like}",
-    "like": "Don't forget to leave a like!",
+    "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",
     "link": {
       "copied": "Link copied",
       "copy": "Copy link"
@@ -281,8 +310,9 @@ html {
       "title": "Attentions aux traductions!",
       "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
     },
-    "thanks": "Merci d'avoir lu cet article! Si vous l'avez aimé, n'hésitez pas à le partager avec vos amis. {like}",
-    "like": "N'oubliez pas de laisser un like!",
+    "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",
     "link": {
       "copied": "Lien copié",
       "copy": "Copier le lien"
@@ -302,10 +332,11 @@ html {
     },
     "alert": {
       "title": "Cuidado con las traducciones!",
-      "description": " Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
+      "description": "Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
     },
-    "thanks": "Muchas gracias por leer este postougracoias afic! Si te ha gustado, no dudes en compartirlo con tus amigos.tsaf. {like}",
-    "like": "No te olvides de dejar un like!",
+    "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",
     "link": {
       "copied": "Link copiado",
       "copy": "Copiar link"

content/writings/rag-ai-agents.md

@@ -0,0 +1,125 @@
+---
+slug: rag-ai-agents
+title: "Understanding AI Agents, LLMs, and RAG: A Powerful Synergy"
+description: Explore how AI agents, Large Language Models (LLMs), and Retrieval-Augmented Generation (RAG) combine to create intelligent, autonomous systems that reason, act, and interact with real-time data.
+readingTime: 5
+publishedAt: 2025/04/06
+tags:
+  - ai
+---
+
+In the rapidly evolving world of artificial intelligence, the combination of Large Language Models (LLMs), AI agents, and Retrieval-Augmented Generation (RAG) is driving new possibilities for autonomous systems. These components, when integrated, create intelligent systems capable of performing complex tasks, reasoning, and interacting with the world around them. In this post, we'll dive into each of these elements and explore their synergy.
+
+## 1 - What is an Agent?
+
+An **AI agent** is an autonomous entity capable of perceiving its environment, making decisions, and taking actions based on its observations. In simpler terms, an agent is a system that can autonomously interact with the world or other systems to achieve a specific goal.
+
+Agents can be divided into two broad categories:
+
+- **Reactive Agents**: These agents respond to specific stimuli without maintaining any internal state. They simply react based on their immediate environment.
+- **Proactive Agents**: These agents not only react to their environment but also plan and act based on future goals.
+
+In modern AI, agents are often used in robotics, virtual assistants, and autonomous systems like **AutoGPT** or **LangChain**, which are capable of autonomously handling tasks like research, writing, and decision-making.
+
+## 2 - What is a LLM?
+
+A **Large Language Model (LLM)** is a machine learning model trained on vast amounts of text data, enabling it to understand and generate human-like language. These models, like **GPT (e.g., GPT-4)**, **Claude**, **Mistral**, and **LLaMA**, can produce coherent and contextually relevant responses to a wide range of queries.
+
+LLMs work by predicting the next token (word or part of a word) based on the input they receive. This ability allows them to generate text, summarize documents, answer questions, and even carry on conversations that seem remarkably human.
+
+However, LLMs have their limitations. They can sometimes generate **hallucinations** (incorrect or fabricated information), and their knowledge is **static**, meaning they can become outdated as they don’t automatically update from the web.
+
+## 3 - Messages and Tokens
+
+When interacting with LLMs or agents, information is transmitted through **messages** and **tokens**.
+
+- **Messages** are the pieces of communication sent between the user and the system (or between different components of the AI system). These can be user queries, responses, or commands.
+  
+- **Tokens** are the basic units of text that an LLM processes. A token could be a word, part of a word, or even punctuation. In GPT models, a single token can represent a word like "dog" or even part of a word like "re-" in "reliable."
+
+Managing tokens is essential because LLMs have a **token limit**, meaning they can only handle a fixed number of tokens in a single input/output sequence. This limit impacts performance and context retention. Long conversations or documents might require careful handling of token counts to maintain coherence.
+
+## 4 - What Are Tools?
+
+In the context of AI agents, **tools** refer to external resources or systems that the agent can access to help it accomplish tasks. These tools can include:
+
+- **APIs** for data retrieval (like web scraping or querying databases)
+- **External software** (e.g., calculation engines, email clients)
+- **Search engines** to find up-to-date information
+
+For example, an AI agent might use a **search engine** tool to retrieve the latest news articles, then generate a summary based on that real-time data. These tools allow agents to extend their capabilities beyond the static information contained within their training data.
+
+## 5 - Thought - Actions - Observe
+
+An AI agent typically follows a basic cycle of:
+
+1. **Thought**: The agent processes its input and reasons through the task using models like LLMs.
+
+| Type of Thought     | Example                                                                 |
+|---------------------|-------------------------------------------------------------------------|
+| Planning            | “I need to break this task into three steps: 1) gather data, 2) analyze trends, 3) generate report” |
+| Analysis            | “Based on the error message, the issue appears to be with the database connection parameters” |
+| Decision Making     | “Given the user's budget constraints, I should recommend the mid-tier option” |
+| Problem Solving     | “To optimize this code, I should first profile it to identify bottlenecks” |
+| Memory Integration  | “The user mentioned their preference for Python earlier, so I'll provide examples in Python” |
+| Self-Reflection     | “My last approach didn't work well, I should try a different strategy” |
+| Goal Setting        | “To complete this task, I need to first establish the acceptance criteria” |
+| Prioritization      | “The security vulnerability should be addressed before adding new features” |
+
+2. **Action**: The agent performs an action, such as sending a query, interacting with an API, or initiating a task.
+
+| Type of Action      | Description                                                           |
+|---------------------|-----------------------------------------------------------------------|
+| Information Gathering| Performing web searches, querying databases, or retrieving documents. |
+| Tool Usage          | Making API calls, running calculations, and executing code.          |
+| Environment Interaction | Manipulating digital interfaces or controlling physical devices.    |
+| Communication       | Engaging with users via chat or collaborating with other agents.     |
+
+3. **Observe**: The agent receives feedback or new data from the environment, which informs its next set of decisions.
+
+| Type of Observation   | Example                                                                  |
+|-----------------------|--------------------------------------------------------------------------|
+| System Feedback       | Error messages, success notifications, status codes                      |
+| Data Changes          | Database updates, file system modifications, state changes               |
+| Environmental Data    | Sensor readings, system metrics, resource usage                         |
+| Response Analysis     | API responses, query results, computation outputs                       |
+| Time-based Events     | Deadlines reached, scheduled tasks completed                             |
+
+This cycle allows agents to learn, adapt, and improve over time. It also highlights the agent's ability to take actions in real-time, often guided by LLMs, which provide the reasoning and decision-making capabilities.
+
+To better understand these steps, here's a breakdown of the types of **thought**, **action**, and **observation** an AI agent might engage in:
+
+This **Thought → Action → Observe** cycle enables agents to make informed decisions, take meaningful actions, and adjust their behavior based on the results of those actions. Each step is critical for ensuring that the agent remains effective, adaptable, and responsive to its environment.
+
+## 6 - What is RAG?
+
+**Retrieval-Augmented Generation (RAG)** is a technique that enhances LLMs by integrating them with external data retrieval systems. In essence, RAG combines the power of **retrieval-based methods** (finding relevant information from external sources) with **generation-based methods** (creating text based on that information).
+
+Here's how it works:
+1. The LLM retrieves relevant data or documents using a search engine or database query.
+2. The LLM then generates a response based on the retrieved information.
+
+RAG solves a major problem with LLMs: the **outdated or incomplete information** they may have. By pulling in real-time data, RAG ensures that the generated content is relevant and grounded in current knowledge. 
+
+A classic example of RAG is when you ask an AI to summarize the latest research on a particular topic. Instead of relying on the model’s static knowledge base, the model can retrieve relevant papers or articles and generate an accurate summary.
+
+## 7 - Synergy Between RAG and AI Agents
+
+The combination of **RAG** and **AI agents** opens the door to highly autonomous systems capable of not only generating content but also acting on the information in real-time.
+
+Here's how they complement each other:
+
+- **RAG** acts as an external memory or knowledge source for AI agents, providing them with up-to-date information to improve their decision-making and outputs.
+- **AI agents**, powered by LLMs, can process this information and take actions based on it, whether it's generating a response, making a decision, or interacting with other systems.
+
+For example, imagine an AI agent that's tasked with assisting a business in handling customer inquiries. It could use RAG to retrieve relevant customer information and FAQs, then generate a response based on that data. It might then take action by sending an email or updating a CRM system based on the customer’s query.
+
+This synergy leads to **autonomous, efficient systems** that can process, reason, and act in a dynamic environment.
+
+## 8 - Conclusion
+
+The combination of **RAG**, **LLMs**, and **AI agents** represents a major leap forward in the field of AI. By merging data retrieval with powerful language models and autonomous agents, we can create intelligent systems that are more accurate, adaptable, and autonomous than ever before.
+
+As these technologies evolve, we can expect even more sophisticated systems capable of transforming industries like healthcare, finance, customer service, and beyond. The future is bright for intelligent agents powered by this synergy!
+
+If you have questions or want to dive deeper into any of the topics covered, feel free to comment below!