After 2 redesigns and 3 rebuilds I think I’ve finally got a portfolio that I’m content with… for now. Its true how designers says they’re their own worst clients. Here’s some information about what lies under the hood.

Build

This website has been built with Jekyll, a static site generator created by Github.

CSS

The site is built with Tachyons, an atomic CSS framework. Paired with gulp-uncss which strips out any unused css, the minified CSS is only 17kb.

Typography

Headings are typeset in Lyon Display from the Commercial Type Foundry. Its hosted locally and utilises FontFaceObserver to load in the webfont after the page has loaded.

Paragraph text is set in system fonts so the typeface you see will depend on what platform you’re viewing this on. I’m on a mac, so I see Apple’s system font, San Francisco.

Why system fonts? Well, for speed mostly, but they also look great so I don’t think I’m sacrificing design for performance.

Hosting

The site is hosted for free on Github pages. SSL cert is provided via Cloudflare.

Gulp

Gulp is used to automate certain tasks such as minifying and concatenating javascript, minifying CSS and inlining in the head of the document, and watching for changes to rebuild/reload the browser.

Images and icons

Images are hosted locally and loaded dynamically using lazysizes.js. Images are compressed using the tinypng-cli. I opted for this over a lossless alternative such as gulp-imagemin because of the superior compression it afforded. The difference was pretty staggering. Icons are loaded via an SVG sprite in the document header.