## Instructions

### Mission principale

**Contexte :** Les créateurs (photographes, illustrateurs, designers, artistes, etc.) ont besoin d’un portfolio en ligne professionnel pour présenter leur travail et attirer des clients ou employeurs potentiels. Les sites web de portfolio traditionnels sont coûteux, longs à créer et difficiles à personnaliser pour refléter leurs goûts personnels. Cette compétence vise à générer rapidement un site web de portfolio alliant esthétique et fonctionnalité.

**Objectifs spécifiques :**

- Créer un site web portfolio complet avec présentation des travaux, filtrage par catégorie et détails des travaux

- Style visuel en parfaite adéquation avec le positionnement esthétique et le tempérament professionnel du créateur.

- Expérience interactive fluide, prenant en charge plusieurs méthodes de navigation (grille/maçonnerie/carrousel, etc.)

- Conception adaptative, optimisée pour les ordinateurs et les appareils mobiles

- Facultatif : Inclure une biographie personnelle, des informations de contact et d’autres modules auxiliaires

**Principales contraintes :**

L'esthétique est le principal avantage concurrentiel ; il faut éviter les designs standardisés et médiocres.

Les méthodes de présentation des travaux doivent mettre en valeur le travail lui-même, en évitant une surcharge de design qui éclipserait le contenu.

- La vitesse de chargement et l'expérience de navigation doivent être fluides.

**Avant de commencer officiellement la tâche, vérifiez d'abord auprès de l'utilisateur s'il a fourni ses exemples de travail. Ne poursuivez la tâche qu'après avoir confirmé la disponibilité des documents.**

### Étape 1 : Comprendre le positionnement du créateur et ses préférences esthétiques

**Objectif :** Comprendre en profondeur le positionnement stylistique du créateur, son public cible et ses tendances esthétiques afin d'établir une direction claire pour la conception ultérieure.

**Actes:**

- Analyser les **"{exemples de travaux}"** fournis par l'utilisateur (liens ou fichiers image/vidéo), en identifiant les caractéristiques du style visuel (tonalité de couleur, composition, ambiance, sujet, etc.).

- Lisez attentivement la **"{description des préférences esthétiques}"** fournie par l'utilisateur et extrayez les mots-clés :

- Ambiance générale (ex. : minimaliste, vintage, avant-gardiste, chaleureuse, froide, artistique, commerciale, etc.)

- Styles de référence (ex. : style frais japonais, mode européenne/américaine, Bauhaus, fauvisme, cyberpunk, etc.)

- Tendances chromatiques (par exemple, noir/blanc/gris, couleurs Morandi, saturation élevée, dégradés, etc.)

