Animated Portfolio Website With Next.js, Tailwind CSS & Framer Motion🚀

🚀 In this video, I’ll show you how to build a modern Portfolio Website using Next.js , Tailwind CSS, Framer Motion and Shadcn UI.
This Next.js portfolio tutorial is perfect for developers who want to create a responsive and professional portfolio website with clean design and modern UI components.

🔹 What you’ll learn:
How to build a portfolio website using Next.js and Tailwind CSS
Adding Shadcn UI components for a modern design
Step-by-step guide to create your own Next.js portfolio website

✨ By the end of this tutorial, you’ll have a fully functional portfolio built with Next.js, Tailwind CSS, and Shadcn UI.

👍 If you find this video helpful, please like, subscribe, and hit the notification bell to stay updated with more awesome content!

💬 Have questions or need further clarification? Drop a comment below and I'll be happy to help or use socials to connect.

Github Repo:- https://github.com/thesohailjafri/shadcn-framer-motion-portfolio

Resources:
https://motion.dev/docs
https://nextjs.org/docs
https://ui.shadcn.com/docs
https://tailwindcss.com/

🥂 Socials:
Twitter: https://x.com/thesohailjafri
LinkedIn: https://www.linkedin.com/in/thesohailjafri/
Github: https://github.com/thesohailjafri
Instagram: https://www.instagram.com/thesohailjafri/

⏱ Timestamps
00:00 – Intro
00:52 – Project Setup
08:16 – Adding Data & Type Declaration
12:14 – Env Setup
14:10 – Theme Provider
15:40 – Action Section Context
21:12 – Navbar
51:46 – Project Components Creation
54:55 – Hero Section
01:06:59 – About Me
01:16:34 – Experience
01:28:15 – Section Divider
01:30:32 – Projects
01:35:32 – Contact
01:42:00 – Footer
01:53:47 – Follow Section
01:59:54 – Outro

#️⃣ Tags:
#SohailJafri

Видео Animated Portfolio Website With Next.js, Tailwind CSS & Framer Motion🚀 канала Build With Sohail