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.
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.
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.
nice video! Took me around 4 days to actually finish it since I kept getting curious and looking for info about the libraries and experimenting with the site. For everyone that wants to do their own logo, I suggest using canva, just put two layers with the letter, I think the font he used for his logo is Century Gothic Paneuropean Bold, but I don't suggest it for non-slim letters such as O, you can use Eastman Condensed as an alternative. For SVGs you can use krita on the logo you created on canvas, then using the contiguous selection tool with a grow of -5px and remove the colors, then put a filter that only lets alpha colors to turn it full black and then convert the png file into a SVG file via an online converter. If the resulting SVG has two paths you can just combine them btw. Hope this helps!
how do you install the dependencies without using --legacy-peer-deps npm i react-leaflet is not working same with the others unless I add --legacy-peer-deps thanks!
@@manash2 yes it did, had to follow the instructions someone else left behind in the other comments and use a const. GSAP trial won't work on deployment though so I removed it after everything
I was using SMTPjs and Elasticemail, but SMTPjs was inoperating due to the Chrome CORS rules and whatsover. Because of that I passed all the afternoon looking fora similar service until I happened to emailJS. Truthfully speaking, is much less burdensome to work with and you can change your messaged e-mail.
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!
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!
great video with detailed explanations! am waiting for the further parts! some corrections are necessasry for the useEffect hook. I used it by following way: useEffect(() => { const idTimeOut = setTimeout(() => { setLetterClass('text-animate-hover') }, 3000) return () => clearTimeout(idTimeOut); }, [])
For anyone watching, you don't need to create an array with all the letters in, that will be painfully slow for longer sentences. You can just do "your string".split("") and it will create the array of characters for you
one of the best portfolio website I have seen, want to make one like this. Please make the 2nd part as soon as possible and include sections like projects, blogs, education and work history, Looking forward😍😍❤❤
Hey Vaibhav! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!
When creating the Home page at 23:30, make sure to wrap the with the Route path of Layout. I remember Layout originally not wrapping anything so it was set as instead of
Hello I’m experiencing an issue when adding the home route when I run npm start the webpack complied successfully but I can see page is empty and showing on the page uncaught runtime error. How can I fix this?
For anyone having trouble just getting anything to appear on the screen during like the first 10 minutes of the tutorial such as Hello and Sidebar, the issue is that on src/index.js (one below App.js and stuff) one of the imports is importing the wrong thing. import ReactDOM from 'react-dom/client' should be import ReactDOM from 'react-dom'
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.
I keep on getting a message not sent. I have created a new template and used the template id, so I was wondering if you experienced a similar problem and how you solved it?
Hi, If you build this protfolio you won't be able to deploy it because in this project gsap's trial version is used ,and they won't allow it to deploy the trial gsap version and then you would have to purchase the gsap club membership. I faced this issue, hence letting other's know.
1:16:13 - I have seen a lot of comments discussing a persistent issue with emailjs SendForm not working. For me, the solution was changing the 'gmail' parameter in sendForm() to 'default_service'.
Quick Tip: Instead of making an array of words like ['D', 'e', 'v', 'e', 'l', 'o', 'p', 'e', 'r'] which is time consuming you could use : ``` const word = "Web Developer".split("") ```
I feel , it has to be an array for the letters to have the effects , as though each letter would have its own effect. Like this the bounceIn on effects “web” and “Developer”
If anyone get a "Warning: useEffect must not return anything besides a function, which is used for clean-up." error using the useEffect hook when setting up the final hover effect in the Homepage section, try removing the "return" from the useEffect. So, instead of: useEffect(() => { return setTimeout(() => { setLetterClass('text-animate-hover') }, 4000) }, []) We remove return, getting this: useEffect(() => { setTimeout(() => { setLetterClass('text-animate-hover') }, 4000) }, []) And the error magically disappears and now everything is rendered normally as it should be.
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
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
To fix the rotating cube bug where two of the sides disappear after the first rotation, you need to adjust your keyframes. Adding rotateX(0deg) and rotateY(0deg) to 16% worked for me. Here's the full code block: @keyframes spincube { from, to { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); } 33% { transform: rotateY(-90deg) rotateZ(90deg); } 50% { transform: rotateY(-180deg) rotateZ(90deg); } 66% { transform: rotateY(-270deg) rotateX(90deg); } 83% { transform: rotateX(90deg); } }
anyone else has problem with the cube? it's missing 2 sides, but they appear sometimes lol I don't know how to fix it! :D Thank you Slobodan for the tutorial! :)
Hello@@killerpopholly4054 , you can try this In the about's index.scss file change the .face5 transform rotateY(-90deg) to rotateY (270deg) and leave the rotateZ as well as translateZ as it is... this was a solution sent to me, it helps but yet, it doesn't solve the problem for all the media queries, so make sure you play as well with your @keyframes spincube, sorry I'm still figuring it out!! Keep it on!🎻
@@horux1957 hey thanks for your answer ! But yesterday I made it, and it works all time. With this configuration : from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(720deg); } 16% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); } 33% { transform: rotateY(-90deg) rotateZ(90deg); } 50% { transform: rotateY(-180deg) rotateZ(90deg); } 66% { transform: rotateY(-270deg) rotateX(90deg); } 83% { transform: rotateX(90deg); }
Amazing video and a very impressive website! However, I really wish this was a one page portfolio site to show off who you are as a developer and a person!
I need some help, when I load the homepage, everything is fine, but as soon as I click on About, the sidebar disappears and the about content doesn't display - when I inspect the page, it empties the root div. I'm reviewing the whole code on github, but I can't find where I did wrong... EDIT: just remove the "return" in the useEffect activating the animations.
@@CodewithSloba yes but which tools? I can make the 3D one with Window/Apparence/Transform but the other one where you can see every trace how? Just know how the effets you use are called and the rest its online but if you don't know what to search is complicated.
My SVG wouldn't draw properly on the first load... I would have to change something and then save for it to draw. I ended up fixing this by using another useRef: const tl = useRef(gsap.timeline()); And then replacing gsap.timeline() in my useEffect with tl.current
@@jakelauterstein1378 I have the same problem I can´t draw it, but I tried to fix it using this and didn´t work. Maybe I wrote sth wrong, could you please paste here or send the snippet code?
@@santiagopereira4691 I ended up abandoning working on this because I was unable to get the animation up to full functionality. Going to try to learn gsap and come back to this later. I also couldn't figure out how to make this site to be responsive so I'm working on this tutorial (th-cam.com/video/G-Cr00UYokU/w-d-xo.html) now which has been a little more beginner friendly. Still really liked slobodan's video... just need to learn more and come back to it later.
I like the look of it but there is very little explanation about decisions - one could right away go to the repo just as well and try to understand the code.
I want to make a portfolio page with the same cube but add links on eaech side of the cube that leads to each project. Any ideas on how to execute this?
Hey man love this project thank you for posting. Can you tell me how you made you S logo and name picture? I'm trying to find some online but they all come with a background
I am having an issue with changing the "index.css" file @20:30. I have changed the "font-family" attribute to "font", but my text on the hover [SideBar] is not changing to the new font declared. Any advice on how to resolve this error? I have tried changing the font within the &::after within each anchor but the text gets pushed down.
Knowing that the drawing SVG animation costs $100 before starting would have been great info. Don't really have $100 lying around and only found out when I tried to deploy the site....
@@johnnyp2992 The logo's design was fine, was just annoyed I got hit with the paywall right when I tried to deploy it. Had to remove the library from my code which sucked because I had used it for other things as well, so all of it needed to be redone. Ended up adding a fade out for the svg and a fade in for the png, then a float animation after it fades in, so it worked out at the end of the day. I just feel it's something pretty important so idk why he never mentioned it, ppl will be deploying these sites so they will run into the same $100 pay wall I ran into. It was that and a few other annoyances (the cube being completely broken, putting the timeout in the cleanup function of the useEffect, barely explaining any of the EmailJS stuff) that triggered my comment, the $100 paywall was just the straw that broke the camels back.
@@greentaco3402 I feel you with that, I just spent about 4-5 hours customizing this site and adjusting it, only for me to build it and deploy on my server and see a $100 pay option to use the SVG plugin in order to display my site, may I ask where in the files did you take out the SVP plugin? I am going to do the same because I worked too long on this site to give up lol
Hi everyone! Sorry real beginner here, but I wanted to follow along with this tutorial. However, I don't immediately recognize the software he uses. Would anyone be so kind to explain me what program(s) he is using? Example: 0:50
You say links to the map api and instructions are in the descriptions but the doc in the reactleaflet map api has changed because theres no import in nowhere of the Setup or Installation sections.
anybody run into the issue of having only 4 sides of the animated cube appear? Only when I adjust my window size do all 6 sides appear again but only for one full animation.
@@jonathanperry7530 playing around with some of the widths made it more consistent but it still happens, I’ll comment again once I find a permanent solution
Thanks Alot Slobodan This is an amazing project Although I had a lot of errors while working following the tutorial but I got them later on Once again, I can't wait for the remaining part
Could someone help me out in resolving a useState() issue? Currently, I need to hard reload each page in order to get the assets to load in. I know it should be loading in automatically when I click between routes. Is there an extra step to resolving this outside of the video? or something I might have missed along the way? Thank you!
Amazing tutorial! In 39:10 I have a problem with Sass in the part where the title is animated. I get an error about a deprecated operation in the current version I'm using, and it doesn't display the page. Could someone tell me how I could solve it? Thank you so much
i dont know how and why this happen but we can use setTimeout(() => {setLetterClass('text-animate-hover')}, 4000) to replace useEffect that make the same results
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.
This is awesome thanks! And for the initialisation, do you there use the private or public key?
Its the public one, thanks again!
thanks so much ! may God bless u !
I have a problem. Don't work in my project((
thank you very much amigo
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 !! :)
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!!!!
😄
@@CodewithSloba
Sir how to create assests i stucked thier please help
@@premrathod335 You can use Ilustrator for it or you can hire a designer for it
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
@@CodewithSloba can't wait for part two. Hurry haha.
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.
hi i had the same problem. Why does it happen?
thanks
Thankyou Preciso
I have the same issue, why happen this behavior?
hi i had same problem .
I solve this problem like this...
useEffect(() => {
let timeoutId = setTimeout(() => {
setletterClass('text-animate-hover')
}, 4000)
return () => {
clearTimeout(timeoutId)
}
}, [])
goodluck!
nice video! Took me around 4 days to actually finish it since I kept getting curious and looking for info about the libraries and experimenting with the site.
For everyone that wants to do their own logo, I suggest using canva, just put two layers with the letter, I think the font he used for his logo is Century Gothic Paneuropean Bold, but I don't suggest it for non-slim letters such as O, you can use Eastman Condensed as an alternative.
For SVGs you can use krita on the logo you created on canvas, then using the contiguous selection tool with a grow of -5px and remove the colors, then put a filter that only lets alpha colors to turn it full black and then convert the png file into a SVG file via an online converter. If the resulting SVG has two paths you can just combine them btw. Hope this helps!
how do you install the dependencies without using --legacy-peer-deps npm i react-leaflet is not working same with the others unless I add --legacy-peer-deps
thanks!
@@cheaptalksco I think I didn't have to use that at all, just followed the instruction on the video and everything worked perfectly
@@prasaedonium is your gsap working fine?
@@manash2 yes it did, had to follow the instructions someone else left behind in the other comments and use a const. GSAP trial won't work on deployment though so I removed it after everything
@@prasaedonium okay thanks got it!
Well, I am doing my portfolio in React at the moment, I was really thankful for learning about emailJS. Thanks a lot
You’re welcome!
I was using SMTPjs and Elasticemail, but SMTPjs was inoperating due to the Chrome CORS rules and whatsover. Because of that I passed all the afternoon looking fora similar service until I happened to emailJS. Truthfully speaking, is much less burdensome to work with and you can change your messaged e-mail.
@@yurisoares2596 absolutely
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!
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
on my way learning to code with React and come across this gold. Thanks a lot is not enough, many many thanks. Please upload more..
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Really glad I read these comments before I got too far into this tutorial
Why?
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']
@@grumd0 oh thx, that's useful
great video with detailed explanations! am waiting for the further parts! some corrections are necessasry for the useEffect hook. I used it by following way: useEffect(() => {
const idTimeOut = setTimeout(() => {
setLetterClass('text-animate-hover')
}, 3000)
return () => clearTimeout(idTimeOut);
}, [])
thanku it worked properly
Thanks a lot for this correction!! Now it;'s working ;)
good work, what was missing before?
You can also just remove the "return" keyword and it will work, it at least did for me.
nice it worked wonders.
At 34:52 in Single quotes aren't used around `${letterClass} _${i + idx}` those are backticks `
For anyone watching, you don't need to create an array with all the letters in, that will be painfully slow for longer sentences. You can just do "your string".split("") and it will create the array of characters for you
Nice tip. Thanks.
awesome worked great
You can create equal to:
const str = 'srtring'
const strArray = [...str]
with spread operator
@@joseluisnm8499 ooo I didn't think of that, I like it 😄
yeah, i'm coming to coments try to se if anyone already said it tanks
We need as many parts as you can do! Thanks for everything!
@@CodewithSloba Subscribed! ;) Thank you!
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
second part please , this is amazing thank you so much fcc for valuable content.
Hey can you help me with this?
2nd part is live th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Thank you for sharing this amazing tutorial. And yes, we need the second part for this project.
one of the best portfolio website I have seen, want to make one like this.
Please make the 2nd part as soon as possible and include sections like projects, blogs, education and work history,
Looking forward😍😍❤❤
Thank you! 2nd part is coming! It will be on my channel.
Hey Vaibhav! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
When creating the Home page at 23:30, make sure to wrap the with the Route path of Layout. I remember Layout originally not wrapping anything so it was set as
instead of
I was stuck on that for a while but luckily sspotted it this morning
Hello I’m experiencing an issue when adding the home route when I run npm start the webpack complied successfully but I can see page is empty and showing on the page uncaught runtime error. How can I fix this?
It might help if you paste your app code in chat GPT and ask what's wrong. IT helped me alot@@TrisNowel
@@GoziePO Thanks for taking your time to reply. Let me try it.
I was looking for why the nav bar was not there for like 15 minutes thank you.
Amazing! Thanks for the everything! Please, second part! 😅😅😅
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.
@@CodewithSloba Have subscribed and waiting for it :)
@@matrixtoogood5601 Thank you :D
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Excellent job! Thank you so much, Slobodan 🤝
you're welcome
For anyone having trouble just getting anything to appear on the screen during like the first 10 minutes of the tutorial such as Hello and Sidebar, the issue is that on src/index.js (one below App.js and stuff) one of the imports is importing the wrong thing.
import ReactDOM from 'react-dom/client' should be import ReactDOM from 'react-dom'
what's the right thing?
thanks man! i was about to give up thinking this thing is not working😂
Thanks Slobodan for this content, I'll be waiting for the next sequel of this part.
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
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!
It's taken me months...
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.
I keep on getting a message not sent. I have created a new template and used the template id, so I was wondering if you experienced a similar problem and how you solved it?
hi, did you manage to capture the sender's name, email and subject? i only manage to capture the message
@@randyzhang2052 hey did your problem solve out?
cause I'm getting the same error
please help me out
You are really amazing, explain detail and smooth animation. 🎉
Thank you th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
I Love Our Portfolio ✌☺
Really Helpful
Thank you
This turtorial is much better that the last before
Yeah it takes time to improve
its a nice website but this tutorial is so rushed.. had to pause so many times and a little more explanation would be nice.
That’s the beauty of being able to pause.
@@Lordyung89 ultimate optimisim 🫡
Exactly! It’s too fast no much explanation!
Try to be as explanatory as possible. That is the goal of helping . Great video by the way
yes because you can't *actually* learn react in 1 hour@@prodbykelvin7508
Wow wow wow!!! Thanks for everything ❤️
It’s my pleasure!
Hi, If you build this protfolio you won't be able to deploy it because in this project gsap's trial version is used ,and they won't allow it to deploy the trial gsap version and then you would have to purchase the gsap club membership.
I faced this issue, hence letting other's know.
Thanks for letting us know! Is there any alternative we can do to deploy this portfolio
I’m using free version on my website which I deployed. It’s just not that trial package
@@CodewithSloba how to use that please specify
This comment should be on top.
@@CodewithSloba whats the package you used then..? Why would you say this and not explain what it was
Beautiful work！ Let me copy that.:)
1:16:13 - I have seen a lot of comments discussing a persistent issue with emailjs SendForm not working. For me, the solution was changing the 'gmail' parameter in sendForm() to 'default_service'.
thanks man, it worked for me...
this fixed my issue!
I spent months trying to build this website and here it is
Do you get error of enotempty
It's uploaded
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
3nd part th-cam.com/video/YnHsgQkY6Z4/w-d-xo.html
Yes we want 2nd part tutorial
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Hvala Slobodane ! Thank you so much
Nema na cemu! You’re welcome
Quick Tip: Instead of making an array of words like ['D', 'e', 'v', 'e', 'l', 'o', 'p', 'e', 'r'] which is time consuming you could use :
```
const word = "Web Developer".split("")
```
bravo
I feel , it has to be an array for the letters to have the effects , as though each letter would have its own effect. Like this the bounceIn on effects “web” and “Developer”
Thanks a lot :) . Please make part 2 as soon as possible .
It's uploaded
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
3nd part th-cam.com/video/YnHsgQkY6Z4/w-d-xo.html
Just a heads up that if you want to deploy this with the GreenSock animations you need to buy a membership.
Thank you very much !! Need the second part also
Yes We need Second Part Please , Awesome Video make it responsive for mobile also Please @Sloba
@@CodewithSloba Hare Krishna Brother🙏🙏
More Power to you.
Hare Krishna 🙏🙏
2nd part is live th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Thank you very much Slo, greetings from Mexico City
Please second part 😁
If anyone get a "Warning: useEffect must not return anything besides a function, which is used for clean-up." error using the useEffect hook when setting up the final hover effect in the Homepage section, try removing the "return" from the useEffect.
So, instead of:
useEffect(() => {
return setTimeout(() => {
setLetterClass('text-animate-hover')
}, 4000)
}, [])
We remove return, getting this:
useEffect(() => {
setTimeout(() => {
setLetterClass('text-animate-hover')
}, 4000)
}, [])
And the error magically disappears and now everything is rendered normally as it should be.
You sir are a time saver god. I would have beat my face on this forever figuring out why the useEffect hook up made the page go blank.
Really really really thanks 😍😍😍😍😍😍 this is a best project of my life I learn so my thing and now I have a good portfolio 🎉
Thank you for amazing content , please make a video on deploying project on server .!
Can't wait to see the part 2 of this video! thanks a lot Sloba!!
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Need the next part already... 👍
2nd part is live th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Great tutorial and voice!
Hahah thank you 🙏 Had no-one to tell me that, especially with my mediocre english.
Hi Sloba and freecodechamp, I am getting oops trial version of DrawSVGPlugin deployed. Can you tell what to do here to remove this?
Stunning tutorial!!!!
Greetings from Brasil.
Thank you! Wow greetings for Brasil!
Very important video !
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?
Yes We want 2nd part of this
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
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
Please ow do I fix cube problem, it doesn’t show on my web page
Nice video, waiting for part 2
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
To fix the rotating cube bug where two of the sides disappear after the first rotation, you need to adjust your keyframes. Adding rotateX(0deg) and rotateY(0deg) to 16% worked for me. Here's the full code block:
@keyframes spincube {
from,
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
}
This works for me, thanks.
Thank you.
HOOOOO MAN you're a genius!!!! I was searching and trying so hard :D
this issues has been fixed and repo has been updated
worked for me, thanks alot
anyone else has problem with the cube? it's missing 2 sides, but they appear sometimes lol I don't know how to fix it! :D
Thank you Slobodan for the tutorial! :)
stackoverflow.com/questions/19779605/3d-css-transform-translatez-causes-elements-to-disappear-in-chrome
Hello Ivett, hope everything is good for you! hey, did you find the solution to this issue? I'm having the same problem, thanks! have a great one! :)
@@horux1957 Same thing for me, so if you have any solution, thanks to y'all :)
Hello@@killerpopholly4054 , you can try this In the about's index.scss file change the .face5 transform rotateY(-90deg) to rotateY (270deg) and leave the rotateZ as well as translateZ as it is... this was a solution sent to me, it helps but yet, it doesn't solve the problem for all the media queries, so make sure you play as well with your @keyframes spincube, sorry I'm still figuring it out!! Keep it on!🎻
@@horux1957 hey thanks for your answer ! But yesterday I made it, and it works all time.
With this configuration :
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(720deg);
}
16% {
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
Amazing video and a very impressive website! However, I really wish this was a one page portfolio site to show off who you are as a developer and a person!
The drawing animation 47:13 it's extremely slow is anyone else facing same issue ?
I am facing the same issue. Any suggestion on what could be the solution?
@@bernardyegon4659 use React 17
Will be watching
Awesome
Never get the linkedIn icon to work. doesn't show up when checking with the tooling either. opted for the suitcase for lack of a better solution
Hvala Slobo kralju!
Hahah hvala tebi
I need some help, when I load the homepage, everything is fine, but as soon as I click on About, the sidebar disappears and the about content doesn't display - when I inspect the page, it empties the root div. I'm reviewing the whole code on github, but I can't find where I did wrong...
EDIT: just remove the "return" in the useEffect activating the animations.
Its an issue with useState and useEffect issue. Although I didnt know the fix but I removed the method hook and it works fine now :)
Another bomb content!! Thank you FCC!
Thanks
Hey Slobodan, when I add useEffect hook in the Home index.js file, it breaks the whole website. How can I solve this issue?
Nice video. After this video I realized how not much I know about web development even I finished a boot camp: (
What bootcamp did you goto?
Thank you for the awesome tutorial. A small request, did you create those svgs someplace online? If yes, please share it.
Using illustrator
@@CodewithSloba yes but which tools? I can make the 3D one with Window/Apparence/Transform but the other one where you can see every trace how? Just know how the effets you use are called and the rest its online but if you don't know what to search is complicated.
Thank you for the tutorial. I would love to see a 2nd version.
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Is anyone else having problems with drawing the S logo? Even when I copy over Slobodans code it's only fading in.
My SVG wouldn't draw properly on the first load... I would have to change something and then save for it to draw.
I ended up fixing this by using another useRef: const tl = useRef(gsap.timeline());
And then replacing gsap.timeline() in my useEffect with tl.current
@@Dillonharless nice thanks for that!
@@jakelauterstein1378 I have the same problem I can´t draw it, but I tried to fix it using this and didn´t work. Maybe I wrote sth wrong, could you please paste here or send the snippet code?
@@santiagopereira4691 I ended up abandoning working on this because I was unable to get the animation up to full functionality. Going to try to learn gsap and come back to this later. I also couldn't figure out how to make this site to be responsive so I'm working on this tutorial (th-cam.com/video/G-Cr00UYokU/w-d-xo.html) now which has been a little more beginner friendly. Still really liked slobodan's video... just need to learn more and come back to it later.
@@santiagopereira4691 const didAnimate = useRef(false)
useEffect(() => {
if (didAnimate.current) return
didAnimate.current = true
try this
Thank you for this tutorial, share next part please ,
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Thanks, watched ;)
Awesome 😎
Amazing video. This is fire 🔥🔥🔥
I like the look of it but there is very little explanation about decisions - one could right away go to the repo just as well and try to understand the code.
Thank you for feedback
Always a step ahead...👍
Thank you 🙏
I want to make a portfolio page with the same cube but add links on eaech side of the cube that leads to each project. Any ideas on how to execute this?
Very helpful, and surprisingly therapeutic
Watch new parts
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
3nd part th-cam.com/video/YnHsgQkY6Z4/w-d-xo.html
Hey man love this project thank you for posting. Can you tell me how you made you S logo and name picture? I'm trying to find some online but they all come with a background
I found that Adobe Express works pretty well. On a free trial you can create simple logos and export a png file with a transparent background
I got it from designer
Thank you i learned a lot with this tutorial..
I am having an issue with changing the "index.css" file @20:30.
I have changed the "font-family" attribute to "font", but my text on the hover [SideBar] is not changing to the new font declared.
Any advice on how to resolve this error?
I have tried changing the font within the &::after within each anchor but the text gets pushed down.
I fixed the issue!
For me:
All I did was take the sans-serif out of single quotes.
@@thundercatsnumba1 Had the same issue, thanks for the solution!
I tried and failed to create this website 7 months ago this is just great thanks FCC
Thank you
Knowing that the drawing SVG animation costs $100 before starting would have been great info. Don't really have $100 lying around and only found out when I tried to deploy the site....
I used Gravit design. Free tool similar to illustrator that let's me export as .png or svg
@@johnnyp2992 The logo's design was fine, was just annoyed I got hit with the paywall right when I tried to deploy it. Had to remove the library from my code which sucked because I had used it for other things as well, so all of it needed to be redone. Ended up adding a fade out for the svg and a fade in for the png, then a float animation after it fades in, so it worked out at the end of the day. I just feel it's something pretty important so idk why he never mentioned it, ppl will be deploying these sites so they will run into the same $100 pay wall I ran into. It was that and a few other annoyances (the cube being completely broken, putting the timeout in the cleanup function of the useEffect, barely explaining any of the EmailJS stuff) that triggered my comment, the $100 paywall was just the straw that broke the camels back.
@@greentaco3402 I feel you with that, I just spent about 4-5 hours customizing this site and adjusting it, only for me to build it and deploy on my server and see a $100 pay option to use the SVG plugin in order to display my site, may I ask where in the files did you take out the SVP plugin? I am going to do the same because I worked too long on this site to give up lol
I don't know how I can thank you more.
thank you for this great tutorial❤❤
How did you created the S letter? Can I use Figma for it? Like, to create a I for Igor
Did you resolve it?
He did it with Adobe Illustrator
May God bless you brother
thnks
It would've been really amazing if it had projects section
Second part is coming. Sub on my channel so you don’t miss it 😉
Thank you 🙏
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
Thank for your sharing. It's great instruction to build portfolio. Thanks again.
It's uploaded
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
3nd part th-cam.com/video/YnHsgQkY6Z4/w-d-xo.html
I'm a total newb - where did you write all those installations at the beginning? Was that a regular code editor?
Thanks
in the terminal and path as your project directory
You just open the terminal in the VS code once you open the project
did you manage to follow the course?
@@brenoverissimo3846
Unfortunately I don't have time now.. I'll try later
@@prajwalchaudhary2982
Thanks
Thank you Sloba
I appreciate it
Hi everyone!
Sorry real beginner here, but I wanted to follow along with this tutorial.
However, I don't immediately recognize the software he uses.
Would anyone be so kind to explain me what program(s) he is using?
Example: 0:50
Visual Studio Code
@@zachegner205 ahhahahahhahhahahah i think he asked about the dependencies but love your answer :D
You say links to the map api and instructions are in the descriptions but the doc in the reactleaflet map api has changed because theres no import in nowhere of the Setup or Installation sections.
I just finished it, and yes the map doesn't work properly with me. And still trying to find a solution!!
@@G.AhmadEssam Google "Using a Hosted Version of Leaflet", code should be up in the first result, just copy the link rel, the script is not required.
anybody run into the issue of having only 4 sides of the animated cube appear? Only when I adjust my window size do all 6 sides appear again but only for one full animation.
Yes, I'm experiencing it. I wonder why...
@@jonathanperry7530 playing around with some of the widths made it more consistent but it still happens, I’ll comment again once I find a permanent solution
@@alfamingo2520 Find a permanent solution yet?
Thanks Alot Slobodan
This is an amazing project
Although I had a lot of errors while working following the tutorial but I got them later on
Once again, I can't wait for the remaining part
Thank you! 2nd part is coming! It will be on my channel.
@@CodewithSloba Did you have trouble with the useEffect hook?
th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
@@eteachingdeveloper Yes there was wrong return there
Hi, I.m also having the same trouble with this code, how do I fix it
@@CodewithSloba
Could someone help me out in resolving a useState() issue? Currently, I need to hard reload each page in order to get the assets to load in. I know it should be loading in automatically when I click between routes. Is there an extra step to resolving this outside of the video? or something I might have missed along the way? Thank you!
Hi! Same issue here! Did you find the solution?
I also have the same issue. Anyone with a solution?
Same here!!!
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?
i try follow you but have problems whit npm i react-leaflet, for some reason it doesnt install and dont know why?
just do the same and add --force at the end like this npm i react-leaflet --force
@@kevintremerel2619 thanks bro
Amazing, thank you Slobodan.
There is a problem with the live demo link!
Yeah, the URL ends with 'portfo' instead of portfolio for it to work.
thank you so much for this video.please make a part 2🙏
It's uploaded
2nd part th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html
3nd part th-cam.com/video/YnHsgQkY6Z4/w-d-xo.html
Amazing tutorial!
In 39:10 I have a problem with Sass in the part where the title is animated.
I get an error about a deprecated operation in the current version I'm using, and it doesn't display the page.
Could someone tell me how I could solve it? Thank you so much
i am too stuck on that part... As soon as we add the useEffect with srtTimeOut, the page goes away
i dont know how and why this happen but we can use setTimeout(() => {setLetterClass('text-animate-hover')}, 4000) to replace useEffect that make the same results
@@atonphan463 i have tried your solution and it works!
Thanks man
@@atonphan463 I have used this, the page is coming, but the delayed animation and hover animation is not coming. can you please help on this
@@alanthankachan3308 try this useEffect:
useEffect(() => {
const timer = setTimeout(() => {
setLetterClass('text-animate-hover');
}, 4000);
return () => clearTimeout(timer);
}, []);