Atelier Varga
DESCRIPTION
High-end Editorial & Digital Experience Website
DURATION
Mar 2026 - Apr 2026
MY ROLE
- Web Design & Art Direction: overall UI/UX and visual direction built on an editorial magazine premise.
- Frontend Development: Next.js build and component optimization, with GSAP and Lenis driving the scroll and hover reveals.
- Data Architecture: Supabase schema and rendering structure for the portfolio list and insights entries.
TECH
Next.js · React · TypeScript · Tailwind CSS
GSAP · ScrollTrigger · Lenis
Supabase
Vercel
Project Purpose
"Editorial digital experiences for culture and luxury brands." Atelier Varga is the portfolio of Elias Varga, a senior creative partner working with fashion houses and cultural institutions. The site is built to be read the way a fashion title is read — one issue at a time, at the pace the reader sets. Restraint does the persuading: almost no color, few moves, and every interaction weighted so the work reads as archival rather than promotional.
Scope
- · High-end Interactive Web Design & Frontend Development
- · Editorial Layout System
- · Hover Interaction Development
Key Technical Features
Editorial Scroll Experience
- · Lenis physics-based scrolling paired with GSAP ScrollTrigger gives text and imagery a weighted entrance as they reach the viewport — the page turns rather than jumps.
- · A 'PREPARING EDITORIAL ISSUE' loading sequence holds the visitor for a beat before anything arrives, framing the visit as opening a new issue.
Hover as a Second Layer
- · In the E-V Insights list, hovering a line fades in the image that belongs to it — a text-only section carries photography without ever showing a grid.
- · A magnetic cursor tightens over thumbnails and links, so pointing at something feels like a small mechanical action.
Transitions That Keep the Thread
- · Routing between projects runs on a dark ground with the next title already set into the footer navigation, so the narrative never resets between pages.
Design Points
Cinematic Blur, Monotone Ground
Motion-blurred black-and-white hero plates set the register before a word is read, and warm off-white against near-black carries it through the rest of the site.
Serif Against Sans
A classic serif and a modern sans alternate to give the page depth. In the footer, 'Atelier Varga' lands in a hard red on near-black — the one loud moment, saved for last.
Asymmetric Grid, Wide Margins
An asymmetric grid with generous negative space keeps copy and project imagery apart from one another, the way work is hung rather than laid out.
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.