Build and Deploy an Amazing 3D Web Developer Portfolio in React JS | Beginner Three.js Tutorial

the most impressive websites in the world all seem to follow a similar pattern they use 3D animations to bring the application to life for example you cannot browse Bruno Simon's portfolio website instead you can drive it yep you heard that right you navigate the website by driving a car that's interacting with the World by breaking the letters and crashing down walls and let's look at Uni which I think is a hippo a smiling hippo that floats changes colors knocks people in the air and then flies into the outer space with other hippos I mean you cannot make this up this may look impossible but in this video you'll learn how to create your own 3D developer portfolio in react using 3js by the end of this video you will have built and deployed a personal portfolio website that is so impressive it is guaranteed to give you a job and you might be shocked at how easy it really is once you understand a few concepts related to cameras lighting and geometry this tutorial is beginner friendly and I'll assume you're completely new to 3js with modern fully responsive design captivating 3D models that are fully customizable smooth and seamless animations providing a buttery feel to the user interactions the ability to send emails to the website and much more this is the best 3js developer portfolio that you can currently find on YouTube alongside building your own 3D web development portfolio you'll also learn how to use 3j yes a powerful 3D Graphics library for rendering and animating 3D models react 3 fiber a popular library for creating 3D graphics with 3js in react Tailwind CSS a popular utility first CSS styling framework frameware motion the most popular Library used to bring your react website to life with animations you'll also learn how to load create and customize stunning 3D models and geometries with various lights as well as understand the 3D World with camera and positioning in the space make your code reusable and scalable using higher order components and other industry standard practices you'll Implement sending emails to a form on the website with email.js and you'll ensure responsiveness across all devices and improve your site's performance using suspense and preload we're going to start simple and then move to more complex Concepts I'll explain every step of the way if this video reaches 20 000 likes I'm recording a second 3js video we've recently added the free resources section to the JS mastery.pro website the link is in the description so from now on I'll alongside the professional project-based courses such as filmfire and NFD Marketplace you can get entirely free guides and eBooks about react web 3 and front-end back-end and full stack development foreign [Music] start building this into your own developer portfolio allow me to give you a quick demo of everything you will build first we have a wonderful hero section with a title and a subtext then we have this wonderful looking 3D model that you can move around we can scroll to the next section that allows us to see the introduction of who you are and what you do after that we can see a great work experience section where we can see where you worked and what did you do at those specific companies after that we have some balls right here that showcase the technology that you're passionate about and the Technologies you know how to develop projects in after that we have the projects themselves in this specific case we're showcasing the projects from the JSM masterclass experience this person is definitely gonna get hired after that we can see the testimonials what do other people have to say about you hopefully something nice and finally we have have some stars going to the end of our portfolio with a great 3D background and a contact Section with a moving 3D model what more can you expect and these have been all of the sections of our great 3D framer motion react 3js 3js fiber portfolio website that you will create in this single video with my help hopefully you're excited before we start building out our project let's first get the hosting and the domain name for our new site your portfolio or any website you'll create in the future hostinger is my personal recommendation and right now they're offering a crazy deal two bucks and 79 cents a month with a four year plan plus three months extra so I simply needed to show this to you the link with an extra discount is in the description let's click the claim deal button to see if it is really as good as it sounds it seems like we're getting web hosting for about two and a half bucks and we can host 100 websites also receive 100 gigabytes of SSD storage unlimited SSL certificate meaning that we have https security we get a free domain and a free email that is crazy hostinger also has a phenomenal customer support 24 7 as you can see by all of the grade ratings right here we're going to create an entire 3D developer portfolio so we want to have a custom domain name to be credible for every industry standard application such as the One You're Building in this video we need it to be fast reliable and trustworthy and all of the features you're getting with this plan such as a custom domain name email and speed makes all the difference since I've partnered with hostinger they decided to give you an even bigger discount you can find the link and a unique discount code in the description enjoy once you visit the link in the description click claim deal and then add to cart here we have to choose the period of our hosting with the crazy discount going on right now I'll definitely choose 48 months to save the most money and down below you can choose your payment method and then you can enter your coupon code that is Javascript Mastery all caps that's going to give you an even bigger discount after you complete the purchase you'll be redirected to the hostinger's dashboard I'll see you there and we're back to the hostinger's dashboard as you can see I'm personally using hosting gear for all of my company's websites if you purchase the premium web hosting you should be able to see this yellow setup button right here so let's go ahead and set everything up before we begin with the development of our great project that way when we reach the end of the video you will already have created your own domain name that you can deploy your create portfolio to so let's go ahead and click setup start now we are going to skip create an empty website for now right here we have to choose the name of our website so you can choose a domain amongst existing domains or you can buy a new one in this case I always recommend to go with something like name and then last name as that works best for the portfolio so try to enter your first and last name and then you can proceed if your first and last name is a bit more popular you can always play with it and get something shorter or or longer depending on what you prefer in this case I'm going to proceed with one of the existing domains that I already have finally you need to click finish setup as you can see hosting gear will immediately start initializing the setup for you and this process shouldn't last more than a minute while our hosting is being set up I just wanted to quickly let you know that there's a GitHub repository containing the entire code for this project so if you ever get stuck just make sure to visit the GitHub page and compare your code with the code that's on there while they're here I would appreciate it if you gave this repository a star also our Discord channel is now counting 18 000 members and there's also a forum where you can get answers to your questions immediately and browse other people's questions there is a special forum for the 3D portfolio so you can be the first one to start a conversation and while we were going through that our website got set up so let's go ahead and click manage site and there we go we have everything we need now we're gonna use this at the end of this video video to deploy our great looking 3D developer portfolio to your own domain name with that said let's dive straight into the code to get started with our great 3D developer portfolio we're going to start as we always do on the JavaScript Mastery YouTube channel from beer Beginnings by creating a new empty folder on our desktop called 3D underscore portfolio once you created you can drag and drop it to your empty Visual Studio code window inside of here you can go to view and then terminal and we can start initializing our application to initialize the app we're going to use a tool called Veet recently it became more popular and more powerful than create react app so we can start by running the command npm create Veet at latest dot slash to created in the current repository dash dash dash dash template react this is going to create a new empty react application and before running npm install and npm run Dev there's a couple of other packages we need to install one of the main packages of course being Tailwind CSS an incredibly popular utility first CSS framework that's going to make the styling of our entire application easier if you've never used Tailwind CSS no worries or I'm gonna teach you how to do that and if you have then you know how great it is let's go to docs and let's install it using Tailwind CLI the First Command we have to run is npm install Dash D Tailwind CSS so let's simply paste it right here and press enter once Tailwind is installed you can also initialize it so let's copy the second command and run it right here and that's all that we need to do for now now let's focus on installing all of the additional packages we'll be using in our application we can do that by running npm install and instead of Simply installing it we need to add an additional flag to this npm installation dash dash Legacy Dash peer Dash depths one of the packages we'll be using specifically react tilt uses older versions of react so for that reason we have to install Legacy peer depths this is something you'll use often when using some older packages with that said let's provide a list of all of the packages we need to install the first and most important one being react Dash 3 forward slash fiber this is a react based 3js Library that's going to allow us to create 3js code in a react fashion we also need add react Dash three forward slash Dre and maath math for math utility functions when working with 3js there's going to be a lot of geometry and we definitely need those utility functions there's react Dash tilt that's going to provide a really cool animation when hovering over our cards react Dash vertical Dash timeline Dash component for the experience similar to the one on LinkedIn add email.js forward slash browser then we're going to need framer motion and react Dash router Dash Dom for routing you can press enter and wait for all of these dependencies to install this usually takes just about a minute so you can pause this video and I'll be right back once the dependencies are installed before running our application there's a couple of things I prepared for you before we dive into the code these are of course some assets and files that I prepare for you to make our coding workflow a bit simpler I spend a lot of time finding the best possible assets and 3D models and I simply want to give them all to you right away so in the description down below first you can find the zipped public folder you can copy it and then you can delete the current public folder and paste it right here in the root of our directory this public folder is going to contain the desktop underscore PC which is a 3D model as well as the planet model after getting the public folder we also need to get our assets so for now delete the assets folder and Down Below download and unzip the updated assets folder and paste it inside of the source there we're gonna use all of the icons and images for the application finally the last zip folder you'll need to get is going to be the components folder so inside of the source you can simply paste the unzipped components folder if you go into it you're going to see that there seems to be a lot of components here but don't let that scare you or make you think hey am I actually going to code anything this video yes you will absolutely everything because these right here is just an empty structure for all of these components which you you with me on the side will create great we can close all of these currently open files and now that's going to be it for all of the zipped folders but there's going to be some additional code I'm going to provide to you first of all we can delete the app.css file as we won't need it we can modify the app.jsx because right now inside of here we have some default structure provided to us by Veet we don't really need that so we can simply create a new empty div and say 3D developer portfolio we don't need this use State we can turn this into a modern Arrow function and we don't need these Imports there we go nice and clean in the description down below you'll find a GitHub gist file inside of that GitHub gist you'll find the code for the index CSS as you can see we have 200 lines here you can copy the code from the GitHub gist and paste it right here in the index.css as you can see we do have about 200 lines of CSS but there's not a lot of styling here most of these are simply gradients and box shadows as well as the Tailwind Imports and the import of the font we'll be using after getting the index CSS in the same GitHub gist you'll also find a new style dot GS file which you can create within the source folder and you can paste the code here we created some useful Tailwind utility styles for the hero headtext subtext section head text and section subtext as well after getting the style GS we also want to update detailwind.config.cjs you can also find that in the GitHub just down below and paste it here this is going to contain just some primary secondary and tertiary colors as well as the Box Shadows screens and the background image next we can create a new folder in the source folder called utils inside of which we can create a new motion.js file this file I also provided to you in the GitHub just down below so you can simply copy it and paste it right here there I prepared some framer motion animations that we can use throughout our project and finally believe me this is the last one you can create a new folder called constants and create a new file called index.js within those constants in that same GitHub gist you can copy and paste all of the content that we're going to have in our application the services Technologies experiences testimonials and projects instead of putting all of this text within our code we have placed it in a single source of Druid file where you'll be able to change it once and it's going to be referenced everywhere else that means that you can change this specific experience the date the points you can change everything to match it to your developer experience and that's going to be reflected in the code great with that said we can close all of the currently open files we can collapse the file tree we can go to view and then terminal and we can run npm run Dev to run our application on localhost 5173 to open it you can hold Ctrl and then click it now we can put the editor side by side to a browser so that we can see the changes that we make live and there we go our Visual Studio code window on the left side and our browser that says 3D developer portfolio on the right side that means that we are ready to get started with the development we're going to start by creating this structure or the layout or the skeleton of our application by going to source and then app.jsx inside of here we need to import all of the components we've just created so let's get started by importing the browser router coming from react Dash router Dash Dom we're going to use for routing we can then import all of our components by saying import inside of curly braces about contact experience feedbacks hero navbar Tech works as well as stars canvas this is all coming from dot slash components and now we can focus on creating the layout we're first going to wrap everything in a browser router component which is going to allow us to route inside of there we're going to have a div and that div is going to have a class name equal to relative z-0 and BG Dash primary if we save this you'll be able to see that there's nothing on the screen so within this div let's also create another div and that div is going to have a class name equal to BG Dash hero Dash pattern also BG dash cover BG Dash no dash repeat and BG Dash Center inside of there we can render the self-closing navbar and the self-closing hero component and once this is implemented you should be able to see a black background with just the nav bar and hero components which are essentially just P tags with that said we can now go below this inner div right here and we can reference all of our components one by one each one of these components is actually a section so first we're going to have the about section then we're gonna have the experience section which is another self-closing tag then we're gonna have the text section to showcase the Technologies we want to work with then we're going to have the works section which are going to be our projects and finally the feedback section below that we want to have another inner div that's going to have a class name equal to relative as well as z-0 we need this because later on we'll be displaying some Stars right here 3D star objects and inside of there we want to have our contact and the Stars canvas now if we save this you can see all of the other sections appear right here that means that we are ready to get started developing all of these sections one by one from top to bottom the first one on our list is of course going to be the nav bar so we can control click to go into the navbar component and we can get started with developing it our nav bar is going to be pretty simple and straightforward because the main focus is of course going to be on the 3D models we're going to create so inside of the nav bar we're going to have our logo the name about work and contact that's about it and that's all that you actually need so let's go back to our application and let's get started with developing it we're first gonna import everything we need so that's going to be react as well as use effect and use State coming from react after that we can import the link component from react Dash router Dom which we're going to use to navigate to other parts of our page then we can import styles coming from dot slash Styles we can also import nav links coming from dot slash constants and finally we can import the logo the menu and the close assets coming from assets and that's it we are ready to get started you can see we get an error and that's because right here I named this style instead of styles so let's simply rename it to Styles if it's not styles for you already great so inside of a navbar let's start with jsx we're going to remove this div and replace it with the semantic nav tag that semantic tag is going to have a class name that is going to be a dynamic template string inside of there we're going to render Styles dot padding X like this this is a special utility class that we have created which if you go to Styles simply provides the px6 meaning padding horizontal 6 and then on smaller devices it provides a bit more padding now to that class we can also add a few additional things so let's bring this back in one line we're going to also give it a w Dash full meaning we wanted to take full width a flex property item slash Center to make it appear in A Center padding y of 5 fixed top-0 which is going to make it stay on the top z20 to make it appear above other elements and we also want to give it a BG Dash primary now if we save this nothing's going to happen because it's currently empty so inside of that nav let's create a new div and that div is going to have a class name equal to W full Flex justify Dash between items Dash Center Max w-7xl meaning we really want to have a lot of width in our nav bar and then margin X Auto there we go now if you're wondering what any of these class names mean simply visit Tailwind documentation you can go to tailwindcss.com and there visit their doc site inside of the docs there's this magnifying glass icon if you click it you can literally type any specific class and you'll be able to see what it does with a detailed explanation for example W-4 simply makes the element take the full width so if you're wondering what any of these classes mean for example Flex or fixed you can immediately see that right here great with that said let's continue developing our nav bar within our div we want to have a link component that link is going to point to just forward slash meaning the top of the page we also want to give it a class name equal to flex items Dash Center and GAP Dash 2. now this is a special react router domlink so we can also give it an on click property set a callback function and there we want to set active to be equal to nothing and this set active is going to keep track of where we are currently on the page so let's create that as a new use State field that's going to be use State snippet active set active at the start set to an empty string and then if we click that we want to window dot scroll to zero zero this is going to scroll to the top of the page now within that link we want to render an image and that image is going to be a self-closing tag that's going to have a source equal to logo alt equal to logo and a class name equal to W-9 for width age-9 for height object Dash contain and we can save it and there we can see a huge letter A with a circle this is my logo as my name is Adrian but you might want to show a different letter here so let me show you how you can do just that you can visit logo.com such a great domain name I know and then in here you can enter your name so let's say the name is John maybe you can enter Just J for John then you can enter your slogan or you can skip that you can skip the industry you can choose the color palette you can choose the type and then you can say without icons and just like that logo is going to generate a new J logo for example the circle one that you can customize and simply download and use on your website it's as easy as that so we can now go back to the website and instead of this logo you can use your own now you can also use that logo in the favicon right here so to do that you can go to that's going to be index.html and right here you can rename this too I'm going to do Adrian portfolio maybe just like that and you can do your name and then portfolio that's going to make it just look a bit better on top and then in here you can import that image that you specified in my case I'm just going to add a link tag and link to forward slash logo.svg again you can use the one that you have imported and that should make it look great right here as well with that said let's style this logo just a bit better by providing a P tag right below it that P tag in my case is going to say Adrian and then we're going to have a space and a span element within that P tag that's going to say JavaScript Mastery in your case you can simply leave your first and last name as it is your personal portfolio that P tag is going to have a class name equal to text Dash white text Dash 18 pixels inside of square brackets fun Dash bold and cursor Dash pointer if we save that it should look like this but we also need to style this span tag that's going to have a class name equal to on small devices block usually hidden because it's a bit too long for these small devices now it looks like that even though we apply W-9 and h-9 as well as text white for the color the image is still huge and the color is not white which would make me assume that the Tailwind CSS classes are not being applied which is a great opportunity for me to show you how we can debug this together so let's do that right away a quick Google search of Tailwind CSS not working with Veet led me to Tailwind CSS docs which you can see right here and we already were on a page that was similar to this one but this one is now installing it using react so instead of installing simply tube and CSS like we did we also have to add both CSS and other prefixer so now let's go to view terminal stop the application from running and then type npm install Dash D but now we're gonna install the post CSS and other prefixer we also need to add that extra as we discussed before and let's press enter once these install we need to run MPX Tailwind CSS init.p paste it right here that's going to do its job because right now you should be able to see post CSS config as well and our Tailwind CSS config from before with that said we should be able to go to view terminal and then run npm run Dev which should rerun our application now closing this file and going back we can see that now we have a proper looking nav bar which means that our Tailwind CSS styles are being applied in this mistake that I've just made matters because as you can see not even myself or other YouTubers are always perfect and always write perfect code every single developer is often running into bugs and errors but it's how quickly you manage to resolve them that matters and that's why I wanted to include the process of debugging this into this video even with the procedure of showing you what Google search term I use that led me to the solution and this is exactly what I include in all of my YouTube videos so if you haven't already definitely make sure to subscribe and turn on the notification Bell to get more videos just like this one and that's also what we include in our JSM masterclass experience program which is also going to be linked down below if you're more into personalized one-on-one learning with that said we can now proceed with developing Garden app bar and we can continue right where we left off below our link below our link we're going to have a UL tag that's going to have a class name equal to list Dash none hidden on small devices Flex usually Flex Dash row and gap-10 inside of there we can open a new Dynamic block of code say nav links.map where we get each individual link and for each link we want to render An Li a list item a list item that's going to have an incor tag within it and that's going to have an href equal to a dynamic template string of hash nav Dash ID and of course there has to be a dollar sign in front and there we can render the nav dot title now if we save this it's going to break of course because in here we said nav and this right here should have been link so let's change this to link that ID and link.title and immediately you can see the about work and contact which is looking great now this Li also has to have a key and key is going to be equal to link.id it's going to have a class name inside of the class name we want to check if this Ally is currently active and we can do that by opening new Dynamic block of code and checking active is triple equal to link dot title if that is the case then we can render the text Dash white color and if it's not active we can render the text Dash secondary color let's close it save it and now we can see that these are currently not active as their grade Out Below that we can also add a couple more class names such as on Hover text Dash White text Dash 18 pixels of size font medium and cursor Dash pointer now if we save that these get a bit bigger and now we can hover over them indicating we can click them finally on click on that Li we want to have a callback function that's going to set active to link dot title now if we click about you can notice the URL changes to Hash about and also this one is white same thing for all of the other links as well now below this UL we're going to have a div and that div is going to be for our mobile navigation bar because sometimes we won't have enough space to fit all of these links right here so we have to be smart and create something that looks like this a mobile navigation bar so let's do just that if we're in small devices then we won't show The Links right here but rather we're going to show them within this div this div can have E-class name that's going to be on small devices hidden usually Flex Flex dash one justify Dash end and items Dash Center inside of that div we want to have a self-closing image image that's going to have a source equal to menu it's also going to have an ALT tag that's equal to menu it's going to have a class name equal to w-28 pixels h-28 pixels object Dash contain and cursor Dash pointer finally it's going to have an on click property because once we click it we want to change the state so we're going to have a callback function with set toggle is equal to not toggle so going all the way up we need to create a new use State field that's going to be toggle set toggle which at the start is going to be set to false now if we save that you should be able to see this menu icon now this menu icon should change depending if we have clicked the toggle so we can say if toggle then we want to show menu else we want to show close or rather it's going to be the other way around we want to close it if it's currently opened and we want to show the menu if it's currently closed so now you can click it and toggle it but of course now below that image we have to show the actual menu so below the image create a new div that div is going to have a class name equal to a dynamic template string if it's not toggled then we want to show hidden like this and else we want to show Flex meaning we want to show it now it's also going to have a p-6 and we can already start seeing it if we expand it p-6 for padding it's going to have a black Dash gradient it's going to have absolute top Dash 20. there we go you can see that black Square write that zero mx-4 for margin horizontal mi-2 for margin vertical Min Dash w for width of 140 pixels inside of square brackets and we also want to give it z-10 to appear over other elements and make it rounded XL and this is going to be our menu now inside of there we can render almost the same UL that we have rendered above so let's go ahead and copy it scroll down and paste it within this div so this UL right here is going to render different elements but of course we have to change it just a bit it's going to be less Dash none but instead of it being hidden by default it's going to be Flex by default like this we don't need on small devices Flex instead of flex row and GAP 10 it's going to have justify Dash and items Dash start Flex Dash call and gap-4 and there we go our elements appeared right here now we can give some class names to rli so let's change these two font Dash Poppins fonts Dash medium cursor Dash pointer and text Dash 16 pixels now if we save this it's going to look just a bit better and on top of setting the active link we also want to do something else so we can turn this into a regular function block that looks like this and we can also set toggle to not toggle that's going to of course close it once we click on a specific link so now we can manually open and close it and we can also click which is going to navigate to work and automatically close it great that means that now we have the mobile menu done as well and we can go back and expand this right here there we go now this Adrian JavaScript Mastery is still looking a bit weird so what we can do is scroll up most likely your name is a bit shorter so it might look better I'll try JS Mastery right here but still it is kind of breaking and that's because instead of using a space right here I can use a Unicode character and and bsp and then semicolon this is the actual Unicode character for an empty space and then we can just leave this right here and then if I put that right here on a new line and then the span on the second line within the P tag that's going to make it appear in the same line and most importantly next to this cursor pointer we can also give it a flex style that's going to make it appear in one row and we can add an extra space right here but as you can see it is tied together so what we can do is we can add the Unicode character and NBSB semicolon which is a Unicode space character so now this is looking great and if we expand it you can see this is looking good and it gets centered in the middle as does the right side this is a great and a simple navigation bar although on the right side right here we do have some space let's see if I Collapse it just a bit will the space be there as you can see there is some space here and we don't have it here that means that we have to get some things fixed and we can do that if we scroll all the way up and fix this patent to padding if we do that it is looking perfect hopefully you have your own logo right here and your own name with that said we can close our nav bar and we can proceed with the most interesting part of this entire video and the project which is the hero section the hero section is going to have this great 3D model that we spend a lot of time looking for we found it for you so get ready to develop it right here together with me to get started we can first import motion coming from of course framer motion yep the hero section is going to have some animations we can then import the Styles coming from dot slash styles as well as import the computer canvas coming from dot slash canvas inside for jsx we can turn this div into a section and that section is going to have a class name equal to it's going to be relative W Dash full H dash screen meaning it's going to take the entire screen and then MX Auto for margin Auto and that's going to generate this nicely looking background right here inside of that section we want to create a Dev and this div is going to have a class name that's going to be a dynamic template string of styles dot padding X so it's going to provide some padding then it's going to be absolute it's going to be inset zero inside of this div we're going to have this text that you can see right here then we also want to give it a top Dash 120 pixels to divide it from the top Max Dash w 7 XL MX Auto Flex Flex Dash row items Dash start and GAP Dash five and finally within that we can create a new div that's going to have a class name equal to flex Flex Dash call justify Dash Center items Dash Center and mt5 for margin top inside of there we can render this circle and this line right here so to do that we can create a self-closing div that's going to have a class name equal to w-5 h-5 rounded Dash full and BG Dash hash 915 eff if we save that we should be able to see that Circle right here let's pull our browser a bit to the right and now we can create that line by creating another self-closing div with a class name equal to w-1 on small devices h-80 usually h-40 and that's going to be Violet Dash gradient there we go so now we have the line as well and we are ready to create our text so that's going to be below this div containing these two divs below we can create another div that's going to have an H1 H1 is going to say hi I am and we can do a span here so that's span is going to have a class name equal to text Dash inside of square brackets hash 915 eff and there inside of the span you can put your name in my case it's Adrian so if we save it you'll be able to see how I am Adrian and we can now make that a bit bigger by applying a class name to this H1 that's going to be a dynamic of styles that hero head text and it's going to be text Dash White and there we go this is already looking so much better below that H1 we can create a new P tag that's going to have a class name equal to it's going to be dynamic as well Styles dot hero sub text it's going to have margin top 2 to divide it a bit from the title and text Dash white Dash 100. inside of there you can type the description of who you are as a developer in this case I'm going to say I develop 3D visuals user interfaces and web applications of course feel free to modify this to suit your needs now we want to break this into two lines so between user and interfaces I'm going to add a Break Tag a self-closing Break Tag that's going to be there on small devices so class name on small devices block meaning it's there and usually it is hidden there we go this is looking great now we can focus on rendering the computer canvas so going below this div right here we can render the self-closing computer canvas component which for now is just going to say computers and we don't want to put that on the side right here we want to put it below so we need to exit this div and one more div so it's going to be right on top of the section like this it's not even visible right here because it's being covered so what we can do now is we can control click into computer canvas and we can start creating our first 3js react 3 fiber canvas we can do that by importing a lot of things from react these are going to be suspense use effect and use state after that we also need to import something known as a canvas and that's coming from add react-3 forward slash fiber canvas is just an empty canvas allowing us to place something on it and finally we want to import a couple of helpers they're going to help us to draw on this canvas that's going to be orbit controls preload and the use gltf the most important part which is going to allow us to import 3D models and these hand utility functions are coming from at react-3 forward slash Dre and finally we also want to import the canvas loader coming from dot slash loader so this is the component we haven't yet created but we will soon now inside of computers we can import our gltf model so we can do that by saying Khan's computer is equal to use gltf and then we pass a path that is dot slash desktop underscore PC forward slash scene dot gltf now if you go to the Explorer and you see the public you'll be able to see a desktop underscript PC and there we have the scene.gltf this is the model that I prepared for you great now let's make use of that model first of all when creating 3js elements We're not gonna start with a div rather we're going to start with something called a mesh like this inside of that mesh we have to create a light because otherwise we wouldn't be able to see anything so let's add a hemisphere light it's going to have an intensity equal to 0.15 and a ground color equal to Black now if you save that we still cannot see anything but we are just starting of course if any of these properties are new to you let's go to react 3 fiber docs and then let's search for them I'm gonna search for adding lights there we go so you can see that we need to create a canvas and then there's the ambient light directional light and a lot of different types of Lights so this is how it should look like just an empty light but we're gonna add that computer model as well so we don't like just a box we light something that is incredibly interesting which is this desk and the monitor as well as the PC you see this glare on this monitor as I turn it around that is a point light so let's create that point light as well that's going to be Point light with an intensity equal to one and finally we're going to create something known as a primitive that's going to be a self-closing component to which we can pass the object that's going to be equal to computer dot scene now if we save this maybe we're hoping to see the computer but we cannot see it yet don't worry we will see it as soon as we load it into our react 3 fiber canvas so to do that we're going to create a new component right below our computers it's going to be called const computer canvas like this and inside of there we can return a canvas that canvas is not going to be a self-closing component we will put something into it but first let's define some prompts we're going to pass frame Loop is going to be equal to demand below frame Loop we can also add Shadows so yes we do want to play with shadows after Shadows we have to define a camera which is the most important part of every 3D scene it is where are we looking at this model from so imagine a camera right here looking at this specific angle in 3D geometry it's really important where the camera and the lights are coming from so in this case we can set the position inside of an object to be 20 which is x-axis 3 which is y-axis and then 5 which is z-axis I found these values to look the best and finally we also need to specify an fov or field off view this is how wide our field of view is going to be in this case I found the value of 25 to work the best great now we still cannot see anything but let's provide a GL property and there we can say preserve drawing buffer I found this value needs to be there to properly render our model great now what we can do is we can also add a suspense this is not related to 3js this is coming from react and this allows us to have a loader while our model is loading so that is going to be our canvas loader inside of it we want to show orbit controls and these controls are going to allow us to move the model left and right as you can see right here and to those controls we can pass enable Zoom to set false because we don't want to zoom this in we wanted to leave it as it is and finally we want to add a couple of additional props so let's put this on a new line that's going to be Max polar angle it's equal to math.p pi over 2 and we want to do Min polar angle as well great so what this allows us to do is not to rotate this all the way around up and down left and right we can only rotate it around a specific angle around the specific axis this is going to make it look a bit more streamlined and most importantly we can render the computer's component right here so that's going to be computers if I could spell it as a self-closing component great it's within this suspense and then below the suspense we want to add a preload of all and close it as a self-closing component now if we reload the page everything is going to break as it usually does and that's good we can open up the console inspect and then go here and we can see that there aren't any errors whatsoever so let's open up the terminal as well and right here we do see an error it's saying that it's trying to get something from a package called three and if you think about it we didn't really install the package called 3 at the start and it is necessary for us to install the original 3GS package for react 3 fiber to be able to use it so we can say npm install dash dash Legacy Dash peer-steps and we want to install three that is the original 3js package once we have that we can rerun the mpm Run Dev command now our application is running and if we reload it we can now see a black screen which again means something went wrong so let's try to debug it first of all I can notice that I typed position instead of position right here so let's fix that still a dark screen and right here I type pint light instead of Point light so if we fix that okay we do get something we can see our great looking model but it's showing on top of our computer which is not ideal so what we can do is we can fix it a bit we can change this primitive object model by applying some additional properties such as scale we can change the scale of the object and let's make it for example 1.75 of its size which is going to make it a bit smaller we want to change the position as well and that's going to be an array of X Y and Z axes so that's going to be 0 minus 3.25 and minus 1.5 I found these values to work the best as you can see right here finally we want to change the rotation to be equal to an array of minus 0.01 minus 0.2 and minus 0.1 there we go so this is going to rotate it really nicely on the screen and our model is here we have this point light now if I comment it out you can see there is no light we only have this hemispheric light but what if we common that one out as well it's looking really dark our model has no light whatsoever let's bring back the point light okay just a bit better you can see this glare happening on the screen let's bring back the hemispheric one okay just a bit more and now we're going to add the main light that's going to be the spotlight so let's create a new spot light it's going to have a position equal to an array of -20 50 and 10. there we go so you can see how immediately everything got a bit brighter let's also change the angle of that light to 0.12 let's set a panubra to one this is a property that I don't know what it does but it made it look better intensity is going to be set to 1 which I think is one by default we can apply a cast Shadow property which is going to cast a shadow as well which is quite cool and finally we're going to set the Shadow Dash Map size of 1024. there we go this is looking wonderful now we have our hemispheric light Point light spotlight and the Primitive computer scene object which is not so primitive it has a speakers a mouse a keyboard a computer screen with Visual Studio code on it to denote your developer and a nice gaming PC great so what did we do we created this really nice 3D mesh with a couple of Lights And A Primitive object we imported that object by using use gltf and then we imported it from the public folder right here which are prepared for you if you're wondering hey where can I get all of these three models and Adrian where did you find them well simply Google 3D models download and go through a couple of sites you have a lot of free 3D models the models like these ones which are not really quality there's also the turbo squid which has a lot of them but I found sketchfab to be the best one you simply have to go to explore and click downloadable there you can find a lot of cool objects and you can simply download them and then use them within your code in the same way that we did with the desktop PC the more you know right great now we can go back to portfolio and we can admire our great hero model which is looking great now while it's loading it does take some time and in this case it even seems to break initially once we reload so what we can do is we can also fix the canvas loader component so let's control click into the canvas loader and there we want to get something from react 3 Dre so let's import HTML use progress and that's going to come from reactory trade that's going to be the canvas loader and we can get the progress coming from equal use progress there we want to render some HTML so right here we can say HTML we want to show a span that's going to have a class name equal to Canvas Dash loader and below that span we want to show A P tag that's going to render the progress dot to fixed to two decimals and then that's going to be a percentage of course like this so we want to show the progress of the load of that model let's apply some styles to the speed tag that's going to be a font size of 14. a color equal to hash F1 F1 F1 a font weight equal to 800 and a margin top of 40. there we go now if we save this and reload the page you saw that loader for a second there right really nicely shows the percentage and then loads the model which makes everything work that is great so hopefully you got the model working as well if you haven't the link to the entire project is going to be down in the description you can visit the GitHub repository and then you can override the computers.jsx file to ensure you have the right code great with that said we can go back to the hero page and continue developing it below our computers we want to make it accessible for mobile devices as well and on desktops we want to let people know that they can actually scroll down with this cool scrolling GIF so right here we can do this it's immediately going to go to the next section so let me show you how to develop this and when I said it's a gif it's not you're not going to Simply import this and slap it in we're going to develop this little thing using framework motion So Below the computer canvas let's go ahead and create a new div that div is going to have a class name of absolute because we have to position it in the middle on extra small devices it's going to have a bottom 10. usually it's going to have a bottom 32. it's going to be full width Flex justify Dash Center and items Dash Center as well within that div we want to show an anchor tag so a tag that's going to have an href equal to hash and then about because we want to scroll down instead of that href we're going to have a div and that div is going to have a class name equal to w-35 pixels h-64 pixels rounded Dash 3XL border Dash 4 border Dash secondary Flex justify Dash center items Dash start and B-2 if we now save this you should be able to see this rectangle appear right there and within it we want to create first time in this video emotion.div this means that we are using framer motion to create it it's going to be a self-closing component and what do we want to animate well we want to animate just the Y property the y-axis 0 24 0. so we want to move it 24 pixels up and down and how is the transition going to look like well transition is going to be duration of 1.5 seconds repeat to infinity and repeat type is going to be equal to Loop so we want to Loop it to the infinity now we want to give it a class name of w-3 h-3 rounded Dash full BG Dash secondary and margin bottom one and save it and there we go in framer motion we've just built this little circle that jumps up and down within this div that we have created and now if we click right here it's going to scroll to the about section which we don't yet have so it cannot do that but trust me later on it will it's going to look just like here on the finished side great now maybe there's one question you have how is this going to look like on mobile is it actually going to look good well let's give it a shot I'm going to collapse this and okay it's not bad but it's not good either so what we can do is we can go back to our computer canvas and within the canvas we can create a new use State field called is mobile there we're going to start set it to false and then we want to add a new use effect inside of this use effect we want to check if we are on a mobile device which we can do by getting the media query and we can get that by checking the window.match media and then if it matches Max Dash width is something like 500 pixels in that case we're going to know that we're on the mobile device so we can say set is mobile is Media query that matches are we on the device that's lower than 500 pixels of width finally whenever the width changes we need to modify that so we can say handle media query change and that's going to take in an event and it's going to Simply set is mobile to be equal to event dot matches now since we are in react and within the use effect we have to add an event listener and then we have to remove it so we can see media query dot add event listener of change we want to call the handle media query change but again since we are in the use effect we have to close that media query listener so we can do that by saying media query dot remove event listener change handle media query change and we don't need to have anything in our dependency array so now that the only thing this entire use effect is doing is changing the is mobile variable and now we'll be able to use that is mobile variable to change the model and make it smaller so let's simply pass the is mobile is equal to is mobile to our computers let's go to our computers take it in as a prop it's mobile and now based on that prop we can change the scale first of all so going back to the scale we can check if is Mobile in that case 0.7 else 0.75 so it's going to be just a bit smaller let's try to reload and check it out okay maybe it's a bit too big we'll see soon we're going to change the position as well so we're going to say if is mobile the position is going to be an array of 0 minus 3 and then minus 2.2 and that should be it but it's still it's not looking that good so let's see if our media query is being applied and I don't think it is because we are missing the closing parentheses right here and we're also missing the measure which is pixels if we save that all of these styling changes for its mobile are going to be applied great now I know this use effect is a bit weird so let me just reapply it with some additional comments that might make it make a bit more sense so first of all we add an event listener that changes to the screen size then we set the initial value of the ismobile state variable then we Define a callback function to handle changes to the media query we add the Callback function as a listener to the changes to the media query and then we remove the listener when the component is unmounted what this does is now it treats it as a mobile but if we go a bit up you can see it treats it as a desktop and that is working flawlessly without using any additional external libraries with that said our model is now done and with it the entire hero section now we can scroll down to the next section which is the about section inside of there we're going to work with these great cards with the react tilt component as well as introduce ourselves in the overview so let's go ahead and get started with that right away to get started with our about section we can first import a couple of things the first one being something called tilt coming from react Dash tilt we're going to use this to tilt the cards that we're displaying notice how when I scroll over we have this nice clean tilt and that happens in all the cards and for that we're using this package then we can also import motion coming from react framer motion we also can import these styles coming from dot slash styles we can import these services coming from dot slash constants and we can import a couple of utils such as fade in and text variant coming from dot slash utils forward slash motion great now we can dive into creating our about section first starting with the introduction overview and then the description so let's scroll down to the about and we're gonna wrap everything in just a regular react fragment that's going to look like this inside of there we're gonna have emotion.div and inside of there we're going to render a P tag that's going to say introduction and below that we're going to render an H2 tag that is going to say overview with a DOT at the end to make it a bit more dramatic and to those we can provide a class name equal to Styles dot section sub text and to H2 we can provide a class name equal to Styles dot section head text and if we save that you can see the introduction in the overview appear right here now we are instead of a motion Dev so we want to animate it so let's provide variance is equal to a function call of the text variant utility function that we have created so let's save it and now if we reload the page and not now but later you'll be able to see these pieces of text Will animate right now we don't have a lot of scroll real estate so we cannot show that but that will happen soon now we can focus on creating this P tag which is this text right here below this motion div we can create a motion dot p here we want to give it a variant variants equal to fade in and it accepts four parameters first the direction at the start we can make it empty then type at the start it can be empty as well then the delay 0.1 second and finally the duration of the animation which is going to be one second and inside of here you can write something about yourself I'm going to paste a block of text something like I'm a skilled software developer with experience in typescript JavaScript and expertise in Frameworks like react node.js and 3js and a couple of other pieces of text so we have it right here now let's divide it from the top a bit by giving it a class name equal to mt-4 Let's also change the color to text Dash secondary let's increase the font size to text-17 pixels let's set the width to Max W 3 XL and let's set the leading to 30 pixels there we go so that's going to make it a bit more readable of course feel free to change this text to whatever you like this is just an example finally below this B tag we want to create a div we want to display these cards so we can create a div that's going to have a class name equal to mt-20 to divide it from the top Flex Flex Dash wrap and gap-10 to provide some spacing between the Cards then we want to Loop over the services so services.map where we get each individual service and its index and for each service we want to render a custom service card self-closing component to which we can provide a key service dot title index as well and finally we can spread all of the properties coming from the service we are currently looping over now this is not going to work because the service card is undefined but if you scroll up right above the about we can create a new functional component const service card our service card component is going to Simply return something for now that can be simply A P tag rendering the service dot title and then where are we getting the title from that's gonna come from the prompts so we're going to get the index the title as well as the icon so we don't even have to say service that title we are immediately getting it through props so now if you scroll down you can see web developer react native developer and so on and all of these are coming from services so this is in the constants remember when I told you you'll be able to change everything in one file well you can do that here maybe you're not a react native developer so feel free to change this right here and you can also change the icons great now let's develop this great looking card we're going to first use a so-called tilt component coming from react tilt and we can give it a class name of on extra small devices width is going to be 250 pixels and usually width is going to be full and inside of it we can render emotion div that motion div is going to have variance of fade in it's going to fade in from the right side it's going to have a type of spring the delay is going to be 0.5 seconds but is going to be multiplied for every index meaning that first is going to start at zero the second one is going to be 0.5 times 1 which is 0.5 and then we're going to have one and more and the last property is the duration so that's going to be 0.75 seconds and this was supposed to be fade in there we go finally we can give it a class name equal to W Dash full green Dash pink Dash gradient padding dash 1 pixel rounded Dash 20 pixels and then finally Shadow Dash card if we save this you can see four what appear to be lines but soon enough these will be cards as soon as we add something in them so let's create a div and that div is going to have some options the options are going to be Max 45 scale of one and then speed is equal to 450. these are the Tilt options that we're providing to this card finally that div is going to have a class name equal to BG Dash tertiary rounded Dash 20 pixels padding y of 5 and padding X of 12. already these look like cards Min Dash H dash 280 pixels so this is the minimum card height okay looking great and then Flex justify Dash evenly items not Center and flex Dash call inside of there we need to show the icon so what we can do is render the self-closing image tag with a source equal to icon the alt can be titled and class name can be w-16 for the width a 16 for the height and object Dash contain and there we go we have our wonderful icons and we can also add an H3 that's going to render the title but of course we have to style it a bit so let's give it a class name equal to text Dash white text Dash 20 pixels to make it a bit larger font Dash bold and most importantly text Dash Center there we go these are some great looking cards and with that we're done with the service card and we're almost close to being done with our about section but you can see that it is still looking a bit weird even if you expand it it goes all the way to the left side and there is so much empty space to the right side now we're going to fix this but not only for this specific section we're going to fix it for all of the sections we're going to create in the future because what you can notice is that they all have the same amount of space available on the left side and on the right side they're all centered in the middle so we want to create one component which is going to wrap all of our sections to make them look good let me show you how to do that using something called a higher order component so create a new folder in the source folder called hoc prior order component inside of there create a new section wrapper.jsx and the Run rafce this is going to be a regular component in many ways but it's also considered a higher order component inside of there we're going to import motion coming from framer motion we're gonna also import Styles coming from dot slash styles and we're going to import the Stagger container coming from utils Dash motion this is going to be our section wrapper and since it's a wrapper we need to get the original component we're passing into it so that's going to be component and also the ID name which we're going to use to navigate or scroll to specific sections each one has to have its own ID now the reason why this is a higher the component is because we're going to have another component right inside of it so this is a component that is instantly going to return another function function hoc which is another function so this is a function returning a function and we're gonna have a return statement inside of which we're going to return emotion Dot section and that motion section is going to render our original component like this now I know this might be a bit confusing but I hope everything will make sense really soon so first let's go to our hoc create a new index.js file which is going to allow us to export our section wrapper so let's say import section wrapper from section wrapper and we can simply export that same section wrapper right here for easier Imports later on now we can go back to our about and at the top we can import section wrapper from dot slash hoc now if we scroll down let me show you how do you use higher order components in react you can wrap your export Default about with the section wrapper so you can do section wrapper first you pass the component and then you pass the ID which is above in this case there we go so as you can see I'm going to even move this right here so you can see better section wrapper about about now if we save this nothing has happened yet so what did we actually do why did we wrap that well later on we're gonna wrap all of these sections that's going to be the overview the work experience and so on so once we apply something in the section wrapper for example a text of test that should appear somewhere right here it's going to be applied all over the place not just in this one section of course we're not going to just apply a text of test we're going to apply so much more we're going to do a variance of stagger container which is going to animate our section first of all then initially we're going to set it to Hidden and the while in view we want to set it to show then we want to fix the viewport so first we want to show it once only and we want to animate it for the amount of 0.25 seconds and we can give it some class names to make it move away from the left corner so that's going to be class name it's going to be dynamic Styles dot padding Max Dash w-7xl mx-auto relative and z-0 if we now save this and reload the page you can see how nicely these cards animate and they're no longer stuck to the left side of the screen and still if we click right here to scroll it's not going to scroll so what we can do is right above the component we can create a span element that's going to have a class name equal to Hash Dash span and it's going to have an ID of ID name and then in here we can just render an empty space that is end nbsp like this so just some empty space and now this ID name is going to get populated from the ID name that we passed right here and if we reload the page and click this it actually Scrolls down so we're scrolling to that invisible span section and also all of these framework motion animations such as if I scroll right here notice how the section appeared this is going to be applied to Future sections by simply wrapping them in this high order component which was the primary reason why we did that in the first place and with that said our hero section is now done as well as our overview now we're moving to our experience section which is going to look like this great so to do that we can close the about we can control click into experience and we can get started to get started with the experience section we can first import a couple of things we're going to use that's going to be vertical timeline as well as vertical timeline element coming from react Dash vertical Dash timeline Dash component we're gonna also import motion coming from react Dash motion and for our vertical timeline to work we also need to import react Dash vertical Dash timeline Dash component forward slash style.min.css that's going to allow us to have this great looking animated timeline let's also fix this to be framer motion and not react motion and then below that we can import Styles coming from dot slash Styles we can import experiences coming from dot slash constants we can import the section wrapper which we have created for the last section and I told you we're going to reuse it for all upcoming sections and we can import the text variant coming from dot slash utils forward slash motion great now we can get started with creating our experience section first we're going to wrap it in an empty react fragment like this and then we're going to have a motion dot div otion div is going to have a variance equal to a function call of text variant like this this is going to make our P tags inside of it animate so it's going to be almost the same as introduction and overview so we can go back to about we can open that component and then we can copy these two p and H2 and we can paste them right here instead of the motion div but now it's not going to say introduction it's going to say what I have done so far and then instead of overview we can say work experience and if we save that you can see this great section as you can see this is going to the left edge of the screen as well but now you should already know what to do the only thing we have to do is wrap the experience into the section wrapper higher the component that we have already created and give it an ID of work as soon as we do that it should move to the right side so if we reload the screen there we go it's going to animate and it's going to be centered in the middle wonderful now we can proceed with our vertical timeline so below our motion div we can create another div and that div is going to have a class name equal to mt-20 flex and flex Dash coal and finally we can make use of that vertical timeline if we save that it's just going to be a line so what we have to do is Loop over the experiences by saying experiences.map we get an experience and an index and then for each one of these we want to return an experience card which is going to be a self-closing component to which we can pass a key equal to index and we can pass experience equal to experience just like so also we have to add one more closing parentheses there we go so now it's going to break because the experience card is not yet defined so we can scroll up and we can create a new component right here const experience card is equal to a react Arrow function where we get experience as the first and only prop if we save that the error gets fixed but we still cannot see anything here so here we can use the vertical timeline element like this to that element we can apply a Content style equal to background of hash 1d1836 and we can also apply a color of hash FFF if we do that again still nothing changes and that's because we don't have any content within it so right here if we render maybe experience and then dot let's do date we still cannot see anything there so let's continue applying some additional Styles right here let's give it a Content Arrow style equal to border right off seven pixels solid hash two three two six three one let's add a date equal to experience dot date let's add an icon style equal to an object where we have the background set to experience dot icon BG and if we save this and reload the page I would hope something is going to appear by now but still nothing is there I guess it depends on this vertical timeline element but I guess it does make sense because we just listed the icon style but now we can list the actual icon so the icon is going to be a div and within it we're going to have a self-closing image tag with a source equal to experience dot icon and ALT is going to be experience Dot company underscore name and we can give it a class name equal to w-60 H dash 60 percent and object Dash contain now if we save this again unfortunately still nothing is showing and I'm guessing that's because this vertical timeline element expects to have something within it so that's why it doesn't have anything yet but that's okay we can proceed styling this icon so before we finalize styling this icon let's go into the contents of the actual timeline element that's going to be a div and within that div we're going to have an H3 that H3 is going to render experience dot title and of course we have to give it a class name equal to text Dash White text Dash 24 pixels as well as font Dash bold and now if we save it I was really hoping to see it in there but it's possible rendering something in the wrong way so let's go back up and inside of here yes we are rendering this in the wrong way so this is an arrow function but in here it's expecting a return statement because we have wrapped it with curly braces so if we replace this curly brace with the parentheses that means that we have an instant return so this time we'll actually be returning something and there we go this is so much better so let's just go one step back and let's comment out all of these things so you can see how it looks like if we start adding think by thing the vertical timeline by itself creates this structure where you have this div and then you have the icon so we can bring back the content Arrow style the actual date experience icon style and the icon and there we go this is already looking much better so now we can also finalize styling the icon by changing the class name of this div to flex justify Center items Dash Center W Dash full and H dash full which is going to Center our icon great now we have the really base Bare Bones experience section but of course we want to add some bullet points to emphasize what we did while working in that specific company and we also want to list the company name so now below this div containing the H3 we can also add a P tag so that's just below the H3 and that P tag is going to render the experience dot company underscore name like this Starbucks Tesla Shopify meta great let's also style it a bit by providing a class name equal to text Dash secondary text Dash 16 pixels to make it a bit larger and font semi-bold great finally we can give it a style equal to margin 0. great this is now looking great and the last thing we need are the bullet points to indicate our experience So Below the div we can create a UL an unordered list give it a class name equal to mt-5 for margin top list Dash disk ml-5 for margin left and then space dash y-2 for spacing between the elements in there we can render The Experience dot points DOT map we can map over each point and get the index and for each point we can return An Li that's going to have a key equal to experience Dash Point Dash and then index and finally we can give it a class name equal to text Dash White Dash 100 text Dash 14 pixels one and then tracking Dash wider this is going to add some more letter spacing finally inside of there we can render each individual point and just like that you can see our experience section sometimes it's great to develop things on your own without using external libraries but in this case I really found this vertical timeline component handy as it provided exactly what I wanted we have the timeline showing to where we were and where we are right now so we're currently a full stack developer at meta we have the date and timeline and we also have the bullet points of what we did there great so with that said the work experience section is done as well and we can move over back to app and then the text section awaits the text section is quite an interesting one in here we're gonna explore how to create these 3D balls of actual technologies that we know and we have worked with before as this is a 3D 3js portfolio we definitely wanted to include as many 3D elements as possible and this is definitely one of them so with that said let's get started with the text section of our 3D portfolio to get started with the text section we'll first have to import a couple of things and the most important one being our ball canvas coming from dot slash canvas that's going to be our actual walls we can then import the section wrapper coming from hoc and we can also import all of the technologies that we know coming from constants and again at any point in time you can modify all of these Technologies so just so you know now we also want to wrap this text section in the section wrapper which we can do immediately and this one doesn't have an ID this div is going to have a class name equal to flex Flex Dash row Flex Dash wrap so they fall into a new line if the screen is too tight justify Dash Center and gap-10 to give them some space to breed inside of here we want to Loop over all of the Technologies by saying technologies.map we're going to get each individual technology and then for each individual technology we want to return a div dot Dev is going to have a class name equal to w-28 for width as well as h-28 for height it's also going to have a key equal to technology dot name finally we want to render the bull canvas as a self-closing component that's going to have an icon technology dot icon as its first and only parameter and there we go you can see about 1 2 3 4 5 10 13 balls now to develop these balls using 3js and react 3 fiber let's control click to go into the bowl canvas and let's develop it from scratch to do that we can import something known as suspense coming from react we're going to also need the canvas coming from react 3 fiber or that's going to be at react Dash three four slash fiber and we're gonna need a lot of utilities from react 3 Dre so that's going to be a decal which we're going to use as the texture float orbit controls to be able to move it around preload and then use texture and all of that is coming from add react-3 forward slash Dre and finally we need that canvas loader coming from dot slash loader we created that before that is the one that loads the percentages finally this bowl is accepting some props so we can define those props right here and then we can first get the balls texture by saying cons texture or rather const and then we restructure the decole from or rather is equal to use texture and then what we pass to it that's going to be props.img URL so where is this coming from so we're calling this bull and that's technically a bowl canvas and we're passing the icon technology that I can and that's coming from Technologies so if you look at Technologies you can see that we have the name and also we have the icon and the actual texture is coming from Dre in this image URL are these exact icons that we saw right here great with that said before we continue creating our Bowl we first need the canvas to show it on so below the ball we can create const ball canvas is equal to it's going to accept an icon and it's going to return a canvas that's going to look like this that canvas is going to be almost exactly the same as the canvas we used before in our hero section so let's go to Hero computer canvas and let's simply copy this entire canvas right here going back to the Bowl we can now duplicate this canvas over here frame Loop is going to be on demand in this case these are going to be simple so we don't need any Shadows we don't need the camera here and the GL is going to still preserve the drawing buffer we're going to have the suspense falling back to the canvas loader for that nice loading and the orbit controls are also going to be simpler we're simply going to say enable Zoom is going to be set to false finally we don't render computers what we do render are bolts so we can say ball to which we're going to pass the image URL is equal to the icon and that is it that is our Bowl canvas which we need to export at the bottom this is really important so we're exporting the Bold canvas not the actual Bowl finally if we scroll up now we are turning a bowl right here and we should be able to see it so this bowl is actually going to float so there's a special float property coming from react 3 tray and as soon as we do float we might already see something let's see it's really dark so we cannot see it yet so inside of this float we're going to add some ambient light so we can say ambient light and we can give it intensity of 0.25 the float itself is going to have the speed equal to 1.75 we'll be able to play with that later and it's going to have a rotation intensity of one as well as the float intensity of 2. these are just some properties that I found to work the best with our bolts great now we're going to also have a directional light right here so the rational light and we're going to give it a position equal to an array of zero zero zero point zero five still we cannot see anything because we don't have the mesh but now we're going to create that mesh inside of which we're going to show everything this mesh will cast a shadow and it will also receive a shadow so these are some special properties that we have and the scale of the mesh is going to be 2.75 inside of the mesh we can render ecosahedron geometry to be honest I don't know what icosahedron is but some math geniuses can surely let me know down in the comments and we're going to pass the args equal to an array of one and one and of course we have to close that icosahedron and there we go oh I guess that's what icosahedron is okay this is already looking great we can play with them we can float them they float around they have some Gap in between looking great if I can say so myself now they don't have any material so let's add mesh standard material and self-close it already this is going to have really cool effect but we can also apply a couple of props to it we can give it a color equal to Hash FFF 8eb we can give it a polygon offset we can give it a polygon offset factor of -5 and we could give it flat shading okay this is looking just a bit better already and finally we need the texture which is going to be this Decor we had before so let's create a new decode property it's going to be self-closing it's going to have a map equal to decol that we created at the top now we cannot see it yet but if we give it a position of an array of 0 0 1 you can already start seeing some shapes and I guess I rotated these too far so we cannot see it so let me reload the page and there we go this is already looking so much better let's also give it a rotation equal to an array of 2 times math dot pi zero and then 6.25 because you can notice they are now horizontally mirrored so we want to mirror them one more time and now they look good so that is two times math dot pi and we can give them flat shading okay this is already looking better our bowls are now done we have our Bowl we have our Bowl canvas the Technologies you know are being displayed right here and that is looking great once again if you want to change some technologies you can simply go into the constants Technologies and then add them right here alongside the name well you'll also have to add the icon for that specific technology which you can find online and you can import right inside of here from assets great work the balls are now done which means that the text section is done and we are ready to move to the work section which is going to look like this it's going to say my work projects and then we will be able to have these wonderful cards with thumbnails that will showcase your most recent projects great with that said let's start with the work section to get started with our work section we can first import a couple of packages we'll be using one of them is tilt coming from that's going to be react Dash tilt we used this one before once we were working with these cards on top remember we want to hover over them and then they tilt so we're going to use this as well for these cards at the bottom for our project cards so we can import tilt we're going to also import motion coming from framer Dash motion finally we can get these Styles coming from dot slash Styles and we can also import some assets primarily we're just going to use one asset which is GitHub coming from dot slash assets we're gonna also import our section wrapper coming from dot slash hoc we're gonna also import our projects which are coming from constants so this is the actual data about the projects that we have created and then finally we can import some motion utility functions such as fade in and text variant that are coming from dot slash utils forward slash motion and now we have everything let's immediately dive into the jsx by wrapping everything into an empty react fragment the reason why we're wrapping it in a fragment is because we're going to wrap it into a section wrapper right here that's going to have a div so we can just leave it like this there we go and if you scroll down there we go we have an empty section now we can create a motion.div and this is going to be the same one we used right here what have I done work experience so let's go back to the app let's go to experience and let's grab this motion div right here containing the P tag and the h2 tag we can go back to works and simply paste it right here now instead of what have I done so far we're going to say my work or my projects and then right here on H2 we can say project dot so if we scroll down now it's going to look like this now we need to reload the page for the changes of the section wrapper to take effect there we go now it's nicely centered and then we can dive into the div below this motion Dev this div is going to have a class name equal to wool for full width and flex and then within that we can create a new motion dot p that motion is going to have a variant or variance equal to fade in and it's going to not have any direction it's not going to have any type but it's going to have a delay of 0.1 seconds and a duration of one second and we can also give it some class names such as mt-3 margin top text Dash secondary for the color text-17 pixels for the size Max w-3xl to make it readable on larger devices and leading Dash 30 pixels to change the line height and inside of here we can have a description for our project I'm going to Simply paste this paragraph that I wrote before following projects showcase my skills and experience the real world examples of my work each project is briefly described with links to the code repositories and live Demos in it feel free to change this however you want or you can just copy it and then paste it right here so let me reload the page and there we go you can see the description feel free to write something about your own projects right here and of course the most important part below this div right here we're going to create one more div that's going to act as a wrapper for our project cards so you can create a class name equal to mt-20 for margin top Flex Flex Dash wrap because our cards are going to wrap if the screen size decreases and then gap-7 to create some space inside of there we want to Loop over all of our projects so projects.map we get each individual projects and its index and for each project we want to return a component that we are yet to create called project card our project card is going to have a key equal to project Dash and then the index and there's also something else we need to pass to it and by something else I mean something really important and that something is of course going to be the entire project so we can spread out all of the properties of that specific project and we can also pass the index equal to index now our project component or project card has everything we need so we can declare it right here on top of the works that's going to be const project card like this an arrow function and we already know we're getting a lot of things through our prompts but just to be sure let's visit our constants and our project to see what does each project have it has a name a description tags name color image and then the source code link so I just want to point your attention to this feel free to change all of these project descriptions values names and links everything is completely modifiable now let's make use of those props we're getting an index we're getting the name description tags image and source code link great now in here we can return and we can wrap everything in a motion dot div and finally we can say test inside of there for now just to be able to see our three projects now this motion Dev is going to have variance and that's going to be equal to fade in we want to fade them in up and we want to fade them in as a spring that's the type of Animation then we want to fade them in one by one so we can say index time 0.5 so they're going to come one by one because the index for each consecutive one is going to increase and then the actual duration is going to be 0.75 seconds so now if we save this and reload you can see how one two three they're coming one by one great this is going to look even better once we have our actual cards so let's create them we're gonna wrap everything in a tilt component and to that tilt we can provide some additional options that's going to be a Max property of 45 a scale property of one and a speed property of 450. these are all settings for that tilt that I showed you earlier and finally we need to give it a class name the class name is going to be BG Dash tertiary we're also going to p-5 rounded Dash 2XL on small devices W Dash 360 pixels so we want to change this to 60 and W-4 now if we save this you should be able to see three really dark cards which now even tilt already but let's make them look a bit better so inside of this tilt we can create a new div that div is going to have a class name equal to relative W fool and then h-230 pixels that's already going to give them some height and right now we have one by one all of them appearing in one column because we don't have a lot of horizontal space but since we use flex wrap if we were to increase the screen size they would nicely fall into place for now we can keep them in one line great now let's see what else can we do to make this look even better and of course that's to display a self-closing project image let's give it a source equal to image and ALT equal to name and of course a class name equal to W Dash full H dash full object dash cover in the rounded Dash 2XL to provide some rounded Corners okay this is already looking so much better you can see how that react tilt component really makes this come alive if you haven't changed the values in the images so far from the constants that's fine you can keep using these ones I'm going to explain the project later on and then at the end once this is developed you'll be able to change this data to your own projects now below this image we can create another div that div is going to have a class name is equal to Absolute so we want to make something appear on top of the image we're going to set the inset to zero Flex justify Dash and margin Dash 3 and card Dash IMG underscore hover and inside of there we're gonna show that GitHub icon so if you remember correctly we want to show this little thing on top right so to achieve that we can create one more inner div and that div is going to have an on click property there we want to have a callback function that's going to call window.open and then we want to do source code link and then underscore blank so this is going to open that page in a new link we also want to give it a class name black Dash gradient w-10 and h-10 so that's going to make this black gradient box appear on top right but of course we want to make it into a circle so we can use a handy Tailwind utility function called rounded Dash full let's make it Flex justify Dash center items Dash Center and cursor Dash pointer all of these properties will now allow us to position the image nicely right there so we can say image is a self-closing tag source is equal to GitHub alt is equal to GitHub and then class name is equal to W dash one over two H dash one over two and then object Dash contain as soon as you save this we can see nice GitHub icon appear right here if you already have deployed your projects one additional cool thing is to Simply add another div and then this div can be for the live URL of the project just something to keep in mind now below this image and Below three more divs we want to create an additional div this div is going to be for the name and the description of our project so let's create a div with a class name equal to mt-5 margin top so divided from the image there we want to create an H3 that's going to render the name and below that we want to render a P tag that's going to show the description if we save that everything breaks so let's try to reload it and let's try to open the inspect element to see what went wrong it looks like the above error occurred here description is not defined so maybe I misspelled it and that indeed did happen so we can properly spell description and we are good to go so if we scroll down now you can see car rent job I.T and trip guide with their corresponding descriptions I'm going to share a bit more info on these interesting projects really soon once we complete the project cards now let's style the H3 a bit by giving it a class name equal to text Dash White fond Dash bold and text-24 pixels okay that's more like it and let's also style the description by giving it a mt2 to divide it from the top text Dash secondary to make it of course secondary next to the title and then let's also change the text to 14 pixels there we go so this is now looking great and finally we want to apply some tags some main Technologies of each project in this case I decided to use them as hashtags so what we can do is below this div we can create another div that div is going to have a class name of mt-4 to divide it from the description Flex Flex Dash wrap and then gap-2 to provide some space inside of there we can map over those Stacks by saying tags.map we're going to get each individual tag and for each one we want to return a P tag that P tag is going to have a key equal to that's simply going to be tag dot name and it's also going to have a class name that's Dynamic set to text Dash 14 pixels but then dynamically tag dot color so we're going to change the color of each tag and then here we can say hashtag and then render the tag.name now if we save this you can see react mongodb Tailwind for the second one we have react rest API and scss and for trip guide we have next.js super bass and CSS of course you can change all of these if you go into the projects within the constants file you can change the description the name as well as the source code link and the image great with that said now we have created a lot of sections so let's expand our browser to see it in its full Glory there we go as you can see we have our great project section and all the three projects appear in one line we can hover over them we can go to their source code we can read the title description and the Technologies looking great now while we're here let me tell you a bit about these projects in specific car rent a web-based platform that allows users to search book and manage car rentals Jabet a web application that enables users to search for job openings view estimated salary ranges for positions and locate available jobs based on their current location and most importantly trip guide a comprehensive travel booking platform these three applications have been built by people just like you learning web development inside of our JSM masterclass XP variants a bootcamp that helps you land your dream job within six months by support from myself and other mentors or you get your money back and yeah I mean this we created the master class experience to help you get unstuck to help you get away from learning just from YouTube tutorials and start focusing on what really matters which is practical build experience these projects that I've just showed you such as job finder that has a really comprehensive design for finding jobs the travel and booking platform that is a comprehensive booking.com clone and even the car rent application which is a comprehensive car renting applications myself and other mentors help people just like you improve their web development skills throughout six months in the JSM masterclass experience so if you want to step up your game from just watching these YouTube videos into something more comprehensive and something that will take you way further in way less time you can sign up right now by going down into the description and clicking the JS Mastery Pro link I'll see you there with that said we can now proceed with the next section of our portfolio which are the testimonials so let's go ahead and go back to our own portfolio collapse it all the way so we can see the code and scroll down now we're gonna focus on the feedback section so let's close the works and the index and let's open up feedbacks inside feedbacks we are going to import motion coming from framer motion we're gonna also import the styles coming from dot dot slash styles we can divide it as this is an internal import we can also import the famous section wrapper coming from dot slash hoc we can then import the fade in as well as the text variant which are motion helpers so they're going to come from utils forward slash motion and finally we can import the data for testimonials coming from constants once again you can change these by going here and then you can make these appear from the people that you actually know and you have worked with great with that said we can now start creating the layout of our feedback so we can wrap it in a div that's going to have a class name equal to mt-12 BG Dash black Dash 100 and then rounded Dash 20 pixels of course this has to be within the square brackets now if we save this you cannot see anything yet because it's dark so what we can do is we can create one more inner div that's going to have a dynamic class name so it's going to be inside of curly braces and it's going to have styles dot padding it's also going to have a BG Dash tertiary it's going to have a rounded Dash 2XL and it's going to have a Min Dash h-300 pixels now we can see this card right here although it's really dark as well but we're going to put some cards to contrast dot Darkness so we can create a new motion div like this that's going to have a variance property equal to text variant and we can call it as a function and then within there we can do the same thing that we have done before we're going to create a P tag that's going to say what others say and then below that we're going to create a new h2 tag that's going to say testimonials and then add a DOT at the end now let's style these a bit by giving it a class name equal to dynamically Styles dot section sub text not a head text this is going to be a subtext and then we can copy this entire thing the class name and then paste it for the H2 but this is going to be a head text if we save that this is already looking much better now below this motion div and Below one more div we can create another wrapper div this div is also going to have a dynamic class name so we can do it like this it's going to have a styles dot padding X meaning horizontal it's going to have a minus Mt minus 20. y minus you're gonna see soon then it's going to have a padding bottom 14 Flex Flex Dash wrap and then Gap Dash 7. we cannot see anything yet because we are yet to create those testimonial cards so inside of here let's Loop over our testimonials and notice how we have the similar pattern every time we have the subtext the head text same thing right here and then we have some cards to Showcase what we do sometimes in web development and web design people try to overdo it but you always ought to follow a specific structure we have a text we have a description and then we have something we do same thing right here don't put a lot of colors a lot of fonts a lot of differences on the website try to keep it consistent but still interesting that's exactly what we're doing with this portfolio so let's map over our testimonials by doing testimonials that map we're going to get each individual testimonial and an index right here and then we want to return a feedback card for each one of these a feedback card is going to have a key equal to testimonial dot name because each one is unique it's going to have an index and then finally we have to spread the entirety of the testimonial properties so let's see what each testimonial will have it will have the testimonial itself the name the designation the company and the image and of course now we have to create this feedback card right here on top so let's say const feedback card is equal to a react functional component with an instant return and we already know that we're gonna get some props so that's going to be index testimonial name designation company and image and finally we can return a motion dot div for each one of these cards so now we can scroll all the way down and we cannot see anything yet but if we just for example return something like the actual P tag that's going to say testimonial and save it we can already see three different pieces of text which is good but let's style them a bit let's apply some variants as well so we can do variance is equal to fade in we want to just leave the direction empty provide a spring type of the fade in and then we want to do index times 0.5 so everyone is going to appear after the other one and then we want to do 0.75 for the duration great now let's also apply some class names to this motion div so that's going to be class name BG Dash black-200 padding-10 rounded 3XL to make it a bit rounded on extra small devices the width is going to be 320 pixels and usually it's going to be full width there we go now we have actual divs that contain the testimonial now we want to add this cool little quote sign at the top so let's do that first we're going to create a new P tag inside of that motion div and we're going to put one single quote but of course we have to style it a bit by giving it a class name equal to text Dash white font Dash black text Dash 48 pixels so that's going to be huge and there we go if I fix the typing error there we go this is already looking better now we're going to have a div for the rest of the content so we can create a new div that's going to have a class name equal to mt1 to divide it from the top and then we can put this testimonial right here within that div so that's going to look like this below the testimonial we can have another div that's going to act as the wrapper for the rest of the content so that div is going to have a class name equal to mt-7 Flex justify Dash between items Dash Center and GAP dash one so what we're doing is we're creating this piece right here the div that's going to contain the name the add sign the position and then finally the image of the person leaving the review So within this div we can create one more div that div is going to have a class name equal to flex-1 flex and then Flex Dash call within there we want to have a P tag and within that P tag we want to have a span that span is going to render the add sign and outside of the span we want to render the name add Sarah Lee great and finally below that P tag we can create another P tag that's going to say designation off company so who and at what Company CFO of Acme Co of devcorp and so on great now of course we can style this a bit let's start with styling the actual testimonial by giving it a class name equal to text Dash White tracking Dash wider and text Dash 18 pixels so that's going to look like this a bit larger a bit more pronounced then we want to style the speed tag by giving it a class name equal to text Dash white fond Dash medium index Dash 16 pixels okay that made it a bit more pronounced as well let's change the span by giving it a class name equal to blue dash text Dash gradient okay so now we have this blue at sign and finally let's apply class names to the bottom P tag that's going to be mt-1 text Dash secondary and text 12 pixels there we go Sarah Lee that now the position in the company is a bit less pronounced the most important and the biggest thing of course is the actual testimonials what they have to say about you and now below this div right here let's also display an image of that person leaving the testimonial so that's going to be the source equal to image the alt tag equal to let's do something Dynamic like feedback buy and then we can leave the name right here okay and finally a class name of w dash 10 h-10 rounded Dash full to make it a circle and object dash cover and there we have our image looking great with that said if we now expand our testimonials and I can just see right now that I wrote testimon nails so let's fix that right here that's going to be here testimonials that's a bit better let's expand it okay and can you notice the issue it's appearing at the left side but you already know how to fix that we simply have to wrap it with a section wrapper I'm glad I missed that because now you can see the importance of higher order components and how simply they fix the issues that we would have to now write a lot of code for there we go this is so much better so we have this testimonials and I promised I'm gonna explain what that minus Mt does minus margin top well you can see it makes these cards go over to this div right here which gives it a really cool effect great so now we have the projects we have the testimonials what else could people ask for they know who we are they know what we do they know what we are about well of course now that they know all of that they want to get in touch with us so we're going to create this really cool 3D form with 3D these Stars flowing the back and then this planet to denote that they can reach out to us wherever they're from really cool so let's get started with this really unique context section by closing the feedbacks and then moving to contact to get started with the contact Section we can first import a couple of things from react and this time that's going to be the use State as well as use ref hooks coming from react then we're gonna also import motion coming from framer motion and this time we're going to also import something new we're going to import email JS coming from add email.js forward slash browser this is a tool we'll use to add the functionality to our contact form so people can send us emails finally let's import the Styles coming from dot slash styles let's import the Earth canvas this is an interesting one so Earth canvas coming from dot slash canvas let's import the section wrapper as we always do coming from hoc and let's import a motion utility function called slide in coming from dot slash utils forward slash motion great with that said we can get started with our contact and in this case we first have to specify a use State field so we can say use state we're going to call it form set form and at the start it's going to be equal to an object containing a name containing the email address and containing the message which are all going to be set to an empty string finally we'll also have to Define an empty use ref so that's going to be const form ref is equal to use ref we're going to use this later on great also when we're submitting the form we want to show some kind of a loading so we can create another use State called loading set loading and at the start it's going to be set to false great when it comes to the functionality later on we're going to create the handle change logic and also the handle submit logic so let's create just empty functions for now handle change handle submit so we can reference them in our code later on great with that said we can start creating the layout of our contact form so let's scroll all the way down and as you can see we have our contact right here so let's wrap everything in a single div that div is going to have a class name equal to on extra large devices margin top is going to be 12. on extra large devices also we're going to have a flex row and usually we're going to have a flex Nash column slash reverse we're going to have a flex property a gap of 10 as well as overflow Dash hidden so we're trying to ensure that we have everything we need to show this great contact form as well as the Earth here without any mistakes on mobile devices and on larger devices too now let's also wrap this in a section wrapper as we always do so that's going to be the contact form and this time we're going to also give it an ID equal to contact so we can actually scroll through it so now if we go all the way to the top of the website and if you reload the page and click contact it Scrolls all the way down which means that we are ready to start developing it now the form is also going to be animated it's going to slide in from the left so we can create a new motion dot div this motion div is going to have a variance property as motion divs usually do so it's going to be variance equal to slide in we're going to call it as a function and we want to slide in from the left side while our Earth object is going to fly in from the right side then the type of the animation is going to between it's going to be delayed 0.2 seconds and it's going to have a duration of 1. finally we also want to give this div a class name of flex Dash 0.75 meaning we wanted to take 3 4 of the screen we want to change the BG black to 100 which is the color a big padding of eight and we want to make it a bit routed so 2 XL if we save this we cannot see anything yet but we're now creating the basis of our future div inside of there we can create a P tag that's going to say get in touch and below that P tag we can create an H3 property that's going to say contact with a DOT great and we still cannot see those so let's apply some class names the P tag is going to have a dynamic Styles dot section sub text and then the H3 is going to have a class name equal to Styles dot section head text and then if we save this and reload the page we can see how get in touch and contact slide in from the left side looking great now immediately below the H3 we're gonna start creating our form so our form is going to have a ref equal to form ref the one we initialized at the top it's also going to have an on submit property which is going to be equal to the handle submit function for now an empty function which we're going to fill in later on and then it's going to have a class name equal to margin top 12. Flex Flex Dash call and then Gap dash 8. for now that's not going to do anything but soon enough we're going to create the inputs for this form so you'll be able to see it so let's start with the first one of these that's going to be a label property that label is going to have a class name equal to flex and flex Dash column so we can make multiple elements appear one beneath another the label is going to have a span that's going to say your name and that span is going to have a class name equal to text Dash white font medium and margin bottom all four there we go your name and now is the time for us to create the input so the input is going to be a self-closing tag that's going to have a type equal to text a name equal to name value equal to form dot name on change equal to handle change it's going to have a placeholder equal to what's your name and it's going to have a class name equal to BG Dash tertiary immediately you can see it right there then it's also going to have a padding y of 4 to make it a bit taller and PX of 6 to make it a bit wider it's going to have a placeholder color of text Dash secondary it's going to have a text stash White it's going to be a bit rounded so we're going to apply a rounded Dash LG it's going to have outline Dash none because we don't like those ugly default CSS outlines we also don't like default borders so we're going to say border Dash none and we're going to change the font to medium now if we save this we have a great looking input but we cannot yet type anything in it we'll make that possible soon once we change the handle change function for now we simply need to duplicate this entire label and all of its contents two more times one more time for the input and then the last time for the message there we go now let's change the second input just a bit this is going to be instead of your name we're going to say your email instead of type text it's going to be type email name is going to be email as well value is going to be form dot email and then we're going to say What's your email and everything else should remain the same now we can move to the last one that's going to be your message what does somebody want to say to us and instead of this being an input it's going to be a text area with the rows property equal to seven this means that we're going to provide people with some space to write the actual message we don't need the type text on the text area the name is going to be message value is going to be form that message and then the placeholder is going to be what do you want to say so what do you want to say and I just noticed that in here I said placehold deer and we want to change this to placeholder for this to appear so let's bring this back all the way from there to just the regular placeholder and there we go this is already looking so much better and with that we have created all of our inputs so the only last missing piece of the puzzle is the actual button so below the last label we can create a button component that button is going to be of a type is equal to submit and there we want to check if we are currently loading if we are we can say something like sending if not it's just going to say sent so there we go here is our send button now let's style it a bit by giving it a class name equal to bg-33 let's give it a py of three that's padding let's also give it a px of 8. let's give it the outline equal to none W Dash fit text Dash white font bold Shadow Dash MD to make it seem like a button and then Shadow Dash primary okay this is already looking much better let's also do rounded Dash XL to have the rounded borders and now let's compare this with the final version yep that's looking good to me you can see that we also have the Stars floating in the back on the finished version we're gonna add that soon for now the form is looking great now what do you say let's focus on the stars and on this great Earth model and then once we do that we can focus on the email functionality so for now before adding the Stars let's just add the floating art model right here below the form so we're gonna exit this motion div and we're gonna enter a new motion dot div this div is going to have a variance property and it's going to be very similar to the one that we had in our first motion div so we can copy this variance and we can go down and we can paste it right here there's going to be one difference though can you notice it let me just expand our browser go to the finished version and reload can you see the difference the contact model comes from the left side and then the Earth model comes from the right side so we want to change this to slide in from the right great now going back to our own website scrolling down we can now also apply a class name to this motion div on extra large devices the flex is going to be one because both the model and the contact form are going to take one space then we also want to change the extra large devices height to auto usually on medium devices height is going to be 550 pixels and then usually the height is going to be 350 pixels like this so we're just changing the size of the canvas on which the Earth will be displayed right here finally and most importantly we want to show the Earth canvas right here inside of this motion div so of course to develop it we can reload the page the Earth Flows In from the right but right now the Earth is just a piece of text that says Earth so let's dive into the Earth canvas and let's load this magnificent Earth model we can do that of course by importing something known as suspense coming from react but even more importantly we need to import canvas as we learned before in 3js everything 3D related appears on a canvas and that's coming from react 3 fiber then we also learned that we can get a lot of these utility functions such as orbit controls preload and use gltf that are coming from react 3 tray that's a helper Library and finally we can import our canvas loader coming from that's going to be dot slash loader okay and we are ready to start creating that Earth canvas now we're going to have the Earth model which we can leave as it is for now and we can create a new one below that's going to be const Earth canvas great now inside of there we want to return the canvas the canvas is not a self-closing component and let's apply a couple of props to it now this model will have shadows which is cool the frame Loop is going to be set to demand then we want to get that GL property that's going to be equal to preserve drawing buffer to True like we had it before and then we can change the camera position for now we can leave this as an empty object we're going to modify it as soon as we import that grade model finally we want to add react suspense to this suspense is going to ensure that while our model is loading we have something to show so we're going to apply a fallback that's going to render the canvas loader component if our model hasn't yet loaded in other case if it has loaded we're going to render the orbit controls which are going to allow us to modify and move around the earth with our Mouse like this and we want to specify some options to those orbit controls we're going to say auto rotate it's going to be set to True enabled Zoom is going to be set to false and then we can do the same thing with it to our PC on top we can apply a Max polar angle that's going to be math.pi over 2 and then we can do the Min polar angle as well great this is just how the rotation is happening finally and most importantly we can render the Earth model right here which for now again is just Earth and at the end of the day we want to return the Earth canvas and not the actual Earth model so that's what we're doing right here now we are importing the Earth right here but we haven't yet imported the Earth model right now it is just a text that says Earth so we already learned how to import great 3D models and that is like this const Earth is equal to use gltf hook to which we can pass the path to our 3D model that's going to be Planet forward slash scene dot gltf so you just need that gltf file and of course something might break but no worries that's fine I just want to point out that these models are within the public folder right here planet and then seeing that gltf again as I mentioned before if you want to get some other models you can just simply Google for 3D models online and then find the gltf file put it here and then reference it right here great now we want to return a primitive as we learned before and that primitive is going to be a self-closing tag that most importantly has the object which is equal to Earth that scene now if we scroll all the way down we should be able to see a really small earth right here so what do you say let's make it a bit bigger by changing the scale to 2.5 that's more like it let's change the position Dash y to be equal to zero and also the rotation Dash y to be zero as well this is just going to ensure that we can rotate it horizontally and with that we also want to apply some additional properties to our camera so our camera can have an fov a field of view equal to 45. let's check out what that does now if you reload the page it's going to make it much much much larger let's also change the near to 0.1 let's change the far to 200. and let's change the position just a bit to that's going to be an array of -4 3 and 6. I found these values to work the best now if we save this and the reload the page we can scroll up a bit and you can see we have this wonderful Earth model in its best possible form also due to the flex properties we used if we expand this it's going to show nicely like this we can reload the page and there we go this is looking wonderful now the only part you're missing of course are the stars stars make it just look so much better because it seems like the Earth is flowing in space and in here it doesn't really seem that way so that's a nice little detail we decided to add just for you to make your portfolio even better if you appreciate that feel free to leave a like comment down below that you like the stars and let me know what would you like to see in the next video with that said we're now done with this Earth model and we can exit it and we're also done with the contact Section besides the functionality which we're gonna do soon but for now we can go back to the app and we can go into the Stars canvas right here to implement Our Stars it's going to be a similar procedure as working with our other 3D elements we'll have to import some things from react 3 fiber and reactory Dre but this time we'll be working with math as well well as all of these particles will be created by us you'll be able to define the density of the particles flowing in the air with that said let's get started with adding those stars to our portfolio we can start by importing a couple of things from react by a couple of things I mean use state use ref as well as suspense and that's coming from react we're then gonna import the canvas but this time the use frame as well coming from add react-3 forward slash fiber we're gonna also import something known as points Point material and preload coming from at react-3 forward slash tray finally we're gonna import everything as random coming from m-a-a-d-h forward slash random forward slash dist forward slash m-a-a-t-h-random dot esm so this is that special math utility that we imported before finally we can create Our Stars which are going to accept some props but we can also create Our Stars canvas so that's going to be const Stars canvas looking like this and that's the thing that we actually want to export later on so our Stars canvas is going to Simply return a div that div is going to have a class name equal to W Dash full H dash full it's going to be absolute because it's going to show behind the actual Earth and the contact form in set Dash zero and then we're going to set the Z index to -1 that way it's going to show behind those elements immediately inside of the div we want to render the canvas element inside of the canvas we can change the camera position to be equal to an array of zero zero one I found this value to work the best there as always we can have a suspense that's going to have a fallback to null this time because it can load really quickly and then we're going to render Our Stars model and at the bottom of the suspense we're going to add a preload component as well where we can say all great This is Our Stars canvas but now we have to develop the actual Stars which we are going to create from scratch so first of all let's initialize an empty ref by saying const ref is equal to use ref after the ref we can start focusing on the layout so in this case we won't have the mesh but we're going to have the group and within that group we're going to have a lot of points so we can say points with the ref is equal to ref and then we have to give it a position so positions of those spheres so we can say positions is equal to sphere and now we need to Define that sphere so we can say const sphere is equal to that's going to be random dot in sphere and we want to add new float32 array and let's make it 5000. so 5 000 particles we can add a comma and then say radius is equal to or column 1.2 so now we have our sphere we also want to add a stride stride like this is equal to 3 and if you want to learn more about what these properties do just go to 3js or react 3 fiber documentation and you can type stride there there's also this property called frustum called and to be fully honest I'm not sure what it does it says right here when this is said it checks every frame if the object is in the frustum of the camera before rendering the object okay just something to keep in mind and finally we can spread all of the props right here to those points now if we save this most likely something is going to break which is fine that's because the points are not going to be a self-closing component we want to have something in there so within those points we need to specify the point material this is going to be made out of star dust I'm just joking but these will be Stars so we're going to make them transparent we're also going to change the color to be set to a string of hash F2 72 C8 let's give it a size of 0.002 really small there is the size attunuation property which we're going to set to true and there's the depth right we're going to set to false and if we save this and reload the page we can now scroll down and there's still nothing happening but no worries we're gonna get to that really soon Our Stars need to rotate and instead of rotating every single star we're gonna rotate the entire group so we can say rotation and then we're gonna set that to an array of zero zero and then math dot pi over four like this and we can save that in math just m is going to be uppercased and if you scroll down we still cannot see anything even after adding the rotation we still cannot see the stars so let's see if everything is all right with our Stars canvas right here I can see that I specified the H full but we should have specified H Auto that's just one little fix that we can make and right here I can notice that I misspelled absolute so if we fix this there we go our particles just showed but they're not moving around so we can scroll up and now we can make them rotate we can do that by using a special utility coming from react 3 fiber called use frame so we can call this use frame as a hook pass in the state and something known as a Delta meaning a change and then we can say ref that current dot rotation dot x minus equal to Delta divided by 10 and then we can repeat this for the Y as well and make this 15. now if we save this you can see that the Stars will start moving is this not crazy we have implemented the Stars we added the rotation and we also use this crazy use frame feature which allows us to rotate something frame by frame and in this case we're changing the rotation of the Stars meaning we're making them move and float into space and with these Stars floating at one specific speed and the planet moving at a different speed it really does look like it's flowing in space with that said we can close the stars and we can expand our browser to admire this in its full Glory I'm gonna reload the page and scroll down and would you look at that we have the contact form the stars are right here everything is looking great from the start of the portfolio to the end and these Stars just make it as a nice finisher meaning when somebody reads everything about us they are greeted by the stars and they are ready to contact us right here to let us know that we got the job so with that said our application is now complete the last thing we have to do is go back into the contact Section and we have to implement the actual functionality now that we have everything right here that's going to be pretty simple and again we'll be using the email.js service to make this even simpler let's get started first we have to create an account on email.js.com and it is a simple as pressing sign up free once you sign in you'll see a dashboard that looks like this and there's a quota of 200 free emails which should be more than enough one of these is surely going to get you a job so let's go ahead and create a new service let's do Gmail in here you're going to get your service ID and you'll have to connect your account so you can simply sign in with Google and once you sign in and connect it you can create the service there we go now you can go to email templates and you can create a new template you can leave everything as it is it's going to work by default so let's click save and let's click ok the template has been saved successfully great so if we go back to email templates now you have your template to be right here which you can copy and back in templates we have our templated B so you can click it you can go to settings and you can copy your template ID for now let's simply paste it right here on top of our contact as a comment then let's go back to our email services and let's also go to Gmail and let's copy our service ID we're gonna need that as well and finally you can go to your name and then you can copy the public key and you can paste that right here on top as well we're going to use this really soon with that said we can go back to our contact jsx and we can start implementing the functionality starting with the handle change inside of the handle change we get a key press event and from that event we can extract the target so we can say Target is equal to e like this and what we can also do is we can also extract the name and the value immediately from E dot Target so essentially we went two steps deep because e Dot target.name and E dot targeted value exist on this event property finally once we get that we can set the form to be equal to an object where we spread the entire form and then we update the name to the newly created value what this will allow us to do is now we can actually update these fields and enter our name our message and our email great now we can focus on the handle submit which is the most important part so once we start with the submit we first want to prevent default so we're going to call e.prevent default because otherwise the browser would refresh it as that is the default browser Behavior then we want to start with the loading so we want to start the sending of the email message then we want to call the email JS library and we're going to call the dot send function there we have to pass a couple of things first one is the service ID then the templated D and then the public key so we can pass those right here let's get them from the top we took these just a couple of moments before from the email.js service so first we have to pass this service ID which is this one you can just pass it as a string right here the second one we have to pass is going to be the template ID so you can copy it and paste it right here now let's paste this in a couple of lines so it's going to be service template then as the third parameter we have to provide an object with some options so these options are going to be from underscore name is equal to form dot name so we know who's sending it then we have two underscore name that's going to be your name in my case it's going to be Adrian after that we can enter the from underscore email which is going to be equal to form dot email so we know who is sending it after that we're going to have two underscore email which is going to be your email in my case contact at jsmastry dot Pro you can enter your own email here and finally the message is going to be equal to form.message that's all that we need to pass finally the last variable the fourth parameter is going to be our public key so we can copy that public key right here there we go again you get all of these values from your email.js you can see where I copy them I got the template from the templates the service from the services and then you get your usual key if you click on your name on the nav bar of the email.js service great now we have everything we need right here and the main question is what's going to happen when this actually executes well we want to call a DOT then function on it that then is going to accept one callback function inside of it and there we want to set the loading to be equal to false we also want to add an alert that's going to say thank you I will get back to you as soon as possible great and then finally we want to reset the form so that's going to be set form is going to be equal to an object where name is an empty string email is an empty string and the message is an empty string as well finally after this function we can provide another callback function called error so we can set the loading to false in that case as well and we can simply console log the error and we can also alert something like something went wrong there we go just the user knows that they haven't sent you an email and they can find your email somewhere else and believe it or not that's it to allow us to send emails so I'm gonna enter my name I'm gonna enter my email and I'm gonna enter my message and I'm gonna click Send ing and thank you I will get back to you as soon as possible that means that everything went through isn't that great and if you go back to your email provider you should see something like this you got a new message from Adrian hi there this means that our email works that is phenomenal with that said our contact session is done and with it our entire application we came to the last component on this entire structure that means that we can now expand our browser all the way to the end we can scroll all the way to the top and we can reload the page to check it once again in its full Glory we can now also close the other deployed link because soon enough we're going to deploy this one ourselves okay let's check it out so once again hi I'm Adrian on top we have this wonderful 3D model which we haven't seen in quite some time because we spent some time developing the rest of the page now we have this automatic scroll which brings us to the overview where we have the web developer react native developer backend and content creator again you can change every single little detail on this page by going into constants you can change the experience to match your actual experience in this case we worked at Tesla Shopify meta as well and then finally we can see these balls with technologies that we know and we are proud of working with that is great then we have some projects right here again these are projects that the master class students have built maybe you can in the future too but for now you can put your own projects right here again make sure that these are great projects that employers really want to see then we have the testimonials for people that put trust in you and that actually have something good to say about you and finally we have this wonderful 3D contact Section looking great and just to verify let's ensure this is mobile responsive so I'm gonna go right here to mobile and I'm gonna scroll all the way up one more time Yep this is looking good everything falls nicely in mobile view everything is readable we can see the ball so we can see the project we can see testimonials and we can see the contact this is wonderful I love it hopefully you love it as well this has been a phenomenal build and as we always do on the JavaScript Mastery YouTube channel now I'm going to show you how to deploy it to hostinger's incredibly fast servers where you can put it on your own domain name to really make yourself stand out you know you don't want to have that ugly URL where there's a ton of random characters you want to have something your first and last name.com that's what you need and that's what I showed you how to get at the beginning of this video and now I'm gonna show you how to deploy it as well so let's get started and we are back on our hostinger's dashboard I already purchased the domain name at the start of the video it's going to be jsmaster3pro.com hopefully you purchased yours as well if you haven't already you can do that right now the link is going to be down in the description if you haven't yet connected the domain to the setup the setup is going to be right here with a big yellow button but if you already connected it you can go to hosting and then you can go to the hosting connected that specific website and click manage right here we have our file manager which you can click and open here you can enter the public underscore HTML folder and you can delete the default.php file because we're going to replace it with our entire application so back in our application let's first close all of the currently open files go to view and then terminal let's stop it from running by pressing Ctrl C and then let's run npm run build this is going to create an optimized version of our application ready for production this process usually takes about a minute so let's leave it be and I'll be right back actually we are using Veet so this got completed in about 10 to 15 seconds so you can go to Explorer and you can find your new dist folder right here you can right click it and then click reveal in File Explorer or find in finder once you've done that you can enter this folder you can drag and drop everything into the hostinger's age panel this is going to take a moment to upload your files and there we go so we can close our hpanel go back to our dashboard and we can visit our domain and as you can see the website loaded we have our Adrian portfolio right here on our own custom domain hopefully you got something that matches your first and last name we have our wonderful 3D model incredibly fast servers and an incredibly nice looking website I'm really happy with all the animations 3D models but at the end of the day I'm happy with the hosting deployment and the domain name as well this is looking great and once again thank you so much for coming to the end of this video and you should thank yourself for building such a phenomenal portfolio that's going to play a major role in helping you achieve developer greatness as you can see for me the SSL certificate has been automatically installed if that wasn't the case for you you can go to security and then SSL and install it manually but as you can see the process is incredibly seamless everything works right off the bat incredibly fast servers SSL certificates fast slow times all of the things that are definitely going to make you stand out from the crowd especially with this beautiful 3D 3js developer portfolio with that said I want to thank you for coming to the end of this video if you want some more in-depth coaching feel free to check our courses right here on jsmastery.pro or if you want some deeper one-on-one mentoring with mentors definitely check out our JSM masterclass experience I'll see you there or I'll see you in the next video in any case have a wonderful day [Music] [Music]

Channel: JavaScript Mastery

Views: 590,638

Keywords: javascript, javascript mastery, js mastery, master javascript, 3d website, 3d animation, react three fiber, react three fiber tutorial, react three fiber portfolio, react three js, three js, three js tutorial, three js tutorial for beginners, three js react, three js react tutorial, 3d react js, react js 3d website, react js 3d portfolio, react js 3d model, portfolio website, developer portfolio, 3d developer portfolio, three js developer portfolio, 3d models

Id: 0fYi8SGA20k

Length: 173min 19sec (10399 seconds)

Published: Fri Mar 03 2023