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

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on October 3, 2024 5:04:57 PM ● Video Link: https://www.youtube.com/watch?v=aZZrEE_UsIk

Duration: 0:00

96,496 views

2,016

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 https://www.freecodecamp.org/eveloper job: https://www.freecodecamp.org

https://freecodecamp.org/newsprogramming: https://freecodecamp.org/news