Le nouveau site est en ligne. Il m’a fallu une semaine de refonte avec l’IA, et quelques changements de cap en chemin. Voici la version vidéo, ou lisez la suite pour l’histoire en bref.
Play videoUn peu de contexte : j’ai été chef de produit pendant sept ans, et je ne sais pas vraiment coder. Mais depuis trois ans, je construis des projets avec l’IA, et ce site en fait partie.
Ce qui ne fonctionnait pas
L’ancien site était en ligne depuis plus d’un an. Je l’aimais encore, mais certaines choses me gênaient :
- Le hero. J’en avais assez de l’effet d’arrière-plan. Je voulais apparaître moi-même dans le design, avec plus de personnalité.
- Les projets. Un mur de projets et une section de projets phares, mais il fallait quand même cliquer pour en apprendre quoi que ce soit, et le chargement n’était pas très beau.
- Les services. Ils listaient mes compétences, mais un client sans bagage technique pouvait encore se demander ce que je pouvais concrètement faire pour lui.
- Ce qui manquait. Je voulais un blog et une inscription par e-mail.
Le plan : fixer l’esthétique, repenser les projets et les services, puis ajouter les nouvelles fonctionnalités.
Trouver l’esthétique
J’ai commencé par rassembler des références : des sites, des images, des mises en page, tout ce qui attirait mon œil. Je voulais notamment essayer un personnage réaliste. Beaucoup de sites utilisent des personnages 3D façon dessin animé ; je voulais voir ce que l’IA savait faire d’autre.
J’ai testé plusieurs pistes : une version de moi en 3D façon cartoon, moi assis dans l’eau, moi sur un fond uni, une vue plongeante entouré de miroirs. Les miroirs rendaient très bien en image fixe, mais tous ces reflets auraient rendu le personnage difficile à garder cohérent une fois animé.
J’ai retenu une vraie personne debout sur des nuages, une scène qui ne pourrait pas exister.
Animer une image fixe
J’ai envoyé la piste à Claude et nous avons découpé la scène en calques : des nuages en mouvement à l’arrière, JACK MIAO au milieu, moi devant, la navigation et le texte par-dessus.
Pour le personnage, l’idée était de tourner des clips sur fond vert où je regarde en haut, en bas, à gauche et à droite, puis de basculer de l’un à l’autre selon la position de la souris, pour donner l’impression que je suis votre curseur des yeux. Le fond vert permet d’insérer proprement la personne entre les autres calques.
Je voulais aussi une transition en sortie du hero, comme si l’on traversait les nuages pour ressortir en dessous. J’ai d’abord essayé de modéliser les nuages dans Blender, mais après plusieurs essais, ils restaient loin de la piste. Plutôt que de courir après un rendu de nuages payant, je suis passé à la vidéo.
Claude a établi la liste des éléments nécessaires et rédigé des prompts vidéo à partir du prompt de la piste d’origine. J’ai connecté Claude à Higgsfield via son API, généré des clips de test et, une fois la direction validée, produit les versions finales en 4K. Puis beaucoup d’allers-retours : corriger les défauts, placer les clips dans la page, vérifier, régénérer.
Les projets : une chute dans le ciel
C’est la section qui m’a demandé le plus d’essais. Un fond blanc avec les projets sur un cylindre en rotation. Un ciel bleu. Des nuages en mouvement. Rien ne sonnait juste.
Le déclic est venu d’une image Pinterest : un parachutiste en pleine chute, au milieu d’un cadre. J’avais mon histoire : en haut, je suis debout sur les nuages ; vous faites défiler la page à travers eux ; et dans les projets, une silhouette tombe du ciel.
Même méthode : prompts avec Claude, images avec Higgsfield, ajustements dans la page. J’ai aussi réduit la liste à une petite sélection.
Une partie du plan n’a pas vu le jour. Je comptais supprimer les pages de détail des projets ; je les ai finalement gardées. Moins de projets sur la page, mais vous pouvez toujours cliquer pour regarder de plus près.
Les services : le dire simplement
L’objectif était simple : montrer clairement en quoi je peux aider. Il y a déjà beaucoup de mouvement ailleurs, alors ici, les services sont simplement écrits en toutes lettres.
Pour prolonger l’histoire, j’ai généré une version de moi suspendue à des ballons, que j’ai animée le long d’un tracé derrière le texte. Les mots expliquent ; le personnage relie la section au reste.
Le blog, l’inscription et le dernier changement de cap
Le blog et l’inscription par e-mail se sont faits sans accroc, en comparaison. Claude a construit les deux, et vous êtes en train d’en lire le résultat.
C’est sur le pied de page que j’ai changé de direction une dernière fois. Ma première idée : une touche de clavier flottant dans le ciel, qui ouvre le formulaire de demande de projet. Codée, elle n’avait pas le bon rendu. Modélisée dans Blender, elle s’en approchait, sans être tout à fait juste.
Je l’ai donc remplacée par quelque chose de plus facile à réussir : une fenêtre flottant dans le ciel, et derrière, moi au travail. La boucle était bouclée : debout sur les nuages, en chute dans le ciel, suspendu à des ballons, et enfin une vue sur mon lieu de travail.
En coulisses, j’ai aussi renforcé la protection contre les bots, mis à jour les endpoints de l’API et changé le mode de déploiement du site. Vous ne les verrez pas, alors je garde ça pour une autre fois.
Ce que j’en retiens
Certaines idées sont allées jusqu’au bout. Les nuages Blender, le mur de projets rotatif et la touche de clavier, non — et chacune a d’abord connu plusieurs essais. Parfois, j’ai changé ma façon de construire ; parfois, j’ai changé l’idée elle-même.
C’était ça, le vrai processus : rendre une idée assez concrète pour pouvoir la regarder, voir comment elle fonctionne, et décider de continuer ou d’essayer autre chose. L’IA rend cette boucle assez rapide pour la parcourir de nombreuses fois en une semaine.
Faites défiler le site depuis le haut, et si vous voulez voir ce que je construirai ensuite, abonnez-vous ci-dessous.
