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

Compare commits

base: jalil:66c391a5de5de08aed966c5d768aa7bc33b546c8
Branches Tags
jalil:main
...
compare: jalil:41699e5d0397ac46b153f00045852112d15f2118
Branches Tags
jalil:main

3 commits
66c391a5de ... 41699e5d03

Author SHA1 Message Date
Jalil Arfaoui
41699e5d03 Ajout de sharp en devDependency explicite pour corriger le build Clever Cloud 
sharp était uniquement en optionalDependency d'Astro, ce qui faisait
qu'il n'était pas installé sur Clever Cloud. Le build échouait avec
"Rollup failed to resolve import sharp".
 2026-02-18 18:58:03 +01:00
Jalil Arfaoui
4bd0595e3a Blocs de la homepage entièrement cliquables (FR/EN/AR) 
Les cartes Code et Théâtre sont des <a> directs. La carte Photo utilise un stretched link avec le lien Fil Photo cliquable indépendamment par-dessus.
 2026-02-18 18:56:17 +01:00
Jalil Arfaoui
10a67a9276 Ajout de la facette Code : fond violet Tiqa, contenu complet FR/EN/AR et logo 
Système de facettes via data-facet sur body avec CSS global pour thématiser les pages /code avec la couleur Tiqa (#4b1762). Header et footer restent blancs avec texte violet. Contenu enrichi depuis tiqa.fr et LinkedIn (parcours détaillé, points forts, valeurs, compétences, présence en ligne). Balise footer sémantique.
 2026-02-18 18:46:21 +01:00
11 changed files with 291 additions and 74 deletions
Show stats Expand all files Collapse all files

5
package-lock.json generated
View file

@ -15,6 +15,7 @@
"@types/node": "^25.0.3", "@types/node": "^25.0.3",
"astro": "^5.17.2", "astro": "^5.17.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"sharp": "^0.34.5",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"tsx": "^4.21.0", "tsx": "^4.21.0",
"typescript": "^5.7.3", "typescript": "^5.7.3",
@ -955,7 +956,6 @@
"integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==", "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"optional": true,
"engines": { "engines": {
"node": ">=18" "node": ">=18"
} }
@ -3640,7 +3640,6 @@
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"optional": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@ -6704,6 +6703,7 @@
"integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==", "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
}, },
@ -6797,7 +6797,6 @@
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"optional": true,
"dependencies": { "dependencies": {
"@img/colour": "^1.0.0", "@img/colour": "^1.0.0",
"detect-libc": "^2.1.2", "detect-libc": "^2.1.2",

1
package.json
View file

@ -20,6 +20,7 @@
"@types/node": "^25.0.3", "@types/node": "^25.0.3",
"astro": "^5.17.2", "astro": "^5.17.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"sharp": "^0.34.5",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"tsx": "^4.21.0", "tsx": "^4.21.0",
"typescript": "^5.7.3", "typescript": "^5.7.3",

BIN
src/assets/images/logo-tiqa-blanc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

4
src/components/footer.astro
View file

@ -4,7 +4,7 @@ import LanguageSwitcher from "../components/LanguageSwitcher.astro";
import DarkModeToggle from "../components/DarkModeToggle.astro"; import DarkModeToggle from "../components/DarkModeToggle.astro";
--- ---
<section <footer
class="text-gray-700 bg-white border-t sm:mt-20 dark:bg-neutral-950 border-neutral-200 dark:border-neutral-800" class="text-gray-700 bg-white border-t sm:mt-20 dark:bg-neutral-950 border-neutral-200 dark:border-neutral-800"
> >
<div <div
@ -84,4 +84,4 @@ import DarkModeToggle from "../components/DarkModeToggle.astro";
</span> </span>
</div> </div>
</div> </div>
</section> </footer>

49
src/layouts/main.astro
View file

@ -2,7 +2,7 @@
import Footer from "../components/footer.astro"; import Footer from "../components/footer.astro";
import Header from "../components/header.astro"; import Header from "../components/header.astro";
import SquareLines from "../components/square-lines.astro"; import SquareLines from "../components/square-lines.astro";
const { title } = Astro.props; const { title, facet } = Astro.props;
--- ---
<!doctype html> <!doctype html>
@ -27,12 +27,55 @@ const { title } = Astro.props;
border-radius: 20px; border-radius: 20px;
} }
</style> </style>
<style is:global>
[data-facet="code"] {
--facet-code-color: #4b1762;
background-color: var(--facet-code-color) !important;
color: rgba(255, 255, 255, 0.7) !important;
}
[data-facet="code"] h2,
[data-facet="code"] strong {
color: white !important;
}
[data-facet="code"] a {
color: white !important;
font-weight: bold;
}
[data-facet="code"] p,
[data-facet="code"] li {
color: rgba(255, 255, 255, 0.7) !important;
}
[data-facet="code"] #header .bg-white\/80 {
background-color: rgba(255, 255, 255, 0.9) !important;
}
[data-facet="code"] #header .bg-white\/80 a {
color: var(--facet-code-color) !important;
}
[data-facet="code"] footer {
background-color: rgba(255, 255, 255, 0.9) !important;
border-color: var(--facet-code-color) !important;
}
[data-facet="code"] footer,
[data-facet="code"] footer a,
[data-facet="code"] footer p,
[data-facet="code"] footer svg,
[data-facet="code"] footer button {
color: var(--facet-code-color) !important;
}
</style>
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" />
<script src="../assets/css/main.css"></script> <script src="../assets/css/main.css"></script>
<Fragment set:html={import.meta.env.HEADER_INJECT} /> <Fragment set:html={import.meta.env.HEADER_INJECT} />
</head> </head>
<body class="antialiased bg-white dark:bg-neutral-950"> <body class="antialiased bg-white dark:bg-neutral-950" data-facet={facet}>
<SquareLines /> {!facet && <SquareLines />}
<Header /> <Header />
<slot /> <slot />
<Footer /> <Footer />

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

