Portfolio relaunch
technical
Old is New
OK, so here is the 2019 version of alternatyves.com, a portfolio site built with Jekyll and TACHYONS.
Since the start, alternatyves always had a playful and experimental side.
alternatyvesoutc.com1 launched in 2008 on Indexhibit. Back then, it was the latest cool thing to build artsy portfolios. The site design colors, fonts, and layout changed all the time. It was as much a place for showcasing work than it was a space for learning. A little bit of CSS first, bits of HTML, then some underlying PHP, then frameworks like Foundation.
It looked like this at some point in 2010:
At some point in 2012, it looked like this:
Exit WordPress
After a while, I migrated the site to self-hosted WordPress. The migration coincided with losing interest in that kind of experiment. Besides, I also had a hard time focusing on illustration because I was working in a lot of different styles. No matter what you do, people tend to put things into categories, and they will do so with your work too. The truth is, it was somewhat complex to showcase my portfolio as a cohesive body of works. And there were indeed too many styles: storyboards, sketches, graphic design, cartoon, editorial, traditional illustration, collages, and more. My portfolio ended up split into two sites. The first, showcasing illustration/design, would remain here. All the storyboards and pre-production work would find a new home at https://film-storyboards.com. That made sense. The storyboarding site launched in 2010 and is running on WordPress since then.
However, maintaining alternatyves.com on WordPress was a pain, so it ended up unattended for a long time. The theme itself had a steep learning curve but seemed unmaintained. Some of its features, like grids, galleries, and modularity, were great but made WordPress harder to use as a content management system. It added complexity by using a completely different logic than the “native” WordPress one. Why use WordPress if you are going to differ from its core functions that much? I like WordPress, but it never felt like the right choice for this portfolio.
Site builders
For some time Cargo Collective was one of the most popular choices among illustrators and designers.
Squarespace set another standard for design/photography/illustration portfolios, solving the maintenance issues of WordPress.
Adobe is present in the online portfolio space with Behance. Format, ArtStation, aand many others have a similar offering (SiteSpace).
Site builders are great to get your work out there fast. Site builders are also new and shiny before their inevitable demise. When that happens, one of the issues that arise is the portability of content. All in all, none of these felt like the right choice for this project. These solutions somehow give you too much to chose from but lack flexibility in their inner working. And that’s the point: a personal portfolio should work for you. Building it yourself may or may not reflect your work more creatively, but at least it gives you more control over how it works.
Besides, a portfolio is somehow compact, but having a website is also about archiving things that need not be at the forefront. There is value in less prominent as well as older works sometimes. As a visitor, you get to chose between a quick tour or getting lost into the maze.
Last, this is an opportunity to learn some of the more recent web development technologies. It never hurts from a design point of view, even if you don’t have to be a specialist about every single new framework out there.
Frameworks all fade away at some point but learning how to design something yourself gives you more flexibility.
Enters Jekyll
I used Jekyll for a side project and found it easy to learn. Jekyll is an engine that turns plain text into static HTML files. You keep a copy of an entire site on your computer that Git2 mirrors so that any host can serve it online. Jekyll rebuilds the site with each change. It is perfect as a starting point to build a simple website.
Tachyons
Tachyons is a CSS toolkit and design system based on using and reusing components. It saves a lot of time tweaking and re-writing CSS. Yes! 👍🏼3.
Gulp
Gulp automates a couple of tasks during development, mainly resizing images, files compression, and browser reloading.
Responsive images
Images are vital to an illustration website. One of the advantages of a static site is speed, but pictures still affect rendering time.
Serving responsive images is a must today, but this is a time-consuming task, not something Jekyll handles from the get-go. Jekyll Picture Tags takes care of this well, but you need to write custom calls for images in Liquid.
{% picture sky.jpg --alt night sky --picture class=".full .tc" %}
Pictures in Markdown
In Jekyll, there are several ways to write images markup: you can either use HTML, Liquid, or Markdown.
<img src="/img/sky.jpg"><figure>
<a href="/img/sky"><img src="/img/sky.jpg"></a>
<figcaption>Night sky</figcaption>
</figure>Depending on what you need, each of these methods is valid. All images will render the same.
Unfortunately, Markdown doesn’t render captions. One solution is to add a bit of HTML after it.
<figcaption>Night sky</figcaption>
I use a small Ruby plugin to keep this even shorter.
Jekyll::Hooks.register :documents, :pre_render do |document, payload|
docExt = document.extname.tr('.', '')
# only process if we deal with a markdown file
if payload['site']['markdown_ext'].include? docExt
newContent = document.content.gsub(/!\[(.*)\]\(([^\)]+)\)(?:{:([^}]+)})*/, '{% picture default \2 --alt \1 %}')
document.content = newContent
end
end
Galleries
Galleries provided thanks to PhotoSwipe. Click an image to open a gallery.
To conclude, which technology is behind a site doesn’t matter, except when it does. As long as it doesn’t get in the way, the end-user does not care about it. And that’s the point. For now, the site is easy to update by dropping images in a folder and using text files. Running a couple of commands to deploy the site is not much more complicated than using a CMS like WordPress. No system is perfect. There are downsides, but using a word processor instead of a dashboard is not one of them. There are still things to improve: how Jekyll handles images, for example. This new configuration also has dependencies, like plugins. Galleries need to be hard coded instead of dragging and dropping images. There is room for improvement, but it is a new start. All in all, it means I can experiment again with my portfolio in the coming months.
Use and contribute to this theme
While this site’s repo with all images assets and a bunch of experiments is not public, the theme’s code is available here on GitHub.
alternatyves.com ancestor site ↩
git is a distributed version control system, it enables people to write and publish files and revert any change made to the code at any given time. ↩
This new theme is loosely based on JKL + TACHYONS. ↩