How I rebuilt my portfolio to make it clearer, more consistent, and better showcase both design and development work.
Overview
Designing my Portfolio
This project showcases how I refreshed my portfolio, focusing on its structure, storytelling, and overall clarity. It builds on lessons from my previous two portfolios and continues my focus on refining how I design and build with Framer. It compared to my previous portfolios the first, a squarespace site, and second but first framer site, is much more narrow in the work being presented.
Role
Product Designer
Timeframe
2-4 weeks
Team
Me
Tools
Problem
My previous portfolio wasn’t communicating my work or process effectively. From Google Analytics, I noticed that the average session duration was only ~30-40 seconds.
This meant visitors were skimming and leaving before exploring my projects. I realised that the site’s layout, navigation, and visual hierarchy didn’t invite deeper engagement. It also became bloated with content, requiring too many steps to find my work. Separate pages for design and development added unnecessary friction.
Solution
I rebuilt my portfolio from the ground up with a focus on clarity, consistency, and storytelling.
Throughout the process I validated layout choices with peers and small usability checks to ensure the information hierarchy felt intuitive for first-time visitors. I've also started reading and looking at portfolios that Florian reviews on his blog to get feedback from an experienced designer but also taking some inspiration from other portfolios.
Introduced a unified colour and typography system to create visual harmony.
Simplified navigation and reduced visual clutter so visitors could reach projects in one click.
Re-structured project pages around a clear problem → solution → outcome narrative.
Wireframing
To avoid past mistakes I decided to start from scratch (mostly). I first prioritized how I present my projects on the homepage and the project pages themselves.
I utilized Figma to ideate the structure, early look at the style, and finalizing my ideas. The ideate and wireframe time was brief as I had a good idea of it all but wanted to be sure and validate said ideas. There was of course still changes as I realized everything mainly how I would structure all the content and basically the presentation of it all.
Final Design
Subject to Change
This is how everything turned out. Perhaps a bit rough around some edges but mostly put together and all there to continue improving and refining.
There have been many changes as I was building this site but I do believe I’ve landed on a good direction to take it in. The foundation is good and I can continue to think, refine and understand how to better present myself and my work. Of course as there were changes when I was working on this site the work will continue to be done after I have “finished” and so just about everything is subject to change.
Design & Development
Core Feature
This is my approach and solution to the problem of me as a designer growing a more diverse skillset in front-end development.
This was one of the main reasons for this portfolio coming to be, I needed a solution in which I can present a project in both the design and development work. Somewhat fortunately I only currently learn and work with front-end development translating the design → code. This does make it much simpler but I imagine the solution I have could easily distinguish between design, front-end, and back-end if it ever comes to that.
Light & Dark mode
Feature & Accessibility
Both of my previous portfolios took a lazy approach to color and was inconsistent and simple. With this portfolio I am much more focused in an intentional use of colors but also the accessibility it brings.
This feature is no longer a nice to have in either websites or apps, its a necessity. It also brings a much more intentional understanding of color and how it is used. Having to manage how a site looks in both means using correct naming, understanding palettes, etc. My portfolio is made easier to manage as its mostly greyscale but still translating and ensuring all look consistent across themes can be difficult and somewhat time consuming.
Outcome
Comparing Google Analytics data year-over-year, average session duration increased from ~30–40 seconds to 1 minute 09 seconds — nearly doubling user attention.
Visitors now spend time exploring multiple projects and this suggests visitors are not only staying longer but engaging more deeply with key content.
This project reminded me that good portfolio design is user experience design — treating recruiters and visitors like real users. Data, structure, and clarity matter just as much as visuals.