Utilisation du composant Image d'Astro pour les photos de profil

Déplacement de jalil.jpg et jalil-2.jpg de public/ vers src/assets/images/ pour permettre l'optimisation automatique (webp, redimensionnement). Mise à jour des 6 pages (index et à propos en FR, EN, AR) pour utiliser <Image> au lieu de <img>.

src/pages/a-propos.astro

@@ -1,7 +1,9 @@
 ---
+import { Image } from "astro:assets";
 import PageHeading from "../components/page-heading.astro";
 import Layout from "../layouts/main.astro";
 import Link from "../components/Link.astro";
+import jalilPhoto from "../assets/images/jalil.jpg";
 ---
 
 <Layout title="À propos - Jalil Arfaoui">
@@ -11,7 +13,7 @@ import Link from "../components/Link.astro";
       description="Développeur artisan, comédien improvisateur, photographe curieux."
     />
 
-    <img src="/assets/images/jalil.jpg" class="relative z-30 w-full my-10 rounded-xl" alt="Jalil Arfaoui" />
+    <Image src={jalilPhoto} class="relative z-30 w-full my-10 rounded-xl" alt="Jalil Arfaoui" />
 
     <h2 class="mb-4 text-2xl font-bold dark:text-neutral-200">Qui suis-je ?</h2>
     <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">

src/pages/ar/index.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Layout from "../../layouts/main.astro";
+import jalilPhoto from "../../assets/images/jalil-2.jpg";
 ---
 
 <Layout title="جليل عرفاوي - حِرَفي برمجة • ممثل ارتجالي • مصوّر">
@@ -18,10 +20,9 @@ import Layout from "../../layouts/main.astro";
         </p>
 
         <div class="flex flex-wrap gap-4">
-          <span class="wip-link inline-flex items-center px-6 py-3 text-sm font-semibold text-white/60 bg-blue-600/50 rounded-full cursor-not-allowed" title="قيد الإنشاء">
+          <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">
             اكتشف أعمالي
-            <span class="mr-2">🚧</span>
+          </a>
-          </span>
           <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">
             تعرّف عليّ أكثر
           </a>
@@ -32,8 +33,8 @@ import Layout from "../../layouts/main.astro";
         <div class="relative z-50 w-full max-w-sm mx-auto">
           <div class="relative z-30 p-1 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-3xl">
             <div class="bg-white dark:bg-neutral-950 rounded-3xl p-4">
-              <img
+              <Image
-                src="/assets/images/jalil-2.jpg"
+                src={jalilPhoto}
                 alt="جليل عرفاوي"
                 loading="eager"
                 decoding="auto"
@@ -59,15 +60,9 @@ import Layout from "../../layouts/main.astro";
             أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
           </p>
           <div class="space-y-3">
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="قيد الإنشاء">
+            <a href="/ar/برمجة" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              ← المسار المهني 🚧
+              ← اكتشف المزيد
-            </span>
+            </a>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="قيد الإنشاء">
-              ← مشاريعي 🚧
-            </span>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="قيد الإنشاء">
-              ← المدوّنة التقنية 🚧
-            </span>
           </div>
         </div>
       </div>
@@ -82,9 +77,9 @@ import Layout from "../../layouts/main.astro";
             ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
           </p>
           <div class="space-y-3">
-            <span class="block text-orange-400/50 dark:text-orange-600/50 cursor-not-allowed" title="قيد الإنشاء">
+            <a href="/ar/مسرح" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              ← المسار الفني 🚧
+              ← المسار الفني
-            </span>
+            </a>
           </div>
         </div>
       </div>

src/pages/ar/نبذة-عني.astro

@@ -1,7 +1,9 @@
 ---
+import { Image } from "astro:assets";
 import PageHeading from "../../components/page-heading.astro";
 import Layout from "../../layouts/main.astro";
 import Link from "../../components/Link.astro";
+import jalilPhoto from "../../assets/images/jalil.jpg";
 ---
 
 <Layout title="نبذة عني - جليل عرفاوي">
@@ -11,7 +13,7 @@ import Link from "../../components/Link.astro";
       description="حِرَفي برمجة، ممثل ارتجالي، مصوّر فضولي."
     />
 
-    <img src="/assets/images/jalil.jpg" class="relative z-30 w-full my-10 rounded-xl" alt="جليل عرفاوي" />
+    <Image src={jalilPhoto} class="relative z-30 w-full my-10 rounded-xl" alt="جليل عرفاوي" />
 
     <h2 class="mb-4 text-2xl font-bold dark:text-neutral-200">من أنا؟</h2>
     <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">

src/pages/en/about.astro

@@ -1,7 +1,9 @@
 ---
+import { Image } from "astro:assets";
 import PageHeading from "../../components/page-heading.astro";
 import Layout from "../../layouts/main.astro";
 import Link from "../../components/Link.astro";
