React 3D Portfolio Website with Three.js | Build and Deploy Responsive React Portfolio

Hello friends today we are gonna create this beautiful portfolio website using react and 3js all these items on the website are 3D models so we can hold and rotate them as we want in this project you will learn 3js Basics and you will be able to create your own 3D shapes and you'll see how easy to import ready to use 3D models to your project we will also cover CSS animations and create this text transition without using any libraries after that we will create a contact page using a map Library so you can add here your own address then we will add a form functionality and when someone sends a message to you you will see that message in your mailbox immediately by the way this project will be mobile responsive so you'll learn how to use media queries in styled components finally we will deploy this website using hostinger it's one of the most popular hosting providers and the sponsor of this video as you know I deploy all my projects to hostinger from the beginning of the channel because the servers are super fast and it has a really user-friendly panel that you can easily manage your services and now when you buy hosting at hostinger you will get two extra months free and don't forget you will get a free domain at this price and if you use the link in the description below and llama Dev coupon code here you are gonna get an extra discount after purchasing you will be able to claim your free domain and after the domain registration we can set up our hosting I'll choose my new domain and let's finish the setup it's gonna take a while and here in this panel you can manage your hosting and domain and you can deploy here a hundred websites if you are ready let's create our application and deploy it here okay I created a new folder and inside this folder we will create a react application to do that we are going to be using vid you can create your application right in here yarn create with but there is a shortcut we are going to be using La model GitHub repository and in this Repository we have this branch and as you can see there is only app.js and main.js it's ready to start our application we don't have to delete anything or add any additional configuration so we are going to be using this branch so I will come here copy this URL and I will say git clone single branch the branch name I'm gonna paste my URL Dot and enter as you can see they are here let's install the libraries I'll say yarn and after that let's see what we are gonna have as you can see we have four sections and for each section we are going to be using synapse cooling effects so when I scroll as you can see it just skips one page to do that I'm gonna create here my components folder and the first component will be the hero section let's create our function this is going to be our hero section we are going to introduce ourselves our works and finally a contact page let's create them another one Who We Are works and contacts normally we create more sections but in this tutorial we are going to be focusing on 3js so we are going to have only four sections so let's open up the app.js and import our sections first one will be the hero section works and contacts okay to give this snapping effect we are going to need some CSS styles to do that we are going to be using styled components of course if you want to you can use a plain CSS or SAS that doesn't matter it's going to be really basic and you are going to understand everything so I'll say yarn at styled components okay right now instead of this HTML div we can create our style component to do that I will say const let's say container you can give any name here doesn't matter it's basically like writing here a class name instead we are going to directly create our components here so I'm going to be using styles and which HTML element I'm going to create is going to be edit so I will say View and I'm going to open up a back tick here and close and inside I can write my style just like CSS nothing different I will say height 100 VH so it's going to be a full screen container and let's give here a background code and let's say this purple color and inside of this deal I'm going to be using my container so let's run our application I'll say yarn run and there let's open up okay as you can see it's here and right now I'm gonna create containers for each component here and there are going to be full screen so we can snap like that and after that you'll learn how to give that effect so I can copy here and paste for hero section let's import this type components and let's say actually section because we are going to create container inside this section why I am doing this that because this is going to be the section and container is going to start from here as you can see there is a padding that's why I changed its name okay I will copy this and for this one back before don't forget changing here I will say section and the other one let's change this background color and we can see better another one and contact thank you as you can see the hero section who works and contacts by the way why it's not full screen let's check that because I didn't import style components okay awesome right now let's give our snapping effect to do that I'm gonna open up app.js and I will write here let's delete this background color and I will say scroll snap type is going to be on the y-axis and I will say mandatory so snap scrolling is going to work in any case and I will say screw Behavior smooth so when we scroll as you can see it's moving slightly not too fast and I will say overflow Y is going to be Auto that because we set height 100 VH in this case it's going to be overflowing but we are going to let that to overflow it's not a problem and finally I'm gonna delete the screw bar as you can see there is a scroll bar here I don't want to see that so I will say screw bar with and it's going to be no but it's not going to work for Chrome it's going to work for only Firefox so I'm gonna come here and say map kit scroll bar and display no let's see okay it's gone so I'm gonna open up the hero section and I will say screw snap align and it's going to be Center I'm gonna do exactly the same thing for other components camera scroll and as you can see it keeps the whole component okay perfect it works by the way I can change the text color it's going to be white and let's give a background image here I will say background URL we are going to be using an image here it's going to be in image folder let's create that image folder by the way I'm going to come here I'm going to create my public folder and insights image and I'm gonna drag and drop my images inside this folder like that we are going to be using these backgrounds so let's write it here so I can delete my backgrounds we don't need them anymore we are going to be using only one background like that okay so let's start with the hero section firstly we are going to have this network let's create I will close every tab here and open up the hero section so I'm going to create here another bar but it's better to create another component here let's create the function I'm going to copy this and paste here let's delete those and import style components and I'm going to import this now bar component here okay it's here so let's come here and create another styled component and it's going to be container as I said we are going to give a space so we are going to be using this container but before let's Center our container to do that I will say display flex and justify content Center that's right here the container View and inside neighbor if I give here any width and background color you are going to see better I will say background color and this purple color and as you can see it's centered that because we are using justify content here if I delete as you can see it's going to start from the left side this is why we are using justify content Center and in our example as you can see we are going to have two sections those links and those items let's create them first section will be let's say links is going to be a div and the second one will be let's say icons let's write them here I will say links icons and inside these links we are going to have our logo actually let's create here first and after we can create style components I'll say logo is going to be an image so I will say Source we are going to be using our image folder and inside logo.png let's check okay this one and after I'm gonna add here some links to do that I'm going to create a list here of course capital and inside we are going to have four items let's say list item I'll say home page and other texts here it doesn't matter and inside icons we are gonna have an icon and a button so let's say icon it's gonna be an image that's right here Source it's gonna be image folder and what was the name this I think okay search.png and finally a button and I will say higher now okay let's create others it's going to be logo list list item icon and button it's gonna be an HTML image list I will say UL this item Li and what else icon M button again image and a button okay as you can see it's that easy to create style components we are just writing styled dot in HTML elements here let's see okay I forgot something I think okay we didn't create icons I told I did but I forgot I'm Gonna Save and it's here so let's delete this background color and separate our sections those links and icons I'm gonna delete this I will say display Flex so it's going to be horizontal and I will say justify content space between as you can see they are separated I can align items let's say align item Center okay they are centered so what about those links they are going to be horizontal Also let's do the same thing here I'll save display Flags align item Center like that and I can give a space here between our logo and links to do that I'll say Gap 20 is going to be a 20 pixels space here maybe I can increase okay it's better I will do the same thing for our links they are going to be horizontal and I'm gonna give space between them display Flex cap to edit okay let's delete those dots to do that I'll say this style and not okay awesome but this logo is too big let's give a height height will be 50. by the way I'm going to separate them okay okay it looks nice let's check here as you can see there's a space here we can give a space for our container I will say padding 10 from top and bottom but I'm not gonna give from left and right so it's going to be zero okay so the left side is ready let's take care of this site again display Flags align item Center and I'm gonna give Gap and for this image I'm gonna give a width it's too big I'm gonna copy here and paste and the Gap will be 20 pixels and for my icon I will say 20 and let's give cursor pointer so we can click I can do the same thing for list items like that okay perfect and let's give a style for this button I will give this padding background color will be this pink color and the text color will be white like that let's delete this border and I can give border radius and finally we will be able to click here so I'm gonna give cursor pointer I'll say border Norm for the radius 5 pixels cursor pointer okay so the number is ready let's take care of these sections we are going to have two sections those texts and those images I'm going to close here and firstly I'm going to create a container again I should say display Flex justify content sensor now actually I should do something different here that because our container will be here let me show container and I'm gonna write something let's say hero section as you can see we have two items inside this parent if I say display Flex it's going to be horizontal like that we don't want to do that so I'm gonna change its direction so I will say Flex Direction column as you can see it's vertical right now so I'm Gonna Change here it's gonna be align item Center and I can say justify content space between this is our navbar and this is our container let's give a bit for this container if you remember a thousand four hundred and I will say display Flex and justify content space between I'm doing that that because remember we have two items this left side and right side it's going to be horizontal and let's create them I will say left and right of course you can give different name because when we change the style for the responsive design it's not going to be left and right anymore it's going to be top and bottom but I don't know they can stay doesn't matter let's delete them and create here left side right side and inside left we are gonna have this H1 tag we are going to have a div here that includes this line and this text description and a button so I will say title I'm gonna copy and paste and after that I'm gonna create another container let's say what we do and inside we are going to have a line it's going to be an image you are going to understand better right now and a text let's say subtitle or whatever you say it's going to be this text and this image and after this we are going to have a description let's copy and a button okay for the right side we are going to create this 3D model but before let's skip this section and add this image 3D model we will handle this but for now let's say in which and Source will be let's check okay this one Moon dot PNG of course in which folder let's check of course it's going to be a white screen we didn't create our items let's create them inside left we are going to have H1 tag what we do inside what we do we have align and subtitle after that we are going to create a description and button and inside this right section we are going to have an image let me write them quickly okay and they are here as you can see it's horizontal but as you realize this left and right section have the same width but in our example as you can see this part is a little bit bigger so for this section Flex will be two units and for this section is going to be three units you are going to understand right now I will say Flex 2 and legs three as you can see this side is bigger right now if I increase this right now it's two units it's eight units it means it's four times bigger than this side this is how it works okay let's separate them by the way okay let's enter those items and give a space between them to do that again we are going to be using display Flex direction is going to be vertical justify contact center and gap between them like that and for this title I can increase the font size let's say 704 and for this section for this Loop I'm gonna say display Flex align item Center and gap between this line and this text let's decrease this size I'm going to come here and say height 5 pixels oops okay like that so what about this P tag by the way I can change its color what was the name subtitle I think okay it's here again we are going to be using the pink color for the P attack on size will be a little bit bigger and color will be light gray like that awesome and for this button again it's going to be something like that pink color without border and text color will be white let's do that quickly I will say background color pink color and the text filler white font weight will be a little bit thicker like that let's give a bit otherwise it's going to be too large I'll say 100 pixels I'm gonna give a padding inside like that and border oh the radius five pixels and cursor pointer and what about this image let's change its width and height like that I will say object fits it's going to be contained so it's going to contain these canvas later we are going to give position absolute and it's going to be on this model but for now it can stay like that actually let's do that we don't need to wait for model I will say position absolute I'm gonna Center this to do that I can use top zero bottom 0 left and right zero and if I say margin Auto it's going to Center this vertically and horizontally let's see as you can see it's in the center of this section that because we didn't give position relative for the parent D if you don't do that it's gonna Center itself in the biggest parent but we don't want to do that I want to Center this in the right section so I'm going to come here and say position relative as you can see it's safe let's give background and see better I'll say yellow as you can see it's centered by the way my eyes it was not a good idea okay and we are gonna give an animation here I forgot that let's say animation you can give here an animation name I'll say animate it's gonna take two seconds and it's going to be infinite it's not going to stop and the timing function will be is so it's going to move slowly and I will say alternate so when it finishes its animation it's gonna turn back it's not gonna stop there let's define our animation here we are going to write the animation name animate and let's check our example as you can see it's moving on the y-axis to do that we can use transform effects so I will say to transform Translate Y as you can see we can choose 3D in this case we can move it on three dimensions translate X moves this on the x-axis and here we are going to be using y-axis let's give a big distance and you can see better as you can see it's moving on the y-axis 300 pixels of course it's gonna be 20. and perfect you can also write here a hundred percent it's exactly the same thing as you can see okay we created our first section let's take care of this component let's check it's going to be actually really similar but the difference is the model is on the left side it's going to be easy actually I can copy here and paste for The Who component I'm gonna paste of course I should change this name is gonna be who and the left side will be the model and the right side will be those texts I'm going to delete this and let's move this 3D model to here of course we don't need Nail Bar so I can't wait here and now I don't have to say flag extraction that because we don't have never so I can say justify content Center and I can delete here and here it's going to be exactly the same and as you can see the left side and the right side have exactly the same size so it's gonna be one and what they are going to be equal and I can cut this and paste for the right side because our texts will be here I'm going to take them under the right components like that and we don't have any image I'm going to delete this and keyframes okay let's change those items let's check I'm gonna copy this paste here Who We Are description and here CR works let's check okay perfect of course I can increase this button size let's say 120 okay later we are going to add here our model but for now let's check the other component okay again we are going to have two sections and we are gonna create this list let's close them and I'm going to open up box component and I'm gonna create my style components horizontally container left and right side and here list and list items let's move this here under left I will say list and list item let's see Li and UL okay let's give our style as always display Flags justify content Center and for the container I'm gonna give my width a thousand four hundred and I'm gonna separate the left and the right side justify content space between so let's give Flex for the left side and the right sides and I'm gonna delete those let's create our items here and after we can give Style I'll say container inside left and right and here list and list items let's see web design development illustration actually instead of creating here five items I can create here a data that includes our item names and using this array we can call this list item let's do that I will say data.map for each item inside yeah I'm gonna call the list item component and we are going to write its name of course if you are using map you should give a unique key here and it's going to be the item itself okay they are here let's enter this I'll say display Flags align item Center and justify content Center like that actually in our example it starts from here from the beginning so I'm not gonna say justify content it's gonna start here so let's separate those items and also I'm going to delete those dots I'm gonna come here this style is going to be known by the way let's separate them I will say display Flags Flex Direction and Gap and for each item I'm going to increase the font size it's going to be really big and bold we can click on them so I can say cursor pointer and I'm gonna give a text stroke in our example as you can see we have a stroke here we don't have any color so I will say color transparent we are not going to have any color instead we are going to give text stroke and it's going to be well pixel and white like that and here we are going to add our 3D items we are going to handle that later so let's create our animation here when I hover over any item we are going to see a background moving through this text just like here to do that I'm gonna create one more text right under this text and we can give a color for that text so we are not going to make any changes for the first text we are going to change only second text color you are going to understand better right now so let's create our second text to do that we are going to be using after selector I will say after and we are going to give here a content and we can write anything we want here for example let's say test as you can see it adds this text right after our item but I want to move that test right under my text here to do that we can use position absolute and I'll say position absolute it's going to be top 0 and left 0. and again remember if you are using absolute positioning the parents should be positioned relative and as you can see it starts from here what if I change this content name content text let's say web design and right now as you can see it's under my text perfect this is what I want and if I change its color let's say pink for example as you can see we just filled our text only thing we should do is giving an animation but what about other items here so instead of this content we can make it Dynamic to do that we can use a prop here I will say text and it's going to be the item so using this prop text prop we can reach to this item it's really easy to do that using start components I'm going to come here and say take the props and return me props dot text and right now as you can see we have all our texts here now let's give our animation when I hover over my list item I'm Gonna Change days after selectors background color I mean text color let's do that I'll come here and say add a hover effect and then I hover over this list item it's gonna affect this after selector let's write here color and you can see better I will hover as you can see this is what they expected but instead of giving track the color it can give an animation so I will see animation animation name let's say move text it's gonna take one second or let's say half second is going to be linear this is the timing function basically says its speed will be linear it's not going to be increasing or decreasing and let's give our keyframe the animation name move text and then I'll say two and what I'm gonna do here so if I give here a text color let's say pink and if I make it with 0 we are not gonna see any color as you can see they are still here that because it's overflowing I will say overflow of hidden like that and if I increase its width it was 0 and it's going to be a hundred percent let's see okay by the way as you can see it's moving to other line to prevent this I will say white space and it's gonna be no wrap okay awesome but as you can see right after the animation it gets back to the initial position to prevent this I'm gonna come here and say both so after the animation it's gonna stay there like that it's that easy guys so we don't need any Library we don't need JavaScript we just need to know a little bit CSS so I can decrease this font size a little bit as you can see it's really big and it doesn't look centered so I'm gonna come here and let's say 90 pixels okay it's better and right now we can create this contact page let's close this and open up contact quickly let's create our sections container left and right side and we are going to have a form here which includes this title input text area and a button I'm gonna write it on the left it's going to be a title inputs by the way let's change them H1 tag input text area and a button and of course after this title we are going to have our form and that's all I think let's create them here I'll say container left right and here we have our form title let's copy this input I'm going to give a placeholder let's say name one more is going to be email and a text area and it's going to be write your message and finally a button and it's going to be set as you can see it looks really weird that because it's horizontal let's give a style for our style components let's firstly separate them and I'm going to delete those that are going to be empty and let's start firstly I'm not gonna give a thousand four hundred that's because in our example as you can see this map contains all these right side so I'm gonna say with a hundred percent I'll say display Flags justify content space between I'm gonna separate right and the left side and I can give a gap between items like here let's enter this form but before I'm gonna give Flex one and I will do the same thing for the right side they are going to be equal and I will say display Flags online item Center and justify content Center we cannot see right now because we don't have full screen map here but if I come here for the container and if I say height 100 percent as you can see it's centered let's change its font weight and after that we are gonna make this form vertical I will see font weight 200 like that um for this form let's give a bit I'll say this by flags flag extraction and gap between each item will be 25 pixels like that and for each input and text area I can give some padding let's say padding 20 I will copy this and paste for text area and I'm going to change the background color of this input let's say light gray maybe a little bit lighter like that let's slate this border and give a border radius 5 pixels I will do the same thing for text area and this background color and what about this button let's check as you can see it's going to be pink and the other styles will be just like this input background color pink text color is going to be white I'll say Porter known font weight will be bold cursor pointer and I'm gonna give a border radius 5 pixels of course we don't have any padding let's give 20 okay awesome and I can increase the row number of this text area as you can see it's bigger by the way our form starts here but in our example it starts here we are gonna fix that but before let's give a row I will come here and I will say Pro let's say touch okay it's bigger so what about this position let's check the left side I'm going to give a background color here okay as you can see it's centered but I want to see it on the right side not on the center to do that I'm gonna delete here and say flex and okay perfect so I can delete this and let's create a map here to do that we are going to be using react simple Maps I'm gonna copy this actually I'm using yarn so I'm gonna copy here I'm going to open up my terminal and new terminal and I will say yarn at react simple Maps let's check the examples as you can see there are many options here you can add here any country any City or even continents in our example we are going to be using the Europe continent let's check our documentation as you can see we are gonna need a new component that we can add our map and in this example it uses the whole world like that and also we will be using annotations as you can see we will be able to show our CV so let's use this example this is actually what we need I'm going to open this sandbox and we are going to need this component I will copy here and I'm going to explain them and let's create a new component and it's going to be map.jsx let's paste I'm gonna shrink here and close my menu as you can see we are going to create our map first and inside this map we are going to add our location using this prop we can pass here any map as I said it can be the Earth any continent country in our example we are using this Europe map I'm going to open here these features and I'm going to add it to my application let's open up the public folder features and I'm gonna paste as you can see it includes every country and its borders let's use that in our contact page in the right side I'm going to say map actually let's change this name our file name is map just like this let's check and it's here as you can see we can choose any country here and if you want to we can add different color when we click here but we are going to need only this annotation and also as you can see it's overflowing so I need to give a width and height I will come here and format I'm going to add here a style in our style I will say vid is going to be a hundred percent and height okay it's here right now I want to change its color let's come here and change this color it's going to be a dark blue just like that and let's come here as you can see our map is a little bit bigger so we can give a zoom effect and also we are going to change this color it's gonna be white let's say white and stroke is too tick so it's going to be thinner and the text will be white also just like that let's give a zoom effect as you can see there's a scale option here if I increase here we are gonna see a bigger map right now if you want to you can give another annotation for example here so I can duplicate this annotation and I can change the coordinates here just like that of course you can find your coordinates on the internet and let's change this name and that's all and also you can change the text and the line position as you can see I can change here right now it's closer if I say 22 as you can see it moves to left side and you can do the same thing for this stroke its Position will be here let's say zero as you can see we don't have any direction but if I change it's gonna move here okay and finally let's take care of this contact form when I send in a message we should be able to see it in our inbox to do that we are going to be using email.js let's first collect our data from our form so I'm going to come here and say on submit and we submit this form we are going to run this function handle submit let's say const add or submit I will say event prevent default otherwise it's going to refresh the page and after that we are going to take the input values and send it to email Js by the way I will say type submit and when we click on this button we are going to run this Handle Sub bit function okay let's open up email.js and see what we are going to do okay if you go to email.js.com and after the login process you are gonna see this dashboard so what I'm gonna do is to add here any email service I'm going to add my Gmail and after that I'm gonna create an email template basically when someone sends any message to us we are going to see this template we are going to handle those names from the react application let's say name this is going to be our name and this is going to be the standard name this and this and also we can add here something else so let's say email is email so basically we are going to receive the username here and email here and the message okay I'm Gonna Save this and I'm going to check here account and this is our public key basically we are going to need this key this service key and the template key let's see how we are going to use them I'm going to open up documentation and let's search for react and as you can see we are going to need this Library let's install I will say yarn at email Js and after that we are going to create a ref and we are going to add it to our form as you can see it includes username user email and message we are going to change it it's gonna be just name and email a message and using this graph email JS is gonna reach to our data and send it to our service using this service ID and we are going to add here our template ID and the public key so let's copy here and paste of course we should import this first just like that and let's create our ref I'm going to close here I will say const path use ref hook of course you don't have to use use refwork you can basically create use statehook for each input and send here an object but the better option is using graph I'm gonna do that so I will say graph equals this draft and of course its name will be graph and let's add our service ID template IEM public key and paste here service ID and finally public key just like that and if everything is okay it's gonna return our result text so what I want to do is to create here a use statehook and show our errors I will say error set error or we can use success instead of error use state at the beginning it's going to be false and if everything is okay it's going to be true set success and true if you want to you can write here now and if there is an error you can change this to false and if it's false you can show your message or if it's successful you can show different message let's do that I'll add here a condition if it's successful right here this message and there is something important here in our template remember we are using the username message and email we are going to need them so I will come here and say name will be username sorry name and it's gonna be email and finally message okay let's try okay there is something wrong because I just created all my functions before my component is going to be inside of course so let's see I will say test test I'm gonna send and as you can see it's successful let's check our mail as you can see it's here and message from test test and email is test why I didn't change their names but anyway it works and that's all I think we can create our models right now but before creating I just want to give you a quick tutorial about 3js of course it's not going to be a complete Advanced 3js tutorial it's going to be just Basics I'm gonna teach you how to create basic shapes how to use lightning and how to import 3D objects to your project so what I'm gonna do is to create here one more component so we can test 3.js so I'm going to close here and let's say test and I'm gonna add it here okay firstly we are going to install our dependencies let's say yarn at the first dependency will be 3js and the second one will be react 3 fiber and the third one will be react 3 try let's import them and start our tutorial I'm gonna show you this right now I'm gonna create a container first I will say container styled I'm just gonna say 100 VH is a hundred percent basically our component will be full screen like that firstly we should create three JS cameras I will say cameras it comes from react free and fiber basically this is our frame and inside this Frame we cannot create any HTML element I cannot say do I cannot say span or anything else if I save as you can see we are going to get an error because it's a different environment it's not like an HTML anymore so basically we are gonna create only three JS items inside these cameras so let's add a geometry which basically means a shape any shape to do that we should wrap it with mesh it's kinda RDU by the way you don't have to import anything as I said it's just like an HTML you don't have to import its elements and inside let's create a box to do that we are going to be using box geometry as you can see we have many geometries here you can create any shape you want let's create this one I will say box geometry and I'm gonna give its size to do that we are going to be using arcs and inside this array we are going to give our Dimensions let's say 5 5. if I hover over here you are gonna see that we are defining its width height and depth if I check out my react page by the way I can scroll so I'm gonna take this and paste here so I can snap scroll and as you can see this is our Cube of course I can decrease this size okay it's better and as you realize it looks like an 2D object we cannot see other edges and I cannot move it to prevent this we are gonna need 4-bit controls inside these canvas and right now as you can see I can move it and also I can zoom in and zoom out but I don't want to do that not because in our example we shouldn't zoom in or out for our object so I'm gonna come here and say enable zoom and it's going to be false right now I can just move it like that and also you can rotate this object automatically even if you don't touch it's gonna rotate so I'm gonna say auto rotate and it's going to be true like that as you can see it's turning for now I can delete here after that we are gonna enable and let's give a color to do that we should add here three JS materials let's check as you can see we can give any color using materials and there are many options here you can give with shadow basic material as you can see it's a plain color let's use this standard one I will say mesh standard material and let's check its properties as you can see there is a color we can change it I will say color and it's gonna be let's say red if I save and check as you can see we have a material but we don't have our color it's because we don't have any light let's add to do that I'm gonna come here and add ambient light and its intensity let's say one and right now we can see the color but we cannot see our edges that because ambient light gives a same light for each side of the object but if I use directional light and let's give here any position of course inside an array and right now as you can see we give here more light and here a little bit less light in this case we can see the old dimension of this Cube perfect and also you can add any image as a material or you can add here any text let's add a text to do that I'm going to come here and I'm going to create some small components inside this material and the first one will be render texture and inside this texture we can add any color let's delete this one right now and I will say it's a background color and I'm going to give my colors using arguments and let's say pink and I'm gonna add here a text and let's say just hello and here I can give any font size let's say three and I can give any color like that of course I should import this it's going to come from dry and to use those items we are going to attach here map and as you can see our color and this text is here but there is something weird here we don't have any perspective for the material I'm gonna come here and say perspective camera I'm gonna make it default and I'm gonna give any position here and if you remember our box size is 1 1 and 1. let's actually increase this a little bit let's say two and our texture position will be 0 0 and 2. and as you can see we just gave 0 for x and y axis this is why we see it right on the cube and as we realize this text font size is too big I can come here and decrease this font size and right now it's much better if I change the color like that but I want to give this pink color as in the r example and it's much better right now and how I'm gonna give an animation for this text basically we are going to be using 3js use frame hook and using that hook we are gonna change our text position on the x-axis as you can see it allows us to execute any code in in the rendered frame and when we run any code it's going to be invoked just before frame is rendered after rendering this box we will be able to give Animation for this text we can use use frame in only cameras we cannot create it here so the better option is to move this object into another component so I will say cube.jsx let's create our function and I'm gonna move it here of course I'm gonna import them right here of course I'm gonna use it in my parent view okay and I can call my Cube here foreign okay it's still here right now we can use use frame so I'm gonna come here and say use frame and we are going to get a state and let's see what's inside this state and as you can see in any second this state is changing and inside this object we have a clock and in any moment it calculates this time because it's an animated object and we should listen every moment of this object so I can use this elapsed time and using that time I can change this text position on the x-axis it can be a little bit confusing but if you create some 3js projects you are going to understand everything better because it's a little bit hard to understand this concept especially if you are not familiar with 3D objects animations but believe me just read the documentation just create some projects and you are going to understand everything better okay so how I'm gonna reach to this text basically I can create here a user hook so I will say const text draft is going to be use ref and I'm gonna pass it here using this graph I will be able to reach to my position so I can change it here so I will say tag strap and its current value and position on the x-axis if I say state DOT clock ellipse time as you can see it's moving to right side but we cannot see it again that because the number of this time is increasing all the time so our text is going to the right side without stopping to prevent this we are going to be using math I will be using sine and I'm going to pass elapsed time if I do that as you can see it stops at the edge of the cube and it continues to the left side and I can increase this speed let's multiply this by two and as you can see it's faster okay so let's use it in our project I'm gonna open up this whole page and I'm gonna use it here let's copy this canvas and let's import them like that so I'm gonna come here and I'm gonna delete this size instead we are going to give size using our canvas to do that we can use camera property I'm gonna give any Zoom effect using 4 let's say 25 I'll say position 555 and in this case I'm gonna change this position also as you can see we changed its size and perspective and also we change the text position in this case I can increase the size and perfect it looks pretty nice and I showed you this camera effect that because I want you to understand that there is not only way to solve problems in 3js you have many options you can change your item size or you can give any camera zoom effect you can give a rotation for your 3D item using use frame or you can use only Orbit Control and right here auto rotate as you can see it's moving and when you play around those properties and when you read this documentation I believe that you are gonna build more creative projects okay so let's add here another object so we don't need this task anymore you know the basics you know what the cameras is Orbit Control lights and how to use shapes so I'm gonna delete this and let's copy here and open up the hero section and here for the right side I'm gonna paste it and instead of this Cube we are going to be creating three JS spear let's search for it basically we are going to create this spear but as you can see we are going to give this Distortion effect let's do that I'm gonna say spear it comes from react 3 dry and I'm gonna give some arguments and as you can see it includes its radius width and height so let's say one hundred and two hundreds you can give here anything you want you can just play around here and I'm gonna scale this let's give one at the beginning and later we are gonna change it and to give Distortion effect we are going to be using a material and it's going to be mesh distort material here let's import them by the way canvas Orbit Control Spear and distort material I'm gonna change this how to rotate oh we have just imported them okay it's here I'm gonna delete and let's see okay as you can see under this image we have our object actually let's comment this out this image and we can see better as you can see it's here and to give our effect I'm gonna add some properties firstly I'm gonna give a color it's gonna be this dark blue color and I'm going to say attach and it's going to be a material and I'm gonna write here how much I want to distort let's say 0.5 as I said you can change here you can give any speed let's say two okay by the way let's play this camera effect and let's see by the way this material should be in our object of course let's see okay it's here but it's too small let's increase here 2.4 okay if you want to you can change its lights option you can just play around this ambient and directional light or you can change this color like that and let's add our image okay perfect and we have created our two sections let's create the other one and here we are going to have a functionality when I click on any list item here we are going to show different components so I'm not going to create different items for each component let's create for web design development and product design so when I click here we are going to show here the web design components I'm gonna create them let's copy this and paste like that and product design okay let's close everything and open up the works component and here I'm going to create a use state and I'm gonna store those texts there at the beginning it's going to be web design and when we click on any other list item here we are going to update that state so I will say const work set work use statehook and at the beginning it's going to be web design let's write here our condition I will say if work equals web design show here the web design components else if it equals development show up here developments and if it's not show the product design of course it's not the only way to call our components but anyway it can stay like that we have only three items and I'm gonna import them like that and when I click on this item let's say on click set work and it's going to be the item as you can see web design is here I'm gonna click here it's development if I click here product design okay it works basically we are gonna use ready to use 3D objects like this tablet or this react icon or this shoe of course we are not going to create them we are not a 3D designer but we can find them on the Internet and we can import to our project actually it's really easy to do that okay let's search for init model using sketchfap I'm gonna write here for example chair and I'm going to click downloadable and let's choose a basic one for example this one I'm gonna come here let's check first as you can see it's a nice chair we can use it I'm gonna come here and download as gltf and I'm gonna open up this zip folder and inside this folder as you can see we have some items and this is our 3D object but how we are going to import this to our project firstly we are gonna need gltf pipeline you should install this Library globally so I'm gonna open up item or if you are using Windows you can open up the terminal and I will say npm install and I'm going to install globally gltf pipeline so what this Library does is basically it takes our 3D model with all its files its textures and creates a new gltf file and we are going to take this file and convert to the jsx file you are going to understand better right now if I move this gltf file into my project it's not gonna work firstly I should create a new file and the new gltf file will include this pin and textures so let's see as you can see you can convert gltf to glb glb to gltf but we already have gltf file so we are going to be using this one I'm going to open up my folder I will say desktop chair and I'm gonna take the scene.gltf and it's going to be chair let's check as you can see it's here and as you realize its size is bigger that because it's the combined version of all these files but it's not enough we should convert this to ajsx file so we can use it as a component and to do that we are going to be using gltf jsx and as you can see it allows us to transform gltf files to jsx files let's do that I'm going to copy paste here and I'm gonna take the chair file and transform and as you can see it has created a new file and a jsx file let's move this jsx file into components like that but also we should import this transform glb file into our public folder like that and let's see I'm gonna open up web design and let's create here a canvas and I'm going to add orbit controls let's disable the zoom enable Zoom will be false and here I'm gonna add my new jsx file it's going to be chair let's import like that and let's see there is no export default let's change it I'm going to open up my component and add here export default let's refresh okay it's here but we cannot see it we should give some lightning and change the size you can give it as we always give but also I'm gonna show you one more thing you can add here a stage and wrap your component I'll say environment is going to be Siri and intensity it's going to be 0.6 basically in this stage we can give an environment and it includes a certain lightning so we don't have to specify anything let's say and see and as you can see it's here awesome so I'm gonna import this object this shape and the issue so I'm gonna move my jsx files here and 3D models here and let's use them for the web design we are going to be using Mac let's import this I'm going to change here it's gonna be Mac let's see okay it's here for the development let's copy here and those I will add my component for the last one product design again I'm gonna copy here and change the name let's see okay it's here our shape and shoe of course we can change its color let's open up the jsx file so as you can see there is a material here we can use our color and let's say purple and perfect you can give any color you want and what else we have as you can see there is a small description here let's use it as I said we cannot add here any HTML element instead I'm going to create here react fragments or a div and I'm gonna add here a description let's say P tag but we are using styled components we can create it here I will say const description styles A P tag or we can say div doesn't matter and I'm gonna add it here oops what happened react fragments here I'm gonna close okay and I'm gonna copy and paste my text let's add here R style I'm gonna give width and height let's say 200 height 70 pixels I'm gonna give a padding background color will be white and Border radius let's check as you can see it's not here it's under our object so I can use position absolute and let's give any position here you can position this anywhere you want but I will say 100 pixels write 100 pixels but remember if you are using absolute positioning you should come here and for the right sides okay here I'm gonna say position relative or if you want to you can give position relative for the whole section so it can be somewhere here let's do like that I'm gonna cut this and paste for the section all right now as you can see it's here by the way the color of this text is white we are gonna change it let's say color black and font size will be smaller unfortunately it will be thinner like that okay so I can do the same thing for others but I'm gonna give different positioning I'm gonna copy this description and paste for here and here and this description okay let's change it for example I can say bottom by the way I should import this as you can see it's here maybe somewhere here a little bit more where is the product design here it's gonna be 200 like that and for the development maybe somewhere here let's say 200 by the way there is a auto rotate you can delete it or it can stay and like that okay awesome so it's ready right now we can take care of the responsive design I'm going to open up my console and choose here mobile version and as you can see it looks pretty weird so we are gonna make some changes firstly I'm gonna close everything here and open up my app.js and I'm gonna comment this out and other components it's going to be only this hero section yeah I'm gonna handle this first let's open up and this network right now I'm gonna comment this out this container and we are gonna handle only this nail bar for now okay to give responsiveness we are going to be using media query so I'm gonna come here for Section I will say media is going to be only screen and I'm gonna give here my condition I'll say and maximum width 768 pixels so if it's smaller than this size it's gonna apply here so what we want to apply firstly I'll say with a hundred percent so I'm gonna copy this for the container as you can see it's 1400 we are going to change it and it's gonna be a hundred percent as you can see it contains this screen right now and I want to see here only my logo this icon and this button basically we don't need those links let's delete I'm going to come here and I will say display none but we removed our logo also it's not going to be links it's gonna be of course this list because it includes our logo let's save and perfect I can give any padding here let's say padding tan perfect right now I can open my container and take care of my other components as you can see my container is display flex and my items are horizontal let's change it firstly as you can see its height is 100 VH I'm gonna change it it's going to be 200. for the container it was horizontal I'm gonna change it Flex direction will be column align item Center and just like one time Center okay but we don't have any width as you can see it's too high I will say with a hundred percent foreign like that of course it's overflowing because of this image and remember we have a flex here and for the right side so I'm gonna change them they are gonna be one two x one and here so they're going to be equal and remember we said height is 200 VH it means 100 via H will be this left side and 100 VH will be the right side here and I can Center my items here okay they are centered but the link is still same sorry title not link so I will say text align Center and for the description I can decrease this font size or I can give here padding perfect and I can Center this the xli center awesome and what about this image let's come here and give a width 100 percent for this image let's give 300 and 300. by the way right here is empty because there is 100 VH here actually we don't need that it can be a hundred percent that's because if it's 100 BH it's going to be 100 VH Also let's see okay perfect it's here and this image and I can open the other ones let's open up this one okay and I can delete this group we don't need to see that display known and for the right side I will say align item Center and text align Center like that and for this title I can decrease this size it's too big where is this title here I'm gonna come here and say font size 60. okay and the other one I'm gonna come here and as always it's going to be a hundred percent and full extraction will be column so we are gonna see our items here first and then this 3D model but those are too big let's change firstly I'm going to come here and say pelling 20 and for this list item font size will be 24 pixels color will be white I don't want to see those Strokes so I can delete let's copy this and it's going to be zero pixel we are going to have only text color like that let's enter this justify content Center perfect okay it looks nice but we should change those descriptions and this is here basically I'm gonna put this on the middle of the screen so let's open up web design for this description I'm gonna say top zero bottom zero left and right zero and margin Auto and as you can see it's centered so I'm gonna do exactly the same thing for others I will copy here for development and product design and finally for the contact page let's open up basically I'm gonna delete my map so I can say display Norm you are going to see only left side which is our form and for the left side I'm gonna say justify content Center that because it was flex and remember and for this form it was 500 I'm gonna reduce this and it's gonna be 300. like that okay it's that easy guys of course you can do it for other screen types for tablets small screens large screens but I'm gonna do this only for mobile devices for others you can change using this media query you already know how to do that okay I'm gonna close everything and right now let's deploy our application so I'm going to open up my terminal so I can close here and I'm gonna say bit and build let's open up and as you can see there is a build folder here basically we are going to take those items and upload to our server so let's open up our dashboard and here there's a file manager Now using this manager we are going to upload our files and this is our default folder we are going to upload everything inside this folder and there is a PHP file inside let's open up our website as you can see this is a default page we are not going to use it anymore let's delete and I'm going to import my files here let's choose file or build folder and I'm gonna choose my files and then I'm gonna upload folder this one let's check okay it's inside and one more and here so let's see I'm gonna refresh the page and as you can see our application is ready let's check play around and it works perfectly let's see if it works or not John if there's a message here it means it's successful I'm gonna click as you can see it's successful we are not seeing any error here and it works as we expected and also our connection is secure right now that because we have used hostinger SSL certificate and that's all guys I hope you liked it if you learned something new today please like the video and don't forget to follow Lama dev's social media accounts I hope I'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 284,390

Keywords: react, react js, react portfolio, react website, react project, react app, react responsive design, react styled components, react portfolio website, react animation, react three.js, react three fiber, react three drei, portfolio html css, three.js, 3d website, three.js website, three.js portfolio, portfolio contact page, personal portfolio, react deploy, lama dev, portfolio, 3d animation, 3d effect

Id: qALsVa-V9qo

Length: 103min 10sec (6190 seconds)

Published: Tue Feb 28 2023