Let me tell you about my website

Since mid-July I’ve been on vacation traveling around the world. Originally, the only project I allowed myself to work on is my website and blog. I quickly broke that rule with a number of new and existing projects. Nevertheless, as you can see, I did ship this site.

I’ve never been happy with my website or blog, perhaps because I’ve never been able to invest enough time into it. Over the years, I’ve at least been able to put a lot of thought into what I want and how I want to express myself. This attempt gets pretty close.

High-level Goals

Too many of my personal site designs have been dark and gloomy, often monochromatic. I think one of the biggest ideas going into this project was to make something bright and colorful. From a pure functional standpoint, I felt this was important. I also wanted to actually reflect my style. Too often I’ve settled for pre-designed blog themes that “kinda, sorta” match my sense of style and how I want to express myself. This time I would have full control.

As I’m starting to freelance again, I also wanted to have a good marketing tool for myself. Even if it just expressed the affordances I have as a free agent. If somebody discovered me online, they’d know they could buy my time. “Yes, I can be hired for any of these fine services.”

Combining my personal website with my blog is another thing I wanted to do. So far they’ve always been separate. Not only would this be for consistency and simplicity, but for future proofing. Anything else I want to put online I can do with this site in a way that feels part of a whole. A whole that represents my identity and personal brand.

Aesthetic

Like I mentioned, I wanted bright and colorful. I also wanted simple and toy-like. I wanted it to feel well designed, but without a lot of modern web design tropes. This led to a minimalist foundation that I could sprinkle my favorite motifs on top of.

I actually only had one website in mind that I used for initial inspiration. In fact, I think when I came across this page of the Disqus website, I immediately started imagining a new personal website. Most of that initial vision has since disappeared, but with that framing I was able to move on to colors.

The colors on that page reminded me of one of my favorite kinds of infographics: transit maps. I quickly started poking around ColourLovers for palettes inspired by transit maps. I found a few and settled on one based on Tokyo’s subway map. Then I moved on to typeface.

I limited my options to what was available on Google Webfonts. Previously I was a fan of the Droid Sans and Droid Serif families. This time around, I used Open Sans as the primary font. For the header title (my name), I needed something different. I wanted something heavier but not wide. Ideally, I wanted a bold Futura Condensed, but a heavy Futura isn’t on Google Webfonts.

I struggled with this for a while, then by accident found VT323. It had the weight and shape qualities I was looking for, but I didn’t think I wanted a pixelated typeface. It seemed too cliche. However, when I tried it, it became obvious VT323 not only went well with my pixelated avatar, but it added more of me to the overall design without being too cliche.

The tree in the header was a late addition. I have a thing for trees as a symbol of nature and I wanted to add more character to the design. Originally I was going to use Context Free to create a procedurally generated tree, but this proved too time consuming to get what I wanted. A free vector based tree was not hard to find.

Platform

I’ve become a fan of using GitHub Pages for simple websites. It’s hosted, it’s free, and powered by Git. The site is then versioned, editable online, and even forkable. The only limitation is that it only hosts static files.

Luckily, they’ve built-in support for Jekyll, which is more or less like pre-rendering a dynamic site. This not only gives you templating, layouts, and includes, but it’s “blog aware” so you get pagination, meta-data, and even related post links. The only real dynamic bits of the site are blog comments and analytics, both are solved by client-side JavaScript powered services. Neither of those I care to have in my Git repo anyway.

The other part of this plan I like is that it lets you write content in simple Markdown files kept in a Git repo. If I ever need, I can take this repo anywhere and still have my blog posts as Markdown files. This is a far more ideal place to be in that most blogging platforms I’ve used in the past.

Future

It’s still a work in progress. You may have noticed the homepage currently redirects to the blog index. I’m hoping to have more of a landing or intro page as the homepage. The idea there is to quickly communicate what I’m about and what I work on.

I also want to incorporate more hand-drawn elements into the design. A lot of my writing is well accompanied by diagrams and visuals, so I wanted to include more of these in my posts. Doing as many of these as I can with my drawing tablet will give the site more character. My character.

I was also thinking about “project pages” that describe and introduce the projects I’m involved in without being hidden as an old blog post. Perhaps more exciting, though, are project idea pages or “blueprints”. These would allow me to document projects I’m thinking about building, letting me get feedback and encourage collaboration before even starting.

Building a site from scratch was a pretty substantial investment. With the right tools and enough time to think through and iterate on the visual design, I now have something that works and that I can build on as needed. Not only that, I shipped before I got back from vacation. :)