Challenges

FAQ Accordion

Frontend Mentor Challenge

JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
Vercel icon
Vercel

Description

My submission for a Frontend Mentor challenge which was done as a self-challenge to reinforce my vanilla JavaScript skills. The instructions were to create an FAQ accordion based on image mockups and implement hide/show accordion functionality.

Highlights

  • Modular component architecture written from scratch without a framework
  • JSDoc integration for lightweight type safety
  • Accessible, WCAG compliant solution

Scroll Driven Animations

POC Demo

JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
CodeSandbox icon
CodeSandbox

Description

A scroll-driven animation demo on CodeSandbox using the Intersection Observer API. Cards animate onto the page as the user scrolls down and when the last card is visible new cards are generated which creates an infinite scroll effect.

Animated Sprite Sheet

POC Demo

JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
CodeSandbox icon
CodeSandbox

Description

A CodeSandbox demo created as a self-challenge to test weather animating a sprite sheet using only vanilla CSS was possible. I completed the challenge in one night and wrote an article to document my experience.

Websites

Currency Ticker

Take-Home Challenge (3 days)

NextJS icon
NextJS
TypeScript icon
TypeScript
HTML icon
HTML
CSS icon
CSS
Jest icon
Jest
Vercel icon
Vercel
Figma icon
Figma

Description

My submission for a take home challenge as part of an interview process. The challenge was to create an application to fetch and display a frequently updated dataset via API. The application had to update data live, include list and details pages, and be responsive. I used the coincap.io API to fetch and display cryptocurrency data on a 30 second interval. I implemented a persistent favorites system using local storage, pagination with 'show more' and 'show less' buttons, and skeleton components to minimize layout shifts.

Highlights

  • Led to a final interview and job offer
  • Seamless transition between empty and states
  • Completed challenge within tight 3 day deadline
  • Designed and developed from scratch
  • Includes a detailed post mortem document in the repo (PostMortem.md)

Portfolio Website

Digital Resume and Portfolio

NextJS icon
NextJS
Vercel icon
Vercel
React
TypeScript icon
TypeScript
HTML icon
HTML
CSS icon
CSS
Jest icon
Jest
XState icon
XState
React Spring icon
Spring
Figma icon
Figma

Description

You are currently viewing this project! I created this website using NextJS to act as a hub for my portfolio and resume. The source code is openly available and demonstrates my iterative development style. This project is in the late MVP stage with QoL and visual improvements on the pipeline. You can view the project board and git history to see the most recent and upcoming changes.

Highlights

  • Shared logic extracted into highly reusable custom hooks for consistency and ease of use
  • Modular component architecture, enforcing a strong separation of concerns
  • Fully accessible and WCAG compliant with an adaptive UI that scales to user's preferred font size
  • Custom theme with dark and light variants
  • Designed and developed from scratch
  • Custom assets featuring hand drawn and programmatic animations

MTX Login Page

Self-Challenge

React
Redux icon
Redux
TypeScript icon
TypeScript
HTML icon
HTML
CSS icon
CSS
Jest icon
Jest
CodeSandbox icon
CodeSandbox

Description

A self-challenge to create an application with intentionally miserable UX by locking text 'characters' behind a paywall. It features a simulated a login page environment in which the user must purchase 'characters' through a micro-transaction store. This project was created for fun as an avenue to improve my skills with Redux.

Highlights

  • Simulated API requests using a local storage mock data layer and custom hooks
  • Cached and memoized user data for data persistence
  • Robust state management using Redux
  • React-Toastify and React-Modal integration

We Sell Users

Take-Home Challenge (one week)

VueJS icon
VueJS
ASPnet icon
ASP.net
Csharp icon
C#
JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
AJAX icon
AJAX
SQL icon
SQL
Trello icon
Trello

Description

I built this project as part of a one week take-home challenge. I was given mock data in an excel sheet and tasked with designing a database and a full stack application to manage and display user data.

Highlights

  • Successfully led to my employment at Richmond Day
  • Project completed and deployed to Azure within one week
  • Interactive interface to dynamically edit data

Dog Dojo

Learning Exercise

VueJS icon
VueJS
ASPnet icon
ASP.net
Csharp icon
C#
JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
AJAX icon
AJAX
SQL icon
SQL
Trello icon
Trello
Illustrator icon
Illustrator

Description

I built this full stack application as a learning exercise. This project is a mock e-commerce website with a virtual storefront for 'buying' dogs. Though it is no longer live, I did establish an autodeploy pipeline using Azure DevOps. Controllers access SQL data using linq statements and leverage VueJS to display and modify data.

Highlights

  • Mock e-commerce experience featuring item details, shopping cart, and checkout pages
  • Dynamic routing for item detail pages
  • Minimalist logo of a dog with a subtle tail wag animation that played whenever the user hovered over interactive elements

Portfolio Website 2019

Original Version

NextJS icon
NextJS
JavaScript icon
JavaScript
HTML icon
HTML
CSS icon
CSS
Trello icon
Trello
Illustrator icon
Illustrator

Description

A website I created as an avenue to learn NextJS, GitHub pages, and publicly host a portfolio of my work to market myself as a freelance web developer. This was the original concept of my current website.

Game Development

Necro Vs Crown

Personal Project

TypeScript icon
TypeScript
Vitest
Figma icon
Figma
Colyseus
bitECS
Phaser
PixiJS
RxJS
file_type_svelte
Svelte

