SBJ Archive
DESCRIPTION
Creative Direction Archive
DURATION
Dec 2025 - Jan 2026
MY ROLE
- UX/UI Design: Designed a bold and experimental web interface that visualizes the artist's identity.
- Full Stack Development: Built high-performance client based on Next.js and backend for artwork data management.
- Motion Graphic Development: Developed page transitions and interactive motion elements using GSAP.
- Performance Optimization: Optimized loading speed of large visual assets and technical SEO setup.
TECH
Next.js · TypeScript · Tailwind CSS
GSAP · Framer Motion · Lenis
Supabase · Vercel
Cloudflare
Project Purpose
"Where Art Meets Direction." We compressed the vast visual works of Samuel Burgess-Johnson, who has collaborated with world-class artists such as The 1975 and Wolf Alice, into digital space. Beyond a simple portfolio, we reproduced his unique color sense and typography experiments in a web environment, designing it so users can directly experience SBJ's artistic worldview. • Artistic Curation: Designed a minimal yet powerful layout that does not compromise the unique atmosphere of each project. • Boundaryless Navigation: Provides a flexible user experience where images and text blend seamlessly without rigid frameworks.
Scope
- · Brand Identity Establishment
- · Interactive Web Design
- · Full Stack Development
- · CMS Build
Key Technical Features
Immersive Multimedia Archive
- · Built image optimization and video streaming pipeline to render high-resolution artwork and video assets without performance degradation.
- · Implemented an adaptive media layout system with a responsive grid that flexibly changes according to the ratio and character of each work.
Advanced Motion Direction
- · Combined Lenis and GSAP to implement smooth, flowing visual movements during scrolling.
- · Emphasized SBJ's unique design style through typography motion that changes according to mouse movement or scroll position.
Scalable Content Architecture
- · Designed a dynamic database structure using Supabase Structured Data that automatically optimizes layout whenever new projects are added.
- · Applied Vercel Edge Functions to enable fans worldwide to quickly view works from anywhere.
Design Points
Bold Typography
Utilized bold and daring fonts to create visual impact, and adopted an achromatic background to highlight the individuality of each work.
Visual Storytelling
Induced deep appreciation through direction where behind-the-scenes stories or initial sketches of works gradually reveal as users scroll.
Minimalist Interface
Minimized all UI elements to create an environment where users can focus solely on the visual artwork itself.