# Build an Amazing Personal Portfolio Website with Next.js, Three.js & Tailwind CSS

> Learn to build a responsive personal portfolio with Next.js, Three.js & Tailwind CSS! Add 3D visuals, smooth animations, and interactive features step-by-step.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/3d-portfolio-using-nextjs-threejs-tailwindcss
- **Author:** CodeBucks
- **Published:** 2024-03-07
- **Last updated:** 2025-01-27
- **Topics:** Tailwind CSS, Animation, Next.js, ThreeJs

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=T5t46vuW8fo)**

### Overview

In this comprehensive tutorial, you'll learn how to build a visually stunning and interactive personal portfolio website using **Next.js**, **Three.js**, and **Tailwind CSS**. From incorporating 3D models and animations to optimizing for mobile responsiveness, this guide will take you through the entire process step-by-step. Whether you're a beginner or an experienced developer, this project is designed to help you create a standout portfolio.

**Demo Link**: [Check it out here!](https://next-js-creative-portfolio-website.vercel.app/)  
**Support**: [Buy me a coffee](https://codebucks.gumroad.com/coffee)

### What You'll Learn

- Integrate and animate 3D models in a Next.js project for immersive user experiences.
- Use **AI-generated images** from Playground AI to elevate your design aesthetics.
- Convert 3D models to JSX components with **Gltf JSX**.
- Display dynamic **GitHub stats** using GitHub ReadMe Stats and Streak Stats.
- Add custom fonts and sleek icons with Google Fonts and Lucide Icons.
- Implement smooth animations using **Framer Motion**.
- Create interactive forms using **react-hook-form** and manage emails with **Emailjs**.
- Enable notifications with **Sonner** and build interactive sound features.

### Key Features of This Portfolio Website

- **3D Models**: Add dynamic 3D components using Three.js and react-three-fiber.
- **AI Integration**: Enhance visuals with Playground AI-generated images.
- **Interactive Animations**: Bring the site to life using Framer Motion.
- **Responsive Design**: Fully optimized for all devices with Tailwind CSS.
- **Interactive Forms**: Capture user inputs with react-hook-form and Emailjs.
- **Dynamic Stats**: Showcase GitHub activity with ReadMe Stats and Streak Stats.
- **Audio Integration**: Play music seamlessly with user interactions.

### Libraries Used

This project leverages several powerful libraries and tools:

- **Next.js**: Framework for server-rendered React applications.
- **Three.js**: A powerful 3D rendering library.
- **react-three-fiber** & **react-three-drei**: React bindings for Three.js.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Framer Motion**: For animations and transitions.
- **Emailjs**: To send emails directly from your app.
- **Sonner**: For user-friendly notifications.
- **react-hook-form**: For managing forms efficiently.

### Code Links

- **Starter Code**: [View on GitHub](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files)
- **Final Code**: [View on GitHub](https://github.com/codebucks27/Next.js-Creative-Portfolio-Website)

Don't forget to ⭐ the repos if you find them helpful!

### Resources

#### 3D Models

- ["Tim Mckee - Boy Wizard"](https://skfb.ly/6YATu) by [elbertwithane](http://creativecommons.org/licenses/by/4.0/)
- ["Stylized wizard hat"](https://skfb.ly/ozxOQ) by [Enkarra](http://creativecommons.org/licenses/by/4.0/)
- ["Wizard Staff"](https://skfb.ly/6QYZw) by [Toymancer Studio](http://creativecommons.org/licenses/by/4.0/)

#### AI Images

- Created using [Playground AI](https://playgroundai.com/).

#### Development Resources

- Fonts: [Google Fonts](https://fonts.google.com/)
- Icons: [Lucide Icons](https://lucide.dev/)
- Notifications: [Sonner](https://sonner.emilkowal.ski/)
- Animations: [Framer Motion](https://www.framer.com/motion/)
- Forms: [react-hook-form](https://react-hook-form.com/)
- Email Integration: [Emailjs](https://www.emailjs.com/)

### Timestamps

- Intro + Demo [@00:00:00](https://www.youtube.com/watch?v=T5t46vuW8fo&t=0s)
- About SquareX extension [@00:05:46](https://www.youtube.com/watch?v=T5t46vuW8fo&t=346s)
- Setup and Installation [@00:11:11](https://www.youtube.com/watch?v=T5t46vuW8fo&t=671s)
- Layout.js file and Tailwind config [@00:13:20](https://www.youtube.com/watch?v=T5t46vuW8fo&t=800s)
- Home page [@00:17:02](https://www.youtube.com/watch?v=T5t46vuW8fo&t=1022s)
- Generate Images using Playground AI [@00:18:30](https://www.youtube.com/watch?v=T5t46vuW8fo&t=1110s)
- 3D model configuration and Rendering [@00:22:05](https://www.youtube.com/watch?v=T5t46vuW8fo&t=1325s)
- Navigation buttons [@00:42:22](https://www.youtube.com/watch?v=T5t46vuW8fo&t=2542s)
- Creating background firefly effect [@01:13:02](https://www.youtube.com/watch?v=T5t46vuW8fo&t=4382s)
- Projects page [@01:25:16](https://www.youtube.com/watch?v=T5t46vuW8fo&t=5116s)
- Subpages layout [@01:37:55](https://www.youtube.com/watch?v=T5t46vuW8fo&t=5875s)
- About page [@01:45:17](https://www.youtube.com/watch?v=T5t46vuW8fo&t=6317s)
- Github stats & Skill icons [@02:00:57](https://www.youtube.com/watch?v=T5t46vuW8fo&t=7257s)
- Contact page [@02:15:57](https://www.youtube.com/watch?v=T5t46vuW8fo&t=8157s)
- Using Emailjs [@02:25:15](https://www.youtube.com/watch?v=T5t46vuW8fo&t=8715s)
- Show toast messages [@02:40:36](https://www.youtube.com/watch?v=T5t46vuW8fo&t=9636s)
- Mobile responsive [@02:46:32](https://www.youtube.com/watch?v=T5t46vuW8fo&t=9992s)
- Adding animations using framer-motion [@03:15:25](https://www.youtube.com/watch?v=T5t46vuW8fo&t=11725s)
- Adding music [@03:29:06](https://www.youtube.com/watch?v=T5t46vuW8fo&t=12546s)
- Optimizing Images and performance [@03:54:30](https://www.youtube.com/watch?v=T5t46vuW8fo&t=14070s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._