@ -50,7 +50,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<div dir="rtl" lang="ar" class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0"> <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"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div 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"> <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="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div> <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10"> <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-blue-900 dark:text-blue-100 mb-3">
@ -59,15 +59,13 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed"> <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي. أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
</p> </p>
<div class="space-y-3"> <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
<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>
</div>
</div> </div>
</div> </a>
<div 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"> <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="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10"> <div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3"> <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@ -76,17 +74,16 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed"> <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب. ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
</p> </p>
<div class="space-y-3"> <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<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>
</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"> <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="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10"> <div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3"> <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
التصوير التصوير
</h3> </h3>
@ -94,10 +91,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول. أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
</p> </p>
<div class="space-y-3"> <div class="space-y-3">
<a href="/ar/تصوير" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium"> <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
← معرض الصور ← معرض الصور
</a> </span>
<a href="/ar/تصوير/مدونة" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium"> <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> </a>
</div> </div>

69
src/pages/ar/برمجة.astro
View file

@ -1,10 +1,12 @@
--- ---
import { Image } from "astro:assets";
import PageHeading from "../../components/page-heading.astro"; import PageHeading from "../../components/page-heading.astro";
import Layout from "../../layouts/main.astro"; import Layout from "../../layouts/main.astro";
import Link from "../../components/Link.astro"; import Link from "../../components/Link.astro";
import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
--- ---
<Layout title="برمجة - جليل عرفاوي"> <Layout title="برمجة - جليل عرفاوي" facet="code">
<section dir="rtl" lang="ar" class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0"> <section dir="rtl" lang="ar" class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<PageHeading <PageHeading
title="برمجة" title="برمجة"
@ -17,10 +19,53 @@ import Link from "../../components/Link.astro";
مطوّر مستقل مقيم في <strong class="text-gray-800 dark:text-neutral-200">ألبي، فرنسا</strong>، أرافق الفرق كمطوّر أول، أو قائد تقني، أو مدرب تقني. أفضّل البرمجيات الحرّة والأدوات التي تلبي احتياجات حقيقية. مطوّر مستقل مقيم في <strong class="text-gray-800 dark:text-neutral-200">ألبي، فرنسا</strong>، أرافق الفرق كمطوّر أول، أو قائد تقني، أو مدرب تقني. أفضّل البرمجيات الحرّة والأدوات التي تلبي احتياجات حقيقية.
</p> </p>
<p> <p>
منهجيّتي: <strong class="text-gray-800 dark:text-neutral-200">TDD، الكود النظيف، تصميم المجالات</strong>. الكود مادّة تُصاغ بعناية، لا سلعة تُنتج بالجملة. أبرمج بعناية تطبيقات مدروسة تستجيب لاحتياجات حقيقية. أقود فريقي نحو أفضل الحلول والتطبيقات الأكثر فعالية لكل حالة استخدام.
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">نقاط قوّتي</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>كتابة كود مستقر، تشغيلي، قابل للصيانة، قابل للتطوير ومُختبَر جيّدًا</li>
<li>التعلّم، ونقل المعرفة</li>
<li>العمل ضمن فريق</li>
<li>المساهمة في تحسين الفريق بطرح المشاكل واقتراح الحلول</li>
<li>الاستقلالية: معرفة ما يجب فعله والقيام به</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">قيَمي</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>حركة <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></li>
<li>الفائدة الاجتماعية للمطوّر</li>
<li>الفخر بالعمل، دون غرور</li>
<li>التسيير الذاتي، الاستقلالية والمسؤولية</li>
<li>منهج <strong class="text-gray-800 dark:text-neutral-200">Domain Driven Design</strong></li>
<li>تنظيم <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>أجايل</Link>: التكرار والتحسين المستمر</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">ما أقدّمه</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li><Link href="https://www.linkedin.com/in/jalil/" external>20 سنة من الخبرة</Link> في تصميم البرمجيات</li>
<li>التزام قوي بجودة وفائدة إنجازاتي</li>
<li>تطوير محوره المستخدم</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">ما أبحث عنه</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>مهمّة في خدمة المصلحة العامّة</li>
<li>أثر اجتماعي و/أو بيئي إيجابي</li>
<li>يُفضَّل أن تكون المنظمة غير ربحية</li>
<li>يُفضَّل أن يكون المشروع مفتوح المصدر أو برمجيات حرّة</li>
<li>فريق جيّد يريد رفع المستوى</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">المهارات</h2> <h2 class="mt-10 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"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
@ -54,15 +99,31 @@ import Link from "../../components/Link.astro";
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">التدريس</h2> <h2 class="mt-10 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"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
أُدرّس البرمجة في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> في ألبي. أستاذ هندسة البرمجيات في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> في ألبي منذ 2019 (ماستر AMINJ وليسانس معلوماتية). درّست أيضًا في <Link href="https://www.esn81.fr/" external>ESN 81</Link> في كاستر (أفضل الممارسات في التطوير، Node.js).
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">المسار</h2> <h2 class="mt-10 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"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
حاليًا مطوّر في <Link href="https://www.urssaf.fr/" external>Urssaf</Link>. قبل ذلك، مسار مرّ عبر <Link href="https://while42.org/" external>while42</Link> وشركات ناشئة واستشارات. خرّيج <Link href="https://www.uvsq.fr/" external>UVSQ</Link> (أفضل مشروع تخرّج 2003). حاليًا مطوّر رئيسي في <Link href="https://mon-entreprise.urssaf.fr/" external>mon-entreprise.urssaf.fr</Link> لدى <Link href="https://www.urssaf.fr/" external>Urssaf Caisse nationale</Link> — أكثر من 20 محاكيًا منشورًا على المواقع العامّة، مليون مستخدم شهريًا.
</p>
<p>
قبل ذلك: مدير تقني في <Link href="https://www.gobuild.fr" external>GoBuild</Link> (نمذجة المباني، ليون)، مهندس معماري للواجهات في <Link href="https://www.araymond.com/" external>ARaymond</Link> (غرونوبل)، قائد تقني في <Link href="https://www.veepee.com/" external>Veepee</Link> (سابقًا vente-privee) حيث قدت فريقًا من 8 مطوّرين وشاركت في تأسيس برنامج التدريب الداخلي React Academy.
</p>
<p>
مؤسّس مشارك لـ<Link href="https://github.com/dis-moi" external>DisMoi</Link>، إضافة متصفّح في مجال التكنولوجيا المدنية. مؤسّس <Link href="https://jalil.arfaoui.net/team-logics" external>Team Logics</Link> (2007-2011)، وكالة ويب أدرت فيها فريقًا من 6 أشخاص لعملاء مثل ALD Automotive وJoué Club وConsuel.
</p>
<p>
مطوّر عصامي منذ 2003. أفضل مشروع برمجة لدفعة 2003 في <Link href="https://www.uvsq.fr/" external>UVSQ</Link>.
</p> </p>
</div> </div>
<h2 class="mt-10 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">
<p>
<Link href="https://www.linkedin.com/in/jalil" external>LinkedIn</Link> · <Link href="https://www.malt.fr/profile/jalilarfaoui" external>Malt</Link> · <Link href="https://stackexchange.com/users/54164/jalil" external>Stack Overflow</Link> · <Link href="https://github.com/JalilArfaoui" external>GitHub</Link> · <Link href="https://framagit.org/jalil" external>Framagit</Link> · <Link href="https://forge.tiqa.fr" external>Forge شخصية</Link>
</p>
</div>
<Image src={logoTiqa} alt="شعار Tiqa" class="mx-auto mt-16 mb-4" width={200} />
</section> </section>
</Layout> </Layout>

