Chloe graduates in 2026 with an eclectic mix of branding, editorial, and interactive work. She wanted a portfolio that reflects this range without feeling disjointed. We delivered a two-part system: a polished React marketing site that recruiters can skim in minutes and an immersive playground where she can guide people through deep-dive motion pieces.
Deliverables
Marketing site, interactive experience, CMS-ready project system, and analytics setup.
Audience
Recruiters, agency partners, and fellow creatives seeking Chloe's motion craft.
Built with
Next.js, Framer Motion, GSAP, Sanity, and custom edge functions for asset delivery.
Experience architecture
We built two surfaces that work together. The marketing site leads with concise case studies, while the playground leans into scroll choreography, cursor-aware effects, and ambient audio loops. Shared tokens - grid, type scale, and color - keep them aligned.
- Case study templates that highlight project outcomes first, then tooling and process.
- Animation presets that unify hover, scroll, and intro motions across both surfaces.
- CMS-backed metadata so Chloe can change ordering, labels, and feature flags without code.
Project highlights
Motion, typography, and tooling work together so Chloe can tell richer stories without overwhelming the viewer.
Dual architecture
Main React site plus a standalone interactive showcase that share a single design language.
Motion rich
Framer Motion, GSAP, and custom easing for scroll reveals, breathing headlines, and micro interactions.
Student ready
Resume download, services page, and contact funnels tuned for internships and client leads.
Performance aware
GPU accelerated animations, image preloading, and responsive breakpoints tested on multiple OSs.
Key screens
Snapshots from both the client-ready site and the experimental playground that show how we balance clarity and motion.
Tap any image to zoom. Use onscreen or keyboard arrows to cycle, press Esc to close.
Project snapshot
High-level guardrails that shaped the build.
Services
Strategy, UX, visual design, animation, and engineering.
Timeline
8 weeks with weekly crits synced to Chloe’s studio schedule.
Collaboration
Workshops with Chloe, faculty advisors, and a motion design mentor.
Process
We prototyped micro interactions first to confirm the animation budget, then layered in responsive design and content hierarchy. Every page has a motion-lite option for accessibility.
- Storyboards for hero animations validated scroll pacing before development.
- Component library documented easing tokens, z-index stacks, and color usage.
- Accessibility sweeps ensured reduced-motion preferences carry across both surfaces.
Feature breakdown
Each project page offers modular sections—outcome summary, process timeline, media gallery, and behind-the-scenes notes. Recruiters can skim outcomes quickly.
- Brand identities for Cafe Sol and Studio Nori with process video embeds.
- Editorial system for Linea with typographic specimens and grid overlays.
- Interactive Axolotl and Keebys apps featuring animated flows and modal walkthroughs.
- Supporting work in photography, film editing, and signage presented in an infinite carousel.
Technical notes
To keep performance in check we preloaded hero media, throttled animation tick rates, and leaned on GPU friendly transforms. Responsive breakpoints adapt spacing to macOS, Windows, and mobile viewport conventions.
- Custom scroll pagination using GSAP timelines and intersection observers.
- Click spark and cursor aware effects implemented with lightweight Canvas layers.
- Resume download powered by edge cached static asset with tracking hook.
- Shared component tokens across both experiences to simplify long term maintenance.
Audience impact
The new portfolio gives Chloe a professional home that can scale as her body of work evolves. Recruiters can evaluate credentials in minutes, while fellow creatives have a space to explore the experimental side of her practice.
The response from faculty and peers was immediate. Feedback dashboards captured portfolio reviews that Chloe can now act on between critiques.
Next steps
Share
About the author
Designer developer helping creatives launch compelling, motion-forward web experiences.