From 1369d27b5b775cff32e0fe0ab3d1e8b8b81996b6 Mon Sep 17 00:00:00 2001 From: Bastien Chanot Date: Sun, 17 May 2026 03:50:41 +0200 Subject: [PATCH] =?UTF-8?q?feat(landing):=20extended-vitrine=20refactor=20?= =?UTF-8?q?=E2=80=94=20CV-aligned,=20+Projets,=20+M=C3=A9thode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .claude/tasks/TODO.md | 18 ++ index.html | 424 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 420 insertions(+), 22 deletions(-) diff --git a/.claude/tasks/TODO.md b/.claude/tasks/TODO.md index 3212ba2..ed5cde7 100644 --- a/.claude/tasks/TODO.md +++ b/.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. diff --git a/index.html b/index.html index 5a96af8..b05758f 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ - + -Bastien Chanot — Développeur Systèmes & Backend +Bastien Chanot — Développeur Systèmes · Embarqué · Backend @@ -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 @@
  • À propos
  • Stack
  • Parcours
    • +
  • Projets
  • Formation
    • +
  • Méthode
  • Contact
    • @@ -829,7 +1035,7 @@

    Disponible — CDI systèmes / embarqué · missions freelance

    Bastien Chanot

    -

    Développeur confirmé·Systèmes & Backend

    +

    Développeur Systèmes·Embarqué·Backend

    Du kernel Linux au backend Rust — 7 ans de développement systèmes en production.

    @@ -848,7 +1054,7 @@
    C · Rust · Linux Kernel AOSP · Embarqué - Backend · DevOps + Backend · Cloud
    @@ -860,8 +1066,10 @@

    Sept ans à écrire du code qui tourne là où ça compte.

    -

    Je suis développeur systèmes confirmé, formé à l'École 42 et passé par six ans chez CareGame où j'ai écrit des drivers Linux kernel, un backend Rust temps réel et fait tourner des serveurs GPU bare-metal en production.

    +

    Je suis développeur systèmes senior, formé à l'École 42 et passé par six ans chez CareGame où j'ai écrit des drivers Linux kernel, un backend Rust temps réel et fait tourner des serveurs GPU bare-metal en production.

    Mon terrain de jeu : C, Rust, Linux kernel, AOSP, embarqué, infrastructure. 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.

    +

    Ce qui m'intéresse, c'est descendre jusqu'à ce qu'il n'y ait plus de magie — kernel, hardware, drivers. Là, soit ça marche, soit ça ne marche pas.

    +

    C'est ce confort-là que je cherche dans une équipe : systèmes, embarqué, backend bas niveau, 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.

    Aujourd'hui indépendant sous la marque ZenQuality, mais avant tout en recherche d'un CDI en systèmes embarqués ou logiciel — les missions freelance se font en parallèle.

    Côté présence : full remote idéalement, ou hybride 1 à 2 jours par mois si l'équipe est à Paris. Mobilité visée à moyen terme : Pays de la Loire.

    @@ -897,10 +1105,11 @@
    • C
    • Rust
      • -
    • Java
    • Bash
    • Python
      • +
    • Java(AOSP/Android)
    +

    Familier avec : C++

    @@ -928,7 +1137,8 @@
  • Docker
  • LXC / LXD
  • QEMU
    • -
  • VMware
    • +
  • cgroups
    • +
  • namespaces
    • @@ -955,20 +1165,51 @@
  • AOSP
  • Android Backup
  • systemd
    • +
  • SELinux
    • + + + +
    +
    +

    Cloud / Infra

    + // 06 +
    +
      +
    • AWS EC2
      • +
    • AWS g4dn bare-metal
      • +
    • IAM
      • +
    • S3
      • +
    • CloudWatch
      • +
    • Scaleway VPS
      • +
    • OVH / Hetzner
      • +
    • Nginx
      • +
    • Apache
      • +
    • Let's Encrypt

    DevOps

    - // 06 + // 07
    • Git
      • -
    • GitHub / GitLab
      • -
    • CI / CD
      • -
    • Gitflow
      • -
    • Agile
      • +
    • GitHub Actions
      • +
    • GitLab
      • +
    • CI/CD
      • +
    +
    + +
    +
    +

    IA / Outils

    + // 08 +
    +
      +
    • Claude Code (agents/skills custom)
      • +
    • N8N
      • +
    • automatisation
    @@ -993,7 +1234,23 @@

    ZenQuality

    Développeur indépendant · Systèmes & Backend

    -

    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).

    +

    Indépendant systèmes / embarqué / backend. En recherche prioritaire d'un CDI en parallèle.

    +
      +
    • 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.
      • +
    • Site vitrine WordPress (Gutenverse) pour PME esthétique — conception, intégration, déploiement et support continu (hébergement client).
      • +
    • 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.
      • +
    +
      +
    • Astro
      • +
    • React
      • +
    • PHP 8
      • +
    • PostgreSQL
      • +
    • Docker
      • +
    • Scaleway VPS
      • +
    • WordPress / Gutenverse
      • +
    • SEO
      • +
    • RGPD
      • +
  • @@ -1002,24 +1259,94 @@ Paris · Full remote dès 2020

    • CareGame

    -

    Développeur systèmes & backend

    -

    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&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).

    +

    Développeur logiciel · Systèmes & Backend

    +

    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.

    + +
  • - 2017 + fév. 2017 — nov. 2017 Ivry-sur-Seine

    Deewee

    -

    Développeur C embarqué

    -

    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.

    +

    Développeur C · Système embarqué

    +

    Stage 42 (6 mois) puis CDD (4 mois)

    +

    Boîtier connecté pour interception du flux d'une imprimante thermique.

    +
      +
    • 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.
      • +
    • Intégration matérielle : GPIO physique (bouton + timeout), hotspot WiFi embarqué avec diffusion des credentials via NFC pour appairage automatique.
      • +
    +
      +
    • C
      • +
    • Debian ARM
      • +
    • Orange Pi
      • +
    • ESC/POS
      • +
    • GPIO
      • +
    • NFC
      • +
    • WiFi
      • +
    • + +
    +
    + Projets +

    Ce que je fais à côté.

    +

    Infra perso et code public — l'environnement où je teste, casse, documente, et reprends.

    + +
    + +
    +
    +

    Code source & projets persos

    + en continu +
    +

    Serveur Git auto-hébergé en production.

    +

    Configuration Claude Code, dotfiles, projets bas-niveau (42, expérimentations C/Rust) — accessibles publiquement. Mirror automatique vers GitHub via push hook.

    + git.bchanot.fr/bchanot ↗ +
    + +
    +
    +

    Homelab

    + en continu +
    +

    Infrastructure personnelle.

    +

    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.

    +
    + +
    +
    +
    +
    @@ -1105,6 +1432,59 @@
    + +
    +
    + Méthode +

    Façon de travailler.

    +

    Cinq habitudes héritées de sept ans en prod — pas un manifeste, des réflexes.

    + +
      + +
    1. + 01 +
      +

      Comprendre avant d'écrire.

      +

      Si je n'arrive pas à expliquer comment un système se comporte, je ne touche pas au code.

      +
      +
      2. + +
    2. + 02 +
      +

      Solutions éprouvées > hype.

      +

      Choix techniques défendus sur leurs garanties (perf, lisibilité, maintenabilité), pas sur leur buzz.

      +
      +
      3. + +
    3. + 03 +
      +

      Autonome sur la décomposition technique.

      +

      En interface directe avec les équipes produit, infra et stakeholders externes quand ça compte.

      +
      +
      4. + +
    4. + 04 +
      +

      Trace écrite par défaut.

      +

      Décisions, post-mortems, docs internes. Le code qui n'est pas documenté est un code qui sera réécrit dans 6 mois.

      +
      +
      5. + +
    5. + 05 +
      +

      Anglais ou français.

      +

      Communication aussi bien en anglais (Nvidia, Canonical, Ampere) qu'en français — peu importe, je m'adapte à l'équipe.

      +
      +
      6. + +
    +
    +
    +
    @@ -1116,11 +1496,11 @@