Imaginarie Marketing Site

The marketing site & blog for my app Imaginarie was a project in itself. It's built with Webflow and uses the CMS to manage content and integrates with the app's Firebase backend.

Designer, Branding, Developer

Webflow with CMS
Firebase Cloud Functions
jQuery
Google Analytics

Originally, I had built my entire marketing site in Vue, like the rest of the app. Then, it was time to add a blog and well, I didn't feel like building one from scratch. I decided to move my entire site over to Webflow, and it turned out to be a great choice. I was able to replicate some advanced features, add better animations, and it's much easier to update.

See the Imaginarie App page to learn more about the app itself.

Animated SVG Logo

• Welcome visitors with whimsical animations.
• Re-create logo animation using Webflow's animation tools.

• Created the logo in Illustrator and updated the SVG code to add classes to the individual paths I wanted to animate (the dots above the i's).
• Embedded the SVG code in Webflow and created dummy elements with the same classes as the dots in order to animate them using Webflow's tools.

Show up-to-date content from app

• Add a preview version of each imagination card to Webflow site
• Always keep the content up-to-date & in sync with content in app database

• Added a Firebase Cloud Function that connects to the Webflow CMS API. Now, whenever a card is created or updated in Firestore, the card gets updated in Webflow and I don't have to think about it!

Track clicks in Google Analytics

• Add a preview version of each imagination card to Webflow site
• Always keep the content up-to-date & in sync with content in app database

• Added a Firebase Cloud Function that connects to the Webflow CMS API. Now, whenever a card is created or updated in Firestore, the card gets updated in Webflow and I don't have to think about it!