@@CodeBucks dude you should really consider doing voice overs! It would be content worth paying for, and you can also grow your RUclips channel if you choose to keep it free! Great video though! You have some amazing creativity. Please keep them coming! ❤️
This is an amazing work. I'm learning React right now with Scrimba and I wanted to practice with a tutorial for making a website. Thank you for this, I've just purchased this to support you (I give you 5$, this is not a big amount but I think it's essential to support someone who did great work). I'm just sad you don't sell a version where you talk and comment your work. It would be super useful! Thank you so much (once again) for this!
145 purchases only on the full version? This portfolio is so underrated its a hack in this industry to have such a portfolio, best one i have ever seen good job man
wow... incredible creating. It's real Progress. I understand that mango come only sometime... but best wishes more often please -)) Thank you so much for sharing 👍 🔥 it's really very cool
amazing website. i am too lazy too write too much but it's first time i am seeing such amazing design keep uploading new project i am following u from now on.
Hello, thank you very much! I have started my portfolio 4 times, I had almost given up reacting, but thanks to your tutorial I have progressed a lot and I managed to finish my portfolio! Thank you very much ! I will make you a donation when I can ^^' Your channel deserves a lot more subscribers!
This is a dope design. I went and supported you just because i love high contrast sites and im a sucker for yin yang. I'll be recreating this design myself with some different elements/pages/features/libraries so i can really personalize it and make it MY portfolio. Thanks for giving me some inspiration.
@@CodeBucks Thanks for the video - the final result is really beautiful. I'd just like to give you a feedback regarding clean code. Some files and constants name could be a little more assertive and padronized, and I think you could create more generic components as well (one example: you could create a Header with logo, power button and contact button, then just import this single component once, on App, so it renders on every page). And most important: you need to use some linter or at least make sure your JSX follows a pattern, respecting the elements' positioning. That would be a great addition to your code, man. Thanks again.
@@herdina7 Hey, Yes I understand your concern and I'm improving all those things in my next videos which you can see on the channel. This video was quite old and also when you are dealing with the lot of animations it's hard to create generic component since It needs a little change for different pages. Anyway thanks for the advice I'll keep that in mind.
Dude... congratulations on your very, very cool portfolio! I am new to programming and I am learning about ReactJs, I will follow you. Thank you for sharing with us. Oops!!! My name is Wander😀
This is beautiful. I just started learning how to code and I started with python., still on it. But I figured I could build a portfolio website to journal my experience and everything. I've been looking for something cool and beautiful and at the same time astute and aesthetic and your work checks all this boxes. It WOULD REALLY BE HELPFUL IF YOU COULD TALK AND GUIDE US, AS SOME OF US ARE COMPLETE BEGINNERS LIKE MYSELF and could really use you talking and guiding us, well me, so I could learn and understand as you progress. Still beautiful work. very very beautiful work.
Hey, I'm glad that you liked the portfolio. You can ask me if you face any difficulty, check the description there are links of my twitter and Instagram profile where you can text me on either of these platforms.
@@CodeBucks okay will do. was having some difficulties yesterday. will dm you on instagram, hopefully you can help me solve them. I have seen a lot of personal portfolios but yours really caught my eye and I wanna build one just like it.
Sure in future I'll try to make a video for that. For now you just have to create GitHub repo and connect it with netlify or vercel. From there you just have to follow simple instructions.
Yeah sure. You can modify as per your need there is no copyright will come for you, but make sure you have licence for the things that you use in it such as svgs and other elements. Glad you liked it🍻
Thanks for that awesome tuto. I made the project live coding front off the vid, great flow to learn React, really loved it!! I change some sections and icons, SVGs to personnalize, had som loading spinner between pages. And I just take the Link 2 to see the pages transitions and Responsive. I'm not good at it yet. Just, it will be great to have a premium video with the code like this one. But I get it that it's a lot of work... Aniway, thanks, I have to code 🤗
@@CodeBucks I finished making the desktop version and was trying to get the responsive code but the payment wouldn't go through. Is there another way to make the payment? Thanks
@@CodeBucks I tried paying directly through card but it said payment didn't go through so I tried paypal, but the same thing happened. Tried it multiple times on different browsers as well but no luck. If there were an option for gpay or Paytm..it would be great
I'm having an issue with transition effects when I Click at the center it does go straight to the corner but don't have any duration. also to mention I have changed to SVG to IMG of GIF
I finally built the portfolio with your help,but how can I make it fully responsive,I don't understand that main crucial part which You haven't explained,Can you please help me?
@@CodeBucks I am not very familiar with using media queries for making responsive,cuz I'm beginner for now,I don't where to add media queries,which file ,what size,can you give me some code hints... please Mr.CodeBucks..??
You can the following function in the Themes.js file then use that function as described below: export const mediaQueries = key => { return style => `@media (max-width: ${key}em) { ${style} }` } Now you can use this function as given in the following code: const Center = styled.div` display: flex; justify-content: center; align-items: center; padding-top: 10rem; ${mediaQueries(30)` padding-top: 7rem; `}; `;
@@CodeBucks Mr Codebucks I finally made it response,but I have problem with deployment,after deployment in vercel or even github I getting blank page, nothing at all
Hey, You can tweak the value of initial and animate (framer-motion component) and try to see what happens. If you want to reverse the whole animation then put value of animate into initial and vice-versa😄
Hey, your job is incredible !! But I need help for the images in the blog page, how can I changes images in box by my images (like i put some png in the images folder to link them in the id 1, id 2…)
Instead of whole path just send image name and in the blog component set src of image like this👇 Keep your local path default and just change the image names.
Hey @Codebucks why in the blog page the different links are not opening? I tried the project everything is fine but in the blog page the links are redirecting to the main page.
Hey, sorry for this issue. There is new update in the react-router which caused this issue. I have changed the code and you can see it working in the demo as well. Thanks for pointing this out🥂
Hi I love this tutorial, but I am stuck on the creation of the power button, for some reason my button wont center like yours using your transfrom: translate(-50%,0). I am afraid to go on forward if their is more centering like this. Any help would be great!
Make sure you have "position:relative;" in the Main.js parent component. Also, You can check the code from below repo👇 github.com/codebucks27/react-portfolio-final
@@CodeBucks thank you for that! I had the position relative, but I had misspelled position, causing it to not be recognized. Guess I need some new glasses 😅
Hi, i just bought the full version and i am amazed with this project! I need a little help, how can i style the 'click here' message below the yinyang button? i was able to change the color with , but i wanted to add also a font-weight and replace the font type too, but i don't know how. If you can help me, i'd be grateful.
Hey, Thanks for the purchase. You can style the span tag inside the Center element. Check the styling of Center element and in that find the &>:last-child{} here you can add any styling you want. I'd suggest you to add color here instead of inline styling. Let me know if you need any further help.
Hey i am not able to add other svg components . can you plz inform me from where did you get the svg code .. i need to add other social links ? plz help
Hey, first find or download the svg file you want to show then copy the whole svg code and paste in the left side of this playgroud, react-svgr.com/playground/ This will generate an React Component for you that you can easily use. Also checkout the Icons in the AllIcons.js file to see how I have used props and How all Icons are exported.
Hi Bro, I would really like to purchase your code, could you please add more payment options. Since I am from India unable to make a purchase with the given options.
I have been searching for 2 hours but cant seem to fin dit. The particale part at the 'Skill' page move in front of my main boxes as well. Somehow my partical component is rendered at the top left of the screen instead of left middle like yours. I should solve with CSS? I thought z-index dictates the render position.
@@CodeBucks I have done that, but somehow it keeps rendering it in the top left screen. If I remove the position: absolute on the particle component it does get rendered next to the 2 main boxes, but it still moves in front of everything. I am a CSS noob lol. I only know Javascript and React decently.
@@CodeBucks Yes for sure. My syntax is exactly the same. It seems that the Particle Component keeps getting placed outside the Box component somehow, regardless of my syntax. Maybe its a update with the new react. Reading up about Z-indexes now lol. Thanks for your fast replies.
Yeah sure I can make one. But I like styled components because it provides us many benefits rather then using normal CSS. Why don't you prefer styled-components?
@@CodeBucks I'm sorry man. But It's difficult in styled components. I'm a full stack developer but i like backend more, styled components are time consuming and take more efforts, i prefer material UI, i find it simple. But i can also do it with normal css. It's upto you, btw this video was a masterpiece, and I really appreciate your work ❤️. This should be a paid course. You're a legend ❤️🙏🏻
@@treedash1653 Hey, Thanks for the appreciation. I get it what you're saying. Yes those frameworks like material UI and tailwind can take less time. Will try to make something good using it😄
Great Work. Keep it up, but you should not provide the link of this website having mobile responsiveness if you want people to buy the website with the mobile responsive.
Hey, Sorry for that. I had put some efforts to make this and also if i give it away for free then people don't give the value it deserves so I have kept minimal charge like just for 3$. Anyway for the next time i'll make things clear😄
@@CodeBucks No I am telling you that the demo link which you have provided is a mobile responsive one. So by using developer tools anyone can view the mobile responsive code. So I want to tell you that give the link without the responsiveness
@@AmanRaj-xo2iy Oh okay! I get it. Sorry for misunderstanding. but don't worry maybe everyone can see the mobile responsive code but not the conditions that I have wrote in the JavaScript so It's hard to interpret those.
Hi at 23:18 when you wrote Const container= styled.div It is working fine But when i am trying to compile it shows an error - that identifier container has already been declared. Help please 😵😵
Make sure the name of these styled components and React components are not similar. Also for styled components the first later of the name should be capital.
Hi please do a tree view(for file structure/branch sub branch) react component using a Jason object with level n number of nesting and, able to search filter data and with checkbox, practical problem
Hey, I understand your concern but instead of creating this whole tutorial with new React updates I will create similar or better portfolio tutorial in near future In the meantime I will update the final version of the code with the latest React updates soon.
@@CodeBuckshey bro I know it is very complicated and time consuming to create a another tutorial on same Portfolio..but bro I like this one actually when I see this portfolio I want to create it but on that time I don't have an good pc not yet too but somehow good ..so bro if you don't mind can you please please update the code in GitHub by using new react version..and also I am eagerly waiting for your next portfolio website video.....thank you hope you understand what I mean to stay... please if possible
@@Aman_yadav1419 Hey, Sure give me some time I will update it with the latest dependancies in the mean time can you tell me where do you feel to update the code? You can list out functions or methods that are not working.
@@CodeBucks yess sure I will directly send you some pics of methods and errors that I face ...and thank you for your response 😊...and sorry for too forcing you but I love this portfolio website
First I have created array of 25, here 25 is just for demo and at the end I have set it to "props.number" now this number we're passing in the Anchor component from the Blog Page component. (This number suggests us how much chains we will need for particular device/page based on it's height) In the Blog you can see that we have use some calculations in the useEffect to get this number. Let me write the formula that I have used to get this number, let num = (window.innerHeight - 70 [size of the Anchor svg in px] ) / 30 [ approx. size of single chain in px ]; This num will tell us how much chains we will need to connect till the anchor for various devices.
One Doubt: How are we actually using props.theme.body in styled components? Can anybody please help me out here.. coz actually we are not sending any props...
![🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]](http://i.ytimg.com/vi/Ra1Fsa9YJCk/mqdefault.jpg)
![🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]](/img/tr.png)
Bro your code just blow my mind ……..its just awesome …..(highly recommended )try to add voiceovers to these codes man….u really deserve to reach high…
Ok I will try 😄
@@CodeBucks dude you should really consider doing voice overs! It would be content worth paying for, and you can also grow your RUclips channel if you choose to keep it free!
Great video though! You have some amazing creativity. Please keep them coming! ❤️
@@painkiller3088 Hey Thanks man. Sure I will do voice over in the future videos.
This is an amazing work. I'm learning React right now with Scrimba and I wanted to practice with a tutorial for making a website. Thank you for this, I've just purchased this to support you (I give you 5$, this is not a big amount but I think it's essential to support someone who did great work). I'm just sad you don't sell a version where you talk and comment your work. It would be super useful! Thank you so much (once again) for this!
Thank you so much for the appreciation!
Also thanks for buying it. I'll try to do voice over in my next video 😄🍻
145 purchases only on the full version? This portfolio is so underrated its a hack in this industry to have such a portfolio, best one i have ever seen good job man
Hey, Thanks. I'm glad that you liked it.😄
really awesome bro just never seen so creative portfolio before ! really amazing man
Thanks😇 Glad you liked it🍻
What a creative portfolio website, i really enjoyed watching and learning from your video.
Happy to hear that!
wow... incredible creating. It's real Progress. I understand that mango come only sometime... but best wishes more often please -)) Thank you so much for sharing 👍 🔥 it's really very cool
Thank you so much 😀. Will keep bringing good stuff!
amazing website. i am too lazy too write too much but it's first time i am seeing such amazing design keep uploading new project i am following u from now on.
I'm glad you liked it😇
Hello, thank you very much!
I have started my portfolio 4 times, I had almost given up reacting, but thanks to your tutorial I have progressed a lot and I managed to finish my portfolio! Thank you very much ! I will make you a donation when I can ^^'
Your channel deserves a lot more subscribers!
Hey, Thank you so much for such wonderful comment.
Your portfolio should be your digital face, make sure to complete it and make it live😉🍻
Man you are a life saver. I was confused for portfolio and you inspired me
Hey, I'm glad that you liked this portfolio 😇 I have also created one more portfolio website in next.js you can check the latest video.
This is a dope design. I went and supported you just because i love high contrast sites and im a sucker for yin yang. I'll be recreating this design myself with some different elements/pages/features/libraries so i can really personalize it and make it MY portfolio. Thanks for giving me some inspiration.
Hey, Thanks for your support and appreciation it means a lot. I'm glad you liked the design. More to come soon🎉
@@CodeBucks Thanks for the video - the final result is really beautiful. I'd just like to give you a feedback regarding clean code. Some files and constants name could be a little more assertive and padronized, and I think you could create more generic components as well (one example: you could create a Header with logo, power button and contact button, then just import this single component once, on App, so it renders on every page). And most important: you need to use some linter or at least make sure your JSX follows a pattern, respecting the elements' positioning. That would be a great addition to your code, man. Thanks again.
@@herdina7 Hey, Yes I understand your concern and I'm improving all those things in my next videos which you can see on the channel. This video was quite old and also when you are dealing with the lot of animations it's hard to create generic component since It needs a little change for different pages. Anyway thanks for the advice I'll keep that in mind.
Thank you very much. Lovely design, I love your movies. I'm just learning and your videos help me a lot. Thank you for what you do :)
You are very welcome!😄
Dude... congratulations on your very, very cool portfolio! I am new to programming and I am learning about ReactJs, I will follow you. Thank you for sharing with us.
Oops!!! My name is Wander😀
Hey Wander,
Welcome aboard!
Best of luck on your journey of learning😉
Thanks for following me🍻
Thanks so much for share, this is an Stunning work!!!
you are amazing man!! 😎
Thanks a lot! 🥂
Awesome build, appreciating you for your hard work and keep it up, best of luck further
Thank You!😄Much appreciated!🥂
This is beautiful. I just started learning how to code and I started with python., still on it. But I figured I could build a portfolio website to journal my experience and everything. I've been looking for something cool and beautiful and at the same time astute and aesthetic and your work checks all this boxes. It WOULD REALLY BE HELPFUL IF YOU COULD TALK AND GUIDE US, AS SOME OF US ARE COMPLETE BEGINNERS LIKE MYSELF and could really use you talking and guiding us, well me, so I could learn and understand as you progress. Still beautiful work. very very beautiful work.
Hey, I'm glad that you liked the portfolio.
You can ask me if you face any difficulty, check the description there are links of my twitter and Instagram profile where you can text me on either of these platforms.
@@CodeBucks okay will do. was having some difficulties yesterday. will dm you on instagram, hopefully you can help me solve them. I have seen a lot of personal portfolios but yours really caught my eye and I wanna build one just like it.
So cool. This is a great example of creativity and also this is a masterpiece.You are amazing man.
Hey, Thank you for the appreciation 🍻😄
Love u mera Bai for your awesome Project..
Thanks man. Means a lot😄
such a masterpiece
Thank you so much, mate.
Thanks for watching 😇
Seriously amazing content! keep it up! just a question, how can we make it responsive to mobile devices?
Hey, You can make it responsive using media queries inside the styles defined by the styled components.
thank you bro.. i will edit this into a valentines website for my wife and sne dher the link.. thank u so much this is amazing
i have 10 days i think i can do it 😂😂
Glad you liked it😄
Sure it's a great idea🍻
Yes you can😉
@@anileshjnr451 did you manage to do it in time?😂
Amazing Work ✨😍
Really like the way you explained it in detail.
So Thank you for that. 💯
Can you make a tutorial on how to deploy it too?
Glad you liked it😄
Sure in future I'll try to make a video for that. For now you just have to create GitHub repo and connect it with netlify or vercel. From there you just have to follow simple instructions.
@@CodeBucks Thanks. Btw where do you deploy website with .app suffix? Do you buy domain or this is different?
@@YousufJusani You can deploy on vercel then connect your domain there. You have to buy domain if you want to have custom domain.
Hello, This is so beautiful!
Yeah sure. You can modify as per your need there is no copyright will come for you, but make sure you have licence for the things that you use in it such as svgs and other elements. Glad you liked it🍻
@@CodeBucks Legend :)
I love this. No commentary made the learning better for me.
Glad to hear it!😄
it's great can you please make more projects we are waiting for you 😇😊😊😌☺️
Yeah sure I will. Right now i'm busy with some other project but soon I will upload the next video.
Just wow you are amazing .. Love from India
Glad you liked it🍻
Awsome💯💯
Keep up the good work bro
Thanks man😄
Thanks for that awesome tuto. I made the project live coding front off the vid, great flow to learn React, really loved it!! I change some sections and icons, SVGs to personnalize, had som loading spinner between pages. And I just take the Link 2 to see the pages transitions and Responsive. I'm not good at it yet.
Just, it will be great to have a premium video with the code like this one. But I get it that it's a lot of work... Aniway, thanks, I have to code 🤗
Thanks for appreciation 🍻 Let me know of you need any help 😄
@@CodeBucks I finished making the desktop version and was trying to get the responsive code but the payment wouldn't go through. Is there another way to make the payment? Thanks
@@nikethanrai9100 Can you share more details? What problem are you facing via payment? Have you tried with different device?
@@CodeBucks I tried paying directly through card but it said payment didn't go through so I tried paypal, but the same thing happened. Tried it multiple times on different browsers as well but no luck. If there were an option for gpay or Paytm..it would be great
@@nikethanrai9100 Hey, Sorry for late reply.
There is an option for gpay. Try with different device or in incognito tab.
Hi...friends this is amazing portfolio....i am very inspired with you.
can i use this...for creating my portfolio.
Hey, Yes you can!😉
Wonderful, I paid for the full version. Thank you!
Thank you😊
Awesome ....
Make some more react projects ....
Also Use reduxn some clone projects like Tesla
I'm having an issue with transition effects when I Click at the center it does go straight to the corner but don't have any duration. also to mention I have changed to SVG to IMG of GIF
Hey,
It's not GIF.
And Did you put transition duration in the right part of the css?
I finally built the portfolio with your help,but how can I make it fully responsive,I don't understand that main crucial part which You haven't explained,Can you please help me?
Hey, you can use media queries directly inside the styled components.
@@CodeBucks I am not very familiar with using media queries for making responsive,cuz I'm beginner for now,I don't where to add media queries,which file ,what size,can you give me some code hints... please Mr.CodeBucks..??
You can the following function in the Themes.js file then use that function as described below:
export const mediaQueries = key => {
return style => `@media (max-width: ${key}em) { ${style} }`
}
Now you can use this function as given in the following code:
const Center = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding-top: 10rem;
${mediaQueries(30)`
padding-top: 7rem;
`};
`;
@@CodeBucks Thank You So much Mr.CodeBucks ,I will try this...and see..
@@CodeBucks Mr Codebucks I finally made it response,but I have problem with deployment,after deployment in vercel or even github I getting blank page, nothing at all
Really awesome please try to guide in tutorials you gonna blossom man !!
Hey, Thanks. Yes I'm doing voiceover on my latest tutorials. You can check the last few videos.
Great work !
I can use this and modify it to make my own portfolio with ?
Yes you can use it😄
@@CodeBucks Thank you very much ! Love your works
Wow this blows my mind
Glad you liked it😄
Please make More Animation Projects Like this
Sure! I will✌
Hey thanks a lot for this, I was wondering how would you go about things if you wanted to reverse the intro animation?
Hey, You can tweak the value of initial and animate (framer-motion component) and try to see what happens. If you want to reverse the whole animation then put value of animate into initial and vice-versa😄
i tried to cone it but it is not responsive.. can u tell me why..? thanks for this wonderful portfolio...
Hey, I'm glad you liked it. Final source code link is given in the description.
@@CodeBucks yes I tried to clone using it... But it's not responsive...
@@Alaska1824 It onlt contains code shown in the video. You can use second link to get full code.
@@CodeBucks Gotcha thanks for replying
Good video my friend. May I ask how you get the image in your intro? you downloaded it from somewhere or from Figma?
Hey, You can make it from Pixton😄
@@CodeBucks Thanks man...jusr created it but cant get off the water marks😁
Hey, your job is incredible !!
But I need help for the images in the blog page, how can I changes images in box by my images (like i put some png in the images folder to link them in the id 1, id 2…)
You can replace image url (in the blog data) with your local url, where the images are located.😄
@@CodeBucks thx for your answer but when i replace the url in BlogData.js by : imgSrc:"../assets/Images/myImage.jpg" nothing appens..
Instead of whole path just send image name and in the blog component set src of image like this👇
Keep your local path default and just change the image names.
How to upload the music , it is giving me error , of module parse failed: unexpected character
What do you mean by upload the music? Where did you put your music file?
Best design ever seen 👏👏👏
Thanks man🍻
Awesome tutorial bruh
Thanks😄
I like your project man! it's cool. Can you edit the timestamps, please?
Hey @Codebucks why in the blog page the different links are not opening? I tried the project everything is fine but in the blog page the links are redirecting to the main page.
Hey, sorry for this issue. There is new update in the react-router which caused this issue. I have changed the code and you can see it working in the demo as well. Thanks for pointing this out🥂
Thanks buddy
speechless WOW AMAZINGG !
Glad you liked it😄
Hi I love this tutorial, but I am stuck on the creation of the power button, for some reason my button wont center like yours using your transfrom: translate(-50%,0). I am afraid to go on forward if their is more centering like this. Any help would be great!
Make sure you have "position:relative;" in the Main.js parent component.
Also, You can check the code from below repo👇
github.com/codebucks27/react-portfolio-final
@@CodeBucks thank you for that! I had the position relative, but I had misspelled position, causing it to not be recognized. Guess I need some new glasses 😅
@@angelovillanueva4061 I also make lot of typos😂
Hi, i just bought the full version and i am amazed with this project! I need a little help, how can i style the 'click here' message below the yinyang button? i was able to change the color with , but i wanted to add also a font-weight and replace the font type too, but i don't know how. If you can help me, i'd be grateful.
Hey, Thanks for the purchase.
You can style the span tag inside the Center element. Check the styling of Center element and in that find the &>:last-child{} here you can add any styling you want. I'd suggest you to add color here instead of inline styling. Let me know if you need any further help.
Great work and nice tutorial
Thanks😄
Hey i am not able to add other svg components . can you plz inform me from where did you get the svg code .. i need to add other social links ? plz help
Hey, first find or download the svg file you want to show then copy the whole svg code and paste in the left side of this playgroud,
react-svgr.com/playground/
This will generate an React Component for you that you can easily use. Also checkout the Icons in the AllIcons.js file to see how I have used props and How all Icons are exported.
@@CodeBucks yeah thanks alot i got this one ... quite helpful
PERFECT 🙌🏻❤️💥
How it's suggesting you css in styled-components between those ``.
This is not working in my vscode is there any extension for that
Yes. I'm using extension for that.
You can find it on here: marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
@@CodeBucks Thanks bro you've solved all my problems thanks a lot
new sub awesome bro congrats
Thanks man🍻
in your video, there is full code or should we buy?
Hey,
Desktop version is free and for mobile version it's paid. But even for free version you'll learn a lot😄
i loved the design and this... feeling :) amazing...
Thank you! Cheers🍻
Awesome bro awesome
thank you for video bro
I learn lots of thing
Glad to hear that😊
My animated character image is either coming full or just face from pixton..then when I crop the full body image its getting blur..how do i correct it
Hey,
Can you share your code?
Make sure to check your css for image containing div.
Legend 💪👏👏
Can I design a new website for myself using this design? Do you allow?
Yeah sure you can.
@@CodeBucks thx a lot, I will use it.
Nice. We need more
Sure. Will try to upload more good stuff😁
For a while mind blowing. From india
Glad it helped 😇
I would like to continue the video, please
Do you mean the responsive part?
@@CodeBucks Yes
I want the second part of this project
What is the VS code theme you are using?
Hi, i'm using Aura Theme (dark one).
marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme
bro more content like this 🔥
More to come!🎉
You are awesome. Please try to use voice,Otherwise, we lose motivation 😢
I will try my best😄
Super awesome ☀️☀️
bro make a video on deploying react app on vercel
sure, I will make one😄
This is soo cool 😎
Thanks😄
Hi Bro, I would really like to purchase your code, could you please add more payment options. Since I am from India unable to make a purchase with the given options.
Just wow 🤤🤤
😉
Wow 😳
Thumbs up
😄🍻
I have been searching for 2 hours but cant seem to fin dit. The particale part at the 'Skill' page move in front of my main boxes as well. Somehow my partical component is rendered at the top left of the screen instead of left middle like yours. I should solve with CSS? I thought z-index dictates the render position.
Make sure the position of the particle component is absolute and the position of the box element inside the myskillspage is relative.
@@CodeBucks I have done that, but somehow it keeps rendering it in the top left screen. If I remove the position: absolute on the particle component it does get rendered next to the 2 main boxes, but it still moves in front of everything. I am a CSS noob lol. I only know Javascript and React decently.
@@53Strat Check the position of that element. Have you placed it right or inside any other component.
@@CodeBucks Yes for sure. My syntax is exactly the same. It seems that the Particle Component keeps getting placed outside the Box component somehow, regardless of my syntax. Maybe its a update with the new react. Reading up about Z-indexes now lol. Thanks for your fast replies.
@@53Strat Hey if possible share your code I'll try to fix it.
Do you have course awesome like this on react native???? I need that
For now i don't have one but in future sure will try to make one😁
Hey man! Can you make a website without using styles components? I would really appreciate it.
Yeah sure I can make one. But I like styled components because it provides us many benefits rather then using normal CSS. Why don't you prefer styled-components?
@@CodeBucks I'm sorry man. But It's difficult in styled components. I'm a full stack developer but i like backend more, styled components are time consuming and take more efforts, i prefer material UI, i find it simple. But i can also do it with normal css. It's upto you, btw this video was a masterpiece, and I really appreciate your work ❤️. This should be a paid course. You're a legend ❤️🙏🏻
@@treedash1653 Hey, Thanks for the appreciation.
I get it what you're saying. Yes those frameworks like material UI and tailwind can take less time. Will try to make something good using it😄
Wow👏👏👏👏👏👏
Thank you, I learned a lot
Glad it helped😄
Much Love bro
You too😇
hey i tried the animation of logo (yang round) but the animation is not working ,it just snaps to the bottom right transition all not working
Hey, Can you share your code or try same as in the GitHub link?
same is happening in my code , transition is not working
Amazing
Thank you! 🥂
I think, page transition are not shown.
please correct me if I missed it. :)
Hey,
That is in the paid version of the code. You can get the link from the description.
Great Work. Keep it up, but you should not provide the link of this website having mobile responsiveness if you want people to buy the website with the mobile responsive.
Hey, Sorry for that. I had put some efforts to make this and also if i give it away for free then people don't give the value it deserves so I have kept minimal charge like just for 3$.
Anyway for the next time i'll make things clear😄
@@CodeBucks No I am telling you that the demo link which you have provided is a mobile responsive one. So by using developer tools anyone can view the mobile responsive code. So I want to tell you that give the link without the responsiveness
@@AmanRaj-xo2iy Oh okay! I get it. Sorry for misunderstanding.
but don't worry maybe everyone can see the mobile responsive code but not the conditions that I have wrote in the JavaScript so It's hard to interpret those.
how did you make the anime of yourself?
Using Pixton you can create avatar like that.
wow this is really good!
Thanks😄
Broo please
next project ->
Build multipage
plzz
Sure!😄 soon will do multiple page website too🍻
Hi at 23:18 when you wrote
Const container= styled.div
It is working fine
But when i am trying to compile it shows an error - that identifier container has already been declared.
Help please 😵😵
Make sure the name of these styled components and React components are not similar. Also for styled components the first later of the name should be capital.
loved it 💗
Glad you liked it😇
bhai awesome
Thanks bro🍻
Hi please do a tree view(for file structure/branch sub branch) react component using a Jason object with level n number of nesting and, able to search filter data and with checkbox, practical problem
Sure! I'll try to make one😄
Thank u so much
Glad you liked it 😄
Hey bro please create this website in new version as react methods and updates had come and changes happen confused and getting error... please bro
Hey, I understand your concern but instead of creating this whole tutorial with new React updates I will create similar or better portfolio tutorial in near future In the meantime I will update the final version of the code with the latest React updates soon.
@@CodeBuckshey bro I know it is very complicated and time consuming to create a another tutorial on same Portfolio..but bro I like this one actually when I see this portfolio I want to create it but on that time I don't have an good pc not yet too but somehow good ..so bro if you don't mind can you please please update the code in GitHub by using new react version..and also I am eagerly waiting for your next portfolio website video.....thank you hope you understand what I mean to stay... please if possible
@@Aman_yadav1419 Hey, Sure give me some time I will update it with the latest dependancies in the mean time can you tell me where do you feel to update the code? You can list out functions or methods that are not working.
@@CodeBucks yess sure I will directly send you some pics of methods and errors that I face ...and thank you for your response 😊...and sorry for too forcing you but I love this portfolio website
Bro from where you get this avatar
Hey, You cab get this avatar from pixton 😄
Module not found: Can't resolve 'framer-motion'
Make sure to install framer-motion and import it
Hi, I want to know how can I host it on cpanel web hosting.
This might help you👇
dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6
You're awesome man. ❤
Subscribed to your channel and 🔔too
Hey, Thanks man🍻
nothing found in the source code link .... would you please share us the whole project source code?
There are two links in the description under the Final Code title. You can get whole source code from those links😉
where do you get [...Array(25)] sir?? this video 1.51.53
First I have created array of 25, here 25 is just for demo and at the end I have set it to "props.number" now this number we're passing in the Anchor component from the Blog Page component. (This number suggests us how much chains we will need for particular device/page based on it's height)
In the Blog you can see that we have use some calculations in the useEffect to get this number.
Let me write the formula that I have used to get this number,
let num = (window.innerHeight - 70 [size of the Anchor svg in px] ) / 30 [ approx. size of single chain in px ];
This num will tell us how much chains we will need to connect till the anchor for various devices.
@@CodeBucks yes sir, thanks for the excellent explanation
Whats the name of the theme on VSCode?
Hey, I'm using Aura theme. You can get it from here: marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme
One Doubt:
How are we actually using props.theme.body in styled components?
Can anybody please help me out here..
coz actually we are not sending any props...
See in the app.js file.
We're passing theme in the ThemeProvider.
Because of this we're getting theme as a props in all the child components.
@@CodeBucks awesome.. Now it makes sense... Thanks bro 🙌
Hi! What's the name of that VSC theme???
It's Aurora theme😄
@@CodeBucks thank you!! The tutorial, is awesome, it gave me great ideas, thank you again!