+import jalilPhoto from "../../assets/images/jalil.jpg";
 ---
 
 <Layout title="About - Jalil Arfaoui">
@@ -11,7 +13,7 @@ import Link from "../../components/Link.astro";
       description="Software craftsman, improv actor, curious photographer."
     />
 
-    <img src="/assets/images/jalil.jpg" class="relative z-30 w-full my-10 rounded-xl" alt="Jalil Arfaoui" />
+    <Image src={jalilPhoto} class="relative z-30 w-full my-10 rounded-xl" alt="Jalil Arfaoui" />
 
     <h2 class="mb-4 text-2xl font-bold dark:text-neutral-200">Who am I?</h2>
     <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">

src/pages/en/index.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Layout from "../../layouts/main.astro";
+import jalilPhoto from "../../assets/images/jalil-2.jpg";
 ---
 
 <Layout title="Jalil Arfaoui - Software Craftsman • Improv Actor • Photographer">
@@ -18,10 +20,9 @@ import Layout from "../../layouts/main.astro";
         </p>
 
         <div class="flex flex-wrap gap-4">
-          <span class="wip-link inline-flex items-center px-6 py-3 text-sm font-semibold text-white/60 bg-blue-600/50 rounded-full cursor-not-allowed" title="Under construction">
+          <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">
             View my work
-            <span class="ml-2">🚧</span>
+          </a>
-          </span>
           <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">
             Learn more
           </a>
@@ -32,8 +33,8 @@ import Layout from "../../layouts/main.astro";
         <div class="relative z-50 w-full max-w-sm mx-auto">
           <div class="relative z-30 p-1 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-3xl">
             <div class="bg-white dark:bg-neutral-950 rounded-3xl p-4">
-              <img
+              <Image
-                src="/assets/images/jalil-2.jpg"
+                src={jalilPhoto}
                 alt="Jalil Arfaoui"
                 loading="eager"
                 decoding="auto"
@@ -59,15 +60,9 @@ import Layout from "../../layouts/main.astro";
             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>
           <div class="space-y-3">
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="Under construction">
+            <a href="/en/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              → Professional journey 🚧
+              → Learn more
-            </span>
+            </a>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="Under construction">
-              → My projects 🚧
-            </span>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="Under construction">
-              → Technical blog 🚧
-            </span>
           </div>
         </div>
       </div>
@@ -82,9 +77,9 @@ import Layout from "../../layouts/main.astro";
             Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
           </p>
           <div class="space-y-3">
-            <span class="block text-orange-400/50 dark:text-orange-600/50 cursor-not-allowed" title="Under construction">
+            <a href="/en/acting" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              → Artistic journey 🚧
+              → Artistic journey
-            </span>
+            </a>
           </div>
         </div>
       </div>

src/pages/index.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Layout from "../layouts/main.astro";
+import jalilPhoto from "../assets/images/jalil-2.jpg";
 ---
 
 <Layout title="Jalil Arfaoui - Développeur artisan • Comédien improvisateur • Photographe">
@@ -18,10 +20,9 @@ import Layout from "../layouts/main.astro";
         </p>
         
         <div class="flex flex-wrap gap-4">
-          <span class="wip-link inline-flex items-center px-6 py-3 text-sm font-semibold text-white/60 bg-blue-600/50 rounded-full cursor-not-allowed" title="En construction">
+          <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">
             Voir mon travail
-            <span class="ml-2">🚧</span>
+          </a>
-          </span>
           <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">
             En savoir plus
           </a>
@@ -32,8 +33,8 @@ import Layout from "../layouts/main.astro";
         <div class="relative z-50 w-full max-w-sm mx-auto">
           <div class="relative z-30 p-1 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-3xl">
             <div class="bg-white dark:bg-neutral-950 rounded-3xl p-4">
-              <img
+              <Image
-                src="/assets/images/jalil-2.jpg"
+                src={jalilPhoto}
                 alt="Jalil Arfaoui"
                 loading="eager"
                 decoding="auto"
@@ -59,15 +60,9 @@ import Layout from "../layouts/main.astro";
             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>
           <div class="space-y-3">
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="En construction">
+            <a href="/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              → Parcours professionnel 🚧
+              → En savoir plus
-            </span>
+            </a>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="En construction">
-              → Mes projets 🚧
-            </span>
-            <span class="block text-blue-400/50 dark:text-blue-600/50 cursor-not-allowed" title="En construction">
-              → Blog technique 🚧
-            </span>
           </div>
         </div>
       </div>
@@ -82,9 +77,9 @@ import Layout from "../layouts/main.astro";
             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>
           <div class="space-y-3">
-            <span class="block text-orange-400/50 dark:text-orange-600/50 cursor-not-allowed" title="En construction">
+            <a href="/theatre" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              → Parcours artistique 🚧
+              → Parcours artistique
-            </span>
+            </a>
           </div>
         </div>
       </div>