À propos de ce modèle
Lisez Creative Portfolio comme une spécification de portfolio, dont les valeurs ont été écrites avant la construction de la page. La page affiche son propre titre, « I craft bold brands and modern websites with purpose », et la composition est construite autour de ces mots exacts. La couleur se réduit à vert profond #181B17 en fond, blanc #DED9CF pour le texte et bleu vif #309ADA pour les accents, composée en Figtree. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. Le brief consacre son budget d’animation à 1200ms de transitions et cubic-bezier(0.16, 1, 0.3, 1). Elle est surtout utile quand le texte de portfolio Agences et studios change sans qu’une refonte soit nécessaire.
Conçu pour
- Ce design de portfolio est fait pour les agences qui ont besoin que le cadre 640x468 survive à trois séries de retours client.
- Ce design est taillé pour les agences qui facturent à la série et veulent valider une typographie de 28px à 200px et des pas d’espacement de 80px avant la première.
- Quiconque briefe un modèle sur un design de portfolio utilisera le prompt de 5 639 caractères comme point de départ.
Ce qui est inclus
- En haut, marque, liens et action unique. La barre porte le nom de marque, les liens de la section et un bouton en #309ADA, mesurée à une typographie de 28px à 200px et des pas d’espacement de 80px pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #309ADA est le seul élément de la barre à porter du gras. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Les liens avant l’action. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants. La référence a été capturée en 640x468.
- Rien n’est hérité ici. Typographie et espacements sortent ici de la même liste, une typographie de 28px à 200px, des pas d’espacement de 80px, des transitions de 1200ms et un easing cubic-bezier(0.16, 1, 0.3, 1). Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- L’échelle chute nettement. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Figtree à un corps display serré, puis une chute nette vers le texte secondaire. L’interlettrage se resserre à mesure que le corps grandit, c’est pourquoi la ligne display tient sur toute la plage 28–200px.
Animation et interaction
Le reveal est le point mémorable
L’animation d’entrée est dépensée sur un seul élément (les sections se révèlent à leur entrée dans le viewport), et c’est ce qui évite à un premier écran chargé de paraître surchargé. Le cadencement s’applique aux mots et non au conteneur, et c’est pourquoi la ligne se lit comme une phrase et non comme un bloc. Reprenez l’intention, pas la courbe exacte, l’essentiel est l’ordre d’arrivée.
La page répond au scroll
Apparition au scroll est le seul comportement de scroll du brief, ce qui évite à la page de ressembler à une suite d’effets séparés. L’effet se limite aux éléments nommés dans le brief et non à toute la page.
L’ordre de portfolio
La page suit un ordre délibéré. La navigation installe le produit et donne au visiteur de retour des repères familiers. Le titre prend le corps display, la ligne de soutien explique la promesse, et l’accent bleu vif #309ADA marque l’action principale, donc l’étape suivante ne fait aucun doute. Rien d’autre ne concurrence cette première décision, aucune grille de cartes en amont, ce qui évite à une portfolio de paraître lourde dans un travail agence. Un lecteur agence reçoit l’offre avant les options.
Adapter portfolio à votre marque
Commencez par la promesse, pas par la décoration. Réécrivez « I craft bold brands and modern websites with purpose » en une phrase qui dit ce que vous faites, puis composez-la en Figtree au corps display du brief. Remplacez bleu vif #309ADA par votre propre accent et vérifiez-le contre vert profond #181B17 avant de toucher au reste. Réécrivez le texte et les médias avant de recolorer quoi que ce soit.
Lire Creative Portfolio comme une spécification
Une reconstruction commence d’habitude par une capture d’écran et une estimation. Ici, elle commence par 5 639 caractères de spécification, le cadre, les espacements et l’animation étant écrits avant la première ligne de code. Rien dans le design de portfolio ne dépend d’une valeur par défaut.
Questions fréquentes
Que contient réellement le brief derrière Creative Portfolio?
Comptez 5 639 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.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Creative Portfolio 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.
Qu’est-ce qui déclenche les animations de Creative Portfolio?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 1200ms en cubic-bezier(0.16, 1, 0.3, 1). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
