How I rebuilt my portfolio to make it clearer, more consistent, and better showcase both design and development work
Main/hero image here
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.
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.
Project Management
Utilizing Notion to organise my thoughts, create various tasks, and ideas to implement at some point. I’ve used Notion before however somewhat briefly before organizing and understanding projects however I still have much more to learn. In this case I’ve simply used a single kanban board to organise ideas, fixes, refinements and all other changes I’ve considered. Sorted into four categories, Not started, In progress, Done, and Archived along with Low, Medium and High priorities for the tasks themselves.
Wireframing
Final Design
Design & Development
Core Feature
Title Description here..
Light & Dark mode
Feature & Accessibility
Title Description here..