Dwayne's Portfolio
Do Better NYC
- Website https://www.dobetter.nyc
- Started October 2020
- Completed December 2020
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
andanimation
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.