I received the designs as a Figma file from a colleague across the other part of the planet and through out this project, we managed to collectively work on any missing or extra graphics needed for this website. The research started after getting that along with some instructions on what certain animations needed to be. After some thought for the project needs, I chose GSAP for the animations simply because it was the most versatile tool for this project giving me benefits such as speed and this was helpful since the timeline was a bit short (they always are).

I did some testing on SVG animations and CSS animations to make sure I don't depend on JavaScript for all the website's animations. This would be beneficial for the site's overall speed especially on mobile devices.

Every aspect of the design was finalized (colors, fonts, and spacing) which meant exporting all assets from Figma into different file formats based on where it fit best (SVG for logo and vector elements, PNG for transparent images, JPG for photos & other rasterized graphics). I used GULP and built my own template to automate a lot of repetitive tasks such as optimizing images, bundling and minifying scripts, copying over fonts/docs and more for a faster workflow and a complete responsive, accessible, and fast website.

I worked in VS Code, tested in Chrome for the majority of the project. It was a desktop-first approach since the client wanted to see the fancy animations on a larger screen first and there was no previous website data indicating any preferences/info. Once I'd finish one or a few sections on the desktop, I'd shift gears into the mobile site and make any modifications/optimizations I see fit. I tested the site in Firefox, Edge as well as my Android (Chrome) with USB debugging tools & an iPhone device (Safari) to make sure everything worked correctly before final delivery.