69
src/pages/code.astro
View file

@ -1,10 +1,12 @@
--- ---
import { Image } from "astro:assets";
import PageHeading from "../components/page-heading.astro"; import PageHeading from "../components/page-heading.astro";
import Layout from "../layouts/main.astro"; import Layout from "../layouts/main.astro";
import Link from "../components/Link.astro"; import Link from "../components/Link.astro";
import logoTiqa from "../assets/images/logo-tiqa-blanc.png";
--- ---
<Layout title="Code - Jalil Arfaoui"> <Layout title="Code - Jalil Arfaoui" facet="code">
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0"> <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<PageHeading <PageHeading
title="Code" title="Code"
@ -17,10 +19,53 @@ import Link from "../components/Link.astro";
Développeur freelance basé à <strong class="text-gray-800 dark:text-neutral-200">Albi</strong>, j'accompagne les équipes comme développeur senior, tech lead ou coach technique. Je privilégie le logiciel libre et les outils qui répondent à de vrais besoins. Développeur freelance basé à <strong class="text-gray-800 dark:text-neutral-200">Albi</strong>, j'accompagne les équipes comme développeur senior, tech lead ou coach technique. Je privilégie le logiciel libre et les outils qui répondent à de vrais besoins.
</p> </p>
<p> <p>
Mon approche : <strong class="text-gray-800 dark:text-neutral-200">TDD, Clean Code, Domain-Driven Design</strong>. Le code est un matériau qu'on façonne avec soin, pas une marchandise qu'on produit à la chaîne. Je code soigneusement des applications bien pensées qui répondent à des besoins réels. Je mène mon équipe vers les meilleures solutions et les implémentations les plus efficaces pour chaque cas d'usage.
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Mes points forts</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>Écrire du code stable, opérationnel, maintenable, évolutif et bien testé</li>
<li>Apprendre, et transmettre</li>
<li>Travailler en équipe</li>
<li>Participer à l'amélioration de l'équipe en soulevant les problèmes et en proposant des solutions</li>
<li>Autonomie : savoir ce que j'ai à faire et le faire</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Mes valeurs</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></li>
<li>L'utilité sociale du développeur</li>
<li>Être fier de son travail, mais sans égo</li>
<li>Autogestion, autonomie et responsabilité</li>
<li>Approche <strong class="text-gray-800 dark:text-neutral-200">Domain Driven Design</strong></li>
<li>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Ce que j'offre</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li><Link href="https://www.linkedin.com/in/jalil/" external>20 ans d'expérience</Link> en conception logicielle</li>
<li>Une forte implication dans la qualité et l'utilité de mes réalisations</li>
<li>Développement centré sur l'utilisateur</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Ce que je recherche</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>Une mission dans le sens de l'intérêt général</li>
<li>Un impact social et/ou environnemental positif</li>
<li>Idéalement à but non lucratif</li>
<li>Idéalement open-source voire logiciel libre</li>
<li>Une bonne équipe qui veut élever le niveau</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Compétences</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Compétences</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
@ -54,15 +99,31 @@ import Link from "../components/Link.astro";
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Enseignement</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Enseignement</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
J'enseigne la programmation à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> à Albi. Enseignant en génie logiciel à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> d'Albi depuis 2019 (Master AMINJ et Licence informatique). Également intervenu à l'<Link href="https://www.esn81.fr/" external>ESN 81</Link> à Castres (bonnes pratiques de développement, Node.js).
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Parcours</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Parcours</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
Actuellement développeur pour l'<Link href="https://www.urssaf.fr/" external>Urssaf</Link>. Avant ça, un chemin passé par <Link href="https://while42.org/" external>while42</Link>, des startups et du conseil. Diplômé de l'<Link href="https://www.uvsq.fr/" external>UVSQ</Link> (meilleur projet de promo 2003). Actuellement lead developer de <Link href="https://mon-entreprise.urssaf.fr/" external>mon-entreprise.urssaf.fr</Link> à l'<Link href="https://www.urssaf.fr/" external>Urssaf Caisse nationale</Link> — plus de 20 simulateurs diffusés sur les sites publics, un million d'usagers par mois.
</p>
<p>
Avant ça : CTO de <Link href="https://www.gobuild.fr" external>GoBuild</Link> (modélisation de bâtiments, Lyon), architecte front-end chez <Link href="https://www.araymond.com/" external>ARaymond</Link> (Grenoble), tech lead chez <Link href="https://www.veepee.com/" external>Veepee</Link> (ex vente-privee) où j'ai encadré une équipe de 8 développeurs et cofondé le programme de formation interne React Academy.
</p>
<p>
Cofondateur de <Link href="https://github.com/dis-moi" external>DisMoi</Link>, extension navigateur civic tech. Fondateur de <Link href="https://jalil.arfaoui.net/team-logics" external>Team Logics</Link> (2007-2011), agence web où j'ai dirigé une équipe de 6 personnes pour des clients comme ALD Automotive, Joué Club ou Consuel.
</p>
<p>
Développeur autodidacte depuis 2003. Meilleur projet de programmation de la promo 2003 à l'<Link href="https://www.uvsq.fr/" external>UVSQ</Link>.
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">En ligne</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p>
<Link href="https://www.linkedin.com/in/jalil" external>LinkedIn</Link> · <Link href="https://www.malt.fr/profile/jalilarfaoui" external>Malt</Link> · <Link href="https://stackexchange.com/users/54164/jalil" external>Stack Overflow</Link> · <Link href="https://github.com/JalilArfaoui" external>GitHub</Link> · <Link href="https://framagit.org/jalil" external>Framagit</Link> · <Link href="https://forge.tiqa.fr" external>Forge personnelle</Link>
</p>
</div>
<Image src={logoTiqa} alt="Logo Tiqa" class="mx-auto mt-16 mb-4" width={200} />
</section> </section>
</Layout> </Layout>

