Sunday, February 9, 2025
HomeWeb developmentRogier de Boevé's Portfolio 2024

Rogier de Boevé’s Portfolio 2024


Introduction

Designing and creating a portfolio is a troublesome problem for any designer or developer, and doing so whereas juggling shopper initiatives is much more demanding. It typically means working lengthy nights and weekends, always questioning whether or not your idea successfully showcases your imaginative and prescient and abilities. For me, it was no totally different. I needed to undergo a number of iterations earlier than discovering the correct steadiness.

Inspiration

I’ve all the time been a giant fan of dystopian sci-fi films like Blade Runner 2049, Mad Max, and Dune with their darkish, gritty atmospheres. I needed this website to evoke the visible aesthetic of those movies with out crossing into a very futuristic look. The distinction between the vastness and desolation of landscapes in opposition to modern, superior sci-fi parts was my essential inspiration for the visible design.

Nevertheless, the inspiration for my portfolio wasn’t actively sought beforehand. By way of experimentation, this visible fashion naturally advanced, influencing totally different parts like UI and sound design.

Design and Improvement

With WebGL being so distinguished, a website like this advantages from a steady back-and-forth between design and improvement. You might have a tough concept of what you need to obtain, nevertheless it doesn’t all the time play out precisely as you thought.

Foremost visible

The essential concept was to undertaking photographs or movies onto a grid of clear cubes, every assigned random alpha values, to create an additional layer of depth. I shortly seen that fully randomizing the alpha values of every dice didn’t work resulting from a scarcity of construction. I made a decision to mix random alpha values per row (z-axis) with a per-cube alpha to seek out the proper steadiness between construction and randomness.

For navigating the scene, I don’t transfer the digicam. As a substitute, I rotate the screens, that are evenly positioned alongside a round path. I all the time attempt to keep away from writing an excessive amount of digicam logic as a result of it will probably grow to be very advanced, particularly when including digicam panning.

The projection of the undertaking photographs is synced with the digicam however with a slight offset to create a parallax impact. The ‘dice screens’ are hidden when they’re out of view to boost efficiency.

Rendering pipeline

Since my early days in Photoshop, I’ve all the time beloved experimenting with layers to create advanced visible results. After all, with WebGL, we will make these layers dynamic and interactive.

I’ve been working for a while on a rendering pipeline that permits me to control and management the rendering sequence with precision, enabling visible layers and results that may be dynamically adjusted and scaled for efficiency.

Tech stack

One of many benefits of a private undertaking is the entire freedom in selecting the tech stack. I’ve been very pleased with the stack utilized in my latest non-CMS initiatives, so there was no motive to alter it. Contemplating the quantity of content material updates and the benefit of utilizing a framework like Astro, I made a decision to not hyperlink my website to any CMS.

UI

The person interface adopts a minimalist, sci-fi aesthetic, aiming to enhance the general atmosphere with out distracting from the principle visible. The structure is intentionally sparse, permitting the principle visible to shine with out overwhelming it with extreme particulars.

Sound

As a result of I aimed to create a cinematic ambiance, the sound design was essential. The soundscape wanted to mirror the actions throughout the scene, the huge dimension of the panorama, and the delicate interactions by the person.

For the ambient sound, I mixed a generative composition titled “Drones 2” by Alex Bainter with a pattern from AVA Music Group. All different sounds had been both samples from AVA or extracted from the ambient sound to create a coherent, immersive expertise.

Fonts

I didn’t must look far for the principle monospaced font. JetBrains Mono, a free open-source typeface that I take advantage of for coding, was the proper match. For the opposite textual content parts, I used Neue Haas Grotesk, a extremely legible and stylish font that works properly in each small and huge sizes.

A Word of Thanks

After I launched this portfolio replace, I hoped for a constructive response however by no means imagined the overwhelming reactions I acquired from the group. I need to thank everybody who took the time to remark, like, or share my work. Your help actually means loads to me.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments