Collected

Collected is a portfolio website template built on Next.js with a headless CMS powered by Sanity.io, designed to help visual creators showcase their work as a statically generated site.

What is Collected?

Collected is a portfolio website template that pairs a Next.js frontend with Sanity.io as its content backend. It takes project content and site settings entered through Sanity Studio (accessible at yourwebsite.com/studio) and produces a statically generated portfolio site with an editable Home page, Projects, and an optional About page. It is designed and developed by Danil Vladimirov, based on Sanity's template-nextjs-personal-website starter, and deploys to Vercel through a one-click Deploy Button that connects to your Sanity Content Lake via the Sanity Vercel Integration.

Key Features

• Next.js frontend — statically generated portfolio site built on Next.js.
• Sanity.io Studio — a user-friendly content management environment mounted at yourwebsite.com/studio.
• Incremental Static Revalidation — webhook-triggered, so new content publishes without waiting for a full rebuild.
• Side-by-side instant preview — draft-mode content preview works across the whole site.
• Tailwind CSS styling — CSS powered by Tailwind CSS, with animations from Framer Motion.
• Custom colors and logo — set background and text colors for the entire site and upload a custom logo to replace the Navbar title.
• Modular content builder — build Project pages from modular content blocks, and select and order which projects appear on the Home page.
• Assets and SEO — upload a favicon and OG-image, with automatic sitemap.xml and robots.txt generation and dynamic external links in the Navbar.

Who is it for?

• Visual creators and photographers: publish a project-based portfolio by adding projects through Sanity Studio and reordering the ones shown on the Home page.
• Developers who want a content-editable site: clone the repo, run npx vercel link and npx vercel env pull, then npm install && npm run dev to work locally with hot reloading.
• Users who prefer no-code setup: deploy via the Vercel Deploy Button and start filling the site with content, following the 14-minute setup walkthrough video.

Use cases

• Portfolio owners: customize site-wide colors, upload a logo and favicon, and manage projects without touching code.
• Developers: extend the template using the documented file structure, including sanity.config.ts, /sanity/schemas, and the /app/api/revalidate and /app/api/draft serverless routes.

How does it work?

You deploy the template to Vercel (which connects it to Sanity), clone the generated repository, then run npx vercel link and npx vercel env pull to fetch environment variables. After running npm install && npm run dev, the site runs at localhost:3000 and the Studio at localhost:3000/studio; changes are applied live via hot reloading.

Pricing

The template is open source under the MIT license.