Animated Portfolio Website with React & Framer Motion | React Project for Beginners

React Framer Motion portfolio project tutorial with parallax animations

If it is valuable to you, you can support Lama Dev.

Source Code:
(Includes starter and completed branches)

Join Lama Dev groups

00:00 Introduction
02:55 Installation
05:35 How To Scroll Snap (CSS Snap Scroll Effect)
08:50 Global CSS
10:40 Navbar Design
15:40 React Framer Motion Crash Course
32:55 Animated Sidebar (Hamburger Menu Animation )
43:49 How to smooth scroll between HTML sections?
45:50 Hamburger Menu Button SVG Animation
48:33 Sidebar Menu Link Animations
52:18 Animated Hero Section Design
01:04:20 Framer Motion Sliding Text Animation
01:06:30 Framer Motion Parallax Tutorial
01:11:40 Framer Motion useScroll and useTransform Hook Tutorial
01:19:30 Services Section Design
01:30:33 Framer Motion How to Animate in View (useInWiew Hook)
01:35:15 Animated Portfolio Section Design
01:39:58 Framer Motion Animated Progress Bar
01:44:45 How to Animate Items on Scroll?
01:54:45 Contact Section Design
02:09:48 How to send mail in React?
02:14:52 React Animated Mouse Cursor
02:19:50 Mobile Responsive Design
02:41:21 How to Deploy React App to a Shared Hosting
02:43:25 Outro

[nse_channel]

Lama, this is awesome. Every time I have questions about development your videos answer me instantly. I am already doing one project and familiarizing myself with Framer Motion and your video are like a treasure.

[degirmenkagan]

Believe me when I say this, you inspire and improve me in my Frontend Developer journey! Thanks a lot 👑

[nkazeanderson]

I love all of your tutorials and style of teaching❤ keep up the good work 👍

[genildocs]

I'm from Brazil and I was lucky to have found this channel. Lots of quality in the videos and teaching is great. I'm learning a lot.

[utjgswl]

Thank You for so great video!!! I love it so much! I've never used motion, but after this tutorial I think I will use a lot this library.

[tejastejale]

You're actually GREAT man i made this seeing this video u explained every statement and done everything in a write way i learned too much about reactjs by doing this project thanks man appreciate you stay happy

[shawkunal]

one of the most loved channel for frontend development

[druggero]

Great training video. I'm learning so much from this. Thank you!

[mod_cyber]

that's dope, deffinetly going into it.
thanks man

[johny_ginger]

Nice one mate, great tutorial. Thanks for this, i am a big fan of your work. thanks again.

[coder]

It'll be my best portfolio. Thank you lama dev for this stunning framer tutorial

[chibuzoekwue]

Was literally trying to learn framer motion now and saw the notification ❤❤❤❤

[ekulercuha]

Merhaba, bu video ile ilk defa karşıma çıktınız ve projenizi baştan sona denedim ve gerçekten çok başarılı ve öğretici olmuş. İngilizce içerik üretmek tabii ki global bir yol ama türkçe videolar ile de gerçekten çok iyi kitlelere ulaşabileceğinizi düşünüyorum. Başarılar.

[codingdude]

this is one of if the best potrfolio ive seen this dynamic beautiful portfolio is just too good
thanks alot lama dev for such awsome videos
🔥🔥🔥🔥🔥🔥🔥

[tarasyats]

Thank you, gave me the opportunity to understand react and framer-motion

[webhook]

Thank You So Much Lala as always..this is the best channel in youtube

[msalameh]

one of the best teachers on YouTube as usual.👏👍

[devsmoger]

Like this css tutorial. Would be interesting to see this connected with firebase, too see some upgrades or something. Part 2 for this project.

[paalas_]

you are awesome lama, this one helped me in my b-tech 4th semester.

[scottl.]

2:30:33 when talking about mobile responsiveness for the services section textContainer. Here is the workaround I found to make the animation work at mobile size and the above breakpoints without creating a container without motion.
At line 35 in the Services.jsx file:
animate={ window.innerWidth<= 738 ? "animate" : isInView && "animate"}

Let me know if it works for others because.
Thanks for all the knowledge @LlamaDev