Comment j'ai codé mon portfolio en bureau macOS
Par Enzo Mercier · 27 septembre 2026 · 5 min de lecture
Un CV tient sur une page et ressemble à tous les autres. Je voulais qu'on puisse explorer mon parcours plutôt que le lire. D'où l'idée : un site qui ressemble à l'écran d'un Mac. Chaque icône est une étape de mon parcours, chaque fenêtre raconte une expérience.
L'idée : un bureau qu'on visite
Sur ordinateur, enzomercier.fr s'ouvre sur un bureau macOS : barre de menus en haut, dock en bas, icônes sur le fond d'écran. Bachelor BIBA, Foncia, Decathlon, Bailio, ByNoZen… chaque icône ouvre une fenêtre avec le détail de l'expérience. On peut déplacer les fenêtres, les agrandir, ouvrir le Finder (« À propos de moi »), les Notes (mon CV) ou le Calendrier.
Sur téléphone, le même site devient un iPhone : barre d'état, widget avec mon nom, grille d'applications sur deux pages qu'on fait défiler au doigt, dock à quatre apps, et des fiches qu'on ferme en les glissant vers le bas. La plupart des visiteurs arrivent depuis leur téléphone : il fallait que ce soit naturel, pas une version réduite du bureau.
Les outils
- React et TypeScript pour l'interface : chaque fenêtre, le dock, les alertes sont des composants.
- Vite pour construire le site, et Tailwind CSS pour une partie des styles.
- Vercel pour l'hébergement, avec un nom de domaine réservé chez OVH.
- Des outils d'IA pour aller plus vite sur le code et le détourage des photos, un peu comme un stagiaire très rapide qu'il faut toujours relire.
Les détails qui font « vrai Mac »
- Les fenêtres ne bougent qu'au-delà de quelques pixels, pour qu'un simple clic ne les déplace jamais.
- Le calendrier du dock affiche le vrai jour et la vraie date.
- Clic droit, Spotlight, centre de contrôle avec luminosité et volume, menu Pomme… presque tout répond.
- Les polices (Hurricane pour mon nom, Cinzel, Poppins) sont hébergées sur le site : aucune requête vers Google Fonts.
Quelques easter eggs
Un portfolio doit aussi donner envie de fouiller. Les applications Word, Excel ou PowerPoint répondent avec humour, la corbeille n'aime pas qu'on insiste, et un certain code bien connu des joueurs déclenche une petite surprise. Je n'en dis pas plus.
Rapide, léger et respectueux
- Images optimisées : chaque photo existe en plusieurs tailles, en WebP et en JPEG ; le téléphone charge la plus petite qui suffit.
- RGPD : aucun cookie publicitaire. La mesure d'audience (anonyme) ne démarre qu'après accord, et le choix est modifiable à tout moment.
- Sécurité : en-têtes de sécurité stricts, aucun script externe.
- Compatibilité : le site fonctionne sur les navigateurs de 2020 ; sans JavaScript, il affiche une version texte complète.
Être trouvé : Google et les IA
Un bureau interactif, c'est joli, mais un moteur de recherche lit du texte. Chaque page contient donc aussi une version texte de mon parcours, invisible à l'écran mais lisible par Google et les assistants IA. J'y ai ajouté des données structurées (qui je suis, où je travaille, mon école, ma startup), un plan du site, un fichier llms.txt qui résume mon profil pour les IA, et un envoi automatique des mises à jour à Bing.
Ce que ça m'a appris
Ce projet m'a appris à penser comme un utilisateur avant de penser comme un développeur : le plus dur n'était pas le code, mais les dizaines de petits réglages pour que tout paraisse naturel, sur un grand écran comme sur un téléphone. C'est la même logique que dans l'immobilier ou avec Bailio : partir de ce que la personne en face vit vraiment.
Envie d'en parler ? e.mercier2@mbs-education.com · LinkedIn · GitHub