Portfolio

Please keep your arms and legs inside this portfolio until it has come to a complete stop and have a lovely day.

Neurocracy

Neurocracy is a project started by my good friend Joannes and myself, which has grown over time to include illustrations by Alice Duke along with contributions by Axel Hassen Taiari, Edward Smith, Io Black, Leigh Alexander, Malka Older, and Yudhanjaya Wijeratne. It aims to be equal parts interactive fiction and cautionary tale about the intersection of surveillance capitalism, big data, and authoritarianism. This is conveyed through the medium of a futuristic equivalent of Wikipedia known as Omnipedia, in which the reader is presented with articles and information in a familiar format so that they may piece together the history and events of the year 2049.

I wrote a lot of custom code (which is open source) to enable Drupal to behave like a wiki while also making the content itself simple to edit and expand upon. A simulated revision system was implemented to allow readers to jump between different iterations of the same content for chronological in-universe “days”.

Another system was created to allow us to define, manage, and display short pieces of content accessible by hovering over or tapping pseudo-links without leaving the page. Analogous to Wikipedia’s article previews, these pop-ups are displayed as rich tooltips (powered by Tippy.js) on wider screens, while on narrow screens they’re displayed as a panel that slides up into view.

The Drupal administration interface was expanded upon to accommodate the episodic day system, along with multiple user interfaces to manage everything from the pop-up content to various settings.

The first season of Neurocracy has been released. If you want to keep up to date with the project and get involved, visit the promo site for more information.

Press and awards

We’ve been covered by numerous publications from The Guardian to PC Gamer, and have been nominated for and won several awards:

Visit Neurocracy

Playthroughline

In late 2015, my good friend Joannes asked me to redesign the blog I had originally created for him back in 2009. We migrated all the site content from WordPress to Drupal. The new site is based on a mobile-friendly responsive foundation, like all of my current projects, and attention was paid to the display and loading of images on phones and tablets.

I implemented aspects of Google’s Material Design visual language, the paper sheet aspect of which worked perfectly with the satirical videogame scripts he and his contributors post to the site. We worked on a photocopy grunge effect to apply to the script sheets, complete with holes punched out of the left edge.

The administration interface is significantly improved, with custom extensions to TinyMCE (a rich text editor), which allows the authors to paste and edit scripts via a graphical interface. MoxieManager is used as a file and image manager, for simple uploading and linking. As a result, the interface is very easy to use for non-technical authors.

Visit Playthroughline

East End Community Health Centre

I was tasked with rebuilding the East End Community Health Centre’s legacy website comprised of static HTML pages into a modern, responsive Drupal site in early 2015. The logo and colour scheme were carried over, while the site was completely redesigned as a minimal interface for clients to find the information they need. The existing content was migrated to Drupal, and a user-friendly editing system was made available so that non-tech oriented workers at the centre could update the site pages, the news section, and upload various files (such as PDFs) through a visual file manager.

Visit East End Community Health Centre

Anxiety Recovery Toronto

I designed and developed this website on a volunteer basis for the group facilitators between January to March 2012. I migrated their resources section from their old static site onto a new content-driven site powered by Drupal. They now have a fully functional blog that can be easily updated with little-to-no technical knowledge via a user-friendly interface. The site now has a dynamic calendar system which displays the upcoming group meetings and other events, all easily updated by the clients. With the change to a more regularly updated site, I added links to an RSS newsfeed, email updates, and their Facebook page in the sidebar.

Visit Anxiety Recovery Toronto

Satirical game logos

My friend Joannes asked me to slightly reword the logos of several games that that he wrote hilarious and biting satirical scripts for. These involved a fairly in-depth understanding of Adobe Photoshop and made heavy use of the rubber stamp tool to remove the existing letters, and a lot of compositing with layers so that the new letters looked like they had been there all along. The scripts for each game can be found here:

Half-Life models

In the early 2000s, I was involved in the Half-Life modding scene. The Playstation 2 port of the game had been released, and a bunch of us had discovered how to extract the more detailed character models that had shipped with that version of the game, in contrast to the really blocky and far less detailed ones in the 1998 PC version. Using this data, we mixed together the high polygon meshes of the Playstation 2 version with the higher resolution texture capacity of PCs at the time. Because the game had been designed with modding in mind, dropping our assets into the game was relatively easy from a technical point of view; the actual work of creating the assets was the real challenge.

Visit Half-Life models

Half-Life Improvement Team

This was the website of a game development group that I used to be active in. It was mostly written from scratch in PHP, without a content management system. The news content was pulled from the forum software, while the rest was stored in the database. I recreated the in-game interface from the old game we were trying to revive down to a various small details, such as menu item glow/fade effects and an animated site title that replicated the glitchy holographic flashes of the original frame by frame.