How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion

9 months ago
6

Next.js portfolio project tutorial with Framer Motion and Tailwind CSS.

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

Loading comments...