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

Ғылым және технология

React Framer Motion portfolio project tutorial with parallax animations
Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
github.com/safak/animated-por...
(Includes starter and completed branches)
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Twitter: / lamawebdev
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

Пікірлер: 221

  • @nse_channel
    @nse_channel9 ай бұрын

    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
    @degirmenkagan7 ай бұрын

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

  • @genildocs
    @genildocs8 ай бұрын

    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.

  • @CodeWithHaseeb

    @CodeWithHaseeb

    7 ай бұрын

    Can you please send me your source code?

  • @nkazeanderson7509
    @nkazeanderson75098 ай бұрын

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

  • @vijaykrishna3641
    @vijaykrishna36419 ай бұрын

    Yaay!! I was waiting for this.

  • @shawkunal605
    @shawkunal6059 ай бұрын

    one of the most loved channel for frontend development

  • @tejastejale8310
    @tejastejale83104 ай бұрын

    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

  • @Ritik_Mangal

    @Ritik_Mangal

    3 ай бұрын

    can you provide code of above project

  • @mod_cyber1015
    @mod_cyber10158 ай бұрын

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

  • @coder5336
    @coder53369 ай бұрын

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

  • @CodeWithHaseeb

    @CodeWithHaseeb

    7 ай бұрын

    Can you please send me your source code

  • @VaibhavSharma-sl3kj

    @VaibhavSharma-sl3kj

    3 ай бұрын

    @@CodeWithHaseeb Can you please send me your complete code🥺

  • @chibuzoekwue
    @chibuzoekwue9 ай бұрын

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

  • @druggero77
    @druggero778 ай бұрын

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

  • @hungngo2818
    @hungngo28185 ай бұрын

    Excellent work!!

  • @rchuhk100
    @rchuhk1008 ай бұрын

    Thank you LamaDev! Great tutorial!

  • @kaoutaeaea649
    @kaoutaeaea6492 ай бұрын

    You're a blessing Lama!

  • @IamDarkAngeL1
    @IamDarkAngeL19 ай бұрын

    Another amazing video !

  • @tarasyats
    @tarasyats6 ай бұрын

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

  • @msalameh01
    @msalameh012 ай бұрын

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

  • @bismarkosei9656
    @bismarkosei96569 ай бұрын

    LamaDev never disappoints 🙌

  • @johny_ginger
    @johny_ginger6 ай бұрын

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

  • @user-ut4jg2sw2l
    @user-ut4jg2sw2l3 ай бұрын

    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.

  • @harsh_96gaming21
    @harsh_96gaming218 ай бұрын

    I just finished the react tutorial from code with harry and I'm here to start doing projects with LAMA❤

  • @smarikamalviya57

    @smarikamalviya57

    8 ай бұрын

    Hey how is it going?

  • @harsh_96gaming21

    @harsh_96gaming21

    8 ай бұрын

    Doing Great what about you? @@smarikamalviya57

  • @EZHMOHDANASMAROOF

    @EZHMOHDANASMAROOF

    6 ай бұрын

    Is your project complete? Do you face any error? @@harsh_96gaming21

  • @alphasciencetutor1252
    @alphasciencetutor12524 ай бұрын

    this is what i was looking for. thanks

  • @webhook4729
    @webhook47299 ай бұрын

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

  • @paalas_
    @paalas_Ай бұрын

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

  • @collinsk8754
    @collinsk87544 ай бұрын

    Great tutorial! 👏👏

  • @shailmoktan8270
    @shailmoktan82709 ай бұрын

    Lots of love and respect. (from NEPAL)

  • @PETERFILM
    @PETERFILM2 ай бұрын

    Thanks for tutorial! It was useful!

  • @codingdude8718
    @codingdude87183 ай бұрын

    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 🔥🔥🔥🔥🔥🔥🔥

  • @fatemehyosefi1018
    @fatemehyosefi10188 ай бұрын

    Thank you teacher! Your channel is awesome❤❤❤

  • @basitali2962
    @basitali29622 ай бұрын

    Thanks lama i was suffering with responsiveness but now i fixed it

  • @technigo7844
    @technigo78448 ай бұрын

    Thank u so much... Lama, this is awesome. I really appreciate it. U are amazing.

  • @devsmoger
    @devsmoger9 ай бұрын

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

  • @abayrajum
    @abayrajum7 ай бұрын

    Done!! Thanks a lot!!

  • @omarashraf7215
    @omarashraf72158 ай бұрын

    Thank you Lama

  • @sangameshkyatappanavar
    @sangameshkyatappanavar7 ай бұрын

    WOWOWOW thank GOD I found such an amazingly awe-inspiring tutor for my web-dev journey... he's sooo much beginner friendly... I love LAMADEV - he knows what he's doing - he's flawless at explaining things - he doesn't just write code -- he explains... - of course, frieldly soo, all in all, he's the best I've ever found! Lots of Love LAMADEV 💗💗💗 Thanks heaps and heaps!

  • @eshakumari4439

    @eshakumari4439

    7 ай бұрын

    is this coupoun working?

  • @sangameshkyatappanavar

    @sangameshkyatappanavar

    7 ай бұрын

    @@eshakumari4439 sorry there, I guess your hot me wrong, I didn't try his code to host 😊

  • @GameVerse215
    @GameVerse2159 ай бұрын

    Omg this is really great and great and great …i love you man thanks for your help

  • @shehzadhussain01
    @shehzadhussain019 ай бұрын

    Awesome ❤

  • @aakashshivanshu3578
    @aakashshivanshu35788 ай бұрын

    LamaDev you are amazing. I have learnt a lot of new concepts by building some of you react projects. Thanks for helping the community😀

  • @CodeWithHaseeb

    @CodeWithHaseeb

    7 ай бұрын

    Can you please send me your source code

  • @engineer9503

    @engineer9503

    4 ай бұрын

    @@CodeWithHaseeb Whenever i write code after 15 sec video me kuch na kuch lil diff code dikhta h itne error aa rhe hai mujhe aaj tak kisi project me itne errors nahi aaye 3 din me 50% tutorial hi hua h, ye kisi aur ke sath bhi ho rha h kya

  • @codderway

    @codderway

    4 ай бұрын

    same happend with me too @@engineer9503

  • @codderway

    @codderway

    4 ай бұрын

    have u completed the project@@engineer9503

  • @BeHumble2000

    @BeHumble2000

    3 ай бұрын

    Nhi almost contact us complete ho gaya sab kuch sahi chal rha hai chatgpt se apne code ko copy krke Error ya Typo check karo@@engineer9503

  • @erfanheshmati
    @erfanheshmati3 ай бұрын

    Great job👌👍

  • @yzap_
    @yzap_7 ай бұрын

    thank you for your knowledge

  • @helloggdssu
    @helloggdssu7 ай бұрын

    i love how you teaching

  • @vickygour6604
    @vickygour66049 ай бұрын

    you are perfect for us buddy Lama love you from India 🥰🥰😍😍

  • @RPXGAMING01
    @RPXGAMING017 ай бұрын

    Bro you are god , You saved my life

  • @jacobhollakitan3807
    @jacobhollakitan38079 ай бұрын

    Thank you lama

  • @torn1k3
    @torn1k36 ай бұрын

    1 month in i became lama biggest fan

  • @codewithyoga
    @codewithyoga8 ай бұрын

    Amazing

  • @user-yc5mt4jh3z
    @user-yc5mt4jh3z6 ай бұрын

    I loove your little laugh sooo much. It is so cute❤

  • @nazrulhassan6310
    @nazrulhassan63108 ай бұрын

    more like this and more projects from you .

  • @premsingh6967
    @premsingh69679 ай бұрын

    nice One Bro ❤

  • @shoaibqasim6889
    @shoaibqasim68898 ай бұрын

    @lama you are a true legend man. And 1 more thing Happy Teacher Day I learnt a lot from You I know its little bit late but i hope you will accept it

  • @EZHMOHDANASMAROOF

    @EZHMOHDANASMAROOF

    6 ай бұрын

    Is your project complete? Have you face any error??

  • @hasanulhaquebanna
    @hasanulhaquebanna9 ай бұрын

    Instead react, come with nextjs and SEO optimized! Appreciate your efforts

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt7 ай бұрын

    wow nice proyects

  • @mrandersoncga
    @mrandersoncga7 ай бұрын

    showm great for shared!!!

  • @m.h.6494
    @m.h.64944 ай бұрын

    Hey man, I really love your content and you're websits look very nice! But I want to give 1 small piece of advice according to the overcomplication of the css. There are quite a few times that similar results were possible with fewer flexboxes and wrappers. Using flex is good, but you might consider using a grid sometime. :D

  • @user-eo3gk7pd5c
    @user-eo3gk7pd5c2 ай бұрын

    Love you bro Love you

  • @Estaphet
    @Estaphet8 ай бұрын

    Hi Lama... need help, how do we limit logged in accounts to only one or two devices? It would be greatly appreciated if you don't mind teaching us through React and NodeJS. Just mini tutorial will appreciate it. 🙏 We often encounter this case for subscription systems. Subscribers often take advantage of this leeway and give access to their accounts to multiple people to take advantage of lower fees. I know the videos in this post are uncorrelated, I'm commenting here hoping you might pay more attention to your latest videos. peace... v_v

  • @Coding-is-life
    @Coding-is-life8 ай бұрын

    Hoping the next tutorial would be focus on typescript and redux.

  • @davidyepes4337
    @davidyepes43375 ай бұрын

    thank you lama, Please , I followed all your instructions and the portfolio ran very well and in the last week, the page is left with only the blue background

  • @thirumalr333
    @thirumalr3338 ай бұрын

    this is very very advanced definitely not for beginners who don't have solid basics

  • @CodeWithHaseeb

    @CodeWithHaseeb

    7 ай бұрын

    Can you please send me your source code

  • @codderway

    @codderway

    4 ай бұрын

    can u plese send me the code if u have done with the tutorial

  • @thanushavishwajith3755

    @thanushavishwajith3755

    19 күн бұрын

    Can you please give me your source code ? I am suffering with the SVG side bar icon.

  • @harsh_96gaming21
    @harsh_96gaming217 ай бұрын

    it was good but you need use a framework like btstrp or tw it will be better thank you lama

  • @ectoplasm1285
    @ectoplasm12859 ай бұрын

    just in time when i want to buy domain and hosting for my personal one

  • @rashid_rashi009
    @rashid_rashi0099 ай бұрын

    Nice work sir❤👍, we need react gsap projects

  • @feastofsteven1214
    @feastofsteven12143 ай бұрын

    Awesome video, thanks! I'm trying to position the menu on the right side of the screen and can't seem to get the toggle button to line up with the background. Mostly all I've done is change the left positioning to right, but it seems that the clip path positioning is changing when the screen is resized, so it doesn't always line up with the toggle button if that makes sense. From the left, it is sort of 'anchored' there. Any advice on setting that up to be on the right side of the screen?

  • @rahulkumar3138
    @rahulkumar31388 ай бұрын

    Would have loved if you had uses locomotive and gsap

  • @rufusr5880
    @rufusr58809 ай бұрын

    Huge respect for not using tailwind 👏👏🏿👏🏼👏🏾

  • @darshmostafa6044

    @darshmostafa6044

    8 ай бұрын

    Tailwind CSS is very difficult and anyone is boring it 😥

  • @niravparmar7856

    @niravparmar7856

    8 ай бұрын

    ​@@darshmostafa6044tailwind is difficult only if you don't know the real CSS. bdw i m not a tailwind fanboi! i use css only.

  • @henryc.nnamani7842

    @henryc.nnamani7842

    8 ай бұрын

    How come I love tailwind so much

  • @abdelrahmanzaitoun4402

    @abdelrahmanzaitoun4402

    8 ай бұрын

    ​@@henryc.nnamani7842see JSM tailwind course.. really good 👍

  • @shivamsinghnegi1192

    @shivamsinghnegi1192

    8 ай бұрын

    ​@@darshmostafa6044 no better one you use it

  • @user-ih5vl5jv4g
    @user-ih5vl5jv4g8 ай бұрын

    May I ask? What is the best React solution for both web and mobile apps at the same time? is it "React native web"? or there are some other better solutions?

  • @user-zd3br8zq1o
    @user-zd3br8zq1o8 ай бұрын

    Plz upload videos of marketplace apps like olx, quickr using react js and firebase

  • @user-od6mk7ix6k
    @user-od6mk7ix6k3 ай бұрын

    how 100vh and vw works for you when i do it scroll bars appear cause they take space too like the webpage is 100vw so the scrollbar probably 1vh more so i have a width scroll bar for 101vh why not overflow-x hidden and why mandatory and not proximity?

  • @gamingwithaffi
    @gamingwithaffi4 ай бұрын

    i have question can i use the single web hosting plan? will it work?

  • @dr.science9609
    @dr.science96099 ай бұрын

    I need a heart from my teacher (Lama dev)

  • @anuragsaxena7080
    @anuragsaxena70806 ай бұрын

    Hi at 33:58 timeline when you write how does import come

  • @zabashhd459
    @zabashhd4598 ай бұрын

    And if we want to make changes after its shared on hosting what shoud i do ?

  • @StepaniukDenys
    @StepaniukDenys3 ай бұрын

    Thank you very much for the wonderful video. I have one problem - navigation by id does not work in mobile browsers. Function scrollToSection not working too. I can't find any solution. Can you tell me how to solve this? Please

  • @shaikhsanuar5339
    @shaikhsanuar53399 ай бұрын

    🎉🎉🎉🎉

  • @nse_channel
    @nse_channel8 ай бұрын

    Hi Lama. I have never before come across a website building tutorial with language change option. As I know it can be done with i18n. So if this would be of interest to you, could you implement this in one of your next tutorials?

  • @vrajbirje5603

    @vrajbirje5603

    7 ай бұрын

    i want it too

  • @benjaminbarna6893

    @benjaminbarna6893

    5 ай бұрын

    I would also love to see that feature!

  • @clicktogain
    @clicktogain9 ай бұрын

    Can you please post ember.js tutorial. I expected you that next video will be ember.js. please make it. Take it as a request by your subscriber ✌️

  • @shehzadhussain01
    @shehzadhussain019 ай бұрын

    Sir, when I clone the GitHub repo only starter files are cloned in my code?

  • @brunoemre
    @brunoemre8 ай бұрын

    i am wrinting the same thing getting bunch of errors. I dont understand how come thats possible everytime

  • @bhadawang
    @bhadawang8 ай бұрын

    wow

  • @LofiMusic563
    @LofiMusic5637 ай бұрын

    Instructor, if I scroll up on the first page, I can scroll, how can I stop this?

  • @jorgeleonardogamarraospino9896
    @jorgeleonardogamarraospino98966 ай бұрын

    "How can I implement a scroll effect where the scrollbar only appears when scrolling?"

  • @BlessednHighlyFavor1
    @BlessednHighlyFavor18 ай бұрын

    Where did he get the path to the button at 46:33 my hamburger navbar is not showing not sure why.

  • @ritwizatomar5239
    @ritwizatomar52397 ай бұрын

    If you use: transform: none ! important For mobile size then buttons are not working.

  • @bulbergaming9142
    @bulbergaming91426 ай бұрын

    55:06 after doing this my ui is in trouble.Like the toggle button and lama dev text come on top of each other and when i click toggle button that white background is cut

  • @silent3469

    @silent3469

    4 ай бұрын

    did you figure out how to fix it ? I have the same issue

  • @scottl.696
    @scottl.6964 ай бұрын

    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

  • @user-fr7oe8it1d
    @user-fr7oe8it1d5 ай бұрын

    Does anyone have issues getting the autofill and auto imports to appear like he does?

  • @BrandonFunk
    @BrandonFunk8 ай бұрын

    What did I miss that makes it so all the css is seperate even if they have similar names inside of them, i went crazy trying to fix something and it was because the css from the hero section was affecting the images in the projects section. How do you stop it from interfering? I usually use tailwind or modules.

  • @aquibsayyed9186

    @aquibsayyed9186

    8 ай бұрын

    He is using scss. It is not the exact same as css.

  • @BrandonFunk

    @BrandonFunk

    8 ай бұрын

    @@aquibsayyed9186 yeah i got that, i followed exactly, but then my items started affecting the ones in seperate .scss files and i had to change the names. so i either missed something or ? im not sure

  • @gmsosaweb

    @gmsosaweb

    8 ай бұрын

    @@BrandonFunk The reason you are having that problem is because you are not putting the stylings in the sass format. You are probably using traditional css format.

  • @user-ie2he1pn3f
    @user-ie2he1pn3f8 ай бұрын

    Nice content.... I see that kind of blur effect in video and some time not easy to catcth what type there... Is anyone having same issue...

  • @GameVerse215
    @GameVerse2158 ай бұрын

    Hi Lama Dev could you please develop apps using react sequelize and postgress ..

  • @user-te2bf4ff1f
    @user-te2bf4ff1f8 ай бұрын

    please do advanced something like geaphql

  • @AnkitAnkit-js6hd
    @AnkitAnkit-js6hd8 ай бұрын

    there is a flickering / distortion glitch between the final project and the contact page. It flickers when we move past the final project. Please solve this. I think you mistakenly ignored this issue. But it's creating so much fuss. Please help

  • @cholo2605

    @cholo2605

    8 ай бұрын

    same issue

  • @chadcampbell174

    @chadcampbell174

    8 ай бұрын

    I think the issue here is with the y properties clashing between sections. I changed my variants in the contact component to x:-300 and x:0 so they slide in from the left and now the scroll is smooth. I also set overflow-x: hidden for contact class. Tinkered with the stagger and durations to my liking too.

  • @BootBoot-rl1kv

    @BootBoot-rl1kv

    5 ай бұрын

    @@chadcampbell174 thanks it worked

  • @razzaqmohammedali4653
    @razzaqmohammedali46538 ай бұрын

    Lama we need biggest mern or nts stack projects

  • @roshankalamkar7752
    @roshankalamkar77528 ай бұрын

    there is lots of glitch when we are try to make same .. like img,size of screen animation...

  • @ilyassanjrani9839
    @ilyassanjrani98399 ай бұрын

    We want vuejs tutorial by you please make on it

  • @srijayanthpotluri5436
    @srijayanthpotluri54364 ай бұрын

    I am not able to display the content in live server in VScode why?

  • @shamshad_hussain
    @shamshad_hussain8 ай бұрын

    what theme are you using please reply

  • @ukkashrecords7046
    @ukkashrecords70465 ай бұрын

    can anyone solve this when am using style with lama dev my screens is defferent from him

  • @sankhapriyamantha62
    @sankhapriyamantha628 ай бұрын

    please create pos system with all functionalities

  • @igorpestana8608
    @igorpestana8608Ай бұрын

    Is it still viable to use React Helmet for SEO?

  • @user-me1ry6lg6d
    @user-me1ry6lg6d8 ай бұрын

    what is the name of the theme you are using ?

Келесі