Portfolio
Redesign

Redesign 2014

When I approach a redesign of my own portfolio, I take it as an opportunity to learn as many new topics as possible as well as create something that feels ‘new’ to the internet. This time around, I took the opportunity to explore Node.js. I’ve had limited experience with Node on a second-hand basis in the past; both of the winning hackathon projects I worked on operated via a Node backend. This website, however, is my first time using Node to build any sort of site of my own.

I structured my Node environment around Amazon's Elastic Beanstalk as to take advantage of their integrated git deployment system. The code, therefore, is versioned on github. If you happen to take a look at my user page, you might note this page was mostly built on the nights and weekends of an 17-day committing spree. There's passion in those numbers, friend.

To keep myself on-track, I used Asana to prioritize tasks. The Asana workflow worked well because I also utilize it for work; so when I had an idea I could quickly add it to my list, then I could check off a couple tasks each night.

The website it's self is built on Express.js, the popular server framework. The CSS is preprocessed using Stylus with Nib for vendor prefixing. Stylus carried only a slight learning curve from Less or Scss, but had some major advantages. The biggest thing Stylus offered was the ability to inline, then group my media queries using a cache. Roman Komarov, a Stylus contributor, writes about the process on his blog (kizu.ru).

A sketch of the website's header.

A sketch of the website's header.

The design of this site comes from the evolution and iteration of many various projects. For example, you may be asking yourself, “Where's my hamburger?” The hamburger, in this case refers to the 3-bar menu icon used throughout contemporary UI design. In my initial design for the site I used the hamburger, and neatly crafted the animation of ☰ to ✕ on activation. However on this website, my playground for experimentation, I wanted to try something a little different. I landed on the “+ to —” set as an alternative to the mainstay of the hamburger.

See the Pen Animated ☰ to × Button by Joey Hiller (@jthiller) on CodePen.

In large part, the website was inspired by a two week vacation to Tokyo. Though many of the elements existed independently, the trip acted as a sabbatical for me to bring these ideas together. I've always had a passion for minimalism, and of all places I feel a portfolio is a good place to limit visual noise.

An early sketch of the site.<br>The initial design was inspired by my adventures in Tokyo.

An early sketch of the site.
The initial design was inspired by my adventures in Tokyo.