1.0Overviewso, basically...

The Joey Klein team wanted a cutting-edge site. From Groundwrk’s designs, I built a WordPress back-end for easy maintenance, and a Gatsby front-end for amazing speed. I created a custom plugin to easily deploy content to Netlify. The footer’s butterfly animation wasn’t in the original design, but I added it because, well, it looks really cool!

Services

Details

  • Built the site on the blazing fast Gatsby platform.
  • Built WordPress content to Netlify server deployment plugin.
  • Surprised client with special flapping butterfly wing animation.
Desktop screenshot of web development for Joey Klein home page

2.0Special Highlightslet me draw your attention to...

PageSpeed insights 99% speed rating report

2.1Gatsby is Great!

This is the first site I built using Gatsby—a modern, robust static site generator. By sourcing from WordPress, I was able to give my clients the easy, powerful back-end content editing experience WordPress provides, paired with a blazing fast Gatsby front-end for their customers to access.

Gatsby also allowed me to build some unique page-to-page fade transitions: since it uses React to switch pages rather than doing a traditional reload between each page, there’s no awkward white flash as you’re going to a new page but rather a pleasing fade out to blue and then fade in of new content. Looks quite slick!

3.0Technicalfor the geeks

3.1Lively Logo

In the original design there was just a simple butterfly logo in the footer, but I decided to take it a step farther and add some animation! So I sliced up the logo into two separate wings and added a 3D flapping animation.

I’m just using simple CSS keyframe animations to keep this thing super lightweight, and I kept it flapping slowly enough (it’s sped up a bit in this section’s video) to where it’s not obnoxious every time you reach the footer, just a subtle flap every so often. The client loved it!

Play with the code!