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

Refonte page d'accueil : bloc code élargi, couleurs charte Tiqa, palette harmonisée

Browse source 
- Renommé « Développeur » en « Conception logicielle » (FR/EN/AR)
- Bloc code pleine largeur avec mission en cours, projets featured et compteur de recommandations
- Théâtre et Photographie en 2 colonnes en dessous
- Palette tiqa (#4b1862) dans tailwind.config.mjs, appliquée au bloc code et bouton CTA
- Bloc théâtre en amber, bloc photo en slate
- Corrigé typo couleur facette code dans le layout (#4b1762 → #4b1862)
This commit is contained in:
Jalil Arfaoui 2026-02-23 01:50:46 +01:00
parent 76bd2f9fb3
commit 8148d2c954
5 changed files with 273 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/main.astro
View file

@ -48,7 +48,7 @@ const locale = pathname.startsWith("/en")
</style>
<style is:global>
[data-facet="code"] {
--facet-color: #4b1762;
--facet-color: #4b1862;
--facet-color-light: #6b2d8b;
--facet-color-lighter: #8b4dab;
background: linear-gradient(135deg, var(--facet-color) 0%, #3a1055 50%, #2a0b3d 100%) !important;

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

@ -1,7 +1,19 @@
---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import Layout from "../../layouts/main.astro";
import jalilPhoto from "../../assets/images/jalil-2.jpg";
const currentMission = (await getCollection("experiences"))
.filter((e) => e.data.lang === "ar" && !e.data.draft && !e.data.endDate)
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
const featuredProjects = (await getCollection("projects"))
.filter((p) => p.data.lang === "ar" && !p.data.draft && p.data.category === "dev" && p.data.featured)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
.slice(0, 2);
const recommendationCount = (await getCollection("recommendations")).length;
---
<Layout
@ -23,7 +35,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</p>
<div class="flex flex-wrap gap-4">
<a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
<a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
اكتشف أعمالي
</a>
<a href="/ar/نبذة-عني" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@ -51,53 +63,84 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</div>
<div dir="rtl" lang="ar" class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<a href="/ar/برمجة" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
<div class="space-y-8">
<a href="/ar/برمجة" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
<div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
المطوّر
<h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
تصميم البرمجيات
</h3>
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
<div class="md:flex md:flex-row-reverse md:gap-8">
<div class="md:flex-1">
<p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
أكثر من 20 سنة في تصميم وبناء البرمجيات. كمطوّر أول، أو قائد تقني، أو مدرب تقني، أرافق الفرق التي تريد تقديم كود تفتخر به.
</p>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
← اكتشف المزيد
<p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
أفضّل البرمجيات الحرّة والمشاريع ذات الفائدة الحقيقية. ما يميّزني ربّما: أهتمّ بجودة الكود بقدر اهتمامي بالتحيّزات التي ندرجها فيه دون أن ندري.
</p>
</div>
<div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
{currentMission && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">المهمة الحالية</p>
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
</div>
)}
{featuredProjects.length > 0 && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">المشاريع</p>
{featuredProjects.map((p) => (
<div class="mb-1.5 last:mb-0">
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
</div>
))}
</div>
)}
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">التوصيات</p>
<p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} توصية</p>
</div>
</div>
</div>
<span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
← المسار، المشاريع والتوصيات
</span>
</div>
</a>
<a href="/ar/مسرح" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<a href="/ar/مسرح" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
<div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
المسرح
</h3>
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
<p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
</p>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
← المسار الفني
</span>
</div>
</a>
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
<div class="group relative overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
<a href="/ar/تصوير" class="absolute inset-0 z-0" aria-label="التصوير"></a>
<div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
التصوير
</h3>
<p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
<p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
</p>
<div class="space-y-3">
<span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
← معرض الصور
</span>
<a href="/ar/تصوير/مدونة" class="block text-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-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
← مُدوّنة الصور
</a>
</div>
@ -105,6 +148,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</div>
</div>
</div>
</div>
<!-- Blog Section
<div dir="rtl" lang="ar" class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">

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

@ -1,7 +1,19 @@
---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import Layout from "../../layouts/main.astro";
import jalilPhoto from "../../assets/images/jalil-2.jpg";
const currentMission = (await getCollection("experiences"))
.filter((e) => e.data.lang === "en" && !e.data.draft && !e.data.endDate)
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
const featuredProjects = (await getCollection("projects"))
.filter((p) => p.data.lang === "en" && !p.data.draft && p.data.category === "dev" && p.data.featured)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
.slice(0, 2);
const recommendationCount = (await getCollection("recommendations")).length;
---
<Layout
@ -23,7 +35,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</p>
<div class="flex flex-wrap gap-4">
<a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
<a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
View my work
</a>
<a href="/en/about" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@ -51,53 +63,84 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</div>
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<a href="/en/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
<div class="space-y-8">
<a href="/en/code" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
Developer
<h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
Software Design
</h3>
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
Over 20 years building software. Today, I choose my projects: free software, useful tools, nothing that alienates. Craftsmanship, DDD, TypeScript — and an obsession with the biases we unknowingly put into code. I teach programming and run the Software Crafters meetup in Albi.
<div class="md:flex md:gap-8">
<div class="md:flex-1">
<p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
Over 20 years designing and building software. As a senior developer, tech lead or technical coach, I help teams deliver code they can be proud of.
</p>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
→ Learn more
<p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
I favor free software and projects that serve real needs. What sets me apart, perhaps: I care as much about code quality as about the biases we unknowingly embed in it.
</p>
</div>
<div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
{currentMission && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Current mission</p>
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
</div>
)}
{featuredProjects.length > 0 && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Projects</p>
{featuredProjects.map((p) => (
<div class="mb-1.5 last:mb-0">
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
</div>
))}
</div>
)}
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Recommendations</p>
<p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} recommendations</p>
</div>
</div>
</div>
<span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
→ Career, projects and recommendations
</span>
</div>
</a>
<a href="/en/acting" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<a href="/en/acting" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
Theater
</h3>
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
<p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
</p>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
→ Artistic journey
</span>
</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-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
<a href="/en/photo" class="absolute inset-0 z-0" aria-label="Photography"></a>
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
Photography
</h3>
<p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
<p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
</p>
<div class="space-y-3">
<span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
→ Photo portfolio
</span>
<a href="/en/photo/blog" class="block text-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-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
→ Photo Feed
</a>
</div>
@ -105,6 +148,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
</div>
</div>
</div>
</div>
<!-- Blog Section
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">

