Phase Switcher

A portfolio Work page built in 4 phases. Select a tab to see what each phase adds.

Phase 1 — Structure: Plain HTML only. Browser-default styles. Goal: get the semantic structure right before anything else. HTML만 먼저 만들어줘. CSS나 JS는 아직 필요 없어.
Phase 2 — Styled: CSS added. Design tokens applied. No JavaScript yet. 디자인 토큰 기준으로 스타일 추가해줘. JS는 아직 필요 없어.
Phase 3 — Interactive: JavaScript added. Cards expand on click. Filter by category works. JS 인터랙션 추가해줘. 클릭하면 카드가 펼쳐지고, 필터로 카테고리를 선택할 수 있어야 해.
Phase 4 — Polished: Animations, hover effects, filter transitions. Built on top of working functionality. 애니메이션과 polish 추가해줘. 카드 진입, 필터 전환, hover 효과.

Work

  • Dashboard Redesign

    Design · 2024

    Rebuilt the analytics dashboard for a SaaS product. Reduced time-to-insight by 40%.

  • GSAP Animation Library

    Code · 2024

    Open-source collection of scroll-driven animation patterns built with GSAP ScrollTrigger.

  • Design System

    Design · 2023

    Built a component library used by 4 product teams, covering 60+ components.

This is intentionally unstyled. Browser defaults only. The structure is semantically correct — that's the only goal of Phase 1.

Work

Design

Dashboard Redesign

2024

Rebuilt the analytics dashboard for a SaaS product. Reduced time-to-insight by 40%.

Code

GSAP Animation Library

2024

Open-source collection of scroll-driven animation patterns built with GSAP ScrollTrigger.

Design

Design System

2023

Built a component library used by 4 product teams, covering 60+ components.

Design tokens applied: colors, typography, spacing. Grid layout. Cards with border and padding. Zero JavaScript.

Work

Design

Dashboard Redesign

2024

Rebuilt the analytics dashboard for a SaaS product.

Code

GSAP Animation Library

2024

Open-source scroll-driven animation patterns.

Design

Design System

2023

Component library used by 4 product teams.

Cards expand on click. Filter buttons show/hide by category. Active states highlight. No animations yet.

Work

Design

Dashboard Redesign

2024

Rebuilt the analytics dashboard for a SaaS product. Reduced time-to-insight by 40%.

View case study →
Code

GSAP Animation Library

2024

Open-source collection of scroll-driven animation patterns built with GSAP ScrollTrigger. 400+ stars.

View on GitHub →
Design

Design System

2023

Component library used by 4 product teams, covering 60+ components.

View documentation →

Entrance animations on load. Cards lift on hover. Filter fades cards out/in. Smooth transitions throughout.