A redesign with Siteleaf

The last time I redid my website was almost exactly two years ago. I was ready to leave my job and needed a refreshed portfolio. (Side note: why are so many of us terrible about updating our websites unless we’re looking for a job?) It had been a bit of time since I built a website from start to finish (designers at that company weren’t allowed to touch code), and I spent a three-day weekend proudly handcoding my brand new site. It was a completely static site with no templating and probably some terribly-written CSS, but it worked.

Two years later, I write Sass every day, manage my work with Git, and can do prototypes in Rails. Terminal no longer scares me and I can’t imagine a life without partials. My personal site, on the other hand, was growing staler by the day and the thought of trying to hardcode more pieces in the portfolio was stressing me out.

When I first heard of Siteleaf, it seemed like a great tool for making simple, clean websites and the perfect excuse for me to finally deal with my personal site.

Going into this redesign, I had a few goals in mind:

  1. Write the porfolio pieces first, handle the visuals later. Every time I’ve ever designed my site, I’ve focused way too much on how it’s going to look instead of how I communicate my work. This time, I wrote my entire site out using Editorially before I even opened Photoshop.

  2. Flex my dev muscles a bit. I’m too advanced to ever go back to hardcoding a website. Using Wordpress for a portfolio site like this has always felt hacky and Rails was probably a bit more intense than I needed. Siteleaf seemed like it fit my needs by being both flexibile and simple.

  3. Make something simple at first, add complexity later. This isn’t the most ambitious site that I’ve ever made, but it was more important to me to have something fresh and easy to iterate on than anything else.

I attended a Siteleaf Hackday in Brooklyn in late August and successfully prototyped a really simple version with the help of the awesome guys at Oak. A few months later (and another hackday later), I have a site that feels like a real reflection of myself, my work, and my skillset.

Here are some resources for creating themes in Siteleaf that I found incredibly helpful:

Siteleaf theme documentation

A guide to Liquid templating

The Siteleaf theme for Siteleaf.com (to lurk how they did things)

More Liquid documentation

I’ve also put all of my site files up on Github for anyone curious.

Posted 2013-10-10 13:30:00 +0000

Jessica Harllee is a product designer at Etsy in Brooklyn, an avid crafter, and an amateur writer.

  1. Twitter
  2. Etsy
  3. Instagram
  4. Spotify