Rebuilding My Site for 2021

When I was in college, I did a grand overhaul of my personal site during the time that I was applying for my first Software Engineering internships. I felt like having the site gave me a slight edge and at the time I was pretty proud of it.

A screenshot of how spencerbywater.com used to look
A glimpse into the past.

A lot of time has passed though... I suppose it's been about 6 or 7 years at this point, and it's out of date both as far as content goes as well as how I represent myself now that I'm a few years into my career. I've been itching to try out some new tech, and so this was the perfect opportunity to kill two birds with one stone!

Ideation & Goals

For most of my projects, I first bust out my 1 inch square graph paper and sketch out some basic ideas.

Sketches of how I wanted my new site to look on graph paper
I love using this kind of paper for sketches and notes!

As you can see, I kept it pretty simple compared to my previous iteration. For this new site design, I had a few goals in mind:

  • Simplicity: I tend to agonize over design so I strove to keep my ideas focused to the core things that were needed
  • A blog: I wanted to have an easy place to write about projects, hobbies, and software development
  • Career: I want my site to be a place where I feel comfortable sending people to to learn about me. The content & writing style on my previous design don't really match the way I portray myself currently.
  • New tech: Perhaps most importantly, this new project was the perfect place to experiment with new tech that I have been interested in trying out!
  • Accessibility & Lighthouse score: Finally, I wanted to be a little more cognizant about accessibility in this new design. I also wanted to focus on getting a good Lighthouse score.

New technology

Here are all the fun new things I tried out while building this site:

Next.js

I've done a fair amount of React.js at work, but I've been curious to try out the hybrid static + server generation that Next.js makes possible. It also provides a pretty comprehensive developer setup right out of the gate. So far my experience has been extremely pleasant; the documentation is great, the development environment allows for a quick edit+refresh development loop with hot module reloading, it has an established way to integrate other popular frontend technologies, and includes many helpful components like Image that make difficult problems incredibly simple. Ultimately I've been really pleased and will probably continue using it as the starting point for other projects.

styled-components

When I discovered Sass, I was really blown away by how it made CSS so much better, but under the hood didn't change too much about writing CSS itself. Hearing about styled-components really threw me for a loop. Not having a stylesheet to work with was weird, but I think most poignantly it looked too much like inline CSS which I generally try to avoid. If people weren't so vocal about liking it, I'd probably have never tried it out. But they are, so I figured this would be a good chance to face my prejudice and see what all the hubbub is. Ultimately, I ended up liking it. Tying styles directly to components and limiting global styles is a great way to limit accidental CSS side effects. And writing the styles right alongside the component was actually kind of nice. I still have much more to learn but I would say this experiment has certainly changed my mind!

CSS Grid

I've done some flexbox, but had yet to try out CSS Grid. I think knowing flexbox helped pick it up, but I still have much to learn. It felt to use the latest-and-greatest in CSS and I'm excited to keep doing more of it in the future.

CSS Variables

This one is small, but since I was using styled-components instead of Sass, I used regular CSS Variables for the first time. I can't say I love the syntax compared to the simplicity of SCSS, but they worked fine for this project!

Vercel

The motivation here is twofold... One, the Jamstack is cool new tech that I just had to try out. Two, I can host my site there for free 😁 I've had a great time using Vercel, and being able to push to a branch and have it automatically deploy is *chef's kiss*. Their mission of taking away the headaches of deployment is something I can definitely get behind. Being available on the "global edge network", automatic SSL, branch preview URLs, GitHub integration... There's a lot to love and explore, and I've barely scrathed the surface.

MDX

As mentioned, I wanted my new site to have a place to write small project and hobby articles. MDX let's me write in Markdown while still being able to use my React components in an intuitive way. I think it will really make it easy to add extra functionality and interactivity to my blog posts if I ever choose to go that direction! This article from Smashing Magazine really helped give me a kickstart to using MDX with Next.js.

Other intiatives

Accessibility

This wasn't something I knew much about when starting my career, and I still have much to learn. But I wanted to at least try on my new site. One of the first things I did was use the Atkinson Hyperlegible Font from the Braille Institute throughout the site for "readability and legibility." Next, I made a more concerted effort to use the correct semantic html tags instead of just making everything a <div>, and also used extra aria attributes where needed. Last, I tried to be generous with the font sizes. We're all getting older, and life's too short for squinting.

Lighthouse score

I have been and will continue to run lighthouse tests to make sure my site meets performance and accessibility standards. I know that having a good lighthouse score factors into SEO, but moreso I know it will be a consideration for anyone I work for throughout my career. Caring about it on my site means I'll care about it on prospective employers' sites.

Spaces not tabs

This is a bit trolly to bring up, but hey, I usually do tabs in other projects. For this one I tried spaces. I didn't die! I guess I don't feel incredibly strongly about this issue!

Struggles

Motivation

For whatever reason, I was waiting to make progress on this project for when I had large chunks of time. After awhile I realized that wasn't going to cut it, and set a goal to do at least 15 minutes of work on the site every day. Some days I was able to spend more time on the project than that, but this method guaranteed I was at least making a little progress each day, which felt good.

Design

I like to think I'm halfway decent at design but I'm certainly no professional. I spent an embarassingly long time trying to dial in my color palette for this site, and even still I'm not 100% satisfied and may make tweaks in the future. I also didn't do any mocks up front so that possibly slowed down my progress as I effectively "winged" every aspect of the design based off my original sketches.

The future of the site

With this post written, I am going to go ahead and launch the site. I've enjoyed working on this personal coding project and I'm excited to see it live! There is still a lot I'd like to do in the future, however:

  • Light theme: As I understand it, some people won't even read sites that only have a dark theme. Plus, I think it would be a fun project to respect user light/dark theme preferences and switch on the fly.
  • Write posts: It would be pretty sad if I let this site languish and never posted again. I think I will attempt to post every other week or so at the start, then move to monthly posts after that.
  • A logo: I still need to settle on a logo for myself that I'm happy with.

Thanks for reading!