Next.js Animated Portfolio Website with Framer Motion & Tailwind CSS | Next.js Beginner Project

Source Code:
(Includes starter and completed branches)

Join Lama Dev groups

00:00 Introduction
03:35 Installation
46:10 Framer Motion Hamburger Menu Animation
52:52 Framer Motion Stagger Children 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: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:17:57 Portfolio Website How to Send a Mail Using a Contact Form?
02:30:40 Outro

[muhammadobaidullahkhan]

Just Finished a NextJs project and now i was trying to make personal porfolio and found your tutorial, Thanks alot buddy <3

[coder]

Framer transition is with Next.js is awesome. Thanks for teaching us different technologies

[shankar]

sir i followed your next.js 14 course but i found the authentication part a little confusing. can you please make a video on it?

[ozeunzh]

Just completed this project 🔥 It was an awesome experience! Very easy to follow along, and of course, the UI and code were great. I'm definitely going to watch more of your videos! 😊👍

[CodeBucks]

Where did you get the design inspiration for this portfolio? 🙈

[abdalkareemnegm]

it's my 5th portfolio tutorial and this is the best fr !
thank you for sharing with us <3

[abdallahazme]

you wont belive me if i told you i was going to build my portflio today and was hoping you have a toutorial for one.

[giannisnik]

Excellent!Loved the mobile first technique!!

[Pixelaze]

I was looking forward to your next video!

[giannisnik]

i made this Provider to wrap every page so we dont have to turn hole page to client

"use client";

import { motion } from "framer-motion";

const PageTransitionProvider = ({ children }) => {
return (
<motion.div
className="h-full"
initial={{ y: "-200vh" }}
animate={{ y: 0 }}
transition={{ duration: 1, ease: "easeOut" }}
>
{children}
</motion.div>
);
};

export default PageTransitionProvider;

[mehrdad]

I'm was seeking for animated portfolio tutorial thank you sir

[manishgautam]

some people sale such projects modifying the framerer motion about 240 dollars, legends providing the code for free

[patricioavila]

Hello Dev can you help me please.. where can i find the Github of the SVG Brain ? Please i need it to finish the Portofolio

[nanonkay]

I know exactly where he got the inspiration for this style of website from 😂. But it's all good, imma probably do this too, anyway

[dustydepot]

This is really helpful, thank you so much!

[HilariousHound]

I am following react courses which are amazing, I am keeping this one in queue

[abdalrahmanaldammad]

Thank you so mush ...please upload videos about Prisma with Express js

[kanhaiyapandey]

please share the brain svg I am unable to find that

[KingCoffeetooth]

For anyone having the issue where your PNG/SVG (hero page) is not showing/is stuck at 0px tall, make sure the h-[calc(100vh-6rem)] in either your main page.jsx or transitionProvider is written exactly as is and does not have any spaces, HTML seems to freak out when it sees a space there

[matejbittner-et]

Hi, why is motion div jumping from left to right, that you can see site behind (52:36 - it slides from left to right, but weirdly move after that from left to right again). Thanks