On this case research, Isabel Moranta and Yannis Yannakopoulos share insights on the creation of a singular portfolio. On this first half, Isabel shares her story and inventive journey that introduced this portfolio to life:
Crafting a brand new portfolio is each a problem and a inventive journey, squeezed in between different necessary tasks. When life will get busy, the portfolio is commonly the very first thing to be put aside. But, there’s one thing actually satisfying about it. Designing for your self, slightly than for others, is releasing and rewarding in its personal method.
For this portfolio, I needed to embrace a brand new aesthetic—a bolder, riskier artwork course—whereas nonetheless preserving the essence of the earlier one, which I nonetheless maintain expensive. However this time, I felt an additional layer of stress. There’s this unstated expectation that whenever you’re designing for your self, it should mirror your highest. However I don’t fully agree with that. In truth, I typically discover it more durable to create for myself. I overthink, query each alternative, and doubt whether or not it’s “ok.” For this venture, I attempted to battle these emotions head-on.
I’m fascinated by how self-doubt and judgment can hurt creativity, and I’ve felt that weight earlier than—questioning what others may anticipate of me. However this portfolio turned my method of pushing again. I needed to create one thing for myself, specializing in what defines me, and to let go of worrying an excessive amount of in regards to the remaining end result. It’s not about perfection; it’s in regards to the freedom to discover and categorical.
Principal Pillars: Making a Private Expertise
I needed the location to really feel by some means private—one thing that displays my very own style and the issues that matter most to me. But it surely’s a portfolio on the finish of the day, so it’s onerous to suit all the things in; nonetheless, I needed to create some areas that felt like house, and I began by specializing in the issues I like most.
One factor that defines me is my connection to literature and artwork. My main is in English Research and American Literature, so it felt pure to weave that into the location. On the Homepage, I included a quote from Virginia Woolf’s Orlando (1928)—a ebook I am keen on and an writer I deeply admire. It felt like the proper match: profound, darkish, and exquisite, with a robust sense of womanhood. Woolf’s self-awareness, starvation for expertise, and pursuit of authenticity resonate deeply with me. She explored feelings hidden within the unconscious as a type of liberation and self-discovery, which I discover extremely inspiring. One way or the other, I see a portfolio as a strategy to categorical who you’re—professionally, sure, but additionally personally—and I like taking part in in that in-between house.
Music is one other enormous affect. I spent hours designing the location with sure bands on repeat—post-rock teams like Explosions within the Sky, Godspeed You! Black Emperor, Set Fireplace to Flames, Deerhunter, Do Make Say Suppose, and Sigur Rós, amongst others. Their soundscapes helped form the location’s vibe and performed a giant position in setting the temper.
On the About web page, there’s a quote—“Like a Daydream or a Fever”—taken from a GY!BE track I like. It’s a observe I had on repeat in the course of the design course of, and I’ve included the choice to take heed to it straight. Ideally, it’d be nice if folks explored the location whereas taking part in the track—it provides one other layer to the expertise. I do know not everybody searching will do this, however it’s there for many who may. I really feel just like the music and the design complement one another, with the somber tones of the soundtrack balancing and enhancing the location’s total temper. For me, it’s all about that connection between sound and visuals—it brings an added depth that feels true to the venture.
Minimalism and Boldness
I performed with the duality of boldness and minimalism, particularly within the distinction between the 2 fonts used—the monospaced typeface (Century Schoolbook Std Monospaced) and the serif font (Ogg). As we mentioned, the daring serif is primarily used for the large quote moments on the Homepage and About, performing as the principle pillars that anchor the design. In distinction, the minimal monotype is used extra subtly and in smaller sizes, taking up a quieter, extra modest position. The mono feels informational and understated, much more once I drop vowels in sure phrases. The dropping of vowels is a nod to the uncertainty and self-doubt we generally really feel as creatives. These titles that outline us are simply that—titles—they usually carry little that means exterior their particular skilled contexts.
The monospaced kind represents my method as a designer—exact, structured, and deliberate—whereas the serif font speaks to my private aspect, my style, and what I actually take pleasure in. I needed the portfolio to merge these two worlds, reflecting each my skilled identification and my private aesthetic.
Blur Impact
As the location took form, we started exploring which animations and visible results would complement its artwork course. With its somber vibe, musical undertones, and art-and-literature basis, I needed to keep away from something too intrusive. The concept for the blurred impact emerged whereas I used to be considering my profile image. I envisioned a picture that felt aligned with the artwork course – cloaked in a veil of blur.
After I shared this idea with Yannis, he immediately linked and began experimenting with code. Collectively, we refined the concept: the profile photograph would blur, permitting customers to work together via a hover impact, revealing glimpses of the picture beneath. Past the aesthetic ingredient that the interplay has, the blur provides a layer of that means to help uncertainty—a refined metaphor for my transition to independence only a few months in the past.This design alternative turned a nod to the paradox and progress that accompany transitions—whether or not in life, profession, and even the act of reimagining a brand new portfolio.
The blur impact advanced right into a recurring motif all through the location, showing in numerous hover interactions, scroll transitions, and parts just like the venture galleries and archive, to call a number of.
Within the following part, Yannis will share his insights on the event of this venture.
Interactive Noise Background
We needed to have a complementary visible ingredient from the bottom up. We tried a number of completely different choices within the design stage, however when seeing them in actual motion, none of them felt proper. We didn’t wish to have one thing static or geometric, not an svg graphic or a picture, as all of those choices felt out of sync with the temper and environment we have been after. We have been after one thing extra natural and random, so I began experimenting with procedural shapes and patterns.
Noise as an idea was roughly already in, as I used that as a texture for the background. So I began to construct on high of that. The primary video we had within the homepage, was basically the principle inspiration. I needed one thing to accompany the temper of that video, in an interactive however non-intrusive method. In order that the consumer can management the ultimate end result.
Utilizing Perlin noise, the primary static drafts regarded like this:
Getting the appropriate movement for the noise itself was an necessary step as we would have liked to match the general aesthetic we have been after. Not too easy, however not too harsh both:
The mouse interplay half then again, wanted to be fairly easy and have an effect on the noise itself:
On the similar time I needed the consumer to have the ability to management the depth, due to this fact the reveal is velocity delicate. So if you happen to hardly transfer your mouse, you hardly see the noise, however if you happen to really wish to see it, you possibly can transfer your mouse quicker and accomplish that:
Closing contact was to have some sharp shade cutoffs, to match the preliminary video’s movement:
Placing all of it collectively, right here is the ultimate end result, the place you possibly can management/reveal the noise together with your mouse, all through the web site:
404 Web page
Had plenty of enjoyable constructing this 404, because it was an important likelihood to orchestrate all the important thing parts constructed for the venture: The interactive background, the blur reveal (used the principle video this time) and the scrambled textual content impact, all in good sync working collectively right here.
Lowered Movement
Final however not least, because the interactive background might probably trigger some discomfort, I needed to keep in mind the customers’ desire for decreased movement. So if the consumer has this setting on (or toggles it) the web site responds in actual time, loading a simplified model with none impact.
Tech stack
The location was in-built WordPress, utilizing principally our personal instruments. Vanilla JavaScript, curtainsjs for the WebGL half and as in each venture, we used GSAP as our animation platform.
