This is a free, open-source Next.js 13 portfolio website template that functions as both a deployable personal site and a teaching tool for modern React patterns, built from the ByteGrad tutorial "Build & Deploy a modern React / Next.js portfolio website from scratch!"
What is the Next.js Portfolio Website?
The template is a complete personal portfolio website built on the Next.js 13 App Router, written in TypeScript with Tailwind CSS for styling and Framer Motion for animations. It takes your project information, bio, and contact details as input and produces a responsive, modern portfolio with light and dark modes. Email sending is handled through the Resend API via a server action, so visitors can contact you directly from the site.
Key Features
- Next.js App Router — Uses the latest Next.js 13 file-based routing system with nested layouts, server components, and server actions.
- Server Actions — The contact form uses Next.js Server Actions to send emails through Resend without a separate API route.
- TypeScript — Full type safety with a beginner-to-intermediate usage level, making the code readable for developers still learning TypeScript.
- Tailwind CSS — Utility-first styling for a fresh, modern UI with responsive layout across mobile and desktop.
- Framer Motion animations — Advanced animations are implemented for smooth page transitions and component entrances.
- React.Email & Resend — Email templates are built with React.Email and delivered via the Resend API, triggered by the contact form.
- Context API — Global state management handles the site's context, including theme switching.
- Light & Dark mode — A toggle lets visitors switch between the two themes, persisted through context.
- Custom React hooks — The project includes custom hooks for reusable logic such as theme detection and form handling.
Who is it for?
- Web developers learning Next.js — The companion tutorial walks through every feature, making it a project-based learning resource.
- Freelance developers and designers — They can replace the placeholder content with their own projects and deploy a professional portfolio quickly.
- Job-seeking front-end developers — A deployed portfolio built with current frameworks demonstrates practical experience with App Router and Server Actions.
What can you do with it?
- Deploy a personal portfolio — Populate the template with your skills, projects, and contact info, then deploy to Vercel or any Next.js-compatible host.
- Learn modern Next.js patterns — Study how Server Actions, Client vs. Server Components, and App Router layouts work together in a real project.
- Customize the email contact form — Add your own Resend API key, change the recipient email, and the form becomes fully functional for receiving messages.
How does it work?
The repository is set up as a standard Next.js project. To get it running locally, install dependencies, add a RESEND_API_KEY environment variable in .env.local, and edit the send-email.ts action file to change the "to" email address. A tutorial video is linked at the top of the README, walking through the build and deployment steps.
FAQ
Is this template free?
Yes, the template is open source and free to use. The README links to paid courses for JavaScript and CSS fundamentals, but the portfolio code itself is publicly available.
You need a Resend API key. Create an account, generate the key, store it as RESEND_API_KEY in .env.local, and update the recipient email in the send-email.ts action file.
Does it include dark mode?
Yes, the template includes both light and dark mode with a toggle. It uses the Context API to manage the theme state.
What version of Next.js does it use?
It uses Next.js 13, specifically the App Router introduced in that version, along with Server Actions and Client/Server Components.
