Portfolio
Overview
I’m really proud with how my portfolio has developed over the years. It’s a place to show off my work so I wanted it to not only look good but to also be accessible and easy to use.
This page is a short history of how my portfolio has developed over the years, it’s came a long way from when I first started. No doubt there will be more updates in the future as my experience grows.
Portfolio Goals
Showcase my work in an effective way that looks good and is easy to understand.
Accessibility is very important in my work and I wanted to reflect this in my portfolio itself.
Always improving! There’s always room to learn and my portfolio will update as I improve my skillset.
Main Concerns
- Limited budget. While tools such as Figma have free tiers in their pricing, the more advanced tools are locked behind paywalls.
- As a personal project, there’s no team or solid structure in place.
Microsoft Clarity
It’s important that I understand how users are interacting with my portfolio. Using Microsoft Clarity I can better understand user behaviour and make improvements to my site.
Through the user of heat maps and recordings I’m able to gather insight into how users use my portfolio site.
Google Lighthouse
I used tools such as Google Lighthouse to measure factors such as accessibility, SEO and page speeds. These factors are important to ensure my portfolio has good visibility and usability for different users.
Previous Versions & Improvements
My First Portfolio
Back when I was still a software engineer, I put together a very simple (and purple) portfolio which I had developed myself. It was the foundation of which my present portfolio was built upon.
New Portfolio, New Me
I wanted my portfolio to reflect the change of going from being a software engineer to UX designer. Most things got changed, from the colour scheme to the font and how I displayed my work. It was during this time I started getting into illustration.
Making Improvements
- Users would attempt to view a project by clicking the thumbnail. However, in previous versions the thumbnail had no interaction. As a improvement I pushed an update that allowed users to view a project via the thumbnail.
- I adhere to WCAG AA accessibility standards for my portfolio site. I stay updated on these standards as they evolve and change over time.
- General improvements including: layout, content and consistency updates.
Current Look
Another layout overhaul, this time it involved improving how information was displayed and placement of animations. For example, I updated the typeface for a formal feel and I moved the about me section.
Development
I collaborated with my partner Mike (software engineer) to bring my portfolio to life. My site was developed using the static-site generator Eleventy, Tailwind, and Vite. The codebase is hosted on GitHub, and deployed through Netlify.
Eleventy is used to compile HTML through the Liquid templating engine, and provides neat ways of organising code files. This lets the project automatically generate things like a sitemap, my work collection, page layouts and UI elements consistently. Vite is a bundler that handles asset compression and post-css processing of the Tailwind styles to improve performance as much as possible.
QA Process
- Initial designs were discussed together to compromise on design/technical limitations.
- Once developed, I reviewed the changes via a preview link on GitHub. Any further changes were discussed and implemented.
- Once new features were approved, the changes were merged and pushed live.
Key Learnings
- While having a low budget can be limiting, there are many useful tools available for free or at a low cost. These tools are super helpful in making improvements and better UX in general.
- For small projects the QA process doesn’t need to be complicated. Having a quick and simple QA process can be very effective and saves a lot of time.
- I’m really proud of how my portfolio and how it has evolved over time. When I look back at my first portfolio to this current one I can see how my skills have improved over time.