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

[@rakibhossensarkar6080]

This particular video has been incredibly informative and has taught me a lot. Thank you for creating such a valuable resource .

[@scottl.696]

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

[@harsh_96gaming21]

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

[@smarikamalviya57]

Hey how is it going?

[@harsh_96gaming21]

Doing Great what about you? @@smarikamalviya57

[@EZHMOHDANASMAROOF]

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

[@surakshithdt3461]

heyy,where are you now?(interms of carrier)

[@harsh_96gaming21]

@@surakshithdt3461 I work for Amazon

[@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.

[@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.

[@CodeWithHaseeb]

Can you please send me your source code?

[@degirmenkagan]

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

[@shawkunal605]

one of the most loved channel for frontend development

[@sangameshkyatappanavar]

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]

is this coupoun working?

[@sangameshkyatappanavar]

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

[@tejastejale8310]

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]

can you provide code of above project

[@coder5336]

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

[@CodeWithHaseeb]

Can you please send me your source code

[@VaibhavSharma-sl3kj]

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

[@thirumalr333]

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

[@CodeWithHaseeb]

Can you please send me your source code

[@thanushavishwajith3755]

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

[@Nic_codelecturescsit]

Have not slept 🔥🔥🔥🔥 thanks for sharing

[@nkazeanderson7509]

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

[@msalameh01]

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

[@codingdude8718]

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

[@paalas_]

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

[@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.

[@ArifCan-Ayerdem]

Git huba codlarını yuklediysen incelemek isterim

[@Хулиородригес]

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.

[@shailmoktan8270]

Lots of love and respect. (from NEPAL)

[@das_vjkrishna]

Yaay!! I was waiting for this.

[@basitali2962]

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

[@Reel_InsightYT]

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

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@aakashshivanshu3578]

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]

Can you please send me your source code

[@engineer9503]

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

[@BeHumble2000]

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

[@mod_cyber1015]

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

[@tarasyats]

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

[@druggero77]

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

[@kaoutaeaea649]

You're a blessing Lama!

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@chibuzoekwue]

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

[@haroonkiani-webdeveloper]

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

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@RPXGAMING01]

Bro you are god , You saved my life

[@bismarkosei9656]

LamaDev never disappoints 🙌

[@hungngo2818]

Excellent work!!

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@rchuhk100]

Thank you LamaDev! Great tutorial!

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@vickygour6604]

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

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@technigo7844]

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

[@IamDarkAngeL1]

Another amazing video !

[@elenaelena0472]

Hello, in 8:18:24 Lama overwrites the style from parallax.scss with ‘backgroundImage’ in Parallax.jsx. It does not work for me. Visual Studio Code does not show any errors. Image ‘sun.png’ is not displayed at all. Can anyone help me?

[@fatemehyosefi1018]

Thank you teacher! Your channel is awesome❤❤❤

[@GameVerse215]

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

[@alphasciencetutor1252]

this is what i was looking for. thanks

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@rufusr5880]

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

[@darshmostafa6044]

Tailwind CSS is very difficult and anyone is boring it 😥

[@niravparmar7856]

​@@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]

How come I love tailwind so much

[@abdelrahmanzaitoun4402]

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

[@shivamsinghnegi1192]

​@@darshmostafa6044 no better one you use it

[@bulbergaming9142]

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]

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

[@mrigankatiwasabordoloi334]

is it fix ???

[@collinsk8754]

Great tutorial! 👏👏

[@PETERFILM]

Thanks for tutorial! It was useful!

[@Matik-c2r]

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

[@shoaibqasim6889]

@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]

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

[@m.h.6494]

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

[@helloggdssu]

i love how you teaching

[@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.

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@anuragsaxena7080]

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

[@tornike1s]

1 month in i became lama biggest fan

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@nse_channel]

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]

i want it too

[@benjaminbarna6893]

I would also love to see that feature!

[@BlessednHighlyFavor1]

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

[@davidyepes4337]

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

[@mdnurullah9882]

masa allah . very nice tutorials

[@AnkitAnkit-js6hd]

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]

same issue

[@chadcampbell174]

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]

@@chadcampbell174 thanks it worked

[@Estaphet]

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

[@omarashraf7215]

Thank you Lama

[@feastofsteven1214]

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?

[@erfanheshmati]

Great job👌👍

[@denikanthr-vs9wh]

a samll correction in sidebar to fix the button in html body

[@abayrajum]

Done!! Thanks a lot!!

[@hasanulhaquebanna]

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

[@RAGHAVKHANDELWAL-dz8ze]

can you give me your github repo of this project?

[@shehzadhussain01]

Awesome ❤

[@yzap_]

thank you for your knowledge

[@brunoemre]

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

[@NiloferAbdul]

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

[@Roychen97]

If I want to start the project without clone your starter files from github what should i write in the terminal to install and get to the same point of those files ? whice package is it ? vite ?

[@harsh_96gaming21]

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

[@LofiMusic563]

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

[@ΝεκτάριοςΝεκτάριος-ω3η]

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?

[@Abdullah-z6w2g]

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?

[@nazrulhassan6310]

more like this and more projects from you .

[@ectoplasm1285]

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

[@LilyUtube-r2k]

Hi Lama, could I use your website for my friend's company website? Because I like your design very much.

[@StepaniukDenys]

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

[@premsingh6967]

nice One Bro ❤

[@Coding-is-life]

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

[@BrandonFunk]

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]

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

[@BrandonFunk]

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

[@Harshh-nm9qt]

What is your Folder and vs code theme, it looks decent

[@jacobhollakitan3807]

Thank you lama

[@dr.science9609]

I need a heart from my teacher (Lama dev)

[@gamingwithaffi]

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

[@zabashhd459]

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

[@NomNomsss]

I have some glitching issues when using scroll snap, is it just me and is there a fix to this?

[@chadcampbell174]

I felt like scroll-snap-type: y proximity felt much nicer than mandatory. The contact section also glitches out when scrolling. To fix that I set the variants in Contact component to x instead of y. So it all comes in from the left, and doesn't clash with the projects section above.

[@BLINKBOXHD]

The css snap scroll effect happens way too fast on google chrome, is there any way to fix this?

[@ketan4928]

Where can i get the images of mountains planets and stars please tell

[@cleiton_rs]

See video description.

[@EneadaSulaj]

what extension do you use for scss autocompletion?

[@ritwizatomar5239]

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

[@shehzadhussain01]

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

[@nitroxv]

screens: { xs: "480px", ss: "620px", sm: "768px", md: "1060px", lg: "1200px", xl: "1700px", },

[@jorgeleonardogamarraospino9896]

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

[@rashid_rashi009]

Nice work sir❤👍, we need react gsap projects

[@rahulkumar3138]

Would have loved if you had uses locomotive and gsap

[@srijayanthpotluri5436]

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

[@codewithyoga]

Amazing

[@aachalmishra8295]

Can u please upload the video to how to run the code because I'm not getting it

[@igorpestana8608]

Is it still viable to use React Helmet for SEO?

[@roshankalamkar7752]

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

[@aktuCSE-webdev]

Love you bro Love you