Эх сурвалжийг харах

feat(landing): extended-vitrine refactor — CV-aligned, +Projets, +Méthode

Landing now says more than the CV instead of duplicating it.

- meta/title: synced with new positioning (kernel, AOSP, cloud gaming, GPU)
- nav: added #projets and #methode anchors
- hero: subtitle "Développeur Systèmes · Embarqué · Backend",
  tech banner Backend·Cloud
- about: senior wording + 3 new paragraphs (philosophy, target context,
  what I'm not chasing)
- stack: 6 → 8 cards
  - dropped VMware, Gitflow, Agile
  - added cgroups, namespaces, SELinux, GitHub Actions
  - new Cloud/Infra card (AWS EC2, g4dn bare-metal, IAM, S3, CloudWatch,
    Scaleway VPS, OVH/Hetzner, Nginx, Apache, Let's Encrypt)
  - new IA/Outils card (Claude Code agents/skills, N8N, automation)
  - Familier avec: C++ sub-row in Langages
- parcours: removed lone-wolf wording (seul / responsable unique);
  CareGame / ZenQuality / Deewee rewritten as intro + technical bullets +
  per-experience stack pills; Deewee dates corrected to fév.-nov. 2017
  with Stage 42 + CDD contract line
- new Projets section between Parcours and Formation: Git auto-hébergé
  (git.bchanot.fr) and Homelab
- new Méthode section between Formation and Contact: 5 habits
- contact email: chanot.bastien@gmail.com → bastien@bchanot.fr
- CSS: extensions only (.timeline-bullets, .timeline-stack,
  .timeline-intro, .timeline-contract, .projects-grid, .project-card*,
  .methode-list, .methode-item, .methode-num, .stack-note, .pill-context),
  all reusing existing design tokens

TODO.md tracks the refactor milestone.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bastien Chanot 1 цаг өмнө
parent
commit
1369d27b5b
2 өөрчлөгдсөн 420 нэмэгдсэн , 22 устгасан
  1. 18 0
      .claude/tasks/TODO.md
  2. 402 22
      index.html

+ 18 - 0
.claude/tasks/TODO.md

@@ -10,6 +10,24 @@ State of the landing page + CV project. Append-only: keep history readable.
 - CV `CV_Bastien_Chanot.html` + matching PDF regenerated via weasyprint.
 - Local serve verified at `http://192.168.1.101:8000/`.
 
+## 2026-05-17 — Extended-vitrine refactor (in progress)
+
+Align landing with CV + add depth (Projets, Méthode, bullet-format Parcours).
+
+- [ ] Meta description sync (kernel, AOSP, cloud gaming, GPU)
+- [ ] Nav links: add #projets + #methode
+- [ ] Hero: titre "Systèmes · Embarqué · Backend", banner "Backend · Cloud"
+- [ ] About: expand paragraphs (pourquoi bas niveau / cherche / pas envie)
+- [ ] Stack: Langages (Java AOSP, drop Python order, + Familier avec C++) · Conteneurs (- VMware + cgroups/namespaces) · Systèmes (+ SELinux) · DevOps (- Gitflow/Agile, + GitHub Actions) · NEW Cloud/Infra · NEW IA/Outils
+- [ ] Parcours: kill "seul"/"responsable unique" — reformuler autonomie+collab
+- [ ] CareGame: intro contexte + 9 bullets + stack pills
+- [ ] ZenQuality: intro CDI + 3 bullets + stack pills
+- [ ] Deewee: dates Fév-Nov 2017 + contract line + 2 bullets + stack pills
+- [ ] NEW Projets section (entre Parcours et Formation): Git source + Homelab
+- [ ] NEW Méthode section (entre Formation et Contact): 5 points bundle A
+- [ ] Contact email → bastien@bchanot.fr
+- [ ] CSS extensions: timeline-bullets, timeline-stack, timeline-contract, projects-grid, methode-list
+
 ## Known follow-ups
 
 - Visual QA on real mobile device (375 px) — not just emulator.

+ 402 - 22
index.html

@@ -3,10 +3,10 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="Bastien Chanot — Développeur confirmé · Systèmes & Backend. 7 ans en C, Rust, Linux kernel, AOSP, embarqué.">
+<meta name="description" content="Bastien Chanot — Développeur Systèmes · Embarqué · Backend. 7 ans en C, Rust, Linux kernel, AOSP, cloud gaming et GPU bare-metal en production.">
 <meta name="author" content="Bastien Chanot">
 <meta name="theme-color" content="#0d1b12">
-<title>Bastien Chanot — Développeur Systèmes & Backend</title>
+<title>Bastien Chanot — Développeur Systèmes · Embarqué · Backend</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:ital,wght@0,300;0,500;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -470,6 +470,34 @@
     border-color: var(--g300);
     color: var(--g700);
   }
+  .pill-context {
+    opacity: 0.65;
+    font-weight: 400;
+    margin-left: 3px;
+  }
+  .stack-note {
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px dashed var(--rule);
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--ink-3);
+    letter-spacing: 0.02em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .stack-note code {
+    font-family: var(--mono);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--g700);
+    background: var(--g050);
+    border: 1px solid var(--g100);
+    padding: 2px 8px;
+    border-radius: var(--r-sm);
+  }
 
   @media (min-width: 768px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1200px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
@@ -552,11 +580,132 @@
     line-height: 1.6;
     max-width: 64ch;
   }
+  .timeline-contract {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--ink-3);
+    font-style: italic;
+    margin-top: -6px;
+    margin-bottom: 12px;
+  }
+  .timeline-intro {
+    color: var(--ink-2);
+    line-height: 1.55;
+    max-width: 64ch;
+    margin-bottom: 14px;
+  }
+  .timeline-bullets {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 18px;
+    max-width: 70ch;
+  }
+  .timeline-bullets li {
+    position: relative;
+    padding-left: 22px;
+    color: var(--ink-2);
+    line-height: 1.55;
+    font-size: 15px;
+  }
+  .timeline-bullets li::before {
+    content: "▸";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    color: var(--g500);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+  .timeline-stack {
+    margin-top: 4px;
+  }
+  .timeline-stack .pill {
+    font-size: 11px;
+    padding: 4px 10px;
+  }
+
+  /* ── PROJETS ── */
+  .projets { background: var(--page); }
+  .projects-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    margin-top: 40px;
+  }
+  @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
+  .project-card {
+    background: #fff;
+    border: 1px solid var(--rule);
+    border-radius: var(--r-md);
+    padding: 24px;
+    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
+    display: flex;
+    flex-direction: column;
+  }
+  .project-card:hover {
+    border-color: var(--g300);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+  .project-card-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed var(--rule);
+  }
+  .project-card h3 {
+    font-family: var(--serif);
+    font-weight: 600;
+    font-size: 20px;
+    color: var(--ink-1);
+    letter-spacing: -0.01em;
+  }
+  .project-card-tag {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--g500);
+    letter-spacing: 0.1em;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  .project-tagline {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 300;
+    font-size: 15px;
+    color: var(--g700);
+    margin-bottom: 12px;
+    line-height: 1.4;
+  }
+  .project-desc {
+    color: var(--ink-2);
+    line-height: 1.6;
+    font-size: 15px;
+    margin-bottom: 14px;
+  }
+  .project-link {
+    margin-top: auto;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--g500);
+    border-bottom: 1px solid transparent;
+    transition: color .18s ease, border-color .18s ease;
+    align-self: flex-start;
+  }
+  .project-link:hover {
+    color: var(--g700);
+    border-bottom-color: var(--g500);
+  }
 
   /* ── FORMATION ── */
-  .formation { background: var(--page); }
+  .formation { background: var(--g050); }
   .formation .timeline { border-left-color: var(--g100); }
-  .formation .timeline-item::before { box-shadow: 0 0 0 4px var(--page); }
+  .formation .timeline-item::before { box-shadow: 0 0 0 4px var(--g050); }
 
   .formation-school-desc {
     font-family: var(--serif);
@@ -692,6 +841,61 @@
     font-size: 13px;
   }
 
