Portfolio website template built on Next.js
Headless CMS powered by Sanity.io

Features • Overview • Set Up • Local configuration

A clean and easy-to-use portfolio website that helps visual creators showcase their work. Built with customisation in mind: set custom colors for your website, upload a custom logo, create projects with a modular content builder, and select and order the projects displayed on your Home page. This template is a statically generated portfolio website that uses Next.js for the frontend and Sanity to handle its content.

Deploy this template with Vercel and start building your portfolio website right away:

Features

A performant, static portfolio website with editable Home page, Projects and optional About page
A clean and user-friendly content management environment by Sanity, accessible on yourwebsite.com/studio
Webhook-triggered Incremental Static Revalidation; no need to wait for a rebuild to publish new content
Side-by-side instant content preview that works across your whole site
CSS powered by Tailwind CSS
Animation powered by Framer Motion
Automatic sitemap.xml and robots.txt generation
Built-in customisation features:
- Set your background and text colors for the entire website
- Upload your favicon and OG-image
- Select and order projects displayed on the Home page
- Modular page content builder for the Project page
- Dynamic external links display in the Navbar
- Upload a custom logo to replace the website title in the Navbar

Overview

Portfolio Website	Sanity Studio

⚡ Automatic Set Up

Quickly deploy as a Sanity Starter on Vercel a clean version of a portfolio wesite! All you have to do is start filling it with your content

⚡ 14-Minute Setup Walkthrough
From deploy to launch, watch me building up a fresh portfolio website in under 14 minutes!

Local configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your portfolio website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Important files and folders

File(s)	Description
`sanity.config.ts`	Config file for Sanity Studio
`sanity.cli.ts`	Config file for Sanity CLI
`/app/studio/[[...tool]]/Studio.tsx`	Where Sanity Studio is mounted
`/app/api/revalidate/route.ts`	Serverless route for triggering ISR
`/app/api/draft/route.ts`	Serverless route for triggering Draft mode
`/sanity/schemas`	Where Sanity Studio gets its content types from
`/sanity/plugins`	Where the advanced Sanity Studio customization is setup
`/sanity/loader/loadQuery.ts`,`/sanity/loader/useQuery.ts`	Configuration for the Sanity Content Lake client

Shoutouts

Base structure and Sanity fetching logic is based on template-nextjs-personal-website. This is a great starter template by Sanity which is highly influenced this template.

grantoesterling/portfolio-boilerplate