From our sponsor: Agent.ai Builder is now open—no waitlist. Explore 12+ foundation models, no-code to full-code. Free!
Blending Design and Photography
Creating a portfolio isn’t just about displaying work it’s about sharing a story that connects on a deeper level. I feel like design and photography are parts of who I am creatively. One inspires the other, and that connection is at the heart of my process.
When I started planning my portfolio, I knew I wanted it to do more than just highlight these disciplines individually. I wanted it to reflect the way they coexist and influence each other. The result is an infinite scroll homepage that invites users to explore both design and photography together, creating an immersive experience. To dive deeper into my travel photography, I built a dedicated horizontal scroll page, offering a unique way to engage with the stories behind the images. This case study walks through the journey of bringing that vision to life, from the first concept to the final site.
Design Phase: Find the Correct Balance
The biggest challenge I faced was finding a way to present and differentiate the design and photography sections while keeping them visually connected. I’ve always admired the Swiss approach to typography, so it felt natural to choose a clean, sans-serif font to represent the design side. The harder decision was selecting a typeface for the photography section. After countless explorations, I landed on one that felt simple yet elegant and refined without creating too much contrast. Striking this balance was key to making both sections feel distinct yet cohesive within the overall design.
The visuals went through a lot of evolution throughout the project. Initially, I focused on creating a clean, modern layout that would reflect the connection between design and photography. But as we progressed, it became clear that the interactions and transitions would play a huge role in bringing the visuals to life.
Whenever I start designing, I can’t help but imagine how the interactions and animations will flow. It’s like the ideas are already playing out in my head. That’s where After Effects comes in, it’s my go-to tool for prototyping interactions and bringing those ideas to life long before they make it to the screen.
Making It as Smooth as Possible
From the start, my goal was to make every interaction and transition feel as smooth as possible. When I shared the concept with Gabriel, he immediately began experimenting with the infinite scroll homepage. He developed a custom scrolling system that perfectly synchronizes all the looping animations on the homepage while also implementing horizontal scrolling for the photography section. This tailored approach ensured a seamless and immersive experience, aligning perfectly with the vision I had for the portfolio.
We experimented with various ways to handle animations in a simple and clean manner. We didn’t want anything overly elaborate. Instead we decided to focus on the basics: Position, Opacity, and Clip Masks. These three parameters, when paired with the right easing and timing, can create transitions that feel incredibly smooth and fluid.
This project was both challenging and rewarding, as the ideas we had were ambitious and needed a mix of creativity and technical skill. Gabriel and I are really happy with the result and the positive impact the website has had both professionally and socially within the community. Working together was a great learning experience, and it pushed our ideas further than we expected. It’s been a privilege to collaborate on this project and bring it to life.
The Tech Stack
- Framework: Nuxt.js
- Animations: GSAP
- Scroll: Custom Smooth Scroll
Conclusion
The feedback I’ve received so far has been incredibly encouraging. Users have commented on how seamless and immersive the website feels, especially with the infinite scroll and the horizontal navigation for the photography section. Some have noted that the transitions and animations add an extra layer of engagement without being overwhelming, which was exactly what I aimed for. Hearing how the design resonates with both creative professionals and casual visitors has been incredibly rewarding.
Credits
- Design: Gianluca Gradogna
- Development: Gabriel Norman