In this tutorial we will learn how to build a Next.js animated portfolio website with CSS Framer Motion & Tailwind | Next.js beginner project
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
Source Code:
https://github.com/safak/next-animated-portfolio
(Includes starter and completed branches)
Subscribe: https://www.youtube.com/@LamaDev/featured
