À propos de ce modèle
3D Portfolio donne à une marque 3D, jeu vidéo ou divertissement un premier écran fini et les valeurs qui l’ont produit. La page affiche son propre titre, « Jack — 3D Creator », et la composition est construite autour de ces mots exacts. La palette est noir #0C0C0C en fond et blanc #D7E2EA pour le texte. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. L’animation se résume à 200ms de transitions et un fond vidéo en boucle. Cette référence s’adresse à une marque 3D, jeu vidéo ou divertissement qui veut un premier écran réglé avant le début du build.
Conçu pour
- Des équipes Studio qui briefent un build et cherchent un cadre 1472x1080 pour avoir une matière sur laquelle réagir.
- Des designers qui veulent d’abord les chiffres, des sections de 85vh et des pas d’espacement de 160px, tous cités depuis le brief.
- Cette page est dimensionnée pour les chefs de produit qui veulent un design de portfolio cadré sur un sprint et aucun nouveau visuel à produire.
Ce qui est inclus
- Une barre de navigation discrète. 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 1472x1080 sans fond propre, la vidéo court donc bord à bord en dessous. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Le brief nomme les pas. Les tailles sont citées plutôt qu’héritées, des sections de 85vh, des pas d’espacement de 160px et des transitions de 200ms. Changez la fonte ou le texte, ces relations tiennent toujours. La liste est assez courte pour être vérifiée élément par élément. Mesurez avant d’ajuster.
- Une idée par panneau. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de portfolio balayable. Les panneaux partagent la fonte d’interface à un seul corps, ce qui évite que la grille ne devienne une seconde mise en page.
- La pastille d’annonce. Une seule pastille porte l’annonce au-dessus du titre, et rien d’autre ne vient concurrencer cette position. Il n’y a qu’une annonce, c’est ce qui donne au badge sa valeur d’information. Retirez-le quand l’annonce a vieilli.
Animation et interaction
Assez rapide pour être voulu
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 200ms. 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. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger. Les timings font partie du design, pas d’une passe de finition.
Le canvas fait le visuel
Le premier écran est construit par le navigateur plutôt que livré comme une image (une transformation 3D sur l’élément principal). Comme la scène est vivante, la mise en page peut être redimensionnée sans une seconde série de ressources.
Par où commencer dans 3D Portfolio
Là où un thème vous donne des composants, ce brief vous donne une composition, des sections de 85vh, des pas d’espacement de 160px et des transitions de 200ms et un cadre média, le sujet restant à votre charge. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
Les chiffres derrière portfolio
La plupart des références montrent le résultat et gardent les chiffres. Celle-ci inverse, en publiant des sections de 85vh, des pas d’espacement de 160px et des transitions de 200ms à côté de la page, si bien que le résultat se reproduit au lieu d’être approximé. Rien dans le design de portfolio ne dépend d’une valeur par défaut.
Le réagencement de portfolio
Une échelle de bureau fixe aurait été plus simple. Le brief ajoute un clamp entre 120px et 160px, et c’est ce qui garde la ligne d’affichage proportionnée entre les largeurs. C’est la hiérarchie qui survit à la réorganisation.
Questions fréquentes
Que recevez-vous en copiant le brief de 3D Portfolio?
Comptez 13 877 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 le prompt de 3D Portfolio n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 13 877 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 3D Portfolio?
La fiche indique React et Tailwind CSS pour la provenance, parce que 3D 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.
