Refreshing My Personal Site & Portfolio

Published

September 30, 2022

Over the coming weeks, I will be refreshing & overhauling my personal site here at https://ryanarnaudin.com/.

This post is a rough outline to guide the update.

Why?

My existing site, which I will refer to as ‘v2,’ is nearly seven years old. I am currently on a sabbatical from full-time work and this is a key result for finding new work towards the end of the year. Thus, I have several reasons for initiating a refresh now:

  1. As my sabbatical winds down, I’ll be looking for work. A personal site or web portfolio is practically essential for getting interviews and landing a good UX/Product Design job.
  2. The v2 site is showing its age:
    • Design-wise it was inspired by Google’s Material Design, which has gone through several iterations in the passing years.
    • The portfolio content has not been updated in five years, so is missing anything I did at Brightidea.
  3. I have recently been working as a Product Lead and PM, so have had less hands-on time with tools and technology. This is an opportunity to refamiliarize technically with HTML, CSS, JavaScript, Jekyll, Github, and all things web hosting while I still have downtime.
  4. It’s a fun design project I’ve been putting off due to other priorities.

Requirements and Constraints

Many of these remain constant from v2:

  1. Provide an overview of my professional skills & experience for recruiters & hiring managers
  2. Highlight work samples in the form of a design portfolio for recruiters & hiring managers
  3. Showcase writing samples to illustrate my thinking process for hiring managers
    • Other benefits: sharing ideas, preserving knowledge, and practicing communication skills
  4. Provide a way for people to get in touch with me for work opportunities or collaboration
  5. Tech-wise:
    • My previous site was built on Jekyll which has served me well. Since I am familiar with how it works and a static site is sufficient for my needs, I plan on sticking with a similar tech stack even though there are newer options.
    • Keep scripts and plugins to a minimum to accomplish the goals.
  6. Design-wise:
    • The site should be simple and professional. While I personally like dark mode for apps, I believe a high-contrast, light aesthetic accomplishes the goal best. Fonts and styling should be kept to the minimum required.
    • As a usability expert, navigation and operation of my site must be clear and straightforward. It needs to work as well on mobile as on desktop. Styling should not obscure purpose.
    • Avoid trends and aesthetics that are likely to age quickly (might include purples & pinks, mesh gradients, bubbly and/or 3D effects, dark with glassy effects, etc.), so that the site may have a long life while expanding with content

Solution Direction

In keeping with the constraints and principles above, I’m aiming for something like this:

Site update wireframes Wireframes to guide the update of my site: project details, blog list, project list & homepage

I’ve identified a handful of open-source Jekyll themes that should get me close to this. himatt is the leading candidate, barring any issues or red flags I encounter when I clone the project. Aside from migrating my content into the theme, it looks like the big pieces would be:

  • Update theme from dark to light
  • Add a blog list and post pages
  • Add an image lightbox (open large in the same window)

Future Considerations

It’s worth mentioning explicitly what might be tempting, but I am not planning on doing now:

  • Image galleries
  • Additional filtering, categorization, etc. – for example, blog or project categories
  • Minimal migration effort at this time for side projects and hobbies/interests
  • Serve as a landing page and funnel for consulting work and/or resources for sale (aim right now is for a full-time job)

Follow-up: Before & After

Before

v2 Material Design personal site The Material Design “v2” of my personal site, to be updated in the coming weeks

After

You’re reading this on the new site, so you probably don’t need this to show you how it looks! Here it is anyways:

Site update wireframes The current version of the site with updated project portfolio