À propos de ce modèle
Portfolio About est une référence de travail pour une agence ou un studio, un exemple de page à propos entièrement mesuré et prêt à reproduire. La palette se limite à noir #0C0C0C en fond et blanc #D7E2EA pour le texte, et la typographie est Kanit. 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. L’animation se limite à 200ms de transitions. Partez du brief capturé, puis retouchez le contenu de page à propos au lieu de repartir de zéro.
Conçu pour
- Les ingénieurs qui veulent que ce design de page à propos tienne sur une connexion lente utiliseront 640x468 et l’échelle typographique comme budget de poids.
- Équipes produit qui rédigent leurs propres textes de Page À propos et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
- Cette base est calibrée pour un fondateur seul qui livre un design de page à propos pour une agence ou un studio, sans design system derrière.
Ce qui est inclus
- Les pas d’espacement sont cités. Le brief énonce ses tailles à la capture (des pas d’espacement de 160px et des transitions de 200ms), une reconstruction peut donc être vérifiée au lieu d’être approximée. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- La pastille d’annonce. Un badge, un message. La pastille se place au-dessus du titre en Kanit au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il est positionné pour que le titre garde le centre de la composition.
- Une structure en un seul écran. La composition est complète en 640x468, avec le texte, les médias et les contrôles tous nommés dans le brief. La page est une seule composition en 640x468, c’est pourquoi elle tient quand le texte change. Le brief est la spécification.
- Des valeurs vérifiables. Les espacements sont cités de la même façon (des pas d’espacement de 160px et des transitions de 200ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Rythme court, timings cohérents
Le brief fixe la transition à 200ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. Si l’easing change, la durée doit être revue avec lui.
La page répond au scroll
L’effet se pose sur une mise en page terminée au lieu de la produire, donc la page reste lisible sans lui (un élément sticky tient sa position pendant que le contenu défile sous lui). La composition ne dépend pas du déclenchement de l’effet, donc un défilement rapide ne coûte rien. La référence a été capturée en 640x468.
Adapter page à propos à votre marque
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 pas d’espacement de 160px et des transitions de 200ms. La composition est la partie réutilisable, et elle survit à une autre marque.
Comment Portfolio About ordonne la première lecture
Un ordre strict coûte de la souplesse par la suite. Ajoutez une section dans le premier écran et il faut recalculer des pas d’espacement de 160px et des transitions de 200ms, parce que la séquence porte la structure au lieu de la décorer. Un lecteur agence reçoit l’offre avant les options.
Ce qui fonctionne dans page à propos
La promesse est faite une fois, à la taille d’affichage. Tout le reste de page à propos s’ordonne autour d’elle, le badge d’annonce, la ligne de statistiques et la liste de fonctionnalités, et aucune seconde promesse ne vient disputer la première lecture. Portfolio About énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Que recevez-vous en copiant le brief de Portfolio About?
Comptez 5 431 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 Portfolio About est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 5 431 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 Portfolio About?
La fiche indique React et Tailwind CSS pour la provenance, parce que Portfolio About 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.
