XYZ Photos

Animations, photo gallery and Netlify Forms integration for photography business.

One of my biggest projects involved coding XYZ Photos (xyzphotos.com) which served as a landing page for my portrait photography business.

I coded it in HTML, CSS and JavaScript and hosted on Netlify. The goal of the website involved trying to help people understand the value of a good portrait photographer, using animation, copy that I wrote and a lot of images from past clients.

Features

Hero image slideshow with “typing” feature

I coded the “typing effect” that synced up with the loading and unloading of the hero images.

Animated desktop and mobile device showing dating app and website

I wanted to illustrate the benefits of having a good photo by putting my client’s photos on a website (simulating a professional’s website) and also a mobile phone screen (simulating a dating app).

I wrote the animation in JavaScript and CSS. I used open-source code for the mobile phone and the computer, and modified it so it would accept the images.

Contact form integration into Netlify

I am really happy with Netlify’s contact form feature. Previous to this, I had to run an AWS function that would forward the contact form data to my email.

Netlify takes care of all of that and all I had to do was to mark which fields I wanted track by Netlify. As a bonus, Netlify filters all the spam too. It’s great!