82
src/pages/index.astro
View file

@ -1,7 +1,19 @@
---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import Layout from "../layouts/main.astro";
import jalilPhoto from "../assets/images/jalil-2.jpg";
const currentMission = (await getCollection("experiences"))
.filter((e) => e.data.lang === "fr" && !e.data.draft && !e.data.endDate)
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1))[0];
const featuredProjects = (await getCollection("projects"))
.filter((p) => p.data.lang === "fr" && !p.data.draft && p.data.category === "dev" && p.data.featured)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
.slice(0, 2);
const recommendationCount = (await getCollection("recommendations")).length;
---
<Layout
@ -23,7 +35,7 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
</p>
<div class="flex flex-wrap gap-4">
<a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200">
<a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
Voir mon travail
</a>
<a href="/a-propos" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
@ -51,53 +63,84 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
</div>
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<a href="/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
<div class="space-y-8">
<a href="/code" class="group relative overflow-hidden bg-gradient-to-br from-tiqa-50 to-tiqa-100 dark:from-tiqa-800/30 dark:to-tiqa-900/30 rounded-3xl p-8 hover:scale-[1.02] transition-all duration-300 border border-tiqa-200/50 dark:border-tiqa-600/30 block no-underline">
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
Développeur
<h3 class="text-2xl font-bold text-tiqa-900 dark:text-tiqa-100 mb-4">
Conception logicielle
</h3>
<p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
Plus de 20 ans à construire du logiciel. Aujourd'hui, je choisis mes projets : du libre, de l'utile, rien qui aliène. Craftsmanship, DDD, TypeScript — et une obsession pour les biais qu'on met dans le code sans le savoir. J'enseigne la programmation et j'anime les Software Crafters d'Albi.
<div class="md:flex md:gap-8">
<div class="md:flex-1">
<p class="text-tiqa-600 dark:text-tiqa-300 mb-3 leading-relaxed">
Plus de 20 ans à concevoir et construire du logiciel. Développeur senior, tech lead ou coach technique, j'accompagne les équipes qui veulent livrer du code dont elles sont fières.
</p>
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
→ En savoir plus
<p class="text-tiqa-600 dark:text-tiqa-300 mb-4 leading-relaxed">
Je privilégie le logiciel libre et les projets utiles. Ce qui me distingue peut-être : je m'intéresse autant à la qualité du code qu'aux biais qu'on y inscrit sans le savoir.
</p>
</div>
<div class="md:w-64 flex-shrink-0 space-y-4 mb-4 md:mb-0">
{currentMission && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Mission en cours</p>
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{currentMission.data.role}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300">{currentMission.data.company}</p>
</div>
)}
{featuredProjects.length > 0 && (
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Projets</p>
{featuredProjects.map((p) => (
<div class="mb-1.5 last:mb-0">
<p class="text-sm font-medium text-tiqa-900 dark:text-tiqa-100">{p.data.title}</p>
<p class="text-xs text-tiqa-500 dark:text-tiqa-300 line-clamp-1">{p.data.description}</p>
</div>
))}
</div>
)}
<div>
<p class="text-xs font-semibold text-tiqa-400 dark:text-tiqa-400 uppercase tracking-wider mb-1.5">Recommandations</p>
<p class="text-sm text-tiqa-600 dark:text-tiqa-300">{recommendationCount} recommandations</p>
</div>
</div>
</div>
<span class="text-tiqa-500 dark:text-tiqa-300 group-hover:text-tiqa-700 dark:group-hover:text-tiqa-100 font-medium">
→ Parcours, projets et recommandations
</span>
</div>
</a>
<a href="/theatre" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<a href="/theatre" class="group relative overflow-hidden bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-amber-200/50 dark:border-amber-800/30 block no-underline">
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
<h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-3">
Théâtre
</h3>
<p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
<p class="text-amber-700 dark:text-amber-300 mb-6 leading-relaxed">
Improvisateur depuis 2008, passé par les Yvelines et le Maroc avant de cofonder Les Particules à Albi. Aujourd'hui je m'attaque aussi au théâtre écrit.
</p>
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
<span class="text-amber-600 dark:text-amber-400 group-hover:text-amber-800 dark:group-hover:text-amber-200 font-medium">
→ Parcours artistique
</span>
</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-slate-100 to-slate-200 dark:from-slate-800/30 dark:to-slate-700/20 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-slate-300/50 dark:border-slate-600/30">
<a href="/photo" class="absolute inset-0 z-0" aria-label="Photographie"></a>
<div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
<div class="relative z-10 pointer-events-none">
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
Photographie
</h3>
<p class="text-purple-700 dark:text-purple-300 mb-6 leading-relaxed">
<p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
</p>
<div class="space-y-3">
<span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
→ Portfolio photo
</span>
<a href="/photo/blog" class="block text-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-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 font-medium pointer-events-auto relative z-20">
→ Fil Photo
</a>
</div>
@ -105,6 +148,7 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
</div>
</div>
</div>
</div>
<!-- Blog Section
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">

14
tailwind.config.mjs
View file

@ -7,6 +7,20 @@ export default {
fontFamily: {
display: ['Raleway', 'sans-serif'],
},
colors: {
tiqa: {
50: '#f5f0f7',
100: '#e8dced',
200: '#d1b9db',
300: '#b08dc0',
400: '#866396',
500: '#6b2d8b',
600: '#4b1862',
700: '#3a1055',
800: '#2a0b3d',
900: '#1a0628',
},
},
},
},
plugins: [require("@tailwindcss/typography")],