A new portfolio

For a while now I’ve been looking at moving my blog to something self-hosted and more customisable. Ghost is what I would preferably like to move to, but in its current state it didn’t have all the features I want. The blog will have to wait.

While researching this I found GitHub Pages and a blog-focused, static site generator called Jekyll. It was developed by one of the founders of GitHub and has been described as “blogging for hackers”. After looking into it I found it to be extremely clever, simple, and customisable.

While I’m not ready to move my blog to a static website, it would be a fun side project to move my portfolio work from Behance. Each project on Behance could be the equivalent of a blog post in Jekyll. Here are some of the advantages:

• GitHub Pages is completely free to host on, and you can map it to a subdomain.
• GitHub also easily auto-publishes the main branch of your repository.
• It would be nice to have my work appear on a website that is also my own work.
• I’ll have more control over project page customisation.
• It won’t have Adobe branding everywhere :P

One of the great things about Jekyll is YAML front matter. This is a section of YAML at the start of any page on your site. Key/value pairs in this section will then be treated specially in Jekyll. For example there are pre-defined variables in Jekyll that will perform a certain behaviour. “Layout” will decide which HTML template to use - and this is nestable. So the layout of a markdown post will be “post”. The “post.html” template will have the layout set to “default” which is the root layout with headers and footers.

YAML front matter also contains your own variables, so you can declare things like text and background colours, or specify an image to use on the front page. These variables are accessed using a templating language called Liquid, which is similar to Handlebars I used for CSBlogs. Here’s an example of Liquid:

---
layout: default
title: Portfolio
---

<div class="posts">
{% for post in site.posts %}
  <a href="{{ site.baseurl }}{{ post.url }}">
    <article class="post">
      <img src="images/content/{{ post.image }}" alt="Featured Image">
      <div class="post-caption" style="background: #{{ post.accent }}">
        <p class="post-title">{{ post.title }}</p>
        <p class="post-desc">{{ post.description }}</p>
      </div>
    </article>
  </a>
{% endfor %}
</div>

The site is currently in-progress. I haven’t added all my previous projects yet, and the styling isn’t fully decided upon. It is fully responsive though.

EDIT 31 Oct 2015: I’ve found a lot of promising, fun stuff while researching for the new portfolio so I’ll probably move the whole site to Jekyll. We’ll see how it goes.