Front End Portfolio Website Tutorial - Next.js, Three.js, Tailwind CSS

Develop a mobile-responsive personal portfolio website using Next.js, Three.js, and Tailwind CSS in this comprehensive 3-hour and 53-minute tutorial. Begin with setup and installation, then progress through creating a layout, configuring Tailwind, and building key pages including home, projects, about, and contact. Learn to generate images using Playground AI, configure and render 3D models, create navigation buttons, and add a background firefly effect. Implement GitHub stats, skill icons, and integrate Emailjs for contact functionality. Make the site mobile-responsive, add animations with Framer Motion, incorporate music, and optimize images and performance. Access the provided demo link and starter code to follow along, with the final code available on GitHub for reference.

⌨️ Intro + Demo
⌨️ Setup and Installation
⌨️ Layout.js file and Tailwind config
⌨️ Home page
⌨️ Generate Images using Playground AI
⌨️ 3D model configuration and Rendering
⌨️ Navigation buttons
⌨️ Creating background firefly effect
⌨️ Projects page
⌨️ Subpages layout
⌨️ About page
⌨️ Github stats & Skill icons
⌨️ Contact page
⌨️ Using Emailjs
⌨️ Show toast messages
⌨️ Mobile responsive
⌨️ Adding animations using framer-motion
⌨️ Adding music
⌨️ Optimizing Images and performance