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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Intro + Demo

1 of 19

1 of 19

⌨️ Intro + Demo

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro + Demo
  2. 2 ⌨️ Setup and Installation
  3. 3 ⌨️ Layout.js file and Tailwind config
  4. 4 ⌨️ Home page
  5. 5 ⌨️ Generate Images using Playground AI
  6. 6 ⌨️ 3D model configuration and Rendering
  7. 7 ⌨️ Navigation buttons
  8. 8 ⌨️ Creating background firefly effect
  9. 9 ⌨️ Projects page
  10. 10 ⌨️ Subpages layout
  11. 11 ⌨️ About page
  12. 12 ⌨️ Github stats & Skill icons
  13. 13 ⌨️ Contact page
  14. 14 ⌨️ Using Emailjs
  15. 15 ⌨️ Show toast messages
  16. 16 ⌨️ Mobile responsive
  17. 17 ⌨️ Adding animations using framer-motion
  18. 18 ⌨️ Adding music
  19. 19 ⌨️ Optimizing Images and performance

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.