NextJs Portfolio Tutorial - Build a Responsive Portfolio Website w/ Advanced Animations (2023)

In this tutorial, we will build a responsive and customizable portfolio website using NextJs and Tailwind.

disclaimer: I am affiliated, but not sponsored. This means I might make money when you purchase paid services through the links provided and I might be able to offer discounts when available.

00:00 - Demo
01:56 - Project Setup
03:15 - Hero Section (1.1-header-section)
24:10 - Header (1.2-navbar)
42:45 - About Me Section (1.3-about-me)
58:14 - Projects (1.4-projects-section)
01:20:03 - Email Section(1.5-email-section)
01:58:47 - Animations(1.7-animations)
02:18:16 - Deployment

[webdecoded]

Check out my favorite VSCode extensions in this video:

[zubaid]

I went from not having a clue about website creation to creating and personalising an entire portfolio site in the matter of days. Really appreciate this !!

[ManishRaj-xiwh]

00:02 Build a responsive portfolio using NextJs & Tailwind with advanced animations in 2023
02:33 Setting up and starting the application
07:26 Using containers for responsive layout design
09:58 Adding and styling images in NextJs for a responsive design.
15:16 Styling and arranging buttons and containers
17:52 Implementing responsive design and advanced styling using Tailwind CSS
22:44 Implementing animated typing effect in hero section
25:07 Setting up the logo and navigation menu
29:52 Creating navigation links and styling the menu items.
32:39 Styling the navigation bar and menu items
37:25 Styling the button with hover effects and interactivity
39:47 Integrating logic and components from nav bar
44:56 Adding images and content to the portfolio section
47:20 Creating tabs and adding functionality
52:25 Implementing tab functionality for different sections
54:50 Implementing tab functionality to display different content based on selection.
59:35 Creating image background and divs for project display
1:02:08 Updating project card styling
1:06:57 Centering and styling links and icons
1:09:25 Setting the URLs for links and fixing errors
1:14:31 Setting dynamic styles and handling states in project section
1:17:22 Implement handle tag change function
1:22:02 Setting up email configuration in the project
1:24:23 Creating a section with two columns for information and social links.
1:29:30 Adding styling to the email section form.
1:32:12 Adding and styling form inputs
1:37:42 Creating a circular and blurred effect
1:40:03 Styling the footer with proper elements and layout
1:44:51 Creating function to handle form submission and API request
1:47:06 Setting up form submission functionality
1:51:48 Updating layout and styling for achievement section and hero section.
1:54:35 Customizing main colors in project theme for easy customization
1:59:40 Customizing modules for responsive animations
2:02:37 Configure advanced animations using configurations and framer motions
2:08:21 Use useInView hook to trigger animations when components are visually visible
2:11:13 Implementing animations for project appearance
2:18:07 Deployment using Vercel for hosting portfolio

[Chamorizard]

This video helped me build my own portfolio while at the same time learning about routing in Next.js. Thank you so much

[DeskoTEK]

Im not going to be a full stack dev or a front end but i wanted to have a nice portfolio to introduce myself and to keep track of my improvements, this is the best tutorial i ve seen so far, and i ve been trying and discarding many tutorials in the past few months, glad i found this. thank you very much!!

[renealbrechtsen]

Holy shit, i never knew vs code had its own browser. Thats going to make everything so much easier o.o

[fabr]

Judy you're great! I've been looking for a video like this, so clear and clarifying, thanks!

[ariadnamaldonado]

I got confused when you checked the folder and there was an src folder cause you said "say no to src" but checking the video, you actually selected yes. Just wanted to leave a comment in case anyone got confused at the beggining with that.

[fredericklee]

Awesome tutorial!! Have been waiting for this one 🎉

[ManishRaj-xiwh]

Ma'am, your channel is very underrated 😔. I haven't seen anyone on YouTube explain content step-by-step as well as you do 👀. I found your channel by searching in incognito mode, and now I'm commenting from my ID 💬. You explain and teach full stack projects very well. Thanks, ma'am! 🙏 by way i'm from india ❤❤

[TheMax]

Great video! It sure helped me a lot to build my portfolio!! Just found your channel, and I think I will learn a lot from you!

[mimcris]

Definitely a very simple and well-designed portfolio, ill try out!

[ecodersofficial]

This is great but I would appreceiate if you teach to fix the navbar footer etc, but for me I'll do it myself. And, a combination of poppins and inter in a project isn't bad it looks great! (Like rounded image in about me, fix navbar links, and how should we add a text for logo instead of image because who does..) thanks!

[PatrickMwangiQA]

Hi Judy, thanks this is amazing, You have helped Me
to put Next .js theory into practical shape

[uferegoodnews]

Great Tutorial! You are a genius, Judy! Thank you

[_Who_u_are]

You are soo GOOD. Please create tutorial on Node.js, React.js

[aayushsingh]

Nice Tutorial and Work, Thank you very much and keep posting these type of tutorial it will help us a lot

[damarisAlum]

@webdecoded thanks for this tutorial, it is very helpful, i am trying to get the functional parts working, can you share in more details how does the email work? and how i would get the download to work? please

[info.kannada]

You are awesome I want more video from basics to advance till deploying to server live

[ZAMZITA]

Muchas gracias! Aprendi muchisimo con este video! saludosd!!