From 58594c37bc3575d4adabafc599c35703eab79697 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Tue, 10 Mar 2026 23:40:44 +0100
Subject: [PATCH] =?UTF-8?q?Section=20Parcours=20:=20mini-timeline=20visuel?=
 =?UTF-8?q?le,=20exp=C3=A9riences=20featured,=20lien=20vers=20parcours=20c?=
 =?UTF-8?q?omplet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/experiences/araymond.ar.md    |  1 +
 src/content/experiences/araymond.en.md    |  1 +
 src/content/experiences/araymond.md       |  1 +
 src/content/experiences/champollion.ar.md |  1 +
 src/content/experiences/champollion.en.md |  1 +
 src/content/experiences/champollion.md    |  1 +
 src/pages/code/index.astro                | 46 ++++++++++++++---------
 7 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/content/experiences/araymond.ar.md b/src/content/experiences/araymond.ar.md
index 13c8d53..c6c490e 100644
--- a/src/content/experiences/araymond.ar.md
+++ b/src/content/experiences/araymond.ar.md
@@ -7,6 +7,7 @@ startDate: "2022-01"
 endDate: "2023-01"
 technologies: ["TypeScript", "React.js", "Redux", "Nx", "Vite"]
 type: "freelance"
+featured: true
 lang: "ar"
 ---
 
diff --git a/src/content/experiences/araymond.en.md b/src/content/experiences/araymond.en.md
index 171092d..a306194 100644
--- a/src/content/experiences/araymond.en.md
+++ b/src/content/experiences/araymond.en.md
@@ -7,6 +7,7 @@ startDate: "2022-01"
 endDate: "2023-01"
 technologies: ["TypeScript", "React.js", "Redux", "Nx", "Vite"]
 type: "freelance"
+featured: true
 lang: "en"
 ---
 
diff --git a/src/content/experiences/araymond.md b/src/content/experiences/araymond.md
index 1548ee5..57c2457 100644
--- a/src/content/experiences/araymond.md
+++ b/src/content/experiences/araymond.md
@@ -7,6 +7,7 @@ startDate: "2022-01"
 endDate: "2023-01"
 technologies: ["TypeScript", "React.js", "Redux", "Nx", "Vite"]
 type: "freelance"
+featured: true
 lang: "fr"
 ---
 
diff --git a/src/content/experiences/champollion.ar.md b/src/content/experiences/champollion.ar.md
index e7c1a86..08ee3cd 100644
--- a/src/content/experiences/champollion.ar.md
+++ b/src/content/experiences/champollion.ar.md
@@ -6,6 +6,7 @@ location: "ألبي"
 startDate: "2019-09"
 technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
 type: "teaching"
+featured: true
 lang: "ar"
 ---
 
diff --git a/src/content/experiences/champollion.en.md b/src/content/experiences/champollion.en.md
index cfac11c..7c17341 100644
--- a/src/content/experiences/champollion.en.md
+++ b/src/content/experiences/champollion.en.md
@@ -6,6 +6,7 @@ location: "Albi"
 startDate: "2019-09"
 technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
 type: "teaching"
+featured: true
 lang: "en"
 ---
 
diff --git a/src/content/experiences/champollion.md b/src/content/experiences/champollion.md
index 24dd01b..9a66823 100644
--- a/src/content/experiences/champollion.md
+++ b/src/content/experiences/champollion.md
@@ -6,6 +6,7 @@ location: "Albi"
 startDate: "2019-09"
 technologies: ["TypeScript", "JavaScript", "Node.js", "TDD", "Clean Code"]
 type: "teaching"
+featured: true
 lang: "fr"
 ---
 
diff --git a/src/pages/code/index.astro b/src/pages/code/index.astro
index 9b9adef..403e22a 100644
--- a/src/pages/code/index.astro
+++ b/src/pages/code/index.astro
@@ -15,7 +15,7 @@ const experiences = (await getCollection("experiences"))
   .filter((e) => e.data.lang === locale && !e.data.draft)
   .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
 
-const recentExperiences = experiences.slice(0, 4);
+const recentExperiences = experiences.filter((e) => e.data.featured).slice(0, 4);
 
 const projects = (await getCollection("projects"))
   .filter((p) => p.data.lang === locale && !p.data.draft && p.data.category === "dev" && p.data.featured)
@@ -65,30 +65,42 @@ function formatMonth(dateStr: string) {
         <h2 class="text-2xl font-bold text-white ">Parcours</h2>
         <a href="/code/parcours" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tout &rarr;</a>
       </div>
-      <div class="divide-y divide-white/[0.08]">
+      <div class="relative ml-3">
+        <div class="absolute left-0 top-1.5 bottom-1.5 w-px bg-purple-300/20"></div>
         {recentExperiences.map((exp) => {
           const isOngoing = !exp.data.endDate;
           const start = formatMonth(exp.data.startDate);
           const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent';
           return (
-            <div class="py-4 first:pt-0 last:pb-0">
-              <div class="flex items-start justify-between gap-4">
-                <div class="min-w-0">
-                  <p class="font-semibold text-white text-sm">{exp.data.role}</p>
-                  <p class="text-sm text-white/45 mt-0.5">
-                    {exp.data.companyUrl ? (
-                      <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
-                    ) : exp.data.company}
-                    {exp.data.location && ` · ${exp.data.location}`}
-                  </p>
-                </div>
-                <span class:list={["text-sm whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200" : "text-white/35"]}>
-                  {start} — {end}
-                </span>
-              </div>
+            <div class="relative pl-7 pb-6 last:pb-0">
+              <div class:list={[
+                "absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full -translate-x-1/2 border-2",
+                isOngoing
+                  ? "bg-purple-400 border-purple-400/50 shadow-[0_0_8px_rgba(168,85,247,0.4)]"
+                  : "bg-transparent border-purple-300/30"
+              ]} />
+              {isOngoing && (
+                <div class="absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full -translate-x-1/2 bg-purple-400/50 animate-ping" />
+              )}
+              <span class:list={[isOngoing ? "text-purple-200" : "text-white/55"]}>
+                {start} — {end}
+              </span>
+              <p class="font-semibold text-white text-lg mt-0.5">{exp.data.role}</p>
+              <p class="text-white/55 mt-0.5">
+                {exp.data.companyUrl ? (
+                  <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
+                ) : exp.data.company}
+                {exp.data.location && ` · ${exp.data.location}`}
+              </p>
             </div>
           );
         })}
+        <div class="relative pl-7 pt-2 flex items-center gap-3">
+          <span class="text-purple-300/40 tracking-[0.3em]">...</span>
+          <a href="/code/parcours" class="text-purple-200 hover:text-white transition-colors">
+            Voir le parcours complet &rarr;
+          </a>
+        </div>
       </div>
     </div>