chore: initial commit — landing page + CV + Claude config
Single-page static site at bchanot.fr: landing (index.html) and CV (HTML + PDF), pure HTML/CSS/JS, no build step. Includes project conventions (CLAUDE.md), README, and .claude/ memory/tasks/audits scaffolding. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
bastien
commit
54e830016c
34
.claude/memory/blockers.md
Normal file
34
.claude/memory/blockers.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
type: blockers_registry
|
||||
entry_prefix: BLK
|
||||
schema:
|
||||
id: BLK-XXX
|
||||
date: YYYY-MM-DD
|
||||
friction: string (what was blocked)
|
||||
real_cause: string (root cause, not symptom)
|
||||
solution: string (workaround or fix)
|
||||
status: [open | resolved | upstream]
|
||||
rules:
|
||||
- Open a blocker as soon as friction > 15 min wasted. Close it with a real cause, not "moved on".
|
||||
- Link to upstream issue / PR / commit when applicable.
|
||||
- If cause is a bug in a dependency, set status upstream with a pointer to the tracker.
|
||||
---
|
||||
|
||||
# Blockers registry (BLK)
|
||||
|
||||
## Index
|
||||
|
||||
| ID | Date | Friction | Status |
|
||||
|----|------|---------|--------|
|
||||
|
||||
<!-- Append entries below. Template:
|
||||
|
||||
## BLK-XXX - <friction>
|
||||
|
||||
- **Date** : YYYY-MM-DD
|
||||
- **Friction** : <ce qui était bloqué>
|
||||
- **Cause réelle** : <cause racine>
|
||||
- **Solution** : <workaround ou fix>
|
||||
- **Statut** : open | resolved | upstream
|
||||
|
||||
-->
|
||||
66
.claude/memory/decisions.md
Normal file
66
.claude/memory/decisions.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
type: decisions_registry
|
||||
entry_prefix: BDR
|
||||
schema:
|
||||
id: BDR-XXX
|
||||
date: YYYY-MM-DD
|
||||
title: string (<= 80 chars)
|
||||
decision: string (what was chosen)
|
||||
why: string (motivation, context)
|
||||
alternatives: list of strings (what was rejected + why)
|
||||
status: [proposed | accepted | deprecated | superseded]
|
||||
supersedes: BDR-XXX (optional)
|
||||
rules:
|
||||
- Append-only. Never rewrite past entries - add a new one with status superseded if needed.
|
||||
- One entry per non-trivial choice. Trivial = reversible in under 10 min with no cross-file impact.
|
||||
- Capture why more carefully than what - the what rots, the why lasts.
|
||||
---
|
||||
|
||||
# Decisions registry (BDR)
|
||||
|
||||
## Index
|
||||
|
||||
| ID | Date | Title | Status |
|
||||
|----|------|-------|--------|
|
||||
| BDR-001 | 2026-05-15 | Static single-file site, no framework | accepted |
|
||||
| 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-001 — Static single-file site, no framework
|
||||
|
||||
- **Date**: 2026-05-15
|
||||
- **Statut**: accepted
|
||||
- **Décision**: `index.html` unique, CSS inline `<style>`, JS vanilla inline `<script>`. Aucun bundler, aucun build step.
|
||||
- **Pourquoi**: Landing perso 1 page. Audience recruteurs/CTO. Critère "click Contacter <10s". Zéro dep, zéro maintenance, zéro tracking. Indexable par défaut.
|
||||
- **Alternatives rejetées**:
|
||||
- Astro — overkill, ajoute build step pour 1 page.
|
||||
- React SPA — interdit pour site public indexable (cf `~/.claude/CLAUDE.md`).
|
||||
- HTML + CSS externes — éclate 1 livrable en 3 fichiers sans bénéfice.
|
||||
- **Référence**: `index.html`, section Stack de `CLAUDE.md`.
|
||||
|
||||
---
|
||||
|
||||
## BDR-002 — `weasyprint` pour génération PDF CV
|
||||
|
||||
- **Date**: 2026-05-15
|
||||
- **Statut**: accepted
|
||||
- **Décision**: `weasyprint CV_Bastien_Chanot.html CV_Bastien_Chanot.pdf` à chaque modif HTML CV.
|
||||
- **Pourquoi**: weasyprint déjà installé (`~/.local/bin/weasyprint`). Chromium absent. wkhtmltopdf déprécié.
|
||||
- **Alternatives rejetées**:
|
||||
- Chromium `--print-to-pdf` — pas installé.
|
||||
- wkhtmltopdf — déprécié + WebKit ancien, rendu moins fidèle.
|
||||
- Print manuel via navigateur — pas reproductible, dérive entre HTML et PDF.
|
||||
- **Warnings connus**: `box-shadow: none` ignoré par weasyprint, sans impact visuel.
|
||||
- **Référence**: `CV_Bastien_Chanot.pdf`.
|
||||
|
||||
---
|
||||
|
||||
## BDR-003 — Position pro: CDI prioritaire, missions freelance en parallèle
|
||||
|
||||
- **Date**: 2026-05-15
|
||||
- **Statut**: accepted
|
||||
- **Décision**: Site annonce **CDI systèmes/embarqué prioritaire**, ZenQuality (freelance) en parallèle. Géo: full remote idéal, hybride 1-2 j/mois si Paris, mobilité Pays de la Loire.
|
||||
- **Pourquoi**: Recadrage user. Première version annonçait "Missions long terme & expertise" — pas représentatif. Hiérarchie CDI > freelance maintenant explicite (hero eyebrow + about para + callout + CV header).
|
||||
- **Référence**: `index.html` (hero-eyebrow, about-text para 3, about-callout) + `CV_Bastien_Chanot.html` (header).
|
||||
35
.claude/memory/evals.md
Normal file
35
.claude/memory/evals.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
type: evals_registry
|
||||
entry_prefix: EVAL
|
||||
schema:
|
||||
id: EVAL-XXX
|
||||
date: YYYY-MM-DD
|
||||
output: string (what was produced)
|
||||
method: string (how it was evaluated - manual read, test, benchmark, user feedback)
|
||||
anomalies: list of strings (what was wrong, missing, surprising)
|
||||
action: [keep | correct | deprecate]
|
||||
rules:
|
||||
- Log an eval whenever you validate the quality of something Claude produced (report, audit, plan, generated code).
|
||||
- Action keep - the output is fit for purpose as-is.
|
||||
- Action correct - needs revision; capture what.
|
||||
- Action deprecate - the approach itself is flawed; link to the decision that replaces it.
|
||||
---
|
||||
|
||||
# Evals registry (EVAL)
|
||||
|
||||
## Index
|
||||
|
||||
| ID | Date | Output | Action |
|
||||
|----|------|--------|--------|
|
||||
|
||||
<!-- Append entries below. Template:
|
||||
|
||||
## EVAL-XXX - <output>
|
||||
|
||||
- **Date** : YYYY-MM-DD
|
||||
- **Output** : <ce qui a été produit>
|
||||
- **Méthode** : <comment cela a été évalué>
|
||||
- **Anomalies** : <ce qui est faux, manquant, surprenant>
|
||||
- **Action** : keep | correct | deprecate
|
||||
|
||||
-->
|
||||
22
.claude/memory/journal.md
Normal file
22
.claude/memory/journal.md
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
type: journal
|
||||
schema:
|
||||
entry: one date heading per working session
|
||||
body: 3-5 lines max - what was done, decided, blocked
|
||||
rules:
|
||||
- One heading per date (YYYY-MM-DD), not per session.
|
||||
- Append at the end. Never edit past entries.
|
||||
- Keep it terse. Details belong in decisions/learnings/blockers - this is a timeline only.
|
||||
---
|
||||
|
||||
# Journal
|
||||
|
||||
## 2026-05-15
|
||||
|
||||
- Bootstrap `index.html`: hero stagger, sticky nav, stack cards 6 cat, timeline parcours, contact dark, footer.
|
||||
- Palette + 3 polices câblées via `:root`. CSS inline + JS vanilla. Aucune dep sauf Google Fonts.
|
||||
- CV HTML mis à jour: header suffix "· mobilité Pays de la Loire" à côté Yerres.
|
||||
- PDF CV regen via `weasyprint`. Warning `box-shadow: none` ignoré.
|
||||
- Serveur dev: `python3 -m http.server 8000 --bind 0.0.0.0` → LAN sur `192.168.1.101:8000`.
|
||||
- Position pro précisée: CDI embarqué/logiciel prioritaire, freelance ZenQuality parallèle, remote ou Paris 1-2 j/mois, mobilité Pays de la Loire.
|
||||
- Squelette `.claude/` + `CLAUDE.md` + `README.md` créés a posteriori (init-project skippé init pour single-file livrable).
|
||||
32
.claude/memory/learnings.md
Normal file
32
.claude/memory/learnings.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
type: learnings_registry
|
||||
entry_prefix: LRN
|
||||
schema:
|
||||
id: LRN-XXX
|
||||
date: YYYY-MM-DD
|
||||
pattern: string (what was observed, abstracted)
|
||||
context: string (where/when it happened - concrete)
|
||||
future_application: string (when to recall this)
|
||||
rules:
|
||||
- Capture learnings that apply beyond the current task.
|
||||
- Abstract from the incident - the pattern is what is reusable, not the one-shot fact.
|
||||
- Link to source (commit, file, PR) when possible.
|
||||
---
|
||||
|
||||
# Learnings registry (LRN)
|
||||
|
||||
## Index
|
||||
|
||||
| ID | Date | Pattern | Applies to |
|
||||
|----|------|---------|------------|
|
||||
|
||||
<!-- Append entries below. Template:
|
||||
|
||||
## LRN-XXX - <pattern abstrait>
|
||||
|
||||
- **Date** : YYYY-MM-DD
|
||||
- **Pattern** : <ce qui a été observé, formulé de manière réutilisable>
|
||||
- **Contexte** : <où et quand, concret>
|
||||
- **Application future** : <quand se rappeler de ceci>
|
||||
|
||||
-->
|
||||
29
.claude/tasks/TODO.md
Normal file
29
.claude/tasks/TODO.md
Normal file
@ -0,0 +1,29 @@
|
||||
# TODO — bchanot.fr
|
||||
|
||||
State of the landing page + CV project. Append-only: keep history readable.
|
||||
|
||||
---
|
||||
|
||||
## Current
|
||||
|
||||
- Landing page `index.html` shipped (single file, inline CSS + JS).
|
||||
- CV `CV_Bastien_Chanot.html` + matching PDF regenerated via weasyprint.
|
||||
- Local serve verified at `http://192.168.1.101:8000/`.
|
||||
|
||||
## 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.
|
||||
|
||||
## Open ideas (not committed)
|
||||
|
||||
- Light "what I'm working on right now" section (single line under hero).
|
||||
- Add a Gogs / GitHub link if a clean public repo is curated first.
|
||||
- Print-stylesheet polish for `CV_Bastien_Chanot.html` if weasyprint output drifts.
|
||||
|
||||
---
|
||||
|
||||
> Mark items done by moving them to `.claude/memory/journal.md` with a date heading.
|
||||
15
.gitignore
vendored
Normal file
15
.gitignore
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
# OS / editor
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.swp
|
||||
*~
|
||||
|
||||
# Local servers / caches
|
||||
.ctx7-cache/
|
||||
graphify-out/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
|
||||
# Local Claude settings (per-user overrides — keep .claude/ tracked otherwise)
|
||||
.claude/settings.local.json
|
||||
130
CLAUDE.md
Normal file
130
CLAUDE.md
Normal file
@ -0,0 +1,130 @@
|
||||
# bchanot.fr — CLAUDE.md
|
||||
|
||||
Single source of truth for Claude in this repo.
|
||||
Global rules: `~/.claude/CLAUDE.md` — this file extends or overrides them.
|
||||
|
||||
---
|
||||
|
||||
## Project overview
|
||||
|
||||
Personal landing page + CV for Bastien Chanot (developer, systems & backend).
|
||||
Single-page static site served at https://bchanot.fr. Goal: a recruiter or CTO
|
||||
landing on the page decides whether to contact within 10 seconds.
|
||||
|
||||
Audience: technical recruiters, CTOs, engineering managers. Use case: hub for
|
||||
contact + CV access. No tracking, no analytics, no cookie banner.
|
||||
|
||||
---
|
||||
|
||||
## Stack
|
||||
|
||||
- Pure static HTML/CSS/JS — no framework, no build step.
|
||||
- Fonts: Google Fonts (`JetBrains Mono` mono, `Fraunces` display, `DM Sans` sans).
|
||||
- PDF generation for CV: `weasyprint` (from the matching HTML file).
|
||||
|
||||
No package manager. No bundler. No runtime dependencies beyond Google Fonts.
|
||||
|
||||
---
|
||||
|
||||
## Files
|
||||
|
||||
```
|
||||
index.html — landing page (single file, inline CSS + JS)
|
||||
CV_Bastien_Chanot.html — CV (web version, linked from landing as "Voir le CV")
|
||||
CV_Bastien_Chanot.pdf — CV (printable, served via "Télécharger PDF")
|
||||
README.md — repo readme
|
||||
CLAUDE.md — this file
|
||||
.claude/ — Claude memory, tasks, audits
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Serve locally
|
||||
|
||||
```bash
|
||||
python3 -m http.server 8000 --bind 0.0.0.0
|
||||
# then visit http://192.168.1.101:8000/ from any device on the LAN
|
||||
```
|
||||
|
||||
UFW may block the port — open it on demand only:
|
||||
|
||||
```bash
|
||||
sudo ufw allow 8000/tcp
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Regenerate CV PDF (after editing the HTML)
|
||||
|
||||
```bash
|
||||
weasyprint CV_Bastien_Chanot.html CV_Bastien_Chanot.pdf
|
||||
```
|
||||
|
||||
The PDF must match the latest HTML before pushing or sending.
|
||||
|
||||
---
|
||||
|
||||
## Design system (non-negotiable)
|
||||
|
||||
Palette — exact hex:
|
||||
- `#0d1b12` — dark forest (nav, dark sections, footer)
|
||||
- `#1b5e3b` — green primary (links, section titles on light bg)
|
||||
- `#2d7a4f` — green accent (borders, dots, separators)
|
||||
- `#6ab98a` — green light (lisible on dark bg)
|
||||
- `#dff0e7` — green tint (pill bg)
|
||||
- `#f5f3ec` — parchment (page bg)
|
||||
|
||||
Typography:
|
||||
- `Fraunces` (serif) — display: hero name, section titles, role headings
|
||||
- `JetBrains Mono` (mono) — eyebrows, badges, tech pills, nav, contact rows
|
||||
- `DM Sans` (sans) — body text
|
||||
|
||||
Forbidden:
|
||||
- Pure white background (`#ffffff`)
|
||||
- `border-radius` > 6px except pills
|
||||
- Heavy SVG illustrations
|
||||
- Lorem ipsum or placeholder text
|
||||
- Mention of salary / TJM / pricing
|
||||
|
||||
---
|
||||
|
||||
## Project conventions
|
||||
|
||||
- All CSS lives inline in `<head>` (`<style>`) — no external stylesheet.
|
||||
- All JS lives inline before `</body>` (`<script>`) — vanilla only.
|
||||
- CSS variables in `:root` for palette + typography + spacing scale.
|
||||
- Section comments in HTML: `<!-- HERO -->`, `<!-- ABOUT -->`, etc.
|
||||
- Sections semantic: `<header>`, `<main>`, `<section id="…">`, `<footer>`.
|
||||
- Mobile-first. Breakpoints: 768px (tablet), 1200px (desktop).
|
||||
- Animations CSS-only or vanilla JS. No GSAP, no Three.js, no Lottie.
|
||||
- `prefers-reduced-motion: reduce` must disable animation + smooth-scroll.
|
||||
|
||||
---
|
||||
|
||||
## Content rules
|
||||
|
||||
- Only real information — never invent dates, companies, achievements.
|
||||
- French copy (audience is French market).
|
||||
- Profile state, including job search context, must stay consistent across
|
||||
index.html and CV. Currently: looking for **CDI** in embedded / systems
|
||||
software first; freelance missions (ZenQuality) in parallel.
|
||||
- Geography: Yerres (91) currently; targeting Pays de la Loire mid-term;
|
||||
full remote preferred or hybrid 1–2 days/month if Paris.
|
||||
|
||||
---
|
||||
|
||||
## Exceptions to global rules
|
||||
|
||||
None — global rules apply.
|
||||
|
||||
---
|
||||
|
||||
## Workflow expectations
|
||||
|
||||
- Edits to `index.html` or `CV_Bastien_Chanot.html` must preserve the
|
||||
palette + typography + structure unless explicitly asked to change them.
|
||||
- After editing `CV_Bastien_Chanot.html`, regenerate the PDF.
|
||||
- Never add external dependencies beyond Google Fonts.
|
||||
- Never add tracking, analytics, cookie banners or third-party scripts.
|
||||
- Always test in mobile width (375px) and desktop (1440px) before claiming done.
|
||||
- The HTTP server bound to `192.168.1.101:8000` is for local LAN testing only.
|
||||
558
CV_Bastien_Chanot.html
Normal file
558
CV_Bastien_Chanot.html
Normal file
@ -0,0 +1,558 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bastien Chanot — CV</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* Zones sombres (header, footer) */
|
||||
--dark: #0d1b12;
|
||||
--dark-mid: #183325;
|
||||
|
||||
/* Échelle verte — même teinte, 5 niveaux */
|
||||
--g900: #0e3320; /* texte sur fond clair : très fort */
|
||||
--g700: #1b5e3b; /* titres section, rôles, accroches */
|
||||
--g500: #2d7a4f; /* bordures accent, liens */
|
||||
--g300: #6ab98a; /* sur fond sombre : lisible */
|
||||
--g100: #dff0e7; /* tag bg clair */
|
||||
--g050: #eef7f1; /* skills block bg */
|
||||
|
||||
/* Typographie — neutrals chauds */
|
||||
--ink-1: #111111; /* noms entreprises, school, titres forts */
|
||||
--ink-2: #1e1e1e; /* corps de texte, bullets */
|
||||
--ink-3: #636363; /* dates, lieux, labels légers */
|
||||
|
||||
/* Surfaces */
|
||||
--page: #f5f3ec; /* fond document */
|
||||
--rule: #d8d4c8; /* séparateurs */
|
||||
--tag: #e6e2d8; /* tag générique */
|
||||
|
||||
--mono: 'JetBrains Mono', monospace;
|
||||
--serif: 'Fraunces', serif;
|
||||
--sans: 'DM Sans', sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: var(--sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page {
|
||||
width: 210mm;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
background: var(--page);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── HEADER DARK BLOCK ── */
|
||||
.cv-header {
|
||||
background: var(--dark);
|
||||
background-image: radial-gradient(ellipse 120% 200% at 0% 50%, var(--dark-mid) 0%, var(--dark) 60%);
|
||||
padding: 22px 20mm 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cv-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, var(--g300), var(--g700));
|
||||
}
|
||||
|
||||
.cv-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -40px; top: -40px;
|
||||
width: 200px; height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(45,122,79,0.12) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
font-family: var(--serif);
|
||||
font-size: 26pt;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: var(--mono);
|
||||
font-size: 9pt;
|
||||
font-weight: 600;
|
||||
color: var(--g300);
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 6px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.header-contact {
|
||||
text-align: right;
|
||||
font-family: var(--mono);
|
||||
font-size: 7.5pt;
|
||||
color: rgba(255,255,255,0.55);
|
||||
line-height: 1.8;
|
||||
white-space: nowrap;
|
||||
min-width: 210px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-sep {
|
||||
color: rgba(106,185,138,0.4);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.header-contact a {
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(106,185,138,0.5);
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── BODY ── */
|
||||
.cv-body {
|
||||
padding: 14px 20mm 16px;
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(26,71,48,0.05)'/%3E%3C/svg%3E"),
|
||||
linear-gradient(160deg, #f5f3ec 0%, #edeadf 55%, #f2efe6 100%);
|
||||
}
|
||||
|
||||
.accroche {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 11.5pt;
|
||||
color: var(--ink-2);
|
||||
line-height: 1.7;
|
||||
border-left: 3px solid var(--g500);
|
||||
padding: 6px 0 6px 12px;
|
||||
margin: 14px 0;
|
||||
background: linear-gradient(to right, rgba(14,51,32,0.04), transparent);
|
||||
}
|
||||
|
||||
.rule {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, var(--rule), rgba(216,212,200,0));
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.section { margin-bottom: 13px; }
|
||||
|
||||
.section-title {
|
||||
font-family: var(--mono);
|
||||
font-size: 9pt;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--g700);
|
||||
margin-bottom: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--rule);
|
||||
}
|
||||
|
||||
/* ── XP ── */
|
||||
.xp-block { margin-bottom: 11px; }
|
||||
|
||||
.xp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.xp-company {
|
||||
font-family: var(--mono);
|
||||
font-size: 12pt;
|
||||
font-weight: 700;
|
||||
color: var(--ink-1);
|
||||
}
|
||||
|
||||
.xp-dates {
|
||||
font-family: var(--mono);
|
||||
font-size: 8.5pt;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
background: var(--tag);
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.xp-role {
|
||||
font-size: 10pt;
|
||||
font-weight: 500;
|
||||
color: var(--g700);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.xp-loc {
|
||||
font-size: 7.5pt;
|
||||
color: var(--ink-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ul.bullets { list-style: none; }
|
||||
|
||||
ul.bullets li {
|
||||
padding-left: 13px;
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
font-size: 10.5pt;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
ul.bullets li::before {
|
||||
content: '▸';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--g300);
|
||||
font-size: 7pt;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--g100);
|
||||
border: 1px solid #a8d4bc;
|
||||
font-family: var(--mono);
|
||||
font-size: 6.5pt;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--g900);
|
||||
margin: 0 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── SKILLS ── */
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
gap: 4px 10px;
|
||||
font-size: 8.4pt;
|
||||
|
||||
}
|
||||
|
||||
.skill-label {
|
||||
font-family: var(--mono);
|
||||
font-size: 9.5pt;
|
||||
font-weight: 700;
|
||||
color: var(--g700);
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.skill-values { font-size: 10.5pt; font-weight: 500; color: var(--ink-2); }
|
||||
|
||||
/* ── EDU ── */
|
||||
.edu-block { margin-bottom: 9px; }
|
||||
|
||||
.edu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.edu-school {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5pt;
|
||||
font-weight: 700;
|
||||
color: var(--ink-1);
|
||||
}
|
||||
|
||||
.edu-dates {
|
||||
font-family: var(--mono);
|
||||
font-size: 7.2pt;
|
||||
color: var(--ink-3);
|
||||
background: var(--tag);
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.edu-degree {
|
||||
font-size: 10pt;
|
||||
font-weight: 500;
|
||||
color: var(--g700);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.edu-detail {
|
||||
font-size: 10pt;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ── TWO COL BOTTOM ── */
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0 20px;
|
||||
}
|
||||
|
||||
.lang-row { display: flex; gap: 5px; flex-wrap: wrap; }
|
||||
|
||||
.lang-item {
|
||||
font-family: var(--mono);
|
||||
font-size: 9pt;
|
||||
color: var(--g900);
|
||||
background: var(--g100);
|
||||
border: 1px solid #a8d4bc;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.lang-item .level {
|
||||
color: var(--ink-3);
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.interests { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
|
||||
.interest-tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 9pt;
|
||||
color: var(--g900);
|
||||
background: var(--g100);
|
||||
border: 1px solid #a8d4bc;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ── FOOTER ── */
|
||||
.footer-bar {
|
||||
background: var(--dark);
|
||||
padding: 7px 20mm;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-bar span {
|
||||
font-family: var(--mono);
|
||||
font-size: 6.8pt;
|
||||
color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.footer-bar a {
|
||||
font-family: var(--mono);
|
||||
font-size: 6.8pt;
|
||||
color: var(--g300);
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── PRINT ── */
|
||||
@media print {
|
||||
body { background: white; padding: 0; }
|
||||
.screen-label { display: none; }
|
||||
.page { box-shadow: none; }
|
||||
.cv-header { padding: 18px 14mm 14px; }
|
||||
.cv-body { padding: 12px 14mm 14px; }
|
||||
.footer-bar { padding: 6px 14mm; }
|
||||
@page { size: A4; margin: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="cv-header">
|
||||
<div>
|
||||
<div class="header-name">Bastien Chanot</div>
|
||||
<div class="header-title">Développeur confirmé · Systèmes & Backend</div>
|
||||
</div>
|
||||
<div class="header-contact">
|
||||
<a href="tel:+33778822297">+33 7 78 82 22 97</a><br>
|
||||
<a href="mailto:chanot.bastien@gmail.com">chanot.bastien@gmail.com</a><br>
|
||||
Yerres → Reloc. Pays de la Loire<br>
|
||||
Open full remote <span class="contact-sep">|</span> Permis B & A
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cv-body">
|
||||
|
||||
<div class="accroche">
|
||||
Développeur systèmes confirmé (7 ans), spécialisé en C/Rust/Java sur Linux bare-metal, kernel drivers et environnements AOSP.
|
||||
Expérience étendue sur l'architecture et l'exploitation de serveurs GPU haute densité, la conteneurisation LXC/LXD,
|
||||
et le développement système embarqué de bout en bout. Habitué à opérer seul sur des périmètres larges,
|
||||
de la couche kernel au backend réseau.
|
||||
</div>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Expérience professionnelle</div>
|
||||
|
||||
<div class="xp-block">
|
||||
<div class="xp-header">
|
||||
<span class="xp-company">ZenQuality</span>
|
||||
<span class="xp-dates">Avr. 2026 – présent</span>
|
||||
</div>
|
||||
<div class="xp-role">Développeur indépendant <span class="xp-loc">· Yerres · <a href="https://zenquality.fr" style="color:var(--g500);text-decoration:none;border-bottom:1px solid var(--g300);">zenquality.fr</a></span></div>
|
||||
<ul class="bullets">
|
||||
<li>Développement logiciel et conseil technique en indépendant — systèmes, backend, infrastructure.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="xp-block">
|
||||
<div class="xp-header">
|
||||
<span class="xp-company">CareGame</span>
|
||||
<span class="xp-dates">Mars 2019 – Mars 2025</span>
|
||||
</div>
|
||||
<div class="xp-role">Développeur logiciel — Systèmes & Backend <span class="xp-loc">· Paris · Full remote dès 2020</span></div>
|
||||
<ul class="bullets">
|
||||
<li>Développement solo de drivers kernel Linux en <span class="tag">C</span> pour environnement AOSP (x86 / ARM) — adaptation de modules GPU, isolation CPU/GPU par instance de jeu.</li>
|
||||
<li>Développement d'un backend <span class="tag">Rust</span> (~2 000 lignes) : communication WebSocket entre clients et instances, intégration <span class="tag">Docker</span> / <span class="tag">LXC</span> pour l'orchestration des conteneurs AOSP.</li>
|
||||
<li>Développement de virtual touchscreen et virtual gamepad AOSP (<span class="tag">Java</span>), servant de drivers hôtes communicant avec le backend Rust.</li>
|
||||
<li>Architecture et optimisation de serveurs GPU bare-metal (g4 : 8× GPU T4, 64 vCPU) — isolation de 2 cœurs CPU/session, I/O sur ramdisk, 32 sessions AAA simultanées (Asphalt 9 : 3 sessions / GPU T4).</li>
|
||||
<li>Intégration et amélioration d'un système <span class="tag">LXC/LXD</span> issu d'une R&D Nvidia — résultats reconnus par les équipes Nvidia au-delà des attentes initiales.</li>
|
||||
<li>Collaboration avec Canonical (<span class="tag">Anbox</span>, versions non commerciales LXC/LXD) et Ampere Computing (serveurs ARM pré-commerciaux).</li>
|
||||
<li>Développement du système d'installation automatique de jeux sur AOSP et gestion des sauvegardes utilisateur (Android Backup + script custom).</li>
|
||||
<li>Scripting <span class="tag">Bash</span> pour l'automatisation de l'infrastructure et du cycle de vie des instances.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="xp-block">
|
||||
<div class="xp-header">
|
||||
<span class="xp-company">Deewee</span>
|
||||
<span class="xp-dates">2017</span>
|
||||
</div>
|
||||
<div class="xp-role">Développeur C — Système embarqué <span class="xp-loc">· Ivry-sur-Seine</span></div>
|
||||
<ul class="bullets">
|
||||
<li>Développement en <span class="tag">C</span> sur Orange Pi (<span class="tag">Debian ARM</span>) interceptant le flux <span class="tag">ESC/POS</span> d'une imprimante thermique pour générer une image PNG du ticket avant impression.</li>
|
||||
<li>Gestion <span class="tag">GPIO</span> physique (bouton) pour déclenchement conditionnel de l'impression avec timeout.</li>
|
||||
<li>Hotspot WiFi embarqué + diffusion des credentials via antenne <span class="tag">NFC</span> (scan automatique depuis application mobile tierce).</li>
|
||||
<li>Envoi de l'image générée en WiFi direct vers l'application mobile à la connexion.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Formation</div>
|
||||
|
||||
<div class="edu-block">
|
||||
<div class="edu-header">
|
||||
<span class="edu-school">École 42</span>
|
||||
<span class="edu-dates">2015 – 2019</span>
|
||||
</div>
|
||||
<div class="edu-degree">Programmation informatique <span class="xp-loc">· Clichy</span></div>
|
||||
<div class="edu-detail">
|
||||
<strong>Systèmes / Kernel :</strong> ft_linux & kfs-1 (Linux From Scratch — bootloader ASM, GDT, interruptions, driver char device) · drivers & interrupt · process & memory · little penguin<br>
|
||||
<strong>Bas niveau :</strong> malloc (allocateur mémoire) · nm (parsing ELF) · ft_ls · ft_select · 42sh (shell POSIX complet)<br>
|
||||
<strong>Réseau / Sécurité :</strong> ft_ssl_md5 (crypto) · snow crash (exploitation système) · lem-in · push-swap · doctor quine
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edu-block">
|
||||
<div class="edu-header">
|
||||
<span class="edu-school">Next Formation</span>
|
||||
<span class="edu-dates">2013 – 2015</span>
|
||||
</div>
|
||||
<div class="edu-degree">TSRIT — Technicien Supérieur Réseaux & Télécoms, <em>Félicitations du jury</em> <span class="xp-loc">· Vincennes</span></div>
|
||||
</div>
|
||||
|
||||
<div class="edu-block">
|
||||
<div class="edu-header">
|
||||
<span class="edu-school">Lycée Rosa Parks</span>
|
||||
<span class="edu-dates">2009 – 2013</span>
|
||||
</div>
|
||||
<div class="edu-degree">Bac S — génie informatique, électrique et mécanique <span class="xp-loc">· Montgeron</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Compétences techniques</div>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-label">Langages</div>
|
||||
<div class="skill-values">C · Rust · Java · Bash · Python · C++ (notions)</div>
|
||||
|
||||
<div class="skill-label">Embarqué</div>
|
||||
<div class="skill-values">Linux kernel drivers · AOSP · ARM / x86 · GPIO · NFC · ESC/POS · Orange Pi · cross-compilation GCC</div>
|
||||
|
||||
<div class="skill-label">Conteneurs</div>
|
||||
<div class="skill-values">Docker · LXC / LXD · QEMU · VMware · VirtualBox</div>
|
||||
|
||||
<div class="skill-label">Backend</div>
|
||||
<div class="skill-values">Rust · WebSocket · architecture GPU bare-metal · ramdisk I/O</div>
|
||||
|
||||
<div class="skill-label">Systèmes</div>
|
||||
<div class="skill-values">Linux bare-metal · AOSP · Android Backup · systemd · Windows · macOS</div>
|
||||
|
||||
<div class="skill-label">DevOps</div>
|
||||
<div class="skill-values">Git · GitHub / GitLab · CI/CD · Gitflow · Agile (Scrum, Kanban)</div>
|
||||
|
||||
<div class="skill-label">IA / Outils</div>
|
||||
<div class="skill-values">Claude Code (agents/skills custom) · N8N · automatisation · prompting avancé</div>
|
||||
|
||||
<div class="skill-label">Gestion</div>
|
||||
<div class="skill-values">Trello · Jira · Confluence · Notion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rule"></div>
|
||||
|
||||
<div class="two-col">
|
||||
<div class="section">
|
||||
<div class="section-title">Langues</div>
|
||||
<div class="lang-row">
|
||||
<div class="lang-item">Anglais <span class="level">C2</span></div>
|
||||
<div class="lang-item">Espagnol <span class="level">B1</span></div>
|
||||
<div class="lang-item">Français <span class="level">natif</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Centres d'intérêt</div>
|
||||
<div class="interests">
|
||||
<span class="interest-tag">Voyage</span>
|
||||
<span class="interest-tag">Sciences</span>
|
||||
<span class="interest-tag">Astronomie</span>
|
||||
<span class="interest-tag">Nature</span>
|
||||
<span class="interest-tag">Jeux vidéo</span>
|
||||
<span class="interest-tag">Musique</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer-bar">
|
||||
<a href="https://bchanot.fr">bchanot.fr</a>
|
||||
<span>Bastien Chanot · CV 2026</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
CV_Bastien_Chanot.pdf
Normal file
BIN
CV_Bastien_Chanot.pdf
Normal file
Binary file not shown.
79
README.md
Normal file
79
README.md
Normal file
@ -0,0 +1,79 @@
|
||||
# bchanot.fr
|
||||
|
||||
Personal landing page + CV for Bastien Chanot — developer, systems & backend.
|
||||
|
||||
Static single-page site (no framework, no build step). Lives at https://bchanot.fr.
|
||||
|
||||
## Contents
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `index.html` | Landing page (inline CSS + JS, single file) |
|
||||
| `CV_Bastien_Chanot.html` | CV — web version, linked from landing as "Voir le CV" |
|
||||
| `CV_Bastien_Chanot.pdf` | CV — printable, served via "Télécharger PDF" |
|
||||
| `CLAUDE.md` | Project rules for the Claude assistant |
|
||||
| `.claude/` | Memory registries, tasks, audits |
|
||||
|
||||
## Local preview
|
||||
|
||||
```bash
|
||||
python3 -m http.server 8000 --bind 0.0.0.0
|
||||
```
|
||||
|
||||
Then open `http://localhost:8000/` (same machine) or `http://192.168.1.101:8000/`
|
||||
from any device on the LAN.
|
||||
|
||||
If the LAN URL is unreachable, the firewall is likely blocking the port:
|
||||
|
||||
```bash
|
||||
sudo ufw allow 8000/tcp
|
||||
```
|
||||
|
||||
## Regenerate the CV PDF after editing the HTML
|
||||
|
||||
```bash
|
||||
weasyprint CV_Bastien_Chanot.html CV_Bastien_Chanot.pdf
|
||||
```
|
||||
|
||||
Run this every time `CV_Bastien_Chanot.html` is modified so the served PDF
|
||||
stays in sync.
|
||||
|
||||
## Stack
|
||||
|
||||
- HTML5 + CSS3 (inline `<style>` in `<head>`)
|
||||
- Vanilla JS (inline `<script>` before `</body>`)
|
||||
- Google Fonts: JetBrains Mono, Fraunces, DM Sans
|
||||
- `weasyprint` for HTML → PDF conversion (CV only)
|
||||
|
||||
No bundler. No npm. No runtime dependencies beyond Google Fonts.
|
||||
|
||||
## Design rules
|
||||
|
||||
Strict palette (non-negotiable):
|
||||
|
||||
| Hex | Role |
|
||||
|-----------|------|
|
||||
| `#0d1b12` | Dark forest — nav, dark sections, footer |
|
||||
| `#1b5e3b` | Green primary — section titles, links on light bg |
|
||||
| `#2d7a4f` | Green accent — borders, dots, separators |
|
||||
| `#6ab98a` | Green light — text on dark bg |
|
||||
| `#dff0e7` | Green tint — pill background |
|
||||
| `#f5f3ec` | Parchment — page background |
|
||||
|
||||
Typography:
|
||||
- `Fraunces` — display (names, titles)
|
||||
- `JetBrains Mono` — technical labels, badges, pills, nav, contact
|
||||
- `DM Sans` — body text
|
||||
|
||||
Mobile-first, responsive at 768px + 1200px breakpoints.
|
||||
WCAG AA contrast. Focus visible. Semantic HTML.
|
||||
|
||||
## Deploy
|
||||
|
||||
Static files — drop `index.html`, `CV_Bastien_Chanot.html`, and
|
||||
`CV_Bastien_Chanot.pdf` onto any static host (Netlify, Vercel, GitHub Pages,
|
||||
plain nginx) at the root.
|
||||
|
||||
## License
|
||||
|
||||
Personal site content — © Bastien Chanot.
|
||||
1043
index.html
Normal file
1043
index.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user