Sobre esta plantilla
Antes de rehacer cada página de portafolio para una agencia o un estudio, lee Personal Showcase: la composición y la especificación que hay detrás están aquí. El esquema de color es azul intenso #050E13 de base y blanco #EFEEE9 para la tipografía, y la página está compuesta en Inter. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. El movimiento se limita a transiciones de 300ms, cubic-bezier(0.76, 0, 0.24, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Toma prestada la estructura, no el tema: las cifras y el orden de página de portafolio pasan a tu marca sin cambios.
Pensado para
- Los fundadores que le pasen el brief a una agencia usarán el marco de 1462x1080 como prueba de aceptación de la primera ronda.
- Diseñadores que necesitan los números antes que nada: secciones de 16vh y pasos de espaciado de 28px, todo citado del brief.
- Este diseño de portafolio sirve a fundadores que necesitan una pantalla de prueba de que los textos de agencia aguantan 12,9s de vídeo en bucle.
Qué incluye
- Fila superior: marca, enlaces y acción. Una serie corta de enlaces y una única acción se sitúan sobre página de portafolio, sostenidas en secciones de 16vh y pasos de espaciado de 28px, de manera que la barra nunca compite con la composición que tiene detrás. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Clip sin márgenes tras el tipo. Los medios son un solo clip de 12,9s recortado para cubrir el marco de 1462x1080, así que nunca aparecen bandas negras en ningún ancho. Un fotograma de póster a 1462x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- El tipo lleva el tono. La tipografía es Inter, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. Los pesos se especifican por papel, así que la jerarquía no depende de la improvisación al montar. Conserva los pasos, cambia la tipografía.
- Navegación contenida en una fila. La navegación es una sola fila, sin un segundo nivel debajo. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
Movimiento e interacción
Duraciones del brief
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 300ms con la curva cubic-bezier(0.76, 0, 0.24, 1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca. Cambios de estado rápidos, sin líneas de tiempo de scroll.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 12,9s en 1462x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Cómo ordena Personal Showcase la primera lectura
Compara la parte alta de esta página con una primera pantalla típica de agencia. Las dos llevan titular y acción; aquí navegación, la fila de cifras y el pie de página ocupan un orden fijo en vez de competir con el mismo peso. Quien busca agencia recibe la oferta antes que las opciones.
Hacer tuyo este tipo de página de portafolio
Compara esto con empezar de una página en blanco. Aquí el marco (1462x1080) y las cifras (secciones de 16vh y pasos de espaciado de 28px) ya están decididos, así que el trabajo es sustituir y no componer. Sustituir es más barato que componer, y de eso se trata.
El reflujo de página de portafolio
Aquí responsive significa que cambia la escala y no la secuencia: la sección se mantiene a 16vh, la navegación se pliega en un menú móvil y hay una rama de movimiento reducido, y el orden de lectura se queda donde lo puso el brief. Un apretujón habría sido más barato y no aguantaría.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Personal Showcase?
El brief capturado ocupa 6.948 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.
¿Qué puedo hacer con el brief de Personal Showcase una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 6.948 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de página de portafolio de Personal Showcase con otro stack?
Personal Showcase 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.
