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

Portfolio Redesign

Updated 1 month ago
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.

Tools

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

Typography

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.


Pages

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


Conclusion

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.


Thanks for reading!

I'm Ryan and I'm a product designer - currently based in Tampa, FL. If you're looking for help or would like to chat, reach out!


Do you have feedback about this post or want to suggest an idea you'd like to hear about in a future post? Send me a message!