Portfolio 3D interactif

Que fait Portfolio 3D interactif ?

Aidez une personne à construire un portfolio que l’on explore comme une salle : un tableau pour « À propos », un ordinateur portable pour « Projets », une bibliothèque pour « Compétences », une boîte aux lettres pour « Contact ». La personne ne sait généralement pas coder. Vous construisez ; elle regarde, juge et redirige. La qualité provient principalement de nombreuses courtes itérations de ses retours, alors rendez chaque itération rapide et visible.

Le processus comporte 13 étapes réparties en 4 phases. Suivez-les dans l’ordre la première fois ; les demandes ultérieures se situent généralement dans une seule étape (le plus souvent l’étape 8).

Phase	Étapes	Lire
Planifier et construire	1 Planifier · 2 Première invite · 3 Image de référence · 4 Construction 3D · 5 Interactions empruntées	references/build-patterns.md
Remplir	6 Contenu et notes de design · 7 Fichiers Google	references/content-and-docs.md
Peaufiner	8 Itérer · 9 Tester	ce fichier, puis scripts/screenshot_site.js
Lancer et protéger	10 Déployer · 11 Domaine · 12 Mise à jour automatique GitHub · 13 Protéger	references/launch-and-protect.md

Travailler avec la personne

• Attendez-vous à des demandes en langage simple, dans n’importe quelle langue. « Les livres posés à plat ressemblent à de longues planches » est un cahier des charges complet. Traduisez-le vous-même en modification. Répondez dans la langue de la personne ; conservez le texte du site dans la langue du site.
• Traitez les demandes numérotées une par une et faites un compte rendu avec les mêmes numéros, pour que rien ne soit ignoré silencieusement.
• Montrez, ne décrivez pas. Après un changement visuel, prenez une capture d’écran et regardez-la avant de dire que c’est fait. Envoyez la capture d’écran à la personne lorsque le changement concerne la mise en page ou l’apparence. WebGL logiciel étant lent, accordez des délais généreux aux captures d’écran (voir étape 9).
• Expliquez brièvement les compromis et recommandez une option lorsqu’il y a un vrai choix (« Témoignages » vs « Témoignage » : recommandez le premier et dites pourquoi en une phrase). Ne posez pas de questions auxquelles vous pouvez répondre à partir du contexte.
• Lorsque la personne ne comprend pas un mot (DNS, commit, repository), expliquez-le en une ligne, puis continuez.

Honnêteté et attention

Un portfolio est lu par des personnes qui décident d’embaucher ou non, il doit donc être vrai.

• N’ajoutez pas de compétences, d’outils, de résultats, de tests ou de collaborateurs que la personne n’a pas confirmés. Si elle vous demande de lister des outils qu’elle n’a pas utilisés (« fais comme si je connaissais Blender »), dites clairement qu’un recruteur pourrait l’interroger à ce sujet, proposez le cadre vrai et souvent plus fort (par exemple, « chaque objet modélisé en code ») et suggérez de lister les compétences réelles dans une section Compétences.
• Lorsque vous rédigez des justifications de design, fondez chaque affirmation sur ce que l’objet fait réellement. L’utilisation prévue figure sous un titre comme « Comment je l’utiliserais en classe », jamais comme quelque chose qui s’est produit.
• Signalez toute phrase que vous avez déduite plutôt qu’on vous a dite, et demandez à la personne de la vérifier.
• Protégez les apprenants : supprimez les noms, identifiants, notes et commentaires privés ; floutez les visages (y compris les personnes en arrière-plan) avant de publier des photos ; gardez les données et le code de recherche privés sauf si un superviseur approuve. Voir étape 13.

Étape 1 · Planifier avant d’inviter

Convenez de trois choses avant de construire : le public et son objectif (par exemple, « équipes de recrutement pour des stages en conception pédagogique, 3 à 5 minutes par candidat »), la liste des sections, et une carte de la salle où la fonction quotidienne de chaque objet correspond à sa section. Si un objet et sa signification ne correspondent pas, changez l’objet (une valise suggère de partir ; une boîte aux lettres suggère d’écrire). Chaque section doit également être accessible depuis un menu simple.

Étapes 2 à 5 · Construire la salle

Lisez references/build-patterns.md avant d’écrire la scène. Architecture par défaut :

• Un seul fichier index.html avec Three.js chargé depuis une version CDN épinglée via une carte d’import, chaque objet modélisé en code à partir de primitives (pas de fichiers de modèle), des textures générées par canvas, et un menu en haut à gauche.
• Le contenu qui change souvent (dossiers de projets, éléments de galerie) réside dans de petits fichiers JSON à côté de index.html, afin que la personne puisse ajouter un projet ou une photo sans toucher au code 3D.
• Si la personne apporte une image de référence (étape 3), faites d’abord correspondre sa disposition, sa palette et sa lumière ; les détails de style viennent plus tard. Si elle apporte un exemple d’interaction (React Bits, Codrops), créez une version originale dans le style du site, et ne copiez pas de code sous licence.

Liste de vérification de la première construction : chaque section a un objet qui brille au survol avec un libellé ; un clic y déplace la caméra et ouvre la section ; le menu fonctionne sans la salle 3D ; le site se charge en environ 5 secondes ; il fonctionne à la largeur d’un téléphone.

