Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

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.

Syllabus

⌨️ 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

Taught by

freeCodeCamp.org

Reviews

Start your review of Front End Portfolio Website Tutorial - Next.js, Three.js, Tailwind CSS

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.