Website Updates

It’s been almost a year since I last updated my personal site. I still like my design with its bright accent and vast white space. It looks clean, it’s simple, but also a bit fun. It was time for an update though, the design wasn’t really completed and a few parts did need some updates. The site is generally kind of barebones.

Originally I was looking at switching off of WordPress on to something like Eleventy. In the end, WordPress is easy for me to use and provides a good blogging platform. I hate all the plugins that junk it up, but I figure I can stick with my custom lightweight theme.

A little embarrassing, but I couldn’t even find the source code at first, I didn’t put it in a Git repository when I worked on the site last fall. Anyway, I found it in a barely working Ubuntu VM and forked a new repository off of Blankslate 4.0.4 (current version 2019.1). After merging that together, my code is going to be kept safe and I’m going to keep improving the deployment (it’s uh, FTP right now).

I started by refactoring the existing SASS into the 5-1 pattern that I’ve been using for small projects. I love this pattern, it’s a simplified take on the 7-1 pattern referenced by SASS guidelines.

With that out of the way and the site able to be more easily updated I moved on to working on my typography. The previous fonts I used were Hind for body content and IBM Plex Mono for headers and links. It was kind of quirky and I liked it, but it was feeling robotic and cold, I wanted my site to have a touch more life to it.

I am a big fan of Plex (disclaimer, I’ve done market research for IBM) so I kept Mono but relegated it to code blocks and used Plex Serif for my headers. On the body I switched to a longtime favorite, Inter. Inter has been making waves recently. It’s used by Mozilla, GitHub, and Figma. I’ve been using it since shortly after its debut a few years ago, previous iterations of my site have used it. I brought it back for the body content on this design refresh.

A new trick I added as well is capping line lengths. Using the ch unit of measure, almost all text related HTML elements are capped at 90 characters of width. 90 is still a bit wide, but I tried to compensate by amply sizing the font. Working more on the measure is something I plan on doing.

Screenshot showing the grid layout of

Last big change is that the site now uses a grid layout. The older flexbox layout worked, but the grid layout is done with fewer lines of CSS and it’s just more intuitive. There’s a sidebar, content, and footer area, that’s it. Clean and simple.

There’s still more cleanup to do, old CSS that needs to be reworked. I want to update the projects page with a better layout, along with some new projects. Oh also adding a CSS prefixer to the mix.

That’s the updates so far! Let me know what you think!