Alberta Commercial Group

Hired to design and build a rebranded portfolio site for a Calgary based real-estate brokerage. Job was to transition the site from Wordpress to something more manageable for the clients to use. I started off by wireframing and prototyping the initial interface in Adobe XD. From there I decided to integrate Netlify CMS for easy content editing, and flushed out the site using GraphQL in Gatsby to create a static site that rebuilds every time content is edited in the CMS. Most of the micro-animations are done with simple css transitions or keyframes, and more complex orchestrated animations with GSAP. React Helmet was used to inject metadata for each page and listing to increase effectiveness when sharing, and in addition to the frontend i also constructed a serverless function for sending mail powered by Netlify Functions and the Mailgun API.

View on GihubView website

Custom animated page transitions using Reach Router, React Transition Group, and GSAP inside a Gatsby layout component.

Created an infinite slider with React lifecycle methods and some clever animation. When the user scrolls up a custom effect using ScrollMagic, and two layered 3D CSS transforms is triggered.

Used FLIP animation technique to create a declarative way for listings to reorder themselves when any of the filter values change.