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

Published: 03 October 2024
on channel: freeCodeCamp.org
117,286
2.1k

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-we...
💻 Starter Code: https://github.com/codebucks27/Nextjs...
💻 Final Code: https://github.com/codebucks27/Next.j...

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


Watch video Front End Portfolio Website Tutorial – Next.js, Three.js, Tailwind CSS online without registration, duration hours minute second in high quality. This video was added by user freeCodeCamp.org 03 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 117,286 once and liked it 2.1 thousand people.