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 usually means working lengthy nights and weekends, continually questioning whether or not your idea successfully showcases your imaginative and prescient and expertise. For me, it was no totally different. I needed to undergo a number of iterations earlier than discovering the best stability.
Inspiration
I’ve at all times been an enormous fan of dystopian sci-fi motion pictures like Blade Runner 2049, Mad Max, and Dune with their darkish, gritty atmospheres. I needed this web site 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 components was my principal inspiration for the visible design.
Nevertheless, the inspiration for my portfolio wasn’t actively sought beforehand. By experimentation, this visible fashion naturally developed, influencing totally different components like UI and sound design.
Design and Improvement
With WebGL being so distinguished, a web site like this advantages from a steady back-and-forth between design and growth. You will have a tough thought of what you need to obtain, however it doesn’t at all times play out precisely as you thought.
Most important visible
The essential thought was to venture pictures or movies onto a grid of clear cubes, every assigned random alpha values, to create an additional layer of depth. I shortly observed that utterly randomizing the alpha values of every dice didn’t work because of a scarcity of construction. I made a decision to mix random alpha values per row (z-axis) with a per-cube alpha to search out the right stability between construction and randomness.
For navigating the scene, I don’t transfer the digicam. As an alternative, 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 could actually develop into very complicated, particularly when including digicam panning.
The projection of the venture pictures 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 reinforce efficiency.
Rendering pipeline
Since my early days in Photoshop, I’ve at all times liked experimenting with layers to create complicated 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 venture is the whole 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 purpose 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 web site to any CMS.
UI
The consumer interface adopts a minimalist, sci-fi aesthetic, aiming to enhance the general setting with out distracting from the primary visible. The structure is intentionally sparse, permitting the primary 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 throughout the scene, the huge dimension of the panorama, and the delicate 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 primary monospaced font. JetBrains Mono, a free open-source typeface that I take advantage of for coding, was the right match. For the opposite textual content components, I used Neue Haas Grotesk, a extremely legible and stylish font that works nicely in each small and enormous sizes.
A Word of Thanks
After 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 assist actually means lots to me.
