From 8148d2c95489a71d1ab1c769040d9460f67a29c9 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 23 Feb 2026 01:50:46 +0100
Subject: [PATCH] =?UTF-8?q?Refonte=20page=20d'accueil=20:=20bloc=20code=20?=
 =?UTF-8?q?=C3=A9largi,=20couleurs=20charte=20Tiqa,=20palette=20harmonis?=
 =?UTF-8?q?=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Renommé « Développeur » en « Conception logicielle » (FR/EN/AR)
- Bloc code pleine largeur avec mission en cours, projets featured et compteur de recommandations
- Théâtre et Photographie en 2 colonnes en dessous
- Palette tiqa (#4b1862) dans tailwind.config.mjs, appliquée au bloc code et bouton CTA
- Bloc théâtre en amber, bloc photo en slate
- Corrigé typo couleur facette code dans le layout (#4b1762 → #4b1862)
---
 src/layouts/main.astro   |   2 +-
 src/pages/ar/index.astro | 128 ++++++++++++++++++++++++++-------------
 src/pages/en/index.astro | 128 ++++++++++++++++++++++++++-------------
 src/pages/index.astro    | 128 ++++++++++++++++++++++++++-------------
 tailwind.config.mjs      |  14 +++++
 5 files changed, 273 insertions(+), 127 deletions(-)

diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index fc10c0c..731a65e 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -48,7 +48,7 @@ const locale = pathname.startsWith("/en")
     </style>
     <style is:global>
       [data-facet="code"] {
-        --facet-color: #4b1762;
+        --facet-color: #4b1862;
         --facet-color-light: #6b2d8b;
         --facet-color-lighter: #8b4dab;
         background: linear-gradient(135deg, var(--facet-color) 0%, #3a1055 50%, #2a0b3d 100%) !important;
diff --git a/src/pages/ar/index.astro b/src/pages/ar/index.astro
index df56245..33c4bc7 100644
--- a/src/pages/ar/index.astro
+++ b/src/pages/ar/index.astro
@@ -1,7 +1,19 @@
 ---
 import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
 import Layout from "../../layouts/main.astro";
 import jalilPhoto from "../../assets/images/jalil-2.jpg";
+
+const currentMission = (await getCollection("experiences"))
+  .filter((e) => e.data.lang === "ar" && !e.data.draft && !e.data.endDate)
+  .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
+
+const featuredProjects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === "ar" && !p.data.draft && p.data.category === "dev" && p.data.featured)
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+  .slice(0, 2);
+
+const recommendationCount = (await getCollection("recommendations")).length;
 ---
 
 <Layout
@@ -23,7 +35,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
         </p>
 
         <div class="flex flex-wrap gap-4">
-          <a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
+          <a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
             اكتشف أعمالي
           </a>
           <a href="/ar/نبذة-عني" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@@ -51,55 +63,87 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
   </div>
 
   <div dir="rtl" lang="ar" class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-
-      <a href="/ar/برمجة" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
+    <div class="space-y-8">
+      <a href="/ar/برمجة" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
         <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
-            المطوّر
+          <h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
+            تصميم البرمجيات
           </h3>
-          <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
-            أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
-          </p>
-          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
-            ← اكتشف المزيد
+          <div class="md:flex md:flex-row-reverse md:gap-8">
+            <div class="md:flex-1">
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
+                أكثر من 20 سنة في تصميم وبناء البرمجيات. كمطوّر أول، أو قائد تقني، أو مدرب تقني، أرافق الفرق التي تريد تقديم كود تفتخر به.
+              </p>
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
+                أفضّل البرمجيات الحرّة والمشاريع ذات الفائدة الحقيقية. ما يميّزني ربّما: أهتمّ بجودة الكود بقدر اهتمامي بالتحيّزات التي ندرجها فيه دون أن ندري.
+              </p>
+            </div>
+            <div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
+              {currentMission && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">المهمة الحالية</p>
+                  <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
+                  <p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
+                </div>
+              )}
+              {featuredProjects.length > 0 && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">المشاريع</p>
+                  {featuredProjects.map((p) => (
+                    <div class="mb-1.5 last:mb-0">
+                      <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
+                      <p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+              <div>
+                <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">التوصيات</p>
+                <p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} توصية</p>
+              </div>
+            </div>
+          </div>
+          <span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
+            ← المسار، المشاريع والتوصيات
           </span>
         </div>
       </a>
 
-      <a href="/ar/مسرح" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
-        <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
-        <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
-            المسرح
-          </h3>
-          <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
-            ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
-          </p>
-          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
-            ← المسار الفني
-          </span>
-        </div>
-      </a>
-
-      <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
-        <a href="/ar/تصوير" class="absolute inset-0 z-0" aria-label="التصوير"></a>
-        <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10 pointer-events-none">
-          <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
-            التصوير
-          </h3>
-          <p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
-            أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
-          </p>
-          <div class="space-y-3">
-            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
-              ← معرض الصور
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <a href="/ar/مسرح" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
+          <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
+          <div class="relative z-10">
+            <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
+              المسرح
+            </h3>
+            <p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
+              ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
+            </p>
+            <span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
+              ← المسار الفني
             </span>
-            <a href="/ar/تصوير/مدونة" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
-              ← مُدوّنة الصور
-            </a>
+          </div>
+        </a>
+
+        <div class="group relative overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
+          <a href="/ar/تصوير" class="absolute inset-0 z-0" aria-label="التصوير"></a>
+          <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
+          <div class="relative z-10 pointer-events-none">
+            <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
+              التصوير
+            </h3>
+            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+              أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
+            </p>
+            <div class="space-y-3">
+              <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
+                ← معرض الصور
+              </span>
+              <a href="/ar/تصوير/مدونة" class="block text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
+                ← مُدوّنة الصور
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 46cb2fe..659e001 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -1,7 +1,19 @@
 ---
 import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
 import Layout from "../../layouts/main.astro";
 import jalilPhoto from "../../assets/images/jalil-2.jpg";
+
+const currentMission = (await getCollection("experiences"))
+  .filter((e) => e.data.lang === "en" && !e.data.draft && !e.data.endDate)
+  .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
+
+const featuredProjects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === "en" && !p.data.draft && p.data.category === "dev" && p.data.featured)
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+  .slice(0, 2);
+
+const recommendationCount = (await getCollection("recommendations")).length;
 ---
 
 <Layout
@@ -23,7 +35,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
         </p>
 
         <div class="flex flex-wrap gap-4">
-          <a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
+          <a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
             View my work
           </a>
           <a href="/en/about" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@@ -51,55 +63,87 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
   </div>
 
   <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-
-      <a href="/en/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
+    <div class="space-y-8">
+      <a href="/en/code" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
-            Developer
+          <h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
+            Software Design
           </h3>
-          <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
-            Over 20 years building software. Today, I choose my projects: free software, useful tools, nothing that alienates. Craftsmanship, DDD, TypeScript — and an obsession with the biases we unknowingly put into code. I teach programming and run the Software Crafters meetup in Albi.
-          </p>
-          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
-            → Learn more
+          <div class="md:flex md:gap-8">
+            <div class="md:flex-1">
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
+                Over 20 years designing and building software. As a senior developer, tech lead or technical coach, I help teams deliver code they can be proud of.
+              </p>
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
+                I favor free software and projects that serve real needs. What sets me apart, perhaps: I care as much about code quality as about the biases we unknowingly embed in it.
+              </p>
+            </div>
+            <div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
+              {currentMission && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Current mission</p>
+                  <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
+                  <p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
+                </div>
+              )}
+              {featuredProjects.length > 0 && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Projects</p>
+                  {featuredProjects.map((p) => (
+                    <div class="mb-1.5 last:mb-0">
+                      <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
+                      <p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+              <div>
+                <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Recommendations</p>
+                <p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} recommendations</p>
+              </div>
+            </div>
+          </div>
+          <span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
+            → Career, projects and recommendations
           </span>
         </div>
       </a>
 
-      <a href="/en/acting" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
-        <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
-        <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
-            Theater
-          </h3>
-          <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
-            Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
-          </p>
-          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
-            → Artistic journey
-          </span>
-        </div>
-      </a>
-
-      <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
-        <a href="/en/photo" class="absolute inset-0 z-0" aria-label="Photography"></a>
-        <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10 pointer-events-none">
-          <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
-            Photography
-          </h3>
-          <p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
-            I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
-          </p>
-          <div class="space-y-3">
-            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
-              → Photo portfolio
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <a href="/en/acting" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
+          <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
+          <div class="relative z-10">
+            <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
+              Theater
+            </h3>
+            <p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
+              Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
+            </p>
+            <span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
+              → Artistic journey
             </span>
-            <a href="/en/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
-              → Photo Feed
-            </a>
+          </div>
+        </a>
+
+        <div class="group relative overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
+          <a href="/en/photo" class="absolute inset-0 z-0" aria-label="Photography"></a>
+          <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
+          <div class="relative z-10 pointer-events-none">
+            <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
+              Photography
+            </h3>
+            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+              I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
+            </p>
+            <div class="space-y-3">
+              <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
+                → Photo portfolio
+              </span>
+              <a href="/en/photo/blog" class="block text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
+                → Photo Feed
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 890fa46..0969485 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,19 @@
 ---
 import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
 import Layout from "../layouts/main.astro";
 import jalilPhoto from "../assets/images/jalil-2.jpg";
+
+const currentMission = (await getCollection("experiences"))
+  .filter((e) => e.data.lang === "fr" && !e.data.draft && !e.data.endDate)
+  .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
+
+const featuredProjects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === "fr" && !p.data.draft && p.data.category === "dev" && p.data.featured)
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+  .slice(0, 2);
+
+const recommendationCount = (await getCollection("recommendations")).length;
 ---
 
 <Layout
@@ -23,7 +35,7 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
         </p>
         
         <div class="flex flex-wrap gap-4">
-          <a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
+          <a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
             Voir mon travail
           </a>
           <a href="/a-propos" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@@ -51,55 +63,87 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
   </div>
 
   <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-      
-      <a href="/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
+    <div class="space-y-8">
+      <a href="/code" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
-            Développeur
+          <h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
+            Conception logicielle
           </h3>
-          <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
-            Plus de 20 ans à construire du logiciel. Aujourd'hui, je choisis mes projets : du libre, de l'utile, rien qui aliène. Craftsmanship, DDD, TypeScript — et une obsession pour les biais qu'on met dans le code sans le savoir. J'enseigne la programmation et j'anime les Software Crafters d'Albi.
-          </p>
-          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
-            → En savoir plus
+          <div class="md:flex md:gap-8">
+            <div class="md:flex-1">
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
+                Plus de 20 ans à concevoir et construire du logiciel. Développeur senior, tech lead ou coach technique, j'accompagne les équipes qui veulent livrer du code dont elles sont fières.
+              </p>
+              <p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
+                Je privilégie le logiciel libre et les projets utiles. Ce qui me distingue peut-être : je m'intéresse autant à la qualité du code qu'aux biais qu'on y inscrit sans le savoir.
+              </p>
+            </div>
+            <div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
+              {currentMission && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Mission en cours</p>
+                  <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
+                  <p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
+                </div>
+              )}
+              {featuredProjects.length > 0 && (
+                <div>
+                  <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Projets</p>
+                  {featuredProjects.map((p) => (
+                    <div class="mb-1.5 last:mb-0">
+                      <p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
+                      <p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+              <div>
+                <p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Recommandations</p>
+                <p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} recommandations</p>
+              </div>
+            </div>
+          </div>
+          <span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
+            → Parcours, projets et recommandations
           </span>
         </div>
       </a>
 
-      <a href="/theatre" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
-        <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
-        <div class="relative z-10">
-          <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
-            Théâtre
-          </h3>
-          <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
-            Improvisateur depuis 2008, passé par les Yvelines et le Maroc avant de cofonder Les Particules à Albi. Aujourd'hui je m'attaque aussi au théâtre écrit.
-          </p>
-          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
-            → Parcours artistique
-          </span>
-        </div>
-      </a>
-
-      <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
-        <a href="/photo" class="absolute inset-0 z-0" aria-label="Photographie"></a>
-        <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10 pointer-events-none">
-          <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
-            Photographie
-          </h3>
-          <p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
-            Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
-          </p>
-          <div class="space-y-3">
-            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
-              → Portfolio photo
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <a href="/theatre" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
+          <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
+          <div class="relative z-10">
+            <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
+              Théâtre
+            </h3>
+            <p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
+              Improvisateur depuis 2008, passé par les Yvelines et le Maroc avant de cofonder Les Particules à Albi. Aujourd'hui je m'attaque aussi au théâtre écrit.
+            </p>
+            <span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
+              → Parcours artistique
             </span>
-            <a href="/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
-              → Fil Photo
-            </a>
+          </div>
+        </a>
+
+        <div class="group relative overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
+          <a href="/photo" class="absolute inset-0 z-0" aria-label="Photographie"></a>
+          <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
+          <div class="relative z-10 pointer-events-none">
+            <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
+              Photographie
+            </h3>
+            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+              Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
+            </p>
+            <div class="space-y-3">
+              <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
+                → Portfolio photo
+              </span>
+              <a href="/photo/blog" class="block text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
+                → Fil Photo
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index b3b0d0d..7165956 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -7,6 +7,20 @@ export default {
 			fontFamily: {
 				display: ['Raleway', 'sans-serif'],
 			},
+			colors: {
+				tiqa: {
+					50: '#f5f0f7',
+					100: '#e8dced',
+					200: '#d1b9db',
+					300: '#b08dc0',
+					400: '#866396',
+					500: '#6b2d8b',
+					600: '#4b1862',
+					700: '#3a1055',
+					800: '#2a0b3d',
+					900: '#1a0628',
+				},
+			},
 		},
 	},
 	plugins: [require("@tailwindcss/typography")],