Toolkit
The Result
The Outcome
A fully custom, CMS-driven portfolio that reflects Diona's design practice at the highest level — with a hand-coded GSAP motion system, a flexible content architecture, and an interactive tag structure that scales as her work grows.
Challenge & Goal
Diona needed a portfolio site that matched the caliber of her work — something that showcased her multidisciplinary design practice across brand identity, UX, product design, and experiential work, while giving her full autonomy to update projects, services, and content without needing a developer.
Design Direction
A pink and green color palette became the foundation — feminine but sophisticated, avoiding cliché. The bento grid layout gives the work breathing room and creates visual rhythm across the page.
GSAP Animation
One of the first major explorations into GSAP on a MAVE project. Custom scroll-triggered animations were hand-coded using Slater, connected directly to the Webflow site via custom code in the backend.
CMS & Content Architecture
Built a deep CMS system that lets Diona manage her entire project portfolio independently. She can add case studies, update project details, and control how her work is presented without touching code.
Reflections
What I Learned
Hand-coded animation needs a maintenance plan
Wiring GSAP into Webflow via Slater and custom code was one of the first explorations of its kind on a MAVE project. It unlocked motion Webflow can't do natively — but anything living outside the visual canvas needs to be documented, or the next person to touch the site is flying blind.
CMS autonomy is the deliverable, not a bonus
The real success metric wasn't how the site looked on launch day — it was whether Diona could add a case study, update a project, or restructure her services six months later without calling a developer. The CMS architecture was built for that day one, not as an afterthought.
Color earns trust when it avoids cliché
Pink and green is a risky combination for a design portfolio — easy to read as decorative rather than deliberate. Pairing it with restraint elsewhere on the page is what made it read as feminine and sophisticated instead of just loud.
Bento grids reward restraint
A bento layout only works if every tile earns its space. Giving Diona's work room to breathe mattered more than cramming in every project — the grid does narrative work when it's not fighting for attention with itself.
