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

Post Content

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