I have the good fortune to work with an old friend. He works remotely from Portland - but we still chat quite a bit over Slack and see each other when he visits Seattle to work out of our office. He has a deserved reputation for knowing the answer to most questions. We were joking in Slack about how he is a human search engine. His name is Majid so I started suggesting ridiculous web addresses for his human powered search engine - like
http://majid.majid - or perhaps more Catch-22-y
http://majid.majid.majid - I started posting screen captures of silly domain names available on Hover.com - and found
majid.coffee - so naturally I registered it. I have a job; domains are cheap.
Later I popped into my team’s private channel and asked what we should put there. Majid does love coffee. One of my teammates remembered that he was fond of alpacas after seeing some kind of alpaca show in Portland,of course.
So I settled on Alpacas drinking coffee in a coffee shop. I looked at some photos of Matisse’s paintings. I missed that mark by a mile. I ended up somewhere south of David Hockney I think. But it works. I wanted something whimsical and loose. I think I got it. I also wanted to crank this out on a Saturday.
I knew I wanted this to be more than just a JPG on a web page. I found this great parallax effect library and knew just what to do.
I painted my coffee alpacas in ProCreate on my iPad - quickly and loosely - on a few layers. I exported that out as a Photoshop document to my iCloud drive and then grabbed that file on my Mac where I opened it in Pixelmator. I used Pixelmator to export each layer as either a PNG or JPG depending upon where in the stack it was. Some layers didn’t need full 8-bit alpha transparency, so I could save a few bytes by saving those as low-color 1-bit transparency PNG files.
Then I pulled down a copy of the parallax library, created a new Git repository, fired up Visual Studio Code and built a tiny web site. For my small static projects I’ve been using Pug templates - because it’s just a quicker way to write HTML and I can easily include and compile markdown files for blocks of text. I still tend to use Gulp to compile my templates and things - and also to run a little server. I could have probably used https://webpack.github.io for this too, but Gulp was fine.
Once I got everything put together I stacked up all the layers, got the parallax library working, and made some little adjustments. For example, I needed to tweak the scaling and the parallax effect so the edges of the layers didn’t show.
I’m hosting the page using GitHub Pages - which is a fantastic feature. It’s intended to host project documentations, or static blogs. Whatever. It’s an art gallery now.
Ever since I came across Rafaël Rozendaal’s work I’ve been thinking about how to meld my web stuff and my art stuff. This is a good trial run.