Description

Rebuilt client's Wix website using NextJS, adding many new features, boosting performance, and vastly improving user experience. This project came to life through a proof-of-concept pitch and was delivered in two phases. Phase one was a total redesign and rebuild starting with a Figma mockup before building the site and adding dynamic multi-step forms, email services with templates, and animated hero/icons. Phase two added a vehicle inventory page, inventory filtering and sorting, tiered authentication with user roles, and an integrated database populated by web scrapers.

Highlights

• Ability to edit inventory for authenticated admin users
• Custom web scrapers for 7 domains, storing a standardized data set
• Optimized image loading and skeleton component load state to reduce layout shift and boost first load speed
• Automated python script to modify images, including background removal
• Multi step client intake form with templated emails
• Fully accessible and responsive design with near-perfect web vitals
• Custom Hero animation and animated SVGs
• Reduced monthly subscription fees by 100%

Description

A Frontend Mentor challenge which was completed as an avenue to learn and practice Tailwind CSS. The instructions were to create an input that accepts an IP address or domain and displays various geolocation data and a map. Design images and a loose style guideline was provided.

Highlights

• Efficient API implementation leveraging a NextJS route handler
• Environment variable feature flag for optional mock responses
• Adaptive user input that automatically adds decimals for ipv4 ip addresses

Description

Ant Simulator is a browser game for visualizing realistic ant behavior. Ants leave pheromones that evaporate over time to guide other ants toward food or back to their nest. Using sensors, ants will follow the strongest pheromone trails, reinforcing high value paths while low value paths degrade.

Highlights

• Highly performant ECS state management using Koota
• Realistic ant behavior and visualization
• Mobile friendly - highly responsive and small download size
• Handles hundreds of ants and thousands of pheromone nodes with little performance loss

Description

Baby Simulator is a simple browser game in which the player offers toys to a baby to stave off boredom. The simulation ends when the boredom meter fills up. Each toy is categorized by its unique properties which build up 'aversion' and make the toy less appealing. Offer new and different toys to keep baby entertained for as long as possible. This project was built as a testing grounds for my AI decision making JavaScript library based on utility theory called utility-ai. In utility-ai, each possible action is 'appraised' and represented numerically by a value of 0-1. A final decision is made based on the highest score.

Highlights

• Reactive Svelte driven UI using stores for state management
• Complex decision making system that compares multiple actions based on utility theory
• Customized formulas designed to assign numeric value to arbitrary data
• Detailed data visualization and development tools

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 2 day deadline
• Designed and developed from scratch, including Figma mockup for mobile and desktop
• Includes a detailed post mortem document in the repo (PostMortem.md)

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)

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

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

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

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

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

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.

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.

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

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

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

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

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.