Ecopia AI Website Rebuild and CMS Migration

Ecopia AI converts high resolution imagery into high precision vector maps for governments, insurers, telecom operators and engineering firms. They hired me for a full rebuild of ecopiatech.com in Webflow: same design, same motion, same URL structure, but off a legacy Charcoal CMS and onto a platform their marketing team can actually run.

Scope A 1:1 rebuild of the existing site, a complete CMS migration of 213 articles, and a set of structured landing pages for products and industries.

Design system I extracted the live site's system straight from its CSS and rebuilt it in Webflow using Client First naming. Fluid clamp() typography, a 12 column grid and a full set of spacing variables, so every page scales from one source of truth instead of one off styles.

CMS architecture and migration Built 13 collections (Blogs 121, News 74, Case Studies 18, Products, Industries, Testimonials, galleries, partner logo lists) and migrated every item from the client's database export. Legacy rich text contained comparison sliders, video embeds and map iframes, so I built a marker based system: editors keep writing in a single rich text field and the components render themselves. Related posts were rebuilt from the old database IDs so nothing lost its connections.

Motion and interactions I measured the original site's animations and rebuilt them with GSAP as one attribute driven system: per character page load reveals, image reveals with scale and fade, scroll parallax, logo marquees, and a full screen menu with an animated pixel grid. Page transitions run on Barba.js with Lenis smooth scroll. Also built Swiper timelines and carousels, a custom before/after comparison slider, an image zoom lightbox, sticky step sections, and a filterable resources listing with Finsweet Attributes.

Forms HubSpot multi step forms embedded and restyled to match the brand down to the input states and dropdowns, including the data portal registration flow and the footer newsletter.

SEO and accessibility Full 301 redirect map for all legacy /post/ and /news-post/ URLs, original URL structure preserved, schema markup, and Lighthouse accessibility passes with fixes across navigation, filters, carousels and pagination.

Stack Webflow, Client First, GSAP + ScrollTrigger, Lenis, Barba.js, Swiper.js, Splitting.js, Finsweet Attributes, HubSpot, custom JavaScript, Webflow CMS migration.

Outcome An enterprise scale site with the feel of a custom build, that the client's team can update without a developer.