Building this interactive site was an exercise in agility. With two weeks to design and launch, I led the development charge on this project. I leaned heavily on petite-vue to manage the interaction of the page, from map moving to loading and populating menus and content areas. The content was hosted and pulled from Airtable using their API. To minimize API calls, the content loading was proxied via Vercel serverless functions and cached for an hour at a time.
Aside from the limited time to build, there were some fun technical challenges.
- Getting the map interactions feeling good, especially across desktop and mobile experiences, was very tough. Lots of rectangle math, position-based animations and dialing easing values to get it just right.
- Individually loading the gif overlays also presented an interesting challenge. Positioning had to be calculated via percentages to account for scaling. To make that easy, I built a debug mode into the page that would allow me to drag overlays around and report out the percentage positioning. Since final art was not delivered until the end, this was vital in not wasting time.