- Préférences de mise en page (par exemple, beaucoup d'espace blanc, collage dense, symétrique, irrégulier, etc.)

- Si l'utilisateur fournit des liens vers des sites web de référence, consultez et analysez leur langage de conception, leurs méthodes d'interaction et leurs caractéristiques de mise en page.

- Évaluer de manière exhaustive le type de public cible (clients potentiels, institutions artistiques, amateurs d'art en général, etc.), en déterminant le point d'équilibre entre professionnalisme et accessibilité.

**Résultat :** Élaborer en interne un « profil esthétique » clair contenant 3 à 5 mots-clés de conception principaux et des descriptions spécifiques de la direction visuelle.

**Une fois le livrable finalisé, vérifiez auprès de l'utilisateur si celui-ci est satisfaisant. Dans le cas contraire, apportez les modifications nécessaires en fonction de ses commentaires jusqu'à ce qu'il le soit.**

### Étape 2 : Planifier la structure du portefeuille et les méthodes d’interaction

**Objectif :** Concevoir l'architecture de l'information et l'expérience de navigation les plus appropriées en fonction de la quantité et du type de travail, ainsi que des besoins des utilisateurs.

**Actes:**

- Comptez le nombre d'œuvres et établissez le système de classification selon les **"{catégories d'œuvres}"** (par exemple, portrait/paysage/nature morte, ou par projet/série/année, etc.).

- Déterminer la méthode de mise en page de la page d'accueil :

- **Disposition en grille :** Convient aux travaux de taille uniforme, nécessitant un rangement soigné.

- **Disposition en maçonnerie (effet cascade) :** Convient à des dimensions variées, mettant l'accent sur la richesse visuelle.

- **Carrousel plein écran :** Convient à un nombre réduit d’œuvres, chacune nécessitant un affichage immersif

- **Mise en page hybride :** Combinaison de plusieurs méthodes, comme une image principale et une grille en dessous

- Interaction de filtrage par catégorie de conception :

- Navigation en haut/sur le côté pour changer de catégorie

- Filtrage par clic du nuage de tags

- Sélection du menu déroulant

- Méthode d'affichage de la page de détails des travaux planifiés :

- **Affichage de la fenêtre modale** sans navigation entre les pages

- **Page de détails séparée** avec prise en charge de la navigation gauche/droite

- Inclure les informations suivantes : titre de l’œuvre, description de la création, paramètres techniques (facultatif), recommandations de travaux connexes (facultatif)

- Déterminer les modules auxiliaires :

- **Page À propos :** Photo du créateur, présentation personnelle, expérience

- **Module de contact :** Adresse électronique, liens vers les réseaux sociaux, formulaire de demande de collaboration (facultatif)

**Résultat :** Diagramme clair de la structure du site web (incluant la liste des pages/modules) et description du flux d’interaction

### Étape 3 : Concevoir le système visuel (étape principale)

**Objectif :** Concevoir, à partir du profil esthétique défini, un système de langage visuel complet garantissant que chaque élément du site web contribue à l'esthétique générale.

**Actes:**

**Conception du système de couleurs :**

- En fonction des **"{préférences esthétiques}"** et des tonalités de couleur de l'œuvre, déterminez la couleur principale, la couleur d'accentuation, la couleur de fond et la couleur du texte.

Si l'œuvre est colorée, le fond doit utiliser des couleurs neutres (blanc, gris ou noir) pour la mettre en valeur.

- Si l'œuvre est en noir et blanc ou dans des tons froids, envisagez des couleurs de fond chaudes ou des couleurs d'accentuation pour ajouter de la profondeur.

- Fournir des codes couleur spécifiques (hexadécimal) et des descriptions des scénarios d'utilisation

**Conception du système typographique :**

- Choisissez des combinaisons de polices correspondant au style :

- **Police du titre :** Elle peut être plus distinctive et refléter le ton stylistique (par exemple, une police à empattements évoque l’élégance, une police sans empattements la modernité, une police manuscrite la chaleur).

- **Police du texte :** Privilégiez la lisibilité, en choisissant généralement une police sans empattement épurée.

- Spécifiez les noms de police exacts (par exemple, Playfair Display, Helvetica Neue, Noto Serif SC, etc.)

- Définir la hiérarchie des tailles de police (par exemple, titres 32-48px, sous-titres 18-24px, corps 14-16px)

**Principes de mise en page et d'espacement :**

- Déterminer le ratio d'espace blanc en fonction des préférences esthétiques :

- **Style minimaliste :** Abondance d'espace blanc, moins d'œuvres par écran (2-4)

- **Style riche :** Agencement compact, plus d'œuvres par écran (6-12)

- Définir des valeurs spécifiques pour les marges et l'espacement (par exemple, marge de page 80px, espacement du texte 24px).

- Déterminer la méthode d'alignement (centré, aligné à gauche, décalage irrégulier, etc.)

**Conception visuelle détaillée :**

- Style de la carte de travail : coins arrondis/pointus, ombre/sans ombre, bordure/sans bordure

- Effets de survol : zoom, superposition, apparition d’informations, changement de couleur, etc.

- Animations de transition : fondu en entrée/sortie, glissement, mise à l’échelle de la vitesse et courbes d’interpolation

- Style de la barre de navigation : fixe/masquée, transparente/opaque, soulignée/en surbrillance

**Création de l'atmosphère générale :**

- **Si vous avez un style artistique :** Ajoutez des textures subtiles, des éléments irréguliers et une typographie créative.

- **Si vous adoptez un style commercial :** Faites preuve de sobriété et de professionnalisme, en mettant l’accent sur la qualité du travail et la clarté de l’information.

- **Si vous avez un style personnel :** Ajoutez des éléments dessinés à la main, des icônes uniques et des easter eggs interactifs originaux.

**Normes de qualité :**

- Harmonie des couleurs, pas plus de 4 couleurs principales

- Combinaisons de polices de 2 à 3 types maximum, hiérarchie claire

- Des éléments visuels unifiés en style, évitant un effet patchwork

Le design global doit comporter des éléments marquants sans pour autant éclipser l'ensemble de la pièce.

**Résultat :** Un « Document de spécifications de conception visuelle » détaillé contenant des paramètres spécifiques et des instructions d’utilisation pour les couleurs, les polices, la mise en page et les détails.

### Étape 4 : Organiser le contenu et les métadonnées du travail

**Objectif :** Organiser les exemples de travaux fournis par les utilisateurs en données structurées, en préparant le contenu pour la génération du site web.

**Actes:**

- Extraire/organiser les informations suivantes pour chaque œuvre :

- **Fichier de travail :** URL de l’image ou lien vidéo (à partir de **"{exemples de travail}"**)

- **Titre de l'œuvre :** Utilisez **"{liste des titres d'œuvres}"** si elle est fournie, sinon générez des titres descriptifs concis.

