Portfolio

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

Neurocracy

A screenshot of the Omnipedia main page: a message from the founder, an excerpt of an article, and a few news items of the day.
A screenshot of an Omnipedia article, containing body text, an infobox with various key points, and a micrograph image of a protein.
Three mobile devices displaying an Omnipedia article with a content pop-up open: a large tablet, a small tablet, and a phone.
A screenshot of the Omnipedia administrative wiki page list, showing customizations allowing multiple "days" to be filtered by.
A screenshot of the Omnipedia administrative wiki page edit form, with the main body containing text in Markdown format.
A screenshot of the Omnipedia administrative attached data form, displaying a field to specify to what content to attach and the content to attach, formatted as Markdown.

Neurocracy is a joint project between myself and my good friend Joannes. 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 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 successive 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 altered to accommodate the episodic day system, while a custom form and listing view were created for managing the pop-up content; both of these can be seen in the screenshots.

Neurocracy is currently in development with a release date to be decided.

Playthroughline

Screen capture of the Playthroughline home page
Comparison of the Playthroughline home page on large tablet, small tablet, and phone sizes
Screen capture of the Playthroughline script formatting, complete with photocopy grunge
Screen capture of the Playthroughline editing interface

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

Screen capture of East End Community Health Centre "Services" page
Comparison of East End Community Health Centre home page on large tablet, small tablet, and phone sizes

I was tasked with rebuilding the East End Community Health Centre’s legacy website (static HTML pages generated with Microsoft FrontPage) into a modern, responsive Drupal site in early 2015. The logo and colour scheme were maintained, 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

Screen capture of the Anxiety Recovery Toronto home page
Screen capture of the Anxiety Recovery Toronto support group page

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

Battlefield 3 promotional image, with the logo reworded to spell "Battlefailed 3"
Battlefield 3 promotional image
BioShock Infinite logo, reworded to spell "BioShlock Infinite"
BioShock Infinite logo
Two Mass Effect 3 logos, one of which is reworded to spell "Mess Effect 3"
Two Dishonored logos, one of which is reworded to spell "Disheveled"
Syndicate promotional image, with the logo reworded to spell "Syndican't"
Syndicate promotional image

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

A promo image of in-game scientist models.
A promo image of in-game security guard models and their details.
A promo image of the in-game alien slave (Vortigaunt) model in various poses and showing the increased detail of the mesh.
A promo image of the various human soldier models in various poses, heads, and skin colours.

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

Screen capture of the Half-Life Improvement Team home page
Screen capture of a Half-Life Improvement Team news post

This is a game development group that is currently dormant in which I’ve played a large role. It’s mostly written from scratch, without a content management system. The news content is pulled from the forum software, while the rest is stored in the database. The design is entirely mine, based upon an in-game interface from the old game we were trying to revive.

Visit Half-Life Improvement Team