This website was designed in Figma and coded by hand, with a not-insignificant amount of fingernail-gnawing, hair tearing, eye-rolling, and dark, desperate thoughts. All type is set in HK Grotesk — a wonderful open-sourced and classically-inspired Grotesk designed by Alfredo Marco Pradil of Hanken Design Co. in the Philippines. Most images are my own unless otherwise noted, shot with a Fujifilm XT-3 and (probably) the Fujifilm XF 18-55mm F2.8-4 LM OIS Zoom.

I primarily write code in Sublime Text 3, and write prose in Ulysses using markdown. I use the former mostly because it is what I have always used, and I am comfortable with it. I use the latter because I think it's a truly great piece of software and because it is a joy to use. I have tried just about every markdown editor on the market for some period of time, and Ulysses wins by a landslide. To elaborate; Ulysses allows me to write posts in markdown and export/upload directly to Ghost, it has numerous configurable focus modes that I use often, fantastic tagging and organization, provides helpful data and feedback, and is great at just getting out of the way when I am writing. Although it's not as lightening-fast as the ultra-stripped down nValt or Sublime Text (I know of a few writers who write everything, including books, in Sublime), I find it to be more than fast enough, and generally a thoughtfully-designed, well-developed, purpose-built multi-device application with just the right blend of features to minimalism.

The nerdy stuff

The site is hosted on a very fast and very inexpensive Ubuntu Digital Ocean VPS, and runs on top of Ghost — a lightweight headless node.js CMS purpose-built for publishing. For those so inclined, it is relative easy to learn (although their developer docs can leave a little to the imagination) and combines HTML with handlebars syntax — a simple javascript-based templating language. Except for the occasional omissions in their API references, I can't say enough good things about it.

The front-end code is a mixture of HTML/Handlebars and CSS (compiled using SASS), with little smidges of custom JS for things like the scrolling metadata on the posts page and image gallery lightboxes (oddly, Ghost includes image galleries natively but does not support lightboxes).

Why code by hand, when so many other options exist? Why spend months sweating over javascript syntax and NPM oddities when I could buy a pre-built theme and have it up and running in a couple of days? Why indeed?

Sadomasochism, mostly. I have always had a flair for doing things in laborious, painful, complicated, bespoke ways. This website is no exception. But beyond that, there were a couple of reasons: First, I wanted to run this site on Ghost, which I've admired since its first release in 2013, and within the (relatively) narrow theming marketplace there was nothing that suited my needs. This probably has much to do with the fact that I am a designer by trade and have an annoying tendency to filter everything through my own subjective, and probably overdeveloped, visual and functional preferences.

Second, I wanted an excuse to practice. It's been a while since the last time I hand-coded anything top-to-bottom (to give you a hint, this was back in the php5 days of Wordpress), and front-end development languages have become far friendlier than they used to be. In the time spent coding this site, I got to learn Flexbox and CSS grid (which, after years of clearfixes, 'text-align: center's', and other such non-semantic nonsense, were an absolute joy), the uber-powerful handlebars.js, pure CSS animations, SCSS, and hundreds of other amenities of modern code. Before this website, my experience with such developer-y things as versioning on git or configuring my IDE was nearly non-existent, so in preparation for this endeavour I decided to take a short online course, and am far more competent because of it.

So there you have it. If you have any questions, feel free to hit me up here or on Twitter.