jalil.arfaoui.net/src/pages/code/index.astro

---
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 &rarr;</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>