Portafolio de Paam.
Un portafolio para Pamela Silva (Paam), diseñadora e ilustradora de Quito. Su trabajo cuelga de una pared negra como un collage: inclinado, superpuesto y colocado a mano. Hecho en tres o cuatro días con HTML, CSS y JavaScript puros.
> Visitar el sitio (se abre en una pestaña nueva)- Cliente
- Pamela Silva (Paam), diseñadora, ilustradora y directora de arte, Quito
- Mi rol
- Desarrolladora front-end, de su referencia al sitio publicado
- Duración
- 3–4 días, marzo 2026
- Plataformas
- Sitio web, escritorio y celular
El reto
Paam es diseñadora, ilustradora y directora de arte, con un estilo fuerte y alternativo: tipografía 3D, cromo, colores ácidos y afiches para clubes y festivales. Necesitaba un sitio web, y lo necesitaba lo antes posible.
Me envió una referencia: un collage, no una cuadrícula. Piezas de distintos tamaños, un poco inclinadas, superpuestas como impresiones que caen sobre una mesa. Una plantilla de portafolio normal habría aplanado todo eso.
Así que el trabajo era convertir un collage libre en una página web real: que mantenga su composición en cualquier tamaño de pantalla, que abra cada proyecto para verlo de cerca, que funcione en el celular y que esté en línea en pocos días.
De la referencia al sitio publicado
Paso 01 / 05
Leer la referencia
Estudié qué hacía que la referencia se sintiera hecha a mano: ninguna pieza del mismo tamaño, pequeñas inclinaciones de uno o dos grados y superposiciones que parecen accidentales pero guían la mirada hacia abajo.
Dejé la página casi vacía para que el trabajo la sostuviera: fondo negro, su logo lila dibujado a mano, una tipografía de máquina de escribir y un cursor en forma de cruz. El lila es el único color de la interfaz, tomado de su logo.
Paso 02 / 05
Convertir el collage en datos
Un collage no se puede construir con una cuadrícula normal, así que escribí el diseño como datos. Una lista guarda los proyectos (título, portada, galería). Una segunda lista guarda las filas del collage, y cada tarjeta de una fila recibe cinco números: izquierda, ancho, proporción, inclinación y un empujón vertical.
Un pequeño script lee las filas de arriba abajo. Los anchos son un porcentaje de la pantalla, así que el collage escala como una sola pieza; la altura sale de la proporción; el empujón sube una tarjeta hacia la fila de arriba para crear las superposiciones. Luego un cursor de fila baja según la tarjeta más alta y empieza la fila siguiente.
El motor de diseño: cinco números por tarjeta, leídos fila por fila. Paso 03 / 05
Colocar cada tarjeta a mano
Con el motor listo, empezó el verdadero trabajo de diseño: ajusté los números de 27 tarjetas en 17 filas hasta que la página transmitiera la sensación de su referencia. Algunas tarjetas se superponen por unos pocos píxeles, otras suben 400px hacia la fila de arriba y unas pocas quedan encima en una capa superior.
Tres de sus pequeñas animaciones de Funkafest (una flor, una abeja y una nube) se volvieron stickers repartidos alrededor del afiche de Funkafest. No son proyectos; hacen que la pared se sienta más viva.
Al pasar el cursor, una tarjeta se levanta un poco y pasa al frente, como cuando levantas una impresión de la mesa.
Hover: la tarjeta se levanta y pasa al frente de la pila. Paso 04 / 05
Dejar mirar más de cerca
El collage solo muestra portadas, sin títulos, para que el trabajo hable primero. Al hacer clic en una tarjeta se abre un visor de proyecto: el nombre del proyecto, una imagen o video grande y una fila de miniaturas que cambian la imagen principal.
El visor se cierra con su botón, con la tecla Escape o con un clic fuera de él. Las portadas pueden ser imágenes, GIF animados, videos MP4 o enlaces de Vimeo, y el mismo código los maneja todos.
El visor de proyecto: una pieza grande y su galería. Paso 05 / 05
Plegarlo para el celular
Un collage inclinado no cabe en una pantalla de 375px, así que por debajo de 700px el script arma una sola columna recta, a todo el ancho y sin los stickers. El visor de proyecto pasa a una galería de dos columnas.
El botón lila de contacto se queda en la esquina en todas las pantallas y lleva a sus enlaces de Behance, Instagram y WhatsApp.
En el celular, el collage se vuelve una columna.
Donde la IA aceleró
La IA escribió la primera versión del script de diseño y las matemáticas de posición: convertir porcentajes de pantalla en tamaños, apilar las filas y mantener el collage en proporción en cualquier pantalla.
Lo que terminé a mano
El lugar de cada tarjeta es mío. Definí a mano la posición, el tamaño, la inclinación y la superposición de las 27 tarjetas hasta que la página coincidió con la referencia de Paam, y construí la versión para celular y el visor de proyectos.
Si lo hiciera hoy
El sitio cumplió su objetivo: Paam tuvo su portafolio en línea en pocos días. Con más tiempo, esto es lo primero que mejoraría:
- Medios más livianosAlgunas portadas son GIF animados de 20 a 38 MB. Como videos MP4 o WebM pesarían unas diez veces menos y cargarían mucho más rápido.
- Acceso con tecladoHacer de cada tarjeta un botón real, llevar el foco al visor cuando se abre y devolverlo a la tarjeta cuando se cierra.
- Unidades del diseñoLos empujones están en píxeles, mientras que todo lo demás escala con la pantalla. Pasarlos a unidades de pantalla mantendría las superposiciones exactas en pantallas muy anchas o muy angostas.
- Menos movimientoDetener el botón de contacto flotante para quienes piden menos movimiento en su sistema.
Nada de esto cambia cómo se ve el sitio. Lo hace más rápido y abierto a más personas.
El resultado
Paam tuvo su portafolio en línea en tres o cuatro días: un sitio que se parece a su trabajo, no a una plantilla, y un diseño que crece agregando una línea de datos.
- 3–4Días
- De su referencia al sitio publicado.
- 27Tarjetas colocadas a mano
- En 17 filas, más tres stickers animados.
- 5Números por tarjeta
- Izquierda, ancho, proporción, inclinación y empujón. Ese es todo el diseño.
- 0Dependencias
- HTML, CSS y JavaScript puros. Nada que instalar ni actualizar.
¿Necesitas un sitio que se parezca a tu trabajo y no a una plantilla? Hablemos.
Retro Player