In this video, you will learn how to build React portfolio website from scratch with advanced animations.
✏️ Slobodan developed this course:
🔗 Code and assets:
🔗 Map library
🔗 EmailJS library:
🔗 Final version:
Learn:
✔️ How to draw SVG animation using GSAP and React
✔️ How to animate letters on hover using Animate.css and React
✔️ How to add page loading animation using React-Loaders
✔️ How to add Pacman animation in React
✔️ How to create custom 3D CSS animations
✔️ How to implement font icons in React
✔️ How to create and implement contact form in React using EmailJS
✔️ How to add maps to your website in React using Leafleat.js
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:43) Create React app with npx
⌨️ (0:01:01) Instaling libraries
⌨️ (0:03:56) Define global styles
⌨️ (0:06:56) Create routes
⌨️ (0:09:01) Building left sidebar
⌨️ (0:20:31) Building site layout
⌨️ (0:23:01) Building Home page
⌨️ (0:40:51) Draw SVG Logo animation
⌨️ (0:48:29) Build About page
⌨️ (1:03:56) Build page loader
⌨️ (1:06:11) Build Contact page
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Beau thank you for sharing 🙏
And guys if you want more tutorials like this, feel free to check my channel https://youtube.com/c/SlobodanGajic
Thanks for this Amazing tutorial I will subscribe and wait for the other parts of the project.
@ben muiruri Most likely next week on a live stream
@Code with Sloba I will def be looking out for it
Can’t wait for the second part
That’s awesome. When will 2nd part be available?
second part please , this is amazing thank you so much fcc for valuable content.
Yeah I received a ton of requests. So second part is coming. Sub on my channel so you don’t miss it 😉
Thank you 🙏
Hey can you help me with this?
2nd part is live https://youtu.be/I2TNlHVJ9KQ
Hey Slobodan, thank you for sharing this amazing tutorial content. And yes, we need the 2nd/3rd/4th part for this project. Once again thanks a lot!!!!
Yeah I received a ton of requests. So second part is coming. Sub on my channel so you don’t miss it 😉
Thank you 🙏
😄
@Code with Sloba
Sir how to create assests i stucked thier please help
@prem rathod You can use Ilustrator for it or you can hire a designer for it
That is one amazing-looking portfolio. Once again, Slobodan is the hero we need.
Haha, thank you so much!
Please sir, I’m a rust lover and have learnt the basic on this channel and wanted to improve my skills, if you don’t mind creating Rust application project on this channel that would help a lot sir thanks.
The boss is here 👏🏻
thank you Quincy for starting this wonderful medium !! 🙂
Muito bom!
Slobodan, such a simple and brilliant video for portfolio website. Thank you so much 🙏. Yes look forward to next part.
Brother can you help me with this?
Slobodan, thank you, a lot for sharing this amazing tutorial content. And yes, we need the 2nd/3rd/4th and beyond parts for this project. Once again thanks a lot my friend!
I’m learning so much from this tutorial! Thank you for sharing. I have a question about 23 minutes in about the Route to the Home component. I can’t get the sidebar to render when I add this route with index instead of a path.
I am also facing the same issue @Sherrisa Classon… Can u help me on this
@SINDHU MATHI Are your routes to your Home, About and Contact components inside the route to the Layout component?
@Sherrisa Classon I am using like this
function App()
{
return (
<>
)
}
@Sherrisa Classon yes I am using like this, still I am not getting can u help me on this pls
@SINDHU MATHI I also needed to remove the word “return” from the useEffect() function in my Home component.
Thank you for this amazing tutorial… and YES WE NEED ALL THE PARTS OF IT… Love your work
Thank you! 2nd part is coming! It will be on my channel.
@Code with Sloba Have subscribed and waiting for it 🙂
@Matrix Too Good Thank you 😀
Hey Slobodan, thank you for sharing this amazing tutorial content. And yes, we need the 2nd/3rd/4th part for this project. Once again thanks a lot!!!!
Second part is coming! Watch for it on my channel. Thank you
A very good tutorial. You need to have some background on css and scss, but it gives a good overview on how it’s done.
And, btw, I couldn’t bear to make those arrays by hand, so I found some js code to make it for me. In case anyone shares the same amount of patience as I do, here it is:
const title = “Contact me”
const titleArray = Array.from({length: title.length}, (_, i) => title[i])
Thanks!
Strings are iterable. Just do this: ‘Contact me’.split(”);
Result: [‘C’, ‘o’, ‘n’, ‘t’, ‘a’, ‘c’, ‘t’, ‘ ‘, ‘m’, ‘e’]
@grumd oh thx, that’s useful
Hey! Great tutorial.
I wanted to find out more on how you managed to get that SVG Data you used for the outline for the logo. I want to do something similar, but I am struggling without Adobe Illustrator
Hey did you manage to do it?
For anyone who needs help setting up the emailJS portion:
The format for 1:16:13 should be as follows: sendForm(‘YOUR_SERVICE_ID’, ‘YOUR_TEMPLATE_ID’, form.current, ‘YOUR_PUBLIC_KEY’) After creating an account, can find your service ID in the email services tab, your template ID in the email templates tab, and your public key within the Account tab under API Keys.
Its the public one, thanks again!
thanks so much ! may God bless u !
You solved my problem. Thank you
I have a problem. Don’t work in my project((
thank you very much amigo
Thank you for the tutorial. I would love to see a 2nd version.
For those who face problem in useEffect, setTimeout 40:06
remove return from setTimeout and add return in setLetterClass.
I hope this will solve your problem
.
.
.
if this don’t work, try this
remove the return from setLetterClass also.
@Tiny Fish THX BRO!
To solve the problem add: () => between return and setTimeout
Thanks for this!
What causes this problem?
@Tiny Fish Thank you so much!!! You really helped me resolve the same problem 🙂
Thank you for the awesome tutorial. A small request, did you create those svgs someplace online? If yes, please share it.
Using illustrator
Is anyone else having problems with drawing the S logo? Even when I copy over Slobodans code it’s only fading in.
Thank you! For anyone who needs a list of libraries installed, commands are:
npm i @emailjs/browser
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
npm i animate.css
npm i gsap-trial
npm i loaders.css
npm i react-leaflet
npm i react-loaders
npm i react-router-dom
npm i sass
Thank you!
Amazing tutorial, Thank you very much FCC and Slobodan. P/S: 1,5h but actually took me the whole day to complete. But very happy with what i learnt. Cheers!
Email JS has changed since this video uploaded. I needed to create a new template, and use the template ID, just going to the settings of a non created template will generate a new templateID over and over again. Also they have a service ID now which you need to connect your email service to the correct one and input the ID.
Amazing video though! Even with the errors, Draw SVG conditionally works, EmailJS, and a few others but I managed to resolve most of them with some research and the comments. I think the speed you went at was fine. Definitely a faster paced video but it should be for people who have experience with react.