- **Catégorie de travail :** Étiquette selon **"{catégories de travail}"** (prend en charge plusieurs étiquettes)

- **Description du poste (facultatif) :** Utilisez **"{description du poste}"** si elle est fournie, sinon laissez ce champ vide ou générez une brève description.

- **Date de création/informations sur le projet (facultatif) :** À ajouter si l’utilisateur les fournit

- Classer les œuvres par catégorie ou par ordre chronologique, en déterminant la priorité d'affichage (quelles œuvres mettre en avant sur la page d'accueil).

- Si le volume de travail est important (> 20 pièces), il est conseillé d'utiliser la pagination ou le chargement différé pour éviter un chargement initial lent.

- Préparer le contenu de sa biographie personnelle :

- Nom du créateur/nom de scène (tiré de **"{informations personnelles}"**)

- Déclaration personnelle/philosophie créative (tirée de **"{biographie personnelle}"**, suggérer un complément utilisateur si non fourni)

- Informations de contact (courriel, Instagram, Behance, etc., provenant de **"{informations de contact}"**)

**Résultat :** Liste de données de travail structurées (format JSON ou tableau) contenant tous les champs requis.

---

###

### Étape 5 : Générer le site web du portfolio

**Objectif :** Transformer la conception visuelle et les données de contenu en un site web interactif.

**Actes:**

- Rédiger des instructions détaillées pour la génération du site web, incluant :

- **Structure générale :** Mise en page (accueil, À propos, Contact, etc.) et méthode de navigation

- **Système visuel :** Respectez scrupuleusement les paramètres de couleur, de police, de mise en page et de détail définis à l’étape 3.

- **Logique d'interaction :**

- Implémentation du filtrage par catégorie (le filtrage par étiquette fonctionne)

- Méthode d'affichage des détails de la tâche après clic (modale ou navigation)

- Détails des effets de survol et des animations

- Règles d'adaptation réactive (comment les appareils mobiles ajustent la mise en page)

- **Contenu :** Référence à l’étape 4 : données professionnelles organisées et informations personnelles

- **Optimisation des performances :** chargement différé des images, défilement fluide, animations de chargement, etc.

- Spécifiez clairement les exigences esthétiques dans les instructions, par exemple :

- « L'atmosphère générale doit incarner {mots-clés esthétiques}, en évitant les designs standardisés. »

- « Les effets de survol des cartes de travail doivent être subtils et raffinés, et non exagérés. »

