Next.js 16 Portfolio Template for Developers and Studios — Folio
Four themes, four type pairs, four languages and a case‑study lightbox — already wired. You edit one config file and deploy.
30-day money back guarantee. Email me and you get a full refund — no questions, no forms.
Open the live demo ↗Set the specimen.
Every theme and type pair below ships in the download. Switch one and this page follows — it is running the template’s own tokens, not a preview of them.
Read live from the page you are looking at. In the download these sit in src/styles/themes.css — copy a block, change the values, and you have a fifth theme.
What you are buying.
Screens from the running template. Select any plate to open it full size — the same lightbox the case‑study pages use, keyboard controls and all.
The whole specification.
No upsell tier, no locked features. This is everything in the ZIP.
| Framework | Next.js 16 · App Router · React 19 |
|---|---|
| Language | TypeScript, strict mode |
| Styling | Tailwind v4 over CSS custom properties — the token blocks shown above |
| Requirements | Node.js 20+ · npm, pnpm or bun |
| Tests | 30 Vitest specs, passing — run npm test
|
| Pages | Single-scroll home with optional letter or image backdrop, projects grid, case-study detail pages, about, contact |
|---|---|
| Lightbox | Case-study images with keyboard navigation and focus handling |
| Themes | Deep Violet, Light Minimal, Warm Neutral, Bold Type — swappable at runtime |
| Type pairs | Fraunces × Inter Tight, Instrument Serif × Geist, Newsreader × IBM Plex Sans, DM Serif × DM Sans |
| Languages | English, Spanish, French, Portuguese — UI strings and project content |
| Right-to-left | Logical CSS properties, mirrored icons and direction-aware animation throughout. Set dir on a locale and the layout flips. |
| Contact form | React Hook Form with Sonner toasts. Resend, Formspree and Web3Forms adapters sit commented in src/lib. |
| CMS | None required — content lives in src/config/site.ts. Sanity, Strapi and Contentful adapters are drop-in and signature-compatible. |
| Accessibility | WCAG 2.1 AA, visible focus, skip link, prefers-reduced-motion respected |
| SEO | JSON-LD, generated Open Graph images, sitemap, robots |
| Docs | README, CUSTOMIZATION, DEPLOY, PRODUCTION, plus one guide per adapter |
| Licence | Single use — one purchase, one deployed project. Multi-use available, just ask. |
| Support | dev@violettadev.com |
One file holds the wheel.
Your name, your projects, your nav, your contact details — all of it in src/config/site.ts. The rest of the codebase reads from there, so a rename never turns into a search-and-replace.
folio-template/ ├- src/ │ ├- config/site.ts your name, projects, nav, contact │ ├- styles/themes.css the four theme blocks above │ ├- app/[locale]/ home · projects · about · contact │ ├- components/ layout, ui, preview panel │ ├- lib/content.sanity.ts ·.strapi ·.contentful — commented │ ├- lib/contact.resend.ts ·.formspree ·.web3forms — commented │ └- i18n/ routing and request config ├- messages/ en · es · fr · pt ├- tests/ 30 Vitest specs ├- public/ demo imagery, swap for yours └- README · CUSTOMIZATION · DEPLOY · PRODUCTION · LICENCE
Before you buy.
What lands in my downloads?
A ZIP with the complete source. Unzip, run npm install, then npm run dev and the site is at localhost:3001. Nothing is minified, obfuscated or held back.
Can I build a client site with it?
Yes — the licence covers one deployed project per purchase, so a client site counts. Building several? Email dev@violettadev.com and I’ll sort out multi-use.
Do I have to run a CMS?
No. Content lives in a typed config file, which is the whole point — edit, commit, deploy. If you outgrow that, the Sanity, Strapi and Contentful adapters share the same function signatures, so swapping one in is an import change rather than a rewrite.
How much do I need to know about Next.js?
Enough to run npm install. Changing your name, projects and colours takes no framework knowledge — CUSTOMIZATION.md walks through it. Restructuring pages is where App Router familiarity starts to help.
Are the four languages real, or machine output?
Real. English, Spanish, French and Portuguese are translated in messages/, project content included, and a unit test fails if a key exists in one locale but not the others.
Something breaks. Then what?
Email dev@violettadev.com. I wrote every line of it and I answer my own support.
Who makes this?
Violetta Studio — a one-person shop building production Next.js templates. See the rest of the catalogue and what else I do at violettadev.com ↗.
Stop rebuilding your portfolio.
The version you keep meaning to finish, finished — and yours to take apart.
Buy Next.js 16 Portfolio Template for Developers and Studios — Folio — $4930-day money back guarantee. Email me and you get a full refund — no questions, no forms.