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

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!
Support: Buy me a 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
• Final Code: View on GitHub

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

Resources

3D Models

• "Tim Mckee - Boy Wizard" by elbertwithane
• "Stylized wizard hat" by Enkarra
• "Wizard Staff" by Toymancer Studio

AI Images

• Created using Playground AI.

Development Resources

• Fonts: Google Fonts
• Icons: Lucide Icons
• Notifications: Sonner
• Animations: Framer Motion
• Forms: react-hook-form
• Email Integration: Emailjs

Timestamps

• Intro + Demo @00:00:00
• About SquareX extension @00:05:46
• Setup and Installation @00:11:11
• Layout.js file and Tailwind config @00:13:20
• Home page @00:17:02
• Generate Images using Playground AI @00:18:30
• 3D model configuration and Rendering @00:22:05
• Navigation buttons @00:42:22
• Creating background firefly effect @01:13:02
• Projects page @01:25:16
• Subpages layout @01:37:55
• About page @01:45:17
• Github stats & Skill icons @02:00:57
• Contact page @02:15:57
• Using Emailjs @02:25:15
• Show toast messages @02:40:36
• Mobile responsive @02:46:32
• Adding animations using framer-motion @03:15:25
• Adding music @03:29:06
• Optimizing Images and performance @03:54:30