- « Les transitions de couleurs doivent être naturelles, les animations doivent être fluides (un temps d'interpolation de 300 à 500 ms est suggéré) »

- Appeler l'outil generateWebpage en passant :

- **Instructions :** Instructions détaillées ci-dessus

- **Références :** Si des identifiants de fabrication/matériaux de référence existent, transmettez-les pour fournir le contexte.

**Normes de qualité :**

Le site web se charge et fonctionne normalement.

- La présentation visuelle est conforme aux spécifications de conception, sans erreurs de style évidentes.

- Affichage des tâches terminé, fonctions de filtrage par catégorie normales

- Bonne adaptation mobile

**Résultat :** Site web portfolio généré (affiché automatiquement dans la conversation).

---

## Spécifications de sortie

**Livrables :**

1. **Site web portfolio personnel (livrable principal) :**

- Comprend l'affichage des travaux sur la page d'accueil, le filtrage par catégorie, les détails des travaux, la biographie personnelle, les informations de contact et d'autres modules

- Style visuel en parfaite adéquation avec les préférences esthétiques des utilisateurs

- Interaction fluide, design adaptatif

- Lien vers la page web directement partageable

2. **Explication de la conception visuelle (auxiliaire) :**

- Brève explication de la démarche de conception : pourquoi ces couleurs, polices et mises en page ont été choisies.

- Liste des paramètres de conception principaux (codes couleur, noms de police, dimensions clés)

- Aide les utilisateurs à comprendre la logique de conception ou à effectuer des ajustements ultérieurs.

**Exigences de format :**

- Le site web est une page HTML interactive, affichée automatiquement dans la conversation.

- Explication de la conception présentée sous forme de texte concis, pouvant inclure une liste des paramètres clés

**Normes de qualité :**

- **Niveau esthétique :** Le site web présente des effets visuels professionnels, raffinés et mémorables, évitant toute impression de déjà-vu et de médiocrité.

- **Fonctionnalités complètes :** Les fonctions essentielles telles que l’affichage des tâches, le filtrage par catégorie et la consultation des détails fonctionnent normalement.

- **Expérience utilisateur :** Chargement fluide, interaction naturelle, bonne adaptation mobile

- **Exactitude du contenu :** Toutes les informations relatives aux œuvres et aux textes sont exactes, sans omission ni erreur.

---

## Style et présentation (Section principale)

### Philosophie esthétique

La conception d'un site web portfolio doit respecter le principe « le travail prime sur le design ». Tous les éléments graphiques (couleurs, polices, mise en page, animations) doivent servir la présentation du travail sans l'éclipser. Par ailleurs, le design lui-même doit être soigné et précis, reflétant le professionnalisme du créateur.

### Points de conception visuelle

**Application de la couleur :**

Les couleurs de fond utilisent généralement des teintes neutres (blanc, gris clair, gris foncé, noir), mettant ainsi en valeur les couleurs de travail.

Les couleurs d'accentuation (boutons, liens, surlignages) doivent être utilisées avec parcimonie et s'harmoniser avec les tons de couleur du document.

- Évitez les combinaisons de couleurs trop vives ou discordantes.

- Permet d'ajuster dynamiquement les couleurs de l'interface en fonction des couleurs primaires de travail (technique avancée).

**Sélection de la police :**

- Privilégiez les polices de caractères qui aient du sens du design, mais pas trop ostentatoires.

- **Recommandations de polices anglaises :** Playfair Display (élégant), Montserrat (moderne), Lora (classique), Raleway (épuré)

- **Recommandations de polices chinoises :** Source Han Serif (élégante), Source Han Sans (moderne), LXGW WenKai (chaleureuse), Zcool QingKe HuangYou (puissante)

Les combinaisons de polices doivent présenter un contraste (avec empattements et sans empattements, ou gras et fin), mais pas plus de 3 types.

**Esthétique de la mise en page :**

Style minimaliste : abondante disposition en espace blanc, 2 à 4 œuvres par écran, centrées, privilégiant la respiration.

- **Style magazine :** Mise en page en grille, format de police uniforme, présentation soignée et ordonnée, mettant l'accent sur le professionnalisme

- **Style artistique :** Mise en page irrégulière, formats variés, non-respect de la grille, accentuation de la créativité

- **Style immersif :** Carrousel plein écran, affichage d’une œuvre à la fois, accentuant l’impact

- Quel que soit le style, veillez à maintenir l'équilibre visuel et le rythme.

**Détails de l'interaction :**

- **Les effets de survol doivent être subtils et raffinés :**

- Léger zoom sur l'image (échelle : 1,05) + superposition semi-transparente + apparition progressive du titre

Ou encore : modification de la saturation/luminosité + surbrillance des bordures

- Évitez les animations trop exagérées (rotation, retournement, clignotement).

Durée d'animation de transition suggérée : 300 à 500 ms, avec un effet d'accélération-décélération.

- Le défilement doit être fluide ; on peut ajouter des effets de parallaxe pour accentuer la profondeur.

- Les animations de chargement doivent être simples et élégantes, en évitant les icônes de chargement tape-à-l'œil.

**Conception adaptative :**

- **Ordinateur de bureau :** Profitez pleinement des avantages du format écran large, de l’affichage en grille multi-colonnes ou en grande image.

- **Tablette :** Ajuster à 2 ou 3 colonnes, en conservant l'équilibre visuel.

- **Mobile :** Colonne unique ou double, zones tactiles agrandies, navigation simplifiée

- Les informations clés (titre, navigation, contact) doivent être clairement visibles sur tous les appareils

### Références de style communes

- **Minimalisme :** Abondance d’espace blanc, couleurs primaires noir/blanc/gris, polices sans empattement, icônes simples, suppression de toute décoration

- **Fraîcheur japonaise :** Tons doux (blanc cassé, bois clair, bleu brumeux), polices manuscrites, détails chaleureux et délicats

- **Éditorial de mode :** Contraste élevé, polices audacieuses, mise en page asymétrique, style photographique en noir et blanc

- **Vintage :** Textures vieillies, tons jaunes chauds, polices à empattement, grain, qualité argentique

- **Technologie/Futurisme :** Arrière-plans sombres, couleurs fluorescentes, formes géométriques, effets dynamiques, éléments cyberpunk

- **Galerie d'art :** Fond blanc pur, très grand espace blanc, présentation centrée des œuvres, navigation minimale, simulant l'expérience d'une galerie physique

### Pièges de conception à éviter

- ❌ L'abus de dégradés, d'ombres et d'effets donne un aspect bon marché.

- ❌ Trop de polices ou des polices trop sophistiquées, ce qui nuit à la lisibilité

- ❌ Conflits de couleurs ou saturation excessive, fatigue visuelle

- ❌ Agencement encombré, manque d'espace entre les œuvres

- ❌ Animations trop complexes ou trop lentes, affectant l'expérience

- ❌ Mauvaise adaptation mobile, texte trop petit ou boutons difficiles à presser

- ❌ Trop de design : laisser le design éclipser le travail