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

Compare commits

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

No commits in common. "41699e5d0397ac46b153f00045852112d15f2118" and "66c391a5de5de08aed966c5d768aa7bc33b546c8" have entirely different histories.
41699e5d03 ... 66c391a5de

11 changed files with 74 additions and 291 deletions
Show stats Expand all files Collapse all files

5
package-lock.json generated
View file

@ -15,7 +15,6 @@
"@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",
@ -956,6 +955,7 @@
"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,6 +3640,7 @@
"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"
} }
@ -6703,7 +6704,6 @@
"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,6 +6797,7 @@
"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,7 +20,6 @@
"@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
View file

Binary file not shown.
Side by side

Before

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";
--- ---
<footer <section
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>
</footer> </section>

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, facet } = Astro.props; const { title } = Astro.props;
--- ---
<!doctype html> <!doctype html>
@ -27,55 +27,12 @@ const { title, facet } = 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" data-facet={facet}> <body class="antialiased bg-white dark:bg-neutral-950">
{!facet && <SquareLines />} <SquareLines />
<Header /> <Header />
<slot /> <slot />
<Footer /> <Footer />

29
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">
<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="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">
<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,13 +59,15 @@ 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>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium"> <div class="space-y-3">
<a href="/ar/برمجة" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
← اكتشف المزيد ← اكتشف المزيد
</span>
</div>
</a> </a>
</div>
</div>
</div>
<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="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">
<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">
@ -74,16 +76,17 @@ 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>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium"> <div class="space-y-3">
<a href="/ar/مسرح" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
← المسار الفني ← المسار الفني
</span>
</div>
</a> </a>
</div>
</div>
</div>
<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 pointer-events-none"> <div class="relative z-10">
<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>
@ -91,10 +94,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول. أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
</p> </p>
<div class="space-y-3"> <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"> <a href="/ar/تصوير" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
← معرض الصور ← معرض الصور
</span> </a>
<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 href="/ar/تصوير/مدونة" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
← مُدوّنة الصور ← مُدوّنة الصور
</a> </a>
</div> </div>

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

@ -1,12 +1,10 @@
--- ---
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="برمجة - جليل عرفاوي" facet="code"> <Layout title="برمجة - جليل عرفاوي">
<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="برمجة"
@ -19,53 +17,10 @@ import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
مطوّر مستقل مقيم في <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>
@ -99,31 +54,15 @@ import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
<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> في ألبي منذ 2019 (ماستر AMINJ وليسانس معلوماتية). درّست أيضًا في <Link href="https://www.esn81.fr/" external>ESN 81</Link> في كاستر (أفضل الممارسات في التطوير، Node.js). أُدرّس البرمجة في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> في ألبي.
</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://mon-entreprise.urssaf.fr/" external>mon-entreprise.urssaf.fr</Link> لدى <Link href="https://www.urssaf.fr/" external>Urssaf Caisse nationale</Link> — أكثر من 20 محاكيًا منشورًا على المواقع العامّة، مليون مستخدم شهريًا. حاليًا مطوّر في <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).
</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,12 +1,10 @@
--- ---
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" facet="code"> <Layout title="Code - Jalil Arfaoui">
<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"
@ -19,53 +17,10 @@ import logoTiqa from "../assets/images/logo-tiqa-blanc.png";
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>
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. 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.
</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>
@ -99,31 +54,15 @@ import logoTiqa from "../assets/images/logo-tiqa-blanc.png";
<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>
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). J'enseigne la programmation à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> à Albi.
</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 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. 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).
</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,12 +1,10 @@
--- ---
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" facet="code"> <Layout title="Code - Jalil Arfaoui">
<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"
@ -19,53 +17,10 @@ import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
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>
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. 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.
</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>
@ -99,31 +54,15 @@ import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
<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>
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). I teach programming at <Link href="https://www.univ-jfc.fr/" external>Université Champollion</Link> in Albi.
</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 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. 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).
</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>

29
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">
<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="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">
<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,13 +59,15 @@ 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>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium"> <div class="space-y-3">
<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>
</div>
</a> </a>
</div>
</div>
</div>
<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="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">
<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">
@ -74,16 +76,17 @@ 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>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium"> <div class="space-y-3">
<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>
</div>
</a> </a>
</div>
</div>
</div>
<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 pointer-events-none"> <div class="relative z-10">
<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>
@ -91,10 +94,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">
<span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium"> <a href="/en/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
→ Photo portfolio → Photo portfolio
</span> </a>
<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"> <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">
→ Photo Feed → Photo Feed
</a> </a>
</div> </div>

29
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">
<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="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">
<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,13 +59,15 @@ 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>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium"> <div class="space-y-3">
<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>
</div>
</a> </a>
</div>
</div>
</div>
<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="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">
<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">
@ -74,16 +76,17 @@ 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>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium"> <div class="space-y-3">
<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>
</div>
</a> </a>
</div>
</div>
</div>
<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 pointer-events-none"> <div class="relative z-10">
<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>
@ -91,10 +94,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">
<span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium"> <a href="/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
→ Portfolio photo → Portfolio photo
</span> </a>
<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"> <a href="/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
→ Fil Photo → Fil Photo
</a> </a>
</div> </div>