Loading ...

Responses by Clément Merouani, designer; and Guillaume Colombel, developer.

Background: “One year after having started working in photography, I launched a portfolio site that presents my work,” says Clément Merouani. “Being a full-time art director at digital firm Niji Agency, the goal of this portfolio—for the moment—is to simply show my work and make myself known. But, if thanks to the site, camera brands approach me or new clients want to develop photography work with me, then it would be really great!”

Design core: “The site’s primary goal is to give pride of place to my photos with enhanced typography that evokes print,” says Merouani. “To amplify my magazine work, I played with the idea of blister packs, which dissolve at the click of a mouse and let the cover escape. From there, visitors can discover the different photos that make up each series. Besides, the rendering of this dissolving effect looks great, and I think it’s one of the big pluses of my site.”

Process: “The most complex part of this site is clearly the technical, front-end part,” says Merouani. “The sexy part of this site is obviously due to the graphic aspect but also relies heavily on the animations, which are made possible thanks to the front end.”

Navigation structure: “The main goal of the global navigation is to offer the simplest navigation possible, either by scrolling the covers on the home page or by letting yourself be carried from series to series, thanks to the bounce at the end of the page that lets you see the blister for the next series,” says Merouani. “An overview is also offered via the Index part; visitors then discover an infinite wall grouping together all the covers.”

Technology: “The site was developed in native JavaScript,” says Guillaume Colombel. “I tried to use as few frameworks as possible. Nevertheless, I used GSAP for animations and timelines, barba.js for transitions, Locomotive Scroll for smooth scroll, and three.js to manage the WebGL slider of the homepage and the dissolve effect when you enter a project.”

“The portfolio is a progressive web app,” Colombel continues. “This means that when the website is saved to a device it will cache all server requests making this portfolio fully offline available.”

clmt.paris

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In