Next.js Animated Portfolio Website with Framer Motion and Tailwind CSS - Beginner Project

Overview

Create a stunning animated portfolio website using Next.js, Framer Motion, and Tailwind CSS in this comprehensive tutorial. Learn to build a responsive navbar, implement a hamburger menu, design hero and about sections, and create engaging animations. Master Framer Motion techniques for page transitions, SVG animations, scroll effects, and text typing. Develop skills in crafting a portfolio page with horizontal scrolling, designing a contact form, and implementing email functionality. Conclude with deployment instructions for your Next.js app, equipping you with the knowledge to showcase your work professionally online.

Syllabus

Introduction
Installation
Responsive Navbar Design with Next.js & Tailwind CSS
Hamburger Menu Design with Next.js & Tailwind CSS
Next.js How to Give Active Link Style for a Navbar Link?
Hero Section Design with Next.js & Tailwind CSS
Next.js Framer Motion Tutorial
Framer Motion Hamburger Menu Animation
Framer Motion Stagger Children Tutorial
Next.js Framer Motion Page Transition Tutorial
Portfolio Website About Page Design
Portfolio Website Skills Section Design
Timeline Design with Tailwind CSS
Framer Motion SVG Animation Tutorial
Framer Motion Scroll Animation Tutorial useScroll & useTransform hooks
Framer Motion useInView Hook Tutorial
Portfolio Page Design with Next.js & Tailwind CSS
Framer Motion Horizontal Scroll Animation Tutorial
Circle Text Rotation Animation Tutorial
Portfolio Single Item Design
Portfolio Website Contact Page Design
Framer Motion Text Typing Animation
Next.js Contact Form Design
Portfolio Website How to Send a Mail Using a Contact Form?
How to Deploy a Next.js App to a Hosting?
Outro