Refactor: Split portfolio to projects and writings sections, and update content structure

- Renamed 'portfolio' collection to 'projects' in content configuration.
- Introduced a new 'writings' collection with corresponding schema.
- Updated README to reflect changes in content structure and navigation.
- Removed the old portfolio page and added new pages for projects and writings.
- Added multiple new project and writing markdown files with relevant content.
- Updated license year to 2025.
- Enhanced AppHeader for new navigation links.
- Improved ProseImg component styling.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Arthur Danjou
+Copyright (c) 2025 Arthur Danjou
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -18,14 +18,9 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
 - [Features](#-features)
 - [Tech Stack](#️-tech-stack)
 - [Project Structure](#-project-structure)
-- [Development](#-development)
-  - [Prerequisites](#prerequisites)
-  - [Installation](#installation)
-  - [Configuration](#configuration)
-  - [Running Locally](#running-locally)
-  - [Deployment](#deployment)
 - [Adding Content](#-adding-content)
-  - [Portfolio Projects](#portfolio-projects)
+  - [Projects](#projects)
+  - [Writings](#writings)
   - [Uses Page](#uses-page)
 - [Integrations](#-integrations)
 - [License](#-license)
@@ -61,12 +56,14 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
 ├── assets/              # Static assets like global styles
 ├── components/          # Vue components
 ├── content/             # Markdown content for the portfolio
-│   ├── portfolio/       # Portfolio projects
+│   ├── projects/        # Portfolio projects
+│   ├── writings/        # Writings
 │   └── uses/            # Uses page items
 ├── layouts/             # Page layouts
 ├── pages/               # Application pages
 ├── public/              # Public static files
-│   └── portfolio/       # Portfolio images
+│   ├── projects/        # Projects images
+│   └── writings/        # Writings images
 ├── server/              # Server API routes
 ├── utils/               # Utility functions
 ├── .env.example         # Example environment variables
@@ -75,88 +72,24 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
 └── README.md            # Project documentation
 ```
 
-## 🚀 Development
-
-### Prerequisites
-
-- [Node.js](https://nodejs.org/) (v16 or later)
-- [pnpm](https://pnpm.io/) (v7 or later)
-
-### Installation
-
-```bash
-# Clone the repository
-git clone https://github.com/yourusername/portfolio-2024.git
-cd portfolio-2024
-
-# Install dependencies (with hoisting for Nuxt 3 compatibility)
-pnpm i --shamefully-hoist
-```
-
-### Configuration
-
-Create a `.env` file in the root directory with the following variables:
-
-```env
-# WakaTime Integration
-NUXT_WAKATIME_USER_ID=your_wakatime_user_id
-NUXT_WAKATIME_CODING=your_wakatime_coding_endpoint
-NUXT_WAKATIME_LANGUAGES=your_wakatime_languages_endpoint
-NUXT_WAKATIME_OS=your_wakatime_os_endpoint
-NUXT_WAKATIME_EDITORS=your_wakatime_editors_endpoint
-
-# SEO
-NUXT_PUBLIC_SITE_URL=https://your-domain.com
-
-# Nuxt Hub Deployment
-NUXT_HUB_PROJECT_KEY=your_nuxt_hub_project_key
-
-# Discord Integration
-NUXT_DISCORD_ID=your_discord_app_id
-NUXT_DISCORD_TOKEN=your_discord_token
-NUXT_DISCORD_USER_ID=your_discord_user_id
-
-# Cloud Files
-NUXT_PUBLIC_CLOUD_RESUME=https://link-to-your-resume.pdf
-
-# Internationalization
-NUXT_PUBLIC_I18N_BASE_URL=https://your-domain.com
-```
-
-### Running Locally
-
-```bash
-# Start development server
-pnpm dev
-
-# Build for production
-pnpm build
-
-# Preview production build
-pnpm preview
-```
-
-### Deployment
-
-The portfolio is configured to deploy automatically using NuxtHub. Push changes to your main branch to trigger a deployment.
-
 ## 🍱 Adding Content
 
-### Portfolio Projects
+### Projects
 
-1. Create a new `.md` file in the `/content/portfolio/` directory
+1. Create a new `.md` file in the `/content/projects/` directory
 2. Follow the structure of existing projects:
 
 ```md
 ---
+---
+slug: project-slug
 title: Project Title
-description: Brief description of the project
+description: A brief description of the project
-date: 2023-01-01
+publishedAt: YYYY/MM/DD
-img: /portfolio/project-image.png
+readingTime: 1
-tags: [tag1, tag2, tag3]
+cover: project-slug/cover.png
-links:
+tags:
-  website: https://project-url.com
+  - web
-  github: https://github.com/user/repo
 ---
 
 ## Project content goes here
@@ -164,20 +97,48 @@ links:
 Detailed description and information about the project.
 ```
 
-3. Add related project images to `/public/portfolio/`
+3. Add related project images to `/public/projects/project-slug/`
+
+### Writings
+
+1. Create a new `.md` file in the `/content/writings/` directory
+2. Follow the structure of existing projects:
+
+```md
+---
+slug: article-slug
+title: The title of the article
+description: A brief description of the article
+readingTime: 1
+publishedAt: YYYY/MM/DD
+cover: article-slug/cover.png
+tags:
+  - tag1
+  - tag2
+  - tag3
+---
+
+## Writing content goes here
+
+Detailed description and information about the article.
+```
+
+3. Add related writing images to `/public/writings/article-slug/`
 
 ### Uses Page
 
 Add new items to the `/content/uses/` directory following the existing pattern:
 
-```md
+```json
----
+{
-category: Category Name
+  "name": "Name of the item",
-items:
+  "description": {
-  - name: Item Name
+    "en": "Item description in English",
-    description: Item description
+    "fr": "Item description in French",
-    link: https://item-url.com
+    "es": "Item description in Spanish"
----
+  },
+  "category": "Item category name"
+}
 ```
 
 ## 🔌 Integrations

app/components/AppHeader.vue

@@ -28,13 +28,22 @@ const navs = [
   },
   {
     label: {
-      en: 'portfolio',
+      en: 'writings',
-      fr: 'portfolio',
+      fr: 'écrits',
       es: 'escritos',
     },
-    to: '/portfolio',
+    to: '/writings',
     icon: 'books-duotone',
   },
+  {
+    label: {
+      en: 'projects',
+      fr: 'projets',
+      es: 'proyectos',
+    },
+    to: '/projects',
+    icon: 'code-duotone',
+  },
   {
     label: {
       en: 'resume',

app/components/content/ProseImg.vue

@@ -5,7 +5,7 @@ defineProps<{ src: string, label: string, caption?: string }>()
 <template>
   <div class="flex flex-col justify-center items-center prose-none my-8">
     <img :src="src" :alt="label" class="w-full h-auto m-0 prose-none">
-    <p class="text-sm text-gray-500 dark:text-gray-300 prose-none">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 prose-none">
       {{ caption }}
     </p>
   </div>

app/pages/portfolio/index.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import type { Tag } from '~~/types'
-import { TAGS } from '~~/types'
-
-const { t, locale } = useI18n({
-  useScope: 'local',
-})
-useSeoMeta({
-  title: 'My Shelf',
-  description: t('description'),
-})
-
-const tagFilter = ref<string[]>([])
-
-const { data: writings, refresh } = await useAsyncData('all-portfolio', async () => {
-  const writings = await queryCollection('portfolio')
-    .order('publishedAt', 'DESC')
-    .all()
-  return writings.filter((writing) => {
-    if (tagFilter.value.length === 0)
-      return true
-    return writing.tags.some(tag => tagFilter.value.includes(tag.toLowerCase()))
-  })
-})
-
-watch(tagFilter, async () => await refresh())
-
-const tags: Array<Tag> = [
-  ...TAGS.sort((a, b) => a.label.localeCompare(b.label)),
-]
-
-function updateTag(payload: Tag[]) {
-  tagFilter.value = payload.map(tag => tag.label.toLowerCase())
-}
-</script>
-
-<template>
-  <main class="space-y-12">
-    <AppTitle
-      :description="t('description')"
-      :title="t('title')"
-    />
-    <UAlert
-      v-if="locale !== 'en'"
-      :description="t('alert.description')"
-      :title="t('alert.title')"
-      color="red"
-      icon="i-ph-warning-duotone"
-      variant="outline"
-    />
-    <div class="flex justify-end sticky top-4 z-50">
-      <USelectMenu
-        :placeholder="t('tags')"
-        :items="tags"
-        multiple
-        color="neutral"
-        :highlight-on-hover="true"
-        class="w-full md:w-1/3"
-        @update:model-value="updateTag"
-      />
-    </div>
-    <ul class="grid grid-cols-1 gap-4">
-      <NuxtLink
-        v-for="(writing, id) in writings"
-        :key="id"
-        :to="writing.path"
-      >
-        <li
-          class=" h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600  duration-300"
-        >
-          <article class="space-y-2">
-            <h1
-              class="font-bold text-lg duration-300 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>·
-              <UIcon name="ph:timer-duotone" size="16" />
-              <p>{{ writing.readingTime }}min long</p>
-            </div>
-            <h3>
-              {{ writing.description }}
-            </h3>
-          </article>
-          <div class="flex gap-2 mt-4 flex-wrap">
-            <ClientOnly>
-              <UBadge
-                v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
-                :key="tag"
-                :color="TAGS.find(color => color.label.toLowerCase() === tag)?.color"
-                variant="soft"
-                size="sm"
-                class="rounded-full"
-              >
-                <div class="flex gap-1 items-center">
-                  <UIcon :name="TAGS.find(icon => icon.label.toLowerCase() === tag)?.icon || ''" size="16" />
-                  <p>{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}</p>
-                </div>
-              </UBadge>
-            </ClientOnly>
-          </div>
-        </li>
-      </NuxtLink>
-    </ul>
-  </main>
-</template>
-
-<i18n lang="json">
-{
-  "en": {
-    "title": "Writing on my life, development, academic and personal projects and passions",
-    "description": "All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.",
-    "alert": {
-      "title": "Translations alert!",
-      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
-    },
-    "tags": "Select tags to filter"
-  },
-  "fr": {
-    "title": "Écrits sur ma vie, le développement, mes projets et mes passions.",
-    "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique. J'écris aussi sur mes projets, mes découvertes et mes pensées.",
-    "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."
-    },
-    "tags": "Sélectionner des tags pour filtrer"
-  },
-  "es": {
-    "title": "Escritos sobre mi vida, el desarrollo, mis proyectos y mis pasiones.",
-    "description": " Todas mis reflexiones sobre la programación, las matemáticas, la conception de la inteligencia artificial, etc. están puestas en orden cronológico. También escribo sobre mis proyectos, mis descubrimientos y mis pensamientos.",
-    "alert": {
-      "title": "Cuidado con las traducciones !",
-      "description": "Por problema de tiempo, los artículos están solo disponibles en ingles. Gracias por vuestra comprensión."
-    },
-    "tags": "Seleccionar etiquetas para filtrar"
-  }
-}
-</i18n>
-
-<style scoped>
-.tablist > button {
-  cursor: pointer !important;
-}
-</style>

app/pages/projects/[slug].vue

@@ -0,0 +1,124 @@
+<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 { locale } = useI18n()
+const { t } = useI18n({
+  useScope: 'local',
+})
+
+useSeoMeta({
+  title: project.value?.title,
+  description: project.value?.description,
+  author: 'Arthur Danjou',
+})
+</script>
+
+<template>
+  <main v-if="project">
+    <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="/projects"
+      >
+        <UIcon
+          class="group-hover:-translate-x-1 transform duration-300"
+          name="i-ph-arrow-left-duotone"
+          size="20"
+        />
+        {{ t('back') }}
+      </NuxtLinkLocale>
+    </div>
+    <div class="mt-2">
+      <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"
+    />
+    <UAlert
+      v-if="locale !== 'en'"
+      :description="t('alert.description')"
+      :title="t('alert.title')"
+      class="mb-8"
+      color="red"
+      icon="i-ph-warning-duotone"
+      variant="outline"
+    />
+    <ContentRenderer
+      :value="project"
+      class="!max-w-none prose dark:prose-invert"
+    />
+  </main>
+</template>
+
+<style>
+.prose h2 a,
+.prose h3 a,
+.prose h4 a {
+  @apply no-underline;
+}
+
+.prose img {
+  margin: 0;
+}
+
+.katex-html {
+  display: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+</style>
+
+<i18n lang="json">
+{
+  "en": {
+    "alert": {
+      "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"
+  },
+  "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"
+  },
+  "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"
+  }
+}
+</i18n>

app/pages/projects/index.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { TAGS } from '~~/types'
+
+const { t } = useI18n({
+  useScope: 'local',
+})
+useSeoMeta({
+  title: 'My Projects',
+  description: t('description'),
+})
+
+const { data: projects } = await useAsyncData('all-projects', () => {
+  return queryCollection('projects')
+    .order('publishedAt', 'DESC')
+    .all()
+})
+</script>
+
+<template>
+  <main class="space-y-12">
+    <AppTitle
+      :description="t('description')"
+      :title="t('title')"
+    />
+    <ul class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <NuxtLink
+        v-for="(project, id) in projects"
+        :key="id"
+        :to="project.path"
+      >
+        <li
+          class="flex flex-col justify-between h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600 duration-300"
+        >
+          <article class="space-y-2">
+            <div
+              class="flex flex-col gap-2"
+            >
+              <h1 class="font-bold text-lg text-black dark:text-white">
+                {{ project.title }}
+              </h1>
+              <h3 class="text-md text-neutral-500 dark:text-neutral-400">
+                {{ project.description }}
+              </h3>
+            </div>
+          </article>
+          <div class="flex items-center justify-between gap-2 mt-4">
+            <div
+              class="text-sm text-neutral-500 flex items-center gap-1"
+            >
+              <UIcon name="ph:calendar-duotone" size="16" />
+              <p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
+            </div>
+            <div class="flex gap-2 flex-wrap">
+              <ClientOnly>
+                <UBadge
+                  v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                  :key="tag"
+                  :color="TAGS.find(color => color.label.toLowerCase() === tag)?.color as any"
+                  variant="soft"
+                  size="sm"
+                  class="rounded-full"
+                >
+                  <div class="flex gap-1 items-center">
+                    <UIcon :name="TAGS.find(icon => icon.label.toLowerCase() === tag)?.icon || ''" size="16" />
+                    <p>{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}</p>
+                  </div>
+                </UBadge>
+              </ClientOnly>
+            </div>
+          </div>
+        </li>
+      </NuxtLink>
+    </ul>
+  </main>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "All my projects I have worked on, both academic and personal",
+    "description": "A collection of my projects using R, Python, or web development technologies. These projects span various domains, including data analysis, machine learning, and web applications, showcasing my skills in coding, problem-solving, and project development."
+  },
+  "fr": {
+    "title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels",
+    "description": "Une collection de mes projets réalisés en R, Python, ou en développement web. Ces projets couvrent divers domaines, y compris l'analyse de données, l'apprentissage automatique et les applications web, mettant en avant mes compétences en codage, résolution de problèmes et développement de projets."
+  },
+  "es": {
+    "title": "Todos mis proyectos en los que he trabajado, académicos y personales",
+    "description": "Una colección de mis proyectos realizados en R, Python o tecnologías de desarrollo web. Estos proyectos abarcan diversos campos, como análisis de datos, aprendizaje automático y aplicaciones web, mostrando mis habilidades en programación, resolución de problemas y desarrollo de proyectos."
+  }
+}
+</i18n>

app/pages/writings/[slug].vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 const route = useRoute()
-const { data: post } = await useAsyncData(`portfolio/${route.params.slug}`, () =>
+const { data: post } = await useAsyncData(`writings/${route.params.slug}`, () =>
-  queryCollection('portfolio').path(`/portfolio/${route.params.slug}`).first())
+  queryCollection('writings').path(`/writings/${route.params.slug}`).first())
 
 const {
   data: postDB,
   refresh,
-} = await useAsyncData(`portfolio/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
+} = await useAsyncData(`writings/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
 
 const { locale } = useI18n()
 const { t } = useI18n({
@@ -22,7 +22,7 @@ function top() {
 }
 
 const { copy, copied } = useClipboard({
-  source: `https://arthurdanjou.fr/portfolio/${route.params.slug}`,
+  source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
   copiedDuring: 4000,
 })
 
@@ -70,7 +70,7 @@ function scrollToSection(id: string) {
     <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="/portfolio"
+        to="/writings"
       >
         <UIcon
           class="group-hover:-translate-x-1 transform duration-300"
@@ -115,7 +115,7 @@ function scrollToSection(id: string) {
         {{ post.description }}
       </p>
     </div>
-    <div v-if="post.body.toc && post.body.toc.links.length > 0" class="flex justify-end sticky top-0 z-50">
+    <div v-if="post.body.toc && post.body.toc.links.length > 0" class="flex justify-end sticky top-0 z-50 !cursor-pointer">
       <UPopover
         mode="click"
         :content="{
@@ -128,11 +128,10 @@ function scrollToSection(id: string) {
           :label="t('toc')"
           color="neutral"
           variant="solid"
-          class="mt-2"
         />
 
         <template #content>
-          <div class="text-neutral-500 p-2">
+          <div class="text-neutral-500">
             <div
               v-for="link in post!.body!.toc!.links"
               :key="link.id"
@@ -156,9 +155,9 @@ function scrollToSection(id: string) {
       v-if="post.cover"
       class="w-full rounded-md mb-8"
     >
-      <NuxtImg
+      <ProseImg
-        :src="`/portfolio/${post.cover}`"
+        :src="`/writings/${post.cover}`"
-        alt="Writing cover"
+        label="Writing cover"
       />
     </div>
     <USeparator
@@ -185,7 +184,7 @@ function scrollToSection(id: string) {
         </i18n-t>
         <div class="flex gap-4 items-center flex-wrap">
           <UButton
-            :label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
+            :label="(postDB?.likes ?? 0) > 1 ? `${postDB?.likes ?? 0} likes` : `${postDB?.likes ?? 0} like`"
             :color="likeCookie ? 'red' : 'neutral'"
             icon="i-ph-heart-duotone"
             size="lg"

app/pages/writings/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { TAGS } from '~~/types'
+
+const { t, locale } = useI18n({
+  useScope: 'local',
+})
+useSeoMeta({
+  title: 'My Shelf',
+  description: t('description'),
+})
+
+const { data: writings } = await useAsyncData('all-writings', () => {
+  return queryCollection('writings')
+    .order('publishedAt', 'DESC')
+    .all()
+})
+</script>
+
+<template>
+  <main class="space-y-12">
+    <AppTitle
+      :description="t('description')"
+      :title="t('title')"
+    />
+    <UAlert
+      v-if="locale !== 'en'"
+      :description="t('alert.description')"
+      :title="t('alert.title')"
+      color="red"
+      icon="i-ph-warning-duotone"
+      variant="outline"
+    />
+    <ul class="grid grid-cols-1 gap-4">
+      <NuxtLink
+        v-for="(writing, id) in writings"
+        :key="id"
+        :to="writing.path"
+      >
+        <li
+          class=" h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600  duration-300"
+        >
+          <article class="space-y-2">
+            <h1
+              class="font-bold text-lg duration-300 text-black dark:text-white"
+            >
+              {{ writing.title }}
+            </h1>
+            <h3>
+              {{ writing.description }}
+            </h3>
+          </article>
+          <div class="flex justify-between items-center mt-2">
+            <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>·
+              <UIcon name="ph:timer-duotone" size="16" />
+              <p>{{ writing.readingTime }}min long</p>
+            </div>
+            <div class="flex gap-2 flex-wrap">
+              <ClientOnly>
+                <UBadge
+                  v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
+                  :key="tag"
+                  :color="TAGS.find(color => color.label.toLowerCase() === tag)?.color as any"
+                  variant="soft"
+                  size="sm"
+                  class="rounded-full"
+                >
+                  <div class="flex gap-1 items-center">
+                    <UIcon :name="TAGS.find(icon => icon.label.toLowerCase() === tag)?.icon || ''" size="16" />
+                    <p>{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}</p>
+                  </div>
+                </UBadge>
+              </ClientOnly>
+            </div>
+          </div>
+        </li>
+      </NuxtLink>
+    </ul>
+  </main>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Writings on math, artificial intelligence, development, and my passions.",
+    "description": "All my reflections on programming, mathematics, artificial intelligence design, etc., are organized chronologically.",
+    "alert": {
+      "title": "Attention to translations!",
+      "description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
+    }
+  },
+  "fr": {
+    "title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions.",
+    "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique.",
+    "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."
+    }
+  },
+  "es": {
+    "title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones.",
+    "description": "Todas mis reflexiones sobre programación, matemáticas, diseño de inteligencia artificial, etc., están organizadas cronológicamente.",
+    "alert": {
+      "title": "¡Atención a las traducciones!",
+      "description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
+    }
+  }
+}
+</i18n>
+
+<style scoped>
+.tablist > button {
+  cursor: pointer !important;
+}
+</style>

content.config.ts

@@ -5,9 +5,21 @@ export const collections = {
     type: 'page',
     source: 'home/*.md',
   }),
-  portfolio: defineCollection({
+  projects: defineCollection({
     type: 'page',
-    source: 'portfolio/*.md',
+    source: 'projects/*.md',
+    schema: z.object({
+      slug: z.string(),
+      title: z.string(),
+      description: z.string(),
+      publishedAt: z.date(),
+      tags: z.array(z.string()),
+      cover: z.string(),
+    }),
+  }),
+  writings: defineCollection({
+    type: 'page',
+    source: 'writings/*.md',
     schema: z.object({
       slug: z.string(),
       title: z.string(),

content/projects/arthome.md

@@ -1,12 +1,11 @@
 ---
 slug: arthome
-title: ArtHome
+title: 🏡 ArtHome
-description: 🏡 Your personalised home page in your browser
+description: Your personalised home page in your browser
 publishedAt: 2024/09/04
 readingTime: 1
 cover: arthome/cover.png
 tags:
-  - project
   - web
 ---
 

content/projects/artsite.md

@@ -1,12 +1,11 @@
 ---
 slug: artsite
-title: ArtSite
+title: 🌍 ArtSite
-description: 🌍 My personal website, my portfolio, and my blog. 🚀
+description: My personal website, my portfolio, and my blog.
 publishedAt: 2024/06/01
 readingTime: 1
 cover: artsite/cover.png
 tags:
-  - project
   - web
 ---
 

content/projects/bikes-glm.md

@@ -1,11 +1,10 @@
 ---
 slug: bikes-glm
-title: Generalized Linear Models for Bikes prediction
+title: 🚲 Generalized Linear Models for Bikes prediction
-description: 🚲 Predicting the number of bikes rented in a bike-sharing system using Generalized Linear Models.
+description: Predicting the number of bikes rented in a bike-sharing system using Generalized Linear Models.
 publishedAt: 2025/01/24
 readingTime: 1
 tags:
-  - project
   - r
   - data
   - maths
@@ -15,5 +14,5 @@ The project was done as part of the course `Generalised Linear Model` at the Par
 
 You can find the code here: [GLM Bikes Code](https://github.com/ArthurDanjou/Studies/blob/master/M1/General%20Linear%20Models/Projet/GLM%20Code%20-%20DANJOU%20%26%20DUROUSSEAU.rmd)
 
-<iframe src="/portfolio/bikes-glm/Report.pdf" width="100%" height="1000px">
+<iframe src="/projects/bikes-glm/Report.pdf" width="100%" height="1000px">
 </iframe>

content/projects/monte-carlo-project.md

@@ -1,11 +1,10 @@
 ---
 slug: monte-carlo-project
-title: Monte Carlo Methods Project
+title: 💻 Monte Carlo Methods Project
 description: A project to demonstrate the use of Monte Carlo methods in R.
 publishedAt: 2024/11/24
 readingTime: 3
 tags:
-  - project
   - r
   - maths
 ---
@@ -22,5 +21,5 @@ Methods and algorithms implemented:
 
 You can find the code here: [Monte Carlo Project Code](https://github.com/ArthurDanjou/Studies/blob/0c83e7e381344675e113c43b6f8d32e88a5c00a7/M1/Monte%20Carlo%20Methods/Project%201/003_rapport_DANJOU_DUROUSSEAU.rmd)
 
-<iframe src="/portfolio/monte-carlo-project/Report.pdf" width="100%" height="1000px">
+<iframe src="/projects/monte-carlo-project/Report.pdf" width="100%" height="1000px">
 </iframe>

content/projects/python-data-ml.md

@@ -1,11 +1,10 @@
 ---
 slug: python-data-ml
-title: Python Data & ML
+title: 🐍 Python Data & ML
-description: 🧠 A repository dedicated to learning and practicing Python libraries for machine learning.
+description: A repository dedicated to learning and practicing Python libraries for machine learning.
 publishedAt: 2024/11/01
 readingTime: 1
 tags:
-  - project
   - data
   - ai
   - python

content/projects/schelling-segregation-model.md

@@ -1,11 +1,10 @@
 ---
 slug: schelling-segregation-model
-title: Schelling Segregation Model
+title: 📊 Schelling Segregation Model
-description: 📊 A Python implementation of the Schelling Segregation Model using Statistics and Data Visualization.
+description: A Python implementation of the Schelling Segregation Model using Statistics and Data Visualization.
 publishedAt: 2024/05/03
 readingTime: 4
 tags:
-  - project
   - python
   - maths
 ---
@@ -14,5 +13,5 @@ This is the French version of the report for the Schelling Segregation Model pro
 
 You can find the code here: [Schelling Segregation Model Code](https://github.com/ArthurDanjou/Studies/blob/e1164f89bd11fc59fa79d94aa51fac69b425d68b/L3/Projet%20Num%C3%A9rique/Segregation.ipynb)
 
-<iframe src="/portfolio/schelling/Projet.pdf" width="100%" height="1000px">
+<iframe src="/projects/schelling/Projet.pdf" width="100%" height="1000px">
 </iframe>

content/projects/studies.md

@@ -1,11 +1,10 @@
 ---
 slug: studies
-title: Studies projects
+title: 🎓 Studies projects
-description: 🎓 Studies projects - a collection of projects done during my studies.
+description:  A collection of projects done during my studies.
 publishedAt: 2023/09/01
 readingTime: 1
 tags:
-  - project
   - data
   - python
   - r

content/writings/how-my-website-works.md

@@ -5,7 +5,6 @@ description: My new website is using a fantastical stack and I am explaining how
 publishedAt: 2024/06/21
 readingTime: 5
 tags:
-  - article
   - web
 ---
 
@@ -15,35 +14,35 @@ While it's still fresh in my mind, I wanted to document how this version of the
 
 ![Website](/portfolio/website-work/website.png)
 
-## Ideas and Goals
+## 1 - Ideas and Goals
 
 Most of the time, I work on my site for fun and without any profit motive. However, while building this latest version, I managed to keep a few key ideas and goals in mind:
 
-### Reduce writing friction
+### 1.1 -  Reduce writing friction
 
 This new version of my website was built with the idea that I should be able to add, edit, and delete content directly from the front-end. This means that everything needs to be backed by a database or CMS, which quickly adds complexity. But at the end of the day, adding a bookmark should be a matter of pasting a URL and clicking save. Writing a blog post should be a matter of typing some Markdown and clicking publication.
 
 Extra friction on these processes would make me less likely to keep things up to date or share new things.
 
-### A playground for ideas
+### 1.2 - A playground for ideas
 
 I want my website to be a playground where I can safely experiment with new technologies and packages, including testing frameworks (like the new Nuxt 3 stack), improving CSS styles with Tailwind, and discovering new technologies and frameworks, in a way that allows for easy isolation and deletion. This requirement made Nuxt.js an obvious choice, thanks to its support for hybrid page rendering strategies—static, server-rendered, or client-rendered. More on this below.
 
-### Fast
+### 1.3 - Fast
 
 The new version of my website is faster than the old one, thanks to the latest version of Nuxt. This improvement enhances the overall user experience and ensures that the site remains responsive and efficient.
 
-## FrontEnd & BackEnd with Nuxt 3
+## 2 - FrontEnd & BackEnd with Nuxt 3
 
 I wanted this version of my site to reflect my personality, especially because it seemed like a fun project! What would a 'personal application' look like, showcasing everything I've created? I aimed for a clean, monochrome design with plenty of 'Easter eggs' to keep things interesting.
 
-### Nuxt 3
+### 2.1 - Nuxt 3
 
 Nuxt.js is my front-end framework of choice. I particularly appreciate it for its comprehensive and complementary Vue and Nuxt ecosystem. The filesystem-based router provides an intuitive and powerful abstraction for building the route hierarchy. Nuxt.js also benefits from a large community that has thoroughly tested the framework, addressing edge cases and developing creative solutions for common Vue, data recovery, and performance issues. Whenever I encounter a problem, I turn to the Nuxt.js discussions on [GitHub](https://github.com/nuxt) or their [Discord server](https://go.nuxt.com/discord). Almost every time, I find that others have already come up with innovative solutions to similar challenges.
 
 Nuxt.js is also fast. It optimizes performance by speeding up local builds, automatically compressing static assets, and ensuring quick deployment times. The regular project updates mean my site continually gets faster over time—at no extra cost!
 
-### Styling
+### 2.2 - Styling
 
 #### Tailwind CSS
 
@@ -59,7 +58,7 @@ Nuxt UI is a new tool I've been using since its release to enhance and streamlin
 
 Nuxt UI aims to provide everything you need for the UI when building a Nuxt app, including components, icons, colors, dark mode, and keyboard shortcuts. It's an excellent tool for both beginners and experienced developers.
 
-### Database & Deployment
+### 2.3 - Database & Deployment
 
 #### NuxtHub & Cloudflare workers
 
@@ -77,7 +76,7 @@ Drizzle isn't just a library; it's an exceptional journey 🤩. It empowers you
 
 One word : `If you know SQL — you know Drizzle.`
 
-### Writing
+### 2.4 - Writing
 
 #### Nuxt Studio
 
@@ -93,7 +92,7 @@ The article you're currently reading is plain text stored in MySQL, rendered usi
 
 Compromises are inevitable! I've chosen to sacrifice some features for simplicity and speed. I'm content with my decision, as it aligns with my goal of reducing friction in the writing process.
 
-## How much everything costs
+## 3 - How much everything costs
 
 I'm often asked how much it costs to run my website. Here's a breakdown of the costs:
 
@@ -103,6 +102,6 @@ I'm often asked how much it costs to run my website. Here's a breakdown of the c
 
 Total: 0€ thanks to nuxt free plan and cloudflare free plan
 
-## Thanks
+## 4 - Thanks
 
 I want to thank the Nuxt team for their hard work and dedication to the project. I also want to thank the community for their support and for providing me with the tools I needed to build this site. I want to add a special thanks to [Estéban](https://x.com/soubiran_) for solving `All` my problems and for inspiring me to rewrite my website.

content/writings/neural-network.md

@@ -5,27 +5,26 @@ description: This article introduces neural networks, explaining their structure
 readingTime: 3
 publishedAt: 2025/03/30
 tags:
-  - article
   - ai
   - maths
 ---
 
 Neural networks are a class of machine learning algorithms inspired by the functioning of biological neurons. They are widely used in artificial intelligence for image recognition, natural language processing, time series forecasting, and many other fields. Thanks to their ability to model complex relationships in data, they have become one of the pillars of **deep learning**.
 
-## 1. Basic Structure of a Neural Network
+## 1 - Basic Structure of a Neural Network
 
-### 1.1 Neurons and Biological Inspiration
+### 1.1 - Neurons and Biological Inspiration
 
 Neural networks are inspired by the way the human brain processes information. Each artificial neuron mimics a biological neuron, receiving inputs, applying a transformation, and passing the result to the next layer.
 
-### 1.2 Layer Organization (Input, Hidden, Output)
+### 1.2 - Layer Organization (Input, Hidden, Output)
 
 A neural network consists of layers:
 - **Input layer**: Receives raw data.
 - **Hidden layers**: Perform intermediate transformations and extract important features.
 - **Output layer**: Produces the final model prediction.
 
-### 1.3 Weights and Biases
+### 1.3 - Weights and Biases
 
 Each neuron connection has an associated **weight** $ w $, and each neuron has a **bias** $ b $. The transformation applied at each neuron before activation is given by:
 
@@ -33,7 +32,7 @@ $$
     z = W \cdot X + b
 $$
 
-### 1.4 Neural Network Structure Visualization
+### 1.4 - Neural Network Structure Visualization
 
 ::prose-img
 ---
@@ -51,22 +50,22 @@ Starting from the left, we have:
 - The output layer (a.k.a. the prediction) of our model in green.
 - The arrows that connect the dots shows how all the neurons are interconnected and how data travels from the input layer all the way through to the output layer.
 
-## 2. Information Propagation (Forward Pass)
+## 2 - Information Propagation (Forward Pass)
 
-### 2.1 Linear Transformation $ z = W \cdot X + b $
+### 2.1 - Linear Transformation $ z = W \cdot X + b $
 
 Each neuron computes a weighted sum of its inputs plus a bias term before applying an activation function.
 
-### 2.2 Activation Functions (ReLU, Sigmoid, Softmax)
+### 2.2 - Activation Functions (ReLU, Sigmoid, Softmax)
 
 Activation functions introduce **non-linearity**, enabling networks to learn complex patterns:
 - **ReLU**: $ f(z) = \max(0, z) $ (fast training, avoids vanishing gradients)
 - **Sigmoid**: $ \sigma(z) = \frac{1}{1 + e^{-z}} $ (useful for binary classification)
 - **Softmax**: Converts outputs into probability distributions for multi-class classification.
 
-## 3. Learning and Backpropagation
+## 3 - Learning and Backpropagation
 
-### 3.1 Cost Function (MSE, Cross-Entropy)
+### 3.1 - Cost Function (MSE, Cross-Entropy)
 
 To measure error, different loss functions are used:
 - **Mean Squared Error (MSE)**:
@@ -80,7 +79,7 @@ To measure error, different loss functions are used:
 
 Where, $y$ represents the true values or labels, while $\hat{y}$represents the predicted values produced by the model. The goal is to minimize this difference during training.
 
-### 3.2 Gradient Descent and Weight Updates
+### 3.2 - Gradient Descent and Weight Updates
 
 Training consists of adjusting weights to minimize loss using **gradient descent**:
 
@@ -88,13 +87,13 @@ $$
     w := w - \alpha \frac{\partial L}{\partial w}, \quad b := b - \alpha \frac{\partial L}{\partial b}
 $$
 
-### 3.3 Gradient Propagation via the Chain Rule
+### 3.3 - Gradient Propagation via the Chain Rule
 
 Using **backpropagation**, the error is propagated backward through the network using the chain rule, adjusting each weight accordingly.
 
-## 4. Optimization and Regularization
+## 4 - Optimization and Regularization
 
-### 4.1 Optimization Algorithms (SGD, Adam)
+### 4.1 - Optimization Algorithms (SGD, Adam)
 
 - **Stochastic Gradient Descent (SGD)**: Updates weights after each sample.
 - **Adam**: A more advanced optimizer that adapts learning rates per parameter.
@@ -113,13 +112,13 @@ caption: Gradient Descent
 2. Modify each parameter by an amount proportional to its gradient element and in the opposite direction of its gradient element. For example, if the partial derivative of our cost function with respect to B0 is positive but tiny and the partial derivative with respect to B1 is negative and large, then we want to decrease B0 by a tiny amount and increase B1 by a large amount to lower our cost function.
 3. Recompute the gradient using our new tweaked parameter values and repeat the previous steps until we arrive at the minimum.
 
-### 4.2 Regularization to Avoid Overfitting (Dropout, L1/L2)
+### 4.2 - Regularization to Avoid Overfitting (Dropout, L1/L2)
 
 To prevent overfitting:
 - **Dropout** randomly disables neurons during training.
 - **L1/L2 regularization** penalizes large weights to encourage simpler models.
 
-## 5. Network Architectures
+## 5 - Network Architectures
 
 Multi-Layer Perceptron (MLP)
 A standard feedforward neural network with multiple layers.
@@ -133,26 +132,26 @@ Useful for time series and natural language tasks.
 Transformers for NLP and Vision
 State-of-the-art architecture for language understanding and vision tasks.
 
-## 6. Training and Evaluation
+## 6 - Training and Evaluation
 
-### 6.1 Data Splitting (Train/Test Split)
+### 6.1 - Data Splitting (Train/Test Split)
 
 To evaluate performance, data is split into **training** and **test** sets.
 
-### 6.2 Evaluation Metrics (Accuracy, Precision, Recall, RMSE, R²)
+### 6.2 - Evaluation Metrics (Accuracy, Precision, Recall, RMSE, R²)
 
 Metrics depend on the task:
 - **Accuracy, Precision, Recall** for classification.
 - **RMSE, R²** for regression.
 
-### 6.3 Hyperparameter Tuning
+### 6.3 - Hyperparameter Tuning
 
 Choosing the right:
 - **Learning rate**
 - **Batch size**
 - **Number of layers and neurons**
 
-## Example: A Neural Network with Two Hidden Layers
+## 7 - Example: A Neural Network with Two Hidden Layers
 
 The following example demonstrates a simple **multi-layer perceptron (MLP)** with two hidden layers, trained to perform linear regression.
 
@@ -188,6 +187,6 @@ plt.legend()
 plt.show()
 ```
 
-## Conclusion
+## 8 - Conclusion
 
 Neural networks form the foundation of modern artificial intelligence. Their ability to learn from data and generalize to new situations makes them essential for applications like computer vision, automatic translation, and predictive medicine. 🚀

content/writings/what-is-machine-learning.md

@@ -5,12 +5,11 @@ description: An introduction to machine learning, exploring its main types, key
 readingTime: 3
 publishedAt: 2024/11/26
 tags:
-  - article
   - ai
   - maths
 ---
 
-## Introduction
+## 1 - Introduction
 
 Machine Learning (ML) is a key discipline in artificial intelligence (AI), enabling systems to learn from data to make predictions or discover patterns. It is the driving force behind many modern innovations, from personalised recommendations to autonomous vehicles.
 
@@ -21,7 +20,7 @@ In this article, we will cover:
 3. **The typical ML workflow**, exploring the essential steps for developing a model.
 4. **Model evaluation through the R² score**, an important metric for regression problems.
 
-## The Types of Machine Learning
+## 2 - The Types of Machine Learning
 
 To start, it is important to understand the three main categories of machine learning:
 
@@ -46,7 +45,7 @@ caption: The different types of machine learning models
 
 With this overview of ML types, let’s now focus on supervised learning, the most widely used approach, and explore how to choose the right model.
 
-## Three Considerations for Choosing a Supervised Learning Model
+## 3 - Three Considerations for Choosing a Supervised Learning Model
 
 Selecting the right supervised learning model is critical and depends on several factors:
 
@@ -64,7 +63,7 @@ Selecting the right supervised learning model is critical and depends on several
 
 Once the model type is defined, the next step is to delve into the full workflow of developing an ML model.
 
-## The Typical Workflow in Machine Learning
+## 4 - The Typical Workflow in Machine Learning
 
 A machine learning project generally follows these steps:
 
@@ -88,7 +87,7 @@ caption: Modelization in Progress
 
 Evaluation is a crucial step to verify the performance of a model. For regression problems, the R² score is a key indicator.
 
-## Evaluating Models: The R² Score
+## 5 - Evaluating Models: The R² Score
 
 For regression problems, the **R² score** measures the proportion of the target’s variance explained by the model:
 
@@ -109,6 +108,6 @@ caption: R² Score
 
 With these concepts in mind, you are better equipped to understand and apply ML models in your projects.
 
-## Conclusion
+## 6 - Conclusion
 
 Machine learning is revolutionising how we solve complex problems using data. Supervised, unsupervised, and reinforcement learning approaches allow us to tackle a wide variety of use cases. In supervised learning, the model choice depends on the problem type, its complexity, and the appropriate algorithmic approach. Finally, a structured workflow and metrics like the R² score ensure the quality of predictions and analyses.

types.ts

@@ -110,18 +110,6 @@ export interface Tag {
 }
 
 export const TAGS: Array<Tag> = [
-  {
-    label: 'Article',
-    icon: 'i-ph-pencil-line-duotone',
-    color: 'red',
-    translation: 'tags.article',
-  },
-  {
-    label: 'Project',
-    icon: 'i-ph-briefcase-duotone',
-    color: 'blue',
-    translation: 'tags.project',
-  },
   {
     label: 'R',
     icon: 'i-vscode-icons-file-type-r',