Atelier
An editorial portfolio for studios and agencies.
- Instant download after purchase
- Full source code in TypeScript
- Free lifetime updates
Overview
Atelier is a refined, editorial portfolio for design studios and agencies. It leads with the work: a magazine-style case study grid, immersive project pages, a services section, a team block, and a contact flow that feels considered.
Typography and spacing do the heavy lifting, so your projects look expensive. Everything is content-driven and responsive, with smooth page transitions and image galleries built in.
Key features
Case study system
Project pages built from MDX with image galleries, metrics, and credits.
Editorial typography
A typographic scale tuned for long-form and large display headings.
Smooth transitions
Page and image transitions that feel premium without hurting performance.
Contact that converts
An accessible contact form with validation and a polished success state.
Content-driven
Projects, services, and team members live in typed data and MDX.
What is included
- Home (work grid + intro)
- Project detail (case study)
- Services
- About / team
- Journal (MDX)
- Contact
Tech stack
Setup
After downloading and unzipping, run:
pnpm install pnpm dev
The download includes app/, components/, content/, README.md, INSTALLATION.md, LICENSE.md, CHANGELOG.md, package.json. Full step-by-step instructions are in INSTALLATION.md.
Compatibility
- Next.js 15 and 16
- React 19
- Node.js 18.18+
- Tailwind CSS v4
- All modern browsers
Changelog
- Added the Journal (MDX) section
- New project gallery lightbox
- Initial release
Frequently asked questions
Create a new MDX file in content/projects and add an entry to the typed projects list. The route and grid update automatically.
Yes. Swap the next/font import in the layout and update the type scale tokens.
No, content is file-based MDX. It works well with Git-based CMS tools if you want one.