I built this website around the start of 2017. I showed my portfolio page to some friends, and I realized how ugly it was. So I hopped on my computer and got to work.

Quick Stats

   
TOOLS USED NodeJS and Hexo for generating HTML/Javascript, Stylus for CSS processing, Bootstrap and Masonry for the dynamic grid layout.

Game plan

I liked the idea of a static site generator (thanks to my work on the SnackWatcher project), and I’ve been looking for an excuse to use more JavaScript. So I looked around for an SSG running on NodeJS and found Hexo.

Pulling it off

I started by sketching some layouts on paper, and I ended up with a grid-based design I liked. I then started looking around for JS libraries I can use, and I stumbled on Masonry. That made this project a whole lot easier.

For the visual design, I wanted something simple, so I stuck to a palette of black, white, and red. I used textures on element backgrounds as a quick way to add interest to simple colours. Box-shadows were another nice touch, bringing a subtle 3D element to page elements.

When you click the post images on this site, you’ll see a fullscreen version thanks to jQuery.LiteBox.

Results

You’re browsing through it right now!