Sobre esta plantilla
Creative Portfolio es un caso de página de portafolio de agencia: nace de un único brief escrito y esta página lo documenta. El titular de la propia página dice “I craft bold brands and modern websites with purpose”, y la composición se construye alrededor de esas palabras exactas. La paleta se queda en verde intenso #181B17 de base, blanco #DED9CF para la tipografía y azul brillante #309ADA para los acentos, y el tipo es Figtree. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se queda en transiciones de 1200ms y cubic-bezier(0.16, 1, 0.3, 1). Es más útil cuando cada página de portafolio de Agencias y estudios tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Llévate el marco de 640x468 y tipografía de 28px a 200px y pasos de espaciado de 80px de este diseño de página de portafolio antes que cualquier otra cosa.
- Quien le pase el brief de página de portafolio a un modelo usará el prompt de 5.639 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de página de portafolio cuyo titular tiene que seguir siendo tan largo como el de Creative Portfolio.
Qué incluye
- La barra sigue la cuadrícula. La fila gasta el contraste en un solo punto: la acción #309ADA, con la marca y los enlaces retenidos sobre el color del texto. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #309ADA es el único elemento de la barra con peso. Diseña el estado colapsado antes de añadir un sexto enlace.
- Medido contra el viewport. La maquetación trabaja con valores absolutos y no con proporciones: tipografía de 28px a 200px, pasos de espaciado de 80px, transiciones de 1200ms y easing cubic-bezier(0.16, 1, 0.3, 1). Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- Estructura en una sola pantalla. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 640x468, y por eso se sostiene cuando cambia el texto.
- Una fila, sin desplegables. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra. La captura de la referencia es de 640x468.
Movimiento e interacción
Cambios de estado medidos
El presupuesto de animación es pequeño y explícito: 1200ms usando cubic-bezier(0.16, 1, 0.3, 1), aplicado a cambios de estado y no a entradas. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 640x468 sostenga la página, con el hover y la pulsación como únicos cambios. El movimiento se trata como respuesta y no como adorno.
El orden detrás de página de portafolio
Podrías reordenar estos bloques y la página seguiría cargando. Pero dejaría de leerse como un argumento: navegación, la fila de cifras y el clip de fondo son una secuencia, y tipografía de 28px a 200px y pasos de espaciado de 80px solo funcionan en ese orden. Quien busca agencia recibe la oferta antes que las opciones.
Hacer tuyo este tipo de página de portafolio
Empieza por la promesa, no por el adorno. Reescribe “I craft bold brands and modern websites with purpose” como una sola frase que diga a qué te dedicas y compónla en Figtree al tamaño de display que usa el brief. Sustituye azul brillante #309ADA por tu acento de marca y compáralo con verde intenso #181B17 antes de tocar nada más. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
Leer Creative Portfolio como especificación
Cuando una reconstrucción se desvía, lo primero que se va es el espaciado. Creative Portfolio lo evita publicando tipografía de 28px a 200px, pasos de espaciado de 80px, transiciones de 1200ms y easing cubic-bezier(0.16, 1, 0.3, 1) junto a la composición. Nada de este tipo de página de portafolio depende de un valor por defecto.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Creative Portfolio?
El brief capturado ocupa 5.639 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.
¿Puedo reconstruir este diseño de página de portafolio de Creative Portfolio con otro stack?
Creative 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.
¿Cuánto de Creative Portfolio está animado?
Las entradas y los cambios de estado se quedan en 1200ms usando cubic-bezier(0.16, 1, 0.3, 1) con una rama de movimiento reducido en el brief. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