69
src/pages/en/code.astro
View file

@ -1,10 +1,12 @@
--- ---
import { Image } from "astro:assets";
import PageHeading from "../../components/page-heading.astro"; import PageHeading from "../../components/page-heading.astro";
import Layout from "../../layouts/main.astro"; import Layout from "../../layouts/main.astro";
import Link from "../../components/Link.astro"; import Link from "../../components/Link.astro";
import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
--- ---
<Layout title="Code - Jalil Arfaoui"> <Layout title="Code - Jalil Arfaoui" facet="code">
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0"> <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<PageHeading <PageHeading
title="Code" title="Code"
@ -17,10 +19,53 @@ import Link from "../../components/Link.astro";
Freelance developer based in <strong class="text-gray-800 dark:text-neutral-200">Albi, France</strong>, I work with teams as a senior developer, tech lead or technical coach. I favor free software and tools that address real needs. Freelance developer based in <strong class="text-gray-800 dark:text-neutral-200">Albi, France</strong>, I work with teams as a senior developer, tech lead or technical coach. I favor free software and tools that address real needs.
</p> </p>
<p> <p>
My approach: <strong class="text-gray-800 dark:text-neutral-200">TDD, Clean Code, Domain-Driven Design</strong>. Code is a material to be crafted with care, not a commodity to be mass-produced. I carefully code well-thought-out applications that meet real needs. I lead my team toward the best solutions and most effective implementations for each use case.
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">My strengths</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>Writing stable, operational, maintainable, scalable and well-tested code</li>
<li>Learning, and passing it on</li>
<li>Working as a team</li>
<li>Helping improve the team by raising issues and proposing solutions</li>
<li>Autonomy: knowing what needs to be done and doing it</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">My values</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>The <Link href="http://manifesto.softwarecraftsmanship.org/#/en" external>Software Craftsmanship</Link> movement</li>
<li>The social usefulness of the developer</li>
<li>Taking pride in your work, without ego</li>
<li>Self-management, autonomy and responsibility</li>
<li><strong class="text-gray-800 dark:text-neutral-200">Domain Driven Design</strong> approach</li>
<li><Link href="https://agilemanifesto.org/iso/en/manifesto.html" external>Agile</Link> organization: iteration and continuous improvement</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">What I offer</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li><Link href="https://www.linkedin.com/in/jalil/" external>20 years of experience</Link> in software design</li>
<li>A strong commitment to the quality and usefulness of my work</li>
<li>User-centered development</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">What I'm looking for</h2>
<div class="text-gray-600 dark:text-neutral-400 leading-relaxed">
<ul class="list-disc list-inside space-y-2">
<li>A mission serving the public interest</li>
<li>A positive social and/or environmental impact</li>
<li>Ideally non-profit</li>
<li>Ideally open-source or free software</li>
<li>A great team that wants to raise the bar</li>
</ul>
</div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Skills</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Skills</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
@ -54,15 +99,31 @@ import Link from "../../components/Link.astro";
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Teaching</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Teaching</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
I teach programming at <Link href="https://www.univ-jfc.fr/" external>Université Champollion</Link> in Albi. Software engineering professor at <Link href="https://www.univ-jfc.fr/" external>Université Champollion</Link> in Albi since 2019 (Master AMINJ and Bachelor in Computer Science). Also taught at <Link href="https://www.esn81.fr/" external>ESN 81</Link> in Castres (development best practices, Node.js).
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Background</h2> <h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Background</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed"> <div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p> <p>
Currently a developer at <Link href="https://www.urssaf.fr/" external>Urssaf</Link>. Before that, a path through <Link href="https://while42.org/" external>while42</Link>, startups and consulting. Graduated from <Link href="https://www.uvsq.fr/" external>UVSQ</Link> (best graduation project 2003). Currently lead developer of <Link href="https://mon-entreprise.urssaf.fr/" external>mon-entreprise.urssaf.fr</Link> at <Link href="https://www.urssaf.fr/" external>Urssaf Caisse nationale</Link> — 20+ simulators deployed on public websites, one million users per month.
</p>
<p>
Previously: CTO at <Link href="https://www.gobuild.fr" external>GoBuild</Link> (building modeling, Lyon), frontend architect at <Link href="https://www.araymond.com/" external>ARaymond</Link> (Grenoble), tech lead at <Link href="https://www.veepee.com/" external>Veepee</Link> (formerly vente-privee) where I led a team of 8 developers and co-founded the internal React Academy training program.
</p>
<p>
Co-founder of <Link href="https://github.com/dis-moi" external>DisMoi</Link>, a civic tech browser extension. Founder of <Link href="https://jalil.arfaoui.net/team-logics" external>Team Logics</Link> (2007-2011), a web agency where I led a team of 6 for clients like ALD Automotive, Joué Club and Consuel.
</p>
<p>
Self-taught developer since 2003. Best programming project of the 2003 class at <Link href="https://www.uvsq.fr/" external>UVSQ</Link>.
</p> </p>
</div> </div>
<h2 class="mt-10 mb-4 text-2xl font-bold dark:text-neutral-200">Online</h2>
<div class="space-y-4 text-gray-600 dark:text-neutral-400 leading-relaxed">
<p>
<Link href="https://www.linkedin.com/in/jalil" external>LinkedIn</Link> · <Link href="https://www.malt.fr/profile/jalilarfaoui" external>Malt</Link> · <Link href="https://stackexchange.com/users/54164/jalil" external>Stack Overflow</Link> · <Link href="https://github.com/JalilArfaoui" external>GitHub</Link> · <Link href="https://framagit.org/jalil" external>Framagit</Link> · <Link href="https://forge.tiqa.fr" external>Personal forge</Link>
</p>
</div>
<Image src={logoTiqa} alt="Tiqa logo" class="mx-auto mt-16 mb-4" width={200} />
</section> </section>
</Layout> </Layout>

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

