Blue Flower

24 Sept 2024

Building My Portfolio on Framer

Building My Portfolio on Framer

It started with a spark—a simple idea to revamp my portfolio and showcase my work in a way that felt fresh, interactive, and authentically me. I’ve gone through the typical route of static portfolios before—case studies stacked one after the other, with each project feeling a bit disjointed. This time, I wanted something more fluid, something that reflected my evolution as a designer. Framer seemed like the perfect tool to bring this vision to life, and the journey was anything but straightforward.


Finding the Right Tool: Why Framer?

Let me be honest—choosing Framer wasn’t a snap decision. I’d played with other tools in the past, but Framer always felt a bit different. There was something about its flexibility, its ability to let me build interactions without diving into endless code, that got me intrigued. Framer offered the kind of customisation I needed to make my portfolio stand out—not just in terms of design, but in how it could engage the user.

The idea of adding micro-interactions to my portfolio was particularly exciting. I wanted users to feel like they were discovering something new with each click, hover, or swipe. I didn’t want to build a portfolio—I wanted to craft an experience. And for that, Framer became my playground.


The Blank Slate: Where to Begin?

It’s strange how intimidating a blank canvas can be. I had all these ideas floating around in my head, but how do you bring them to life? The first step was defining what I wanted the portfolio to say about me. Sure, I could dump all my case studies into neat little boxes, but that felt impersonal, formulaic. I wanted the portfolio to communicate my design process—the way I think, solve problems, and create.

The first few days were spent sketching out wireframes, figuring out the structure. I knew I wanted to keep it clean—less is more was the mantra, but how do you balance simplicity with depth? My past work ranged from UX case studies to service design projects, and I had to make sure the portfolio would weave them together in a way that felt cohesive, not fragmented.


Designing for Yourself: The Hardest Client

You’d think designing for yourself would be easy, but spoiler alert—it’s not. The early iterations of my portfolio were overly designed. I had gradients, pops of colour everywhere, animations that just felt… too much. After all, this wasn’t a flashy product demo—it was my work. The portfolio needed to feel professional yet approachable.

I took a step back and thought, “What do I want people to feel when they visit my portfolio?” Clarity, engagement, and a sense of who I am as a designer. I scrapped most of the fancy animations and decided to focus on subtlety. Whitespace became my best friend. Each element was given breathing room, allowing the content to speak for itself without overwhelming the user.


The Iterative Process: Embracing Feedback

The first version wasn’t perfect. Heck, the second wasn’t either. I showed it to a few colleagues, who, bless them, didn’t hold back. “It’s clean, but I don’t know where to look first.”

“Why does this part feel disconnected from the rest of the portfolio?”

It was exactly what I needed. I realised that, as much as I loved playing with Framer’s features, I had to be intentional. I went back to my design principles—simplicity, functionality, and flow—and revised. The next iteration had a clearer navigation structure. I toned down the interactions, only keeping the ones that added value.

This was a big lesson for me—less can be more, but only when done right. Too little, and your work feels dry. Too much, and it becomes overwhelming. The key was balance.


Testing: Like Any Other Product

When the portfolio finally felt “complete” (though, is it ever?), I ran it through user tests just like I would with any product design. My friends acted as mock clients, navigating through my case studies, interacting with the elements. I watched their behaviours closely, noting where they hesitated or got confused.

The feedback was invaluable. For instance, they loved the swipe interactions I’d added to one case study, but thought the hover effects on another project were too subtle to be noticed. The portfolio, much like any product, was evolving with each test.


Going Live: The Final Step

There’s nothing quite like the feeling of hitting “publish” on a project you’ve poured weeks into. It’s part exhilarating, part terrifying. But Framer made the process surprisingly smooth. Unlike other tools, which can sometimes feel rigid once you go live, Framer allowed me to keep iterating. After launching, I immediately noticed small things I wanted to tweak. A button here, a font size there. It was a relief knowing that I could keep improving the portfolio without having to overhaul the entire thing.


Reflections: What I’ve Learned

The journey of building this portfolio has taught me a lot about my own design process. It wasn’t just about putting my work on display—it was about creating something that reflected how I think and solve problems. Framer gave me the tools to push boundaries, but it was the feedback loop, the countless revisions, that made the project what it is.

Is the portfolio “done”? Honestly, no. I don’t think it ever will be. And that’s the beauty of it. Just like my career, my portfolio is a living, breathing entity. It grows, evolves, and changes with each new project, each new insight. And I’m okay with that.

Because design isn’t about perfection—it’s about progress.


The Beginning of Something Bigger

If there’s one takeaway from this experience, it’s that your portfolio is never just a collection of your past work. It’s a reflection of where you’re headed. For me, building my portfolio on Framer was about embracing new possibilities, stepping out of my comfort zone, and continually evolving as a designer. I can’t wait to see where it goes next.

Create a free website with Framer, the website builder loved by startups, designers and agencies.