New Portfolio
I rebuilt my portfolio to make it clearer, more consistent, and better showcase both my design and development work.
UI/UX, Website
Introduction
My Portfolio
My new portfolio builds upon lessons learnt in my previous 2 portfolios and I've opted to go for a more simple, minimal interactions/hover effects focused purely on my product/ui/ux work. I've used this redesign to also just clean up on some bad habits or practises from my old portfolio.
The goal is to provide people for any reason coming to my portfolio easily find what they need or look at the dual design-dev work of a few select projects. Working on improving my use of colors and how I assign values as in backgrounds, text and containers. Reducing the amount of components and variants to easily edit and stay on top of.
2025
2-4 weeks
Product Designer
Personal Portfolio
Problem
Previous portfolio was overloaded with many different components, lazy use of color, & poor accessibility. Multiple different projects, split design dev work and lacking in-depth projects or case studies.
Basically I think my skills, projects and general direction I was going my old portfolio wasn't the right choice. There are of course aspects of it I like for example it has motion albiet after much improvement and learning is quite good. It also did not support light/dark mode, had poor accessibility and I had a multitude of usability concerns from my previous portfolio.
Instead of creating naming like, card-background & on-card-background I instead just used Grey/80 & White which is probably fine for a portfolio but I wanted to put a bit of effort in and its some practise.
Solution
A whole new portfolio wireframed in Figma, built with Framer. Honestly just improvements across the board, although lacking in content because of the more narrow focus.
With better color usage I've improved the accessibility with a light/dark mode and better contrast. I've also made it a priority to create better project pages and case studies to be more engaging and easily understood at a glance.
Wireframing
I had a good idea how it would look, still wanted to wireframe, utilized this Blocks plugin to speed it up a bit. Mainly to get an idea of the layout and structure of the site & pages.
The plugin did most of the heavy lifting and I just basically had a bit of fun creating some different layout ideas for each page. I did have a pretty good idea of how the top level pages would look in my brain but I did spend some more time on the project pages.
Final design
I think the portfolio visually and interaction wise is good. I just need to start filling it up with compelling and impactful content.
Its quite simple but I think works quite well. At some point I might consider recreating it in a front-end framework like react or vue but for now Framer is just so easy and works exactly how I need it to for this purpose. At some point in the future I might look into adding some loading in animations like on my previous site.
Mobile Jump Stepper
User can utilize two arrows on the project pages to easily jump between sections.
Now that I think about it this feature could be on desktop as well but for now I'm going to keep it on mobile need to do some thinking and tinkering with it anyways. Mainly added this to be a sort of accessibility feature as the project pages can get quite long and for anyone wanting to skim through it whilst keeping the structure this makes that possible. I do think moving these down towards the middle and on the side would probably make it even more accessible.
It does look a little weird with the spacing at the moment so some more testing and exploration to be had.
My mobile jump steppers in use
Dynamic nav bar
When progressing through the site checking it out the nav bar on mobile & desktop changes to include a clear back or back home button.
This feature was implemented based on feedback from here. I wanted to keep my navigation a bit more simple and I do think this was a good solution. Instead of the static back button at the top it now scrolls with the user which I think is a better UX and follows similar patterns found in many apps.
Desktop back button
Mobile back button
Logo
Outcome
Got a good new foundation to build upon. Better showcase of my work and how the pages are structured. Hopefully more interviews and job offers to follow.
The app in its current form is the most basic it can be, providing the simplest function for each core page. This design gives me a good idea of how the app would look and how the user interaction would occur. Its also a good foundation for me to add more features/functionality to it in the future which I already have some ideas for.
Retrospective
My previous portfolio has aspects I like and others less so. The motion for one is great but the quality of content and how its shown was lacking.
I got a good idea of what I want to add to this portfolio in terms of other work, most likely my photography. I also want to look more into the accessibility stuff with aria labels and the tab index focus state stuff. Honestly there is so much to learn in design alone and my new expanded skillset and knowledge into front-end development is starting to melt my brain a bit.
Simplicity
I've approached building this portfolio with just delivering the minimal amount to then build upon into the future. Similar to both portfolio designs before it, I create it then for about a year improve, then rinse and repeat.
Better project pages
This was definitely a crucial aspect I've improved. By making the title sort of the one liner "I did this" with supporting smaller text and the animated mockups of said "I did this" makes them much easier to read.
Accessibility
I've tested with google lighthouse and went from 80 -> 94 accessibility. So quite an improvement and I already know the next areas I'll look at to improve this.