Jalil Arfaoui
a3732887f5
Remplacement de la page unique /code par un hub avec 4 sous-pages : parcours, projets, compétences, recommandations (FR/EN/AR). Les données statiques (experiences.json, projects.json) sont remplacées par des collections Astro (experiences, projects, recommendations) avec support trilingue. Les recommandations sont les vrais textes LinkedIn. Le design utilise du glassmorphism sur fond violet avec des composants dédiés (NavigationCard, ProjectCard, RecommendationCard, SkillBadge...). Le CSS facet est scopé proprement pour ne plus casser les composants.
175 lines
7.8 KiB
Text
175 lines
7.8 KiB
Text
---
|
|
import { getCollection } from "astro:content";
|
|
import { Image } from "astro:assets";
|
|
import Layout from "../../layouts/main.astro";
|
|
import Link from "../../components/Link.astro";
|
|
import NavigationCard from "../../components/code/NavigationCard.astro";
|
|
import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.astro";
|
|
import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
|
|
|
|
const locale = "fr";
|
|
|
|
const experiences = (await getCollection("experiences"))
|
|
.filter((e) => e.data.lang === locale && !e.data.draft)
|
|
.sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
|
|
|
|
const currentPosition = experiences.find((e) => !e.data.endDate);
|
|
|
|
const recommendations = (await getCollection("recommendations"))
|
|
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
|
.slice(0, 3);
|
|
|
|
const recommendationTexts = recommendations.map((rec) => ({
|
|
...rec,
|
|
text: rec.body || '',
|
|
}));
|
|
---
|
|
|
|
<Layout
|
|
title="Code - Jalil Arfaoui"
|
|
facet="code"
|
|
description="Parcours professionnel de Jalil Arfaoui : développeur freelance spécialisé en Software Craftsmanship, TDD, DDD. TypeScript, PHP, Elixir."
|
|
>
|
|
<section class="relative z-20 max-w-3xl mx-auto my-12 px-7 lg:px-0">
|
|
<div class="mb-10">
|
|
<h1 class="text-4xl sm:text-5xl font-bold text-white">Code</h1>
|
|
<p class="mt-4 text-lg text-white/65 leading-relaxed max-w-2xl">
|
|
Plus de 20 ans à construire du logiciel. Craftsmanship, TDD, DDD — et une obsession pour les biais qu'on met dans le code sans le savoir.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="facet-card rounded-2xl bg-white/[0.06] border border-white/[0.1] p-6 mb-10">
|
|
<p class="text-white/70 leading-relaxed">
|
|
Développeur freelance basé à <strong class="text-white">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>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
|
|
<NavigationCard
|
|
title="Parcours"
|
|
description="Timeline de mes expériences professionnelles depuis 2002."
|
|
href="/code/parcours"
|
|
icon="📋"
|
|
/>
|
|
<NavigationCard
|
|
title="Projets"
|
|
description="Logiciels open source et projets personnels."
|
|
href="/code/projets"
|
|
icon="💻"
|
|
/>
|
|
<NavigationCard
|
|
title="Compétences"
|
|
description="Langages, frameworks, pratiques et outils."
|
|
href="/code/competences"
|
|
icon="🛠"
|
|
/>
|
|
<NavigationCard
|
|
title="Recommandations"
|
|
description="Ce que disent les gens avec qui j'ai travaillé."
|
|
href="/code/recommandations"
|
|
icon="💬"
|
|
/>
|
|
</div>
|
|
|
|
{currentPosition && (
|
|
<div class="facet-card rounded-2xl bg-gradient-to-r from-purple-500/20 to-indigo-500/20 border border-purple-300/15 p-6 mb-10">
|
|
<p class="text-xs font-semibold text-purple-200 uppercase tracking-wider mb-2">Poste actuel</p>
|
|
<p class="text-xl font-bold text-white">{currentPosition.data.role}</p>
|
|
<p class="text-sm text-white/60 mt-1">
|
|
{currentPosition.data.companyUrl ? (
|
|
<a href={currentPosition.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{currentPosition.data.company}</a>
|
|
) : (
|
|
currentPosition.data.company
|
|
)}
|
|
{currentPosition.data.location && ` · ${currentPosition.data.location}`}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{recommendationTexts.length > 0 && (
|
|
<div class="mb-12">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-2xl font-bold text-white">Recommandations</h2>
|
|
<a href="/code/recommandations" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes →</a>
|
|
</div>
|
|
<div class="space-y-4">
|
|
{recommendationTexts.map((rec) => (
|
|
<FeaturedRecommendation
|
|
author={rec.data.author}
|
|
authorRole={rec.data.authorRole}
|
|
company={rec.data.company}
|
|
text={rec.text}
|
|
avatar={rec.data.avatar}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<h2 class="text-2xl font-bold text-white mb-5">Valeurs & Approche</h2>
|
|
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
|
|
<ul class="space-y-3 text-white/70">
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
|
|
<span>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
|
|
<span>L'utilité sociale du développeur</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
|
|
<span>Être fier de son travail, mais sans égo</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
|
|
<span>Approche <strong class="text-white">Domain Driven Design</strong></span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
|
|
<span>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-white mb-5">Communauté & Enseignement</h2>
|
|
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
|
|
<p class="text-white/70 leading-relaxed">
|
|
J'anime les <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters d'Albi</Link> depuis 2018. Enseignant en génie logiciel à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> d'Albi depuis 2019.
|
|
</p>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-white mb-5">En ligne</h2>
|
|
<div class="facet-card flex flex-wrap gap-3 mb-12">
|
|
{[
|
|
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' },
|
|
{ label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
|
|
{ label: 'Stack Overflow', href: 'https://stackexchange.com/users/54164/jalil' },
|
|
{ label: 'GitHub', href: 'https://github.com/JalilArfaoui' },
|
|
{ label: 'Framagit', href: 'https://framagit.org/jalil' },
|
|
{ label: 'Forge personnelle', href: 'https://forge.tiqa.fr' },
|
|
].map((link) => (
|
|
<a
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/[0.06] border border-white/[0.1] text-sm text-white/70 hover:bg-white/[0.12] hover:text-white transition-all duration-200"
|
|
>
|
|
{link.label}
|
|
<svg class="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div class="text-center pt-8 border-t border-white/[0.08]">
|
|
<Image src={logoTiqa} alt="Logo Tiqa" class="mx-auto mb-4" width={160} />
|
|
<p class="text-sm text-white/40">
|
|
<strong class="text-white/60">SAS Tiqa</strong><br />
|
|
12, rue Fabre d'Églantine — 81 000 Albi<br />
|
|
811 917 871 RCS Albi
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</Layout>
|