New portfolio site is in the works @ lukemackenzie.dev 👀

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

It doesn't look like much yet but I have a ton of food-related notes that need an easily accessible home. I chose Next.js and Sanity because I've used both in the past and I'm keen to try out all the new features they've since released.

Next.jsSanityTailwindTypeScript

I'm currently building this site purely for learning purposes. I was curious to try out Supabase and explore some of the newer Next.js features (app router, parallel/intercepting routes, React server components & actions, etc.). Since I didn't want to spend too much time on styling, I opted for shadcn/ui which also allowed me to easily add toast notifications. Authentication is handled by Supabase (via the @supabase/ssr package), which was a breeze to set up and use.

Next.js 14Supabaseshadcn/uiTailwindTypeScriptVercel

This is a handy Chrome extension that will keep track of how long you spend in Google Meet calls, making completing timesheets slightly less painful.

JavaScriptChrome Extension

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! 🤷🏻‍♂️

The site is automatically built & deployed on push to the repo via Buddy CI.

AstroPayload CMSDigitalOceanPostgreSQLBuddy CITypeScriptTailwind CSS

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

* I'm working on getting this project updated and back up & running!

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

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

After completing Wes Bos's Whack-A-Mole tutorial (many years ago now...), 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

Blog

Luke MacKenzie2024