Comment ce site
a été construit.

Ce que tu as lu sur la page principale, c'est le résumé. Ici, c'est le détail. Les outils, le process, les choix. Tu peux le copier, l'améliorer, faire mieux. C'est le but.

ILes outils, en clair

Avant de parler de "comment", parlons de "avec quoi". Voici exactement ce que j'ai utilisé pour construire ce site, ce que ça coûte, et à quoi ça sert.

IIC'est quoi, un "skill" Claude ?

Un skill est une petite routine réutilisable que tu écris une fois et que Claude exécute à la demande. C'est comme une fonction réutilisable — sauf qu'au lieu d'écrire du code, tu écris des instructions en langage naturel.

Exemples de skills que j'utilise :

• Audit visuel : « ouvre le site dans Chrome, prends un screenshot, vérifie que rien ne dépasse, rapporte ce qui cloche ».
• Briefing de contexte : « lis tous les fichiers du projet, résume l'état actuel en moins de 200 mots ».
• Génération de tests : « pour ce composant, écris les cas de test critiques et lance-les ».

Au lieu de répéter 50 fois la même demande à Claude, tu lui donnes un nom court (ex : /audit) et il sait exactement quoi faire. C'est ça qui transforme l'IA d'un assistant en un véritable workflow.

IIILa conception des personnages

Le site met en scène plusieurs personnages pixel-art dans un canvas HTML5 : les deux héros — Karim et Anass (moi) — et les trois boss qu'ils affrontent. Voici le process exact pour les concevoir.

Étape 1 — Les références visuelles

J'ai demandé à ChatGPT de me générer une référence pour chaque acteur du mini-jeu : les deux héros (Karim et Anass) et les boss (les obstacles entrepreneuriaux). Briefs courts, style gaming pixel-art, ambiance violette dark.

Chaque image a coûté 0$ (ChatGPT version gratuite) et a pris quelques secondes à générer. Le boss Technologie a été imaginé par extension du même style — sans référence générée, parce que le pattern visuel était déjà clair.

Étape 2 — La transposition en code

Les images générées par ChatGPT ne sont pas utilisables telles quelles (raster, statiques, trop grandes). J'ai briefé Claude Code avec ces images comme références et lui ai demandé de recréer chaque personnage directement en pixel-art dans un canvas — pixel par pixel, en tant que fonctions de dessin paramétriques (_drawAnass, _drawKarim, _drawBoss).

Le résultat : des personnages dynamiques. Tout en moins de 200 lignes de code par personnage.

IVL'inspection du site de Karim

Avant de commencer à coder quoi que ce soit, j'ai passé environ 30 minutes sur le site et le contenu de Megasuss Tech : LinkedIn, le post de recrutement, les références aux campagnes (porte-monnaies à GITEX 2026, faux billets du Mondial). L'objectif :

• Récupérer la palette graphique — la couleur violette principale (#7B4FE0) vient directement de l'identité Megasuss.
• Comprendre la voix — Karim écrit en tu, direct, avec quelques mots de Darija. Le site reproduit exactement ce registre (si tu n'as pas trouvé la seule phrase Darija qui existe sur le site, reviens le tester pour la chercher).
• Capturer les références concrètes — les "500 porte-monnaies", les "8,6M de vues", les "5,75M MAD" sont des faits que j'ai relus dans son post avant de les intégrer dans la narration.
• Saisir le métier — Megasuss Tech fait du neuromarketing. Le site lui-même applique ces principes : capture d'attention, dopamine via le mini-jeu, surprise via les cartes qui se remplissent en direct, etc.

Cette phase ne se code pas. Elle se comprend. C'est le travail le plus important — et celui que l'IA ne peut pas faire à ta place.

VLe process, étape par étape

Une fois l'inspection faite, voici l'ordre exact dans lequel j'ai construit le site, sur ~3 jours. À reproduire à l'identique si tu débutes.

1. Définir l'idée maîtresse

   Avant d'ouvrir VSCode, j'ai imaginé l'idée centrale dans ma tête : « un site qui n'est pas un CV, qui est lui-même la preuve de mes compétences ». Pas besoin de l'écrire — il suffit qu'elle soit claire pour toi. C'est de cette phrase que tout le reste découle naturellement : le mini-jeu, les cartes, la révélation.

2. Brouillonner le scénario

   J'ai posé un squelette : 6 scènes à enchaîner — jeu → miroir → méthode → révélation → candidat → close. Une phrase d'objectif par scène. C'est ce que j'ai donné à Claude Code en première instruction.

   Mais le squelette n'est qu'un point de départ. L'essentiel des idées vient en cours de route : un détail visuel qui appelle un son, un dialogue qui réclame un timing différent, un boss qui mérite une intro plus dramatique, une bulle de dialogue qu'on garde parce qu'elle fait sourire. La section « La Construction » du site (le stack, les coûts) et cette page de making-of, par exemple, ne faisaient pas partie du squelette initial — elles sont venues plus tard, quand le projet s'est mis à respirer. Le bon réflexe : noter, tester, garder ce qui sert l'idée centrale — jeter le reste sans regret.

3. Mettre en place les outils

   Installer VSCode, créer un dossier vide, ouvrir un terminal, lancer claude. Pas de boilerplate, pas de framework. Juste un fichier index.html à zéro.

4. Brancher les skills et les MCP servers

   Au-delà des instructions écrites, Claude Code peut être étendu par des skills (voir section II) et des MCP servers — « Model Context Protocol », des extensions qui lui donnent de nouvelles capacités. Le branchement clé pour ce projet : Chrome MCP / Playwright MCP, qui permet à Claude d'ouvrir un navigateur, prendre des screenshots et inspecter le DOM. Il peut alors itérer sans moi — pour les bugs visuels évidents, je préfère encore vérifier moi-même.

5. Construire scène par scène

   J'ai fait Claude Code travailler une scène à la fois. « Construis le hero avec le mini-jeu canvas, voici les sprites de référence en image, ambiance dark, palette violette ». À chaque itération : je vérifie le rendu — parfois moi-même dans Chrome, parfois via le MCP qui laisse Claude prendre un screenshot et l'inspecter. Puis je raffine. Pas de big bang.

6. Écrire les instructions persistantes

   J'ai créé un fichier CLAUDE.md à la racine du projet avec les règles que l'IA doit toujours respecter : vanilla seulement, commentaires courts uniquement quand le pourquoi n'est pas évident, pas de framework, conserver la palette de couleurs définie. C'est ce qui empêche l'IA de dériver entre deux sessions.

7. Itérer sur les détails

   Chaque interaction est une mini-décision. Je teste, j'écoute, je regarde, je corrige. C'est cette phase qui transforme un site fonctionnel en un site qui te marque.

8. Déployer

   Push sur GitHub, branche le repo à Cloudflare Pages, c'est en ligne. Achat du domaine .pro chez Hostinger, branchement DNS — 5 minutes. Total : moins de 30 minutes pour passer de "fini en local" à "accessible publiquement".

VICe que j'ai dirigé moi-même

L'IA a écrit ~95% des lignes de code. Mais les décisions suivantes, je les ai prises seul — et elles sont ce qui rend le site singulier :

• L'idée centrale (« le site est la preuve »).
• Le flow narratif (l'ordre des scènes, leur fonction émotionnelle).
• Le timing (combien de millisecondes tient une carte, quand le boss apparaît, quand le son tombe).
• Le casting des références (lesquels des faits du post de Karim retenir, comment les rejouer).

Le code, c'est de l'exécution. Le reste, c'est du goût.

Site construit en ~3 jours · Anass R. · 2026