Description

Necro VS Crown is an ambitious multiplayer browser game currently in development. It was originally a single player POC known as Necro Cursor. Necro VS Crown has two factions with opposing goals and distinct mechanics. While playing as the Necro, you control a lowly necromancer and amass an army of skeletons that you have direct control over. While playing as the Crown, you collect gold over time that can be spent to spawn units that will automatically chase and attack Necro units. The former is akin to the 'survivor' rogue-like genre, while the latter is akin to the deck building rogue-like genre.

Highlights

  • Highly performant data-oriented architecture built with bitECS (ECS framework)
  • Rigorous unit tests for most systems (over 85 tests)
  • Lightweight and reactive UI built with Svelte
  • Two unique game modes with distinct mechanics, goals, and controls
  • Modular components and systems built in a shared package
  • Asymmetrical multiplayer gameplay (under development)

Necro Cursor

POC Demo

TypeScript icon
TypeScript
PixiJS
RxJS

Description

Necro Cursor is an experimental POC browser game in which you play as a lowly necromancer who must defend himself from a horde of angry townsfolk. Summon skeletons from the bones of your enemies to defend you and survive as long as you can!

Highlights

  • Detailed run stats and local highscores
  • Highly reactive and event-driven solutions
  • Lightweight project with minimal third party libraries
  • Custom debug tools and testing environment
  • Detailed documentation and post-mortem in the README

Dwarf Forges

Game Jam (Summer Slow Jam 2023)

Unity icon
Unity
Csharp icon
C#
Blender icon
Blender
Figma icon
Figma

Description

Dwarf Forges is a 3D RTS style game built with Unity. The team consisted of 3 developers, 1 artist, and 1 sound engineer. Dwarf Forges is a game where you play as an enchanted forge and must save yourself from a horde of Dwarves who intend to drag you back to their fortress. Smelt down your enemies into metal bars and use them to forge a variety of unique weapons. Use those weapons to fend off the dwarves until there are none left!

My Contributions

I was the team lead and a developer for this project. As the team lead I created tickets, assembled meetings, lead collaborative brainstorming sessions, documented game mechanics and code standards, and guided team decisions. As a developer I implemented various features (camera movement, animation, game state), managed the repository, and conducted code reviews.

Highlights

  • Physics based movement and object interactions
  • Third person RTS Camera controls with locked and free roam camera states
  • Modular, event driven components for managing game states
  • Custom 3D models created in Blender and concept art sketches
  • UI mockup and feature planning using Figma and FigJam

Tossed Away

Game Jam (7DRL Challenge 2022)

Unity icon
Unity
Csharp icon
C#
Aseprite icon
Aseprite
Trello icon
Trello

Description

Tossed away was a submission for the 7DRL Challenge (a one week game jam) in 2022. The team consisted of 2 developers, 2 artists, 1 sound designer, and 1 musician. In Tossed Away, you play as a skeleton who was summoned to fetch a cook book. You use your bones to destroy runic pillars and fend off enemies as you venture through your master's lair. Be careful! Throwing your last bone results in death. Don't make your master send in a replacement...

My Contributions

I was a developer and technical artist for this project. My primary tasks involved implementing animation logic, item interactions, scene management, environment integration, and contributing to the character controller.

Highlights

  • Successfully submitted our MVP with 3 levels within 7 day time limit
  • Unique gameplay mechanic in which the player uses health (bones) as fuel for attacks
  • Top-down, 2d environment with a cohesive character style that extends to the UI and cursor

Blood & Gold

Game Jam (Metroidvania Month 13)

Unity icon
Unity
Csharp icon
C#
Aseprite icon
Aseprite
Trello icon
Trello

Description

Blood & Gold is a submission for the 'Metroidvania Month 13' Game Jam. The team consisted of 2 developers, 3 artists, 1 sound designer, and 1 musician. Blood & Gold is a game in which you play as a brave cowboy who delves into a forgotten mine that he should have left forgotten. Venture through the mines with a revolver to fend off corrupted enemies and a lantern to light your way. Fend off zombies and mutant insects in order to find the key and unlock the golden gate. Discover hidden paths, special challenges, bonus items, and easter eggs. Find and defeat the foreman to earn a special weapon, if you dare! Defeat the mutant canary to end the mine's corruption and become a hero.

My Contributions

I played a pivotal role in assembling the team and organizing collaborative game design and planning meetings. As a developer I implemented all animation logic, lantern and lighting logic, modular item interaction, health and death mechanics, game state, scene transitions, and I contributed to the character controller and state management. As a technical artist I converted sprite sheets into animations and tile sets, implemented UI and Game Menu, and painted environment using tile sets based on level layout mockup. I also continued development of the project post-submission and squished bugs, added features, implemented player feedback, improved the player's weapon animations, and created animations for some enemies.

Highlights

  • 3100+ page views, 1600+ browser plays, and 180+ downloads on Itch.io
  • Voted #2 for audio due to its environment-driven soundtrack/SFX and adrenaline fueling boss battle tracks
  • Live WebGL version and downloads for all operating systems available on Itch.io
  • All sprite sheets, tile sets, music, SFX, and code were created and owned by team members
  • Creative UI elements used to convey player states like health, ammo, and light
  • Challenging gameplay that teaches the player how to play one death at a time
  • Lantern light mechanics create a time incentive for the player due to limited lantern oil