Web Developer and Graphic Designer

I like simplifying complexity.

MeThat is, I like making complex interfaces easy to use and understand, while still retaining the capabilities of a complex system.

I primarily design and develop web applications and websites, but I have also done some graphic design, including re‑designing my city's transit map.

If you like my work and need someone like me, get in touch!

About Me

Based in the Toronto region (but willing to work remotely), I completed the Graphic Design Production program at the Georgian College in May 2018. Since then, I have further developed my programming skills through full-time self-directed learning, on top of my previous experience at the Port of Wilmington, Delaware, and earlier forays into programming going back to high school.

To read more about my skills and experience, see my online résumé or look through some of my projects below.

Projects

Pokémon Finder

Live demoSource code

A fully-developed proof of concept for a dynamic browser-based reporting application, for analysing data from the popular video game Pokémon. Built with React using a GraphQL API based on the open source PokéAPI project.

This project demonstrates end-to-end understanding of the development process, including:

  • API design and development: A full-featured, future proof GraphQL API in Python and Django that interfaces with a relational database and makes use of the DataLoader technique to consolidate database queries.
  • UX design: A user experience that emphasises ease-of-use but still allows for advanced capabilities. Clearly divorcing the input from the output contains the interactivity to a single location, and displaying the current filter as a sentence prevents the current state of the report from getting lost in a sea of controls.
  • UI design: A cohesive page design and consistent colour palette guides the user's attention and smoothly scales between large and small screens. Advanced input controls work equally well on their own or inline as part of a sentence, and the compact table design avoids scroll fatigue (note the staggered images which push into the adjacent rows, cutting the height of the table in half).
  • Single page client application: The user interface is built using React in a performant and forward-thinking manner, using the Redux pattern to manage global state (with judicious use of local component state where appropriate) and Apollo to make GraphQL requests. The current page state is synched with the URL for easy bookmarking and sharing, and preferences are saved to LocalStorage. Please take a look at the source code if you're interested.
  • Custom input components: Accessible input components were built in JavaScript and React with custom CSS, including drag-and-drop interfaces, menus, and type-ahead search fields that appropriately manage keyboard and mouse events and use the correct ARIA attributes.
  • Server deployment: Serving the GraphQL API from a Digital Ocean droplet with a production-ready Docker Compose environment and HTTPS encryption with Let's Encrypt.
  • Git: Regular, discrete commits with (usually) well-crafted commit messages.

Go to the live application →

Note: I've received reports that Pokémon Finder may not work on iOS devices. Once I get a testing device, I will try to fix the bug.

This Website

Look around!

This website is built on Gatsby, a server-side rendering framework for React. It has 100% custom CSS and fully scales between mobile and desktop viewports.

It's also very fast and works without JavaScript.

React Image Scroller

Live demoSource code

Used on this page, a scrolling image gallery component for React. Unlike every other image gallery, this one is designed to show multiple images at once, without cropping them. It is not designed to be a cinematic experience, but an alternative to splashing a bunch of images on screen directly.

Note: this still has a few bugs, but the proof of concept is solid.

Barrie Transit Map Re-design

A complete re-design of my local bus map with Adobe Illustrator and InDesign, focusing on usability.

I documented the process in an illustrated post called Re‑drawing the Barrie Transit Map where I explain my thinking behind different parts of my design using some simple rules I came up with:

  1. The routes are the roads
  2. Routes must be easily traceable
  3. Use the correct scale
  4. Anticipate confusion

Blog postDownload