Case Study: Rogier de Boevé Portfolio — 2024

Insights into the creative process and technical details behind the portfolio of Rogier de Boevé, a Belgium-based creative developer and digital designer.

Introduction

Designing and developing a portfolio is a tough challenge for any designer or developer, and doing so while juggling client projects is even more demanding. It often means working long nights and weekends, constantly questioning whether your concept effectively showcases your vision and skills. For me, it was no different. I had to go through several iterations before finding the right balance.

Inspiration

I’ve always been a big fan of dystopian sci-fi movies like Blade Runner 2049, Mad Max, and Dune with their dark, gritty atmospheres. I wanted this site to evoke the visual aesthetic of these films without crossing into an overly futuristic look. The contrast between the vastness and desolation of landscapes against sleek, advanced sci-fi elements was my main inspiration for the visual design.

However, the inspiration for my portfolio wasn’t actively sought beforehand. Through experimentation, this visual style naturally evolved, influencing different elements like UI and sound design.

Design and Development

With WebGL being so prominent, a site like this benefits from a continuous back-and-forth between design and development. You may have a rough idea of what you want to achieve, but it doesn’t always play out exactly as you thought.

Main visual

The basic idea was to project images or videos onto a grid of transparent cubes, each assigned random alpha values, to create an extra layer of depth. I quickly noticed that completely randomizing the alpha values of each cube did not work due to a lack of structure. I decided to blend random alpha values per row (z-axis) with a per-cube alpha to find the perfect balance between structure and randomness.

For navigating the scene, I don’t move the camera. Instead, I rotate the screens, which are evenly placed along a circular path. I always try to avoid writing too much camera logic because it can become very complex, especially when adding camera panning.

The projection of the project images is synced with the camera but with a slight offset to create a parallax effect. The ‘cube screens’ are hidden when they are out of view to enhance performance.

Rendering pipeline

Since my early days in Photoshop, I’ve always loved experimenting with layers to create complex visual effects. Of course, with WebGL, we can make those layers dynamic and interactive.

I’ve been working for some time on a rendering pipeline that allows me to manipulate and control the rendering sequence with precision, enabling visual layers and effects that can be dynamically adjusted and scaled for performance.

Tech stack

One of the advantages of a personal project is the complete freedom in choosing the tech stack. I have been very happy with the stack used in my recent non-CMS projects, so there was no reason to change it. Considering the amount of content updates and the ease of using a framework like Astro, I decided not to link my site to any CMS.

UI

The user interface adopts a minimalist, sci-fi aesthetic, aiming to complement the overall environment without distracting from the main visual. The layout is deliberately sparse, allowing the main visual to shine without overwhelming it with excessive details.

Sound

Because I aimed to create a cinematic atmosphere, the sound design was crucial. The soundscape needed to reflect the movements within the scene, the vast size of the landscape, and the subtle interactions by the user.

For the ambient sound, I combined a generative composition titled “Drones 2” by Alex Bainter with a sample from AVA Music Group. All other sounds were either samples from AVA or extracted from the ambient sound to create a coherent, immersive experience.

Fonts

I didn’t have to look far for the main monospaced font. JetBrains Mono, a free open-source typeface that I use for coding, was the perfect fit. For the other text elements, I used Neue Haas Grotesk, a highly legible and elegant font that works well in both small and large sizes.

A Note of Thanks

When I released this portfolio update, I was hoping for a positive response but never imagined the overwhelming reactions I received from the community. I want to thank everyone who took the time to comment, like, or share my work. Your support really means a lot to me.

Rogier de Boevé

Independent Freelance Creative Developer & Digital Designer

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!