This portfolio combines many of the tools and frameworks I enjoy working with into one project. My goal with this portfolio is to deliver a great visual experience for the user while displaying my experience in an accessible manner. The core framework used for this project is Next.js, All 3D elements utilize the Three.js library, and most animated visuals utilized the Framer Motion library.
Card Jitsu is a free-to-play card game where players can create lobbies and invite their friends to face off in a 1 vs. 1 battle. The front-end was created using React, Tailwind & GSAP. The back-end was created using Express & WebSockets.
A full stack web application that allows users to search up their League of Legends profile and view various statistics on their solo queue ranked performance. The front-end was created Vue 3 bundled by Vite. Pinia was used as a state management solution and all routing was handled by Vue-Router. Our back-end REST API was created using Node.js and Express.js. Our data is stored in a MySQL database hosted on PlanetScale.
A tool for viewing all Pokemon up until the 9th generation! This web app allows you to view various details about each Pokemon including its stats and types. This app was created in Next.js utilizing their new server components for easy data fetching, and Tailwind CSS for all styling.
A full stack application for parsing an analyzing GPX files to get navigation data. This application was my first full-stack web development experience as a project in the infamous course CIS2750 (Angel of Death) at the University of Guelph. This project's parsing library was written purely in C and the back-end API was created with Node.js + Express, as well as MySQL for the database. The front-end was written entirely in vanilla JavaScript, HTML, and CSS! (This project utilizes many old dependencies and outdated practices and is displayed as a legacy project for the time being.)
A simple ray tracing demo that renders 3D objects, lighting and shadows in your scene. This raytracing engine was made entirely with JavaScript utilizing vector mathematics to render 3D objects in an HTML canvas. A few sample scene inputs are available on the GitHub repo to try it for yourself.