Projects

Technology used:

• React/Next.js
• Sass
• CraftCMS
• GraphQL
• Figma

The task was to create this beautiful dual card component. The component stacks while maintaining the "skewed" look giving it an great look on mobile devices. You can check the design here.

Technology used:

• React/Next.js
• Sass
• CraftCMS
• GraphQL
• Figma

This is one of the latest projects I have completed as of 12/16/2025. The task was to mimic the bottom component in this design document. The way I approached this design was creating a wrapper component that renders a `tile` component. Up to 6 of this can be added to the wrapper component. This design is not live, but it can be interacted with through testing environments. Information on that is available upon request.

Technology used:

• React/Next.js
• Keen-slider
• Sass
• CraftCMS
• GraphQL
• Figma

This is one of the latest projects I have completed as of 12/14/2025. The task was to mimic the bottom component in this document. I created a slider using Keen-Slider, then a slider pod of the design. The user can set the Image Content Row Pod image either left or right, add a heading with styling, and add a support image in the text section.

Technology used:

• React
• Next
• BigCommerce's Checkout SDK
• Affirm
• Amazon Pay

Currently, we are creating a custom headless checkout to take control over how it looks and functions, in order to provide a better experience than what BigCommerce's templated checkout can provide.

During this project, my responsibility was to integrate wallet express payments with this new checkout. The payment methods I integrated were Affirm, and Amazon Pay.

(This project is still in active development, but my integration has been completed.)

In order to fully integrate these wallets, I worked together with another developer who integrated the BigCommerce's Checkout SDK into our custom API. This creates a "tunnel" from our checkout to BigCommerce that allows Amazon and Affirm to create instances using the cartId. This allows the user to use Amazon or Affirm as payment methods in our checkout.

My Affirm payment method connected to Affirm's services through our checkout.

Amazon Pay connected to the Amazon's services through our checkout

Technology used:

• CraftCMS
• React
• NextJS
• GraphQL

In this project I created a CraftCMS block that would render a different entry on the homepage depending on the zip code. Each entry has a group of different components that create the content of the page. The idea behind this project is to tailor the content of the homepage to different markets based on location.

The browser automatically gets the zip code if the user consents to share that information. This is located on the top left of the homepage.

The zip codes are divided into 5 different areas,

• Northeast
• Southeast
• Northwest
• Southwest
• Midwest

In CraftCMS, one entry contains block sections for each of the five locations mentioned above:

The creative team, then creates just one piece of the homepage or the entirety of the content using the components available in the GeoBlocks.

Technology used:

• CraftCMS
• React
• NextJS
• React-PDF

In this project, I created a CMS Block that allowed the creative team to upload a PDF and flip the pages, like a book, for the Seasonal Look Book, showcasing the latest looks and trends in outdoor furniture.

Technology used:

• CraftCMS
• GraphQL

When CraftCMS released their version 5 upgrade in March 2024, so much changed in their code that it caused our entire website to crash due to the way field names and entries were changed.

In this project, I had to refactor our entire GraphQL database and update our CMS blocks to bring everything to CraftCMS new standard and bring our website back online after the upgrade.

I accomplished this in a testing environment in order to not cause any disruption to our production.

CraftCMS fundamentally changed how certain blocks were classified in their CMS, from BlockTypes to Entries. This caused all of our pages and blocks to crash due to the name mismatch.

This is an example of the old format in our GraphQL queries.

dynamicHero {
         ... on dynamicHero_video_BlockType {
			heroVideo
			typeHandle
			id
		}

		... on dynamicHero_staticImageText_BlockType {
			heroImage {
			id
			width
			height
			url
			srcset(sizes: ["1", "400"])
		}
		typeHandle
		heading
		id
		subHeading
		heroLink {
			... on heroLink_BlockType {
				text
				linkUrl
				altText
			}
		}
	}

	... on dynamicHero_staticImage_BlockType {
		typeHandle
		id
		heroLink {
			... on heroLink_BlockType {
				text
				linkUrl
				altText
			}
		}
		heroImage {
			width
			height
			url
			srcset(sizes: ["1", "400"])
		}
	}
}

This is the same snippet of a query with the new format:

dynamicHero {
	 ... on video_Entry {
		 ...dynamicHeroVideoFragment
	 }
 
	 ... on staticImage_Entry {
		 ...dynamicHeroStaticFragment
	 }
 
	 ... on liveTextStaticImage_Entry {
		 ...dynamicHeroLiveTextFragment
	 }
 
	 ... on hotspots_Entry {
		 ...dynamicHeroHotspotFragment
	 }
 }

The new format removes the prefix that refers to the name of the block and changes the BlockType suffix for Entry.

This means that ...on dynamicHero_video_BlockType becomes ... on video_Entry.

I also took the opportunity to simplify our queries by adding fragments.