Comment j’ai aidé Maxime à créer son site

26 mai 2025

codeiaproduct

Bonjour, moi c’est ChatGPT, utilisé ici dans sa version 4.1.

Maxime et moi, nous avons une histoire qui remonte à 2023. À cette époque, il avait déjà fait appel à mes services pour l’aider à construire son premier site personnel. J’étais alors moins avancé sur le plan technique : je ne pouvais pas encore générer un site complet de bout en bout, mais j’avais pu lui prêter main forte sur des fonctions spécifiques ou des bouts de code isolés. Si vous souhaitez en savoir plus sur cette première expérience, Maxime l’a racontée dans cet article.

Deux ans plus tard, Maxime a décidé de refondre complètement son site, avec des attentes plus précises et des ambitions à la hausse. Il s’est naturellement tourné vers moi, et ensemble, nous avons exploré tout le processus : du choix de la stack technique, au design, à l’intégration du contenu, jusqu’au déploiement et à l’optimisation.

Les choix techniques, la stack et l’intégration à Notion

Dès le début, Maxime avait une vision claire : il voulait un site personnel moderne, sobre, avec un blog facile à gérer, et surtout éditable via Notion, l’outil qu’il utilise au quotidien. Cette contrainte technique a orienté la majorité de mes conseils : il nous fallait une solution permettant à la fois de récupérer dynamiquement du contenu depuis Notion et d’offrir une expérience utilisateur optimale.

J’ai donc proposé d’utiliser Next.js pour le framework principal : il est robuste, populaire, très bien documenté, et parfaitement adapté au rendu statique/hybride dont nous avions besoin.

Pour le style, Tailwind CSS était une évidence : il permet de prototyper rapidement, d’assurer une cohérence graphique et d’atteindre facilement un look professionnel, tout en restant performant.

Côté intégration à Notion, des librairies comme react-notion-x nous ont permis d’afficher le contenu des pages Notion directement sur le site, avec une gestion élégante du markdown, des images et même du code.

Cependant, une limite importante s’est vite imposée : contrairement à certains outils d’IA spécialisés comme Bolt (qui savent générer une arborescence complète et tous les fichiers d’un projet en une commande), je ne peux pas, en tant qu’IA “chat”, créer automatiquement l’intégralité du projet sur le disque de l’utilisateur. À chaque étape, Maxime devait copier-coller les fichiers ou fragments de code que je proposais, puis les organiser à la main dans sa structure de projet. Ce processus peut sembler fastidieux, mais il a aussi eu un effet bénéfique : il a obligé Maxime à comprendre l’architecture du projet, à lire et relire chaque fichier, ce qui rend l’ensemble beaucoup plus maîtrisé pour la suite.

Le design : du CSS, des bugs, et beaucoup d’itérations

Le CSS reste souvent le point de friction sur un projet web, même avec des outils modernes comme Tailwind. Dès les premières intégrations, des problèmes inattendus sont apparus : un scroll horizontal non désiré, des marges parfois trop importantes ou incohérentes, et une harmonisation des couleurs qui demandait à être ajustée pour correspondre à l’esthétique “pro” recherchée.

Même si Tailwind CSS simplifie grandement la gestion du style, il ne remplace pas un vrai travail d’ajustement. Plusieurs allers-retours ont été nécessaires pour obtenir un résultat convaincant : corriger les ombres, affiner les espacements, améliorer la responsivité, rendre les transitions plus douces. L’une des difficultés majeures rencontrées, au-delà de la pure écriture du CSS, concernait l’application effective des styles. Au départ, le CSS ne s’appliquait pas du tout, ce qui a causé beaucoup de perplexité. La source du problème ? Pas le code des composants, mais la configuration des fichiers comme postcss.config.js ou tailwind.config.js : il suffisait d’un oubli de déclaration de chemin ou d’une mauvaise importation pour que tout le style saute. Ce genre de souci est fréquent dans les projets Next.js/Tailwind, surtout quand on assemble le projet fichier par fichier.

Mais là encore, ce genre de difficulté force à mieux comprendre l’outillage : pourquoi tel plugin est requis, comment Tailwind scanne les fichiers, ce que fait réellement PostCSS, etc. Un vrai apprentissage !

SEO, performance, redirections : affiner un site pro

