From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
- Astro: Static site generation
- Alien.js: WebGL utilities
- GSAP: Animation
- Howler.js: Audio
- Lenis: Smooth scrolling
- Three.js WebGL framework
- PostCSS / Tailwind CSS: CSS management
- Vite: Front-end tooling
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.
