3 Commits 54e9145bd7 ... 86d4c729ed

Auteur SHA1 Bericht Datum
  Bastien Chanot 86d4c729ed docs(memory): capitalize BDR-005 favicon strategy + LRN-002 PIL icon recipe 1 uur geleden
  Bastien Chanot ef31fb3059 feat(landing): add favicon set — SVG primary + PNG/ICO fallback 1 uur geleden
  Bastien Chanot 1369d27b5b feat(landing): extended-vitrine refactor — CV-aligned, +Projets, +Méthode 1 uur geleden
9 gewijzigde bestanden met toevoegingen van 463 en 23 verwijderingen
  1. 16 0
      .claude/memory/decisions.md
  2. 6 0
      .claude/memory/journal.md
  3. 10 0
      .claude/memory/learnings.md
  4. 20 1
      .claude/tasks/TODO.md
  5. BIN
      apple-touch-icon.png
  6. BIN
      favicon-32.png
  7. BIN
      favicon.ico
  8. 5 0
      favicon.svg
  9. 406 22
      index.html

+ 16 - 0
.claude/memory/decisions.md

@@ -26,6 +26,7 @@ rules:
 | BDR-002 | 2026-05-15 | weasyprint pour PDF CV depuis HTML | accepted |
 | BDR-003 | 2026-05-15 | Position pro: CDI prioritaire, freelance parallèle | accepted |
 | BDR-004 | 2026-05-15 | Containerize site with nginx:alpine behind reverse proxy | accepted |
+| BDR-005 | 2026-05-17 | Favicon: SVG primary + PIL raster fallback | accepted |
 
 ---
 
@@ -79,3 +80,18 @@ rules:
   - Bare static files served by host nginx — no isolation, config drift between sites, harder rollback.
   - Caddy / Traefik container — overkill for 1 static site, host nginx already handles TLS for other domains.
 - **Reference**: `Dockerfile`, `nginx.conf`, `docker-compose.yml`, `.env.example`.
