Portfolio Gallery

24. 포트폴리오 갤러리 페이지 Design a portfolio/gallery page: **Page Header**: - Name/title + brief intro - Filter/category tabs **Filter System**: - Category pills: All, Web, Mobile, Branding, etc. - Active filter: filled style - Animation: items filter with fade + layout shift **Gallery Grid**: - Masonry or fixed-ratio grid - Gap: 24px - Responsive: 3 → 2 → 1 columns **Project Card**: - Image: hover reveals overlay - Overlay: semi-transparent dark + title + category - Click: opens project detail modal or page - Optional: play icon for video projects **Project Quick View** (modal): - Large image carousel - Project title + year + category - Brief description - Technologies/tools used (icon badges) - Links: Live site, GitHub, Case study **Image Lightbox**: - Full-screen image view - Navigation arrows - Counter (1 of 5) - Keyboard navigation - Pinch-zoom on mobile **Case Study Link**: - "View Full Case Study" CTA - Links to detailed project page **Animation**: - Scroll-triggered fade-in for cards - Filter transition: layout animation Tech: Next.js + Tailwind + Framer Motion + Lightbox library