Jonathan Grado: A Cinematic Photography Portfolio
02.06.25
Post
Jonathan Grado is a multidisciplinary photographer born in Brooklyn and based in Austin. Growing up in the creative environment of Grado Labs—a Brooklyn audio company with a legacy spanning three generations—Jonathan developed an eye for detail and a passion for storytelling.
His work blends photography with design, evoking the feel of a movie through a mix of surreal narratives and cinematographic visuals. Concrete Club approached us to help build his new website—a portfolio that not only showcases his photography projects but also reflects his creative vision.
The primary goal was to create a platform that would showcase Jonathan’s work as a photography portfolio, giving prominence to his images and narrative while allowing his work to speak for itself. At the same time, the site had to be flexible enough for Jonathan to rearrange content and highlight different projects as needed.
Key objectives were:
- Showcase his Work: Present Jonathan’s photography and case studies with a cinematic feel.
- Give him creative Freedom: Allow Jonathan to update and rearrange the website easily through a component-based system.
- Improve the user exeprience using Subtle Interactions: Implement smooth animations and transitions that enhance the storytelling without drawing attention to the technical work.
Key Features
Dynamic Hero Section
We started with a dynamic hero section. The homepage opens with a video that adapts to both light and dark modes. Jonathan can select his current location—New York, Austin, or Los Angeles—from his Webflow dashboard. This updates the site to display the current time for that location, a small but effective detail that adds a personal touch.
Modular, Component-Based Layout
The homepage and photography pages are built using a component-based approach. This modular design allows Jonathan to easily rearrange content to highlight different projects or change the focus as needed.
Photography Listing Grid
The photography grid is designed to be versatile and flexible, ensuring that each series is displayed to emphasize the strength of the images. We kept animations to a minimum in this section so that the photos remain the main focus.
Detailed Showcase of Projects
Each photography project has its own dedicated page built with reusable components. These detailed showcase pages allow visitors to view an index of images, click to expand, and navigate through each series seamlessly. This setup is managed via Webflow’s CMS, making it simple for Jonathan to update his work as his portfolio grows.
Subtle Text Animations and Transitions
We also integrated subtle text animations and gentle transitions throughout the site. These micro-interactions help guide visitors through the content without distracting from the images or the narrative. Every photography project gets its own dedicated page, built with a set of reusable components that Jonathan can manage easily through Webflow’s CMS.
Distinct Information Page
The information page stands out with a red background and a noise effect. Every time the page loads, the hero title appears in a different font—a nod to the cinematic feel Jonathan’s work inspires.
Overall Experience
Design and Assets
The site is built around the excellent design provided by Concrete Club and the high-quality assets from Jonathan. Our role was to magnify these elements by keeping the development and animations understated, so the focus remains on Jonathan’s work.
Freedom and Consistency
The final website offers Jonathan full creative freedom to arrange content while maintaining a consistent, clean design that supports his storytelling.
Design and Development Process
Design
The design for the site was conceived by Concrete Club, resulting in a layout that is both visually striking and flexible. The clean, editorial style ensures that Jonathan’s images and narratives are the focal point. The use of a neutral color palette with strategic pops of color ties the site together and echoes the cinematic quality of his work.
Development
Tools and Techniques
The website was built in Webflow with smooth interactions powered by GSAP and Barba.js. Barba.js, in particular, played a key role in creating fast, seamless page transitions without any full-page reloads. This approach allows for dynamic content swapping and ensures that users experience a consistently fluid and uninterrupted navigation flow throughout the site.
Implementation
Our approach was to keep the technical elements invisible. The development work supports the design without drawing attention away from the content. This meant fine-tuning transitions and animations so that they enhanced the storytelling rather than becoming the focus themselves.
Challenges
While the technical challenges were minimal compared to the creative vision, aligning the dynamic elements—such as the time zone feature and the modular components—required careful integration. Through iteration and refinement, we achieved a harmonious result that allows the design and assets to shine.
Technologies
Frontend Frameworks and Libraries:
- Webflow
- GSAP
- Barba.js
- Lenis Scroll
The final website successfully serves as a communication asset for Jonathan Grado.
It not only showcases his photography projects with a cinematic quality but also provides him with a flexible platform to share blog posts and updates. The project allowed us to experiment with new techniques while ensuring that the development work remained in the background, amplifying the excellent design and assets provided by Jonathan and Concrete Club.
Ultimately, Jonathan Grado’s website demonstrates how subtle interactions and clean design can effectively bring a creative vision to life. It reflects his multidisciplinary approach—a harmonious blend of photography, design, and storytelling that is both modern and timeless.
