In this video, you will learn how to build React portfolio website from scratch with advanced animations.
✏️ Slobodan developed this course: https://www.youtube.com/channel/UCBu5ulO4d-d47lAVybpRTkw
🔗 Code and assets: https://github.com/bobangajicsm/react-portfolio-website
🔗 Map library https://react-leaflet.js.org/
🔗 EmailJS library: https://www.emailjs.com/docs/examples/reactjs/
🔗 Final version: https://bobangajicsm.github.io/portfolio
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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
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
.tags{
color: whitesmoke;
opacity: 0.6;
position: absolute;
bottom:0;
left:120px;
font-size: 20px;
font-family: 'La Belle Aurore';
}
i used above code for changing the font of tags but its not working plz suggest trobleshoot
Hi Slobodan thank you for sharing. Personally I am having a problem creating the react app. My terminal keeps telling me that npx is invalid command
anyones outlineLogoref not work?
I have a doubt about the SVG logo animation. In my code, I cannot display the DrawSVG animation by following the code in this tutorial. But when I replace drawSVG: 0 by drawSVG: 1, the code suddenly works. I wonder why this happen?
Hi! Can someone help me please find a tutorial on a Rotating draggable Sphere with skills on it🙏 ?
If you run into an error trying to install the packages, try this first: npm install -g npm
When I add the Home route the nav bar disappears. Does anyone know a fix?
It seems like the icons are not there anymore 🙂 @13:48
is it responsive?
The narrator is just reading the code out loud without giving much context. I was hoping for explanations on how to do animations. I'm struggling to even finish the course because I found it so misleading in what it promises.
Regarding /Logo/index.js I've spent some time but for me drawSVG: 0, didn't work to draw the outline, I've checked the doc and I used drawSVG: "0 100" then it works. Cheers.
@48:00 we can see when we load the page that the small </h1> next to "Web developer" is going to opacity 1 then go back to 0.6. Someone know how to keep it at 0.6?
How did you make 'S' logo? Help me where to create logo of my name.
1:05:50 if u see this problem with the rotating cube as well the solution is to decrease all rotateY decreas by 0.1 or increase just dnt let it set at 90 180 270 etc… because it will break i couldn't know where the problem is becasue i tried the code on codepen with just colored faces of cube and it worked correctly so problem maybe scss react or even font awesome idk
Bravo Slobodane!
drawSVG notworking when reload page…
12:48
I'm unable to access code and assets files… Can anyone help me???
react loader Pacman is not loading
With respect for the author and freecodecamp, this is the worst portfolio project its 0% responsive and 0% use for flexbox
who still do something like this ??
it's good to learn code but not to build a portfolio in this way
Can someone help why i run the repository the outcome is white blank
Any one has solution for this !!!
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
4 │ @import '~loaders.css/src/animations/pacman.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The color on the first child of the sidebar is still active. How to solve this problem?
When following along the tutorial I get this error:
srcApp.js
Line 13:37: 'About' is not defined react/jsx-no-undef
I even have the source code in another window for comparisons and it still will not work when they are exactly identical. Does anyone have a solution?
8:59 My hello didn't print.Any idea why?
Beautiful work！ Let me copy that.:)
i have a problem with the animation of the logo in the home component, don't work. Help me please!
I finished this, haha
If you are having trouble getting the name, email address, and message to show up when testing EmailJS, make sure that your template email variables match the form variable names in your Contact.js file
how do i copy the entire assests folder to add to mine in one go?
is it responsive?
Problem in import loader in scss can anyone help ?
anybody else having an issue keeping their page responsive?
Does anyone know how I could potentially find a 'B' logo similar to the 'S' logo used in the sidebar and homepage?
How have people made logos for their own name?
Why the outlining animation works fine at first and do not work after that!! PLEASE HELP!! WTH
Live deployment please???
Can You guys help me pls I give you my files to download my logo isnt showing so far I watched til' 11:24
Animated website but not responsive 🤔
Forked and npm run start locally ended up with a blank page could anyone tell me why thank you