+
+---
+
+## BDR-005 — Favicon: SVG primary + PIL raster fallback
+
+- **Date**: 2026-05-17
+- **Status**: accepted
+- **Decision**: Ship `favicon.svg` (vector primary) + PIL-generated `favicon-32.png`, `favicon.ico` (16/24/32/48), `apple-touch-icon.png` (180×180). 4 `<link>` tags in `<head>` of `index.html`.
+- **Why**: Modern browsers fetch SVG (sharp any DPI). Legacy + iOS fall back ICO/PNG. PIL preinstalled on host → zero new dep. Mark replicates `.brand::before` pulse-dot (visual continuity with nav).
+- **Alternatives rejected**:
+  - `rsvg-convert` / `inkscape` for SVG→PNG — not installed on host, setup friction.
+  - SVG-only — drops Safari <14 + iOS home-screen.
+  - Online favicon generator — external dep, opaque rendering, no source control.
+- **CV HTML**: not modified (user's WIP M state). Browser auto-fetches `/favicon.ico` from root → CV tab still shows icon. Link block mirror logged in `.claude/tasks/TODO.md` for later.
+- **Reference**: `favicon.svg`, `favicon-32.png`, `favicon.ico`, `apple-touch-icon.png`, `index.html` head, commit `ef31fb3`.

+ 6 - 0
.claude/memory/journal.md

@@ -26,3 +26,9 @@ rules:
 - Commits: `54e8300..7957b04` + user's `414bce1` (CV final).
 - Dedicated `#formation` section added between Parcours + Contact: timeline reused, 3 theme-cards inside École 42 entry (Systèmes/Kernel · Bas niveau · Sécurité/Algo), TSRIT block with `Félicitations du jury` honors pill. Removed `.contact-side` aside + dead CSS, `.contact-list` 2-col on >=768px to fill freed space. Nav link inserted. Commit `1d5fbfa`.
 - Formation copy fix: title now "Deux écoles, un fil rouge : le bas niveau."; strip `<em>` from section-intro for consistency; rewrite École 42 role+desc (kernel/memory/shell/security); drop false TSRIT li claiming CareGame CDI (CareGame stage was 2018-2019 during 42, not 2015 TSRIT). 1 file, +4/-5.
+
+## 2026-05-17
+
+- Landing extended-vitrine refactor shipped (commit `1369d27`): meta/title sync CV, hero subtitle "Systèmes · Embarqué · Backend", stack 6→8 cards (drop VMware/Gitflow/Agile, add cgroups/namespaces/SELinux/GitHub Actions + Cloud-Infra + IA-Outils, Familier avec C++), Parcours 3 entries rewritten bullets+stack pills (lone-wolf wording purged, Deewee dates corrected fév→nov 2017), new Projets section (Git auto-hébergé + Homelab), new Méthode section (5 points), contact email → bastien@bchanot.fr.
+- Favicon set added (commit `ef31fb3`): SVG primary + PIL-generated PNG/ICO/apple-touch. Brand pulse-dot translated to icon. BDR-005 + LRN-002 logged.
+- CV files (`CV_Bastien_Chanot.html`, `.pdf`) untouched — user's WIP M state, off-scope per brief.

+ 10 - 0
.claude/memory/learnings.md

@@ -20,6 +20,7 @@ rules:
 | ID | Date | Pattern | Applies to |
 |----|------|---------|------------|
 | LRN-001 | 2026-05-15 | certbot --nginx matches `server_name`, not filename | nginx + certbot on multi-site VPS |
+| LRN-002 | 2026-05-17 | PIL supersample ×8 + Lanczos = clean icon antialiasing | Python stdlib icon generation |
 
 ---
 
@@ -29,3 +30,12 @@ rules:
 - **Pattern**: `certbot install --cert-name X` (and `certbot --nginx -d X`) locates the target vhost by scanning every `server_name` directive in active nginx configs. The filename in `sites-available/` is irrelevant. A file named `X.conf` with `server_name Y;` inside will NOT be picked up for domain X.
 - **Context**: `/etc/nginx/sites-available/bchanot.fr` existed and was symlinked into `sites-enabled/`, but its body still contained `server_name autreprojet.fr www.autreprojet.fr;` — a copy-paste leftover from a previous project. Certbot returned `Could not automatically find a matching server block for bchanot.fr`.
 - **Future application**: Before running certbot on a multi-site VPS, `grep -n "server_name" /etc/nginx/sites-enabled/*` — confirm the target domain is actually declared inside, not just present in the filename. Same logic applies when troubleshooting "why is nginx serving the wrong site" — match by `server_name`, never by filename.
+
+---
+
+## LRN-002 — PIL supersample ×8 + Lanczos = clean small-format icon antialiasing
+
+- **Date**: 2026-05-17
+- **Pattern**: Render icon at 8× target size via `ImageDraw.rounded_rectangle` + `ellipse` on RGBA canvas, then `Image.resize((target, target), Image.LANCZOS)`. Output rivals `rsvg-convert` / `inkscape` for simple geometric shapes. Crisp at 16×16 favicon scale, no visible jaggies.
+- **Context**: Generated `favicon-32.png`, `apple-touch-icon.png` (180×180), `favicon.ico` (multi-size 16/24/32/48) for `bchanot.fr` from scratch — no `rsvg-convert` / `inkscape` / `ImageMagick` on host. Single PIL script, ~20 lines.
+- **Future application**: Any project needing a PNG/ICO icon set with a stdlib-only Python toolchain. Skip if shape is complex (text rendering, gradients, curves) — use `rsvg-convert` or commit a finalized PNG instead.

+ 20 - 1
.claude/tasks/TODO.md

@@ -10,13 +10,32 @@ 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.
 - Verify WCAG AA contrast on all green-on-parchment text.
 - Hosting decision: GitHub Pages vs Netlify vs Vercel vs nginx VPS — pending.
 - DNS / domain config for `bchanot.fr` — pending.
-- Consider OG image + favicon — not yet present.
+- Consider OG image — not yet present.
+- Mirror favicon link block into `CV_Bastien_Chanot.html` when user finalizes CV edits (currently /favicon.ico auto-served as legacy fallback).
 
 ## Open ideas (not committed)
 

BIN
apple-touch-icon.png


BIN
favicon-32.png


BIN
favicon.ico


+ 5 - 0
favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="bchanot.fr">
+  <rect width="64" height="64" rx="14" fill="#0d1b12"/>
+  <circle cx="32" cy="32" r="20" fill="none" stroke="#2d7a4f" stroke-width="2" stroke-opacity="0.6"/>
+  <circle cx="32" cy="32" r="12" fill="#6ab98a"/>
+</svg>

+ 406 - 22
index.html

@@ -3,10 +3,14 @@
 <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="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
+<link rel="alternate icon" href="/favicon.ico">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <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 +474,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 +584,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 +845,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 +1023,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 +1039,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 +1058,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 +1070,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 +1109,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 +1141,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 +1169,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 +1238,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 +1263,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 +1436,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 +1500,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>