nextjs-portfolio-developer — Next.js 作品集模板

SHA-256: e21d4c59ebc87ab27b7f9b47d04091264e16fbdfc384958b66a73dd3c510d79b

2026-10-14T18:09:21.127Z

# Next.js Developer Portfolio Template

A modern, fast and fully customizable **portfolio template** for developers, built with **Next.js 14 (App Router)**, **Tailwind CSS**, **shadcn/ui**, **Framer Motion**, **GSAP** and more.

Designed to showcase your projects, skills, experience and personality with a clean, responsive design and smooth animations.

Perfect for **frontend developers**, **full-stack developers**, **creative developers** or anyone who wants a fast, beautiful portfolio.

<p align="center">
  <a href="https://fabrizioferrentino.vercel.app/">
    <img src="https://img.shields.io/badge/Demo-Live%20Preview-blue?style=for-the-badge&logo=vercel" alt="Live Demo" />
  </a>
  &nbsp;&nbsp;
  <a href="https://github.com/fabrizio-ferrentino/nextjs-portfolio-developer/issues">
    <img src="https://img.shields.io/badge/Report%20Bug-red?style=for-the-badge&logo=github" alt="Report Bug" />
  </a>
  &nbsp;&nbsp;
  <a href="https://github.com/fabrizio-ferrentino/nextjs-portfolio-developer/issues">
    <img src="https://img.shields.io/badge/Request%20Feature-brightgreen?style=for-the-badge&logo=github" alt="Request Feature" />
  </a>
</p>

<p align="center">
  <img src="https://github.com/user-attachments/assets/f700debf-4bb4-4fd0-a056-9c268fd586ee" alt="Portfolio Demo" width="800" />
</p>

## ✨ Key Features

- ⚡️ **Next.js 14** App Router + Server Components
- 🎨 **Tailwind CSS 3** + **shadcn/ui** components
- 🌗 Dark / Light mode with `next-themes`
- 🔥 Smooth animations with **Framer Motion** and **GSAP**
- 📧 Contact form with validation (**React Hook Form** + **Zod**) and email sending via **Resend**
- 🌍 Ready for multilingual support with **i18next**
- 🎨 Modern, clean design with micro-interactions and transitions

## Technologies Used

| Category                  | Main Technologies                                      |
|---------------------------|--------------------------------------------------------|
| Framework                 | Next.js 14 (App Router)                                |
| Styling                   | Tailwind CSS, shadcn/ui, class-variance-authority      |
| UI Components             | Radix UI primitives, Lucide React icons                |
| Animations                | Framer Motion, GSAP, Embla Carousel                    |
| Forms & Validation        | React Hook Form, Zod                                   |
| Email Sending             | Resend                                                 |
| Internationalization      | i18next                                                |

## 🚀 Run Locally

```bash
# 1. Clone the repository
git clone https://github.com/fabrizio-ferrentino/nextjs-portfolio-developer.git

# 2. Go to the project directory
cd nextjs-portfolio-developer

# 3. Install dependencies (recommended: yarn)
npm install

# 4. Create environment file
cp .env.example .env

# 5. Start the development server
npm run dev
```
Open http://localhost:3000 in your browser.

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file
`RESEND_API_KEY`

## 💖 Support
If you like this template and use it for your portfolio, please give it a star! ⭐
It really helps other developers discover it.

<img src="https://img.shields.io/github/stars/fabrizio-ferrentino/nextjs-portfolio-developer?style=social" alt="GitHub stars">