Sobre esta plantilla
3D Portfolio conserva el rastro de sus decisiones: el brief que hay detrás de página de portafolio ocupa 13.877 caracteres. Abre con “Jack — 3D Creator” y le da el marco a esa línea en lugar de encogerla en una tarjeta. Toda la página se construye sobre negro #0C0C0C de base y blanco #D7E2EA para la tipografía. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El brief gasta su presupuesto de movimiento en transiciones de 200ms y un vídeo en bucle de fondo. Esta referencia es para una marca de 3D, videojuegos o entretenimiento que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida portafolio y deja que el prompt recoja un marco de 1472x1080.
- Agencias que llevan su página de portafolio de una marca de 3D, videojuegos o entretenimiento a una propuesta y quieren citar secciones de 85vh y pasos de espaciado de 160px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Equipos de producto que escriben los textos de Portafolio y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Enlaces antes de la acción. La navegación es una sola fila, sin un segundo nivel debajo. La sección activa se marca con peso, no con una píldora ni con un subrayado. Una acción por barra.
- Valores que puedes comprobar. Los valores son la especificación: secciones de 85vh, pasos de espaciado de 160px y transiciones de 200ms, capturados en 1472x1080 y no deducidos de una captura. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo. Donde el brief calla, calla a propósito.
- Navegación contenida en una fila. Una serie corta de enlaces y una única acción se sitúan sobre página de portafolio, sostenidas en secciones de 85vh y pasos de espaciado de 160px, de manera que la barra nunca compite con la composición que tiene detrás.
- Tamaños fijados en el brief. El espaciado se cita igual (secciones de 85vh, pasos de espaciado de 160px y transiciones de 200ms), no como una escala que crece sola.
Movimiento e interacción
Todo el presupuesto de animación
El presupuesto de animación es pequeño y explícito: 200ms, aplicado a cambios de estado y no a entradas. Si cambia el easing, la duración tiene que revisarse con él. Cambios de estado rápidos, sin líneas de tiempo de scroll.
Un lienzo, no una imagen
Una transformación 3D hace el trabajo visual en el marco de 1472x1080, con la tipografía encima o al lado. El render trae su propio color, así que la paleta de alrededor se mantiene discreta.
Qué cambiar primero en 3D Portfolio
Cuando pongas tu propio material, conserva el recorte y el orden de capas. El medio es un bucle de 6,4s en 1472x1080. Esa colocación es lo que mantiene legible el texto. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Las cifras detrás de página de portafolio
Cuando una reconstrucción se desvía, lo primero que se va es el espaciado. 3D Portfolio lo evita publicando secciones de 85vh, pasos de espaciado de 160px y transiciones de 200ms junto a la composición. Nada de este tipo de página de portafolio depende de un valor por defecto.
El reflujo de página de portafolio
Frente a una maquetación de móvil que esconde secciones, esta las conserva y les cambia la forma: la escala es fluida en lugar de escalonada y la sección se mantiene a 85vh. La escala cambia con el viewport; la secuencia, no.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de 3D Portfolio?
El brief capturado ocupa 13.877 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cuánto de 3D Portfolio depende de React y Tailwind CSS?
3D Portfolio se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Cómo se comportan las transiciones de 200ms en 3D Portfolio?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 200ms. El brief anota los valores para que un port no tenga que adivinarlos.
