À propos de ce modèle
Lisez Portfolio Cosmic comme une spécification de portfolio, dont les valeurs ont été écrites avant la construction de la page. La page affiche son propre titre, « Designing seamless digital interactions by focusing on the unique nuances which bring systems to life », et la composition est construite autour de ces mots exacts. La palette se limite à noir #000000 en fond, blanc #D1DAD8 pour le texte et bleu #4E85BF pour les accents, et la typographie est Inter. La livraison est en React et Tailwind CSS, capturée en 800x562 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 2700ms de transitions. C’est la référence qu’il faut pour un design de portfolio destiné à une marque 3D, jeu vidéo ou divertissement, quand le premier écran doit sembler intentionnel.
Conçu pour
- Partez de un corps display fixe de 13px et des sections de 300vh et laissez la palette suivre, car ce sont les espacements qui font lire ce design de portfolio.
- Cette base est calibrée pour un fondateur seul qui livre un design de portfolio pour une marque 3D, jeu vidéo ou divertissement, sans design system derrière.
- Quiconque briefe un modèle sur un design de portfolio utilisera le prompt de 8 253 caractères comme point de départ.
Ce qui est inclus
- Une navigation sans fond. Nom de marque, liens et action en #4E85BF partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #4E85BF est le seul élément de la barre à porter du gras.
- Des valeurs vérifiables. Rien ici n’est estimé à l’œil. La spécification fixe un corps display fixe de 13px, des sections de 300vh, des pas d’espacement de 13px et des transitions de 2700ms, et le reste de la mise en page découle de ces valeurs. La liste est assez courte pour être vérifiée élément par élément. Emportez les valeurs avec la mise en page.
- Les liens avant l’action. La barre se pose sur la composition 800x562 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. Les espacements sont cités de la même façon (un corps display fixe de 13px, des sections de 300vh, des pas d’espacement de 13px et des transitions de 2700ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Une durée pour les contrôles
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 2700ms. Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. La même durée est réutilisée sur tous les contrôles, ce qui garde les interactions dans un seul système. Des changements d’état rapides, aucune timeline de scroll.
Un bandeau donne le rythme
Un bandeau défilant traverse la composition en boucle sans fin, composé en Inter, donc la page bouge même là où rien ne s’anime au scroll. L’élément actif est signalé par #4E85BF et non par un changement de taille.
Adapter portfolio à votre marque
La composition est la partie réutilisable, le sujet est le vôtre. Changez le titre, gardez l’échelle typographique (un corps display fixe de 13px) et retestez l’accent #4E85BF sur vos propres médias. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison. Le sujet est la partie qui doit changer.
Ce qui bouge dans Portfolio Cosmic
Comparez l’animation d’ici avec une page pilotée par le scroll. Les deux bougent, mais celle-ci bouge là où le brief l’indique (2700ms de transitions, des calques en parallaxe et un élément sticky), donc le texte reste devant. Rien ne s’anime pour lui-même dans le design de portfolio.
L’argument de portfolio
La plupart des pages 3D échouent par accumulation, plus de sections, plus de dégradés, plus de promesses. Portfolio Cosmic fait l’inverse. La page le dit sans détour, « Designing seamless digital interactions by focusing on the unique nuances which bring systems to life ». La composition reste sur noir #000000 avec bleu #4E85BF pour les actions, ce qui suffit à paraître délibérée. Elle donne à un lecteur 3D le chemin le plus court vers l’offre.
Questions fréquentes
Quelle est la longueur du prompt derrière Portfolio Cosmic?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x562, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de portfolio de Portfolio Cosmic avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Portfolio Cosmic 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.
Puis-je utiliser Portfolio Cosmic dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 800x562.
