A Brief Introduction
My journey into pure web development—moving away from the no-code WordPress ecosystems where I first started—has a name: Angel Nin.
Angel, a London-based photographer, was one of my very first clients. He initially brought me on to replace his legacy site with a fresh platform where he could showcase his latest photography and film projects.
Back then, I was still deep in the weeds of web fundamentals. While I had a handle on HTML and CSS and was starting to grasp JavaScript, I was still “training my eye” for design, accessibility, and performance. I finished that project with plenty of grit and excitement, and the result was exactly what he needed. That satisfaction is the ultimate reward in this line of work. However, as the years passed, I felt that the site no longer reflected the level of quality I am now capable of delivering.
Angel didn’t just bet on me when I was starting out; he recommended me to new clients, helping me land the projects that allowed me to grow. For that reason, I felt he deserved a revamped version of my work. I decided to design this reconstruction to return the favor—delivering a modern, technically superior, and far more sophisticated product than the one I built three years ago.
Project Overview
The primary goal of this rebuild wasn’t just a “facelift.” It was about applying a frontend architecture that would allow Angel to compete visually in the high-stakes London market. I wanted a site that loads instantly without sacrificing visual impact, blending modern scroll animations, image lightboxes, and high-resolution video with peak performance.
The previous site felt somewhat static and forced users through inefficient horizontal navigation to discover content. With this new design, I’ve transformed navigation into an immersive experience. By controlling the scroll flow, I guide the user through the page, ensuring every piece of work produced in Angel’s studio gets the attention it deserves.
My aim was for the user to feel the same texture and precision Angel applies in his studio the moment they land on the site. To achieve this, I opted for a design utilizing masks and grain textures, where visual content (Product, Food, and Automotive photography) takes center stage, supported by a fluid scroll narrative.
Astro: A High-Performance Engine
The technical reconstruction centered on one objective: Zero friction. I chose Astro as the primary framework. Since this is a single-page site, Astro allows me to serve ultra-lightweight HTML while maintaining the power of a modern development workflow.
A key highlight was managing the JavaScript lifecycle via astro:page-load. This ensures that all interactivity logic and animations are executed with surgical precision, without losing the speed benefits of a static site.
Media Optimization: Beyond Pixels
In the previous version, we relied on long .mp4 videos that were heavy, pixelated, and slowed down the experience. In this new iteration:
- Image Pipeline: I integrated Astro’s
<Image />component to automatically transform the entire portfolio into .webp format. The result is optimal: images carry significantly less weight while looking infinitely better. - High-Precision Video: We replaced generic files with optimized, chunked versions served based on the device (Desktop vs. Mobile), ensuring a flawless visual texture from the very first second.
Visual Storytelling and Dynamic Scroll with GSAP
What truly separates this site from a conventional portfolio is the use of GSAP (GreenSock Animation Platform). I didn’t want a passive scroll; I wanted to direct the viewer’s eye.
I designed an experience where the scroll itself triggers the visual narrative. Using GSAP, I control the rhythm of the page through:
- Video Scrubbing and Masking: Transitions between projects aren’t just simple cuts; they are fluid reveals that keep the user connected to the content.
- Attention Control: We eliminated inefficient horizontal scrolls in favor of a vertical flow that ensures work is consumed with the right intensity. While some images are displayed horizontally, this is controlled through the power of GSAP under the user’s natural vertical scroll motion. This gives the site a modern aesthetic while ensuring the client’s photographic material is fully viewed.
Design with Soul: Textures and Architecture
The aesthetic evolution is a 200% improvement. We moved away from flat blacks and harsh yellows to a design with depth and grain. The use of masks and grain overlays adds that “soul” an artist’s portfolio requires.
The new architecture organizes Angel’s talent into three strategic pillars:
- Commercial Advertising: High-impact campaigns.
- Product & Gastronomy: Detail-oriented work for the hospitality and restaurant sectors.
- Luxury Automotive: Cinematic motion for prestigious vehicles.
Infrastructure and Final Results
To close the performance loop, the site is managed through Cloudflare. This guarantees the portfolio loads with minimal latency anywhere in the world—vital for his international clientele.
The metrics validate the technical effort. Maintaining a design heavy on animations and video without sacrificing performance is the ultimate challenge:
- 99/100 on Desktop
- 85/100 on Mobile
This new version of angelnin.com is a statement of intent: proof that you can deliver a cutting-edge, textured design without compromising a single millisecond of performance.
