I hope you like this video and feel free to provide your feedback in the comments, I'd really like to read them😊 Please do like, Subscribe🥂& Share this video as much as possible so other developers like yourself can learn from it and create amazing websites♥ My goal is for you to learn and create your own version, tag me or my GitHub repo. Please share the video to support the channel and reach out to me with any questions via email or social media. Thanks for watching, and happy coding!
I wrote this on your video posted on codecamp too. When I run this, the listing directory gets displayed instead. I am a beginner and I would like your help to find what's wrong with my code. Thank You.
This is pure gold. Lots of good concepts, a very creative portfolio and a really deep knowledge and lessons about React and Tailwind. Thank you, you're a trully master of this technologies.
WoW bro! I was really really waiting for your yet another video! Thanks for this awesome 3D portfolio website! I can definitely see that you're challenging yourself to build exceptional content! Thankyou 💗😊
Thank you so much for your kind words and support! I apologize for the wait and thanks to looking forward to my videos. I'm thrilled you like the portfolio website; I really wanted to push the boundaries with this one. Your encouragement supports me to keep creating and improving. Stay tuned for more! 💖😊
I am a Japanese student. I am glad I found this video. I will try on my next holiday. I have started to study three.js and I look forward to your future videos!
É fantástico ouvir isso! A idade é apenas um número quando se trata de perseguir seus sonhos e fazer mudanças significativas em sua carreira. Sua determinação e entusiasmo são verdadeiramente inspiradores e fico feliz que meus projetos possam contribuir para sua motivação. (This is translated by google so pardon me If there are any mistakes)
Thank you so much for this tutorial CodeBucks! Your clear explanations and step-by-step guidance made it super easy for me to follow along and learn. I appreciate the time and effort you put into creating this content. Looking forward to more tutorials from you in the future!
brother your content is awesome make more content like this and please make some projects that we can add to our portfolio to increase the chance of getting selected for an interview and please make a futuristic new unique portfolio website ❤
I began by taking a few crash courses on TH-cam and studying the documentation of a specific library. I then gained a firm understanding by applying what I learned in various projects. I'd suggest that if you are a technical person start with documentation, you'll get better understanding of basics.
Hello @CodeBucks , Wonderful piece of creation here 🔥, I wanted to ask what app and prompt did you use to create the wizard since you did an excellent job on showing us how you transformed the 3D model but not how was created, I am curious. Thanks in advance!
Hey, I'm glad you liked it. No I haven't made React.js version but you can try to refer the current code from the repo and get the component from it and use them in the React.js.
I'm glad you liked it. It is using three.js to render the 3d model. If you don't want to create whole thing you can only checkout the part where I have used three.js to render this 3d model so you'll learn to do that in any website/project.
Very nice site. I am at 33:54 and trying to center the Wizard on the screen but the parameters you set have mine off center. I tried changing them and can’t seem to center the wizard on the screen. Any suggestions?
Hey, I have used sketchfab to download this model. From their you can get any 3D models but make sure to check it's license. You can find all the links from the github repo.
Hey codebucks, Amazing website I also want to make a one for me , can u please tell , are there any prerequisites needed for creating this or i can simply get along and follow your instructions and make ?
wow bro its cool , bro how to get this type of images that used for this project , i am student and create my final year project. how to get this images which source
Hey, you can use tools like blender to create your own 3d models. You can also use AI but at current phase it's not good looking texture wise but if you have skills you can improve it.
Hey, here is the list of extensions that I use in my VsCode, - ES7+ React/Redux/React-Native snippets - ESLint - Path Intellisense - Babel JavaScript (Michael McDermott) - Auto Rename Tag (Jun Han) - JavaScript (ES6) code snippets (charalampos karypidis) - Prettier - Code formatter - Tailwind CSS IntelliSense
Maybe😜! but the main reason is to keep the length of this tutorial as much short as possible. If I use the typescript it will increase the video length.
hey, out of nowhere my server crashed and everytime i try to reopen it with npm run dev it works but it says comping not-found and compiled not-found. i have no idea whats the issue, but every time i try to open localhost in the browser its just auto 404. please help
@@olgsmo Actually there is a file called not-found.js in the app directory but it only renders when the requested route do not match with any defined routes. Check the default routes first, also make custom route and check if you are able to open that or not. Here is the documentation of not-found file for your reference: nextjs.org/docs/app/api-reference/file-conventions/not-found
@@CodeBucks hey! I resolved it by direct export from spline, basically, gltf exports don't allow extreme edits like lights, gradients, and textures by default as their math codes are complex so if u know the solution for the gltf exports please let me know! also which install command did you use to deploy on Vercel? I used ur starter but its giving me :- npm error notsup Unsupported platform for @next/swc-win32-x64-msvc@14.2.5: wanted {"os":"win32","cpu":"x64"} (current: {"os":"linux","cpu":"x64"})
How can i offload my threejs model in nextjs to reduce page load time ? By using web workers etc i am stuck with this issue could you please help us by creating one such video to offload models
On running in live server in VS CODE, the website only showing file directory instead of any image or CSS. No index.html file is found. Please help to fix that issue.
Hey, It's not simple html, css and Js. It's build using Next.js so you have to first install the dependancies using "npm install" then run "npm run dev" then it should run the website in development mode. Make sure that you have Node.js installed in your system.
In this portfolio we are not using any advanced techniques from three.js so you'll be fine. It's nice if you know few basic thinigs like Canvas, camera and scene etc. Just to render the d model we won't be needing any complex things.
@@lipika7569 Before you run the npm command make sure that you have installed stable version of the Node.js then run the "npm install" in the project directory to install all the required library then you can run "npm run dev" to start the development server.
Hey, if you are using hosting providers like hostinger or shared hosting then you have to build the project first then host that build folder else you can use vercel or netlify which provides simple way to host Next.js websites.
@@me.rajuofficial Once you clone the repo in your local system then open that folder in command prompt and do "npm install" then do "npm run dev" It should start the development server. Make sure that you have node.js installed.
You just have to know basics like scenes, canvas, camera etc. Even thogh if you don't know anything you can follow the steps and use documentation of three.js or AI to understand each steps.
There is no need to do react routing because I have used Next.js. The Next.js uses file based routing so you can directly create the file name and it will take that name as route.
@@asmitamondal9699 It could be because you may have made mistake when creating routes or adding links to those buttons. I suggest compare your code with the final code from github.
./node_modules/@react-three/drei/node_modules/@monogrid/gainmap-js/dist/QuadRenderer-6HrRQdJM.js Attempted import error: 'LinearSRGBColorSpace' is not exported from 'three' (imported as 'LinearSRGBColorSpace'). i have this error how solve this
Make sure that you have node.js installed and then in the project directory run the "npm install" command in your terminal to install the required libraries and then run "npm run dev" to start the development server.
The key is not just about coding for a certain length of time but more about what you do with that time. I suggest diving into personal projects. This could be anything from a simple color picker, to designing a landing page, or even building an e-commerce website. The crucial part is to put theory into practice. For instance, if you're learning about portfolio design, don't stop there. Apply what you've learned and create something unique. Maybe you've mastered a cool animation or effect-try incorporating that into a different project. This approach encourages you to explore new concepts and tools, essentially adding more "weapons" to your arsenal. By continuously challenging yourself with new projects, you're not just coding; you're crafting a diverse skill set that grows with each project. So, start small, keep experimenting, and most importantly, have fun with it!
I have tried to do it but it's not working like I have used the exact code upto the navigation section everything is working properly but button is not responding
@@kislayrajput2250 Hey, I think the issue is z-index. Make sure that the z-index of button is higher then the background or model. You can check it through inspecting each elements.
@ lol not confused about the coding but thank you for checking tho. I fell asleep the night before and woke up to this video. I started out on gaming vids and got to coding somehow LOL
I hope you like this video and feel free to provide your feedback in the comments, I'd really like to read them😊
Please do like, Subscribe🥂& Share this video as much as possible so other developers like yourself can learn from it and create amazing websites♥
My goal is for you to learn and create your own version, tag me or my GitHub repo. Please share the video to support the channel and reach out to me with any questions via email or social media. Thanks for watching, and happy coding!
I wrote this on your video posted on codecamp too. When I run this, the listing directory gets displayed instead. I am a beginner and I would like your help to find what's wrong with my code. Thank You.
This is pure gold. Lots of good concepts, a very creative portfolio and a really deep knowledge and lessons about React and Tailwind. Thank you, you're a trully master of this technologies.
Glad you enjoyed it! Thanks for your kind words It means a lot🥳
WoW bro! I was really really waiting for your yet another video! Thanks for this awesome 3D portfolio website!
I can definitely see that you're challenging yourself to build exceptional content! Thankyou 💗😊
Thank you so much for your kind words and support! I apologize for the wait and thanks to looking forward to my videos. I'm thrilled you like the portfolio website; I really wanted to push the boundaries with this one. Your encouragement supports me to keep creating and improving. Stay tuned for more! 💖😊
@@CodeBucks Thankyou bro, you're the best, keep creating these awesome videos, thankyou for the reply again, that's so considerate of you! Thankyou 💗
I am a Japanese student.
I am glad I found this video.
I will try on my next holiday.
I have started to study three.js and I look forward to your future videos!
Wonderful! Sure I'll create more video on three.js
Hi there! I'm a fellow gabonese student interested in Web development and getting into Three.js. How about learning together?
This is the best protfolio I have seen so far! Amazing work!
Thank you so much for creating such a wonderful tutorial and the UI is just amazing, I've never seen a portfolio with music, this is just amazing👏
I'm glad that you liked it😇
Parabens, estou começando agora com 30 anos (mudando de carreira) e ver seus projetos tem me dado cada vez mais motivação!!! Abraço do Brasil
É fantástico ouvir isso! A idade é apenas um número quando se trata de perseguir seus sonhos e fazer mudanças significativas em sua carreira. Sua determinação e entusiasmo são verdadeiramente inspiradores e fico feliz que meus projetos possam contribuir para sua motivação. (This is translated by google so pardon me If there are any mistakes)
Thank you so much for this tutorial CodeBucks! Your clear explanations and step-by-step guidance made it super easy for me to follow along and learn. I appreciate the time and effort you put into creating this content. Looking forward to more tutorials from you in the future!
Thanks for your kind words! Sure I'll keep creating these awesome tutorials🥳
Being a Potterhead, this was the best thing I have come across yet
I'm glad you liked it😇
First portfolio i have seeing with sound, amazing job bhai !
Glad you like it
@@CodeBucks the github part was also nice, but i got C LOL, little bummer xD
@@jannickpedersen4620 What do you mean by you got C?
@@CodeBucks you get a GitHub rating grade with your amount of push, yours was B, the standard name was grade A and i had grade c 😂
Okay got it😂
I watched a lot of three js videos and Indians are the best in making videos xD
Thanks for your kind words😇 I'm glad you liked the video.
Wow. Just wow. This is really great bro you just earned another subscriber
I'm glad you liked it! Thanks for the sub😇
Great buddy congrats, U will be awesome
Thanks for kind words!😇
amazing thanks very much i cant wait to start building this
I'm glad you liked it!
brother your content is awesome make more content like this and please make some projects that we can add to our portfolio to increase the chance of getting selected for an interview and please make a futuristic new unique portfolio website ❤
Sure I will! Thanks for your kind words😇
Incredible video! Where did you learn NextJs, TreeJs and others?
I began by taking a few crash courses on TH-cam and studying the documentation of a specific library. I then gained a firm understanding by applying what I learned in various projects. I'd suggest that if you are a technical person start with documentation, you'll get better understanding of basics.
you are the best
I'm grateful, smart man like you share your work with anyone for free
Thanks for your kind words! I'm glad that you liked it😇
Best porfolio ever, thanks a lot.
I'm glad you liked it😇
Really cool man, thanks.
Glad you liked it! 😇
Hello @CodeBucks , Wonderful piece of creation here 🔥, I wanted to ask what app and prompt did you use to create the wizard since you did an excellent job on showing us how you transformed the 3D model but not how was created, I am curious. Thanks in advance!
Hey, I have not created wizard 3d model, but I got it from sketchfab website. Creating 3d model is whole new skill that I don't possess.
simply incredible! 😊
if we want to choose a character other than the wizard, where can we look?
Hey, you can checkout any website that provides 3d assets such as sketchfab.
Just amazing , waiting for more projects using three.js
More to come!
this is so f'ing awesome! im going to make a knight theme page
I'm glad you liked it! Knight theme sounds cool😎
great video bucks!
Glad you enjoyed it
First of all, Thank you so much for this amazing project secondly, have you made a reactjs version of it?
Hey, I'm glad you liked it. No I haven't made React.js version but you can try to refer the current code from the repo and get the component from it and use them in the React.js.
This is so amazing and Cool, i really want to learn 3D but I'm unable to give time .
I'm glad you liked it. It is using three.js to render the 3d model. If you don't want to create whole thing you can only checkout the part where I have used three.js to render this 3d model so you'll learn to do that in any website/project.
I love this thank you so much!!!!!
I'm so glad!
Awesome project 🦄
Thanks😇
Just subscribed, I'm off to code now👍
Awesome thank you!
Very nice site. I am at 33:54 and trying to center the Wizard on the screen but the parameters you set have mine off center. I tried changing them and can’t seem to center the wizard on the screen. Any suggestions?
Check height and width of your canvas component and also compare your code with the final version of this app.
@@CodeBucks is the finished project on your GitHub?
2:58:05 Navbuton modify this section i had a doubt pls guide .my error : or }} string not set correctly
Could you send snippet of the code where you are getting the error?
How can i get the and create a 3d models which you show in this video?
Hey, I have used sketchfab to download this model. From their you can get any 3D models but make sure to check it's license. You can find all the links from the github repo.
really awesome creative bro
Thanks😇
Hey codebucks, Amazing website I also want to make a one for me , can u please tell , are there any prerequisites needed for creating this or i can simply get along and follow your instructions and make ?
Hi Anjali, Thanks for your kind words. It's better if you have knowledge of Next.js or React.js before you start following this tutorial.
Amazing project ❤
Thank you😇
wow bro its cool , bro how to get this type of images that used for this project , i am student and create my final year project. how to get this images which source
Hey, The images are generated using AI. You can check it from @00:18:30 in the video.
hi, is there a way to get different models and render them? how can I get it done if I don't want the wizard theme here?
Hey, sure you can render different models. I have shown the whole process by which you can get the model and convert it to use in your website.
Great bro 😃
Thanks🎉
what format should we download the 3d models ?
You can use either gltf or glb format.
hey how can i create own 3d model
Hey, you can use tools like blender to create your own 3d models. You can also use AI but at current phase it's not good looking texture wise but if you have skills you can improve it.
hi, @CodeBucks which is the main static file please let me know so that I can update my web.config file
Hey, what do you mean by web.config file?
hi bro, what extensions do you use?
Hey, here is the list of extensions that I use in my VsCode,
- ES7+ React/Redux/React-Native snippets
- ESLint
- Path Intellisense
- Babel JavaScript (Michael McDermott)
- Auto Rename Tag (Jun Han)
- JavaScript (ES6) code snippets (charalampos karypidis)
- Prettier - Code formatter
- Tailwind CSS IntelliSense
I think it's universal. Devs who use threeJS hate typescript 😂
Maybe😜! but the main reason is to keep the length of this tutorial as much short as possible. If I use the typescript it will increase the video length.
hey, out of nowhere my server crashed and everytime i try to reopen it with npm run dev it works but it says comping not-found and compiled not-found. i have no idea whats the issue, but every time i try to open localhost in the browser its just auto 404. please help
Can you check all the routes and also provide the whole error message that you are getting from the terminal.
@@CodeBucks its really weird because somehow my pc thinks that not-found is a file that i wanna run on my server, it just opens website with error 404
@@olgsmo Actually there is a file called not-found.js in the app directory but it only renders when the requested route do not match with any defined routes. Check the default routes first, also make custom route and check if you are able to open that or not. Here is the documentation of not-found file for your reference: nextjs.org/docs/app/api-reference/file-conventions/not-found
i made my own doll using spline tool but its loosing colour during the procedure,any tips?
Could you tell me by which procedure it is loosing the color?
@@CodeBucks hey! I resolved it by direct export from spline, basically, gltf exports don't allow extreme edits like lights, gradients, and textures by default as their math codes are complex so if u know the solution for the gltf exports please let me know!
also which install command did you use to deploy on Vercel? I used ur starter but its giving me :- npm error notsup Unsupported platform for @next/swc-win32-x64-msvc@14.2.5: wanted {"os":"win32","cpu":"x64"} (current: {"os":"linux","cpu":"x64"})
The scale option didn't work on wizard jsx
See if you have made any typo mistake or check the format again!
Yeah bro I check it many times if you don't may I send the code in mail
@@CodeBucks bro I mailed the correct code
Really Great
Thanks😇
and cute… you can read the lines of wow
How can i offload my threejs model in nextjs to reduce page load time ? By using web workers etc i am stuck with this issue could you please help us by creating one such video to offload models
What do you mean by offload? Have you tried to compress the model? Can you tell me the current size of your model?
amazing video!!!!!!!!
Hey, I'm glad you liked it. You can use vercel to host your portfolio it's very easy.
On running in live server in VS CODE, the website only showing file directory instead of any image or CSS. No index.html file is found. Please help to fix that issue.
Hey, It's not simple html, css and Js. It's build using Next.js so you have to first install the dependancies using "npm install" then run "npm run dev" then it should run the website in development mode. Make sure that you have Node.js installed in your system.
@@CodeBucks ok...Get it👍
Can a beginner lear three ja . Is it east to learn three.
In this portfolio we are not using any advanced techniques from three.js so you'll be fine. It's nice if you know few basic thinigs like Canvas, camera and scene etc. Just to render the d model we won't be needing any complex things.
@@CodeBucks ohkk thanks
Wow😲!!
How do we deploy this?
You can deploy it on vercel or netlify😇
Wow 🙀😳
just amazing
Glad you liked it!😇
wow. Just Wow
Your appreciation means the world to me. Thank you for your kind words.😇
I want to use orbit controls for Wizard component. Help me !!!!!!!
Could you tell me what you want to achieve using the orbit control?
audio is not being played! the path is correct. anyone had this issue?
Where did you placed the audio file?
it is showing nothing when I click on go live...how to start the project..??
Are you running it locally?
@@CodeBucks yes I am running it on my system..I tried using npm command too but it did not work.
@@lipika7569 Before you run the npm command make sure that you have installed stable version of the Node.js then run the "npm install" in the project directory to install all the required library then you can run "npm run dev" to start the development server.
@@CodeBucks got it..thank you!!
Which file for run all the time,
for live server.
Hey, if you are using hosting providers like hostinger or shared hosting then you have to build the project first then host that build folder else you can use vercel or netlify which provides simple way to host Next.js websites.
It's ok, But I told about how to run on local host on my computer & which file I have to run ? @@CodeBucks
@@me.rajuofficial Once you clone the repo in your local system then open that folder in command prompt and do "npm install" then do "npm run dev" It should start the development server. Make sure that you have node.js installed.
@@CodeBucks Okay & thank you :)
How much threejs I have to know for this projects
You just have to know basics like scenes, canvas, camera etc. Even thogh if you don't know anything you can follow the steps and use documentation of three.js or AI to understand each steps.
@@CodeBucks thank u so much
Awesome
😇
Bro from where i can learn threeJs please suggest me both free and paid courses
hello sir,there some troublein about page home but not working
Can you explain the problem or error that you are getting?
how to increase opacity of the model my model is having low opacity i guess plzz help
Dude How have you dont the react routing?
There is no need to do react routing because I have used Next.js. The Next.js uses file based routing so you can directly create the file name and it will take that name as route.
@CodeBucks but it's coming 404 not found error on every button I click...can you explain why?
@@asmitamondal9699 It could be because you may have made mistake when creating routes or adding links to those buttons. I suggest compare your code with the final code from github.
@@CodeBucks yes I have compared my code with yours....still I am getting 404 page not found error
@@asmitamondal9699 Could you share a link that you see when you hover on the button?
create more videos on threejs or react-three-fibre
Sure! will do😇
Can I deploy your project ???
Yes you can deploy it for personal use.
Do u remember me Code bucks
Yes I do remember you!
@@CodeBucks u r awesome i wish you get to million subs fast ❣️
Happy coding
@@harshag8980 Thank you for your kind words. It means a lot😇
why do we need starter codes for every tutorial, lol
For some tutorials the final code is not available on github and you'll need the starter code since it contains all the assets, libraries and content.
🔥
./node_modules/@react-three/drei/node_modules/@monogrid/gainmap-js/dist/QuadRenderer-6HrRQdJM.js
Attempted import error: 'LinearSRGBColorSpace' is not exported from 'three' (imported as 'LinearSRGBColorSpace').
i have this error how solve this
In which step you are getting this error?
@@CodeBucks thnks i compile it .for add three drei update 11 version uninstall to update ur pack its ok compile normal
but how to run the code in vs code
Make sure that you have node.js installed and then in the project directory run the "npm install" command in your terminal to install the required libraries and then run "npm run dev" to start the development server.
Error: RenderModel is not defined
src\app\page.js (11:9) @ RenderModel
9 |
10 | {/* navigation and 3d model */}
> 11 |
| ^
12 |
13 |
14 |
Help, please!!!
Hey, have you imported it from the components folder?
Good morning guys what video did you guys watch at first
how long should i code to be like you?
The key is not just about coding for a certain length of time but more about what you do with that time. I suggest diving into personal projects. This could be anything from a simple color picker, to designing a landing page, or even building an e-commerce website. The crucial part is to put theory into practice.
For instance, if you're learning about portfolio design, don't stop there. Apply what you've learned and create something unique. Maybe you've mastered a cool animation or effect-try incorporating that into a different project. This approach encourages you to explore new concepts and tools, essentially adding more "weapons" to your arsenal.
By continuously challenging yourself with new projects, you're not just coding; you're crafting a diverse skill set that grows with each project. So, start small, keep experimenting, and most importantly, have fun with it!
@@CodeBucks Thank you very much for your very kind response.
I will follow your example and further hone my skills.
@@マサヒロ-m8f Sure. Let me know if you face any issue.
M not able to hover the button can anyone help me
Hey, you can compare your code with the final version of the code from github. If you still face any issue pease provide more details.
I have tried to do it but it's not working like I have used the exact code upto the navigation section everything is working properly but button is not responding
@@kislayrajput2250 Hey, I think the issue is z-index. Make sure that the z-index of button is higher then the background or model. You can check it through inspecting each elements.
Pardon sir, actually my button is not working🥺
@@kislayrajput2250 What do you mean by it's not working? You are not able to hover on it or it's not responding on click?
3:29:38
First
Awesome🎉
experience section to be added
Yes you can add it using the similar layout using projects page. Instead of projects you can add experience details in card format.
Like this comment if you woke up to this heavily confused
Which part are you confused about?
@ lol not confused about the coding but thank you for checking tho. I fell asleep the night before and woke up to this video. I started out on gaming vids and got to coding somehow LOL
Thanks to chat gpt 😂😂
Sure. I have used it to generate random text and titles that are suitable to the theme of this portfolio.
@@CodeBucksthis is the smart way to do it. This technology is here for us to use, let people criticize all they want!