SBJ Archive
DESCRIPTION
Creative Direction Archive
DURATION
Dec 2025 - Jan 2026
MY ROLE
- UX/UI Design: a bold, experimental interface built around the artist's identity.
- Full-stack Development: high-performance Next.js client and the backend managing the artwork data.
- Motion Development: page transitions and interactive motion in GSAP.
- Performance: load-time work on large visual assets, plus technical SEO.
TECH
Next.js · TypeScript · Tailwind CSS
GSAP · Framer Motion · Lenis
Supabase · Vercel
Cloudflare
Project Purpose
"Where Art Meets Direction." Samuel Burgess-Johnson has art-directed for The 1975 and Wolf Alice, and the body of work is large enough that most portfolio structures would flatten it. The site was built to carry his color sense and typographic experiments rather than to catalogue them, so a visitor spends time inside the work instead of scrolling past it. • Artistic Curation: a minimal but assertive layout that never overrides the atmosphere a project already has. • Boundaryless Navigation: images and text run together without hard frames, so nothing is boxed before it is seen.
Scope
- · Brand Identity Establishment
- · Interactive Web Design
- · Full Stack Development
- · CMS Build
Key Technical Features
Immersive Multimedia Archive
- · An image pipeline and video streaming setup carry high-resolution artwork and moving assets without the page paying for it.
- · An adaptive media layout reflows the grid to the ratio and character of each piece, rather than cropping everything to one shape.
Advanced Motion Direction
- · Lenis and GSAP together produce a continuous, unhurried movement through the archive.
- · Typography responds to pointer position and scroll depth — this is where SBJ's own design language shows through rather than being described.
Scalable Content Architecture
- · A structured Supabase schema lets a newly added project settle into the layout without a manual pass.
- · Vercel Edge Functions serve the work quickly wherever the audience happens to be.
Design Points
Bold Typography
Heavy, uncompromising type does the shouting, and a neutral ground leaves each piece's own palette intact.
Visual Storytelling
Behind-the-scenes material and early sketches surface as the visitor scrolls, so the work opens up the longer someone stays with it.
Minimalist Interface
UI is reduced until there is almost nothing left to look at except the artwork.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.