À propos de ce modèle
Personal Showcase est un design de portfolio pour une agence ou un studio, livré avec les instructions qui l’ont produit. La palette se limite à bleu profond #050E13 en fond et blanc #EFEEE9 pour le texte, et la typographie est Inter. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. Le brief consacre son budget d’animation à 300ms de transitions, cubic-bezier(0.76, 0, 0.24, 1) et un fond vidéo en boucle. Traitez-la comme le brief de portfolio pour une agence ou un studio, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de portfolio et laissez le prompt porter un cadre 1462x1080.
- Si l’animation doit sauter, le design de portfolio reste lisible, des sections de 16vh et des pas d’espacement de 28px assurant la hiérarchie.
- Des responsables marketing produit qui ont besoin qu’une portfolio reste lisible avec 12,9s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre se superpose à portfolio au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. La barre se pose sur la composition 1462x1080 sans fond propre, la vidéo court donc bord à bord en dessous. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre.
- Des graisses nommées par rôle. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build. N’ajoutez pas de taille sans rôle.
- Une navigation sans fond. Une seule action par barre. La référence a été capturée en 1462x1080.
- Des valeurs vérifiables. Les valeurs sont la spécification, des sections de 16vh, des pas d’espacement de 28px, des transitions de 300ms et un easing cubic-bezier(0.76, 0, 0.24, 1), relevées sur 1462x1080 et non déduites d’une capture d’écran. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition. Les chiffres sont le design, le reste est de l’arrangement.
Animation et interaction
Les durées du brief
Les timings sont courts et constants (300ms en cubic-bezier(0.76, 0, 0.24, 1)), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. Les états de focus utilisent la même durée que le survol, donc le retour au clavier et à la souris est identique. Conservez les durées quand vous changez l’habillage de la page.
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 12,9s en 1462x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Comment Personal Showcase ordonne la première lecture
L’attention est dirigée plutôt que laissée au hasard. La séquence suit la navigation, la ligne de statistiques et le pied de page, et chaque étape est calibrée sur des sections de 16vh et des pas d’espacement de 28px pour que rien n’arrive dans le désordre. Un lecteur agence reçoit l’offre avant les options.
Par où commencer dans Personal Showcase
Une ligne, une police, un accent, ces trois substitutions changent le plus le design, et rien d’autre, les valeurs à ne pas bouger étant des sections de 16vh, des pas d’espacement de 28px, des transitions de 300ms et un easing cubic-bezier(0.76, 0, 0.24, 1). Réécrivez la ligne affichée avant de toucher à la couleur.
Le réagencement de portfolio
Responsive signifie ici que l’échelle change et non la hiérarchie, la section est tenue à 16vh, la navigation se replie en menu mobile et l’animation prévoit une variante de mouvement réduit. Le texte reste au-dessus de la ligne de flottaison, les contrôles restent assez grands pour être touchés et le mouvement réduit est respecté. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Questions fréquentes
Le prompt de Personal Showcase est-il une spécification aboutie ou un simple point de départ?
Comptez 6 948 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Le brief de Personal Showcase est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 6 948 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Faut-il React et Tailwind CSS pour reconstruire Personal Showcase?
La fiche indique React et Tailwind CSS pour la provenance, parce que Personal Showcase a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
