I like personal sites. I like looking at other people’s personal sites and I like working on my own.

In San Francisco, people seem to associate personal sites with portfolios and portfolios with job hunting. While that’s definitely a primary use case for some folks, I find it limiting.

Working on this site has become a lightweight way to experiment with frameworks, learn new front-end skills and do some just-for-fun design work that there’s not always time for at my day job. In quarantine, that’s an outlet I don’t take for granted.

Getting started

Back in August, I was getting tired of my site’s then-design. I started documenting inspiration of other sites I liked and noticed I was gravitating towards sites that:

  • Used typography as a primary design element
  • Used a bright or prominent color scheme
  • Were primarily made up of blog posts, articles or other written content
  • Veered away from or innovated on the traditional “portfolio-style” case studies

As always, the motivation to work on the project didn’t materialize until I found a new framework I needed an excuse to try out: Tailwind.

Armed with a moderate amount of creative direction, I quickly redesigned and rebuilt my homepage over Thanksgiving break. Tailwind turned out to be the happy medium I was looking for between the quick but generic Tachyons and the custom but verbose Emotion, two styling systems I’d used on my site in the past. I also felt like my new color palette and type pairing were a solid improvement from the the previous iteration.

Calling it good enough, I put the project down without adding a notes page, cleaning up the layout or fixing the information design.

The second pass

Last week, motivation struck again when I got curious about the “simpler static site generator” 11ty. Many web designers and developers I admire have been singing its praises, so I wanted to give it a shot. After a few minutes, I realized its underlying technologies and principles would have added a ton of unfamiliar overhead and complexity to my site, so I decided to stick with my current setup.

Instead, I turned my attention to improving some of the other areas:

  • Redesigned the information to group related content by subject (design systems, Women Who Design, etc) instead of content type (blog post, talk, etc)
  • Added logos where relevant to provide higher fidelity way-finding / scannability for the sections without imagery
  • Reformatted all the homepage data into separate JS object to make updating and adding new content easier

After a few hours of work, I merged the update and moved on with my day.

This week’s improvements

Performance

Now, did I check my load times before I merged that ad-hoc weekend update? Of course not! I blame my quarantine brain. When I opened my site on my phone to QA the mobile design styles, things were clearly loading slower than they used to.

Digging into it further, I realized my easy-peasy new JS content object was loading full size images, to the tune of an 8MB total page load 😬. To take advantage of the performance benefits that come with Gatsby’s recommended Img component, I’d need to reformat my data to support querying the images through GraphQL.

Fortunately, Gatsby had a tutorial on the exact setup I needed to use. Instead of importing my JS content object directly into the homepage, I moved the content to a .yml file and added it to my GraphQL schema with the gatsby-transformer-yaml plugin. The homepage is now a much more managable 1.6MB, which I aim to get down to under 1MB in the next update.

As a bonus, I’m now able to take advantage of the Img component’s duotone config query option. The duotone image style is visible to the user on hover, which is a similar color treatment to the other hover styles on the page.

Notes page

I also finally added re-added a notes page to house all my blog posts, including the older ones that don’t fit on the homepage. The exercise of creating this page was a good reminder that I’m not writing as much as I’d like to (and that when I do write, it’s been disproportionately emo). Seeing as we’re not getting out of quarantine anytime soon, I hope to change that over the next couple of months.

Next up

Set up redirects

While making the new notes page, I decided to reorganize my notes into a /notes/YEAR/POST_TITLE.md folder structure. Which means all my old notes aren’t referencing each other properly and my RSS feed is double-posting everything. You know what we call that? A problem for next week.

(Sorry to everyone who got last week’s emo post in their RSS feed again today).

Performance round two

1.6MB is still too big for how simple my site is, and while the Img component has already helped a lot, there’s some funkiness happening under the hood to be sorted out.

See y’all next time, and stay sane-ish!