+  /* ── MÉTHODE ── */
+  .methode { background: var(--page); }
+  .methode-list {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 40px;
+    max-width: 820px;
+  }
+  .methode-item {
+    display: grid;
+    grid-template-columns: 56px 1fr;
+    gap: 20px;
+    align-items: start;
+    background: #fff;
+    border: 1px solid var(--rule);
+    border-radius: var(--r-md);
+    padding: 22px 24px;
+    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
+  }
+  .methode-item:hover {
+    border-color: var(--g300);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+  .methode-num {
+    font-family: var(--mono);
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--g500);
+    letter-spacing: -0.02em;
+    line-height: 1;
+    padding-top: 4px;
+  }
+  .methode-body h3 {
+    font-family: var(--serif);
+    font-weight: 600;
+    font-size: 19px;
+    color: var(--ink-1);
+    letter-spacing: -0.01em;
+    margin-bottom: 6px;
+    line-height: 1.25;
+  }
+  .methode-body p {
+    color: var(--ink-2);
+    line-height: 1.6;
+    font-size: 15px;
+    max-width: 64ch;
+  }
+  @media (max-width: 640px) {
+    .methode-item { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
+    .methode-num { font-size: 18px; padding-top: 0; }
+  }
+
   /* ── CONTACT ── */
   .contact {
     background: var(--dark);
@@ -815,7 +1019,9 @@
         <li><a href="#about">À propos</a></li>
         <li><a href="#stack">Stack</a></li>
         <li><a href="#experience">Parcours</a></li>
+        <li><a href="#projets">Projets</a></li>
         <li><a href="#formation">Formation</a></li>
+        <li><a href="#methode">Méthode</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
@@ -829,7 +1035,7 @@
     <div class="hero-inner">
       <p class="hero-eyebrow reveal">Disponible — CDI systèmes&nbsp;/&nbsp;embarqué · missions freelance</p>
       <h1 id="hero-name" class="hero-name reveal d1">Bastien&nbsp;<em>Chanot</em></h1>
-      <p class="hero-title reveal d2">Développeur confirmé<span class="sep">·</span>Systèmes &amp; Backend</p>
+      <p class="hero-title reveal d2">Développeur Systèmes<span class="sep">·</span>Embarqué<span class="sep">·</span>Backend</p>
       <p class="hero-tagline reveal d3">Du kernel Linux au backend Rust — 7 ans de développement systèmes en production.</p>
       <div class="hero-cta reveal d4">
         <a class="btn btn-primary" href="#contact">
@@ -848,7 +1054,7 @@
       <div class="hero-meta reveal d5">
         <span><span class="dot"></span>C · Rust · Linux Kernel</span>
         <span><span class="dot"></span>AOSP · Embarqué</span>
-        <span><span class="dot"></span>Backend · DevOps</span>
+        <span><span class="dot"></span>Backend · Cloud</span>
       </div>
     </div>
   </section>
@@ -860,8 +1066,10 @@
       <h2 id="about-title" class="section-title">Sept ans à écrire du code qui tourne là où ça compte.</h2>
       <div class="about-grid">
         <div class="about-text">
-          <p>Je suis développeur systèmes confirmé, formé à l'<strong>École&nbsp;42</strong> et passé par six ans chez <strong>CareGame</strong> où j'ai écrit des drivers Linux kernel, un backend Rust temps réel et fait tourner des serveurs GPU bare-metal en production.</p>
+          <p>Je suis développeur systèmes senior, formé à l'<strong>École&nbsp;42</strong> et passé par six ans chez <strong>CareGame</strong> où j'ai écrit des drivers Linux kernel, un backend Rust temps réel et fait tourner des serveurs GPU bare-metal en production.</p>
           <p>Mon terrain de jeu : <strong>C, Rust, Linux kernel, AOSP, embarqué, infrastructure</strong>. Quand un problème touche au bas niveau — port matériel, latence, sécurité, kernel — c'est là que j'apporte le plus de valeur.</p>
+          <p>Ce qui m'intéresse, c'est descendre jusqu'à ce qu'il n'y ait plus de magie — <strong>kernel, hardware, drivers</strong>. Là, soit ça marche, soit ça ne marche pas.</p>
+          <p>C'est ce confort-là que je cherche dans une équipe : <strong>systèmes, embarqué, backend bas niveau</strong>, sur une stack dont on peut lire le code source. Pas envie d'aller vers le buzzword-driven — microservices à tout prix, framework du mois, archi conçue pour le pitch deck.</p>
           <p>Aujourd'hui indépendant sous la marque <strong>ZenQuality</strong>, mais avant tout en recherche d'un <strong>CDI en systèmes embarqués ou logiciel</strong> — les missions freelance se font en parallèle.</p>
           <p>Côté présence : <strong>full remote</strong> idéalement, ou <strong>hybride 1 à 2 jours par mois</strong> si l'équipe est à Paris. Mobilité visée à moyen terme : <strong>Pays de la Loire</strong>.</p>
         </div>
@@ -897,10 +1105,11 @@
           <ul class="pills">
             <li class="pill">C</li>
             <li class="pill">Rust</li>
-            <li class="pill">Java</li>
             <li class="pill">Bash</li>
             <li class="pill">Python</li>
+            <li class="pill">Java<span class="pill-context">(AOSP/Android)</span></li>
           </ul>
+          <p class="stack-note">Familier avec&nbsp;: <code>C++</code></p>
         </article>
 
         <article class="stack-card">
@@ -928,7 +1137,8 @@
             <li class="pill">Docker</li>
             <li class="pill">LXC / LXD</li>
             <li class="pill">QEMU</li>
-            <li class="pill">VMware</li>
+            <li class="pill">cgroups</li>
+            <li class="pill">namespaces</li>
           </ul>
         </article>
 
@@ -955,20 +1165,51 @@
             <li class="pill">AOSP</li>
             <li class="pill">Android Backup</li>
             <li class="pill">systemd</li>
+            <li class="pill">SELinux</li>
           </ul>
         </article>
 
         <article class="stack-card">
           <header class="stack-card-head">
-            <h3>DevOps</h3>
+            <h3>Cloud / Infra</h3>
             <span class="stack-card-tag">// 06</span>
           </header>
+          <ul class="pills">
+            <li class="pill">AWS EC2</li>
+            <li class="pill">AWS g4dn bare-metal</li>
+            <li class="pill">IAM</li>
+            <li class="pill">S3</li>
+            <li class="pill">CloudWatch</li>
+            <li class="pill">Scaleway VPS</li>
+            <li class="pill">OVH / Hetzner</li>
+            <li class="pill">Nginx</li>
+            <li class="pill">Apache</li>
+            <li class="pill">Let's Encrypt</li>
+          </ul>
+        </article>
+
+        <article class="stack-card">
+          <header class="stack-card-head">
+            <h3>DevOps</h3>
+            <span class="stack-card-tag">// 07</span>
+          </header>
           <ul class="pills">
             <li class="pill">Git</li>
-            <li class="pill">GitHub / GitLab</li>
-            <li class="pill">CI / CD</li>
-            <li class="pill">Gitflow</li>
-            <li class="pill">Agile</li>
+            <li class="pill">GitHub Actions</li>
+            <li class="pill">GitLab</li>
+            <li class="pill">CI/CD</li>
+          </ul>
+        </article>
+
+        <article class="stack-card">
+          <header class="stack-card-head">
+            <h3>IA / Outils</h3>
+            <span class="stack-card-tag">// 08</span>
+          </header>
+          <ul class="pills">
+            <li class="pill">Claude Code (agents/skills custom)</li>
+            <li class="pill">N8N</li>
+            <li class="pill">automatisation</li>
           </ul>
         </article>
 
@@ -993,7 +1234,23 @@
           </div>
           <h3><a href="https://zenquality.fr" target="_blank" rel="noopener">ZenQuality</a></h3>
           <p class="timeline-role">Développeur indépendant · Systèmes &amp; Backend</p>
-          <p class="timeline-desc">Développement système et embarqué en indépendant. Interventions sur Linux, Rust, kernel et infrastructure critique. Premier contrat : audit SEO et conformité légale pour un client e-commerce (portfolio en construction).</p>
+          <p class="timeline-intro">Indépendant systèmes / embarqué / backend. En recherche prioritaire d'un CDI en parallèle.</p>
+          <ul class="timeline-bullets">
+            <li>Mission SEO et conformité légale RGPD pour PME service (Île-de-France) — audit technique Core Web Vitals + Schema.org + NAP, refonte CGV B2B/B2C, RGPD, mentions légales, médiateur CM2C. Plan d'action 12 sprints.</li>
+            <li>Site vitrine WordPress (Gutenverse) pour PME esthétique — conception, intégration, déploiement et support continu (hébergement client).</li>
+            <li>Setup et auto-hébergement de l'infra ZenQuality sur VPS Scaleway — stack Astro / React / PHP 8 / PostgreSQL conteneurisée Docker, déploiement automatisé, pipeline de production complet.</li>
+          </ul>
+          <ul class="pills timeline-stack">
+            <li class="pill">Astro</li>
+            <li class="pill">React</li>
+            <li class="pill">PHP 8</li>
+            <li class="pill">PostgreSQL</li>
+            <li class="pill">Docker</li>
+            <li class="pill">Scaleway VPS</li>
+            <li class="pill">WordPress / Gutenverse</li>
+            <li class="pill">SEO</li>
+            <li class="pill">RGPD</li>
+          </ul>
         </li>
 
         <li class="timeline-item">
@@ -1002,24 +1259,94 @@
             <span>Paris · Full remote dès 2020</span>
           </div>
           <h3>CareGame</h3>
-          <p class="timeline-role">Développeur systèmes &amp; backend</p>
-          <p class="timeline-desc">Seul responsable de la couche kernel, AOSP et serveur de jeu pendant 6 ans. Développement de drivers Linux en C (x86/ARM), backend Rust (~2 000 lignes, WebSocket), virtual touchscreen/gamepad AOSP en Java. Architecture de serveurs GPU bare-metal (8× GPU T4, 64 vCPU) — isolation CPU/GPU par session, I/O sur ramdisk, 32 sessions jeux AAA simultanées. Intégration d'un système LXC/LXD issu d'une R&amp;D Nvidia abandonnée — résultats reconnus par leurs équipes. Collaboration directe avec Canonical (Anbox, accès pre-commercial) et Ampere Computing (serveurs ARM pre-launch).</p>
+          <p class="timeline-role">Développeur logiciel · Systèmes &amp; Backend</p>
+          <p class="timeline-intro">Plateforme de cloud gaming en production : fleet GPU bare-metal AWS g4dn, conteneurs AOSP, backend Rust temps réel. Plusieurs centaines de joueurs servis simultanément.</p>
+          <ul class="timeline-bullets">
+            <li>Conception et maintenance de modules kernel Linux en C (x86 / ARM) — drivers d'interface hôte / conteneur (Linux → AOSP), en interface avec les équipes infra et produit.</li>
+            <li>Conception de l'isolation CPU/GPU par session — adaptation de modules GPU Nvidia, partitionnement 2 cœurs/session, sérialisation des accès concurrents sur zones GPU partagées. Résultat : 32 sessions AAA stables par serveur.</li>
+            <li>Co-développement du backend Rust orchestrant le cycle de vie des conteneurs AOSP — WebSocket temps réel clients ↔ instances, intégration Docker + LXC, scheduling des sessions sur la fleet GPU.</li>
+            <li>Développement de virtual input devices AOSP en Java (touchscreen, gamepad) — pipeline complet inputs frontend → backend Rust → drivers hôtes → injection AOSP, optimisé latence temps réel gameplay AAA.</li>
+            <li>Architecture et exploitation de fleet GPU bare-metal AWS g4dn.metal (8× GPU T4, 64 vCPU, ~20 serveurs en pic) — isolation 2 cœurs CPU/session, ramdisk I/O, 32 sessions AAA simultanées/serveur. Plusieurs centaines de joueurs servis en parallèle (Asphalt 9 : 3 sessions/T4).</li>
+            <li>Reprise et hardening d'un PoC LXD + Docker issu d'une R&amp;D Nvidia (intégration côté Docker principalement) — adaptation production cloud gaming, débogage kernel/conteneur, performance validée par les équipes Nvidia comme dépassant le scope initial du PoC.</li>
+            <li>Collaboration technique directe en anglais avec Canonical (Anbox + builds LXC/LXD non commerciaux, remontée bugs et feature requests) et Ampere Computing (intégration et benchmark de serveurs ARM pré-commerciaux pour évaluation de migration de fleet).</li>
+            <li>Pipeline d'installation automatique de jeux AOSP et persistance des sauvegardes utilisateur — fusion Android Backup natif + scripts custom pour cas non gérés nativement (DRM, données externes).</li>
+            <li>Développement d'un outil d'orchestration Bash modulaire (1000+ lignes) — parsing avancé arguments Docker, préparation et lancement automatisé conteneurs AOSP, brique appelée par la CI et le backend Rust.</li>
+          </ul>
+          <ul class="pills timeline-stack">
+            <li class="pill">C</li>
+            <li class="pill">Rust</li>
+            <li class="pill">Java</li>
+            <li class="pill">Bash</li>
+            <li class="pill">Linux kernel</li>
+            <li class="pill">AOSP</li>
+            <li class="pill">Docker</li>
+            <li class="pill">LXC / LXD</li>
+            <li class="pill">AWS g4dn.metal</li>
+            <li class="pill">WebSocket</li>
+            <li class="pill">Nvidia GPU T4</li>
+          </ul>
         </li>
 
         <li class="timeline-item">
           <div class="timeline-meta">
-            <span class="period">2017</span>
+            <span class="period">fév.&nbsp;2017 — nov.&nbsp;2017</span>
             <span>Ivry-sur-Seine</span>
           </div>
           <h3>Deewee</h3>
-          <p class="timeline-role">Développeur C embarqué</p>
-          <p class="timeline-desc">Système embarqué complet développé seul en C sur Orange Pi (Debian ARM) : interception du flux ESC/POS d'une imprimante thermique, génération PNG du ticket, déclenchement GPIO sur bouton physique, création d'un hotspot WiFi embarqué avec diffusion des credentials via NFC, envoi de l'image en WiFi direct vers une application mobile tierce.</p>
+          <p class="timeline-role">Développeur C · Système embarqué</p>
+          <p class="timeline-contract">Stage 42 (6 mois) puis CDD (4 mois)</p>
+          <p class="timeline-intro">Boîtier connecté pour interception du flux d'une imprimante thermique.</p>
+          <ul class="timeline-bullets">
+            <li>Développement du logiciel embarqué en C pour boîtier connecté basé Orange Pi (Debian ARM) — interception du flux ESC/POS d'une imprimante thermique, génération PNG du ticket, transfert WiFi direct vers application mobile à la connexion.</li>
+            <li>Intégration matérielle : GPIO physique (bouton + timeout), hotspot WiFi embarqué avec diffusion des credentials via NFC pour appairage automatique.</li>
+          </ul>
+          <ul class="pills timeline-stack">
+            <li class="pill">C</li>
+            <li class="pill">Debian ARM</li>
+            <li class="pill">Orange Pi</li>
+            <li class="pill">ESC/POS</li>
+            <li class="pill">GPIO</li>
+            <li class="pill">NFC</li>
+            <li class="pill">WiFi</li>
+          </ul>
         </li>
 
       </ol>
     </div>
   </section>
 
+  <!-- PROJETS -->
+  <section id="projets" class="projets" aria-labelledby="projets-title">
+    <div class="container">
+      <span class="section-label">Projets</span>
+      <h2 id="projets-title" class="section-title">Ce que je fais à côté.</h2>
+      <p class="section-intro">Infra perso et code public — l'environnement où je teste, casse, documente, et reprends.</p>
+
+      <div class="projects-grid">
+
+        <article class="project-card">
+          <header class="project-card-head">
+            <h3>Code source &amp; projets persos</h3>
+            <span class="project-card-tag">en continu</span>
+          </header>
+          <p class="project-tagline">Serveur Git auto-hébergé en production.</p>
+          <p class="project-desc">Configuration Claude Code, dotfiles, projets bas-niveau (42, expérimentations C/Rust) — accessibles publiquement. Mirror automatique vers GitHub via push hook.</p>
+          <a class="project-link" href="https://git.bchanot.fr/bchanot" target="_blank" rel="noopener">git.bchanot.fr/bchanot&nbsp;↗</a>
+        </article>
+
+        <article class="project-card">
+          <header class="project-card-head">
+            <h3>Homelab</h3>
+            <span class="project-card-tag">en continu</span>
+          </header>
+          <p class="project-tagline">Infrastructure personnelle.</p>
+          <p class="project-desc">Auto-hébergement Git (Gogs) / DNS / VPN / SMB — NAS Asustor, Freebox WireGuard VPN site-to-site, Pi-hole, segmentation réseau, hardening fail2ban, gocryptfs sur dossiers sensibles.</p>
+        </article>
+
+      </div>
+    </div>
+  </section>
+
   <!-- FORMATION -->
   <section id="formation" class="formation" aria-labelledby="formation-title">
     <div class="container">
@@ -1105,6 +1432,59 @@
     </div>
   </section>
 
+  <!-- MÉTHODE -->
+  <section id="methode" class="methode" aria-labelledby="methode-title">
+    <div class="container">
+      <span class="section-label">Méthode</span>
+      <h2 id="methode-title" class="section-title">Façon de travailler.</h2>
+      <p class="section-intro">Cinq habitudes héritées de sept ans en prod — pas un manifeste, des réflexes.</p>
+
+      <ol class="methode-list">
+
+        <li class="methode-item">
+          <span class="methode-num">01</span>
+          <div class="methode-body">
+            <h3>Comprendre avant d'écrire.</h3>
+            <p>Si je n'arrive pas à expliquer comment un système se comporte, je ne touche pas au code.</p>
+          </div>
+        </li>
+
+        <li class="methode-item">
+          <span class="methode-num">02</span>
+          <div class="methode-body">
+            <h3>Solutions éprouvées &gt; hype.</h3>
+            <p>Choix techniques défendus sur leurs garanties (perf, lisibilité, maintenabilité), pas sur leur buzz.</p>
+          </div>
+        </li>
+
+        <li class="methode-item">
+          <span class="methode-num">03</span>
+          <div class="methode-body">
+            <h3>Autonome sur la décomposition technique.</h3>
+            <p>En interface directe avec les équipes produit, infra et stakeholders externes quand ça compte.</p>
+          </div>
+        </li>
+
+        <li class="methode-item">
+          <span class="methode-num">04</span>
+          <div class="methode-body">
+            <h3>Trace écrite par défaut.</h3>
+            <p>Décisions, post-mortems, docs internes. Le code qui n'est pas documenté est un code qui sera réécrit dans 6 mois.</p>
+          </div>
+        </li>
+
+        <li class="methode-item">
+          <span class="methode-num">05</span>
+          <div class="methode-body">
+            <h3>Anglais ou français.</h3>
+            <p>Communication aussi bien en anglais (Nvidia, Canonical, Ampere) qu'en français — peu importe, je m'adapte à l'équipe.</p>
+          </div>
+        </li>
+
+      </ol>
+    </div>
+  </section>
+
   <!-- CONTACT -->
   <section id="contact" class="contact section-dark" aria-labelledby="contact-title">
     <div class="container">
@@ -1116,11 +1496,11 @@
         <ul class="contact-list">
 
           <li>
-            <a class="contact-row" href="mailto:chanot.bastien@gmail.com">
+            <a class="contact-row" href="mailto:bastien@bchanot.fr">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></svg>
               <span>
                 <span class="label">Email</span>
-                <span class="value">chanot.bastien@gmail.com</span>
+                <span class="value">bastien@bchanot.fr</span>
               </span>
             </a>
           </li>