Introduction
Designing and creating a portfolio is a troublesome problem for any designer or developer, and doing so whereas juggling consumer initiatives is much more demanding. It usually means working lengthy nights and weekends, continually 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 appropriate stability.
Inspiration
I’ve at all times been a giant fan of dystopian sci-fi motion pictures like Blade Runner 2049, Mad Max, and Dune with their darkish, gritty atmospheres. I wished this website to evoke the visible aesthetic of those movies with out crossing into an excessively futuristic look. The distinction between the vastness and desolation of landscapes towards glossy, superior sci-fi parts was my most important inspiration for the visible design.
Nonetheless, the inspiration for my portfolio wasn’t actively sought beforehand. By way of experimentation, this visible model naturally developed, influencing totally different parts like UI and sound design.
Design and Growth
With WebGL being so distinguished, a website like this advantages from a steady back-and-forth between design and improvement. You could have a tough thought of what you need to obtain, however it doesn’t at all times play out precisely as you thought.
Foremost visible
The fundamental thought was to undertaking photos or movies onto a grid of clear cubes, every assigned random alpha values, to create an additional layer of depth. I rapidly observed that fully randomizing the alpha values of every dice didn’t work attributable to 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 right stability 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 at all times attempt to keep away from writing an excessive amount of digicam logic as a result of it might change into very advanced, particularly when including digicam panning.
The projection of the undertaking photos 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 at all times cherished experimenting with layers to create advanced visible results. In fact, with WebGL, we are able to make these layers dynamic and interactive.
I’ve been working for a while on a rendering pipeline that enables me to govern 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 current non-CMS initiatives, so there was no motive to alter it. Contemplating the quantity of content material updates and the convenience of utilizing a framework like Astro, I made a decision to not hyperlink my website to any CMS.
UI
The consumer interface adopts a minimalist, sci-fi aesthetic, aiming to enrich the general surroundings with out distracting from the principle visible. The format 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 environment, the sound design was essential. The soundscape wanted to mirror the actions inside the scene, the huge measurement of the panorama, and the refined interactions by the consumer.
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 have been both samples from AVA or extracted from the ambient sound to create a coherent, immersive expertise.
Fonts
I didn’t need to look far for the principle monospaced font. JetBrains Mono, a free open-source typeface that I exploit for coding, was the right match. For the opposite textual content parts, I used Neue Haas Grotesk, a extremely legible and chic font that works properly in each small and enormous sizes.
A Be aware of Thanks
Once I launched this portfolio replace, I hoped for a optimistic response however by no means imagined the overwhelming reactions I acquired from the neighborhood. I need to thank everybody who took the time to remark, like, or share my work. Your help actually means loads to me.