React Project Tutorial: Build a Responsive Portfolio Website w/ Advanced Animations

WOAHHH thank you all for the positive feedback on this video means a lot!
Have received some requests about issues with the email server and how to deploy it, so made another video:
https://youtu.be/J59hkkiRClY
To address those issues, hope it helps:) happy coding!☕

Thank you for sharing an amazing project tutorial for portfolios. I'm just having some problem about the contact component where you set up port was 5000, but my localhost is 3000. Does that affect anything ? And how do I run the "server.js" file ? because 'npm server' is not accurate command. Looking forward for more videos.

Hi Judy can you help i am strating to add your code bugt i get a use Ref error and not sure why …this is after the navbar creation

please help

Awesome portfolio website. I was just having trouble following you throughout the tutorial since I'm a beginner but i got it running in the end thanks for this this will help me a lot in the future

for anyone having trouble in contact section just run the server file by clicking on run button in vs code and try to send email with someone's email

Great this helped me a lot.

can you tell how to host this

Great explain but why you don't open the page,a lot of people don't know what are you doing to the elements , I reached 20 minutes and you didn't open the page once I can't imagine all the changes from my mind because I am beginner in react

Is this website responsive???

Can we host this website on single hosting or we host frontend and server separately

took all day to get 23 minutes in… First look at the home page on localhost… 100 errors…. Thanks anyways… Im the unteachable..

I am unable to download the used images can i have a simple link for the zip file of "asset" folder?
please.

Thanks so much for this amazing tutorial. Its amazing . Looking forward to more content from you. Best of luck.

I am getting vulnerabilities while installing React-bootstrap

looks cool but very hard to follow. needs more explanation.

personally don't like the tutorial feels like there too many short cuts Im gonna try another one

thanks but please turn up the volume next time!

<3

Hey Judy, where can I get more SVG like those you use. I want some of the % ones used in Skills, but couldn't find. Thanks for the project, very nice!

Awesome project. Subscribed!

Awesome content!

Nice explanation

But i am facing one problem, in this video you did not show how does the Nodemailer API works like what happens when we click Send button in contact me. I created the server.ts file and added the configuration and now i am running the server and sending an email, i am getting message sent successfully but nothing appears in my gmail.

Thanks for this. It works perfectly and I'm excited to learn more from you

HiJudy, Great project! I just finished up and it was exciting to see how it looks finished! Thank you for your knowledge!
Although I found some small issues in the Projects option on the NavBar and when you fixed the overlapping background of projects on the newsletter, the ::before effect of the projects was broken, now it has no hover effect. I sent you 2 Pull Requests that fix those issues, I hope they help =n.n=
New Sub!!

Can you provide the code as free? Please

1:17:19 can someone explain to me how to run the server? I'm getting error messages

where can we host it for free ?

I just finished the NavBar part of the video but I am running into an error even though its exactly how it is done in the video. This is my error
SyntaxError: C:UsersErikDocumentsGitHubweb-portfolioweb-portfoliosrccomponentsNavBar.js: Identifier 'NavBar' has already been declared. (8:13).
However it is exactly written like the video.

export const NavBar = () => {

| ^

9 | const [activeLink, setActiveLink] = useState('home');

10 | const [scrolled, setScrolled] = useState(false);

I can't access images from assets on GitHub what can I do now? @webdecoded

it is not so good on responsivness

How do you code without showing what it looks like in the browser while coding. What kind of tutor does that? 0/10 thats your score

To be honest, it was a rollercoaster because I would like to know what kind of applications you are using. What kind of software. as a beginner it will be a great help from your side and you have cut your video in 18:37 ?

Really great tutorial, Thank you. Please can you provide the link or where to get the images especially the meter image in skills that was used. I would like to get those same meter with different number. Or if you provide a way to change the value of the percent. Thank you

go to sleep

how to run this

Hi! I had a question. At 18:34 , you jump to another screen with the Navbar styling. Where do you get this from? Is it from the internet? Thank you.

I just wanted to say how great this was. This is probably the only responsive website I have gotten to work by just watching the tutorial and not going down the rabbit hole that is stackoverflow. Thank you so much!

Awesome tutorial and beautiful styles!

can I use animate css and tailwind css together?

hey can i start my app with vite instead of create react app
then follow this ?

I am really enjoying this tutrorial, however, I am having issues with the navbar… I dunno how you managed to get it on one line, but when I literally copy pasted your JS and the css, it still shows each element in a column as opposed to a row… It looks like you had it working and looking nice from the word go, so it is confusing why when I launch from my side it just doesn't 😂thank you anyhow and I am really gald I found this tutorial!

Good tutorial, it would be great to explain a little bit more what you are doing since it's a bit hard for beginners to understand it. I'm also struggling with the mobile version. The text animation from the banner keeps playing when I'm reading the description and keeps moving the text up and down. I can't solve this issue, anybody knows how to do it? With trackVisibility it's not doing anything, I tried to put a useEffect with the onScroll function as we did in the navBar but it's not working either

guys why doesnt my windows terminal open

wow good ui!

hey im at 23:30 and as soon as i try to start the app with npm start and i load the localhost, i get 2 error msgs saying, Invalid hook call. Hooks can only be called inside of the body of a function componen & Uncaught TypeError: Cannot read properties of null (reading 'useRef')… Can you help ? i tried multiple things and even copy pasted your code for double checking…

Is this out of date? In the begining there's a bootstrap and I can't find it, also Navbar doesn't work when I import

Vs code ??