Dwayne's Portfolio

Do Better NYC

A freelance developer aquaintance asked me if I was available to take on this project from a client of his. I didn't know much about the project or client, but was excited when I heard what it was about.

I was given Figma mockups, reference screen recordings, and a set of assets from a designer (and then later, new versions of all these things from a new designer), and I implemented the working HTML/Javascript/CSS versions.

The client wanted the website to run in their existing Shopify account, and the existing Shopify products and variants to be included.

Development Process: I created static/local and Shopify "versions" (just two directories of files, one with plain HTML files and one with .liquid template files) so that I can run and test the project locally, and also have files that I can upload into the Shopify theme editor. I "mocked" some of the Shopify related features in the static/local version of the project. I used a lot of VSCode/git features to manage the versions.

Custom CSS Animations

  • I implemented custom site-wide animations. No third-party libraries used.
  • Uses transition and animation CSS properties or custom Javascript.

Responsive Design

  • I implemented the given desktop Figma designs in HTML/CSS/Javascript.
  • I implemented the required changes for mobile for a second desktop version.
  • Uses CSS @media queries override desktop styles for mobile layout.
  • Listens to keyboard, mouse, and swipe events for navigation.

Shopify Product/Cart Integration

  • I implemented the given design in Shopify and integrated the existing product variations.
  • Uses Shopify Liquid templates and Cart API.