-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvibe-coders.html
More file actions
624 lines (579 loc) · 39.1 KB
/
Copy pathvibe-coders.html
File metadata and controls
624 lines (579 loc) · 39.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
---
layout: none
title: "Vibe Coders & Artisanat Logiciel | Atelier Logiciel Sandré"
description: >-
Du Vibe Coding au logiciel de production : auditez, sécurisez et pérennisez
vos applications générées par IA avec l'Atelier Logiciel Sandré.
---
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Vibe Copilot Engineering | Atelier Logiciel Sandré</title>
<meta name="description"
content="Vous avez développé votre application avec l'IA ? Je vous aide à la sécuriser, la refactorer et la faire évoluer sans tout reconstruire.">
<meta content="vibe coding, ia, développement logiciel, artisanat logiciel,
refactoring, audit code ia, cursor, claude, chatgpt, llm, tdd, architecture"
name="keywords">
<meta content="Enzo Sandré - Atelier Logiciel Sandré" name="author">
<meta content="Vibe Coders & Artisanat Logiciel | Atelier Logiciel Sandré" property="og:title">
<meta content="Transformez vos prototypes et applications conçus avec l'IA
en logiciels pérennes, maintenables et prêts pour la production."
property="og:description">
<meta content="website" property="og:type">
<meta content="https://enzosandre.fr/vibe-coders.html" property="og:url">
<meta content="https://enzosandre.fr/resources/images/logo.png" property="og:image">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap"
rel="stylesheet">
<link href="/resources/css/vibe-coders.css" rel="stylesheet">
<link href="/resources/images/logo.png" rel="icon" type="image/png">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YBGD63ZRND"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-YBGD63ZRND');
</script>
</head>
<body>
<header class="vc-header">
<div class="vc-container vc-nav">
<a class="vc-brand" href="/">
<img alt="Logo Atelier Logiciel Sandré" src="/resources/images/logo.png">
<div class="vc-brand-text">
<span class="vc-brand-title">Atelier Logiciel Sandré</span>
<span class="vc-brand-sub">Vibe Copilot Engineering</span>
</div>
</a>
<ul class="vc-nav-links" id="vc-nav-links">
<li><a href="#probleme">Problème</a></li>
<li><a href="#approche">Approche</a></li>
<li><a href="#pourquoi-moi">Expérience</a></li>
<li><a href="#accompagnement">Offre</a></li>
<li><a href="/" style="opacity: 0.8;">← Site principal</a></li>
<li class="vc-nav-mobile-cta">
<a class="vc-btn vc-btn-primary vc-btn-sm"
href="https://calendar.proton.me/u/0/bookings#_YgVgZFZVzgt-lIakAj8VHFE-XuHfQ3j-m2WI2LYhO0=" rel="noopener"
target="_blank">
Appel gratuit (30 min)
</a>
</li>
</ul>
<div class="vc-nav-actions">
<a class="vc-btn vc-btn-primary vc-btn-sm vc-header-cta"
href="https://calendar.proton.me/u/0/bookings#_YgVgZFZVzgt-lIakAj8VHFE-XuHfQ3j-m2WI2LYhO0=" rel="noopener"
target="_blank">
Appel gratuit (30 min)
</a>
<button class="vc-nav-toggle" aria-label="Menu de navigation" aria-expanded="false" aria-controls="vc-nav-links">
<span class="vc-nav-toggle-bar"></span>
<span class="vc-nav-toggle-bar"></span>
<span class="vc-nav-toggle-bar"></span>
</button>
</div>
</div>
</header>
<main>
<section class="vc-hero">
<div class="vc-container">
<div class="vc-hero-content">
<h1> Du <span class="gradient-text">Vibe Coding</span> au Logiciel de
Production </h1>
<p class="lead">
Le vibe coding permet de développer rapidement un prototype. Mais lorsqu'il rencontre son public,
les enjeux changent : il faut pouvoir faire évoluer le logiciel, préserver son comportement
et maîtriser sa complexité. C'est alors un vrai produit sur lequel les utilisateurs ont des attentes.
</p>
<div class="vc-meme-wrapper">
<figure class="vc-meme-figure"><img alt="It's Dangerous to Go Alone! Take This." class="vc-meme-img"
loading="eager"
src="/resources/images/its-dangerous-to-go-alone.jpg">
<figcaption class="vc-meme-caption"> Garder les logiciels prêts à accepter le changement est un
métier : <strong>celui de développeur</strong>.
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="vc-section" id="probleme">
<div class="vc-container">
<div class="vc-section-header"><span class="vc-eyebrow">Le point de rupture</span>
<h2> Au début, tout va très vite. <span
class="gradient-text">Puis votre logiciel devient trop complexe.</span></h2>
<p> Tant que le projet reste simple, l'IA est redoutablement efficace. Mais à partir d'un certain niveau
de complexité, elle ne peut plus improviser indéfiniment sans méthode pour comprendre et faire
évoluer l'ensemble du logiciel. </p></div>
<div class="vc-pain-list">
<article class="vc-pain-card vc-pain-cascade">
<div class="vc-pain-card-header"><span class="vc-pain-badge danger"> <span
class="vc-pulse-dot"></span> ALERTE 01 · EFFETS DE BORD </span> <span
class="vc-pain-code-ref">ERR_RELAPSE_BUG</span></div>
<div class="vc-pain-body">
<div class="vc-pain-content"><h3> Vous corrigez un problème. <span class="gradient-text">Vous en créez un autre.</span>
</h3>
<p> Ajouter une fonctionnalité casse quelque chose ailleurs.<br/> Vous demandez à l'IA de
corriger le bug.<br/> Elle le corrige… et saccage autre chose. </p>
<p> Vous devez tout vérifier à la main. Le neuf comme l'ancien. <br/> Vous n'avez aucune
confiance dans le travail de l'IA.<br/> La charge devient écrasante et aspire votre
motivation. </p>
<p class="vc-pain-highlight"><strong> Plus le logiciel grandit, plus chaque modification
risque d'avoir des conséquences imprévues. </strong></p></div>
<div class="vc-pain-visual">
<div class="vc-widget-terminal">
<div class="vc-widget-header">
<div class="vc-widget-dots"><span class="dot red"></span> <span
class="dot yellow"></span> <span class="dot green"></span></div>
<span class="vc-widget-title">cascade-debug --live</span> <span
class="vc-widget-pill danger">0 TEST ACTIF</span></div>
<div class="vc-widget-body">
<div class="vc-cascade-flow">
<div class="vc-cascade-node resolved">
<div class="vc-node-header"><span class="node-badge fix">FIX</span> <span
class="node-title">Authentification utilisateur</span> <span
class="node-status ok">RÉSOLU ✔</span></div>
</div>
<div class="vc-cascade-link"><span class="link-arrow">▼</span> <span
class="link-label">effet de bord non détecté</span></div>
<div class="vc-cascade-node broken">
<div class="vc-node-header"><span class="node-badge fail">BUG #1</span>
<span class="node-title">Validation du panier d'achat</span> <span
class="node-status fail">CASSÉ ✘</span></div>
</div>
<div class="vc-cascade-link"><span class="link-arrow">▼</span> <span
class="link-label">nouveau prompt de correction</span></div>
<div class="vc-cascade-node critical">
<div class="vc-node-header"><span class="node-badge critical">BUG #2</span>
<span class="node-title">Corruption des sessions DB</span> <span
class="node-status fail">CRITIQUE 💥</span></div>
</div>
</div>
</div>
<div class="vc-widget-footer danger"><span class="vc-widget-warning-icon">⚠️</span>
<span> Boucle sans fin : Chaque prompt répare une ligne et en fragilise dix. </span>
</div>
</div>
</div>
</div>
<details class="vc-faq-item">
<summary>
<span class="vc-faq-toggle-label">
<span class="vc-faq-toggle-prefix" aria-hidden="true">[ + ]</span>
<span class="vc-faq-toggle-prefix-open" aria-hidden="true">[ − ]</span>
<span class="vc-faq-toggle-text">Dérouler l'analyse technique</span>
<span class="vc-faq-toggle-text-open">Masquer l'analyse technique</span>
</span>
</summary>
<div class="vc-faq-content"><p> La progression n'est pas sécurisée à chaque étape par des tests,
dont le rôle est de vérifier que la fonctionnalité ajoutée hier fonctionne encore demain,
même après plusieurs couches de modifications. </p>
<p> Ce qui n'est pas testé de manière automatisée doit être vérifié à la main, encore et
encore. Cela crée un <strong>effet boule de neige</strong> où de plus en plus de travail
de validation est nécessaire à chaque itération. </p>
<p> L'IA n'aide pas : elle sait générer des tests unitaires, insuffisants pour assurer
une véritable protection contre les régressions. Elle ne sait pas générer de véritables
tests d'acceptation, capables de <strong>tester ce que vous vendez</strong>. </p>
<p> C'est une maladie encore très fréquente en entreprise, nous n'avons pas attendu l'IA
pour apprendre à la traiter. Il faut résorber la <strong>dette de test</strong> en
transformant vos attentes en véritable <strong>plan de test</strong>. </p>
<p> Sur les projets les plus complexes, c'est plus simple à dire qu'à faire. Le code n'a
simplement pas été prévu pour être testé. Il faut <strong>remanier</strong> le code pour
rendre les tests possibles, sans tests et donc sans garantie de ne rien casser. Cela
requiert une grande expertise, une main sûre et des techniques particulières. </p></div>
</details>
</article>
<article class="vc-pain-card vc-pain-drift">
<div class="vc-pain-card-header"><span class="vc-pain-badge warning"> <span
class="vc-pulse-dot"></span> ALERTE 02 · DÉRIVE CONTEXTUELLE </span> <span
class="vc-pain-code-ref">ERR_CONTEXT_DRIFT</span></div>
<div class="vc-pain-body">
<div class="vc-pain-content"><h3> Vous demandez une chose. <span class="gradient-text">L'IA comprend autre chose.</span>
</h3>
<p> Au fur et à mesure que le projet grossit, il devient de plus en plus difficile de donner
à l'IA tout le contexte dont elle a besoin. </p>
<p> Elle modifie le comportement à un endroit, mais pas ailleurs.<br/> Elle contredit déjà
la règle que vous aviez fixée 3 minutes plus tôt.<br/> Elle ne comprend ni vos attentes,
ni votre métier. </p>
<p> Elle ne questionne jamais : elle hallucine une solution hyper-complexe, sans jamais
douter. </p>
<p class="vc-pain-highlight"><strong> Vous avez l'impression de vous adresser à un stagiaire
cuistre, amnésique et négligent. Ce n'est pas l'aide que vous espériez. </strong></p>
</div>
<div class="vc-pain-visual">
<div class="vc-widget-terminal">
<div class="vc-widget-header">
<div class="vc-widget-dots"><span class="dot red"></span> <span
class="dot yellow"></span> <span class="dot green"></span></div>
<span class="vc-widget-title">prompt-inspector --diff</span> <span
class="vc-widget-pill warning">DÉRIVE: 85%</span></div>
<div class="vc-widget-body">
<div class="vc-diff-comparison">
<div class="vc-diff-box prompt-box">
<div class="vc-diff-box-title"><span>💬 VOTRE PROMPT INITIAL</span></div>
<p class="vc-diff-prompt-text"> « Ajoute simplement un bouton pour filtrer
la liste par date. » </p></div>
<div class="vc-diff-box result-box">
<div class="vc-diff-box-title">
<span>🤖 MODIFICATIONS APPLIQUÉES PAR L'IA</span></div>
<ul class="vc-diff-lines">
<li class="diff-line del">― Refonte arbitraire du routeur global</li>
<li class="diff-line add">+ Dépendance externe lourde & vulnérable
</li>
<li class="diff-line warn">! 18 fichiers modifiés pour 1 simple bouton
</li>
</ul>
</div>
</div>
</div>
<div class="vc-widget-footer warning"><span class="vc-widget-warning-icon">⚡</span>
<span>L'IA empile les rustines sans comprendre votre métier en profondeur.</span>
</div>
</div>
</div>
</div>
<details class="vc-faq-item">
<summary>
<span class="vc-faq-toggle-label">
<span class="vc-faq-toggle-prefix" aria-hidden="true">[ + ]</span>
<span class="vc-faq-toggle-prefix-open" aria-hidden="true">[ − ]</span>
<span class="vc-faq-toggle-text">Dérouler l'analyse technique</span>
<span class="vc-faq-toggle-text-open">Masquer l'analyse technique</span>
</span>
</summary>
<div class="vc-faq-content"><p> Comme nous, une IA possède une <strong>mémoire limitée</strong>.
Elle doit y faire rentrer le code, mais aussi vos prompts successifs.<br/> Lorsque tout n'y
rentre plus, l'IA comprime l'information. Elle perd en précision et oublie des éléments.
</p>
<p> Prendre une IA plus performante est une fuite en avant qui ne règle rien et coûte cher.
Il faut découper le projet en unités plus petites, ayant chacune un rôle précis :
l'interface graphique, la base de données, les règles métier, etc. C'est le travail de
<strong>l'architecte logiciel</strong>. </p>
<p> Dans un projet bien architecturé, l'IA sait appliquer les changements au bon endroit,
sans déborder ailleurs. Elle ne charge que le contexte nécessaire à sa tâche, qui rentre
mieux dans sa mémoire. </p>
<p> Ce découpage permet aussi de répartir les rôles : l'IA est excellente pour
certaines tâches, mais déçoit ailleurs. Certaines parties du projet requièrent un
développeur professionnel, tandis que l'IA vous permet de <strong>vibe-coder sereinement
le reste</strong>. </p></div>
</details>
</article>
<article class="vc-pain-card vc-pain-velocity">
<div class="vc-pain-card-header"><span class="vc-pain-badge alert"> <span
class="vc-pulse-dot"></span> ALERTE 03 · EFFONDREMENT DE VÉLOCITÉ </span> <span
class="vc-pain-code-ref">METRIC_VELOCITY_CRASH</span></div>
<div class="vc-pain-body">
<div class="vc-pain-content"><h3> La vitesse du début<br/> <span class="gradient-text">a disparu.</span>
</h3>
<p> Au début, une idée devient une fonctionnalité en quelques prompts. Quelques semaines ou
quelques mois plus tard, chaque changement demande de plus en plus de contexte. </p>
<p> Les prompts s'allongent. Les allers-retours se multiplient. Vous devez vérifier ce qui a
été modifié, tester que rien n'a cassé et recommencer. </p>
<p class="vc-pain-highlight"><strong> La génération de code est toujours rapide. Mais faire
évoluer le produit ne l'est plus. </strong></p></div>
<div class="vc-pain-visual">
<div class="vc-widget-terminal">
<div class="vc-widget-header">
<div class="vc-widget-dots"><span class="dot red"></span> <span
class="dot yellow"></span> <span class="dot green"></span></div>
<span class="vc-widget-title">telemetry --velocity-timeline</span> <span
class="vc-widget-pill alert">STATUT: BLOQUÉ</span></div>
<div class="vc-widget-body">
<div class="vc-telemetry-meters">
<div class="vc-meter-row">
<div class="vc-meter-header"><span class="vc-meter-label">🚀 Jour 1 (Prototype)</span>
<span class="vc-meter-stat ok"> 100% Vitesse · 1 prompt = 1 feature </span>
</div>
<div class="vc-meter-bar">
<div class="vc-meter-fill ok" style="width: 100%;"></div>
</div>
</div>
<div class="vc-meter-row">
<div class="vc-meter-header"><span class="vc-meter-label">⏳ Jour 30 (Croissance)</span>
<span class="vc-meter-stat mid"> 35% Vitesse · 1 prompt = 5 correctifs </span>
</div>
<div class="vc-meter-bar">
<div class="vc-meter-fill mid" style="width: 35%;"></div>
</div>
</div>
<div class="vc-meter-row">
<div class="vc-meter-header"><span class="vc-meter-label">🛑 Jour 90+ (Plafond de verre)</span>
<span class="vc-meter-stat low"> 5% Vitesse · Prompts de 3 pages & doutes </span>
</div>
<div class="vc-meter-bar">
<div class="vc-meter-fill low" style="width: 8%;"></div>
</div>
</div>
</div>
</div>
<div class="vc-widget-footer alert"><span class="vc-widget-warning-icon">📉</span> <span> Temps passé à itérer : 10% · Temps passé à vérifier et réparer : 90% </span>
</div>
</div>
</div>
</div>
<details class="vc-faq-item">
<summary>
<span class="vc-faq-toggle-label">
<span class="vc-faq-toggle-prefix" aria-hidden="true">[ + ]</span>
<span class="vc-faq-toggle-prefix-open" aria-hidden="true">[ − ]</span>
<span class="vc-faq-toggle-text">Dérouler l'analyse technique</span>
<span class="vc-faq-toggle-text-open">Masquer l'analyse technique</span>
</span>
</summary>
<div class="vc-faq-content">
<p> Sans instructions précises, l'IA ne nettoie jamais le code :
elle produit de nouveaux embranchements à chaque demande. La complexité du projet monte en
flèche, sans jamais diminuer.<br/>Plus la complexité augmente, plus chaque modification
demande d'effort pour être comprise, vérifiée et sécurisée.<br/> Cela vaut autant pour les
humains que pour les IA. </p>
<p> Il faut nettoyer le code, l'organiser, le structurer : c'est le
<strong>refactoring</strong>. Correctement guidée, l'IA peut faire une partie du
travail, mais l'expertise humaine reste nécessaire car ultimement le code est fait pour
que l'humain puisse valider le fonctionnement du logiciel. Une IA n'est pas responsable
devant un client ou un tribunal. <strong>Vous, oui.</strong></p>
<p> Maîtriser la complexité permet de conserver la <strong>capacité à changer
rapidement</strong>. Le marché va bouger, <strong>le produit doit changer avec
lui</strong>, en est-il capable ? </p></div>
</details>
</article>
</div>
<div class="vc-pain-conclusion">
<div class="vc-pain-conclusion-header">
<div aria-hidden="true" class="vc-pain-conclusion-mark">!</div>
<span class="vc-eyebrow">Le résultat</span>
</div>
<div class="vc-pain-conclusion-content">
<h2> Vous n'avez plus peur de coder. <span class="gradient-text">Vous avez peur de changer.</span>
</h2>
<p> Vous savez que votre application fonctionne. </p>
<p> Vous ne savez pas si ça sera toujours le cas après un autre prompt. </p>
<p> Et c'est précisément à ce moment-là que l'avantage initial du vibe coding commence à
disparaître. </p>
</div>
</div>
</div>
</section>
<section class="vc-section vc-section-alt" id="approche">
<div class="vc-container">
<div class="vc-section-header"><span class="vc-eyebrow"
style="color: var(--primary-bright); border-color: var(--primary-bright); background: rgba(56, 239, 125, 0.12);"> Mon Approche </span>
<h2> Le problème n'est pas le Vibe Coding.<br/> <span
class="gradient-text">C'est l'absence de méthode.</span></h2>
<p> Vous n'avez pas besoin d'arrêter de coder avec l'IA.<br/> Vous avez besoin que votre logiciel puisse
continuer à en profiter à mesure qu'il grandit. </p></div>
<div class="vc-grid-3">
<article class="vc-card vc-approach-card">
<div class="vc-approach-header"><span class="vc-pain-badge warning"> <span
class="vc-pulse-dot"></span> PILIER 01 · COHABITATION </span></div>
<h3>Ne pas opposer Vibe Coding & Dev</h3>
<p> L'IA excelle pour prototyper rapidement, l'ingénierie logicielle pour garantir la
robustesse. </p>
<p class="vc-approach-highlight"><strong>Vibe-coder là où c'est pertinent</strong> : vous gardez l'IA sur les tâches
où elle est efficace, pendant que je consolide les briques qui demandent davantage de maîtrise. </p></article>
<article class="vc-card vc-approach-card">
<div class="vc-approach-header"><span class="vc-pain-badge"
style="color: #93c5fd; background: rgba(59, 130, 246, 0.2); border-color: var(--accent-blue);"> <span
class="vc-pulse-dot"></span> PILIER 02 · ANTICIPATION </span></div>
<h3>Prévenir plutôt que guérir</h3>
<p> Attendre le mur technique coûte cher en refontes. La maintenabilité s'anticipe à chaque étape de
croissance. </p>
<p class="vc-approach-highlight"><strong>Faciliter la reprise :</strong> Je pose les bonnes
pratiques (modularité, découpage du projet, documentation) pour garder un code propre et facilement
transmissible. </p></article>
<article class="vc-card vc-approach-card">
<div class="vc-approach-header"><span class="vc-pain-badge"
style="color: #86efac; background: rgba(34, 197, 94, 0.2); border-color: var(--primary-bright);"> <span
class="vc-pulse-dot"></span> PILIER 03 · PRAGMATISME </span></div>
<h3>Ne pas tout recoder, cibler l'essentiel</h3>
<p> Inutile de tout jeter. Votre prototype a de la valeur. Je renforce progressivement ce qui
devient critique à mesure que votre produit grandit. </p>
<p class="vc-approach-highlight"><strong>Intervention ciblée :</strong> Je sécurise les
flux critiques avec des tests et ne refactorise que les briques sensibles (sécurité,
robustesse). </p></article>
</div>
</div>
</section>
<section class="vc-section vc-proof" id="pourquoi-moi">
<div class="vc-container">
<div class="vc-proof-content">
<span class="vc-eyebrow">Pourquoi moi ?</span>
<h2>
12 ans à travailler sur des logiciels
<span class="gradient-text">difficiles à faire évoluer.</span>
</h2>
<p>
Mon métier consiste à intervenir quand un logiciel est devenu hors de contrôle.
</p>
<p>
Applications sans tests, code abscons, fonctionnalités qui se chevauchent,
architecture à reprendre : une bonne partie de mon activité consiste à
reprendre l'existant, le sécuriser et le simplifier <strong>sans tout casser ni arrêter la production</strong>.
</p>
<p>
J'interviens notamment sur des audits, des refactorings et des évolutions architecturales
de logiciels complexes.
</p>
<p>
Aujourd'hui, je mets cette expérience au service de la prévention :
<strong>agir avant que le Vibe Coding ne transforme votre application en logiciel legacy.</strong>
</p>
<p>
J'interviens notamment sur les applications développées avec
<strong>Lovable, Cursor, Claude Code, ChatGPT et autres outils de développement assisté par IA</strong>,
lorsqu'elles commencent à rencontrer les contraintes de la production.
</p>
<p>
<a href="/portfolio">
Voir des exemples de projets et d'interventions →
</a>
</p>
</div>
</div>
</section>
<section class="vc-section vc-section-alt" id="accompagnement">
<div class="vc-container">
<div class="vc-section-header">
<h2> Votre application fonctionne aujourd'hui. <br/>
<span class="gradient-text"> Assurons-nous qu'elle puisse encore évoluer demain. </span>
</h2>
<p>Une intervention adaptée à chaque palier de maturité de votre application.</p>
</div>
<div class="vc-grid-3">
<div class="vc-card">
<div class="vc-card-tier-img-wrapper"><img alt="Évolution Vibe Coder - Niveau 1 Early Stage"
class="vc-card-tier-img"
src="/resources/images/vibe-coder-evolution-1.png"></div>
<div style="margin-bottom: 0.75rem;">
<span class="vc-card-tag" style="color: var(--accent-gold); border-color: var(--accent-gold);">
Niveau 1 · Early stage
</span>
</div>
<h3>Vibe coder avec méthode</h3>
<p>
Un échange de 30 min pour parler de votre projet, de vos choix techniques
et de votre façon de travailler avec l'IA.
Je vous aide à savoir <strong>quoi laisser à l'IA, quoi surveiller
et quand faire intervenir un développeur.</strong>
</p>
<p style="margin-top: 0.85rem; color: var(--text-muted); font-size: 0.95rem;">
<strong style="color: var(--text-main);">Objectif :</strong>
avancer vite aujourd'hui sans créer les problèmes qui vous ralentiront demain.
</p>
</div>
<div class="vc-card">
<div class="vc-card-tier-img-wrapper"><img alt="Évolution Vibe Coder - Niveau 2 Product-Market Fit"
class="vc-card-tier-img"
src="/resources/images/vibe-coder-evolution-2.png"></div>
<div style="margin-bottom: 0.75rem;">
<span class="vc-card-tag" style="color: var(--primary-bright); border-color: var(--primary-bright);">
Niveau 2 · Product-Market Fit
</span>
</div>
<h3>Refactorer sans tout refaire</h3>
<p>
Votre application rencontre son public mais le code devient difficile
à faire évoluer. J'identifie les quelques briques qui méritent d'être
reprises et <strong>interviens là où le refactoring apporte le plus
de valeur</strong>, sans toucher au reste.
</p>
<p style="margin-top: 0.85rem; color: var(--text-muted); font-size: 0.95rem;">
<strong style="color: var(--text-main);">Objectif :</strong>
sécuriser ce qui devient critique, <strong style="color: var(--text-main);">
sans investir dans une refonte complète</strong> alors que votre produit est encore
en phase de validation.
</p>
</div>
<div class="vc-card">
<div class="vc-card-tier-img-wrapper"><img alt="Évolution Vibe Coder - Niveau 3 Scale"
class="vc-card-tier-img"
src="/resources/images/vibe-coder-evolution-3.png"></div>
<div style="margin-bottom: 0.75rem;">
<span class="vc-card-tag" style="color: var(--accent-blue); border-color: var(--accent-blue);">
Niveau 3 · Scale
</span>
</div>
<h3>Un copilote technique</h3>
<p>
Votre produit grandit et les décisions techniques demandent de l'expérience.
J'interviens comme <strong>référent technique à la demande</strong> :
architecture, choix techniques, recrutement ou évolutions structurantes.
</p>
<p style="margin-top: 0.85rem; color: var(--text-muted); font-size: 0.95rem;">
<strong style="color: var(--text-main);">Objectif :</strong>
disposer d'une expertise technique senior quand vous en avez besoin,
<strong style="color: var(--text-main);">sans avoir à intégrer un CTO à votre équipe.</strong>
</p>
</div>
</div>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem;"><a
class="vc-btn vc-btn-primary"
href="https://calendar.proton.me/u/0/bookings#_YgVgZFZVzgt-lIakAj8VHFE-XuHfQ3j-m2WI2LYhO0="
rel="noopener"
style="font-size: 1.05rem; padding: 0.95rem 1.8rem;"
target="_blank">
<span>📅 Réserver mon appel gratuit (30 min)</span> </a>
</div>
</div>
</section>
</main>
<footer class="vc-footer">
<div class="vc-container vc-footer-content">
<div>
<p style="margin-bottom: 0; color: var(--text-dim);">
© 2026 <strong>Atelier Logiciel Sandré</strong> — Artisanat du développement.
</p>
</div>
<ul class="vc-footer-links">
<li><a href="/mentions_legales.html">⚖️ Mentions légales</a></li>
<li><a href="/contact.html">📧 Contact</a></li>
</ul>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const navToggle = document.querySelector('.vc-nav-toggle');
const navLinks = document.querySelector('.vc-nav-links');
if (navToggle && navLinks) {
navToggle.addEventListener('click', function(e) {
e.stopPropagation();
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
navToggle.setAttribute('aria-expanded', String(!isExpanded));
navToggle.classList.toggle('active');
navLinks.classList.toggle('active');
});
// Close mobile menu when clicking a link
navLinks.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function() {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
navLinks.classList.remove('active');
});
});
// Close when clicking outside
document.addEventListener('click', function(e) {
if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
navLinks.classList.remove('active');
}
});
// Close on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
navLinks.classList.remove('active');
}
});
}
});
</script>
</body>
</html>