jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>.
This commit is contained in:
Jalil Arfaoui 2026-02-18 11:22:05 +01:00
parent cd1ca94b11
commit 4c6f57cd6a
8 changed files with 45 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/images/jalil-2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 289 KiB

BIN
src/assets/images/jalil.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 862 KiB

4
src/pages/a-propos.astro
View file

@ -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">

29
src/pages/ar/index.astro
View file

@ -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>
</span>
</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">
تعرّف عليّ أكثر
</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
src="/assets/images/jalil-2.jpg"
<Image
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="قيد الإنشاء">
← المسار المهني 🚧
</span>
<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>
<a href="/ar/برمجة" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
← اكتشف المزيد
</a>
</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="قيد الإنشاء">
← المسار الفني 🚧
</span>
<a href="/ar/مسرح" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
← المسار الفني
</a>
</div>
</div>
</div>

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

@ -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">

4
src/pages/en/about.astro
View file

@ -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">

29
src/pages/en/index.astro
View file

@ -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>
</span>
</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">
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
src="/assets/images/jalil-2.jpg"
<Image
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">
→ Professional journey 🚧
</span>
<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>
<a href="/en/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
→ Learn more
</a>
</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">
→ Artistic journey 🚧
</span>
<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
</a>
</div>
</div>
</div>

29
src/pages/index.astro
View file

@ -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>
</span>
</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">
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
src="/assets/images/jalil-2.jpg"
<Image
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">
→ Parcours professionnel 🚧
</span>
<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>
<a href="/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
→ En savoir plus
</a>
</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">
→ Parcours artistique 🚧
</span>
<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
</a>
</div>
</div>
</div>