Next.js portfolio project tutorial with Framer Motion and Tailwind CSS.
Get Hostinger Discount: https://hostinger.com/lamadev Coupon Code: LAMADEV

Join React/Next.js Master Course Waitlist: https://list.lama.dev

Fill the form out and let me know your course expectations: https://docs.google.com/forms/d/e/1FA...

Source Code:
https://github.com/safak/next-animate...
(Includes starter and completed branches)

Join Lama Dev groups
X: https://x.com/lamawebdev
Instagram:   / lamawebdev  
Discord:   / discord  
Facebook:   / lamadev  

00:00 Introduction
03:35 Installation
06:35 Responsive Navbar Design with Next.js & Tailwind CSS
17:17 Hamburger Menu Design with Next.js & Tailwind CSS
28:35 Next.js How to Give Active Link Style for a Navbar Link?
31:51 Hero Section Design with Next.js & Tailwind CSS
38:43 Next.js Framer Motion Tutorial
46:10 Framer Motion Hamburger Menu Animation
52:52 Framer Motion Stagger Children Tutorial
55:14 Next.js Framer Motion Page Transition Tutorial
01:11:52 Portfolio Website About Page Design
01:18:15 Portfolio Website Skills Section Design
01:20:45 Timeline Design with Tailwind CSS
01:32:44 Framer Motion SVG Animation Tutorial
01:34:19 Framer Motion Scroll Animation Tutorial (useScroll & useTransform hooks)
01:41:06 Framer Motion useInView Hook Tutorial
01:47:24 Portfolio Page Design with Next.js & Tailwind CSS
01:48:12 Framer Motion Horizontal Scroll Animation Tutorial
01:59:44 Circle Text Rotation Animation Tutorial
02:04:47 Portfolio Single Item Design
02:08:44 Portfolio Website Contact Page Design
02:10:32 Framer Motion Text Typing Animation
02:13:09 Next.js Contact Form Design
02:17:57 Portfolio Website How to Send a Mail Using a Contact Form?
02:25:44 How to Deploy a Next.js App to a Hosting?
02:30:40 Outro