Case Study - WHVAR Go Bold Conference Page

Mockup

While we've done a lot of work for the Women in HVACR non-profit, designing this events page was a particular treat. They didn't have a lot of details for me starting off, just the logo for the event, and they were wanting a 'Gatsby' feeling/theme. I took inspiration from the 2010 Great Gatsby movie, even worked out the page's opening animation to have a similar zoom effect, while creating all the gold trim design patterns myself.

Some of the challenges I came across was making sure it was dynamic to accommodate the changing information, (when it was initially built, I didn't have any of the speaker information, or location data). The other challenge was getting the background components in place with images positioned and animated properly.

Live Site

The opening zoom animation gives it a grandiose feel, but the rest of the content is in place, to not fully detract. I personally am a fan on the shimmer animation that plays on the logo every so often after the whole thing finishes. Additionally, the hover effects on the button were a real pain. I used a :before pseudo-element to create the second outline, and style it with a clip-path and position absolute, and changed its size on hover in tandem with the parent button.