Version Ten

This brand new version has been in the works for a while.

It all began late October last year, scratching an itch I shouldn’t have. I asked myself what the next version of my site would look like — only to become lost craning my neck during the late hour of every night building iteration upon iteration of my next major redesign.

Four months later and here we are — the apotheosis of my spare time side-project. Welcome to the tenth version of my website.

Why

If you know me well enough, you know that I redesign my website when I feel the previous version doesn’t represent who I am now. I outgrow the older designs because my tastes, motivations and inspirations become vastly different to what it was before.

The last redesign revolved around the time I started Uni — featuring a design that’s dark with vibrant colors, a friendly sans-serif typeface and video game-like look. It was a reflection of my more adventurous and child-like self. This tenth version however, is instead built looking towards the future: refined and much more modern.

Gone are the rich and vibrant colors, however I kept the dark theme for diversity. Too many sites are black on white these days — it’s a remnant of the days designers used to work solely on print — and a dark background establishes a different context around the content compared to that of a bright one.

I also kept the sans-serif motif. The typeface you’re reading this in is Mallory by Frere-Jones. Not only does it look great, but it was also designed specifically for screens. Here’s an apt description about it direct from the source:

Mallory was built to be a reliable tool, readily pairing with other typefaces to organize complex data and fine-tune visual identities. Each style contains over 1250 glyphs, to anticipate a wide range of content: small caps and oldstyle figures for running text, lining figures and uppercase punctuation for headlines, tabular figures and over a dozen currency symbols for financial data.

As mentioned, this typeface was designed for displaying data — and pairs nicely with monospace fonts for inline code. As I delve deeper into my computer science degree, I will be writing more about my findings and learnings in code.

This tenth version is more than just a mere facelift however. The biggest reason for this redesign was that I’ve been meaning to migrate my blog away from Tumblr. It was (and still is!) a great publishing platform — I truly enjoyed using it — but it has restricted the way I’ve always wanted to build my website.

Now, my website is completely hosted on Amazon’s Simple Storage Service and distributed around the world using Amazon CloudFront. As a result, it’s much easier for me to manage content and make changes to the websites on the fly — and it loads so much faster.

How

Every time I redesign, I keep promising to write about how I built it — but I’ve never actually fulfilled that promise! So instead of stating another promise, I decided to write it right here and right now. So dear reader, if you’re interested in the tech behind all this, read on.

How I designed the site

Sketch.

How I developed the site

I hand-coded it using a text editor, building on top of a neat little static site generator called Jekyll. There are a lot of really great resources about it, but in short: it makes building a blog from scratch much faster.

I started by writing out all the HTML semantically, and then writing the CSS in modules using the BEM model, pre-processed with Sass. I fell in love with the craft of web development, and I really care about web standards¹. I try to keep my code super neat — you can have a look at it on GitHub if you’d like.

In the background, I’ve been heavily using git to keep my code under version control. Before the design you see here, this tenth redesign actually had over a dozen different iterations. Thanks to git it’s made it much easier to manage every new idea for the design I’ve had (and I think at one point, I’ve had 8 different branches for totally different website designs!).

How I migrated from Tumblr to Jekyll

I didn’t use the Jekyll Import plugin — it doesn’t work as well as I thought it would — plus migrating all the URLs for images on the older versions of my site needed to be done manually. Thankfully, I’ve kept all my blog posts in .md format over the years, so all it took was a Python script to prepare them for this new site.

How I deployed this site to Amazon S3

There’s a really great Ruby Gem called s3_website that intelligently uploads files with just a single shell command. It’s a really great tool, and it includes an option to gzip compress files before uploading — another reason for this site’s incredible speed.

What (next)

The site’s launched, but there’s quite a bit of work left to do. I need to finish the code for my portfolio (at the moment they’re just images slapped on the page), write case studies for each project I’ve done, migrate some of the older art-directed posts onto this website, use an Image CDN to minimise website bandwidth, so on an so forth…

Overall however, I’m quite proud of what I’ve built. I poured everything I know about design and development into this redesign. Version ten is smarter, cleaner and much more modern. I hope you like it as much as I do.