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.
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
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
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.
The following are changes I have made to this portfolio. It consists of new ideas, refining, and improvements.
Changes
Since starting this project I have seen many changes, implementations, improvements and refinements in all aspects.
I will continue to change and improve this portfolio, any significant and large changes will most likely be documented here. However if I change one aspect like the typography say 3 times then perhaps the older changes will be removed.
Refining the Cards
Core Component
Refining the cards to be less complex, to the point, much easier to scan and glean information from.
After having my portfolio reviewed by Florian I quickly and fortunately set up google analytics so I could see how people were browsing and consuming my portfolio. I noticed on the homepage the average duration was something like 30-40 seconds. So I've decided to redesign the cards to be more scannable and straight to the point, and reducing the UI elements which should help to reduce the cognitive load a bit as well.
Previous
Culina
App
Health & Fitness
Product Designer
2025
—
Building an app that helps young adults better organise their dietary habits & knowledge
Increased onboarding efficiency 34%
Refreshing Culina, a Health & Fitness app with 3 million users
Increased onboarding efficiency 34%
Refreshing Culina, a Health & Fitness app with 3 million users
Dynamic Navbar
Accessibility & UX
Instead of a simple logo/brandmark its now replaced with a button that acts as the way to go back to the homepage from any page.
In an earlier version of this portfolio I had a button at the top just below the logo which would act as the back button. I ended up changing this flow by moving the back functionality to the logo/brandmark in the navigation bar. When a user clicks a project the logo/brandmark visually changes to a Back home button with an arrow. I think with the visual change and its placement makes it more obvious the user this is how you go back and its an already used pattern in browser tabs etc.
Mobile Section Stepper
Accessibility & UX
On mobile users have access to two arrows for each section which act as a way to easily jump between sections rather then swiping.
I do have this on I think majority of the project pages. I think I need to rework it and possibly consider a different approach as currently it makes the top head content look unorganised and weird. Its also at the top of the screen which is presumably the most difficult place for a user to reach considering how many would hold their phones.
Width & Typography
Core Style & Accessiblity
Decided that the text across the site was small and the max width 1200px was also a bit small. Increased majority of typography sizes, and increased max width to 1440px instead.
As seen below the increase in typography text sizes, max width increased, and I also adjusted the height of the card components to keep them from being very rectangular and instead they are more closer to a square. The main reason for this change was simply I started to when looking at my portfolio just zoom the browser in. So instead of continuing to do that because I clearly did not like how small the content was I decided to change it.
Previous
Current
Typography
Core Style
After the previous change I realised the typography needed simplifying and more thinking towards it. Since then I have streamlined it from, 14 styles to using 9 styles.
In both versions I am using Inter Display as the main typeface, but in the current version the Page Heading and H1 are instead using Instrument Serif. The reason for Page Heading & H1 in the current version is basically the Page Heading resizes itself across devices whereas H1 stays 64px across devices.
The previous and current styles can be seen below, they are not to size but do have what their size values.
Color
Core Style
Greatly refined and reduced the unecessary and complex use of color in mainly the components, and I’ve most likely reduced styles from 60-80 to having 45 styles.
The large change here that helped reduced color usage was removing unnecessary and duplicated values, for example, just about every component had its own text style. This meant if I wanted to update the text on the site (kind of a big part) it would mean changing it for each component which is ridiculous.
So to solve this I simply made global styles which included, background, text, and text-alt. These colors were also tested on the components mainly cards, buttons and tags to ensure readability.
This change is outdated, scroll down to see the new change.
Template Project Page
Efficiency & Consistency
This change doesn't effect the UX directly but it does allow me to standardize (to some extent) the project pages content but more crucially the spacing.
I realized I should of had one of these from the start of building my site and I did kind of. I did end up building my project pages from other project pages etc. Whilst this definitely helped speed things up it definitely isn't the most efficient as you have to go to that page, copy the content, go back paste, delete the content, and then add the correct content. Rather then just duplicating a page that already has the layouts correct across all devices I simply need to add the content and boom done.
I've also got a similar thing going on in Figma for me to quickly and easily test layout adjustments and just working in Figma can be a bit quicker. Then copying and pasting the content between is also quite easy and gives me the chance to give most things another read over to ensure it makes sense.
Color
Core Style
I have further refined how color is used in my portfolio, I've now organised it so every page is taking colors from a folder called, Base. It currently holds 10 colors, meaning presumably every page is using on average between 3-7 colors.
This change has effectively in the simplest terms, removed the previous organisation I had from, Global Styles/Components/Color to simply be Base/Colors. In the design system Base holds the, background, primary, secondary, and default color styles, along with (subject to change) the color styles for text being, text, text subtle, and text alt.
How color is used has not massively changed, the design system I am building mostly sees it as sort of optional/extra at least for this portfolio, it can be expanded to hold the same values as base when building an app or site that needs support for semantic colors and if they require the primary, secondary etc.
The important thing to note is the design system I am going to use for me, is meant to be imperfect for any project, and more or less just there to build on when needed. Its very bare minimum for now, as I work on different projects with it I imagine I'll change it or improve in some direction.
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.