Kezdőlap Felfedezés Súgó
Bejelentkezés
bchanot
/
bchanot-cv
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Fa: c2e1dd30a8
Branch-ok Tag-ek
bchanot-cv
/
index.html

index.html 41 KB
Előzmények Nyers

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="fr">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <meta name="description" content="Bastien Chanot — Développeur confirmé · Systèmes & Backend. 7 ans en C, Rust, Linux kernel, AOSP, embarqué.">
    7. 

  7. <meta name="author" content="Bastien Chanot">
    8. 

  8. <meta name="theme-color" content="#0d1b12">
    9. 

  9. <title>Bastien Chanot — Développeur Systèmes & Backend</title>
    10. 

  10. <link rel="preconnect" href="https://fonts.googleapis.com">
    11. 

  11. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    12. 

  12. <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">
    13. 

  13. <style>
    14. 

  14.   :root {
    15. 

  15.     /* Palette — non négociable */
    16. 

  16.     --dark:       #0d1b12;
    17. 

  17.     --dark-mid:   #183325;
    18. 

  18.     --g900:       #0e3320;
    19. 

  19.     --g700:       #1b5e3b;
    20. 

  20.     --g500:       #2d7a4f;
    21. 

  21.     --g300:       #6ab98a;
    22. 

  22.     --g100:       #dff0e7;
    23. 

  23.     --g050:       #eef7f1;
    24. 

  24. 

  25.     --ink-1:      #111111;
    26. 

  26.     --ink-2:      #1e1e1e;
    27. 

  27.     --ink-3:      #636363;
    28. 

  28. 

  29.     --page:       #f5f3ec;
    30. 

  30.     --rule:       #d8d4c8;
    31. 

  31.     --tag:        #e6e2d8;
    32. 

  32. 

  33.     /* Typographies */
    34. 

  34.     --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    35. 

  35.     --serif: 'Fraunces', Georgia, serif;
    36. 

  36.     --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
    37. 

  37. 

  38.     /* Échelle */
    39. 

  39.     --r-sm: 4px;
    40. 

  40.     --r-md: 6px;
    41. 

  41.     --r-pill: 999px;
    42. 

  42.     --shadow-sm: 0 1px 2px rgba(13, 27, 18, 0.06);
    43. 

  43.     --shadow-md: 0 6px 24px rgba(13, 27, 18, 0.08);
    44. 

  44.     --shadow-lg: 0 20px 60px rgba(13, 27, 18, 0.12);
    45. 

  45. 

  46.     --nav-h: 64px;
    47. 

  47.     --max-w: 1100px;
    48. 

  48.   }
    49. 

  49. 

  50.   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    51. 

  51. 

  52.   html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
    53. 

  53. 

  54.   body {
    55. 

  55.     background: var(--page);
    56. 

  56.     color: var(--ink-2);
    57. 

  57.     font-family: var(--sans);
    58. 

  58.     font-size: 16px;
    59. 

  59.     line-height: 1.6;
    60. 

  60.     -webkit-font-smoothing: antialiased;
    61. 

  61.     -moz-osx-font-smoothing: grayscale;
    62. 

  62.     overflow-x: hidden;
    63. 

  63.   }
    64. 

  64. 

  65.   ::selection { background: var(--g300); color: var(--dark); }
    66. 

  66. 

  67.   a { color: var(--g700); text-decoration: none; transition: color .18s ease; }
    68. 

  68.   a:hover { color: var(--g500); }
    69. 

  69.   a:focus-visible { outline: 2px solid var(--g500); outline-offset: 3px; border-radius: 2px; }
    70. 

  70. 

  71.   button, .btn { font-family: inherit; cursor: pointer; }
    72. 

  72. 

  73.   /* ── NAV ── */
    74. 

  74.   .nav {
    75. 

  75.     position: fixed;
    76. 

  76.     top: 0; left: 0; right: 0;
    77. 

  77.     height: var(--nav-h);
    78. 

  78.     background: rgba(13, 27, 18, 0.92);
    79. 

  79.     backdrop-filter: saturate(140%) blur(10px);
    80. 

  80.     -webkit-backdrop-filter: saturate(140%) blur(10px);
    81. 

  81.     border-bottom: 1px solid rgba(106, 185, 138, 0.12);
    82. 

  82.     z-index: 50;
    83. 

  83.   }
    84. 

  84.   .nav-inner {
    85. 

  85.     max-width: var(--max-w);
    86. 

  86.     height: 100%;
    87. 

  87.     margin: 0 auto;
    88. 

  88.     padding: 0 24px;
    89. 

  89.     display: flex;
    90. 

  90.     align-items: center;
    91. 

  91.     justify-content: space-between;
    92. 

  92.     gap: 24px;
    93. 

  93.   }
    94. 

  94.   .brand {
    95. 

  95.     font-family: var(--mono);
    96. 

  96.     font-size: 14px;
    97. 

  97.     font-weight: 600;
    98. 

  98.     color: var(--g100);
    99. 

  99.     letter-spacing: 0.5px;
    100. 

  100.     display: inline-flex;
    101. 

  101.     align-items: center;
    102. 

  102.     gap: 8px;
    103. 

  103.   }
    104. 

  104.   .brand::before {
    105. 

  105.     content: "";
    106. 

  106.     width: 8px; height: 8px;
    107. 

  107.     border-radius: 50%;
    108. 

  108.     background: var(--g300);
    109. 

  109.     box-shadow: 0 0 0 0 rgba(106,185,138,.7);
    110. 

  110.     animation: pulse 2.4s infinite;
    111. 

  111.   }
    112. 

  112.   @keyframes pulse {
    113. 

  113.     0%   { box-shadow: 0 0 0 0 rgba(106,185,138,.5); }
    114. 

  114.     70%  { box-shadow: 0 0 0 10px rgba(106,185,138,0); }
    115. 

  115.     100% { box-shadow: 0 0 0 0 rgba(106,185,138,0); }
    116. 

  116.   }
    117. 

  117.   .nav-links { display: flex; gap: 4px; list-style: none; }
    118. 

  118.   .nav-links a {
    119. 

  119.     font-family: var(--mono);
    120. 

  120.     font-size: 13px;
    121. 

  121.     color: rgba(223, 240, 231, 0.75);
    122. 

  122.     padding: 8px 12px;
    123. 

  123.     border-radius: var(--r-sm);
    124. 

  124.     transition: color .18s ease, background .18s ease;
    125. 

  125.   }
    126. 

  126.   .nav-links a:hover { color: var(--g100); background: rgba(106,185,138,0.08); }
    127. 

  127.   .nav-toggle { display: none; }
    128. 

  128. 

  129.   @media (max-width: 768px) {
    130. 

  130.     .nav-links {
    131. 

  131.       position: absolute;
    132. 

  132.       top: var(--nav-h); left: 0; right: 0;
    133. 

  133.       flex-direction: column;
    134. 

  134.       gap: 0;
    135. 

  135.       background: var(--dark);
    136. 

  136.       border-bottom: 1px solid rgba(106,185,138,0.12);
    137. 

  137.       padding: 8px 0;
    138. 

  138.       transform: translateY(-200%);
    139. 

  139.       transition: transform .25s ease;
    140. 

  140.     }
    141. 

  141.     .nav-links.open { transform: translateY(0); }
    142. 

  142.     .nav-links a { padding: 14px 24px; border-radius: 0; }
    143. 

  143.     .nav-toggle {
    144. 

  144.       display: inline-flex;
    145. 

  145.       align-items: center;
    146. 

  146.       justify-content: center;
    147. 

  147.       width: 40px; height: 40px;
    148. 

  148.       margin-left: auto;
    149. 

  149.       background: transparent;
    150. 

  150.       border: 1px solid rgba(106,185,138,0.25);
    151. 

  151.       border-radius: var(--r-sm);
    152. 

  152.       color: var(--g100);
    153. 

  153.     }
    154. 

  154.     .nav-toggle svg { width: 18px; height: 18px; }
    155. 

  155.   }
    156. 

  156. 

  157.   /* ── LAYOUT ── */
    158. 

  158.   main { padding-top: var(--nav-h); }
    159. 

  159.   section { padding: 96px 24px; }
    160. 

  160.   .container { max-width: var(--max-w); margin: 0 auto; }
    161. 

  161. 

  162.   .section-label {
    163. 

  163.     display: inline-flex;
    164. 

  164.     align-items: center;
    165. 

  165.     gap: 10px;
    166. 

  166.     font-family: var(--mono);
    167. 

  167.     font-size: 12px;
    168. 

  168.     font-weight: 600;
    169. 

  169.     color: var(--g500);
    170. 

  170.     letter-spacing: 0.12em;
    171. 

  171.     text-transform: uppercase;
    172. 

  172.     margin-bottom: 18px;
    173. 

  173.   }
    174. 

  174.   .section-label::before {
    175. 

  175.     content: "";
    176. 

  176.     width: 24px; height: 1px; background: var(--g500);
    177. 

  177.   }
    178. 

  178.   .section-dark .section-label { color: var(--g300); }
    179. 

  179.   .section-dark .section-label::before { background: var(--g300); }
    180. 

  180. 

  181.   h2.section-title {
    182. 

  182.     font-family: var(--serif);
    183. 

  183.     font-weight: 600;
    184. 

  184.     font-size: clamp(28px, 4vw, 40px);
    185. 

  185.     line-height: 1.1;
    186. 

  186.     color: var(--ink-1);
    187. 

  187.     letter-spacing: -0.02em;
    188. 

  188.     margin-bottom: 20px;
    189. 

  189.   }
    190. 

  190.   .section-dark h2.section-title { color: #fff; }
    191. 

  191. 

  192.   .section-intro {
    193. 

  193.     font-family: var(--sans);
    194. 

  194.     font-size: 17px;
    195. 

  195.     color: var(--ink-2);
    196. 

  196.     max-width: 64ch;
    197. 

  197.   }
    198. 

  198.   .section-dark .section-intro { color: rgba(223, 240, 231, 0.85); }
    199. 

  199. 

  200.   /* ── HERO ── */
    201. 

  201.   .hero {
    202. 

  202.     position: relative;
    203. 

  203.     min-height: calc(100vh - var(--nav-h));
    204. 

  204.     padding: 80px 24px 96px;
    205. 

  205.     display: flex;
    206. 

  206.     align-items: center;
    207. 

  207.     overflow: hidden;
    208. 

  208.     background:
    209. 

  209.       radial-gradient(ellipse 80% 60% at 80% 0%, rgba(45,122,79,0.10) 0%, transparent 60%),
    210. 

  210.       radial-gradient(ellipse 60% 50% at 0% 100%, rgba(27,94,59,0.08) 0%, transparent 55%),
    211. 

  211.       var(--page);
    212. 

  212.   }
    213. 

  213.   .hero-inner {
    214. 

  214.     max-width: var(--max-w);
    215. 

  215.     width: 100%;
    216. 

  216.     margin: 0 auto;
    217. 

  217.     display: grid;
    218. 

  218.     grid-template-columns: 1fr;
    219. 

  219.     gap: 28px;
    220. 

  220.     position: relative;
    221. 

  221.   }
    222. 

  222.   .hero-eyebrow {
    223. 

  223.     font-family: var(--mono);
    224. 

  224.     font-size: 13px;
    225. 

  225.     color: var(--g700);
    226. 

  226.     letter-spacing: 0.08em;
    227. 

  227.     display: inline-flex;
    228. 

  228.     align-items: center;
    229. 

  229.     gap: 10px;
    230. 

  230.   }
    231. 

  231.   .hero-eyebrow::before {
    232. 

  232.     content: "▍";
    233. 

  233.     color: var(--g500);
    234. 

  234.     font-weight: 700;
    235. 

  235.   }
    236. 

  236.   .hero-name {
    237. 

  237.     font-family: var(--serif);
    238. 

  238.     font-size: clamp(48px, 8vw, 96px);
    239. 

  239.     font-weight: 600;
    240. 

  240.     line-height: 0.95;
    241. 

  241.     letter-spacing: -0.04em;
    242. 

  242.     color: var(--ink-1);
    243. 

  243.   }
    244. 

  244.   .hero-name em {
    245. 

  245.     font-style: italic;
    246. 

  246.     font-weight: 400;
    247. 

  247.     color: var(--g700);
    248. 

  248.   }
    249. 

  249.   .hero-title {
    250. 

  250.     font-family: var(--mono);
    251. 

  251.     font-size: clamp(14px, 1.6vw, 17px);
    252. 

  252.     color: var(--ink-2);
    253. 

  253.     font-weight: 500;
    254. 

  254.     letter-spacing: 0.02em;
    255. 

  255.   }
    256. 

  256.   .hero-title .sep { color: var(--g500); margin: 0 8px; }
    257. 

  257.   .hero-tagline {
    258. 

  258.     font-family: var(--serif);
    259. 

  259.     font-style: italic;
    260. 

  260.     font-weight: 300;
    261. 

  261.     font-size: clamp(20px, 2.6vw, 28px);
    262. 

  262.     line-height: 1.35;
    263. 

  263.     color: var(--ink-2);
    264. 

  264.     max-width: 56ch;
    265. 

  265.     border-left: 3px solid var(--g500);
    266. 

  266.     padding-left: 20px;
    267. 

  267.   }
    268. 

  268.   .hero-cta {
    269. 

  269.     display: flex;
    270. 

  270.     gap: 14px;
    271. 

  271.     flex-wrap: wrap;
    272. 

  272.     margin-top: 12px;
    273. 

  273.   }
    274. 

  274.   .btn {
    275. 

  275.     display: inline-flex;
    276. 

  276.     align-items: center;
    277. 

  277.     gap: 10px;
    278. 

  278.     font-family: var(--mono);
    279. 

  279.     font-size: 14px;
    280. 

  280.     font-weight: 600;
    281. 

  281.     letter-spacing: 0.02em;
    282. 

  282.     padding: 14px 22px;
    283. 

  283.     border-radius: var(--r-md);
    284. 

  284.     border: 1px solid transparent;
    285. 

  285.     transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    286. 

  286.     text-decoration: none;
    287. 

  287.   }
    288. 

  288.   .btn-primary {
    289. 

  289.     background: var(--dark);
    290. 

  290.     color: var(--g100);
    291. 

  291.     border-color: var(--dark);
    292. 

  292.     box-shadow: var(--shadow-sm);
    293. 

  293.   }
    294. 

  294.   .btn-primary:hover {
    295. 

  295.     background: var(--g700);
    296. 

  296.     border-color: var(--g700);
    297. 

  297.     color: #fff;
    298. 

  298.     transform: translateY(-1px);
    299. 

  299.     box-shadow: var(--shadow-md);
    300. 

  300.   }
    301. 

  301.   .btn-secondary {
    302. 

  302.     background: transparent;
    303. 

  303.     color: var(--dark);
    304. 

  304.     border-color: var(--rule);
    305. 

  305.   }
    306. 

  306.   .btn-secondary:hover {
    307. 

  307.     border-color: var(--g500);
    308. 

  308.     color: var(--g700);
    309. 

  309.     background: var(--g050);
    310. 

  310.     transform: translateY(-1px);
    311. 

  311.   }
    312. 

  312.   .btn .arrow {
    313. 

  313.     width: 14px; height: 14px;
    314. 

  314.     transition: transform .18s ease;
    315. 

  315.   }
    316. 

  316.   .btn:hover .arrow { transform: translate(2px, -2px); }
    317. 

  317. 

  318.   .hero-meta {
    319. 

  319.     display: flex;
    320. 

  320.     flex-wrap: wrap;
    321. 

  321.     gap: 24px;
    322. 

  322.     margin-top: 16px;
    323. 

  323.     font-family: var(--mono);
    324. 

  324.     font-size: 12px;
    325. 

  325.     color: var(--ink-3);
    326. 

  326.     letter-spacing: 0.04em;
    327. 

  327.   }
    328. 

  328.   .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
    329. 

  329.   .hero-meta .dot {
    330. 

  330.     display: inline-block;
    331. 

  331.     width: 6px; height: 6px;
    332. 

  332.     border-radius: 50%;
    333. 

  333.     background: var(--g500);
    334. 

  334.   }
    335. 

  335. 

  336.   /* Stagger entrance */
    337. 

  337.   .reveal { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
    338. 

  338.   .reveal.d1 { animation-delay: .08s; }
    339. 

  339.   .reveal.d2 { animation-delay: .18s; }
    340. 

  340.   .reveal.d3 { animation-delay: .30s; }
    341. 

  341.   .reveal.d4 { animation-delay: .42s; }
    342. 

  342.   .reveal.d5 { animation-delay: .55s; }
    343. 

  343.   .reveal.d6 { animation-delay: .68s; }
    344. 

  344.   @keyframes rise {
    345. 

  345.     to { opacity: 1; transform: translateY(0); }
    346. 

  346.   }
    347. 

  347.   @media (prefers-reduced-motion: reduce) {
    348. 

  348.     .reveal { opacity: 1; transform: none; animation: none; }
    349. 

  349.     .brand::before { animation: none; }
    350. 

  350.     html { scroll-behavior: auto; }
    351. 

  351.   }
    352. 

  352. 

  353.   /* ── ABOUT ── */
    354. 

  354.   .about {
    355. 

  355.     background: var(--dark);
    356. 

  356.     background-image:
    357. 

  357.       radial-gradient(ellipse 60% 50% at 100% 0%, rgba(45,122,79,0.16) 0%, transparent 55%),
    358. 

  358.       radial-gradient(ellipse 50% 40% at 0% 100%, rgba(27,94,59,0.12) 0%, transparent 60%);
    359. 

  359.     color: #fff;
    360. 

  360.     position: relative;
    361. 

  361.   }
    362. 

  362.   .about::before {
    363. 

  363.     content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    364. 

  364.     width: 3px;
    365. 

  365.     background: linear-gradient(to bottom, var(--g300), var(--g700));
    366. 

  366.   }
    367. 

  367.   .about-grid {
    368. 

  368.     display: grid;
    369. 

  369.     grid-template-columns: 1fr;
    370. 

  370.     gap: 32px;
    371. 

  371.     align-items: start;
    372. 

  372.   }
    373. 

  373.   .about-text p {
    374. 

  374.     font-size: 18px;
    375. 

  375.     line-height: 1.65;
    376. 

  376.     color: rgba(223, 240, 231, 0.92);
    377. 

  377.     margin-bottom: 16px;
    378. 

  378.     max-width: 62ch;
    379. 

  379.   }
    380. 

  380.   .about-text strong { color: var(--g300); font-weight: 500; }
    381. 

  381.   .about-callout {
    382. 

  382.     border: 1px solid rgba(106,185,138,0.25);
    383. 

  383.     border-radius: var(--r-md);
    384. 

  384.     padding: 20px 22px;
    385. 

  385.     background: rgba(13, 27, 18, 0.4);
    386. 

  386.   }
    387. 

  387.   .about-callout dt {
    388. 

  388.     font-family: var(--mono);
    389. 

  389.     font-size: 11px;
    390. 

  390.     color: var(--g300);
    391. 

  391.     letter-spacing: 0.12em;
    392. 

  392.     text-transform: uppercase;
    393. 

  393.     margin-bottom: 6px;
    394. 

  394.   }
    395. 

  395.   .about-callout dd {
    396. 

  396.     font-family: var(--sans);
    397. 

  397.     font-size: 15px;
    398. 

  398.     color: var(--g100);
    399. 

  399.     margin-bottom: 14px;
    400. 

  400.   }
    401. 

  401.   .about-callout dd:last-child { margin-bottom: 0; }
    402. 

  402.   .about-callout a { color: var(--g300); }
    403. 

  403.   .about-callout a:hover { color: var(--g100); }
    404. 

  404. 

  405.   @media (min-width: 768px) {
    406. 

  406.     .about-grid { grid-template-columns: 1.6fr 1fr; gap: 56px; }
    407. 

  407.   }
    408. 

  408. 

  409.   /* ── STACK ── */
    410. 

  410.   .stack { background: var(--page); }
    411. 

  411.   .stack-grid {
    412. 

  412.     display: grid;
    413. 

  413.     grid-template-columns: 1fr;
    414. 

  414.     gap: 20px;
    415. 

  415.     margin-top: 40px;
    416. 

  416.   }
    417. 

  417.   .stack-card {
    418. 

  418.     background: #fff;
    419. 

  419.     border: 1px solid var(--rule);
    420. 

  420.     border-radius: var(--r-md);
    421. 

  421.     padding: 24px;
    422. 

  422.     transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    423. 

  423.   }
    424. 

  424.   .stack-card:hover {
    425. 

  425.     border-color: var(--g300);
    426. 

  426.     transform: translateY(-2px);
    427. 

  427.     box-shadow: var(--shadow-md);
    428. 

  428.   }
    429. 

  429.   .stack-card-head {
    430. 

  430.     display: flex;
    431. 

  431.     align-items: baseline;
    432. 

  432.     justify-content: space-between;
    433. 

  433.     margin-bottom: 16px;
    434. 

  434.     padding-bottom: 12px;
    435. 

  435.     border-bottom: 1px dashed var(--rule);
    436. 

  436.   }
    437. 

  437.   .stack-card h3 {
    438. 

  438.     font-family: var(--serif);
    439. 

  439.     font-weight: 600;
    440. 

  440.     font-size: 19px;
    441. 

  441.     color: var(--ink-1);
    442. 

  442.     letter-spacing: -0.01em;
    443. 

  443.   }
    444. 

  444.   .stack-card-tag {
    445. 

  445.     font-family: var(--mono);
    446. 

  446.     font-size: 11px;
    447. 

  447.     color: var(--g500);
    448. 

  448.     letter-spacing: 0.1em;
    449. 

  449.   }
    450. 

  450.   .pills {
    451. 

  451.     display: flex;
    452. 

  452.     flex-wrap: wrap;
    453. 

  453.     gap: 8px;
    454. 

  454.     list-style: none;
    455. 

  455.   }
    456. 

  456.   .pill {
    457. 

  457.     display: inline-block;
    458. 

  458.     font-family: var(--mono);
    459. 

  459.     font-size: 12px;
    460. 

  460.     font-weight: 500;
    461. 

  461.     color: var(--g900);
    462. 

  462.     background: var(--g050);
    463. 

  463.     border: 1px solid var(--g100);
    464. 

  464.     padding: 6px 12px;
    465. 

  465.     border-radius: var(--r-pill);
    466. 

  466.     transition: background .18s ease, border-color .18s ease, color .18s ease;
    467. 

  467.   }
    468. 

  468.   .pill:hover {
    469. 

  469.     background: var(--g100);
    470. 

  470.     border-color: var(--g300);
    471. 

  471.     color: var(--g700);
    472. 

  472.   }
    473. 

  473. 

  474.   @media (min-width: 768px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
    475. 

  475.   @media (min-width: 1200px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
    476. 

  476. 

  477.   /* ── EXPERIENCE ── */
    478. 

  478.   .experience { background: var(--g050); }
    479. 

  479.   .timeline {
    480. 

  480.     position: relative;
    481. 

  481.     margin-top: 40px;
    482. 

  482.     padding-left: 28px;
    483. 

  483.     border-left: 2px solid var(--g100);
    484. 

  484.   }
    485. 

  485.   .timeline-item {
    486. 

  486.     position: relative;
    487. 

  487.     padding: 0 0 36px 24px;
    488. 

  488.   }
    489. 

  489.   .timeline-item:last-child { padding-bottom: 0; }
    490. 

  490.   .timeline-item::before {
    491. 

  491.     content: "";
    492. 

  492.     position: absolute;
    493. 

  493.     left: -34px; top: 6px;
    494. 

  494.     width: 12px; height: 12px;
    495. 

  495.     border-radius: 50%;
    496. 

  496.     background: var(--page);
    497. 

  497.     border: 2px solid var(--g500);
    498. 

  498.     box-shadow: 0 0 0 4px var(--g050);
    499. 

  499.   }
    500. 

  500.   .timeline-item.current::before {
    501. 

  501.     background: var(--g500);
    502. 

  502.     box-shadow: 0 0 0 4px var(--g050), 0 0 0 8px rgba(45,122,79,0.18);
    503. 

  503.   }
    504. 

  504.   .timeline-meta {
    505. 

  505.     display: flex;
    506. 

  506.     flex-wrap: wrap;
    507. 

  507.     align-items: baseline;
    508. 

  508.     gap: 12px;
    509. 

  509.     margin-bottom: 8px;
    510. 

  510.     font-family: var(--mono);
    511. 

  511.     font-size: 12px;
    512. 

  512.     color: var(--ink-3);
    513. 

  513.     letter-spacing: 0.04em;
    514. 

  514.   }
    515. 

  515.   .timeline-meta .period {
    516. 

  516.     color: var(--g700);
    517. 

  517.     font-weight: 600;
    518. 

  518.   }
    519. 

  519.   .timeline-meta .badge {
    520. 

  520.     display: inline-block;
    521. 

  521.     background: var(--g100);
    522. 

  522.     color: var(--g700);
    523. 

  523.     padding: 2px 8px;
    524. 

  524.     border-radius: var(--r-pill);
    525. 

  525.     font-size: 10px;
    526. 

  526.     font-weight: 600;
    527. 

  527.     letter-spacing: 0.08em;
    528. 

  528.     text-transform: uppercase;
    529. 

  529.   }
    530. 

  530.   .timeline-item h3 {
    531. 

  531.     font-family: var(--serif);
    532. 

  532.     font-weight: 600;
    533. 

  533.     font-size: 22px;
    534. 

  534.     color: var(--ink-1);
    535. 

  535.     margin-bottom: 4px;
    536. 

  536.     letter-spacing: -0.01em;
    537. 

  537.   }
    538. 

  538.   .timeline-item h3 a {
    539. 

  539.     color: inherit;
    540. 

  540.     border-bottom: 1px solid transparent;
    541. 

  541.     transition: border-color .18s ease, color .18s ease;
    542. 

  542.   }
    543. 

  543.   .timeline-item h3 a:hover { color: var(--g700); border-color: var(--g500); }
    544. 

  544.   .timeline-role {
    545. 

  545.     font-family: var(--mono);
    546. 

  546.     font-size: 13px;
    547. 

  547.     color: var(--g700);
    548. 

  548.     margin-bottom: 12px;
    549. 

  549.   }
    550. 

  550.   .timeline-desc {
    551. 

  551.     color: var(--ink-2);
    552. 

  552.     line-height: 1.6;
    553. 

  553.     max-width: 64ch;
    554. 

  554.   }
    555. 

  555. 

  556.   /* ── FORMATION ── */
    557. 

  557.   .formation { background: var(--page); }
    558. 

  558.   .formation .timeline { border-left-color: var(--g100); }
    559. 

  559.   .formation .timeline-item::before { box-shadow: 0 0 0 4px var(--page); }
    560. 

  560. 

  561.   .formation-school-desc {
    562. 

  562.     font-family: var(--serif);
    563. 

  563.     font-style: italic;
    564. 

  564.     font-weight: 300;
    565. 

  565.     color: var(--ink-2);
    566. 

  566.     line-height: 1.55;
    567. 

  567.     max-width: 64ch;
    568. 

  568.     margin-bottom: 20px;
    569. 

  569.   }
    570. 

  570. 

  571.   .formation-themes {
    572. 

  572.     display: grid;
    573. 

  573.     grid-template-columns: 1fr;
    574. 

  574.     gap: 18px;
    575. 

  575.     margin-top: 24px;
    576. 

  576.   }
    577. 

  577.   @media (min-width: 768px)  { .formation-themes { grid-template-columns: repeat(2, 1fr); } }
    578. 

  578.   @media (min-width: 1200px) { .formation-themes { grid-template-columns: repeat(3, 1fr); } }
    579. 

  579. 

  580.   .theme-card {
    581. 

  581.     background: #fff;
    582. 

  582.     border: 1px solid var(--rule);
    583. 

  583.     border-radius: var(--r-md);
    584. 

  584.     padding: 22px;
    585. 

  585.     transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    586. 

  586.     display: flex;
    587. 

  587.     flex-direction: column;
    588. 

  588.   }
    589. 

  589.   .theme-card:hover {
    590. 

  590.     border-color: var(--g300);
    591. 

  591.     transform: translateY(-2px);
    592. 

  592.     box-shadow: var(--shadow-md);
    593. 

  593.   }
    594. 

  594.   .theme-card-head {
    595. 

  595.     display: flex;
    596. 

  596.     align-items: baseline;
    597. 

  597.     justify-content: space-between;
    598. 

  598.     gap: 12px;
    599. 

  599.     margin-bottom: 12px;
    600. 

  600.     padding-bottom: 10px;
    601. 

  601.     border-bottom: 1px dashed var(--rule);
    602. 

  602.   }
    603. 

  603.   .theme-card h4 {
    604. 

  604.     font-family: var(--serif);
    605. 

  605.     font-weight: 600;
    606. 

  606.     font-size: 18px;
    607. 

  607.     color: var(--ink-1);
    608. 

  608.     letter-spacing: -0.01em;
    609. 

  609.     line-height: 1.2;
    610. 

  610.   }
    611. 

  611.   .theme-card-tag {
    612. 

  612.     font-family: var(--mono);
    613. 

  613.     font-size: 11px;
    614. 

  614.     color: var(--g500);
    615. 

  615.     letter-spacing: 0.1em;
    616. 

  616.     flex-shrink: 0;
    617. 

  617.   }
    618. 

  618.   .theme-quote {
    619. 

  619.     font-family: var(--serif);
    620. 

  620.     font-style: italic;
    621. 

  621.     font-weight: 300;
    622. 

  622.     color: var(--ink-2);
    623. 

  623.     font-size: 14px;
    624. 

  624.     line-height: 1.5;
    625. 

  625.     padding-left: 12px;
    626. 

  626.     border-left: 2px solid var(--g500);
    627. 

  627.     margin-bottom: 16px;
    628. 

  628.   }
    629. 

  629.   .theme-list {
    630. 

  630.     list-style: none;
    631. 

  631.     display: flex;
    632. 

  632.     flex-direction: column;
    633. 

  633.     gap: 10px;
    634. 

  634.   }
    635. 

  635.   .theme-list li {
    636. 

  636.     font-size: 13.5px;
    637. 

  637.     line-height: 1.55;
    638. 

  638.     color: var(--ink-2);
    639. 

  639.   }
    640. 

  640.   .theme-list code {
    641. 

  641.     font-family: var(--mono);
    642. 

  642.     font-size: 12px;
    643. 

  643.     font-weight: 500;
    644. 

  644.     color: var(--g700);
    645. 

  645.     background: var(--g050);
    646. 

  646.     border: 1px solid var(--g100);
    647. 

  647.     padding: 1px 7px;
    648. 

  648.     border-radius: var(--r-sm);
    649. 

  649.   }
    650. 

  650. 

  651.   .formation-tsrit-list {
    652. 

  652.     list-style: none;
    653. 

  653.     display: flex;
    654. 

  654.     flex-direction: column;
    655. 

  655.     gap: 10px;
    656. 

  656.     margin-top: 12px;
    657. 

  657.     max-width: 64ch;
    658. 

  658.   }
    659. 

  659.   .formation-tsrit-list li {
    660. 

  660.     color: var(--ink-2);
    661. 

  661.     line-height: 1.55;
    662. 

  662.     padding-left: 18px;
    663. 

  663.     position: relative;
    664. 

  664.   }
    665. 

  665.   .formation-tsrit-list li::before {
    666. 

  666.     content: "";
    667. 

  667.     position: absolute;
    668. 

  668.     left: 0; top: 0.65em;
    669. 

  669.     width: 8px; height: 1px;
    670. 

  670.     background: var(--g500);
    671. 

  671.   }
    672. 

  672.   .formation-tsrit-list li strong { color: var(--ink-1); font-weight: 600; }
    673. 

  673. 

  674.   .honors {
    675. 

  675.     display: inline-flex;
    676. 

  676.     align-items: center;
    677. 

  677.     gap: 8px;
    678. 

  678.     font-family: var(--mono);
    679. 

  679.     font-size: 12px;
    680. 

  680.     font-weight: 600;
    681. 

  681.     color: var(--g700);
    682. 

  682.     background: var(--g100);
    683. 

  683.     border: 1px solid var(--g300);
    684. 

  684.     padding: 6px 14px;
    685. 

  685.     border-radius: var(--r-pill);
    686. 

  686.     letter-spacing: 0.04em;
    687. 

  687.     margin: 4px 0 14px;
    688. 

  688.   }
    689. 

  689.   .honors::before {
    690. 

  690.     content: "★";
    691. 

  691.     color: var(--g500);
    692. 

  692.     font-size: 13px;
    693. 

  693.   }
    694. 

  694. 

  695.   /* ── CONTACT ── */
    696. 

  696.   .contact {
    697. 

  697.     background: var(--dark);
    698. 

  698.     color: #fff;
    699. 

  699.     position: relative;
    700. 

  700.     overflow: hidden;
    701. 

  701.   }
    702. 

  702.   .contact::after {
    703. 

  703.     content: "";
    704. 

  704.     position: absolute;
    705. 

  705.     right: -120px; bottom: -120px;
    706. 

  706.     width: 360px; height: 360px;
    707. 

  707.     border-radius: 50%;
    708. 

  708.     background: radial-gradient(circle, rgba(45,122,79,0.18) 0%, transparent 70%);
    709. 

  709.     pointer-events: none;
    710. 

  710.   }
    711. 

  711.   .contact-grid {
    712. 

  712.     display: grid;
    713. 

  713.     grid-template-columns: 1fr;
    714. 

  714.     gap: 32px;
    715. 

  715.     position: relative;
    716. 

  716.     z-index: 1;
    717. 

  717.   }
    718. 

  718.   .contact-list {
    719. 

  719.     list-style: none;
    720. 

  720.     display: grid;
    721. 

  721.     grid-template-columns: 1fr;
    722. 

  722.     gap: 12px;
    723. 

  723.     margin-top: 32px;
    724. 

  724.   }
    725. 

  725.   .contact-row {
    726. 

  726.     display: grid;
    727. 

  727.     grid-template-columns: 28px 1fr;
    728. 

  728.     gap: 18px;
    729. 

  729.     align-items: center;
    730. 

  730.     padding: 18px 20px;
    731. 

  731.     background: rgba(255, 255, 255, 0.04);
    732. 

  732.     border: 1px solid rgba(106,185,138,0.18);
    733. 

  733.     border-radius: var(--r-md);
    734. 

  734.     transition: border-color .18s ease, background .18s ease, transform .18s ease;
    735. 

  735.     color: var(--g100);
    736. 

  736.   }
    737. 

  737.   .contact-row:hover {
    738. 

  738.     border-color: var(--g300);
    739. 

  739.     background: rgba(106,185,138,0.08);
    740. 

  740.     transform: translateY(-1px);
    741. 

  741.     color: #fff;
    742. 

  742.   }
    743. 

  743.   .contact-row svg { width: 20px; height: 20px; color: var(--g300); flex-shrink: 0; }
    744. 

  744.   .contact-row .label {
    745. 

  745.     display: block;
    746. 

  746.     font-family: var(--mono);
    747. 

  747.     font-size: 11px;
    748. 

  748.     color: var(--g300);
    749. 

  749.     letter-spacing: 0.12em;
    750. 

  750.     text-transform: uppercase;
    751. 

  751.     margin-bottom: 2px;
    752. 

  752.   }
    753. 

  753.   .contact-row .value {
    754. 

  754.     font-family: var(--mono);
    755. 

  755.     font-size: 15px;
    756. 

  756.     color: #fff;
    757. 

  757.     font-weight: 500;
    758. 

  758.     word-break: break-word;
    759. 

  759.   }
    760. 

  760. 

  761.   @media (min-width: 768px) {
    762. 

  762.     .contact-list { grid-template-columns: repeat(2, 1fr); }
    763. 

  763.   }
    764. 

  764. 

  765.   /* ── FOOTER ── */
    766. 

  766.   .footer {
    767. 

  767.     background: #061008;
    768. 

  768.     color: rgba(223, 240, 231, 0.55);
    769. 

  769.     padding: 32px 24px;
    770. 

  770.     border-top: 1px solid rgba(106,185,138,0.1);
    771. 

  771.   }
    772. 

  772.   .footer-inner {
    773. 

  773.     max-width: var(--max-w);
    774. 

  774.     margin: 0 auto;
    775. 

  775.     display: flex;
    776. 

  776.     flex-wrap: wrap;
    777. 

  777.     gap: 16px 32px;
    778. 

  778.     justify-content: space-between;
    779. 

  779.     align-items: center;
    780. 

  780.     font-family: var(--mono);
    781. 

  781.     font-size: 12px;
    782. 

  782.     letter-spacing: 0.04em;
    783. 

  783.   }
    784. 

  784.   .footer a { color: var(--g300); }
    785. 

  785.   .footer a:hover { color: var(--g100); }
    786. 

  786.   .footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
    787. 

  787. 

  788.   /* ── RESPONSIVE TWEAKS ── */
    789. 

  789.   @media (max-width: 768px) {
    790. 

  790.     section { padding: 72px 20px; }
    791. 

  791.     .hero { padding: 56px 20px 72px; }
    792. 

  792.     .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
    793. 

  793.     .timeline { padding-left: 22px; }
    794. 

  794.     .timeline-item { padding-left: 18px; }
    795. 

  795.     .timeline-item::before { left: -29px; }
    796. 

  796.   }
    797. 

  797. 

  798.   @media (min-width: 1200px) {
    799. 

  799.     section { padding: 120px 24px; }
    800. 

  800.   }
    801. 

  801. 

  802. </style>
    803. 

  803. </head>
    804. 

  804. <body>
    805. 

  805. 

  806. <!-- NAV -->
    807. 

  807. <header class="nav" role="banner">
    808. 

  808.   <div class="nav-inner">
    809. 

  809.     <a href="#hero" class="brand" aria-label="Bastien Chanot — accueil">bchanot.fr</a>
    810. 

  810.     <button class="nav-toggle" type="button" aria-label="Ouvrir le menu" aria-expanded="false" aria-controls="primary-nav">
    811. 

  811.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    812. 

  812.     </button>
    813. 

  813.     <nav aria-label="Navigation principale">
    814. 

  814.       <ul id="primary-nav" class="nav-links">
    815. 

  815.         <li><a href="#about">À propos</a></li>
    816. 

  816.         <li><a href="#stack">Stack</a></li>
    817. 

  817.         <li><a href="#experience">Parcours</a></li>
    818. 

  818.         <li><a href="#formation">Formation</a></li>
    819. 

  819.         <li><a href="#contact">Contact</a></li>
    820. 

  820.       </ul>
    821. 

  821.     </nav>
    822. 

  822.   </div>
    823. 

  823. </header>
    824. 

  824. 

  825. <main>
    826. 

  826. 

  827.   <!-- HERO -->
    828. 

  828.   <section id="hero" class="hero" aria-labelledby="hero-name">
    829. 

  829.     <div class="hero-inner">
    830. 

  830.       <p class="hero-eyebrow reveal">Disponible — CDI systèmes&nbsp;/&nbsp;embarqué · missions freelance</p>
    831. 

  831.       <h1 id="hero-name" class="hero-name reveal d1">Bastien&nbsp;<em>Chanot</em></h1>
    832. 

  832.       <p class="hero-title reveal d2">Développeur confirmé<span class="sep">·</span>Systèmes &amp; Backend</p>
    833. 

  833.       <p class="hero-tagline reveal d3">Du kernel Linux au backend Rust — 7 ans de développement systèmes en production.</p>
    834. 

  834.       <div class="hero-cta reveal d4">
    835. 

  835.         <a class="btn btn-primary" href="#contact">
    836. 

  836.           Me contacter
    837. 

  837.           <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="19" x2="19" y2="5"/><polyline points="8 5 19 5 19 16"/></svg>
    838. 

  838.         </a>
    839. 

  839.         <a class="btn btn-secondary" href="CV_Bastien_Chanot.html">
    840. 

  840.           Voir le CV
    841. 

  841.           <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="19" x2="19" y2="5"/><polyline points="8 5 19 5 19 16"/></svg>
    842. 

  842.         </a>
    843. 

  843.         <a class="btn btn-secondary" href="CV_Bastien_Chanot.pdf" download>
    844. 

  844.           Télécharger PDF
    845. 

  845.           <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
    846. 

  846.         </a>
    847. 

  847.       </div>
    848. 

  848.       <div class="hero-meta reveal d5">
    849. 

  849.         <span><span class="dot"></span>C · Rust · Linux Kernel</span>
    850. 

  850.         <span><span class="dot"></span>AOSP · Embarqué</span>
    851. 

  851.         <span><span class="dot"></span>Backend · DevOps</span>
    852. 

  852.       </div>
    853. 

  853.     </div>
    854. 

  854.   </section>
    855. 

  855. 

  856.   <!-- ABOUT -->
    857. 

  857.   <section id="about" class="about section-dark" aria-labelledby="about-title">
    858. 

  858.     <div class="container">
    859. 

  859.       <span class="section-label">À propos</span>
    860. 

  860.       <h2 id="about-title" class="section-title">Sept ans à écrire du code qui tourne là où ça compte.</h2>
    861. 

  861.       <div class="about-grid">
    862. 

  862.         <div class="about-text">
    863. 

  863.           <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>
    864. 

  864.           <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>
    865. 

  865.           <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>
    866. 

  866.           <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>
    867. 

  867.         </div>
    868. 

  868.         <dl class="about-callout">
    869. 

  869.           <dt>Recherche prioritaire</dt>
    870. 

  870.           <dd>CDI systèmes embarqués / logiciel</dd>
    871. 

  871.           <dt>En parallèle</dt>
    872. 

  872.           <dd>Missions freelance · ZenQuality</dd>
    873. 

  873.           <dt>Localisation actuelle</dt>
    874. 

  874.           <dd>Yerres (91) · mobilité Pays de la Loire</dd>
    875. 

  875.           <dt>Présence</dt>
    876. 

  876.           <dd>Full remote · ou 1–2 j/mois si Paris</dd>
    877. 

  877.           <dt>Site pro</dt>
    878. 

  878.           <dd><a href="https://zenquality.fr" target="_blank" rel="noopener">zenquality.fr&nbsp;↗</a></dd>
    879. 

  879.         </dl>
    880. 

  880.       </div>
    881. 

  881.     </div>
    882. 

  882.   </section>
    883. 

  883. 

  884.   <!-- STACK -->
    885. 

  885.   <section id="stack" class="stack" aria-labelledby="stack-title">
    886. 

  886.     <div class="container">
    887. 

  887.       <span class="section-label">Stack technique</span>
    888. 

  888.       <h2 id="stack-title" class="section-title">Ce avec quoi je travaille, sans le marketing.</h2>
    889. 

  889.       <p class="section-intro">Outils éprouvés, choisis pour leurs garanties — pas pour leur hype. Tout ce qui suit est en production ou l'a été.</p>
    890. 

  890.       <div class="stack-grid">
    891. 

  891. 

  892.         <article class="stack-card">
    893. 

  893.           <header class="stack-card-head">
    894. 

  894.             <h3>Langages</h3>
    895. 

  895.             <span class="stack-card-tag">// 01</span>
    896. 

  896.           </header>
    897. 

  897.           <ul class="pills">
    898. 

  898.             <li class="pill">C</li>
    899. 

  899.             <li class="pill">Rust</li>
    900. 

  900.             <li class="pill">Java</li>
    901. 

  901.             <li class="pill">Bash</li>
    902. 

  902.             <li class="pill">Python</li>
    903. 

  903.           </ul>
    904. 

  904.         </article>
    905. 

  905. 

  906.         <article class="stack-card">
    907. 

  907.           <header class="stack-card-head">
    908. 

  908.             <h3>Embarqué</h3>
    909. 

  909.             <span class="stack-card-tag">// 02</span>
    910. 

  910.           </header>
    911. 

  911.           <ul class="pills">
    912. 

  912.             <li class="pill">Linux kernel drivers</li>
    913. 

  913.             <li class="pill">AOSP</li>
    914. 

  914.             <li class="pill">ARM / x86</li>
    915. 

  915.             <li class="pill">GPIO</li>
    916. 

  916.             <li class="pill">NFC</li>
    917. 

  917.             <li class="pill">ESC/POS</li>
    918. 

  918.             <li class="pill">cross-compilation GCC</li>
    919. 

  919.           </ul>
    920. 

  920.         </article>
    921. 

  921. 

  922.         <article class="stack-card">
    923. 

  923.           <header class="stack-card-head">
    924. 

  924.             <h3>Conteneurs</h3>
    925. 

  925.             <span class="stack-card-tag">// 03</span>
    926. 

  926.           </header>
    927. 

  927.           <ul class="pills">
    928. 

  928.             <li class="pill">Docker</li>
    929. 

  929.             <li class="pill">LXC / LXD</li>
    930. 

  930.             <li class="pill">QEMU</li>
    931. 

  931.             <li class="pill">VMware</li>
    932. 

  932.           </ul>
    933. 

  933.         </article>
    934. 

  934. 

  935.         <article class="stack-card">
    936. 

  936.           <header class="stack-card-head">
    937. 

  937.             <h3>Backend</h3>
    938. 

  938.             <span class="stack-card-tag">// 04</span>
    939. 

  939.           </header>
    940. 

  940.           <ul class="pills">
    941. 

  941.             <li class="pill">Rust</li>
    942. 

  942.             <li class="pill">WebSocket</li>
    943. 

  943.             <li class="pill">GPU bare-metal</li>
    944. 

  944.             <li class="pill">ramdisk I/O</li>
    945. 

  945.           </ul>
    946. 

  946.         </article>
    947. 

  947. 

  948.         <article class="stack-card">
    949. 

  949.           <header class="stack-card-head">
    950. 

  950.             <h3>Systèmes</h3>
    951. 

  951.             <span class="stack-card-tag">// 05</span>
    952. 

  952.           </header>
    953. 

  953.           <ul class="pills">
    954. 

  954.             <li class="pill">Linux bare-metal</li>
    955. 

  955.             <li class="pill">AOSP</li>
    956. 

  956.             <li class="pill">Android Backup</li>
    957. 

  957.             <li class="pill">systemd</li>
    958. 

  958.           </ul>
    959. 

  959.         </article>
    960. 

  960. 

  961.         <article class="stack-card">
    962. 

  962.           <header class="stack-card-head">
    963. 

  963.             <h3>DevOps</h3>
    964. 

  964.             <span class="stack-card-tag">// 06</span>
    965. 

  965.           </header>
    966. 

  966.           <ul class="pills">
    967. 

  967.             <li class="pill">Git</li>
    968. 

  968.             <li class="pill">GitHub / GitLab</li>
    969. 

  969.             <li class="pill">CI / CD</li>
    970. 

  970.             <li class="pill">Gitflow</li>
    971. 

  971.             <li class="pill">Agile</li>
    972. 

  972.           </ul>
    973. 

  973.         </article>
    974. 

  974. 

  975.       </div>
    976. 

  976.     </div>
    977. 

  977.   </section>
    978. 

  978. 

  979.   <!-- EXPERIENCE -->
    980. 

  980.   <section id="experience" class="experience" aria-labelledby="experience-title">
    981. 

  981.     <div class="container">
    982. 

  982.       <span class="section-label">Parcours</span>
    983. 

  983.       <h2 id="experience-title" class="section-title">Trois expériences qui résument l'essentiel.</h2>
    984. 

  984.       <p class="section-intro">Sept ans de développement systèmes en production — du kernel au backend, de la puce au serveur.</p>
    985. 

  985. 

  986.       <ol class="timeline">
    987. 

  987. 

  988.         <li class="timeline-item current">
    989. 

  989.           <div class="timeline-meta">
    990. 

  990.             <span class="period">avr.&nbsp;2026 — présent</span>
    991. 

  991.             <span class="badge">En cours</span>
    992. 

  992.             <span>Yerres · Full remote</span>
    993. 

  993.           </div>
    994. 

  994.           <h3><a href="https://zenquality.fr" target="_blank" rel="noopener">ZenQuality</a></h3>
    995. 

  995.           <p class="timeline-role">Développeur indépendant · Systèmes &amp; Backend</p>
    996. 

  996.           <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>
    997. 

  997.         </li>
    998. 

  998. 

  999.         <li class="timeline-item">
    1000. 

  1000.           <div class="timeline-meta">
    1001. 

  1001.             <span class="period">mars&nbsp;2019 — mars&nbsp;2025</span>
    1002. 

  1002.             <span>Paris · Full remote dès 2020</span>
    1003. 

  1003.           </div>
    1004. 

  1004.           <h3>CareGame</h3>
    1005. 

  1005.           <p class="timeline-role">Développeur systèmes &amp; backend</p>
    1006. 

  1006.           <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>
    1007. 

  1007.         </li>
    1008. 

  1008. 

  1009.         <li class="timeline-item">
    1010. 

  1010.           <div class="timeline-meta">
    1011. 

  1011.             <span class="period">2017</span>
    1012. 

  1012.             <span>Ivry-sur-Seine</span>
    1013. 

  1013.           </div>
    1014. 

  1014.           <h3>Deewee</h3>
    1015. 

  1015.           <p class="timeline-role">Développeur C embarqué</p>
    1016. 

  1016.           <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>
    1017. 

  1017.         </li>
    1018. 

  1018. 

  1019.       </ol>
    1020. 

  1020.     </div>
    1021. 

  1021.   </section>
    1022. 

  1022. 

  1023.   <!-- FORMATION -->
    1024. 

  1024.   <section id="formation" class="formation" aria-labelledby="formation-title">
    1025. 

  1025.     <div class="container">
    1026. 

  1026.       <span class="section-label">Formation</span>
    1027. 

  1027.       <h2 id="formation-title" class="section-title">Formation</h2>
    1028. 

  1028.       <p class="section-intro"><em>Le socle technique derrière sept ans de production.</em></p>
    1029. 

  1029. 

  1030.       <ol class="timeline">
    1031. 

  1031. 

  1032.         <li class="timeline-item">
    1033. 

  1033.           <div class="timeline-meta">
    1034. 

  1034.             <span class="period">2015 — 2019</span>
    1035. 

  1035.             <span>Clichy</span>
    1036. 

  1036.           </div>
    1037. 

  1037.           <h3>École 42</h3>
    1038. 

  1038.           <p class="timeline-role">Programmation par projets · sans cours, sans notes</p>
    1039. 

  1039.           <p class="formation-school-desc">Uniquement du code qui passe ou qui ne passe pas.</p>
    1040. 

  1040. 

  1041.           <div class="formation-themes">
    1042. 

  1042. 

  1043.             <article class="theme-card">
    1044. 

  1044.               <header class="theme-card-head">
    1045. 

  1045.                 <h4>Systèmes &amp; Kernel</h4>
    1046. 

  1046.                 <span class="theme-card-tag">// 01</span>
    1047. 

  1047.               </header>
    1048. 

  1048.               <p class="theme-quote">Bootstrap d'OS, drivers, gestion matérielle, allocation mémoire.</p>
    1049. 

  1049.               <ul class="theme-list">
    1050. 

  1050.                 <li><code>ft_linux</code> &amp; <code>kfs-1</code> — Linux From Scratch et noyau minimaliste : bootloader ASM, GDT, interruptions, driver char device clavier mappé.</li>
    1051. 

  1051.                 <li><code>drivers &amp; interrupt</code> — drivers kernel Linux et gestion d'interruptions niveau noyau.</li>
    1052. 

  1052.                 <li><code>process &amp; memory</code> — modèle de processus Unix, gestion mémoire kernel.</li>
    1053. 

  1053.                 <li><code>little penguin</code> — contribution kernel Linux : style guide, patch submission, contrib upstream.</li>
    1054. 

  1054.                 <li><code>malloc</code> — allocateur mémoire complet (libft_malloc.so) avec mmap, zones tiny / small / large.</li>
    1055. 

  1055.               </ul>
    1056. 

  1056.             </article>
    1057. 

  1057. 

  1058.             <article class="theme-card">
    1059. 

  1059.               <header class="theme-card-head">
    1060. 

  1060.                 <h4>Bas niveau &amp; Outils système</h4>
    1061. 

  1061.                 <span class="theme-card-tag">// 02</span>
    1062. 

  1062.               </header>
    1063. 

  1063.               <p class="theme-quote">Recoder les outils qu'on utilise tous les jours pour comprendre vraiment ce qu'ils font.</p>
    1064. 

  1064.               <ul class="theme-list">
    1065. 

  1065.                 <li><code>nm</code> — parsing d'exécutables ELF, tables de symboles.</li>
    1066. 

  1066.                 <li><code>42sh</code> / <code>21</code> — shell POSIX complet : parser, redirections, jobs, history, autocomplétion.</li>
    1067. 

  1067.                 <li><code>ft_ls</code> — réimplémentation <code>ls</code> avec options POSIX, permissions, tri, formats.</li>
    1068. 

  1068.                 <li><code>ft_select</code> — TUI custom avec gestion termios, signaux, redessin partiel.</li>
    1069. 

  1069.               </ul>
    1070. 

  1070.             </article>
    1071. 

  1071. 

  1072.             <article class="theme-card">
    1073. 

  1073.               <header class="theme-card-head">
    1074. 

  1074.                 <h4>Sécurité &amp; Algorithmie</h4>
    1075. 

  1075.                 <span class="theme-card-tag">// 03</span>
    1076. 

  1076.               </header>
    1077. 

  1077.               <p class="theme-quote">Comprendre comment un système peut être cassé pour savoir le sécuriser.</p>
    1078. 

  1078.               <ul class="theme-list">
    1079. 

  1079.                 <li><code>snow crash</code> — wargame exploitation système : escalation de privilèges, stack overflow, format string, race conditions.</li>
    1080. 

  1080.                 <li><code>doctor quine</code> — programme auto-réplicatif (métaprogrammation).</li>
    1081. 

  1081.                 <li><code>ft_ssl_md5</code> — réimplémentation MD5, SHA-256, base64.</li>
    1082. 

  1082.                 <li><code>lem-in</code>, <code>push-swap</code> — algorithmique : pathfinding (Edmonds-Karp), optimisation de tri sous contrainte.</li>
    1083. 

  1083.               </ul>
    1084. 

  1084.             </article>
    1085. 

  1085. 

  1086.           </div>
    1087. 

  1087.         </li>
    1088. 

  1088. 

  1089.         <li class="timeline-item">
    1090. 

  1090.           <div class="timeline-meta">
    1091. 

  1091.             <span class="period">2013 — 2015</span>
    1092. 

  1092.             <span>Vincennes</span>
    1093. 

  1093.           </div>
    1094. 

  1094.           <h3>TSRIT — Next Formation</h3>
    1095. 

  1095.           <p class="timeline-role">BTS Technicien Supérieur Réseaux Informatiques &amp; Télécoms</p>
    1096. 

  1096.           <span class="honors">Félicitations du jury</span>
    1097. 

  1097.           <p class="timeline-desc">Le socle réseau et infrastructure derrière les compétences systèmes.</p>
    1098. 

  1098.           <ul class="formation-tsrit-list">
    1099. 

  1099.             <li>Architecture réseau (<strong>OSI</strong>, <strong>TCP/IP</strong>), routage, commutation.</li>
    1100. 

  1100.             <li>Administration <strong>Linux</strong> / <strong>Windows Server</strong>, sécurité réseau, virtualisation.</li>
    1101. 

  1101.             <li>Stage final transformé en <strong>CDI chez CareGame</strong>.</li>
    1102. 

  1102.           </ul>
    1103. 

  1103.         </li>
    1104. 

  1104. 

  1105.       </ol>
    1106. 

  1106.     </div>
    1107. 

  1107.   </section>
    1108. 

  1108. 

  1109.   <!-- CONTACT -->
    1110. 

  1110.   <section id="contact" class="contact section-dark" aria-labelledby="contact-title">
    1111. 

  1111.     <div class="container">
    1112. 

  1112.       <span class="section-label">Contact</span>
    1113. 

  1113.       <h2 id="contact-title" class="section-title">Une mission, une question technique, un&nbsp;projet&nbsp;?</h2>
    1114. 

  1114.       <p class="section-intro">Le plus simple : l'email. Réponse sous 48&nbsp;h ouvrées.</p>
    1115. 

  1115. 

  1116.       <div class="contact-grid">
    1117. 

  1117.         <ul class="contact-list">
    1118. 

  1118. 

  1119.           <li>
    1120. 

  1120.             <a class="contact-row" href="mailto:chanot.bastien@gmail.com">
    1121. 

  1121.               <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>
    1122. 

  1122.               <span>
    1123. 

  1123.                 <span class="label">Email</span>
    1124. 

  1124.                 <span class="value">chanot.bastien@gmail.com</span>
    1125. 

  1125.               </span>
    1126. 

  1126.             </a>
    1127. 

  1127.           </li>
    1128. 

  1128. 

  1129.           <li>
    1130. 

  1130.             <a class="contact-row" href="tel:+33778822297">
    1131. 

  1131.               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.35 1.84.59 2.8.72A2 2 0 0 1 22 16.92z"/></svg>
    1132. 

  1132.               <span>
    1133. 

  1133.                 <span class="label">Téléphone</span>
    1134. 

  1134.                 <span class="value">+33 7 78 82 22 97</span>
    1135. 

  1135.               </span>
    1136. 

  1136.             </a>
    1137. 

  1137.           </li>
    1138. 

  1138. 

  1139.           <li>
    1140. 

  1140.             <a class="contact-row" href="https://zenquality.fr" target="_blank" rel="noopener">
    1141. 

  1141.               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
    1142. 

  1142.               <span>
    1143. 

  1143.                 <span class="label">Site pro</span>
    1144. 

  1144.                 <span class="value">zenquality.fr</span>
    1145. 

  1145.               </span>
    1146. 

  1146.             </a>
    1147. 

  1147.           </li>
    1148. 

  1148. 

  1149.           <li>
    1150. 

  1150.             <a class="contact-row" href="CV_Bastien_Chanot.pdf" download>
    1151. 

  1151.               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
    1152. 

  1152.               <span>
    1153. 

  1153.                 <span class="label">CV</span>
    1154. 

  1154.                 <span class="value">Télécharger le PDF</span>
    1155. 

  1155.               </span>
    1156. 

  1156.             </a>
    1157. 

  1157.           </li>
    1158. 

  1158. 

  1159.         </ul>
    1160. 

  1160.       </div>
    1161. 

  1161.     </div>
    1162. 

  1162.   </section>
    1163. 

  1163. 

  1164. </main>
    1165. 

  1165. 

  1166. <!-- FOOTER -->
    1167. 

  1167. <footer class="footer" role="contentinfo">
    1168. 

  1168.   <div class="footer-inner">
    1169. 

  1169.     <span>© 2026 · Bastien Chanot · bchanot.fr</span>
    1170. 

  1170.     <div class="footer-links">
    1171. 

  1171.       <a href="CV_Bastien_Chanot.html">CV (HTML)</a>
    1172. 

  1172.       <a href="CV_Bastien_Chanot.pdf" download>CV (PDF)</a>
    1173. 

  1173.       <a href="https://zenquality.fr" target="_blank" rel="noopener">zenquality.fr ↗</a>
    1174. 

  1174.     </div>
    1175. 

  1175.   </div>
    1176. 

  1176. </footer>
    1177. 

  1177. 

  1178. <script>
    1179. 

  1179.   // Mobile nav toggle
    1180. 

  1180.   (function () {
    1181. 

  1181.     const toggle = document.querySelector('.nav-toggle');
    1182. 

  1182.     const links  = document.getElementById('primary-nav');
    1183. 

  1183.     if (!toggle || !links) return;
    1184. 

  1184. 

  1185.     toggle.addEventListener('click', () => {
    1186. 

  1186.       const open = links.classList.toggle('open');
    1187. 

  1187.       toggle.setAttribute('aria-expanded', String(open));
    1188. 

  1188.       toggle.setAttribute('aria-label', open ? 'Fermer le menu' : 'Ouvrir le menu');
    1189. 

  1189.     });
    1190. 

  1190. 

  1191.     links.addEventListener('click', (e) => {
    1192. 

  1192.       if (e.target instanceof HTMLAnchorElement && links.classList.contains('open')) {
    1193. 

  1193.         links.classList.remove('open');
    1194. 

  1194.         toggle.setAttribute('aria-expanded', 'false');
    1195. 

  1195.         toggle.setAttribute('aria-label', 'Ouvrir le menu');
    1196. 

  1196.       }
    1197. 

  1197.     });
    1198. 

  1198.   })();
    1199. 

  1199. 

  1200.   // Active section highlight in nav (subtle — color shift only)
    1201. 

  1201.   (function () {
    1202. 

  1202.     const sections = document.querySelectorAll('main section[id]');
    1203. 

  1203.     const navLinks = document.querySelectorAll('.nav-links a[href^="#"]');
    1204. 

  1204.     if (!('IntersectionObserver' in window) || !sections.length) return;
    1205. 

  1205. 

  1206.     const map = new Map();
    1207. 

  1207.     navLinks.forEach(a => {
    1208. 

  1208.       const id = a.getAttribute('href').slice(1);
    1209. 

  1209.       map.set(id, a);
    1210. 

  1210.     });
    1211. 

  1211. 

  1212.     const io = new IntersectionObserver((entries) => {
    1213. 

  1213.       entries.forEach(entry => {
    1214. 

  1214.         const link = map.get(entry.target.id);
    1215. 

  1215.         if (!link) return;
    1216. 

  1216.         if (entry.isIntersecting) {
    1217. 

  1217.           navLinks.forEach(a => a.style.color = '');
    1218. 

  1218.           link.style.color = 'var(--g100)';
    1219. 

  1219.         }
    1220. 

  1220.       });
    1221. 

  1221.     }, { rootMargin: '-40% 0px -55% 0px', threshold: 0 });
    1222. 

  1222. 

  1223.     sections.forEach(s => io.observe(s));
    1224. 

  1224.   })();
    1225. 

  1225. </script>
    1226. 

  1226. 

  1227. </body>
    1228. 

  1228. </html>
    1229.