Olimpo Landing Page

Overview

Olimpo is a productivity app I created, framed by Greek mythology. The Oracle, an AI planner, writes the whole plan from a single sentence, Chiron, the AI coach, calls you back when progress stalls, and Cerberus helps with data protection, keeping what you write encrypted and out of AI training.

I designed and built its website in Webflow. It has a 12-section landing page with scroll animation, a 3D scene, interactive product demos, and a Codex of 50 articles managed in the CMS.

My Role

As designer and Webflow developer, I started in Figma with the wireframes and the visual design, then built the site in Client-First with native Webflow features first: Variables, Components, Interactions, Lottie, and the CMS. Custom JavaScript covers only what Webflow has no native piece for, such as the 3D scene, the Codex reader, and the product demos.

I also used an AI workflow with Claude Code to speed up the build.

Key Contributions

GSAP Interactions. Built 32 interactions in Webflow's GSAP-powered engine, including the opening sequence, the section reveals, the meander band, and the alternating deities, with a static final state for visitors who prefer reduced motion.

3D with Three.js. Added a red-figure amphora that turns with the scroll through four scenes, loaded in a Code Embed.

CMS Codex. Set up a collection of 50 entries in 7 families, each with its own template page, SEO title and description from its fields, a cover focal point chosen per entry, and related entries from the same family.

Codex Reader. Wrote a JavaScript reader with tabs, an index, and a dock that opens any Codex entry from its CMS page without leaving the landing page.

Interactive Product Demos. Recreated the app on the page: the Oracle writing a plan, the Focus Mode timer, the curfew clock, and a pinned horizontal band of the 16 archetypes.

Finsweet Attributes and Lottie. Used Finsweet number counters for the goal progress, the streak, and the prices when switching between monthly and yearly plans, the Finsweet accordion for the term summaries, and native Lottie animations triggered on scroll.

Design System. Created 89 Variables with an Inverse mode for the dark sections and Components for the Nav, the Footer, a Button with 5 variants, and a Section Label with 7 variants, documented on a Style Guide page.

Accessibility. Wrote alt text for all 131 media files, organized in folders by type and section, and marked the current section in the navigation for screen readers.