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

By freeCodeCamp.org
Published: Oct 03, 2024

“
Learn to code a mobile responsive personal portfolio website using Next.js, Three.js & Tailwind CSS.

Course developed by @CodeBucks

???? Demo Link: https://next-js-creative-portfolio-website.vercel.app/
???? Starter Code: https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files
???? Final Code: https://github.com/codebucks27/Next.js-Creative-Portfolio-Website

?? Contents ??
?? (0:00:00) Intro + Demo
?? (0:06:02) Setup and Installation
?? (0:08:11) Layout.js file and Tailwind config
?? (0:11:53) Home page
?? (0:13:21) Generate Images using Playground AI
?? (0:16:56) 3D model configuration and Rendering
?? (0:37:13) Navigation buttons
?? (1:07:53) Creating background firefly effect
?? (1:20:07) Projects page
?? (1:32:46) Subpages layout
?? (1:40:08) About page
?? (1:55:48) Github stats & Skill icons
?? (2:10:48) Contact page
?? (2:20:06) Using Emailjs
?? (2:35:27) Show toast messages
?? (2:41:23) Mobile responsive
?? (3:10:16) Adding animations using framer-motion
?? (3:23:57) Adding music
?? (3:49:21) Optimizing Images and performance

???? Thanks to our Champion and Sponsor supporters:
???? Drake Milly
???? Ulises Moralez
???? Goddard Tan
???? David MG
???? Matthew Springman
???? Claudio
???? Oscar R.
???? jedi-or-sith
???? Nattira Maneerat
???? Justin Hual

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”