Case Study: Isabel Moranta Portfolio — 2024

In this case study, Isabel Moranta and Yannis Yannakopoulos share insights on the creation of a unique portfolio. In this first part, Isabel shares her story and creative journey that brought this portfolio to life:

Crafting a new portfolio is both a challenge and a creative journey, squeezed in between other important projects. When life gets busy, the portfolio is often the first thing to be set aside. Yet, there’s something really satisfying about it. Designing for yourself, rather than for others, is freeing and rewarding in its own way.

For this portfolio, I wanted to embrace a new aesthetic—a bolder, riskier art direction—while still preserving the essence of the previous one, which I still hold dear. But this time, I felt an extra layer of pressure. There’s this unspoken expectation that when you’re designing for yourself, it must reflect your very best. But I don’t entirely agree with that. In fact, I often find it harder to create for myself. I overthink, question every choice, and doubt whether it’s “good enough.” For this project, I tried to fight those feelings head-on.

I’m fascinated by how self-doubt and judgment can harm creativity, and I’ve felt that weight before—wondering what others might expect of me. But this portfolio became my way of pushing back. I wanted to create something for myself, focusing on what defines me, and to let go of worrying too much about the final result. It’s not about perfection; it’s about the freedom to explore and express.

Main Pillars: Creating a Personal Experience

I wanted the site to feel somehow personal—something that reflects my own taste and the things that matter most to me. But it’s a portfolio at the end of the day, so it’s hard to fit everything in; however, I wanted to create some spaces that felt like home, and I started by focusing on the things I love most.

One thing that defines me is my connection to literature and art. My major is in English Studies and American Literature, so it felt natural to weave that into the site. On the Homepage, I included a quote from Virginia Woolf’s Orlando (1928)—a book I adore and an author I deeply admire. It felt like the perfect fit: profound, dark, and beautiful, with a strong sense of womanhood. Woolf’s self-awareness, hunger for experience, and pursuit of authenticity resonate deeply with me. She explored emotions hidden in the subconscious as a form of liberation and self-discovery, which I find incredibly inspiring. Somehow, I see a portfolio as a way to express who you are—professionally, yes, but also personally—and I love playing in that in-between space.

Music is another huge influence. I spent hours designing the site with certain bands on repeat—post-rock groups like Explosions in the Sky, Godspeed You! Black Emperor, Set Fire to Flames, Deerhunter, Do Make Say Think, and Sigur Rós, among others. Their soundscapes helped shape the site’s vibe and played a big role in setting the mood.

On the About page, there’s a quote—“Like a Daydream or a Fever”—taken from a GY!BE song I love. It’s a track I had on repeat during the design process, and I’ve included the option to listen to it directly. Ideally, it’d be great if people explored the site while playing the song—it adds another layer to the experience. I know not everyone browsing will do that, but it’s there for those who might. I feel like the music and the design complement each other, with the somber tones of the soundtrack balancing and enhancing the site’s overall mood. For me, it’s all about that connection between sound and visuals—it brings an added depth that feels true to the project.

Minimalism and Boldness

I played with the duality of boldness and minimalism, especially in the contrast between the two fonts used—the monospaced typeface (Century Schoolbook Std Monospaced) and the serif font (Ogg). As we discussed, the bold serif is primarily used for the big quote moments on the Homepage and About, acting as the main pillars that anchor the design. In contrast, the minimal monotype is used more subtly and in smaller sizes, taking on a quieter, more modest role. The mono feels informational and understated, even more when I drop vowels in certain words. The dropping of vowels is a nod to the uncertainty and self-doubt we sometimes feel as creatives. Those titles that define us are just that—titles—and they carry little meaning outside their specific professional contexts.

The monospaced type represents my approach as a designer—precise, structured, and deliberate—while the serif font speaks to my personal side, my taste, and what I truly enjoy. I wanted the portfolio to merge these two worlds, reflecting both my professional identity and my personal aesthetic.

Blur Effect

As the site took shape, we began exploring which animations and visual effects would complement its art direction. With its somber vibe, musical undertones, and art-and-literature foundation, I wanted to avoid anything too intrusive. The idea for the blurred effect emerged while I was contemplating my profile picture. I envisioned an image that felt aligned with the art direction – cloaked in a veil of blur.

When I shared this concept with Yannis, he instantly connected and started experimenting with code. Together, we refined the idea: the profile photo would blur, allowing users to interact through a hover effect, revealing glimpses of the image beneath. Beyond the aesthetic element that the interaction has, the blur adds a layer of meaning to support uncertainty—a subtle metaphor for my transition to independence just a few months ago.This design choice became a nod to the ambiguity and growth that accompany transitions—whether in life, career, or even the act of reimagining a new portfolio.

The blur effect evolved into a recurring motif throughout the site, appearing in various hover interactions, scroll transitions, and elements like the project galleries and archive, to name a few.

In the following section, Yannis will share his insights on the development of this project.

Interactive Noise Background

We wanted to have a complementary visual element from the ground up. We tried several different options in the design stage, but when seeing them in real action, none of them felt right. We didn’t want to have something static or geometric, not an svg graphic or an image, as all of these options felt out of sync with the mood and atmosphere we were after. We were after something more organic and random, so I started experimenting with procedural shapes and patterns.

Noise as a concept was more or less already in, as I used that as a texture for the background. So I started to build on top of that. The main video we had in the homepage, was essentially the main inspiration. I wanted something to accompany the mood of that video, in an interactive but non-intrusive way. So that the user can control the final outcome.

Using Perlin noise, the first static drafts looked like this:

Getting the right motion for the noise itself was an important step as we needed to match the overall aesthetic we were after. Not too smooth, but not too harsh either:

The mouse interaction part on the other hand, needed to be quite smooth and affect the noise itself:

At the same time I wanted the user to be able to control the intensity, therefore the reveal is velocity sensitive. So if you hardly move your mouse, you hardly see the noise, but if you actually want to see it, you can move your mouse faster and do so:

Final touch was to have some sharp color cutoffs, to match the initial video’s motion:

Putting it all together, here is the final result, where you can control/reveal the noise with your mouse, throughout the website:

404 Page

Had a lot of fun building this 404, as it was a great chance to orchestrate all the key elements built for the project: The interactive background, the blur reveal (used the main video this time) and the scrambled text effect, all in perfect sync working together here.

Reduced Motion

Last but not least, since the interactive background could potentially cause some discomfort, I wanted to take into account the users’ preference for reduced motion. So if the user has this setting on (or toggles it) the website responds in real time, loading a simplified version without any effect.

Tech stack

The site was built in WordPress, using mostly our own tools. Vanilla JavaScript, curtainsjs for the WebGL part and as in every project, we used GSAP as our animation platform.

Credits

• Design and Art Direction: Isabel Moranta
• Development: Yannis Yannakopoulos