Designing your individual portfolio: Angel or Demon?
Having the chance to design your portfolio is a course of that’s each thrilling and intensely difficult. Anybody who has gone by this course of is aware of the sensation of seeing infinite potentialities. The shortage of deadlines could make you’re feeling freer in the course of the course of; nonetheless, you want an incredible capability for decision-making to maneuver ahead and never get caught in a loop.
Discovery and Design Part
As a younger designer, I nonetheless have many elements of myself to find and refine, reminiscent of: what my type is or what I wish to convey as a designer. My most important purpose with this mission has at all times been to get pleasure from it, and with that, to create my first personal product by which I might display the joy that designing offers me and my eagerness to innovate.
Feeling that I’m on this stage of discovery, I didn’t wish to give the web site a really sturdy branding. I most popular to create one thing with a extra impartial look, the place the pictures, textual content, animations, and transitions could be the protagonists of the expertise.
The design course of
There are a number of steps I comply with from the second I begin a mission till its launch. The primary one is at all times to assemble inspiration, which doesn’t should be completely from design; it may be any element of curiosity I encounter in the course of the exploration section. I acquire all this inspiration into 5 totally different moodboards: UI, typography, movement, images and miscellaneous.
Then, the inventive section begins. At this stage of design idea section, I take advantage of each my very own creativity and a private checklist, which I replace fairly often, the place I notice down totally different concepts, types, varieties of typography, navigation, results, and far more. I then determine to mix these I deem appropriate for the product in thoughts to attain varied outcomes.
Lastly, as soon as the idea is obvious and visualized, I proceed to arrange a grid construction applicable for the product and create the screens I bear in mind. Alongside this course of, I at all times wish to create the extra advanced transitions and results in After Results to make it simpler for the developer. Moreover, I doc the principle particulars within the Figma file for a greater understanding of how the whole lot ought to work, and likewise, ask some questions associated to creativity or expertise I wish to ask to Lucas (Nam Hai).
From there, I additionally inspired the developer to suggest concepts; having fun with the creativity of a inventive developer is at all times enriching.
As soon as the design section was accomplished, it was time to get in contact with builders who had the talents required for the mission. At that second, I used to be clear that I needed to collaborate with somebody at an identical stage as me, a youngster, rising and enthusiastic about what they do. That’s when Lucas (Nam Hai) appeared to me and introduced all of the concepts I had in thoughts to life.
Preparing for the event fase
Our working course of, in a nutshell, consisted of defining a comprehension section to determine a workflow, discovering the probabilities we had by way of design/expertise, and observing the habits of the varied interactions, transitions, results, and many others.
Growth Part: Crafting a Designer Portfolio with Nuxt 3, OGL, and Lenis
Making a portfolio for a designer requires mix of aesthetic attraction and cutting-edge performance. I’ll take you thru the technical journey of constructing a extremely designed portfolio web site.
The Tech Stack
- Frontend Framework: Nuxt3. Serves because the spine of the mission, chosen primarily for its excellent Developer Expertise (DX). The auto-import options and modular structure enable for streamlined improvement and environment friendly builds. Whereas I utilized just a few of Nuxt3’s built-in instruments, its capabilities have been instrumental in sustaining a clean workflow.
- WebGL with OGL. A light-weight WebGL library that drives the location’s visible results.
- Clean Scrolling with Lenis. It enhances the person interface with clean, seamless scrolling, essential for sustaining an uninterrupted circulation as customers navigate by the designer’s work.
- Customized Animations and Routing. I feel we’ve been all fighting Nuxt transition api in some unspecified time in the future, that’s why I made a customized Routing resolution for Vue of my very own which permit me to make customized and seamless transition between pages, it’s a very unmaintained library that yow will discover right here for inspiration.
The entire magic wouldn’t be potential with out an animation library. I take advantage of my very own Raf supervisor and an handmade animation library too. This provides me full management over my animations makes debuging lots quicker.
Counting on handmade options or quite simple libraries (in addition to Nuxt) makes the event course of marginally quicker and environment friendly.
Mixing the DOM and WebGL
One of many most important level of friction when constructing a webgl expertise is to mix the DOM and the WebGL scene. make an occasion within the DOM be acquired within the webGL scene.
One of many micro-interactions that provides vital aptitude to the web site is the cursor coloration reacting to the picture beneath. This micro interplay is an ideal instance of energy of Vue’s reactivity to create a seamless mix of the webGL scene and the html template. The background coloration detection is dealt by the webGL scene with the Choosing Method:
(this.gl as WebGL2RenderingContext).readBuffer((this.gl as WebGL2RenderingContext).COLOR_ATTACHMENT0);
const dataLumos = new Uint8Array(4);
this.gl.readPixels(
mouse.worth.x * this.dpr / this.renderTargetRatio,
(vh.worth - mouse.worth.y) * this.dpr / this.renderTargetRatio,
1,
1,
this.gl.RGBA, // format
this.gl.UNSIGNED_BYTE, // kind
dataLumos); // typed array to carry consequence
const indexLumos = (dataLumos[0] * 0.2126 + dataLumos[1] * 0.7152 + dataLumos[2] * 0.0722) / 255;
lumosThreshold.worth = indexLumos >= 0.5;Right here is the code to learn the pixel worth below the cursor. I take advantage of vue reactivity to a number of diploma right here : first to retailer the mouse coordinate (mouse), and viewport worth (vh for viewport peak). After which with the Ref lumosThreshold that’s up to date based mostly on the luminosity of the pixel beneath the cursor. lumosThreshold is shared between my webGL scene and my elements by a retailer:
<template>
<div :class="{ darkish: lumosThreshold }" ref="wrapperRef">
///////////////
// cursor template ...
///////////////
</div>
</template>
<script lang="ts" setup>
const { lumosTreshold } = useCursorStore()
///////////////
// cursor inside logic ...
///////////////
</script>Conclusions
The mission has been very difficult; the concepts have been bold and required a excessive degree of creativity and technical ability. Each of us are very blissful and happy with the nice consequence and affect that the web site has had on knowledgeable degree and inside the group. Undoubtedly, we’ve had many studying experiences from one another on this collaboration, which has allowed us to push our concepts to the utmost. It has been a privilege to work collectively.
You’ll be able to comply with our work or be happy to ask!
Contact us at:
Oscar Pico — E-mail · Twitter · LinkedIn
Nam Hai — E-mail · Twitter · LinkedIn
