Générateur de site portfolio personnel
Aidez l'utilisateur à transformer son propre parcours et son travail en un site portfolio clair et réutilisable. Le système de référence est basé sur un véritable portfolio UI/UX multipage, mais son identité visuelle est facultative : préservez le style choisi par l'utilisateur et n'utilisez la structure de référence que là où elle convient.
Flux de travail
- Établissez le public, le rôle, le contenu du portfolio, la pile technique préférée (si applicable) de l'utilisateur, et s'il souhaite un site monopage ou multipage. Pour les débutants, recommandez une implémentation simple et expliquez les compromis en langage clair.
- Proposez un plan de site et un ordre des sections avant de les remplir avec des faits biographiques ou des détails de projet inventés. Demandez le contenu manquant lorsqu'il modifie l'histoire ; sinon, utilisez des espaces réservés clairement étiquetés.
- Construisez l'enveloppe partagée et les sections réutilisables décrites dans references/page-patterns.md. Rendez les études de cas de projet configurables : les utilisateurs peuvent inclure, omettre et réorganiser les sections pertinentes.
- Proposez des recettes d'animation nommées à partir de references/motion-catalog.md. Décrivez le comportement visible en langage simple, puis implémentez la recette choisie avec la pile technique de l'utilisateur. N'ajoutez pas chaque animation par défaut ; utilisez l'animation pour clarifier la hiérarchie ou l'interaction.
- Appliquez la direction visuelle de l'utilisateur de manière cohérente à la typographie, aux couleurs, à l'espacement, aux images et aux composants. La palette du site de référence n'est qu'un thème de départ ; les thèmes peuvent changer sans modifier la structure des pages.
- Rendez les mises en page responsives et les interactions utilisables au clavier et au tactile. Respectez les préférences de mouvement réduit, fournissez des états de focus visibles et conservez le contenu essentiel accessible lorsque l'animation est désactivée.
- Résumez les pages/composants et les animations nommées livrées, et signalez tout contenu que l'utilisateur doit encore fournir.
Principes de conception réutilisables
- Mettez en avant le rôle et la valeur de la personne, puis rendez les travaux sélectionnés faciles à trouver.
- Conservez la page d'accueil comme une introduction concise et une passerelle ; laissez chaque étude de cas porter son propre récit et ses propres preuves.
- Utilisez un modèle de titres de section cohérent, une échelle d'espacement, une navigation, un pied de page et un système de cartes de projet cohérents.
- Laissez les pages de projet partager une séquence flexible plutôt que de forcer chaque projet dans un contenu identique.
- Gardez l'animation subtile, intentionnelle et cohérente. Un nom d'animation décrit un comportement réutilisable, pas une bibliothèque ou une implémentation exacte requise.
- Ne copiez pas le texte de référence, les données personnelles, les affirmations de projet, les images ou le code source dans le site du nouvel utilisateur. Demandez leur propre matériel ou utilisez des espaces réservés étiquetés.
Références
- Lisez references/page-patterns.md lors de la planification du plan du site ou de la construction de sections de page et d'étude de cas.
- Lisez references/motion-catalog.md lorsque l'utilisateur demande à choisir, nommer ou implémenter une animation.