React Project Tutorial - Build a Portfolio Website w/ Advanced Animations
HTML-код
- Опубликовано: 2 июн 2024
- In this video, you will learn how to build React portfolio website from scratch with advanced animations.
✏️ Slobodan developed this course: / @codewithsloba
🔗 Code and assets: github.com/bobangajicsm/react...
🔗 Map library react-leaflet.js.org/
🔗 EmailJS library: www.emailjs.com/docs/examples...
🔗 Final version: 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
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!
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
@@CodewithSloba can't wait for part two. Hurry haha.
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 !
You solved my problem. Thank you
I have a problem. Don't work in my project((
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
Thank you for sharing this amazing tutorial. And yes, we need the second part for this project.
Excellent job! Thank you so much, Slobodan 🤝
you're welcome
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...
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
Thanks Slobodan for this content, I'll be waiting for the next sequel of this part.
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
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
ruclips.net/video/I2TNlHVJ9KQ/видео.html
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
Thank you for the tutorial. I would love to see a 2nd version.
ruclips.net/video/I2TNlHVJ9KQ/видео.html
We need as many parts as you can do! Thanks for everything!
@@CodewithSloba Subscribed! ;) Thank you!
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
You are really amazing, explain detail and smooth animation. 🎉
Thank you ruclips.net/video/I2TNlHVJ9KQ/видео.html
Really glad I read these comments before I got too far into this tutorial
Why?
Thank you very much !! Need the second part also
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
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
Thank you very much Slo, greetings from Mexico City
Please second part 😁
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
Wow wow wow!!! Thanks for everything ❤️
It’s my pleasure!
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
Thanks a lot :) . Please make part 2 as soon as possible .
It's uploaded
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.html
Amazing video. This is fire 🔥🔥🔥
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
Thank you so much, I was struggling at same point. You saved my time.
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.
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
Beautiful work！ Let me copy that.:)
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?
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
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!
Very helpful, and surprisingly therapeutic
Watch new parts
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.html
Thank you i learned a lot with this tutorial..
I Love Our Portfolio ✌☺
Really Helpful
Thank you
At 34:52 in Single quotes aren't used around `${letterClass} _${i + idx}` those are backticks `
Can't wait to see the part 2 of this video! thanks a lot Sloba!!
ruclips.net/video/I2TNlHVJ9KQ/видео.html
Really really really thanks 😍😍😍😍😍😍 this is a best project of my life I learn so my thing and now I have a good portfolio 🎉
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?
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?
This turtorial is much better that the last before
Yeah it takes time to improve
Hvala Slobodane ! Thank you so much
Nema na cemu! You’re welcome
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!
Thank you for amazing content , please make a video on deploying project on server .!
Very important video !
I don't know how I can thank you more.
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.
Hi Sloba and freecodechamp, I am getting oops trial version of DrawSVGPlugin deployed. Can you tell what to do here to remove this?
Nice video. After this video I realized how not much I know about web development even I finished a boot camp: (
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!
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?
Stunning tutorial!!!!
Greetings from Brasil.
Thank you! Wow greetings for Brasil!
Amazing, thank you Slobodan.
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
Just a heads up that if you want to deploy this with the GreenSock animations you need to buy a membership.
Another bomb content!! Thank you FCC!
Thanks
We definitely need the second part for this.
Thank you! 2nd part is coming! It will be on my channel.
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
Need the next part already... 👍
2nd part is live ruclips.net/video/I2TNlHVJ9KQ/видео.html
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”
I spent months trying to build this website and here it is
Do you get error of enotempty
It's uploaded
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.html
thank you for this great tutorial❤❤
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.
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, waiting for part 2
ruclips.net/video/I2TNlHVJ9KQ/видео.html
I tried and failed to create this website 7 months ago this is just great thanks FCC
Thank you
Yes we want 2nd part tutorial
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
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
thank you so much for this video.please make a part 2🙏
It's uploaded
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.html
Bravo Slobodane, pozdrav iz Crne Gore, eto ko će meni da bude mentor 😊
Hvala puno! Pozdrav za Crnu Goru dolje 😉
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.
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
This was fantastic! I learned a lot. Well organized and very easy to follow-along. Thank you Slobodan! I am absolutely interested in Part 2! Let's go!
Thank you! 2nd part is coming! It will be on my channel.
ruclips.net/video/I2TNlHVJ9KQ/видео.html
Thank for your sharing. It's great instruction to build portfolio. Thanks again.
It's uploaded
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.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
Great tutorial and voice!
Hahah thank you 🙏 Had no-one to tell me that, especially with my mediocre english.
Hey , awesome work please make the second part 🙏
ruclips.net/video/I2TNlHVJ9KQ/видео.html
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 :)
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!
Always a step ahead...👍
Thank you 🙏
Hvala Slobo kralju!
Hahah hvala tebi
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);
}
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!!!
Yes We want 2nd part of this
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
Amazing!! Tutorial ++
😄
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 (ruclips.net/video/G-Cr00UYokU/видео.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
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
Will be watching
Awesome
Thank so much, next make projects to add to the portfolio
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
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
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);
}, []);
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?
ruclips.net/video/I2TNlHVJ9KQ/видео.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
Thank you for this tutorial, share next part please ,
ruclips.net/video/I2TNlHVJ9KQ/видео.html
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 ruclips.net/video/I2TNlHVJ9KQ/видео.html
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?
Could you explain how you got your svg path for gsap? where it sais d= ? I just bought gsap to do the drawing effect but am unsure how to get a path trace my image.
Thanks for this. I would like to learn react if it seems simple
Absolutely
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
Amazing tutorial!! Thank you so very much!
@Code with Sloba When will you have the rest of?
It's uploaded
2nd part ruclips.net/video/I2TNlHVJ9KQ/видео.html
3nd part ruclips.net/video/YnHsgQkY6Z4/видео.html
Def wanna see a video to this on a mobile device