Build a Responsive React Portfolio Website | Tailwind, Framer-Motion, & React Hook Form

Подписаться 81 тыс.

Просмотров 115 тыс.

50% 1

In this tutorial, we will build and deploy a complete Responsive React Portfolio Website. We will be using React, Tailwind CSS, Framer Motion and React Hook Form with Form Submit to build this fully build application.
Tailwind Css: tailwindcss.com/docs/installa...
Form Submit: formsubmit.co/
React Anchor Link Smooth Scroll: github.com/mauricevancooten/r...
Framer Motion: www.framer.com/docs/
Google Fonts: fonts.google.com/
Code
completed code: github.com/ed-roh/react-portf...
location of image assets (you'll have to download the entire repo to get the images): github.com/ed-roh/react-portf...
-----------
Subscribe to my channel: / @edrohdev
for more web development and web 3.0 blockchain tutorials!
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
======
Chapters:
0:00 Building this complete React Portfolio App from Scratch
1:54 Package Installations and Setup
8:46 Tailwind Installation and Setup
19:09 Navbar and Navigation
55:12 Landing Page
1:27:28 Skills Page
1:43:04 Projects Page
2:00:49 Testimonials Page
2:11:07 Contact Page
2:33:22 Footer Page
2:36:34 Deploying App to Vercel
2:39:15 Finished Complete Built and Deployed React Portfolio App

Наука

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 165

@EdRohDev Год назад

Hey everyone! Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

@griffinkirkland9087 Год назад

pretty neato EdRoh. Muchas Gracias

@user-sj2io2pc9n Год назад

Sorry about commenting here, tried discord but had difficulty navigating.

@griffinkirkland9087 Год назад

@@user-sj2io2pc9n go figure, the sidebars are the threads that you will click on, to your left side of the screen

@user-sj2io2pc9n Год назад

@@griffinkirkland9087 thx

@jordancushnie792 8 месяцев назад

😢

@harshitsachan154 Год назад

It's amazing how a single word can convey so much information in a video. Your sharing is greatly appreciated. You did an outstanding job.

@abdelrahmanzaitoun4402 4 месяца назад

amazing tutorial Edward. WONDERFUL! I recreated this website for a customer and it was amazing

@catreunion Год назад

Your tutorial is amazing as always!!!! Thank you so much for teaching us and giving us a valuable coding journey. Much appreciated!!!!

@EdRohDev Год назад

thank you!

@ancestralcraft Год назад

Haya Ed, awesome tutorials! May I suggest/request for the future ones, when you start a new section of code to first show what it is going to do/accomplish/move/open etc. on a completed website. This why we would connect visually with what the code you are writing right now is about to accomplish, instead of seeing the code created first and then showing us what it accomplishes? Would be super helpful!

@dalestewart Год назад

Another fabulous tutorial building this react-portfolio application.

@youngwolf1009 Год назад

Actually i was going to start my portfolio website but i had absolutely no idea of the desgin i was going to use, this is really helpfull thank you so much

@vireltv256 11 месяцев назад

Insane tutorial you make me learned so much in few hours about react and tailwind

@Sam-oz8tw Год назад

For those of you looking to do project descriptions(1:43:46) and might be stumped, this will help. It is not complete code, so you need to find where to slot it in. const Project = ({ title, subtitle }) => { return ( {title} {subtitle} {/* PROJECTS */}

@andydriver9359 Год назад

Thank you so much for this!

@griffinkirkland9087 Год назад

Sam I thought he included it in the video, except I think I might be wrong or something

@katherinescott3360 Год назад

Hey Sam would you be able to help with an issue..I'm having an issue with the pictures. They will not show when I put them in the code like its not working for me. However, I can import the image and put it in the code like src={contact}. It worked fine until the project portion where all my project pics need to be placed the way he did it.... Any help would be appreciated. THANKS

@Sam-oz8tw Год назад

@@katherinescott3360partially answered on your original post if you have images other than exactly "jpeg" Additionally, image names need to EXACTLY mirror project titles per the const projectTitle mechanic: ex. Project *Admin Dashboard* will only find a file exactly named *admin-dashboard.jpeg* Space Website = *space-website.jpeg* I'm trying to find a more elegant workaround. But honestly? Your import works just fine.

@Coding-is-life Год назад

Much better if created a separate component, and just mapping it and make life easier..

@atifhussaini6350 Год назад

Thank you so much, Ed! Great starter portfolio website!

@eshw23 Год назад

Tailwind CSS is literally magic lol ill build this after I get my current MERN project done! I had to subscribe and I only watched the intro lol.

@felnoga Год назад

Very much appreciated the effort to make such a good tutorial!!

@timeanima Год назад

You're a legend. thank you, Ed! It's an excellent tutorial. After watching it, I just liked having a good movie (mood) and learned a lot!!

@isaackoz Год назад

Thank you Ed! This was a fun project to work on and you have a gift for teaching and making these videos! Also FYI, your vercel previews no longer exist and 404

@meidriscoll5011 Год назад

Thank you for the tutorial! You're a good teacher. subscribed and liked.

@joemurray1664 Год назад

Another full app, loving it!

@CodingAfterThirty Год назад

Wow. Really good tutorial and content. Just discovered your channel and subbed.

@EdRohDev Год назад

thanks!

@malc_makes Год назад

phenomenal tutorial. thank you for creating this !

@vinaypatil8009 Год назад

Damn this is really great content, knowledge and thank you for this video.

@mochi-amie Год назад

Second project that I'm going to do from your content. Thank you!

@AliHussein-pb6cz Год назад

Thank you Ed! great tutorial. Nice projects, I hope you can make it more beginner friendly, and ad extra 15-10 minutes giving explanation about Tailwind css etc... but over all it is great work and code is all up to date.

@jamsranjavodgerel803 4 месяца назад

Awesome content. Thank you!

@DRDR3ADSA Год назад

Took a few days but I finished it. Cheers, been amazing!

@Dr.mandell Год назад

👆✍️

@HimWhoIsI0002 Год назад

Thanks, I have learned and improved drastically since finding your channel I have trouble loading the images in the grid despite copying and pasting code among a few other things

@robinhuguet9832 Год назад

Hello, moove the assets folder in the public folder. It should work with same code

@diazterrom 9 месяцев назад

@@robinhuguet9832 thanks mate ╰(*°▽°*)╯

@62kckagaudaipanmei56 9 дней назад

I really want to thank you for this quality video that you have provided for us and for explaining everything from start to finish.Plus for the free code

@chromff9261 Год назад

You are simply amazing ser! = ) Thank you for all your hard work!!

@sebastianmosneagu2635 Год назад

This was awesome, it took me 4 hours and a half to complete it. Here's what I've learned: Using Tailwind is so much cleaner and smoother experience compared to simple css. I learned how to set up tailwind at the beginning of the video so that I save time later. I learned how to implement simple animations with Framer-Motion. (something that I wanted to learn for a long time, can't belive its so easy. The small little animations bring so much value to a website.) React-Hook-Form, not something you will use a lot but for its simplicity it's good to know and useful to have on a project in your portfolio, I'm surprised with its simplicity as well. Thank you, Ed I've learned a lot.

@leandrofahur_ Год назад

You had great learnings! However, the Tailwind part can be tricky. You may not have a CSS file, but you add several classes in your .jsx code. Which may or may not be as clean visually. But happy that you enjoyed it. I'm enjoying it too. Ed's tutorials are just excellent!

@griffinkirkland9087 Год назад

Sebastian Mosneagu took me about 5 days how do you do it in 4 and half hours did you code Along?

@sebastianmosneagu2635 Год назад

@@griffinkirkland9087 Yes

@griffinkirkland9087 Год назад

@@sebastianmosneagu2635 whoa how'd you do it ?

@sebastianmosneagu2635 Год назад

@@griffinkirkland9087 I have 2 monitors so I could code and follow along (though I had to pause many times.) I also have experience as a front end dev so that's why it was a bit faster. Keep working on your skills and soon you will be able to follow along pretty fast too.

@astawanzen9766 Год назад

thanks man +1 subs!! i didn't see anything on my page, but after i rename the *.jsx to *.js it worked. i don't know how to thank you for this tutorial and the "no copyright" that you just let us use this desain freely. God bless you man. 🙌🙌🙌🙌

@Skynet_11 5 месяцев назад

Excellent video!!! Many thanks!

@user-pc4eg6rz2m Год назад

Thank you so much! It really helped me!

@dimro.9445 Год назад

Excellent tutorial!

@mattiesanders5102 Год назад

Beautiful app, I'll be watching it later

@Diego-oy6nc Год назад

Thanks men, you rock!!

@ahmedessamnouraldin 11 месяцев назад

Still the best tutorial explanation wise and also design wise

@rodolfogarcia7114 Год назад

Thanks a lot, your videos are great, and you make back to react

@LukmanSanni Год назад

Amazing.. very informative thanks Boss

@astawanzen9766 Год назад

commenting again, that i just done it today. it was amazing and fun, i"m still learning what i just got from this tutorial. it was just 2 hours but took me weeks to did it. i don't know how to thank you Ed. this is amazing.... can i use it for my portfolio?? please reply. 😁😁🙏🙏🙏

@kyokusanagi4997 Год назад

thank you so much for your video^^

@iUmerFarooq Год назад

You are doing great Bro. Make more ReactJs projects with framer motion and some more library/package. Like you use formsubmit.

@idynxcode5744 Год назад

You are awesome! Thanks

@nishagera9195 8 месяцев назад

Thank you so much 🌸

@mattiesanders5102 Год назад

this portfolio app is great!

@regilearn2138 Год назад

Hi Edroh, the way you explaining things with Architecture level is awesome, Can you please do a TYPESCRIPT MERN advanced project, that will be a really help for us.Please...

@Junyoung_Kang Год назад

Hey EdRoh, thank you so much for this video. What is that bug icon extension you are using to look at div borders? It seems very helpful!

@majesticglue9100 Год назад

love it!

@AwayWeGo747 Год назад

Thanks Ed. Just completed this one too. This is Chris from whats app.

@whysumancode 10 месяцев назад

Completed upto 19:20 I will continue tomorrow. Please wake me up!

@shah-mohammad Год назад

great , thanks

@quirkTVLaughs 11 месяцев назад

thank you

@wojciechkrupa5659 Год назад

well done!

@user-sj2io2pc9n Год назад

Hey Ed great tutorial , thanks. I am having one issue with navbar though. When I run app I get a transparent overlay error ( setSelectedPage is not a function. (In 'setSelectedPage(lowerCasePage)', 'setSelectedPage' is undefined) when I click on any links. Links are working and overlay can be closed however it is quite annoying. Any help here would be much appreciated. Thanks again great work!!

@drakohgaming5131 Год назад

Thanks!

@Fanaro Год назад

Awesome tutorial. But I think the scrolling behavior could be largely done with pure CSS actually.

@YousufJusani Год назад

Amazing tutorial, very well explained 🔥👍🏻 Can you make a website that is one page with parallax scroll effect type animations? like in apple or dji websites?

@shakil-the-coding-monster Год назад

great tutorial by design breaks in laptop

@SamSiMmP Год назад

Хороший урок, спасибо Большое

@ahlemmeziane3181 Год назад

thank you 🤩

@joaocorreiafreitas712 Год назад

Hi EdRoh, thank you for such a great tutorial, I did appreciate it. Fyi, I completed the web and deployed it to Vercel. However, what I noticed from this tutorial is that the responsive functionality didn't work on 13" inch screen laptop on 100% zoom (to show it correctly I must zoom it out to 64%). But under the browser inspect tool its responsive is working as expected. I am wondering why such issue occur and do you have any clue to sort this out? thank you and I am looking forward to hearing from you soon.

@VineetKumar-eq9lu Год назад

Hey Joao i have the same issue man , did you end up finding any solution ??

@griffinkirkland9087 Год назад

Vineet Kumar remove the h-full class

@griffinkirkland9087 Год назад

Joao Correia Freitas remove the md:h-full class in App js

@nanonkay5669 Год назад

Mantine would've been amazing for this

@Dr.mandell Год назад

☝🏼✍🏻

@mustafasezgi6722 Год назад

Thank You.

@Dr.mandell Год назад

☝🏼✍🏻

@HyperXytHarsh 8 месяцев назад

ty bro

@jessecook845 Год назад

Fantastic

@ReelAoT Год назад

What are you coding on? and are there any guides out there on how to set it up?

@sire906 Год назад

this is very helpful i now know how to use framer motion... and please dose anyone know if the form submit will work once its hosted ??

@scottylynn6 Год назад

Sick tutorial. Any plans to do a tutorial on a headless cms blog?

@shibilrahman4504 Год назад

Thanks👌

@pitbul67204 Год назад

The best teacher on youtube

@jackepner9984 Год назад

So, there are a lot of SO threads about images not loading sourcing by relative path in React apps, but after some trial, managed to get most to work. The only issue I still face is that NONE of the Projects images and overlay are appearing, not even on hover. I've looked over Ed's codebase multiple times to compare, and can't see what's happening. Yet, when I use Ed's deploy link from the GH repo, it works fine, whereas mine does not. With so many files, I really don't know where else to look, as I've already checked over App.js and Projects.jsx multiple times. Really don't see why mine won't load, but all potential SO solutions involve importing images as individual components, which won't work for this particular setup as we're using dynamic filenames.

@Sam-oz8tw Год назад

Just swap his "Projects.jsx" with yours. I'm sure you just forgot a typo somewhere. 5 minutes.

@frostyfreezemovies Год назад

Osm sir ❤️

@Dr.mandell Год назад

👆✍️

@serhatboztepe3723 Год назад

you are super man

@andreasiano5953 10 месяцев назад

One question: Why did you create a media query component? If I am not wrong tailwind css already provides screen sizes.

@jakubfronczyk2496 Год назад

Hey do you know how to mark yellow dot if you scroll by mouse on exact section ?

@SadPandaLoves Год назад

On the landing page, could you resize the brush stroke over the name? So make it fit the size of the last name or make it bigger to include the full name?

@chefsstats4215 Год назад

Pretty sure that the brush size is an image, so you should be able to transform the image yes.

@thenit3vision 6 месяцев назад

Hello, I was wondering how do you figure out the css properties?

@22199610 11 месяцев назад

Anchor tags, hover is not working in landing page? Any motion.div issue? Please guide

@dph6539 Год назад

Hello, greetings. can I use this code for my portfolio? maybe there are some that I want to add for my portfolio needs. thank you.

@yugohehe Год назад

Can you show how to build a simple minting website? I'm just looking for a one page website, with one big illustration, shouldn't work to scroll down or up. Your last guide on this is outdated, and some stuff no longer worked :(

@abzz1290 26 дней назад

Hi, can you share the name of the extension your are using for Flexbox etc?

@tiendao4480 Год назад

Hi EdRoh, Thank you for your video anyone has issue with add src path image of menu, I opened the tab source in chrome but the assets folder had not been loaded ? If you have solution for it please reply me.

@tiendao4480 Год назад

ok here is what I have done to fix it import menu from '../assets/menu-icon.svg'; //Your code

@jesseboham9593 Год назад

It worked thx. I had an idea to import the file since it was a .svg file but i wasn't sure.

@manishagiri5208 6 месяцев назад

thank you so much , it worked @@tiendao4480

@deansmit4540 Год назад

One thing I noticed is you seem to repeat elements like AnchorLinks which seems a bit redundant. I would create an array of strings, map over that array and pass the value to the components

@griffinkirkland9087 Год назад

Dean Smit I'm having some problems with this, how is your solution like, I am unable to get the active class onClick

@hamadkhan3248 10 дней назад

ed roh please reply me the images im downloading and putting in place of your profile image why its not working??

@katherinescott3360 Год назад

I'm having an issue with the pictures. They will not show when I put them in the code like you did its not working for me. However, I can import the image and put it in the code like src={contact}. It worked fine until the project portion where all my project pics need to be placed the way you did it.... Any help would be appreciated. THANKS

@Sam-oz8tw Год назад

You asked for my help in another spot. Unfortunately, I haven't found an elegant way to do this. Mainly because I'm sure there's a library that makes it easy but I haven't found it yet. That said, here's a fix. const Project = ({ title, subtitle, filetype }) *later* return(

@NewVybzBoss Год назад

Great tutorial however, i would like it if you actually did the project while looking at the browser for the changes. Sometimes you would make an entire component without looking at the screen and then import the already created component into your app.js. It seems a little counter intuitive and its hard to follow whats happening when I'm just typing code for a while and then after I'm done the completed component shows in the browser. TDLR: Great tutorial, could do a better job walking through the steps 1 at a time while showing the browser.

@manishagiri5208 6 месяцев назад

I have problem with the dotgroup. Dotgroup is visible for only the #home tag . Can anyone help me with this ? For example, if I change the skills section to home then I have 2 dots visible.

@ultrainstinctcoder6126 8 месяцев назад

Hello Ibhave this problem Failed to load ressource : thé serveur responded with a status of 404 (Not Found)

@eduardorossoninabhaneduard6948 Год назад

Hey guys, can someone help me? my laptop resolution is 1366x768 and the profile image(stay bigger than the screen) and lineargradiant is not at right place in this resolution. But in mobile and 1920x1080 the code works fine

@shacozhang3605 Год назад

How can I get my profile picture cropped the same shape as yours?

@aditya8778 Год назад

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') i am getting this error while using the AnchorLink can anyone help me

@vaibhavjoshi4237 Год назад

How to change the active tab color while scroll? for example I am scrolling to projects but it still shows Home as active tab. TIA

@griffinkirkland9087 Год назад

Vaibhav Joshi oh yeah me too someone's say anchor links are redundant or something

@noahb26 Год назад

Anyone have any advice on why i cant get any of the jpegs to load for the projects? cant get any of them to show up but every other image has been working so far

@christiaandekock1136 Год назад

i have the same issue man - did you end up finding a solution ?

@moontropikal1007 Год назад

@@christiaandekock1136 Found out you have to import your files in botch public>assets and src>assets folder 😉 Let me know if it works for you !

@moontropikal1007 Год назад

Found out you have to import your files in botch public>assets and src>assets folder 😉 Let me know if it works for you !

@christiaandekock1136 Год назад

@@moontropikal1007 much appreciated man! I'll have a look a bit later and see if i can figure it out. Legend!

@griffinkirkland9087 Год назад

Christiaan de Kock did it workout for you, I couldn't load the projects images on mobile

@jimhalpert878 Год назад

What color theme you use in this tutorial?

@manekedark 10 месяцев назад

one monokai

@kylebaker8548 Год назад

My tailwind like broke midway through this. anny suggestions?

@mihai-alexandrubujor9826 Год назад

I have a small problem, I tried to replace an image with one of my own and it doesn't work. What could be the cause of that?

@christiaandekock1136 Год назад

had the same issue - try manually importing your images for example at the top use import profile-img from "../assets/profile-img.png" and then just use {profile-img} as your src when referencing your image src. So like this src={profile-img}

@moontropikal1007 Год назад

Found out you have to import your files in botch public>assets and src>assets folder 😉 Let me know if it works for you !

@Sam-oz8tw Год назад

@@christiaandekock1136Ed Roh did this intentionally for quick "swapping out," and understanding of your code for anyone who looks - so another easy way around this is to just rename all of the images back to "project-1.jpeg" Which is not hard to do.....

@christiaandekock1136 Год назад

@@Sam-oz8tw cool! Appreciate the response

@sunilswain5103 Год назад

I need react full course can you help me.??

@whysumancode 10 месяцев назад

Should i start ? Please somone suggest who have completed this~

@lordhakim9534 Год назад

is it possible u build bet365 clone in youtube?

@bryandelacruz9066 Год назад

Ive got an error when i installed the react-hook-form :(

@luan3762 11 месяцев назад

what error

@bryandelacruz9066 11 месяцев назад

@@luan3762 I think its not compatible with cra so I switch with vite

@unicoxr5tj417 Год назад

wow

@mayureshjuvekar2306 Год назад

when i get pull the site css is collab

@TheHockeyplaya14075 8 месяцев назад

Hello has anyone encountered an issue where the dotgroup doesn't make a circle for the selected page? Currently is it showing a line type shape next to it, even though all the styling and js is the same

@manishagiri5208 6 месяцев назад

I have a similar problem, my dotgroup is only visible for #home tag. Any idea on how to solve this?