Pequeña introducción
Mis inicios en el desarrollo web puro, alejado de las soluciones no-code de WordPress con las que empecé, tienen un nombre propio: Ángel Nin.
Ángel, fotógrafo afincado en Londres, fue uno de mis primeros clientes. Me contrató porque quería cambiar su antigua página web por una nueva en la que pudiese compartir sus nuevos trabajos y proyectos de fotografía y vídeo.
Por aquel entonces, yo estaba sumergido en las bases de la programación web. Aunque ya dominaba HTML, CSS y empezaba a entender JavaScript, todavía estaba forjando mi “ojo” para el diseño, la accesibilidad web y el rendimiento. Con mucha ilusión y ganas logré terminar el proyecto y el resultado fue el que él estaba buscando. Lo cual es siempre la mayor recompensa y el objetivo fundamental de nuestro trabajo. Sin embargo, con el paso de los años, sentía que la web se estaba quedando atrás respecto a lo que yo era capaz de ofrecer ahora.
Ángel no solo apostó por mí cuando estaba empezando, sino que también me recomendó a nuevos clientes y gracias a ello conseguí nuevos proyectos en los que seguir creciendo. Por este motivo, sentía que se merecía una versión renovada de mi trabajo. Y decidí diseñar esta reconstrucción para devolverle el favor con un producto moderno, técnicamente superior y mucho más sofisticado que aquel que pude entregar hace tres años.
Descripción general del Proyecto
El objetivo principal de esta reconstrucción no era solo “un lavado de cara” al diseño, sino aplicar un desarrollo frontend que permitiera a Ángel competir visualmente en el mercado de Londres. Con una web que cargue de forma instantánea pero sin perder el potencial visual, combinando animaciones modernas de scroll, lightbox de imágenes, vídeos y fotografías con una buena resolución y performance.
La antigua web se sentía un poco fría y obligaba al usuario a navegar horizontalmente en algunas secciones para descubrir el contenido. Con este nuevo diseño, he logrado que la navegación se sienta como una experiencia inmersiva. Ya que controlo el scroll de la web para dirigir al usuario por toda la página y asegurarme de que ve todo el trabajo que Ángel realiza en su estudio.
Con este nuevo diseño he pretendido que el usuario, al entrar, sintiera la misma textura y precisión que Ángel aplica en su estudio. Para ello, he optado por un diseño con texturas y máscaras donde el contenido visual (fotografía de producto, alimentación y automoción) fuera el protagonista absoluto, apoyado por una narrativa de scroll fluida.
Astro: Un cohete de alto rendimiento
La reconstrucción técnica ha girado en torno a un objetivo: Cero fricción. He utilizado Astro como herramienta principal. Al ser una web de una sola página, Astro me permite servir HTML ultra ligero con la potencia de un desarrollo moderno.
Un punto clave ha sido la gestión del ciclo de vida de JavaScript a través de astro:page-load. Esto asegura que toda la lógica de interactividad y las animaciones se ejecuten con gran precisión. Sin perder todos los beneficios de velocidad de una web estática.
Optimización de Media: El adiós a los píxeles
En la versión anterior, usábamos vídeos .mp4 de larga duración que resultaban pesados, pixelados y lastraban la experiencia. En esta nueva versión:
- Pipeline de Imágenes: He integrado el componente
<Image />de Astro para transformar automáticamente todo el portfolio a formato .webp. El resultado es óptimo: las imágenes ahora pesan mucho menos, pero se ven infinitamente mejor. - Vídeo de alta precisión: Hemos sustituido archivos genéricos por versiones optimizadas y fragmentadas, servidas según el dispositivo (Desktop vs. Mobile), asegurando una textura visual impecable desde el primer segundo.
Narrativa Visual y Scroll Dinámico con GSAP
Lo que realmente separa a esta web de un portfolio convencional es el uso de GSAP (GreenSock Animation Platform). No quería un scroll pasivo; quería dirigir la mirada del usuario.
He diseñado una experiencia donde el scroll activa una narrativa visual. Gracias a GSAP, controlo el ritmo de la página mediante:
- Scrubbing de vídeo y máscaras: Las transiciones entre proyectos no son simples cortes; son revelados fluidos que mantienen al usuario conectado al contenido.
- Control de la atención: Eliminamos los scrolls horizontales ineficientes por un flujo vertical que garantiza que el trabajo se consuma con la intensidad adecuada. Y sí, en una de las secciones mostramos imágenes desde un punto de vista horizontal, pero es controlado gracias al poder de GSAP, y ocurre bajo el movimiento de scroll habitual que realiza el usuario. Es decir, que otorgamos a la web un aspecto visual y moderno pero controlamos que el usuario vea todo el material fotográfico de nuestro cliente.
Diseño con Alma: Texturas y Organización
El cambio estético es un 200% superior. Hemos evolucionado de un negro plano y un amarillo estridente a un diseño con texturas y profundidad. El uso de máscaras y capas de grano añade ese “alma” que un portfolio de autor necesita.
La arquitectura ahora organiza el talento de Ángel en tres áreas estratégicas:
- Fotografía publicitaria: Campañas de alto impacto.
- Producto y Gastronomía: Detalle para el sector de hostelería y restauración.
- Automoción de lujo: Movimiento cinematográfico para vehículos de prestigio.
Infraestructura y Resultados Finales
Para cerrar el círculo de rendimiento, la web está gestionada a través de Cloudflare. Esto garantiza que el portfolio cargue con latencia mínima en cualquier parte del mundo, algo vital para sus clientes internacionales.
Los números validan el esfuerzo técnico. Mantener un diseño cargado de animaciones y vídeo sin sacrificar el performance es el reto definitivo:
- 99/100 en Desktop
- 85/100 en Mobile
Esta nueva versión de angelnin.com es una declaración de intenciones: demostrar que se puede ofrecer un diseño vanguardista y cargado de textura sin comprometer ni un solo milisegundo de rendimiento.