@ -50,7 +50,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0"> <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"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div 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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div> <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10"> <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-blue-900 dark:text-blue-100 mb-3">
@ -59,15 +59,13 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed"> <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. 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> </p>
<div class="space-y-3"> <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
<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
→ Learn more </span>
</a>
</div>
</div> </div>
</div> </a>
<div 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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10"> <div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3"> <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@ -76,17 +74,16 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed"> <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. Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
</p> </p>
<div class="space-y-3"> <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<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>
</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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10"> <div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3"> <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
Photography Photography
</h3> </h3>
@ -94,10 +91,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity. I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
</p> </p>
<div class="space-y-3"> <div class="space-y-3">
<a href="/en/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium"> <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 → Photo portfolio
</a> </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"> <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 → Photo Feed
</a> </a>
</div> </div>

33
src/pages/index.astro
View file

@ -50,7 +50,7 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0"> <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"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div 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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div> <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10"> <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-blue-900 dark:text-blue-100 mb-3">
@ -59,15 +59,13 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed"> <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. 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> </p>
<div class="space-y-3"> <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
<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
→ En savoir plus </span>
</a>
</div>
</div> </div>
</div> </a>
<div 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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10"> <div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3"> <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@ -76,17 +74,16 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed"> <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. 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> </p>
<div class="space-y-3"> <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<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>
</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"> <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="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10"> <div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3"> <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
Photographie Photographie
</h3> </h3>
@ -94,10 +91,10 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité. Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
</p> </p>
<div class="space-y-3"> <div class="space-y-3">
<a href="/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium"> <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 → Portfolio photo
</a> </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"> <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 → Fil Photo
</a> </a>
</div> </div>