Select a theme. Inspired by Breath of the Wild and Max's awesome color switcher
An error occured

Portfolio Redesign

August 8, 2020
Portfolio Redesign

A few months back, I began redesigning my portfolio - again πŸ€¦β€β™€οΈ. I not only wanted to add a couple of the newer projects I was working on, but I also wanted to address larger design issues and experiment with building it in some newer technologies.

Although the overall design might seem unchanged at a glance, I implemented/changed a ton of details in the design and under-the-hood.


If you're setting out to (re)build your portfolio, there are a few routes/tools you can choose from:

  • Webflow: low-code / super popular
  • Squarespace: WYSIWYG / easy-to-use / no-code
  • Carrd: Simple / cheap / no-code
  • Semplice: no-code / WYSIWYG
  • Adobe Portfolio: free with Creative Suite / no code
  • Code it yourself: HTML, CSS, JS / Jekyll / Gatsby / Next / etc.

I'm probably forgetting some, but I think that should cover what most designers use to build their portfolios.

I chose to code my previous portfolio. I also chose to code my new portfolio, but with newer technologies.

Old Portfolio

πŸ‘†My old portfolio (~2016). Previously, I coded my portfolio using:

  • Sketch for ideating/designing
  • Pug
  • SCSS
  • JS, Jquery
  • Drag-and-drop FTP for deploying

New Portfolio

πŸ‘†My new portfolio ✨. This time, I chose some more modern technologies:

  • Figma for ideating/designing
  • React and Gatsby
  • Styled Components
  • MDX for markdown-ish pages
  • Vercel for deploying


Previously, I was using:

IBM Plex Sans: a tall x-height sans-serif that comes in a wide range of weights

Old Typography

I switched to:

Inter: an open-source sans-serif made for more-legible UI

New Typography

Why did I choose to change the typographic style?

Because πŸ€·β€β™€οΈ- but really, I wanted to implement a bit more minimalism and not have the typography intrude on the designs I would be showcasing.

Colors and Dark Mode

I love when I see websites/apps give me the option to choose to use dark/night modes. When I was building out my previous portfolio, I really wanted to implement the feature and give viewers the option to choose which to use.

Old: Old Theme

$grey-900: hsla(220, 24%, 7%, 1);
$grey-800: hsla(220, 21%, 13%, 1);
$grey-700: hsla(220, 18%, 21%, 1);
$grey-600: hsla(220, 15%, 29%, 1);
$grey-500: hsla(220, 12%, 37%, 1);
$grey-400: hsla(220, 9%, 68%, 1);
$grey-300: hsla(220, 6%, 76%, 1);
$grey-200: hsla(220, 3%, 91%, 1);
$grey-100: hsla(0, 0%, 96%, 1);
$color-green: #00d1b2;
$color-blue: #79cbca;
$color-pink: #e684ae;

New: New Theme

colors: {
base: {
grey900: 'hsla(220, 24%, 7%, 1)',
grey800: 'hsla(220, 21%, 13%, 1)',
grey700: 'hsla(220, 18%, 21%, 1)',
grey600: 'hsla(220, 15%, 29%, 1)',
grey500: 'hsla(220, 12%, 37%, 1)',
grey400: 'hsla(220, 9%, 68%, 1)',
grey300: 'hsla(220, 6%, 76%, 1)',
grey200: 'hsla(220, 3%, 91%, 1)',
grey100: 'hsla(0, 0%, 96%, 1)',
grey0: 'hsla(0, 0%, 100%, 1)',
states: {
green: 'hsla(171, 100%, 41%, 1)',
blue: 'hsla(179, 44%, 64%, 1)',
pink: 'hsla(334, 66%, 71%, 1)',
greenTransparent: 'hsla(171, 100%, 41%, .2)',
blueTransparent: 'hsla(179, 44%, 64%, .2)',
pinkTransparent: 'hsla(334, 66%, 71%, .2)',
visited: 'hsla(334, 86%, 43%, 1)',
greenDark: 'hsla(171, 100%, 35%, 1)',
blueDark: 'hsla(179, 44%, 40%, 1)',

Things I changed in the color theme:

  • Higher-contrast
  • Transparency and variants

I also chose to change the UI for the toggle itself.

Could I make the theme toggle a simpler design?

Old: Old Toggle

New: New Toggle

About Page

I wanted to make the about page focus on the content more. Here are the things that changed:

  • Condensed the grid
  • Focus on the content by building hierarchies
  • Add in Spotify items through Spotify's API
  • Add things I'm currently enjoying
  • Reduced number of social media/contact items

About page

Auth and Private Projects

Alot of tools (Webflow, Squarespace) let designers password-protect projects using their CMS platform. Even previously, I needed to figure out a way to simply password protect selected projects.

Using a little JavaScript, I could hide routes and show users a password-protect screen on projects that required authorization. I also chose to add in some custom lettering for a bit of flourish when users came upon this page:

Old: Old Auth

New: New Auth

One of the most annoying things when looking at portfolios with password-protection is the fact that users must repeatedly input a password when entering password-protected projects.

What if I could make it so users only have to input the password once and saved a logged-in state?

In my new portfolio I have it so once users enter the password once, they no longer have to input a password again. A few other navigation items become available, as well as a nice little "+" next to the logo.


Layout was all over the place in my old portfolio. I wanted to change it so the layout was more Medium-like (single column) and was a less sporadic while scrolling through. On top of changing the page headers, I changed it so that each case study had defined sections:

New Auth


Hopefully some of that helps! I'm still making incremental changes, but if you have feedback or need help with your own portfolio, ping me using the form below.

Have feedback?

I'd love to see if this was helpful or if there was anything I should look to update - let me know below!

Hey, I'm Ryan.πŸ‘‹

I'm a designer and .

More about me→