Responses by Glenn Catteeuw, designer; and Rogier de Boevé, developer.

Background: “As I made the jump from employee to full-time freelancer, I needed a portfolio website to not only show off my work but to also give a sense of who I am,” says Glenn Catteeuw. “Turning my website into an experience itself was very important to me, as I wanted more than just a list of my previous work. The site was a perfect opportunity to show off my talents in digital design to attract brands, agencies and businesses to work with me.”

Design core: “I came up with a distinctive aesthetic pretty quickly,” says Catteeuw. “The site combines my love for distorted textures and materials; grids; and clean, readable graphic design. It’s not really a style that’s suitable for most clients, so it was definitely fun to use on my own website.

“The site’s main feature is changing from a flat website into a 3-D environment using interactivity,” Catteeuw continues. “The page transitions are also a huge part of the whole. Again, I didn’t want it to feel too flat and clean, so I’m glad we pulled it off to make them look very organic.”

Favorite details: “One feature I really like is the neon mode,” Catteeuw points out. “It’s basically pointless, but that’s actually what makes it so fun. Let’s make the web weird again!”

Challenges: “Translating the vision I had in mind of how the website should move and feel,” says Catteeuw. “I made quite a few motion studies so Rogier would know exactly what I wanted. It was a bit of a back-and-forth process, but in the end, it was absolutely worth it.”

“When I started, I thought it as going to be the 3-D responsive grid, because a lot of the other elements on the site depend on its position,” says Rogier de Boevé. “Looking back now, the real challenge was creating a seamless post-processing effect across different layers and masks.”

New skills: “This site was one of the first times I actually included 3-D this heavily in my web design workflow, which was a challenge but liberating as well,” says Catteeuw. “I’m looking forward to doing this more often in the future.”

“I picked up some new techniques to deal with 3-D objects in a pixel-perfect environment while maintaining a responsive layout,” says de Boevé. “It was also the first time that I worked with post-processing masks in three.js.”

Technology: “For the design, I used a mix of After Effects, Cinema4D, Figma and Photoshop,” says Catteeuw. “And, to create the strokes, I used some good old black markers and paper.”

“The site is built with a Jamstack containing Jigsaw as the static generator,” says de Boevé. “This makes it fast, secure and easy to deploy via Netlify. On the front end, we chose a vanilla JavaScript structure alongside three.js and GSAP for animations.”