Redesigning my portfolio

I decided to redesign my portfolio. Again.

My goal was to build something timeless that I can add to indefinitely.

I also had some references I wanted to take inspiration from (insert something about "great artists steal"...).

Reference 1: Framer 'Core' template by Justin Farrugia

Like many designers, I enjoy exploring web design ideas in Framer. Their intuitive canvas is a great way to explore layouts or component styles before committing to code.

I also enjoy exploring the Framer template library from time to time for design inspiration. I recently came across the free Core template on Framer, which caught my attention.

I like the clean layout, custom cursor, and layout of images and links throughout the page.

I originally based my portfolio redesign on a single-page layout, and this template was a big initial inspiration.

Reference 2: Gavin Nelson's portfolio

I also enjoy exploring the portfolios of some of the product design world's leading profiles.

Gavin Nelson is currently a designer at OpenAI, having previously worked at Linear and GitHub.

His current portfolio is minimal at first glance, yet showcases extremely high-quality work on hover states and in a grid layout on the 'Explorations' page.

A key inspiration I took from this portfolio is the tab layout at the top of the page, with the desire to put my own flair on the component through micro-interactions and animation.

Reference 3: Mike Matas' portfolio

A legend in the design world, Mike Matas worked at Apple under Jony Ive for many years before moving to LoveFrom to continue to work with Sir Ive.

I love that here, the principle is 'show, don't tell'. In-device screenshots really help make the designs on display here feel tangible, almost like a museum archive.

The transitions between the different designs, as well as zooming in to each project, are truly world-class.

Reference 4: Benji Taylor's portfolio

A more contemporary legend in the design world is Benji Taylor, who currently leads design at X/SpaceXAI.

This is a very minimal design, but with lots of emphasis on transitions and subtle design flexes.

Benji's articles are incredible. I definitely recommend checking them out!

Reference 5: Jordan Singer's portfolio

Jordan Singer is the reason I first discovered the role of a Product Designer (you can learn more about that journey here).

This is the most text-heavy of the portfolio designs. It acts almost like a resume or an archive of links.

Jordan's work and achievements speak for themselves, so although I enjoy this truly timeless style, I needed a way to showcase my work more visually.

Reference 6: Spottedinprod's profile pages

spottedinprod.com is a new favourite design reference I use. Their 'brutalist' interface design is clean and lets the user's work shine.

The profile page uses an infinite carousel to display a user's work. I find this so visually compelling, and fun to interact with, that I wanted to find a way to make it unique for my use case.

Incorporating an element of a physical device (like Mike Matas' portfolio) and a sense of three-dimensional depth was the way I wanted to make my carousel variant stand out.

Iteration & implementation

I started my portfolio redesign in Framer, duplicating the Core template and removing all the unnecessary elements. I then replaced the placeholders with my real portfolio content. This gave me a quick sense of whether this direction and style would work for the content I wanted to showcase.

After spending a couple of days dialling in the style, interactions, and content in Framer, I decided to move over to code. I wanted this portfolio to be truly timeless, and to do that, portability and maintainability matter. I didn't want my portfolio to be 'trapped' in a walled garden or a particular website building tool.

Being able to build my portfolio in code gives me ultimate flexibility and control over how I deliver and maintain it over time.

For the next iteration of my portfolio, I decided to go with Next.js. I am familiar with the framework, and Vercel's developer experience is superb, giving granular control over important aspects like domains and redirects.

To go with a custom code solution, I needed a CMS (Content Management System) to host all my assets, blog posts, etc. For this, I decided to go with Sanity. It is powerful, but importantly, composable, allowing me to build a bespoke CMS backend based on just the schema I need.

It didn't take me long to migrate the CMS content from Framer to Sanity and build a bespoke Sanity content studio that suited my needs.

After having the key building blocks of a Framer design reference and a Sanity content backend, I spent time carefully adding polish and craft to interactions and components.

I have high standards when navigating websites; a clipped image, poor state transitions, or clunky UX frustrate me.

I want my website to feel smooth, fluid, and snappy. Across all browsers and breakpoints.

The last 10% of refining an interface for these attributes can take up 90% of your allotted time.

Open-sourcing my portfolio

I have decided to open-source the code for my portfolio.

You can check out the code on GitHub.

Surprise & delight

I had fun adding elements of surprise & delight to this portfolio, some more covert than others.

An example includes the animated shoulder shrug on the 404 page.

I'll leave it up to you to explore the rest!

--

My goal with this portfolio was to deliver a timeless experience, whilst showcasing my personal thoughts, work, and ideas.

I hope I have achieved what I set out to do.

Any feedback? Just email me.