Animated Portfolio Website with React & Framer Motion | React Project for Beginners

Hello friends today we are going to create a beautiful portfolio website using react and framer motion and you will learn tons of react animations when I refresh the page you can see this transition we will have this animated button and the sliding text behind and here we have a menu button when I click this circle expands and shows our links and this button changes shape and we will create these animations for the list items and after that we will create this Parallax section and you will see how easy to create these kind of effects using react in this section we will have this transition and some H effects another parallx and here we have our projects when I scroll down or up we will see this animated progress bar and this text transition finally we will create a contact Section and you'll learn how to animate svgs easily and this contact form is functional when a user sends a message you will receive that immediately in your mailbox it's a great project to understand animation basics transitions scroll effects framer hooks responsive design and more and at the end of the video we will deploy this website using hostinger as you know it's the hosting sponsor of lamad and I create different projects using hostinger every month on this channel and for this project we will be using business hosting plan you can create a 100 projects using this plan and you will get unlimited bandwidth a free domain and a free SSL at this price choose a a time period here and if you use the link in the description below and lamad coupon code here you'll get an extra discount after purchasing you are ready to claim your free domain I will say animated portfolio let's claim after the registration let's get back to the dashboard and install our hosting create an empty website I'll choose my domain and finish the setup it's going to install your hosting and when it's ready you can open up the H panel and in this panel you can manage your websites and domains you can set up email with your domain name and using this file manager you can deploy your websites so if you are ready let's create our application and deploy it here okay let's open up vs code and create a new project and and inside this project we will install our react application to do that you can open up your terminal and say mpm create with and it's going to install a new application but I recommend you to use this GitHub repository and this stter Branch because here we don't have any unnecessary files and codes we are going to create everything from scratch and also we have all the images that we are going to use during this tutorial and the font family and also if you watch this video after the release date you not going to have any errors because you will be using exactly the same versions of the libraries so it's going to be much easier to follow this tutorial but how we are going to install this the best option is to Fork this repo and work with your own repost story after clicking here it's going to create your own repost story and on your your own repost story just come here and copy your link and say get clone and your link but in my repository I'm using multiple branches the first one will be this starter branch and at the end of the video I'm going to create the completed version of the project so I have to provide which branch I'm using so I will say single branch and the branch name starter but if you Fork this project you don't need to do this just copy your URL and say get clone and your url okay I want to install everything inside this project so I will say dot and enter okay they are here but we don't have our libraries let's install I'll say mpm install and it's ready to start I will say mpm Rand Dev or if you are using yarn yarn Rand Dev let's open up this URL and our website is ready before creating any component let's see the main structure of our application as you can see we have this hero section this Parallax Services section and portfolio section and finally this contact Section and between each section we are using snap scroll transition so the height of the each section will be 100 VH and they will contain all this screen and after we will be able to give this effect let's do that let's create our sections I will come here and open up my application let's close here and close this sidebar and I'm going to create my first section let's say hero section parallx Services another one our projects let's say portfolio 1 2 3 and finally contact so let's create our CSS file but in this project we are not going to use directly CSS we are going to be using SAS I'm going to open up my terminal and I will say mpm install SAS and I want to give here the version number is going to be 1. 68.0 why I am doing this because as I told you if you watch this video after let's say 1 year you might have some problems if you are using the different versions this is how we can prevent this I will say enter okay let's shrink this back and create our file I'll say app. CSS let's import app. SC scss okay of course you don't have to use SS you can directly use CSS but it's going to make everything much faster we don't have to give class name for each item when we start creating our Styles you are going to understand better so let's come here and say section and each section will be 100 VH let's see as you can see hero and others okay but how we are going to create this scroll effect it's really easy I will come here and and say HTML so it's going to apply for our whole document and I will say scroll snap type we are going to scroll on the Y AIS and I will say mandatory and I'm going to give scroll behavior and it's going to be smooth so when we scroll the animation will be a little bit slower and it's going to look better and here I will say scroll snap align and it's going to be Center let's see I will scroll as you can see I'm just touching and it shows another section perfect it's that easy guys by the way I can give some default styles for example there's a space here let's remove that I'll say padding will be zero margin will be zero and both box sizing will be border box as you can see there is no space and I want to change this font family if you remember we are using Google fonts and this font family let's add it here and it's going to be DM sense and perfect let's give our default background color as you can see it's going to be this dark color let's choose body and background color will be let me copy this it's going to be this color and the default text color will be light gray okay and when we create a link here let's see and let's scroll here and as you can see it has a default color and this underline let me zoom in okay let's remove that I'm doing this in app CSS because it's going to apply for each component so we don't have to write it again and again so I will say text decoration known and the color will be inherit it basically means take the color from the parent and in this case our parent is this body and it's going to be light gray like this okay let's zoom out and let's create our first component as you can see we are going to have this NAB bar and after that this hero section let's come here and create a new folder and it's going to be components now you'll see nbar inside nbar jsx and CSS let's create our function and import our file CSS file naar Doss I will give here my class name and let's use this in our app inside this section I will say now and let's see what we are going to have firstly we are going to create one more component here and it's going to be our navigation bar and after that we are going to have this logo and those items so let's close here and here and I will say add here sidebar that we are going to create later and after we are going to have a rer and inside this rer we are going to have our logo and social icons so let's say span I will just say Lama there you can write your name or whatever you want and after that I'll say links or let's say social and inside we are going to have our links you can write here your social media address but I'm going to leave it empty and inside I'm going to create an image and the first image will be this Facebook icon and after that we are going to add the others okay so I will say Facebook and I'm going to duplicate this link and I'm going to write my other images okay firstly let's give a height for our nebar in this example it's 100 pixels and after that I'm going to Center this rer we are going to have space here and here now I will say height 100 and inside nbar we have rer this is why we are using SAS as you can see we can write our items inside the parent and I will say maximum width is going to be the size it's one of the most popular break point and I will say margin Auto and it's going to Center our item like that and let's separate our logo and those links to do that that we can use flex box so our items will be horizontal let's Center them vertically align items Center like that but I want to separate them so the logo will be at the beginning and our links will be at the end of the component to do that I will say justy content space between perfect let's give a stab for this logo did I give class name or not okay actually we don't need we have only one span here so I will say span font weight bolt okay and what about those icons let's check as you can see they are smaller and there is a space between each item so we can use flexbox again let's come here and say social display flags and gap between each item will be 20 pixel like that let's make them smaller I'll say image tag and they are going to be 18 pixels okay but as you can see this dropper is not centered let's check because as you can see its height is is not 100% so I will come here and say 100% and perfect okay so right now let's see how we can give Animation to do that we are going to be using framer motion let's open up our terminal and install our library mpm install framer motion and again I'm going to write my version and let's install okay it's ready so let me show you how we can use framer motion to do that let's actually create here a temporary component actually I can write it here and I will say test and let's use it here I'm going to comment this out and write my test let's come back and close this sidebar and inside I'm going to create a box let's give a class name for the parent I will say crash course or just course and I'm going to try to animate this box let's give some style first let's write quickly it's going to be 100 V8 and I'm going to Center everything and for the Box let's give width and height and it's going to be white okay when you don't use any Library like frame or motion you have to come here and create a transition and right here your transform name and the duration and the animation timing function and after you have to write here transform and choose your effect and if you want to use some complex animation you have to create an animation and give some key frames and you cannot trigger your animations whenever you want if you want to do that you have to write it in your component and use conditional Styles and it takes a lot of time to prevent this we are going to be using framer motion and using this Library we will be able to give some animations drag and drop effects scroll behaviors like that and some path animations SVG animations it's really easy to use as you can see only thing we should do is replace our HTML elements with this motion HTML elements so if you are using do you should just write here motion. D if you are using H1 tag it's going to be motion. H1 tag and after that you can give this animate property and write your effects here let's try I will say motion do do of course I have to import first I will say motion from frame motion and I will say animate and inside this object I'm going to say oppacity for example it's going to be zero as you can see it's not here let's refresh the page and we have this little animation if you want to make it longer you can use transition and inside this object you can give any duration let's say 2 seconds I will refresh as you can see it takes 2 seconds and you can give any delay for example it's going to be 2 seconds also in this case it's going to wait 2 seconds to apply this transition effect let's refresh as you can see it's here after 2 seconds it starts our animation and what else you can do you can give here the initial State let's say at the beginning opacity will be zero and scale will be 0.5 and after that we are going to increase this opacity and the scale will be one let's see I will refresh as you can see it's going to wait 2 seconds and after it's going to start our animation and you can write here any animation you want let's say x for example and it's going to move our box on the X x axis and I will say 200 pixels for example let's actually delete this delay and I will refresh and perfect I can do the same thing for y AIS 500 perfect and what else you can do you can actually trigger your animation what I mean by that that's Del delete those and this animate I will say while hover as you can see we have menu options here while hover means when we hover over our item when we click when we hold our item and drag and when it's in the view Port but for now let's create hover effect and I will say opacity will be one scale let's say to of course inside this object let's refresh of course it's not here because opacity is zero let's make this 0.5 at the beginning okay I will hover over as you can see it works as you expected and I can do the same thing for what while tap when I hover over nothing is changing but if I click as you can see it works and I can give here drag property and in this case I can hold my item and move it wherever I want let's comment this out and you can see better like that and when I release as you can see it's going to have this effect of course you can create here any border and what else actually let me show you this while in view also as you can see it works directly because we can see this item in our view Port but if I come here and create one more test and when I scroll and when I see my box as you can see only after that it's going to start working and when I scroll up I'm going to see my item again perfect so when it's not in the viewport not in this screen its Position will be the initial position and as soon as as we see our item it's going to start our animation so what else we have I can show these variants if you have some complex animation or many items inside your initial State or the animation State you might want to create here your variants I will say for Visible it's oppos will be one and if it's hidden it's going to be zero and we can use those variants in our framer element I'm going to delete them and I will say variance I'm going to pass it here and I will say the initial state will be hidden and the animate will be visible as you can see it's really quick because we don't have any d so you can give your transition here okay and the best thing is you can actually use any condition so instead of those initial and animate I can come here and write animate and right here in a condition let's create a state here for example I will say open set open use State hook at the beginning it's going to be false and let's create here a button when we click here we are going to switch our state so I will say on click set open if it's false it's going to be true if it's true it's going to be false and I can write my condition here I will say if it's open make this visible if it's not hidden let's refresh as you can see it's hidden I'll click and it's here [Music] again perfect and also you can give your transition here directly inside your variable so let's say x and I will say transition and the duration will be again 2 seconds I will click and for hidden as you can see it's not 2 seconds it's the default duration and what else you can give here the transition type and by default it's twin but also you can make this spring it's one of my favorite effects let's click as you can see it's going much faster it's passing the line and after coming back actually let's make this smaller I will click as you can see this effect but if you are using spring you cannot give here duration it's not going to work instead you can use stiffness let's say 200 if I make this 2,000 for example it's going to be much faster and if I make this 100 it's going to be slower and and you can also use damping it's the strength of the opposing Force by default it's 10 but let's make it 100 I will refresh and click and as you can see it's hard to move this item and if you want to learn more transition effect you can just check the documentation but for now it's enough actually let's let me show one more thing let's delete everything here and I'm going to create a list I'll say mtion ul and inside list item actually that's create here our items it's going to be an array item one item two three and four let's use them here I will say items do map and for each item I'm going to use this list item there is a warning because we don't have uni key it's going to be item and inside this Li I'm going to show my items just like this let me zoom in and let's give our variant for the UL it's going to be one let's say 100 hidden will be oppos zero let's use them here initial will be hidden and animate will be visible of course we should pass our variance let's delete this transition for now I will refresh and our animation is here but how we are going to apply the same animation for each item here to do that you can use exactly the same variance for each item let's addit here and I will come here and inside this transition I will say stagger children and I'm going to give the duration here basically before starting animation for each item it's going to wait this duration let's see you are going to understand better I will refresh the page as you can see it works our animation for our list and after first item it weighs 200 M seconds after item two after item three and four you can increase or decrease this number let's say 1 second I will refresh and perfect and also you can use Dynamic variants in this case you can take any variable you want let me drop this and using this item you can make some calculations let's say delay for example and it's going to be I multi by 0.3 how we are going to pass this I I will just say custom and I can send the index number of our items to do that let's take our index and pass it here basically the index number number for the first item is 0 1 2 3 and using those numbers we are going to calculate this delay and in this case we will be able to give specific transition for each item let's try I will refresh perfect and this is how you can pass any variable here okay that's enough I think you know how it works how to give animations how to use variants right now we are ready to give some animations here let me zoom out let's refresh as you can see we are just giving scale effect let's do that I can delete them and open up my sections and let's give an animation for this pen first see I'm going to say motion let's import and I will say initial opacity will be zero and scale will be 0.5 we are doing exactly the same thing I will copy this and paste here and it's going to be animate and trans will be duration 0.5 and let's see okay it's not here because I didn't change the animate it's going to be one and one and perfect and you can do exactly the same thing for these icons but it can stay like that let me show you this sidebar animation as you can see at the beginning it's going to be a circle and when I click here it's going to open up and show our items let's do that I'm going to open up my sidebar and create a new component let's say sidebar I will quickly create my CSS like that let's create our class name oops there is a typo let's fix it and here okay let's use this side bar here and let's see what we are going to have firstly inside this sidebar we are going to create this background it's going to be a circle and when I click on this button we are going to expand this circle and each shape will be this rectangle and it's going to include our links inside and this toggle button will be an SVG as you can see there will be three lines and when I click here the second item will be invisible and we are going to change the position of the first and third item let's create them inside this sidebar I'm going to create a new and it's going to be background basically it's going to be our Circle and inside we are going to have our links and after this I'm going to create a button actually for those links and for this button I can create new components but I'm not going to create them inside components because they belong to sidebar so I will say toggle button links and let's create our files like that and links component okay let's use them here toggle button and links let's open up our CSS we are going to have background inside we will have our links after this background we are going to create a button it's going to be this toggle button actually let's change here it's going to be a button and inside this we are going to have SVG but I'm going to do this later because we are going to need this animation firstly we are going to create our variants but before let's give our initial styles firstly I'm going to use display Flex Flex direction will be column and I'm going to Center my items and background color will be white and the text color will be black and what about this BG when I scroll down or up as you can see it stays here it means its Position will be fixed let's do that position fixed I should give any location and I will say maximum width will be 400 pixels so when we open up this background this size will be 400 if you want to you can make it smaller or bigger it's up to you let's give background it's going to be white and what about this button again it's going to be fixed but before let's give width and height it's going to be a circle I will say position fixed I'm going to Center this and I'm going to delete the default background color it's going to be transparent and let's delete the default border and that's all for now actually we can give style for this list also I will say position absolute let's give width and height display Flex Flex Direction column because it's going to be vertical and between each item I'm going to give 20 pixels let's Center them first and GAP will be 20 let's write here something for now and for each link I'm going to increase this size let's say anchor tag and phone size will be bigger like that okay now as you can see we don't have any shape yet so let's create our variant let's close everything and open up our sidebar and I will say const variant we are going to have two options open and closed to decide this of course we are going to need a use State hook const open set open at the beginning it's going to be false when we click on this button we are going to change it so let's pass our function here and let's take it as a prop and right here on click event when I click on this button I'm going to change my state let's take the previous state and right here the opposite okay so let's write here motion de and I'm going to import I can do the same thing for this div and I'm going to write my condition here animate if it's open the animation will be open if it's not it's going to be hidden sorry closed so since we are using this animation inside our parent it's going to apply for all the children so I can write my variance here so so if the animation of the parent is open it's going to choose the variant open if it's close it's going to be variant closed okay and when it's closed its shape will be this circle to do that I'm going to use clip path if you don't know what the clip path is you can watch my CSS video basically it allows us to create any custom shape if you watch that video you are going to understand better and I'm going to create here a circle I'm going to give the position and I can give any transition here of course there is a warning because we don't have any open object and comma here and I will say transition remember what we can give here we can give delay we can change the type is it's going to be spring but remember to change its speed we cannot use duration we have to give stiffness let's say 400 and damping of course you can just play around here you don't have to use exactly the same numbers and what about here when it's open again clip path is going to be circle inside Cod and its size will be much bigger and since we are using width here let's check as you can see the maximum width will be 400 pixels and it's going to overflow and we are going to see it as a rectangle if we don't give this WID it's going to be a circle but really huge one again positions and I can give different transition type will be spring again and stiffness is going to be smaller let's see okay there is something wrong position fixed let's Center this I will give bottom also and where is our button oh it's here there is something wrong with the position top of course it's going to be left and perfect let's give cursor pointer so we can click when I click as you can see the animation works and we can see our links but why it's not centered oh I didn't give class name okay perfect let's give our links I can create here an array I will say items first one will be homepage Services portfolio contact and let's say about we don't have about page but anyway and let's use them here items. map and for each item I'm going to show an anchor tag and we can pass here our item actually let's use it like that hashtag and item and a unique key here is going to be item again and the name will be here okay why I'm doing this that because when I click here it's going to open up our section if you check the link on the bottom left you are going to see the URL we are going to give different IDs for each section and when we click them it's going to scroll to that section to do that let's open up our homepage appj and for each section I'm going to give different ID homepage Services you can use it here or here now let's write it here portfolio and contact let's try I'm going to click as you can see it's moving perfect this is what we want so what about this button let me copy my SVG I'm going to close my sidebar and inside I'm going to paste my SVG as you can see we are going to have three lines and I'm going to give different path location for each item let's check and zoom in and at the beginning they all are going to be lines but when I click here I'm going to remove this second item and change the position of the first and third item so let's use motion for them and let's import here and remember our parent has this animate property and it can be either open or closed and using those items we can create our own variants let's do that I will say variants and I will say if it's closed D will be this path and when it's open it's going to be this path if you don't know svgs it can be a little bit confusing for you basically thisd represents the shape of this path I will save and as you can see it shape is crossed but when I click here it's going to be straight and you don't have to memorize anything basically using an application like figma you can create your own shapes and when you create any shape here and Export this as SVG and open it with your V code you are going to see its path this is how we are using svgs and I can do the same thing for the third item I will just copy and paste I will refresh like that and for the second item I'm going to give it shape directly but when it's open its oppacity will be zero when it's close is going to be one as you can see it's here when I click the oppacity will be zero okay and for those items I can give different effect let's check I will zoom out I will click and as you can see there's an animation here let's give that I'm going to open up links and let's create our variance actually we can Define our variance before our component so let's do the same thing for others okay we are giv inner variant we don't need to do anything and let's say if it's open transition will be stagger children and when it's closed it's going to be faster and also I can change the direction if I say minus one it's going to be the opposite direction let's check when I click as you can see my items are coming from bottom to up but when I close up to bottom let's give our motion here motion D and import and I'm going to write here my variance let's create different variants here I'm going to duplicate this and it's going to be item variance again it should be open open and closed and I can write here my animations firstly y will be zero remember it comes from bottom so I will say 50 pixels for example and when I open it's going to be zero and also I can give opacity it's going to be one and zero let's use them here variance item variance of course it should be motion I will refresh and let's try okay there is no stagger there is something wrong oh I said staggered it's going to be stagger okay perfect if you want to you can give different transition stiffness speed whatever you want just play around here and one more thing when I hover over I'm going to give different animation it's going to be really easy remember while H the scale will be 1.1 it's going to be bigger and when I click on this item while tap scale will be smaller let's say 0.95 okay when I click as you can see it's getting smaller and showing to portfolio section okay awesome and let's create our hero section we are going to have our texts this image and this animated text let's create I will close everything and open up my side bar and inside components I will say hero I'm going to import hero. scss and give my class name here and and create my style file okay firstly I'm going to give a height but remember the section height is 100 VH but we have no bar here and its height is 100 pixels so I'm going to make some calculation here I will say height calculate 100 VH minus 100 pixels and I'm going to give a background color here because in our example the bottom is lighter so I'm going to give linear gradient let's say background not background color and linear gradient will be 180° so it's going to start from the top it's going to be this color and the bottom will be this color okay let's add this component to our application after never I will say hero uh perfect let's create our image here I will say image container and inside image and let's see what was the name okay hero PNG as you can see it's overflowing let me open this CSS file here and I will say overflow hidden and I'm going to give a position for this item it's going to be on the right side let's write here our container image container height will be 100% And The Position will be absolute top will be zero right will be zero so it's going to be on the right side like that but as you can see it starts from here because we didn't use position relative for the parent and perfect and what about those texts let's create a container and inside I'm going to create h2 tag let's actually copy and paste them H1 tag developer and designer you can write here whatever you want and to buttons here let's create a d I will say buttons see the latest work or works and contact me and finally we are going to have this image after that we are going to give our animation let's say image and what was the name let me check okay scroll PNG okay as you can see it starts from the beginning but in our example there is a space here so we are going to give exactly the same size as we did for this na basically we are going to have a rupper we are going to give a maximum width and we are going to Center that dropper like that let's write it here rer remember our break point height will be 100% And I'm going to sent to this oops okay I didn't save and perfect so let's give style for this container inside dropper I'm going to say text container height will be 100% so I can Center my items let's use flexbox it's going to be vertical of course and justy content will be Center and space between each it will be 40 pixels oops this image is too big let's say image is going to be 50 pixels perfect and let's give style for h2 tag H1 tag and those buttons before this image I will say H2 it's our username and the color will be this purple color okay and in our example as you can see there is a space between each item each letter so I will say lettera spacing time pixs okay perfect and what about this H1 tag it's going to be much bigger like that but as you can see since we didn't give any WID for our wrapper it goes behind this image to prevent this I can give any width let's say 50% perfect and what about those buttons after H1 before image for each button I'm going to give padding and a border solid and white let's give border radius 10 pixels okay as you can see there is a background here let's remove this background color will be transparent and text color will be white again perfect let's separate them I can give margin right here or if you want to you can give here display flags and GAP awesome and I'm going to give cursor pointer okay let's check those font weights are a little bit smaller I think let's give 300s okay only thing we should create is this sliding text let's write it somewhere here container and inside I'm going to write my text content creator and influencer let's give Style after this image I will say position absolute and font size will be really big it's going to be the half of the screen and I can give any position here I will say bottom zero but even if I had zero there's a default space here actually let's say minus 120 perfect still space but it's okay but I want to see them in just one line so I will say white space no R and let's give here a color and decrease its opacity actually I can directly paste here it's a black color but as you can see osity is really low like that and right now I can give my animations I'm going to close this CSS file and I'm going to create my text variance initial x - 500 and the opacity will be zero of course const and the animate will be x0 and oppos will be one let's give transition it's going to take 1 second and tager children 0.1 so let's use this here for text container I will copy this paste for this h2 tag H1 tag buttons uh for this scroll image and let's add motion like that I'm going to quickly import motion and let's give initial and animate this going to be initial oops equals okay so all the children will be exactly the same let's try I will refresh and perfect and what about this image as you can see there's a different animation here we can write it here actually I'll say scroll button or scroll animation whatever you say opacity will be zero and Y will be 10 pixels and transition it's going to take 2 seconds but as you realize this animation is infinite it doesn't stop anywhere so I will say repeat infinity and let's use it here where is our image here I say animate scroll button I will refresh and perfect what about this animated text let's create another variance I will duplicate this and it's going to be slider variance at the beginning X will be zero I will remove this and it's going to be let's give really high number here just like 20 120% because we have a really long text and I'm going to remove this opacity again repeat will be Infinity duration will be 20 seconds and let's remove here I will refresh of course I didn't give these variants for my item I'm going to give the initial animation and animate and of course it's going to be motion div I will refresh as you can see it's going to the right side to prevent this it's going to be minus let's refresh okay but at the end of the text it's not coming back let's handle this I'll say repeat type and it's going to be mirror and I'm going to give width for my item where is our slider here it's going to be 50% and I will give font weight and it's going to be bolt let's refresh and perfect when it ends it will come back okay and what about these parall as you remember we have two types of parallx first one is what we do and the background is dark and this one is what we did and the background is a little bit lighter and we have a sun here so basically we are going to need a prop let's close everything here here and open up parallx of course we didn't create let's create quickly jsx I'm going to import my style like that let's give class name okay let's use it in our appjs it's going to be here and here and its type will be portfolio and it's going to be Services okay let's take this typ type as a prop and I'm going to create here H1 tag and write my condition if type equals Services it's going to be what we do if it's not it's going to be what we it I'm going to create a d and it's going to show those mountains and one more D is going to be those planets and one more and it's going to be Stars so let's give condition for our background color I'll will say inner style background and if the type is Services is going to be linear gradient actually let's just copy this and it's going to be of course question mark and if it's not it's going to be this linear gradient if you remember our hero section we gave this background color it starts from dark to light and we will use this color at the beginning and if the type is Services it's going to be darker if it's not it's going to be lighter let's open up our CSS and let's say with 100% height 100% and let's see as you can see light to dark and dark to light okay let's give background images for our items we are going to be using position absolute for our mountains planets and stars so I will say position relative and inside we have our title let's say 100 pixels and of course I'm going to Center this title display Flags align item Center justy content Center and after that let's create our background images background size will be C it's going to C all our screen and the background Position will be bottom it's going to start from here okay it's not here because we don't have any width and height and we are going to use position absolute okay perfect let's do the same thing for other images planets and stars awesome and when I scroll down I'm going to give this effect so let's import motion I'm going to close them import motion from frame or motion let's use them here and right now we are going to learn something new we are going to need the position of the beginning of our section let's come here and this point will be our initial position it's going to be zero and when I scroll down that initial state will be increasing and using that number I'm going to move my items by the way there is something wrong here as you can see stars are over those mountains to prevent this I'm going to give Z index it's going to be three let's copy this it's going to be two and one okay but how I'm going to reach to that number it's really easy let's come here and I'm going to import one more thing here and it's going to be use scroll using this hook I will be able to reach to my y AIS progress I'll say const scroll by progress use scroll hook and here I'm going to give my Target and as I said this target will be our section this whole section basically this div to reach this target we are going to be using us ra hook const ra use ra it comes from react let's use it here and I'm going to pass it here and using this progress I can give my animations to do that we can use use transform hook and using this hook we can create different transitions how we are going to do this let's say const ybg and use transform hook I'm going to pass this scroll y progress and I'm going to map my scroll progress what I mean by that let's open up use transform so let's check here as you can see we are creating here New Motion value and we are passing here a value if the x is zero let me zoom in the output will be one it means opacity will be one if it's 100 the output will be zero and if it's in the middle if it's 50 it's going to be between 0 and 1 which means 0.5 in this point the progress is zero and when I scroll down and come to the end this point will be one and I can map through all the points between this range and create a new value you are going to understand better right now I'm going to take this this value is going to be between 0 and 1 and if it's zero the position of my item will be 0% if it's one it's going to be 100% so using this value I can add my animation for this H1 tag let's say inner style y will be ybg let's see as you can see there is something wrong because we didn't write here any offset it's going to be start start and end start what this basically means is the animation starts when the top of the target element reaches the top of the viewport basically this point it's on the top of the viewport and our animation is going to end and the top of the target element reaches the bottom of the viewport so if this point reaches here when I scroll down as you can see it's there our animation is going to end and as you can see we have this paralax effect and using this transform I can control my animation speed as you can see if our Target is zero the Y Position will be 0% when our animation ends at this point the position of this text will be 500% this is how we can control this speed and you can create multiple transforms let's say text it's 500 and BG will be 100% And I will say text so I can do the same thing for my planets by BG and I can do the same thing for those stars but in this case we are going to move on the X AIS let's copy this paste here but it's going to be X it's that easy guys and when I scroll more it's going to overflow because their positions are more than the size of this section to prevent this I will just say overflow hidden okay perfect but as you realize our sidebar is not here let's open up sidebar and I'm going to write here the index it's going to be over everything oh sorry it's not sidebar it's going to be BG because its position is fixed perfect and I can do the same thing for this button and awesome okay let's see by the way we are going to change this planet let's write another condition here and I will say style background image and it's going to be URL and let's write our condition if the type is Services it's going to be this image if it's not it's going to be S PNG of course we already have style here let's move this here and remove this one okay and perfect if you want to you can play around those speeds or you can move your items different tractions whatever you want and the best way to learn animation is making practice just use your imagination and create something else okay I can close everything and let's see what else we have okay let's create this Services component I'm going to open up sidebar and services jsx Style and like that let's use it in our app here I'm going to import and that's all let's see okay it's here so what we are going to create here we are going to have three sections first one this text container title container and this list container let's do that text container title and list and inside this we have this text and this line let's create here A P tag and HR tag but as you realize there's a break point here after grow we are moving our text to other line to do that I can add here break like that and of course we are going to be using motion let's import and all these items will be motion if you want to you can give Animation for every single items but for me this animation is enough I'm giving animation for each part but before that animation let's create our items first inside this title container I'm going to create a d and it's going to include this image and and this text and one more container here this text and this button let's do that I will close my sidebar and I will say title and it's going to include an image people.png let me check okay it's not PNG and now after that H1 tag and this text but as you can see this one is Bolt so let's write it like this and one more title this text for your business and after this button we don't need this image what we do and finally we are going to have this list and we are going to have four box inside let's create a box this title this text let's create P text and finally a button and it's going to be go so let's create three more items three more boxes and okay we cannot see because this image is too big let's give our background first you already know how to do this we are going to start with our dark color and as at the bottom is going to be lighter I will just paste here I say height 100% and inside we have text container title container and list container let's take care of this image after we can see better 300 height 100 for the radius will be 50 pixels and I will say object fit cover okay let's separate our items to do that I can use display flag vertical Flex box and justify content will be space between the first item will be at the beginning and the last item will be at this ending but let let's give height for each item this title container and list container has exactly the same size same height but this container is a little bit smaller to do that I'm going to be using flx it's going to be one unit title container will be twice bigger and list container will be exactly the same twice bigger like that let's take care of here I want to see my items on the right side if you are using display Flex for the parent you can use align s and it's going to be flex and okay perfect let's make them horizontal and give space between them display Flex align item Center and gap between items will be 20 okay we don't have any width for this HR tag let's give it's going to be 500 let's decrease this border it's going to be thinner border known but I'm just going to add border top and it's going to be help pixel solid and gray okay perfect what about this text it's a P tag remember font weight will be 200 and font size will be 20 pixel like this let's change its color text align right okay and what about those title let's Center them first to do that I'm going to be using display flex but Flex direction will be column remember we have two titles inside this container they are going to be vertical and align items will be Center and what about each title again display fle they are going to be horizontal and gap between items will be 50 pixels like that let's Center them vertically Aline item Center okay let's increase font size after this image I will say H1 tag and it's going to be really big but the font weight will be thinner like that I'm making this thinner because we are using Bolt and what about this button I'm going to give exactly the same size that we have used here border radius 50 pixels and background color will be orange I'm going to delete the default border it's going to be nonone font size will be a little bit bigger and we can click awesome and what about this list it's going to be horizontal so we can use display flag uh for each box I'm going to give some pading perfect but in our example as you can see it starts from here and ends here it's exactly the same size that we have used for Nar and this hero section so I can give here maximum width and let's Center this margin Auto and let's give border for each item 0.5 pixels solid and gray okay let's separate those items inside box again Flex Direction column and justify content will be space between perfect and finally this button padding will be 10 background color will be orange let's delete this border and give cursor effect okay so what I'm going to do is when I hover over I'm going to change the color of this box let's use vile hover actually I'm going to choose all these boxes and I'm going to change them to motion de and while hor the background color will be gray actually light gray and I'm going to change the text color and it's going to be black just like this and what about this animation I will refresh as you can see all items are coming from the left side let's create our variants initial and animate or whatever you name it and at the beginning X will be minus 500 and the oppacity will be zero if you want to you can add here y scale or any other things and when we animate it's going to be Zer opacity will be 1 and y will be zero and let's give transition here duration will be 1 second as stagger children 0.1 let's copy this and paste here initial will be initial and animate will be animate and I can use exactly the same variance for this do this and okay I missed this text container let's refresh okay there is something wrong oh it's going to be initial okay now there is something wrong here because when we visit our website let's refresh and scroll down as we can see our animation is already completed to prevent this we can use while view remember how to use it instead of animate I can say while view it's going to be animate and I'm going to refresh I'll wait a little bit and after I'm going to scroll and as you can see it works but also you can use one more thing here and it's going to be use in View and using this hook we can listen a Target element in this case it's going to be our services div in this case we are going to need use ra hook const ra use dra I'm going to comment this out and ref will be ra const is in View using this hook I'm going to pass my Target and the best thing is you can give an margin here for example you can start in view at this point or this point or this point basically you can give an margin here and you can trigger your animation after this margin for example if I say margin 100 pixels it's going to be triggered somewhere here after 100 pixels so right now I can say animate and if it's in view it's going to trigger our animation let's try refresh scroll down scroll scroll down and perfect and one more thing here when I hover over those Boldt texts I'm going to change their colors it's really easy I will just use while H and change their colors this one is going to be motion Bol text while hor color will be orange like that so let's copy this and do exactly the same for this one okay and after this parallx we are going to have our works let's see what we have as you can see each work has different set ctions and when I scroll down or up I'm changing this item size so basically again we are going to be using scroll progress let's create another component I'm going to close them and it's going to be portfolio I will create CSS and class name okay let's use it here in our appjs right now we are not going to create our portfolios one by one instead I'm going to call my component here here directly without section portfolio and inside this component we are going to create our own sections oops there is something wrong here I forgot dot okay as you can see it's here we cannot see it directly because because we don't have any section firstly let's create some items here it's going to be an array let's say id1 title will be any project name here I'm going to add some image and description let's find out some images here I'm going to open up PEX house.com and let's create some description I can actually create here and copy this and paste here okay let me close this sidebar and I'm going to create three more items nextjs one Javascript app I don't know whatever and let's say music app and I'm going to change those images okay so you using this array I can create different sections to do that I'm going to create here a function const single and we are going to pass here each item using this array and we are going to take those items and return a section and let's just write item do title let's use this array here items do map for each item we are going to call this component single component and we are going to pass our item here and of course if you are using map you have to add here unit key and it's going to be item id let's see as you can see our titles are here and right now each item has its own section we are going to have this title and this progress bar let's create here before this map I will say progress featured works and after a progress bar so let's use use scroll hook I will say import of course motion first and after use scroll frame motion let's use it scroll y progress use scroll hook and remember we are passing here our Target to do that we are going to need use ra hook con ra use ra and our Target will be this portfolio container because remember the size of this progress bar will be 100% at the beginning and when I scroll down I'm going to decrease it and at the end of the portfolio container it's going to be zero so I'm going to need something different here first here I'm going to pass my target of course inside object and offset will be different it's going to be end end and start start because again at the beginning 100% not zero let's use use transform hook or if you want to we can try something else we can use use spring hook again it creates a transition but the type of that transition is spring how we can do this I will say const scale X use spring hook and I'm going to pass here my scroll y progress and right here my transition options remember we can give any stiffness and dumping will be 30 pixels just play around here and create your own animation and I'm going to take this and use it here my progress bar I will say motion and style and the scale X will be this scale X like that but if you are already using the same name you can leave it like that and let's give a style and see its class name is progress bar inside progress we have an H1 tag and this progress bar firstly this container will be position sticky that because even if I scroll down or up it always stays here so let's say position sticky in this case the parent should be position relative let's say top zero left zero and I'm going to give a pading here 50 pixels if you want to you can give a background color in this case those items will not be visible but I prefer using it like that I'm not going to give any background let's say text align Center and text color will be orange actually let's remove this and write everything here font size 36 pixels let's see okay perfect what about this bar it's going to be time pixels and the background color will be white let's see perfect it's that easy third item last item is going to be zero and at the beginning it's 100% so what about each item we will do exactly the same thing here we are going to need y scroll but for each section let's come back here and see I'm going to scroll as you can see this tag comes from bottom and going to up and it's faster than this image like that let's first find out our progress and after give our style inner style I'm going to come here and again con dra use ra hook this time our Target will be this section let's add here our image and text instead of this title I will say container and inside we are going to have our image it's going to be item. image and I will create here a text container and inside this container we are going to have this title description and a button so let's say h2 tag item. title ptag item. description and button let's take this program I'm going to copy this and paste here I'm not going to use any offset here and let's use use transform hook I will say y use transform I'm going to pass here scroll y progress and remember how we are doing this and give here any distance for example I will say minus 300 to 300 after we are going to play around here and you are going to see the difference and using this y I'm going to give inner style y will be Y and again we are using exactly the same name so it's going to be just like this actually I can write it here and I will say motion of course image is too big let's give style first after this progress bar I will say container let's Center everything align item Center justy content Center and for the image I will say flx one and I will do the same thing for text container Flex one why I'm doing this because in our example as you can see this image and text container has exactly the same size and I'm going to give here a height let's say 50% and the object fit will be cover okay it's still big that because container doesn't have any size let's say 100 okay but as you can see it starts from here but in our example we have our space here remember how we are fixing this I'm just going to come here and create here a rer and I'm going to wrap this image and this text container okay I'll say wrapper let's drop them and I'm going to give my maximum width height will be 100% And I'm going to Center this using margin okay perfect and let's make this display Flex and gap between this image and text container will be 50 pixels okay those images are okay but there is something wrong with this first one Flex one actually I can create here image container if you are using image I highly recommend you use image container let's get this here and height in this case I can say 100% And it's going to contain all this container and perfect okay let's Center them we set display flex but we didn't say align item Center just y content Center as you can see there is something wrong here the Y position is too low let's remove this for now after we are going to add right now we are adding just our style let's come here and say display flag flag direction will be column gap between each item will be 30 pixels and for the title phone size will be 72 pixels for ptag for description color will be gray and to any pixel and for the button let's see our example as you can see it's going to be orange and we are going to give border radius border will be non and Border radius will be 10 pixel let's decrease its size and also I'm going to give here a ping let's say 200 pixels perfect and cursor will be pointer okay right now we can take care of this parallx effect this text container will be faster let's take this back okay this position should be at the beginning when I scroll down it should come from bottom to top so again I'm going to give here offset and I will do exactly the same thing here 0% let's say 300% in this case it's going to go down and it's going to overflow let's make this minus and this container will be overflow hidden as you can see it's going faster but it's not what I exactly want to prevent this I can change my reference point instead of hold this section hold this container I can choose this image container for example let's do that I'm going to take this here and move it here right now my reference point is here and I'm not going to choose any point here let's comment this out and right now I can change this number I will say minus 300 pixels to 300 pixels let's see I'm going to scroll as you can see this is much better the the next text container comes from bottom and when I scroll it goes up perfect and if I make this 100 it's going to be slower and if you make this bigger it's going to be much faster but the distance will be bigger like that so as I said there is no certain number here it depends on your imagination but for me 300 is perfect and one more thing we are going to need and it's going to be this contact Section firstly we are going to show this SVG and after this form element but before let's design our component it's really easy we are going to have text container and form container let's do that I'm going to close them open up my sidebar and inside components I'm going to say contact let's import CSS I'm going to give class name and create my contact CSS okay let's call this in our application appjs and here I will say contact component let's create our containers text container and form container inside this text container we are going to have this title H1 and this title after that we are going to have three items and each one includes a title and this text title text title text so I will say item h2 tag the first one will be male and spam will be that's right here any mail and let's create other divs address and finally f okay and here we are going to create a form and it's going to include this input name input email input and this text area and finally this button I will say form inside input is going to be text placeholder let's say name one more email of course it's going to be email and you can write here required so they cannot send them without name or email and finally a text area you can write here any rows let's say a throw uh placeholder and I will say message okay let's have close this perfect and finally our button let's give our style let's open up our page again I'm going to give maximum width let's say height 100 and I'm going to Center this using margin let's separate our items space between perfect actually let's give exactly the same size for this container and this container and give space between them so I'm going to remove this and I will say Gap and the text container Flex one and form container flag one oops okay let's give space between each item to do that I'm going to be using display flx Flex Direction column and gap between each item will be 40 pixels and inside we have our title phone size will be 100 pixels perfect but I want to use this space here to do that I'm going to be using line height like this for this text what was the name let's check okay span font fate will be thiner okay let's see perfect and let's take care of this form as you can see see for each item each input we are going to have a border and we are going to change this color and this button will be orange of course they are going to be vertical not horizontal display Flex Flex Direction column let's give Gap and for input I'm going to give some padding I'm going to remove this background color because by default it's white as you can see I'm going to remove this and I'm going to add a border one pixel solid and white and the text color will be white again and I will say border radius fire pixas okay there is something wrong because I said form container but is going to be this form let's close this sidebar and it's going to be [Music] form perfect and I will do the same thing for this text area actually let's write it here okay awesome and for this button again padding I will say border NN and the background color will be orange and we can click so I will say cursor pointer and I can increase this text 500 okay right now we can give our animation let's create our variance here initial let's say y 500 and again oppacity will be zero and I'll say animate is going to be zero and our opposite will be one it's going to be visible and let's give transition here it's going to take half second stagger children the animation delay between each children will be 0.1 and right now we can use it let's write here motion and I'm going to import this quickly and I'm going to pass my variance here and let's do the same same thing for children and maybe this H1 tag and for each item and I will say the initial value will be initial and while in view it's going to be animate okay so what about here when I refresh the page as you can see it shows this animation first and after our form let's add our SVG here I will will come here and inside this P container I'm going to add my SVG I just downloaded this from a website just search for phone for example choose any icon you want and download as SVG after you are going to reach these resource so what I'm going to do is wrap this SVG with a let's say phone or for s3g let's wrap this and it's going to be motion div and I'm going to write here the initial animation and it's going to be opacity and it will be one so I will say while in view opacity will be zero and let's write here a transition duration will be let's say 3 seconds okay we cannot see because we don't have any color for this SVG but if I write here a style inside this container I say pH SVG let's give background color as you can see it takes 3 seconds but this is not what I want if I refresh the page as you can see it takes 3 seconds and after it disappears so instead of duration I'm going to give delay and the duration will be 1 second in first 3 seconds the opacity will be one and after this delay it's going to disappear in 1 second let's see I'm going to refresh as you can see it's here and after 3 seconds it's gone so I can do the same thing for this form and I can give position absolute so we can see them together this form and that SVG let's say position absolute in this case I'm going to give position relative for the parent and I'm going to Center this using margin alsoo okay and let's do the same thing for this form for first 3 seconds the opposite of this form will be zero after that it's going to be one let's actually copy here and paste motion form at the beginning it's going to be zero and after it's going to be one but remember it disappears after 4 seconds three of them are delay and 1 second is duration in total it's going to be four so instead of three I'm going to say four let's refresh first our SVG and after our form perfect so let's give a stroke for our SVG instead of this background color it's going to be orange it's here but how I'm going to animate this at the beginning the path length of this SVG will be zero let's do this and you are going to understand better at the beginning path length is going to be zero of course it should be motion while in view it's going to be one and let's give transition it's going to take 3 seconds let's see I'm going to refresh and there is something wrong because while in view doesn't work with this path to prevent this remember we have use in view hook we can use it let's say const ra use ra and our Target will be this D whenever it's visible it's going to trigger this hook let's say is in View and we are going to pass here are rough and remember we can give here any margin again 100 pixels and using this I can trigger my animation instead of while in view I'm going to say animate and right here my condition if it's in view okay and right now it works let's come here refresh the page and if I scroll as you can see it works if you like creating these kind of websites and learn more about animations you should definitely learn svgs first because once you learn you can create anything you want so let's take care of this form to do that there are many free libraries and one of them is email JS it's really easy to use just sign in and after that you are going to see this dashboard let me zoom in I'm going to add new service I'm going to use my Gmail connect your account using this button okay Ive connected as you can see you can receive 500 emails every today for free I'm going to create service and let's create a template there's a default template here let's see you can edit your template here we don't need this it's already our name basically this name will be this input name this email will be this email and the message will be this text area message if you want to you can give different name for for them but it can stay like that I'm going to apply and let's see how we can use it I'm going to come here and choose react firstly we are going to install this Library I'm going to copy and open up my terminal mpm install email JS and after that we are going to create a ref and the target of this dra will be our form and we are going to pass name for each input and inside those names we are going to add exactly the same names its name and it's going to be name not usern name let's do that I'm going to close here let's create another ref form ref like that let's import and using this function we are going to send our email it's going to be form ref and here we are going to add our service ID let's check I'm going to choose my account public key oops is going to be here is going to be service ID and template ID and if you want to you can set here error set [Music] error and I'll will say use State it's going to be false or let's say null if everything is okay it's going to be false if not if there's an error it's going to be true and we are going to run this function using on submit event just like this and here we can show our error false I'm going to write here here success if it's not error let's give our names here it's going to be name email and message okay error is here that because null is also false let's actually create error and success set success will be true and I will say if there's an error right here error if it's success right here success okay let's test but I can't click here because our SVG is over this form to prevent this I will say Z index minus one okay I will say test test gmail.com and hello I will send as you can see it's successful and our message is here new message from test this is the username the message the sender email ma it's that easy okay it's almost ready let's take care of this cursor as you can see there's a circle here let's create this component and that component is going to follow our cursor I'm going to create new component cursor jsx let's create our function and style let's create a CSS file and let's create here a circle I'm not going to write anything I'm just going to give my style let's give it size it's going to be 50 pixels I will say border radius is going to be Circle let's say border one pixel solid and white and I will say position fixed but we are going to change our position in this file so I'm not going to give any position here okay that's all I think let's save and let's come here to follow our cursor position firstly I'm going to create here a state I'll say con position set position use state look at the beginning the X Position will be zero y Position will be zero of course inside object let's check our example I will refresh the page as you can see this is the initial Point initial position and after it's going to follow our Mouse to do that we are going to be using user fact hook let's create here a function Mouse move and it's going to set our state X will be event client X again I forgot object and the Y Position will be event client y so let's take this event I will say window add event listener and the event will be most moo and we move it we are going to fire this function of course if you are listening any event you should clean up I'm going to write my clean up function here window I'm going to remove this event listener okay if you are using react you should use use ra hook but in this case the element will be our window so we cannot use use ra hook here we have to write at event listener okay and after that I can create my animation but before let's see our position if it works or not and let's call this inside appjs somewhere here let's see I'm going to open up my console and as you can see it gives me my position perfect I can use it I will come here and say animate of course I should import motion first motion from framer motion so I will say x position dot X and Y position dot y That's all let's see okay it's not here let's remove this by the way I didn't add here any dependency okay let's check our style we are using position fixed so I should maybe give here the index it can be under other components oh that was the reason okay and if you want to you can change this position a little bit you can give some space between your cursor and this component so you can write here any number for example + 10 as you can see there is a space and it looks much better right now okay so what about responsive design it's not going to be fully responsive but I'm going to show you how you can handle this it's really easy don't worry we are going to handle for mobile screens let's open up mobile device here as you can see it looks pretty ugly for now so let's fix it so what I'm going to do is create a break point for the mobile devices to do that I'm going to open up app style and here I'm going to create a function I will say for mobile devices I'm just defining my function here and when we call this function it's going to apply media query maximum width is going to be this break point and we are going to write here our content basically our style when we apply this your you are going to understand better don't worry and you can do exactly the same thing for other devices for example tablet like that and you can create different break points 1024 like that and we can call those functions everywhere let's start with this nowar if you are not designing mobile first I highly recommend you comment out your components and just leave whatever you want to fix so I'm going to close hero section this parall section and others I'm just going to see my NB bar like that firstly I'm going to remove this cursor we don't need this we are using our fingers so how I'm going to use this function function here to do that firstly I'm going to import my app CSS here I will say import app. scss right now I can use my mobile function here using include now I will say mobile and inside I'm going to write my style I don't want to see this cursor so I will say display none and perect perfect and I can do the same thing for this logo I don't want to see that I'm going to do exactly the same thing let's copy this open up nowb bar and copy this function and I'm going to find my logo it's this one remember and again display n but this time our items are here I'm going to change this justy content as you can see it's space between I'm going to write my function here and justy content will be Flex end it's going to be at the end of the flex box but as you can see there is no space here let's add and Perfect by the way where is our menu let's check sidebar it's because of this Z index or what with ah okay that was the reason let's open up our mobile device I'm going to open up as you can see it contains all screen if you want to just leave it like that but I prefer using the half of the screen so let's open up sidebar we are already in let's import our app CSS and one of these functions and I'm going to reduce this with it's going to be 200 like that of course links are too big as you can see it's 40 pixels so I'm going to say 20 pixels oops still big oh I said with is going to be font size perfect and right now I'm going to open up my hero section and what I'm going to do is changing my Flex box let's copy this import close everything and open up hero section as you can see the width of text container is 50% and height is 100% right now I'm going to change them include mobile this time height will be 50% and width will be 100% of course this text is too big I'm going to copy this uh for this title let's make it smaller just like this and I'm going to Center my items here and reduce this Gap it's too big 20 pixels align item Center and text align Center just just like this perfect what about this image again its height will be 50% this is our image container let's write it here height will be 50 withd will be 100% And Its position is top zero I'm going to change it it's going to be bottom zero let's say top onset and bottom will be zero but it's not here there's something wrong have image container inside we have image but we didn't give any width and height c h okay it's here perfect what about this text we can remove this or it can stay it can stay actually it looks nice so what about other sections let's open up this section as you can see this screen doesn't contain our images and also this text is too big let's copy this and open up our CSS file and import and this function let's copy and paste for this H1 it's going to be let's say 72 and I can Center this perfect let's contain our screen with those images and I will say background size it's going to be contain not cover and as you can see it's repeating right now to prevent this I will say background repeat and no repeat okay perfect it's a little bit small but anyway if you want to you can do this for other images other background images right now they are here Stars can stay like that let's check our effect if it works or not to do that I'm going to open up other parallx here and as you can see awesome it works so let's open up services section again let's copy this import open open up services like that and I'm going to copy this function and let's see what we have as you can see nothing is visible here let's take care of the first part I'm going to open up my jsx file and this is our first part so I'm going to close here and this list okay it's still not [Music] visible firstly I'm going to Center everything inside my text container because remember we are using flex and here they are on the right side so I will say align self and center and text align Center and the flex direction will be column because it was horizontal at the beginning but this time it's going to be vertical okay they are not here let's check our services component okay at the beginning X is min -500 for that reason our component is not in view because our screen is much smaller we cannot see our component and it will not trigger our animation to prevent this you can decrease this number or you can remove this animation whatever you want let's remove this for now and let's reduce this HR with it's too big is 500 pixels but it's going to be 300 okay let's open up others maybe for now only this one let's check oh it's huge let's decrease for this title container I will say 100% And this title is and this title will be vertical it's horizontal right now I will say flx direction is going to be column text align Center oops Center and GAP is too much let's say 20 okay it's centered but we didn't reduce this number let's come here as you can see it's 96 it's going to be 36 perfect and let's reduce this image and button size let's say 200 50 perfect and this one font size will be smaller and let's say 150 okay it looks nice and let's open up our list okay it's horizontal let's make this vertical I'm going to come here and say flag Direction column and again 100% okay our boxes are too big actually we can delete those descriptions inside box we have ptag remember it's our description and I will say display no just like this let's remove those borders border will be know perfect but those buttons are a little bit strange actually I can change this background color and I can add a border it's going to be transparent but I'm going to add border one pixel solid and orange maybe a little bit border the radius 5 pixels perfect let's change this color also and I'm going to reduce its width it's going to be 50% okay let's Center them inside this box I will say align item Center perfect I'm going to give gap between them but this space is too much as you can see padding is 50 and it's going to be 20 or maybe 10 okay I can do the same thing for this button it's too big it's 10 let's say five and it's much better right now it's not perfect but I'm just showing you how you can handle responsive design it's that easy guys just include put your function and play around here and change your components okay what about where is our appj here what about portfolio what I can do I can move this progress bar to here at bottom I'm going to come here sorry here and open up portfolio and let's copy any of those functions and as you can see top is zero and there's a padding here and I'm going to increase this padding padding top to do that I'm going to be using calculate let's say 50 pixels let's try and this font size is too big let's say 24 okay it's not visible let's say 100 and perfect why I am doing this why I'm not using bottom zero because remember inside portfolio for each project we are using a section so if I say bottom zero is going to be visible at the end of the portfolio container somewhere here not for other works this is why I'm using padding top okay we cannot see our image because it's horizontal let's change it inside rupper I will say Flex Direction column it's going to be vertical and here I will say with 100% and let's give maximum height 300 for example like this and I can change my object check fit it was C I can say contain because our image is smaller right now and what about this text first here I'm going to remove this animation to do that I'm going to come here text container and I will say transform non and I will say import important and it's going to overwrite framer motion as you can see we don't have any animation right now and let's take care of this size and also I can give here a pedding let's Center everything and this font size is too big 36 and maybe this one also perfect it looks really nice and finally let's open up our contact contact Section import app CSS and copy this function as you can see again it's horizontal and we cannot see our form let's come here and say 100% I'm going to give some ping and flex direction will be column let's take care of this text container I'm going to reduce this Gap and Center everything text align Center align items and let's give margin here and as you can see it's too big again let's reduce perfect and for this form I can decrease is this input padding and for this button but why it's not 100% let's check sorry for this form container okay let's say 100% And I can give some padding here of course I didn't use my function let's move this here and padding is going to be let's say 50 okay I can delete this background and perfect this is how you can design your application for different devices you can use different break points as we created here you can use them and make your up application fully responsive but right now you know how to do that so we are ready to deploy our application to do that let's close everything and open up our terminal and I will just say mpm run build and if you check your folder structure you are going to see this folder and in inside we have all our images CSS file JavaScript and the main HTML file only thing we should do is upload them into our hosting let's open up our hostinger panel and I'm going to choose file manager and inside public HTML there is a default file if you visit your website you are going to see this default page let's remove this I'm going to click here and I'm going to upload my files here let's drag and drop our files and that's all let's refresh the page and perfect it's here and it works as we expected and we are using a free SSL certificate and the connection is secure right now we didn't have to install anything we didn't have to make any configuration everything is ready to use let's check our menu okay so that's all I hope you liked it if you learned something new today please like the video if you want to support lamad Dev you can use the link in the description below or you can join the channel don't forget to follow lamad dev's social media accounts I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 108,673

Keywords: react, react.js, react portfolio, react animation, react framer, react framer motion, react portfolio website, react portfolio project, react tutorial, react website, react ui design, react scroll animation, react parallax, react projects, react course, html css javascript, portfolio website, portfolio animation, creative portfolio website, lamadev, webdesign

Id: CHGHuF24Cjw

Length: 163min 46sec (9826 seconds)

Published: Wed Oct 11 2023