Étape 6 et 7 · Remplir avec du travail réel

Lisez references/content-and-docs.md. En bref : demandez du matériel réel (CV, texte LinkedIn, fichiers de projet), rédigez un brouillon à partir de celui-ci, et laissez la personne le corriger. Placez les artefacts réels en premier et le raisonnement à côté sous forme de notes de design numérotées nommant la décision et la théorie d’apprentissage derrière elle. Supprimez les dates périmées sauf si elles sont importantes. Pour les liens Google, vérifiez que le partage est « Toute personne disposant du lien, Lecteur » ; si un fichier nécessite une connexion universitaire, hébergez-le sur le site à la place.

Étape 8 · Itérer

C’est là que se déroule la majeure partie du travail. Règles apprises lors d’itérations réelles :

• Un seul signal pour « cliquable ». Tout ce qui est cliquable brille au survol ; rien de décoratif ne brille ni ne semble cliquable. Supprimez les faux signaux (papiers brillants, formules flottantes, post-it épars).
• Signalez les interactions cachées. Si les visiteurs peuvent dessiner sur un tableau, transformez le curseur en craie dessus, placez les outils juste en dessous et laissez-les briller jusqu’à la première utilisation. Si une galerie défile, montrez une petite légende (touches fléchées, molette, balayage à deux doigts, glisser sur tactile). Lorsqu’une section est ouverte, faites briller doucement le prochain élément cliquable à l’intérieur (un contour pulsé) pour que les gens le remarquent.
• Gardez les éléments interactifs près de l’endroit où les gens regardent. Lorsqu’un panneau s’ouvre à droite, placez les objets avec lesquels on peut interagir sur le côté droit de la scène.
• Proportions réelles. Les livres, tasses et meubles à l’échelle réelle semblent corrects ; les formes étirées semblent immédiatement fausses.
• Son uniquement après un clic (les navigateurs bloquent la lecture automatique) : un bouton « Entrer » qui lance la musique, plus une option silencieuse.
• Ordre du contenu selon l’histoire. Dans les témoignages, les mots (lettres, notes, messages) avant les photos ; l’élément le plus personnel en premier.
• Nommez les sections simplement. Un libellé de menu doit dire ce qu’il contient (« Recherche », pas « Chapitre suivant »).
• Vérifiez ce qui bloque les clics. Les objets Line et LineSegments de Three.js capturent les rayons à environ un mètre par défaut ; définissez obj.raycast = () => {} sur les filaires décoratifs, sinon les clics à proximité atteignent le mauvais objet.

Après chaque itération, prenez une capture d’écran des vues modifiées, corrigez ce qui est visiblement faux une fois, et rapportez ce qui a changé en termes simples.

Étape 9 · Tester

Exécutez scripts/screenshot_site.js <site_dir> <out_dir> about projects contact (les identifiants de section sont les valeurs data-go des boutons de menu) pour capturer les vues de bureau et de téléphone et imprimer les erreurs de page. Ensuite, guidez la personne à travers les vérifications manuelles : chaque objet et chaque élément de menu s’ouvre, chaque lien fonctionne dans une fenêtre privée, le formulaire de contact arrive (FormSubmit nécessite un email d’activation unique), le son désactivé fonctionne encore, la navigation au clavier uniquement fonctionne, et un ami visite sans aide.

Étapes 10 à 13 · Lancer et protéger

Lisez references/launch-and-protect.md. Cela couvre le déploiement avec GitHub et Vercel (la page principale doit être index.html à la racine ; le site web GitHub télécharge au maximum 100 fichiers à la fois), les noms de domaine personnalisés, la poussée des modifications via l’application GitHub Claude, et la protection : un dépôt privé, assets/robots.txt et assets/vercel.json pour les robots d’IA, le blocage des bots d’IA par Vercel, et une ligne de droits d’auteur. Soyez honnête : rien de public n’est à l’épreuve de la copie.

Livrables optionnels

Les personnes qui terminent souhaitent souvent enseigner le processus. Un document et un diaporama peuvent suivre les 13 étapes ; utilisez des captures d’écran réelles de leur site (avant et après) plutôt que des images d’archives, et rédigez les notes de l’orateur dans leur voix. scripts/html_to_docx.py transforme un document de projet avec des notes de design en Word.

Échecs courants

Symptôme	Cause	Correctif
404 sur Vercel	Le fichier principal n’est pas index.html, ou se trouve dans un dossier	Renommez et déplacez à la racine
Dossiers de l’ordinateur portable ou galerie vides en ligne	Les dossiers projects/ ou autres n’ont jamais été téléchargés	Téléchargez-les à côté de index.html
Ancienne version affichée	Cache ou déploiement toujours en cours	Attendez Ready, puis actualisation forcée
« Impossible d’accéder à X avant l’initialisation »	Une fonction ou texture utilisée avant sa ligne const	Remontez-la (une déclaration function) ou déplacez l’utilisation plus tard
Cliquer sur un objet ouvre un voisin	Objet de ligne décoratif captant les rayons	obj.raycast = () => {}
Push vers GitHub refusé	Application Claude GitHub non installée sur le dépôt	Installez-la pour ce dépôt ; une nouvelle session peut être nécessaire