Portfolio cinématographique

Que fait Portfolio cinématographique ?

Page de portfolio d'une seule page, fond sombre, inspirée des portfolios d'éditeurs et d'artistes VFX : un mot géant en filigrane derrière la photo, le nom au premier plan, titre bicolore (blanc + une couleur d'accent). À l'arrivée, effet de 30 agents qui construisent chaque bloc (skill agent-build-effect, inclus dans template/vendor/).

template/
  index.html        squelette de la page, ne pas modifier
  data.js           TOUT le contenu, seul fichier à éditer
  styles.css        style ; couleur modifiable via les variables ou `accent` dans data.js
  portfolio.js      construit la page à partir de data.js, puis lance l'effet agent
  vendor/           agent-build.js + .css
  assets/           photo détourée + images des cartes de compétences (exemple : 6 images sombres/rouges)
scripts/cutout.py   détourage de la photo (rembg)
references/image-prompts.md   prompts pour les images des cartes, style cohérent

Procédure

1. Demander toutes les informations nécessaires avant de commencer

Poser les questions en une seule fois, pour ce que l'utilisateur n'a pas encore fourni :

• Nom court à afficher en grand (un mot idéal), nom complet, titre, phrase d'intro.
• Photo : photo à partir des genoux ou en pied, fond pas trop chargé, légèrement de profil. Photo réelle ou 3D, les deux conviennent.
• 3 à 6 compétences ou projets à mettre en avant (nom, description, technologies). Si projet réel avec lien, mettre href dans la carte.
• Parcours (expériences, formations), compétences, processus de travail, citation.
• Reconnaissances ou mentions presse (sinon supprimer toute la section).
• Contact : email, région, bouton d'appel à l'action.
• Langue de la page, couleur d'accent (par défaut rouge #ff3b30), mot en filigrane (par défaut PORTFOLIO).

Ne pas inventer de chiffres, récompenses ou articles de presse. Si une section n'existe pas, la supprimer de data.js ; la page l'ignorera automatiquement.

2. Copier le template

Copier tout le dossier template/ à l'endroit souhaité par l'utilisateur (ex. ./my-portfolio/). Ne pas modifier le template original dans le skill.

3. Détourer la photo

pip install rembg pillow
python -I <skill>/scripts/cutout.py photo-originale.jpg my-portfolio/assets/photo.webp

Modèle par défaut isnet-general-use (léger, ~180 Mo, téléchargement unique). N'essayer birefnet-portrait que si la machine a beaucoup de RAM : ce modèle pèse ~1 Go et a déjà provoqué un dépassement de mémoire avec une image de 1440px. Vérifier le résultat sur fond gris (composer un fond gris avec PIL puis lire l'image). Les cheveux, lunettes et objets tenus à la main doivent être conservés. Définir hero.photo sur assets/photo.webp.

4. Images des cartes de compétences

Le template fournit 6 images sombres/rouges (agent, automation, web, chatbot, tableur, vidéo). Elles peuvent être réutilisées si le contenu de la carte correspond. Pour des images personnalisées, suivre references/image-prompts.md : garder le même style, ne changer que le sujet. Si la couleur d'accent change, modifier le code couleur dans le prompt. Demander à l'utilisateur avant de lancer une génération en masse (cela consomme ses crédits).

En l'absence d'image adaptée, supprimer l'attribut image de la carte ; la carte s'affiche correctement sans image. Ne pas utiliser la même image pour deux cartes de contenu différent.

5. Remplir data.js

• hero.name : un mot, mis automatiquement en majuscules. Si le nom dépasse 7 caractères, réduire la taille dans .pf-name.
• hero.stats : ne mettre que des chiffres réels (nombre de compétences, années d'expérience, nombre de technologies…).
• Les titres de section sont composés de title (blanc) et accent (couleur d'accent). Deux parties courtes et percutantes : « Pas juste du code. » / « Des solutions qui tournent. »
• agents.labels : traduire selon la langue de la page. Exemple en français : { status: "{agents} agent·s · {edits} modifications", building: "Construction en cours", done: "Construction terminée", skip: "Ignorer" }.
• Le texte est passé par textContent, donc pas de HTML possible (c'est voulu, pour la sécurité).

6. Vérification (d'abord les chiffres, puis les images)

Ouvrir index.html directement dans le navigateur (file:// fonctionne) ou avec un serveur statique. Utiliser Playwright en 1440×900 et 390×844 avec ?agents :

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // doit être false
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // 0 après défilement total
})

Défiler avec window.scrollTo par pas de 600px, chaque pas attendre environ 1 seconde, puis vérifier que waiting est à 0 et qu'il n'y a pas d'erreur dans la console. Prendre une capture d'écran du hero à chaque taille pour évaluer le rendu. Attention : la phrase d'introduction ne doit pas chevaucher la personne, et sur mobile le visage ne doit pas être caché par le texte.

7. Mise en ligne

Le dossier est un site statique : glisser-déposer sur Netlify Drop, vercel deploy, GitHub Pages ou Cloudflare Pages. Aucune phase de build nécessaire.

Intégration dans un projet Next.js / React existant

Réutiliser styles.css, remplacer :root par .pf. Réécrire le rendu en composant serveur, en conservant les noms de classes. Ajouter l'effet via AgentBuild.tsx du skill agent-build-effect, avec la même liste targets que dans portfolio.js. Points rencontrés lors de l'adaptation Next :

• En-tête sticky : appliquer à la page une marge supérieure négative égale à la hauteur de l'en-tête pour que le hero passe dessous.
• Image next/image avec fill nécessite un conteneur parent ayant position: relative, sinon l'image recouvre toute la page.
• La police Anton prend en charge les caractères vietnamiens. En auto-hébergement, charger les 3 subsets latin, latin-ext, vietnamese.
• Le serveur de développement Turbopack manque parfois les modifications CSS faites avec sed. Utiliser un outil d'édition ou réécrire le fichier pour qu'il soit pris en compte.