Sobre esta plantilla
Portfolio Cosmic se capturó a 800x562 y se conserva como especificación, no como imagen de galería. El titular dice “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life”, y el orden de página de portafolio gira alrededor de esa línea. La paleta es negro #000000 de base, blanco #D1DAD8 para la tipografía y azul #4E85BF para los acentos, con la tipografía Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x562 antes de escribir código. El movimiento se limita a transiciones de 2700ms, lo bastante discreto para que el texto siga mandando. Es más útil cuando cada página de portafolio de 3D y videojuegos tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Empieza por un tamaño de display fijo de 13px y secciones de 300vh y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de página de portafolio.
- Pensado para un fundador en solitario que saca un único diseño de página de portafolio para una marca de 3D, videojuegos o entretenimiento y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de página de portafolio a un modelo usará el prompt de 8.253 caracteres como punto de partida.
Qué incluye
- Fila superior: marca, enlaces y acción. La barra reúne la marca, los enlaces de la sección y un botón en #4E85BF, medida en un tamaño de display fijo de 13px y secciones de 300vh, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #4E85BF es el único elemento de la barra con peso.
- Contenido dividido en paneles. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene página de portafolio fácil de escanear. Los paneles comparten la tipografía de interfaz a un solo tamaño, lo que evita que la cuadrícula se convierta en una segunda maquetación. Mantén una idea por panel.
- Estructura en una sola pantalla. La composición está completa en 800x562: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x562, y por eso se sostiene cuando cambia el texto. El brief es la especificación.
- Navegación contenida en una fila. Los enlaces van en una sola línea y a un único tamaño, y la acción #4E85BF cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación.
Movimiento e interacción
Cambios de estado medidos
El presupuesto de animación es pequeño y explícito: 2700ms, aplicado a cambios de estado y no a entradas. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema. Aplica el tiempo exacto a la respuesta.
La tira que no para
La tira horizontal es el elemento más llamativo después del titular: movimiento continuo, #4E85BF en el elemento activo, y nunca le pide nada al lector. El elemento activo se marca con #4E85BF y no con un cambio de tamaño.
Qué cambiar primero en Portfolio Cosmic
Empieza por la promesa, no por el adorno. Reescribe “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life” como una sola frase que diga a qué te dedicas y compónla en Inter al tamaño de display que usa el brief. Sustituye azul #4E85BF por tu acento de marca y compáralo con negro #000000 antes de tocar nada más. Conserva el recorte del material: hace tanto trabajo como la tipografía.
Los tiempos detrás de página de portafolio
El movimiento ambicioso suele costarle la legibilidad a la primera pantalla. Este brief mantiene el movimiento lo bastante corto para que el tipo nunca tenga que esperar: transiciones de 2700ms, capas con parallax y un elemento fijo. Nada se anima por gusto en este tipo de página de portafolio.
El acierto de página de portafolio
La mayoría de las páginas de 3D añade otra sección cuando la primera pantalla es floja. Esta hace lo contrario y quita opciones: navegación, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo, en ese orden, y nada que repita la oferta. Portfolio Cosmic enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Portfolio Cosmic?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 800x562. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de página de portafolio de Portfolio Cosmic con otro stack?
Portfolio Cosmic 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 trato los medios de Portfolio Cosmic en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 800x562.