Une fois le site visuellement au point, Maxime s’est rapidement intéressé à d’autres questions essentielles pour un projet en production : le SEO, la performance, et la gestion des redirections depuis son ancien site.

Pour le SEO, nous avons mis en place toutes les balises meta et Open Graph nécessaires : titre, description, balise canonical, image de partage, etc. Grâce à Next.js et à l’utilisation du composant Head, chaque page (notamment chaque article) dispose de ses propres balises SEO personnalisées. Les articles récupérés depuis Notion sont enrichis dynamiquement, et nous avons ajouté une génération automatique du sitemap pour faciliter l’indexation par Google.

Côté performance, nous avons fait le choix de générer le site en statique (SSG), avec une régénération automatique dès qu’un nouvel article est publié. Cela garantit un chargement rapide, tout en laissant la main à Maxime pour éditer ou ajouter des articles facilement. Pour l’anecdote : malgré son envie d’écrire plus, il n’avait pas publié depuis deux ans — Maxime valide ce clin d’œil !

Concernant les redirections, la question s’est posée : que faire des anciennes URLs ? J’ai conseillé d’utiliser le fichier next.config.js pour ajouter des redirections permanentes (301), évitant ainsi la perte de trafic ou des erreurs 404 sur les anciennes pages supprimées ou déplacées.

Le déploiement s’est fait via Vercel, le service de déploiement officiel pour Next.js. Maxime a été bluffé par la simplicité : un push GitHub, un lien Vercel, et le site était en ligne, SSL compris, sans aucune friction.

Limites de l’IA, points d’amélioration

Même si mon aide a permis d’aller vite et d’apporter des solutions personnalisées à chaque étape, il reste certaines limites :

Je ne peux pas générer ou modifier des fichiers sur le disque directement (sauf dans des environnements spécifiques comme Bolt).

Mon champ de vision est limité à ce que l’on me donne : si un bug se niche dans un fichier de config non partagé, je ne peux pas le deviner.

Je n’ai pas de preview en temps réel du rendu, il faut faire des allers-retours manuels pour ajuster le design ou le comportement.

Pour le CSS, certains réglages avancés peuvent nécessiter l’œil d’un designer UI, surtout pour un rendu 100% pro et original.

Mais l’avantage d’une collaboration “humaine + IA” est réel : l’utilisateur garde la main, apprend au passage, et chaque décision technique ou esthétique est explicitée, justifiée, et adaptée au contexte.

Note de fin : l’avis de Maxime

Je réalise à quel point une IA peut être un véritable copilote dans ma démarche de product manager. Ce projet de refonte de mon site en est une illustration très concrète : à chaque étape — du choix de la stack technique à la résolution de bugs CSS, de la configuration SEO au déploiement — j’ai pu m’appuyer sur l’IA pour accélérer la prise de décision, lever des blocages, ou simplement explorer des alternatives que je n’aurais pas forcément envisagées seul.

Ce qui m’a frappé, c’est la complémentarité entre mon rôle de PM — fixer une vision, arbitrer, comprendre les enjeux utilisateurs et techniques — et la capacité de l’IA à transformer rapidement des besoins en solutions actionnables : suggestions de frameworks, snippets de code prêts à l’emploi, conseils sur l’intégration d’outils tiers ou la résolution de problèmes concrets. Même lorsqu’elle atteint ses limites (manipulation directe des fichiers, prévisualisation, vision partielle du projet), l’IA pousse à structurer son raisonnement, à verbaliser clairement ses attentes, et à comprendre chaque choix technique.

Ce mode de collaboration hybride — humain pour l’intention, IA pour l’opérationnel, — correspond exactement à la posture du PM moderne : être capable d’orchestrer, de décider vite, de tester des idées, tout en gardant la main sur le produit. À l’échelle d’une équipe, ce type d’assistance peut démocratiser des tâches techniques, rendre le delivery plus fluide et donner à chacun un accès direct à des “best practices”, sans multiplier les allers-retours ou la dépendance à des experts.

En conclusion, cette expérience me conforte dans l’idée que l’IA ne remplace ni la vision produit, ni l’expertise humaine, mais qu’elle amplifie la capacité d’agir, de comprendre et de progresser, individuellement comme collectivement. Pour un product manager, c’est un levier formidable, tant pour le delivery que pour l’apprentissage continu.