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.
This commit is contained in:
parent
10a67a9276
commit
4bd0595e3a
3 changed files with 45 additions and 54 deletions
|
|
@ -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 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="relative z-10">
|
||||
<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">
|
||||
أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
|
||||
</p>
|
||||
<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 class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
|
||||
← اكتشف المزيد
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="relative z-10">
|
||||
<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">
|
||||
ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
|
||||
</p>
|
||||
<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 class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
|
||||
← المسار الفني
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<div class="relative z-10 pointer-events-none">
|
||||
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
|
||||
التصوير
|
||||
</h3>
|
||||
|
|
@ -94,10 +91,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
|
|||
أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
|
||||
</p>
|
||||
<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>
|
||||
<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 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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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="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="relative z-10">
|
||||
<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">
|
||||
Over 20 years building software. Today, I choose my projects: free software, useful tools, nothing that alienates. Craftsmanship, DDD, TypeScript — and an obsession with the biases we unknowingly put into code. I teach programming and run the Software Crafters meetup in Albi.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<a href="/en/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
|
||||
<span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
|
||||
→ Learn more
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="relative z-10">
|
||||
<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">
|
||||
Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<a href="/en/acting" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
|
||||
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
|
||||
→ Artistic journey
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<div class="relative z-10 pointer-events-none">
|
||||
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
|
||||
Photography
|
||||
</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.
|
||||
</p>
|
||||
<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
|
||||
</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">
|
||||
</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">
|
||||
→ Photo Feed
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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="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="relative z-10">
|
||||
<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">
|
||||
Plus de 20 ans à construire du logiciel. Aujourd'hui, je choisis mes projets : du libre, de l'utile, rien qui aliène. Craftsmanship, DDD, TypeScript — et une obsession pour les biais qu'on met dans le code sans le savoir. J'enseigne la programmation et j'anime les Software Crafters d'Albi.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<a href="/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
|
||||
<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
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="relative z-10">
|
||||
<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">
|
||||
Improvisateur depuis 2008, passé par les Yvelines et le Maroc avant de cofonder Les Particules à Albi. Aujourd'hui je m'attaque aussi au théâtre écrit.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<a href="/theatre" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
|
||||
<span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
|
||||
→ Parcours artistique
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<div class="relative z-10 pointer-events-none">
|
||||
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
|
||||
Photographie
|
||||
</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é.
|
||||
</p>
|
||||
<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
|
||||
</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">
|
||||
</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">
|
||||
→ Fil Photo
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue