My Personal Website Migration Process

Understanding a person’s process allows you to peak into their mind. So this is a breakdown of the process I went through when redesigning my site, transitioning it to a new CMS, and migrating hosting plans.

Design

  • Redesigned site in Figma
  • Inspiration from Dave Rupert
    • Large character off-set with prominent links
  • Inspiration from Los Montoya
    • Geometric shapes around the image of the subject at top of homepage
  • Inspiration from Brad Frost
    • Important links on the homepage
  • Inspiration from Figma
    • Bright happy colors
    • Geometric mark
  • Inspiration from MoneyLab
    • Mobile menu remaining simple text links and not moving to an offscreen menu
  • Creating SVGs
    • Homepage hero image
    • Wasn’t going to have a mark, but the homepage image turned into a nice little graphic

Prototyping

  • Prototyping in Codepen Project
  • Establishing page types in static HTML
  • SCSS for site
    • Universal layout classes
    • Componentized elements for easier updating and reuse

Development

  • Local dev environment using Local
  • Using Underscore as the base theme
  • Deciding on page layout architecture
  • Using Block Lab for Resume
    • Understanding how it works
    • Configuring “Job” block
    • Building block lab template
  • Using Prepros for quick and easy SCSS processing

Content Migration

  • Scraping my old website using ScreamingFrog
    • Faster and easier than doing an SQL export
    • Probably could have found a Craft plugin, but this was simple enough
  • Modifying image locations with regex find and replace in Atom
  • Importing via WP All Import
    • Doing test imports on local site before importing on production

Deployment

Post-Deployment Cleanup

  • Installing GTM and GA via Site Kit
  • Installing Yoast
    • Adding meta descriptions for every post
  • Reviewing Lighthouse score
    • Good enough scores for now. An average score of 90 across primary pages.

Future Improvements

  • Technical
    • Optimizing homepage SVG – DONE 9/6/2020
    • Image optimization on blog posts – Fixed Imagick issue 9/29/2020
    • Adding a sticky table of contents to long-form blog posts
    • Move to CI/CD – thinking of using Beanstalk
    • Accessibility – adding ARIA roles
    • Creating custom Gutenberg blocks within the theme to reduce BlockLab plugin dependency
  • Content
    • Add skills list to resume page
    • Add about page
  • Design
    • Dark mode version
      • Using CSS variables to change primary colors for dark mode users
    • Accessibility – ensure WCAG compliance of colors
    • Custom icons for the homepage menu. I think some cool illustrations would be nice. Maybe they change depending on the hover state.