Chloe Yap Portfolio
Sophisticated, dual-architecture portfolio for a graphic design student: a polished main portfolio plus a standalone immersive experience with advanced motion.
Overview
Sophisticated, dual-architecture portfolio for a graphic design student: a polished main portfolio plus a standalone immersive experience with advanced motion.
Screenshots
Tech Stack
Key Features
- ▸Dual architecture (portfolio + immersive experiences)
- ▸Filtering showcases and case study pages
- ▸Seamless infinite carousel with physics
- ▸Custom scroll pagination system
- ▸Gallery lightbox & modal presentations
- ▸Downloadable resume flow
Portfolio Highlights
- ▸Brand Identity: Café Sol Identity
- ▸Social: Studio Nori Social Kit
- ▸Editorial: Linea Editorial System
- ▸Interactive App: Axolotl App
- ▸Interactive App: Keebys (keyboard marketplace)
- ▸Guidelines: RSPB Style Guide
- ▸Print: Bauhaus Magazine
- ▸Branding: Home Builders
- ▸Print: Menu Design
- ▸Media: Film Photography + Video Editing
Design Philosophy
Typography-led presentation where motion communicates hierarchy; quiet grids that let the work speak; accessibility without sacrificing craft.
Design
Focused on clarity and speed: typography choices to improve scan-ability, high-contrast UI for readability, and a layout that highlights primary actions and content without distraction.
Development
Built with React 18, Vite, Framer Motion, GSAP. Emphasis on modular components, predictable state handling, and accessible interactions. Performance budgets guided media usage and bundle size.
Target Audience
Prospective clients and employers, fellow designers, and academic reviewers.
Deployment
Main portfolio built with Vite and deployed to a global edge platform. Immersive experiences shipped as a standalone build with GPU-accelerated animations and image preloading.
Advanced Techniques
- ▸Breathing text and variable font interactions
- ▸Scroll-triggered reveals (motion choreography)
- ▸Click spark micro-interactions
- ▸Seamless infinite carousel (physics-based)
- ▸OS-aware responsive positioning
- ▸Modal presentations and gallery lightbox
- ▸Image preloading and GPU-accelerated motion
Challenges
Balancing rich animations with Core Web Vitals, implementing custom scroll pagination, and OS-aware responsive positioning while keeping content accessible.
Outcomes
Silky motion with strong Lighthouse scores, engaging case studies, and a professional presentation with resume download support.