As the lead front-end developer for Pictsweet Farms, I was focused on translating client-approved Photoshop designs into the live website and ensuring a performant web and mobile experience. I chose browser-native options, such as rendering filters & gradients using CSS3, and where possible created multiple versions of the same image for different device screen sizes to load content faster on mobile devices. To create an interactive Pictsweet Farms family storyline, I created a parallax effect that revealed visual content such as videos and responsive full-width images and on mobile, videos were replaced by image fallbacks to increase page load speed. For faster, future updates to the front-end, I set up a build workflow using NPM, Bower, SCSS, and Gulp.
Interactive effects enabled for touch or/and mouse devices
Progressive enhancement from small screen to large screen