Skip to main content

Mavro Imaging Site

Back to Archive

Client: Mavro Imaging
Link: mavroimaging.com
Description: This site was coded on WordPress using a pseudo-page builder built in ACF. The intention was to allow the client to edit content and create new landing pages without allowing them to make design decisions that might disrupt the site branding.

Technologies, frameworks and plugins used included: WordPress, Gravity Forms, Tailwind, Webpack, Waypoints, Anime.js, CRMPerks,

Considerations when developing included:

  • How to optimize images: Almost all the images on this site were ideal to be served as SVGs. A notable exception is the hero image on the homepage, which was too complex as an SVG and slowed page load time. For that image, a PNG (while still a large file) allowed the desired level of image crispness.
  • Animation: One of the key design features was the animation on the homepage in the Stats section. I made an image that tiled seamlessly horizontally and set it as the background image on multiple divs. Then I animated the background-position-x at varying speeds, resetting it at the end of each loop so the value didn't go too high.