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

Start learning Write review
Babbel Ad

Start speaking a new language. It’s just 3 weeks away.

Learn More → Boot.dev Ad

Learn Backend Development Part-Time, Online

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course guides learners through building a responsive, multi-page portfolio website with Next.js, Tailwind CSS, and Three.js. It covers 3D rendering, animated effects, contact functionality, responsive layouts, and performance optimization.

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

Start learning

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.