Font Size:

High Contrast:

Accessible Font:

Web Developer. Toronto.

In January of 2019 I quit my cozy insurance job and have since completed Juno College's nine-week Web Development Bootcamp. Currently, I'm a Web Developer at Relish Studios where I build and maintain websites, leverage tools like GSAP to create engaging, event-driven graphics, and dabble in React Native and web game development — among other things.

When I'm not coding, you can find me on a golf course, playing guitar, cooking, reading, or rewatching Friends for the 27th time.

Work

This project has four parts:

  1. A simple Gatsby site that pulls data in from MongoDB by hitting my Express API endpoints.
  2. An Express app that uses Mongoose for schema definitions and connects to a MongoDB database via routes I defined. Hosted on Heroku.
  3. A React Native app that gives me an easy way to add data to the database by making POST requests to my various API endpoints. Additionally, I configured a Google Cloud Function that makes a call to the Oxford Dictionary API and returns the definition for the word provided in the request body.
  4. A Chrome Extension with the same functionality as the app but with the added convenience of being right there in the browser.

I'm a compulsive note taker. As such, the Notes app on my phone was getting out of hand and I realized I needed a better way to store and organize everything I've been writing down (words, quotes, advice, etc.). I knew I wanted to make it as easy as possible to add entries and the obvious answer was to build an app. From there, one thing led to another and while I plan to continue making improvements, I'm very happy with the results so far.

ReactGatsbyReact NativeTailwindGulpExpressMongoDB / MongooseHerokuGoogle Cloud FunctionsStyled Components

My personal portfolio website - look familiar?

While I love making websites look as nice as possible (check out my previous portfolio site), my main goal for this rebuild was to not only continue growing my knowledge of familar tech (React, Gatsby) but to also explore some new stuff (ThemeUI, Sanity.io, Custom NPM Packages). As you can see in the second picture, I've created a completely custom Sanity.io CMS for my site that includes, among other things, a Live Preview of changes (accomplished by running the dev server on a Heroku dyno) and automatic deployment to Netlify.

ReactGatsbySanity.ioThemeUINetlifyCustom NPM PackagesCypress

This is a Gatsby site that I built for a friend's business (not yet in use). With Sanity as the backend, creating a new post is as simple as filling out a few text fields, adding a couple images, and pressing Publish. Additionally, I turned to Firebase's authentication and database products to allow users to sign in and save posts. Finally, I took a stab at using Framer Motion to add a little animation.

ReactGatsbyFirebase Auth & DatabaseThemeUISanityFramer Motion

Like Whack-A-Mole, but more satisfying. Desktop only.

After completing Wes Bos's Whack-A-Mole tutorial, I decided to have some fun with it. Obvious changes aside, I also improved upon the game functionality, implemented a fun custom cursor and added a leaderboard that pulls past scores from Firebase. Finally, I used Parcel to create an optimized production bundle (minification, auto-prefixing, JS compiled to ES5, etc.) and Netlify for easy hosting.

HTMLSCSSJavaScriptFirebaseParcelNetlify

A short, multiple-choice quiz to bring awareness to the surprisingly high drop out rate across Canadian high schools.

This is something I built for one of Camp Jefferson's clients, Pathways To Education. What I originally thought would be an easy task ended up being quite the challenge. Quiz functionality aside, I had to work with SVGs for the highlights and implement custom social cards so users could share their score on social media. It was a frustratingly great learning experience and I'm very happy with the result.

ReactGatsbyThemeUIStyled Components

I'd been wanting to build this site for a while and finally decided to go for it using Astro on the front-end and Payload as the CMS. All parts of this project, including the database, live on a DigitalOcean droplet. I decided to setup the droplet from scratch which meant doing everything from installing & configuring NGINX and Node.js, to setting up Postgres and adding a basic firewall. It was definitely a learning experience and I'm sure it's not perfect but HEY, it works! 🤷🏻‍♂️

AstroPayload CMSDigitalOceanPostgreSQLBuddy CITypeScriptTailwind CSS

Blog

Luke MacKenzie2023