React Portfolio Website Tutorial - Build and Deploy React JS Personal Portfolio Website

foreign [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] foreign [Music] first of all happy New Year to all of you I know I'm little bit late to wish anyhow in this react tutorial we are going to build one of the best personal portfolio project you can currently find on YouTube it's an incredible project in terms of design responsiveness animations code style and much more before starting I want to give design credit to sajan I found him on dribble and did some changes in his design that I felt best to do now let's get back by following this tutorial you will learn how to build react project from scratch how to use hooks like use State and custom hooks for the react apps for making smooth animations we will use the framer motion which is an awesome library for making animations in react we will use SAS or you can say as scss in modular form to write CSS by writing CSS in SAS form you can make independent react components without thinking about Clash of HTML classes also if you have never worked in modular form or with scss then don't worry I am going to teach it in a very beginner friendly manner for making the sliders we will use the very famous react slick Library you will also learn about the responsive designs at the end of this project we are going to deploy it on internet so you can show off your skills to your clients and for your placements now let's see how we can set up our machines to get started with this project let's start as the first step you have to install the node.js in your machine so to install the node.js you can simply write node.js download in your Google Chrome and here is the first link by the way I will also provide this link in the description of the video so you have if you are on Mac OS then click here and if you are on Windows then click here so as I am on the windows I can click here and it starts downloading so I have already installed the node.js so I am just canceling it for now but it's a very easy setup after installing it you just have to do next next next and install so to verify the installation you have to go to your Powershell as an administrator so here I am let's make text bigger okay and write node minus V so if it gives you our result with the version number of node then this means the node is installed on your machine the next thing you have to do is to install the yarn package manager you can search for it on Google like your package manager here is its website but instead of reading all its documentation and other things here we simply have to write one command which is npm II means install minus G it's a flag of global installation of a package and here right yarn so as I hit the enter button here it starts installing as I have already installed the yarn so it took a very little time so it's installed but it can take up to 10 to 15 seconds on your machines the next requirement for this project is the git bash git bash is a utility to use the command line of the GitHub so here if I write git bash download like this then here is the utility setup you can download it for the Mac OS Windows Linux as well and I believe 95 to 97 percent people already using this by the way if you are not familiar with kit then just do a simple search on Google how to connect your GitHub account with the kit and it's a very easy thing to do okay now the next thing you have to go a blank vs code directory and here I am opening the terminal by Ctrl J and let's make a text little bigger okay and here I am writing git clone and there is a link of starter pack for our project why I am not making it from the very scratch command which is like npm create react tab because it installs too much extra stuff that we have to remove after the complete installation of blank react project So to avoid all this stuff what I did I made an empty project which is containing all the necessary files like the images and some predefined constants for the screen size is all these stuff already in the starter pack so you just have to paste the link of the GitHub starter pack for this project and hit the enter button I will provide this link in the description of video so if I hit the enter button here is cloning and yeah now it is done so if I go to the Explorer okay I have to close the terminal here you can see I have to reveal in File Explorer here it is now I am going inside I am closing the previous instance of vs code and here I am opening this folder which is extracted from the GitHub by git clone I am opening with okay here you can see I have all the extracted data the SRC folder which is containing the asset and some hooks with the Styles means it's a very minimal setup for our current project and to start this I am again going to terminal and here right simply yarn and press the enter button so it will install all the dependencies required for this project it's eventually the node modules that we have to download for making this project so here you can see now I have all the node modules if I go to package.json here you can see I am using framer motion reactor react slick and the most important thing here you can see I am using the wheat wheat is an alternative of npm create react web pack basically it provides a lightning fast server for the development if I go to its official website wheat Js here they here you can get all the related information yeah here you can see it's an instant server star with a lightning fast HMR technology and many other read features so if you are developing front end then I highly recommend to use the wheat which is the next Generation front-end tooling so by the way let's back to our project here okay now to start our starter pack we have to write jar and then simply read okay here you can see how fast that was it only took uh almost two seconds to start the development server and you can easily find the difference between the create react app webpack and the wheat JS so if I go to this port just pressing Ctrl click and here I am it's saying subscribes and keep score and nothing more than this it's a complete blank Project without any predefined markups for a new initial react project so let's have a walkthrough of our starter pack what we have here first of all inside the SRT folder we have our main dot GSX which which is containing nothing special it's almost same in every react app and then his app.jsx here I have added a comment do not forget to add font link index.i just made that comment for myself of course I am going to show you how to do this I just made this comment so I don't forget do this thing okay let's remove this and I am saving this okay so our app.jsx is just containing an H1 tag subscribes and keeps code and here you can see its result here okay the next thing is in our assets I am having only react.svg by the way we are not going to use it okay so where is my actually assets that we should use in this project they are inside the public directory here you can see these all or the pngs that we are going to use in this project so why I don't put this in my assets folder because this provide us a global access or you can say a global path to access our images from any deep level of component inside our SRC directory okay we just have to write the name of the image that we want to extract out and it will be there we don't have to make a relative path with the back strings so it's really easy to use a public folder instead of assets here okay let's move on so inside the hooks I have made some hooks so I will show you what's inside these files when we are actually going to use it so just skip this for one inside the Styles inside the global.scss here I have made nothing special it's just simply containing primary background color and then the uh and then there is a class inner width which is containing weights of 100 and on the screen size of double XL it will contain maximum width of 1280 pixels by the way from where I am getting double XL size it is coming from constants scss so here I have just defined some variables means small screen size medium large XL double XL then there are some colors which I also defined in a variable format primary secondary and secondary white so here you can see how simple this is to use the variables in our SAS format now to import this in global here I have written a statement Import constant.scss in my global.scss so now I can actually use these variables here by the way the very important benefit of using SAS over CSS is that nesting here you can see I can make the media queries individually for the classes not I have to make a separate media query and then I have to rewrite all the classes for that specific media query that we usually you in the CSS but in the scss what I can do I can separate them on the basis of their class names and I can also Target their children's but we will see how can we do this later on now there are paddings similarly I have made paddings for different types of media queries on the mobile on large screens medium secrets so it's nothing more than this you can see it's a kind of distance file which is going to describe distance between different elements okay here I have made a flex Center class so we don't have to write again and again display Flex justify content align item Center and similarly Flex start Flex send and at the last I have declared some font sizes so you can also walk through this file again but there is nothing so much in this file to explain now I am going to index.css here I just simply mean margin padding 0 which is not 0 by default we have to do this and scroll Behavior smooth cool after the Styles folder I am going to utils folder and here I have data.js which is containing all the dummy data that we are going to use inside our project so we will see it later how we are going to use this data and how I have defined this and the last file is motion.js actually I really don't want to open this file at this stage of our tutorial because it doesn't make any sense we will see this when we will actually at that stage so let's close this so after visiting all these files you have a clear idea in your wine that how I made this starter pack and how you are going to utilize it for this project so now let's actually start building our very first component which is going to be our header so I should open the deployed version here yeah how cool the animations are so first of all we are going to make this component which is our header and it gives a border on scrolling down and it disappears automatically when we are at the top of our page and yeah we can actually visit different types of components and on clicking its headings so let's start making this okay so to start the header here inside the SRC I am making a folder with the name components inside the components I am again making another folder with the name header inside the header I am going to make two files first of all header dot GSX and the other is header dot module dot scss so as I described earlier in the interrupt video that the benefit of using module format is we can specify same class name in the different modules without thinking about the clashes of their CSS properties okay you can you will see that I will make the same container class in different components still they will not Clash their style links because this module is going to give a unique ID name for each class okay so inside the header.jsx I am writing rafce for a react Arrow function we then export statement let's save this and here I am importing CSS by writing Imports CSS from relative folder and header dot dot scss cool so now I have to save this and inside the app.jsx now on the return statement instead of this H1 tag I am saying header component here is uh here it is also giving me an auto suggestion so I'm just clicking on this so it's automatically imported here let's save this and see our results if I go to here it's saying header how easy that was to set up our starter GitHub repository and then become familiar with it now the next thing that I am observing to do we should first make our fonts correct because in the actual app we are using a very pretty font that is not available here in our development version so let's see how I am going to do this so I am going to open the index.html by pressing Ctrl p on my keyboard and here I will here I will write index dot HTML and press enter okay now here I am going to paste a link I will provide this link in the readme file of the starter pack so just above this title of our website here I am pasting the link to import the fonts and then we can also change the title of website so I am changing it to the name of the person bin Jan okay now after importing this here we have to import this uh basically not import but we have to declare The Styling in our index.css here okay so this data will come with the starter pack and after this here I am writing font family is going to be eudo X us so I don't know how to pronunciate this so I don't want to make fun of myself and then send serif but this font is really amazing I really like that font so if I save this and now if I am visit my website here you can see that the font is applied and it's looking pretty better so I have to zoom out to actual version here okay 100 it's too much small so let's make it around 125 percent okay it's it's better but not too much good because we have no content so inside the app.jsx I want to make uh app.module.sh so what I will do here inside the Styles folder I am making a new file with the name app dot module.scss okay so let's open it side by side here and first of all here I am declaring a class name container so so uh you might be questioning yourself where I am using this class container so first let's use this class so inside the desk.jsx just simply return instead of just simply returning the header component first of all uh I will write return and then give dot CSS dot container so I am using this CSS shortcuts and these HTML shortcuts like I written the div.css.container and when I press enter button then the whole format of div is coming as a result so this is just because of I have enabled the emit abbreviations in my vs code settings so you can also enable this you can just search on the Google it's a very common setting okay so why why I have used this format of CSS dot container because I'm using the module format of my SAS or you can simply say my S my CSS so to use the module formats we have to declare a parent object which is going to be the CSS we have to import CSS also so I will write import CSS okay from relative directory Styles inside the Styles we have app dot module dot scss let's confirm again okay yeah here we have this one Styles so let's save this now this CSS dot container is actually referencing this container in our module file and it will also give it a unique ID means it will be like container underscore a unique ID so it will not be mixed up with the other container names for the other sections by the way now inside this container I am going to write my header component and let's save this and you will see for now the result is pretty much same here but the bonus part is this now on this container I am writing this whole thing inside a backtick and then wrapping it inside curly braces and place a dollar sign in front of this so now it's again a kind of JavaScript object or you can say the constant but now I can also include my Global style links like the inner width or Flex Center and many more things but for now here I am writing background primary and if you have forgotten where I have declared the background primary here on my CSS side if I go to global.scss and here you can see I have a class named BG primary so this global.stash is going to be act as a global CSS file whose classes can be referenced from every file of our project by the way to use this classes I also have to include this Global CSS file inside my main.jsx so I am writing main dot GSX and here I have imported these two index.css and global.scss styling so they can be referenced from every file and here you can see now it has a background color which is very nice okay by the way let's move on now we can finally work on our header.jsx you can also go to this component by right clicking on this and go to definition okay here is our component header now I am removing this div header and I am making a wrapper something like this and inside this wrapper I am going to make a container so now inside the container as if we reference our deployed version here you can see the first thing is the name of the person here I am going to make a deal and this is going to have a class name of name inside the name I am saying it as bin Jan okay by the way I really like this name bin Jen and here instead of global says I am opening my header dot module dot SAS let's save this and see here this is the name cool now it's time to add some paddings around the header content so to add the paddings here for the class name I am again wrapping it inside the inside the back tips then curly braces like this and here I am writing paddings the so the paddings will be applied here here you can see the paddings are applied now if I zoom out to 100 here you can see it's actually according to the real website okay let's fix this more for our container here I am again wrapping inside the package curly braces dollar sign and then making it a flex box with the display flex line item centers justify content Center all of these properties are embedded in this class Flex Center and also I want to give it a class name of inner width so it will be responsive for all the screen sizes let's save this and here yeah now it is okay let's move on the second thing is going to be the menu of our header so if I make this a little bit small and zoom in here so here I am making an unordered list which is going to contain five list items and each list item is going to contain uh basically an anchor tag so press enter and here inside the s first of all provide services and then experience okay and after the experience portfolio similarly testimonials and the last one in the last one I am not actually targeting the H sorry a tags however instead of this as you see on the deployed version the last item is the phone number so for the phone number I am writing a P tag inside the P tag let's say the phone number is one two three four five six seven eight nine and then we have to include an icon of the phone so b i phone call which is going to be imported from the react icons library and then I am giving it a size of let's say 40 pixels okay it's time to import this icon so here on the very top I am saying import bi phone call from react icons inside the react icons called the bi type of icons okay let's save this and see the results here we can see this is the name and this is the unordered list and now we can style this uh more so expand this side header first of all as you can see we have the wrapper here so for the wrapper I am targeting this like this one the inside the wrapper we have a container so container is going to be position relative with the justifier content space between and the font weight of tax will be 500 now for the wrapper I am again saying it as region relative Z index is going to be 99 with the opacity of 1 transform for now none because when we are going to make it responsive for the Mobile screen then we have to play with the transform so but for now let's make a transform none and position sticking because when we scroll down we have to make the header stick on the top of the screen like if I go to deployed version here now I am scrolling down but the header is sticky on the top of the screen so to achieve this functionality here we have to make the position sticky now decreate its position I am saying from Top it has 0 pixel distance and that transition is for the all type of transition make 300 milliseconds of of each transition okay cool let's save this now inside the container we have the name of our person by the way a very important by the way very important thing that I forgot to mention that this is the beauty of SAS that we can use parent child and then it's again acting as a parent and then it's acting as a child of container so this is the beauty of SAS how it has simplified the work for us that we can exactly work like we are working in the HTML so we just have to reference our HTML okay this this is a wrapper class this is the wrapper class now inside this wrapper we have a container so inside the wrapper we have a container similarly inside the container we have name so inside the container we have name so just this is the total SAS nothing more than that the only extra things like we can declare variables very easily we are also going to see it how we are declaring it but the most important feature is the nesting of this CSS now for the name here I am making the font size 1.5 REM with the font weight of 500. let's target the menu of our headers so here menu as menu is the sibling of name div here you can see this is the name div and now this is the unordered list so basically I have to give a class name here so class name CSS dot menu and it's better if I just make it like okay here if I just make it Flex Center and save this here now uh I have to Target the menu here what I will say I will say the text transform should be uppercase so all the headings will have an uppercase text and then the font size of one REM list style should be none so it will not have dots on the front of every heading or you can say the menu item and then the Gap should be 1.5 REM with the cursor of pointer let's save this and see the results okay here are the results looking good but there is an underline and also the color is not good for the menu item so what I will do I will say inside the menu I have some list item for the list items I have some anchor tags here because here you can see I have declared their names inside the anchor tag so for these anchor tags make the font color inherit and the text decoration as none let's save this now I will say on hovering these anchor tags show to put a hover State I will say and power means I am targeting these list items I am saying on targeting these list items which are containing these a at a tags so for this make the color as secondary now there is a logic how I am using this variable or you can set a constant secondary inside my header dot module basically to use this I have to import my constants file so Above This wrap up here I am importing a file go outside then go outside inside the Styles I have constants dot SAS file let's save this okay now let's go to this file actually here inside the constants dots satisfy what I have I just have small screen size medium large XL double XL for making media queries easy and consistent throughout the app after this I have some color decorations like primary color is going to be this secondary days and secondary white this nothing more than that and this is the way the dollar sign how you can declare variable inside this SAS now to use these variables what I did I have to import this constants file in my header dot modules so it can access these variables now if I save this and go to here here you can see on hovering it's actually catching the secondary color I don't know if you are able to see it or not because it's very small let's make it bigger now yeah here you can see on hovering we are actually adapting the secondary color by the way now let's fix this phone call button okay make it a little bit small and here okay for this last Ally I'm giving it a class name of css.phone also what can I do I can make it Flex Center just here so Flex Center let's save this and here after the Ally I will say like now the other allies are going to be siblings so I am targeting it here outside of the Ally I will say phone and inside that phone the items are going to have 1.2 REM distance with the flex wrap property of wrap now inside this food class I have a SVG which is going to be basically this icon for this SVG I am giving it a color of secondary which I already used and the background color of let's say white now the Border radius is going to be 99 basically 999 pixels so it will be round and a very beautiful box Shadow so I'm just copy and pasting the value of box shadow like this one so now let's save this and see the results yeah actually the size of phone is bigger let's see why okay I think it's not actually adapting the size or anything else basically the size is correct what I can do here for the SVG I will say it should have a padding of 10 pixels and yeah now it's okay exactly our deployed version yeah it's too much similar but what we are facing that the font color is not same here we have some different font color it's pure black and in the deployment it's not pure black again I will press the Ctrl P I will go to the app dot module Dot scss and here you know we forgot to declare anything inside this container so now what I will do I will say overflow make the Overflow only for the X direction as clip and then the position relative and the color is going to be the primary color so again to import the primary color um yeah here I can import this file as import from the relative functions.cs scss let's save this and yeah now color is also applied if I zoom in this I don't know whether you are able to see the difference or not but a is actually a difference so our static header for the desktop version is pretty much done now the next thing is to add animation on loading first time because if uh here I reload here you can see these are beautiful animation but this is not available here it's a static so to add this animation uh we have to use the framer motion library and we have already some pre-written code here if I say motion dot JS here you can see we have some pre-written code so I will explain you this code but while actually using this so here inside header.jsx on the way up I am importing the motion from framer motion Library so here let's save import motion from framer motion yeah now I am going to change the wrapper div and instead of saying it on the day now we will now we will say it as motion dot div okay it's time to declare on initial it's going to be the hidden and when it is in view while in view make it show I don't think I have to explain that what this thing is going to do that on initially our header is going to be hidden and when it is in view then it will be shown but now in between we have to add some animations now to add those animations I will give it some variance okay so variants are going to be the header variance so now to import them directly what I will I will press Ctrl space so now it is giving me auto suggestion from my motion.js file let's import this okay let's go to header dot uh let's go to header variance file which is here header variance as you know that here we have declared two states hidden State and show state so I am seeing on hidden State make opacity 0 and it will be displaced on the y-axis towards minus 50 pixels and during doing this it will follow the spring type transition with the stiffness of 300 and damping value of 140. so stiffness and damping and there are some more values like these you can read about these values on the official framework motion website but for now the damping is like a kind kind of bouncing effect and stiffness is a kind of hard effect so these are the different values that we specified now on the show State we want to make opacity 0 and transition that it's going to follow is spring and similarly I have declared a stiffness and a delay of one second so after came in view it will take one second to show this is the total explanation of header variant now if I save this file and basically I also want to add one more thing which is going to viewport so I will say viewport if I specify once equal to true it will show the animation only once only the first time load but I want to make it again and again so I will say once false and the amount of 0.25 percent so if this tips means the wrapper div is 0.25 percent in the viewport this animation is going to start so let's save this and see here if I reload this here you can see the amazing animation very smooth so our header is now completed for the desktop version now it's time to make it responsive and for making it responsive first of all here I am going to my code and then we have to go app dot module Dot scss and here I am making the height of our screen as 100 view height okay let's save this and now you can see the background is applied to whole screen also I want to enable these responsive tools yeah like this and for more now what we can do we can make it side by side okay so let me fix my screen so I have aligned the core screen and the output screen and if I go to the deployed version here you can see on the mobile view it has this icon of menu which can open and close our header actually really so same type of functionality we have to implement here so for doing this I have to go header dot module Dot scss and here let's target the menu okay let's see I have imported the constants yeah I have imported constants to enable the screen sizes okay so here I will say at the media screen and for the media screen the maximum width is going to be the small screen sizes like this and also I want to Target the medium screen sizes also so max width equal to MD okay for them I want to make position absolute here like this and the list style of course as it was none previously by the way you can just skip here and then the gap of 2 REM with the font weight of 500 okay let's save this and in here you can see a very little difference I have to make it a more zoom in okay for more what I have to do I am making the flex direction as column and here is the result now it's not looking in good manner but let's fix it so now I want to fix the position I am making from the right side it will have zero distance from the top it will have 3 REM and the width should be 50 of the total screen size so yeah now it's in a correct manner with the minimum width of 15 REM so it means if we have very small screen size mobile then our sidebar should be 15 REM on that screen and then the background color which is I am going to give is white with the padding of 2 REM display Flex of course it was also previously flexed and then the Border radius should be 2 RM let's save this and yeah here you can see after this I am giving the transition as all 300 Ms is and align items click start with the padding of three REM okay let's save this yeah I have made the line item star so they will not be in Center anymore and then the next thing is justify content also you reflect starts so it should always be on the top of the dim with the Box Shadow property so I am just copying pasting a beautiful Shadow here like this one let's save this okay so our static sidebar is now completed now we have to add functionality of a menu icon and you know a kind of movement towards right side and then come back into screen on clicking that icon so for making this I am going to header dot GSX here and below this UL I am making a div with the class name of menu icon and in this day first of all I am importing an icon from the react icon which is bi menu alt and right okay then I am giving it a size of 30 pixels so if we just write 30 it will be 30 pixels let's save this and yeah it will have error because okay it's Auto imported okay so here is the icon now for the movement States here I am using the U State hook of this react so const menu open and then set menu open like this with the use State hook okay you state and by default it's going to have a state of false whatever I am making a lot of typo in this tutorial I don't know what my hands are just sleeping on the keyboard okay and then to control the state here I will say on clicking this div let's do something so what it has to do it will set the menu open as true so basically not always true but the negation of previous value so if it is open means if it is true then it will make it false and if it is false then it's it is going to make it true and also I want to make a comment here that this is only for medium and small screens okay let's save this now of course we have not changed any type of styling on the basis of the state so it's not going to affect in the results as if I click on this nothing is happened actually means we cannot means we are not able to see any kind of difference so how we can see the difference here uh I will say not on basically this menu icon on the yeah on the menu here I will give it styling get menu Styles and I have to import it from my motion dot JS and I am giving it a parameter of menu opened of our use state so let's go to this function definition here I am going to menu oh sorry not the menu okay motion dot JS and at the very end here I have get menu style so it is taking the menu opened as a prop and it is saying if we are on a medium screen size or a very small screen size like the Mobile screen size then it's going to do a functionality here what it will do it will console log this statement by the way this is not a good practice I am reviewing this okay so what you will do it will return a styling of right distance okay so if the menu is not opened then it will give the styling of minus 100 towards the right side so the sidebar will be gone from The View and if the menu is open then it's then it is going to return nothing and if it is returning nothing then the state will be like this as it is currently in The View so let's save this and also save this now if I try to click here here you can see it is coming back and it is going outside of The View also to give it Shadow when we scroll down means when we are going to have more content on our portfolio and the page is scrollable so we want to give a shadow as in the developed version if I close this and I scroll then on scrolling a light Shadow appears on the bottom of header and if I are on the top of the page then it get away so to make this functionality I have made a custom hook so I can say here cons headers Shadow okay is equal to use header Shadow and then I have to import it basically it's not importing why it's not importing let's see in our hooks here it is use header Shadow let's try to open this okay I am exporting it but it's not importing here let's try again use header Shadow okay now it's coming here I have just visited it manually and now it's showing here close this from here okay to use this Shadow header on the wrapper div here I am going to make the styling like this one that the styles are okay okay I have to make it outside of here yeah like this one let's format it okay so if we are not on the top of our portfolio or of our screen then it's not going to provide any type of Shadow and if we are scrolling down then it will provide the Shadow and the shadow it returns is stored in header Shadow and now we are giving Dash Shadow as the style of our wrapper so if I save this okay there is an error that it is saying motion dot um GSX fragment so I forgot to make a closing curly brace here and now let's save this okay yeah so when we will have more content okay let's actually make it more content and at least try to do so app Dot module.scss and make high test 200 pH okay now if I scroll down here you can see the Shadow and if I add the top of the screen then there is nothing and now as the functionality is completed I can just skip this hide part from the module and yeah it's time to move towards our next section which is the hero section okay let's go to the deployed version here this is the hero section let's make this I am going to my components here and make a new folder with the name hero inside the hero make the hero.jsx and hero Dot module dot scss okay and then this CSS utilize here and here is my component r a f c e and instead of using this div I will say section dot css.wrapper also I have to import the CSS so import CSS from the relative folder again I'm making a lot of typo I don't know why I'm making this and here I am simply saying hero now go to app.jsx and below this header I am simply making hero section let's save this go to our development and here is the hero section and for the wrapper here I have to put some Global styling also so inside the back piece inside curly braces here than the dollar sign and I am giving some paddings here and then inside this okay let's make font bigger here I should make a div with the class name of container and yeah we have to make some more styling here okay let's give it some inner width like this and okay well that's enough after this let's go to deployed vision and I want to give logic how we are going to make this let's consider these two spans as a single div and these two spans means uh the Span in which it will say 10 years experience and then the certified professional take these two spans as an observative so as a whole we can say these two spans as the upper div and these two spans as the lower div so let's follow this strategy and here I am going to make two divs okay the first one is of course the upper so here I will say upper elements like this and similarly the lower one will be the lower elements so lower elements cool okay let's make it small and format our code first of all inside the upper elements we have two spans so span multiply by two for the first span I have content hey there and then a line break after this I am bin Chan let's format the code also add a stop here let's see in the second span we have and I love what I do let's save this and see here here we have these two spans and if it's the upper element which is ending here so I can make better comments also per elements and here can be the lower elements below your elements let's save this in the lower elements uh again I have two divs so the first div is class name equal to CSS dot let's say experience and similarly the second one will have a different class name and I will say it as certificate like this and for the experience section if I go to deployed version here you can see it has a very bold 10 and then she has experience to make this I will make a div with a class name of primary text and primary text is going to be the 10 then I am making a second with the class name of security test by the way these two classes are Global classes therefore I am not taking a css.primary and css.secondary you can find their definitions in the global dot SCS okay here again I am making two divs in the first div I will say years and in the second div I will say experience cool now for the certificate section I am making three elements here like this okay so let's format the code you can see better the first element is the image of the certificate that is present in our public for a directory here you can see the certificate dot PNG then the second one is span certified professional and the UI ux designer cool so let's begin The Styling from the upper elements okay here inside the hero.module in The Styling first of all I will include the constants file to use the variables and then after this I will Target the wrapper class as we know that the most parent class here is the wrapper one so I am targeting this here inside this we have to make it overflow hidden and then I am targeting our container class okay inside the container as we know that we have two elements the upper element and lower elements but before styling them let's make some styling for the container itself so I am giving it position relative with the Z index of one and then I am targeting the upper elements and then make the display Flex align item centers and justify content space is between for them let's save this and see the results okay then I then I also want to make it Flex wrap so that it should be responsive on mobile screens now let's target the lower element for the lower elements make the margin top of 12 REM so that we can have space to you know Place some content between the upper and lower elements let's save this for now yeah I want I have to make it also display flex and then again all this stuff streamline item Center and justify content space between here is the results now I am going to Target this div which has the name of experience as we can see in our section here this is the experience div which is containing a primary text and the secondary text I also want to make this div as a display Flex so here it is line item centers and GAP should be one REM also I want to Target the second element so which is the second element here this div which is containing the class name of secondary as you know in the developed version here this is containing a specific alignment means the display Flex this is a single div and this is an other div and it has a gap of one REM in between and this Steve is having text aligned vertically so to make this I am targeting the second child of experience and making it as line height of 25 5 pixel here are the results just according to the deployed version we have here okay now it's time to Target this certified professional div which is having a class name of I think so certificate yeah here it is so to Target this I will write the certificate with the display flex and the flex direction of column the Align items are center now I am going to Target the image of certificate so I will give it a margin bottom of one REM with the width of 3.5 RM here our basic structure is almost completed the one thing that I am missing here is the font size is not according to the developed version so to make it correct again I am going towards my code here and for the first pen of the upper element here I am giving it a class name of primary text and then the second span is going to be the secondary text so secondary text like this let's save and here now you can see the font size exactly what we want now as you can see here we have an image of person that should be at the center with a separate background because if I reload here you can see the movement of both images are different and then we also want an email so first of all let's focus on the image of person for this after these upper elements here I am making a div div.css.person inside this person I am making an image and for the image I am giving thus SRC means source is equal to percent dot PNG this image lies inside our public directory again here you can see the person.png so I am just simply importing this let's save and see the results the image now our task is to make it in a correct position to make it in a correct position again go to the CSS here and after this lower elements actually yeah after this lower element here I am targeting the person class first of all make its position as absolute with the bottom of minus 2 REM so it will have a distance of 2 RM from the bottom with the margin Auto and the next thing is I want to give it a background image which which is going to be a splash image having a purple color like this have here so for this I am targeting its URL as it lies inside the public so Splash dot PNG like this with the background repeat so background rupees as no repeat and then the background size so background size is going to be the 23 RM with the left of 33 percent okay let's save this and yeah here it is the splash image is perfectly aligned and the image is also imported now it's time to write our email for the email again I am going to hero.gsx and just after this person image like this here I am going to make our email okay so for the email I am pasting a very basic code basically let's format this and here I have an anchor tag which is having a class name of email and then simply email for more in the href I am using a class mail too so whenever someone clicks on this anchor tag it will make a pop-up of your email window which is going to send emails to Zen keeps code at the red gmail.com okay let's save this and see uh here it is imported so again go to The Styling and after this person I am targeting the email for the email make position absolute from the top it is having 50 distance from left zero percent and color as Orange okay cool save this and yeah everything is ready means of a static hero section is now ready as it is in a developed form so let's make it responsive for the mobile screens also so here the screens are aligned now first I am going to Target these upper elements so here let's make text bigger and I am targeting the maximum width small means on the mobile screens make the justify content Center and text align Center also give a gap between them of 2 REM now let's move towards the lower elements for the lower elements here I am targeting the screen size of small and mediums small and medium width and for them I am making a margin top of 4 REM with a gap of 2 REM now I also want to make them justify content Center okay this this alignment is just because of the size of image so we will fix this on letter but before this uh I am going to Target the person here means the background Splash for this I am again targeting wild devices and small tablets making position relative from left it will be zero and the background size is going to be the 20 REM let's save this here you can see now it's almost fixed with the display Flex align item Center and justify content Center okay so still the background is having some distance from the very bottom so to fix this here I will say the background position is bottom so now everything is in its correct form for wild screens I am removing this email because the screen is becoming too much saturated so here I am targeting the email class and for the small screens made position relative and display none so yeah a very clean design which is almost ready for the mobile screens is now in front of us with the very cool sidebar so uh as we have to handle the image size also so in the person yeah in the person it is containing an image which is this foreground image and for this on the media of Max width SM means small devices make the width of 23 REM now for the margin bottom I am giving it a minus 5 pixels let's save it yeah now the width of our image is also correct it's time to add animations to our hero section so for this again I am going to hero.gsx here to add the animations I am making this div as motion dot div now we have to import this motion from frame or motion so what I will do simply here I will make a line import motion from framework motion now I have to give some properties here so what these properties are going to be I am just pasting here like this one and it is containing a variant of stagger containers Tire container you can take this container as if this is applied to the most parent element then the child elements are going to show animation in a specific one by one otherwise if it is not applied then the child will show very irrelevant Behavior so let's import it from our motion.js and it's not showing Auto suggestion so go manually to motion.js and here it is the staggered children and we want stagger containers so let's search for this stagger container dagger container yeah here it is now try again here so if I press again yeah it is applied and if I go to its code here you can see it is staggering the children's with some delay so it will show some constant behavior on all the children by the way again the initial screen is going to be the hidden for this element and then when it comes into view it will be shown when the viewport will contain around 0.25 percent of the hero section now if I apply this you can see there will be nothing applied on our hero section because we have not specified the specific animations for its children I am going to Target these upper elements and first of all target this first span here I am writing motion dot span and we have to apply some variants and I am giving it a variant of fade in by the way as we have given the parent container as the Stagger container with the initial and while in view so we don't have to make it again and again for the child elements okay and yeah we can make it clean like like this so what is this variant I am saying make the element animation as fade in from the right with the animation type of twin the delay of 0.2 seconds and the duration of the animation is going to be the one second so let's try to import it from motion dot JS by out of suggestion like this and if I go to its code inside motion.js here you can see first of all it is taking the direction and making the changes in its X and Y axis with the opacity and on the show everything is going to its normal position with the XY 0 and all of these parameters are applied in the transition so let's save this and see if I reload the page here now you can see it is showing a very beautiful Behavior similar type of effect I can apply on the second span so this is the second span and I am just pasting a line of Animation like like this what it is exactly doing here everything is like but there is a problem here it is an error because I also have to make it as motion dot span okay the variants are very simple it will show animation similar to fade in but the position but the direction is going to be left so let's save this and refresh the page here you can see similarly I am going to Target this person and for this person just make this one and make motion dot div let's save see here now to make the movement of foreground image different from the background as it is behaving in the deployed version to achieve this effect I have to apply a separate class on the motion dot image like this not the class but the variant so I am applying a variant here this is not fade in this is slide in and all the other parameters are same so let's also import it from our motion dot JS let's save this and now if I refresh my page here it is showing the animation I am fast forwarding the video now and are going to apply a similar kind of animations as we applied on the upper elements so we will apply same animations on the lower elements so here I have applied these animations first of all these are the lower elements and this is the first div which is having this variant and similarly this is the second div which is having this variant if we show the results here now you can see now let's try it on a bigger screen and refresh the page very smooth experience here so it's time to move towards our next section which is going to be this what do I help let's start this section go to the SRC directory here inside the components make a new folder with the name expertise inside the expertise make two more files expertise dot GSX and expertise Dot module Dot scss let's open them side by side rafce here let's save this and import it CSS like like this let's save this now instead of this div we have to make it section so section Dot CSS dot Dapper of course and div.css. container and inside this container we have to make a lot of stuff but first of all style this here for the styling we have to make very basic things like give some paddings and I also want to specify the Y paddings with the flex Center and inner width cool okay after this if I save this and simply write it here expertise and inside our app dot jsx here below this hero I am importing this section save this and see the results okay there is an error about our CSS file so the error is just because here uh I wrote the CSS however it should be scss now if I save and everything is good and here is my expertise section inside this expertise I am going to make two divs the first div is going to be the left side and the second div is going to be the right side because if you remember the deployed version the this section works on the basis of two size let me visit again here you can see this this is the left side and this is the right side so we have to take care about the two sides let's start from the left side okay inside the left side we have some data like uh we have the icon we have the name of our Expert T and the projects we done with that specific skill so uh to make this data available here we have file data dot JS actually it lies inside the utils folder here the data.js if we open this file here you can see I have an array of objects with the name project experience and each object contains the name of experty with the project number the name of Icon and this icon is actually imported from the react icon so we have to use them dynamically in our section and also it contains a background color this background color is basically this color each I can have a specific color behind it so this color is defined here inside the BG so these are the three expertise I have to use them here so I will say project expertise basically project experience imported from the utils data it is auto imported and then I have to map around each expertise with its index number and I will say for each X quality you return a div basically and for this tip I am giving the class name of exp means the experience also I have to give a specific key it behaves like a specific ID in react components for each expertity we have to return an icon so let's say the flex Center and this div is containing our icon exp dot icon with the size of 25 pixels and the color of Icon is going to be the white like this now it also contains a second div and for second view I am giving no class name but the two spans so for the first pen it will be the heading so exp dot name and in the second span we will have the explanation so exp dot projects the explanation only contains the number of projects we done with specific skills so if I format the code it looks something like this let's save this and see the results okay so here I have the icons but they are not too much visible because of the background color and the white color of the icons now we have to move towards the styling of this section again inside the module import our constants file like this and Target the wrapper I have to give it a background color of white because this section here you can see the deployed version it is containing a white background so it is have a background white CSS inside the wrapper we have the container for the container make line items like start with the gap of 2 REM and the flex wrap as the wrap to make it responsive so yeah here are the result and then after this I am targeting the div inside the container means I am targeting the direct Childs of the container and the direct Childs of the container are left side and the right side okay let's give some content here as right side and this is our container here so I am saying about right side and left side when I am writing direct div so for them make the flex as one so both will contain the equal width of the screen let's save this and see here here you can see this is the left side and this is the right side let's move on after this I am specifically targeting the left side making it a display Flex Direction column and a gap of 2 REM so yeah nothing too much difference but still I have to Target The Experience div in switch lies inside the left side make it again display Flex item Center but I am giving it a border of one pixel with the solid secondary white color so if I save this now you can see each of the experiences containing a border around it now let's give it some border radius and a padding of 1.5 REM also I want to give some more distance between them so giving a gap of 2 REM with the transition of all 200 Ms is out let's save this and here are the results by the way if I make it side by side so you can see it more better yes now you can have the more better idea okay after this I am saying on hovering each of this experience make the cursor as pointer so now you can see I am having cursor as pointer on hovering this and then I am giving a very beautiful back box Shadow on hovering this so now if I hover there you can see a very beautiful Shadow which is appearing very smoothly why it is appearing smoothly because I have given the transition of 200 Ms ease out okay after this I am saying the first child which is basically the circle that should be this one okay so for this icon I have made a comment icon circle make the padding of 10 pixels and the width of 3 REM and after this also the height should be 3 RM with the Border radius of circle now the description the description is basically this one which is the skill name and the number of projects we did so for this one making the nth child two because the first child is the icon and second child the description make the display Flex Direction column and a gap of one REM inside this description as we know that we have two children first one is the name second one is the number so I am targeting the first one and for the first one I am saying make the phone size of 1.6 RM and a font weight of gold so let's save this and here and here are the results okay if I go deployed version it should also say the project so on the in the expertise dot GSX after the projects I will say it like projects and I am also giving it a class name of secondary text so if I save this oh sorry so yeah but the problem is the icons are still not visible so to make them visible here I am giving it some styling and as a styling I am saying it should contain the background that is experience dot BG okay so now these icons are visible how easy that was okay let's move on towards the right side of this section so here is the right side and if I go to data dot JS for the right side I also have an array okay if I make the word wrap on here here you can see I have two members of this array I can separate them like this one this is the first string and this is going to be the second string if I go to the deployed version here you can see the first string and this is the second string okay so I have to use them here uh in the expertise dot GSX remove the right side first I am making the heading of the section as the primary text with this what do I help let's save this and here is the result and now I again have to use some JavaScript what do I help import it from data.js and map through it and for each of course the paragraph through each paragraph it reads with its index number and then return a span element for the span element simply write the paragraph like this and I also want to give it a class name so for the class name give it the second read text let's save this and here both of the paragraphs are visible one thing we forget about the index number so key should be used as its index if I go to deployed version now uh we have to make these two numbers okay so for this I I'm saying it as stats so this section is ending here and now I am making a div with the class name of stats let's make text a little bit bigger actually it is too much difficult to manage all the things on a single screen for the tutorial and then make acting with the class name of stat and let's see if I can multiply it yeah so for the first step basically for both of the stats I have to make spans and multiply them by 2 if I format the code for the first pen I am saying 285 plus and for the detail I will say project completed like this and I am just copying and pasting this div below and for the second one the numbers are 190 plus and the projects complete no it's not the projects completed these are the happy clients like this let's save this okay let's make some styling here first of all for both uh for this stats if actually make it under the back text with some curly braces and give it Flex Center if I save this you can see now they are in a row Direction and for both of the stat here okay I am selecting both of them under text some curly braces dollar sign and again select Center but they should be in the column Direction but we will handle this in the scss okay now for these pans we have to give some class names basically this is not working so class name primary text and here the class name as secondary text similar type of pattern I have to repeat for the second stat you can see it's pretty much aligned it's only missing the column direction that we have to handle in our scss so here in the expertise let's make a little bit bigger and here I am targeting the right side and be careful as you know that this brace is for the left side you can see if I hover and select this brace braces then it is closing here and then the right side is opening after this one so you have to care about the nesting while working in the scss okay now let's make the text align center for the small devices means for the mobile and display Flex Flex Direction column cap of 2 REM I am talking about the whole right side okay so if I save this you can see it's pretty much aligned now after this I have to Target the stack ads which is this one and making justify content Flex start with a gap of 4 REM now they are having pretty much gap between them on next Target the individual stats so for the individual stat I am making Direction column and justify content Flex start so yeah everything is aligned according to the deployed version here and yeah here and the bonus part is it is automatically responsive for the Mobile screen now if I make it more small so yeah like this one here you can see this is a Mobile screen size and it is automatically responsive for the Mobile screen everything is in a perfect alignment the only thing is remaining to add the animations for this section so move towards the expertise.jsx and for the very parent section which is the wrapper I am making it as motion dot section and increase dilute the motion from the framework motion like this one and I have to make some basic adjustments for the very parent so here I I am giving it a variant of stagger container imported by Auto suggesting and then initial hidden while in view show and then the viewport after this okay let's make some distance here as you know in the deployed version it has a very beautiful behavior of coming in the screen one by one first the website design then this one and it's very smooth so to achieve this here I have to make motion dot team and for this motion dot div I am giving it a variant of fade in but the logic is come from right side with the animation of twin and the delay should be I plus 1 multiplied by 2 with the duration of 1 second so as we know that I is the index number I am adding 1 so if the index is 0 then it is 1 multiplied by 2 so the delay is 2 seconds then 4 and then 6 and having a delay of 6 is too much so I am just making it 0.2 so it's easy to understand and there is an error because I have not closed this function and I also have to fade in Auto Import from motion let's save this and hope for the best if I refresh my underdeveloping version yeah we are able to achieve this same kind of effect here let's see if we have any type of fact for this section so let me refresh yeah we have so I have to achieve this effect and this is very simple to achieve for the right side I am giving motion dot div and I am giving it a variant of text variant 0.5 this is a very simple function so you can see about it if I go to its definition here you can see uh in the hidden state it has y of 50 and when it is shown then y of 0 and nothing more than this this is just the animation type with the duration delay okay so let's save this and try again yeah it's also animating if you focus here so the animation section is also completed our next Target is to complete this section which is the experience with the different roles at the different places it's very interesting to build so let's start this for the next section I am going to make a new folder inside the components so inside the components make a folder with the name works and let's make it with the capital letter inside the works I am making two file Works dot GSX and works.module dot scss let's open it and okay before opening side by side I am again aligning my screen size according to the project like this okay in the works.jsx rafce for the react fat Arrow function and first of all we have to make a section with the class name of wrapper and I also have to import CSS so import CSS from relative Works dot module dot scss okay now I am making the styling and all the things side by side without going back so I have to give some paddings and let's make text like this one inside this we have to make a container sodium dot CSS dot container okay let's write something here like let's save this and inside our app.jsx import this component below the expertise so worth yeah by Auto suggestion let's save this and see here okay here it is saying these are my words so component is imported successfully now let's get back I am also giving the animation side by side this time so first of all import the motion from framer motion and then doing some basic stuff that we have to do with every section means giving it a variant of staggered children so by address just saying I am also importing this and here make it motion dot section so yeah like this now let's work on the container so if I go to deployed version okay let's close this sidebar the first thing is the heading which is my work experience let's make this Heading by removing this and span with the primary text and inside this I am writing the line of our heading and I also want to give it some y padding so it should have some more distance from the top and Below let's save this and yeah here it is okay for now it is not in the center because our container is not having any properties so let's give some styling here first of all I will make it Flex center with some inner width okay yeah now it is in Center so after the heading here you can see we have basically three divs the first one is containing this rectangle then the second one is containing this one and then the third one okay because all the data means self-employed in the breeze in the Brisbane and how he was employed as a visual designer so this is a total relevant data so we have to put all this data in a single div then this data in an other div similarly for the third one so let's start for the first one first of all I have to make a parent container means the experiences so this is our most parent container and here now I am writing some JavaScript okay if I go to my data dot JS here you can see I have an array of objects which is having name work experience this array basically having objects which have the structure of place tenure role and detail key so place is going to reference this detail then the tenure is going to reference this detail similarly the role and detail for this section and here we have three objects like this for the three such details let's get back to the verse.jsx here I will say work exp imported automatically so here you can see okay it's not automatically imported try again press enter Work exp it's not working let's try it manually okay here I have to map through this data and I will say for each experience along with its index number return some div so the div is going to be the experience div and I also have to give it a key like this one now let's form it the code and inside this div we have two children divs the first one is going to be the first one and for the second div we have the name of role okay let's try to fill out the post section first because post section is referencing this section let's make an H1 heading and here I am saying exp dot place and then after this heading I have to make a P tag which will say exp.10u let's format the code again and try to do same thing in the role section for the role I am having similar details but the keys are roll and detail for these two things so let's save this and have a result if I move here so yeah here you can see I have everything but the problem is for now because I have just specified it as flag Center so everything is in the row but as the design suggests it should be in column Direction but before going to its SAS part first I have to do some styling here so I am giving it Flex Center save this so all these things are also in row now of course we have to fix it for the column Direction but I am also giving the flex center for the single exp div okay so here just simply say select Center let's save this now we can easily move towards it so if I write words dot module here again for the very first thing I am importing the constants scss to use the variables we declared and then I am targeting the wrapper for the wrapper we have a container class inside this and I am making Direction column so if I save this here you can see the heading and the Bellow contents are in the column Direction after this I am giving a gap of 2 REM and then I am targeting the experiences div which is containing all this information for this one as you predict we have to make it with 100 and the direction of column so if I save this now they are actually aligning themselves we should have some distance between them of 1.4 REM and a position relative let's target the individual div inside the experiences so I am saying they also should have width of 100 with the justify content space between and then the line height of 40 pixels yeah like this after this make the line items Flex start yeah now I am going to Target the each div inside the EXP so if I visit my code here and inside the EXP basically I have two deals first one is the post div and second one is the roll one so I am targeting both of them and I am saying for both of these divs make the equal bit so so if so if I save this here you can see how proper they are aligned now after specifying a specific width for each of them now I am targeting the roll class specifically and making the margin left of 2 REM that's enough for this section the next challenging part is to develop the progress line if I go deployed version here you can see this that progress line which is animating on refresh here you can see this line so the whole logic behind this is we are not making its position relative to the parent block it's going to be the absolute for the parent block so it is not affected by the position of these three divs it will have its position independently inside the experiences block I am going to work.jsx and here for the experience means the individual block I am making some animations variants text variant 2 that is also defined in the motion.js let's import it by Auto importing and we have to make it motion dot div let's save this and now go to the development version if I refresh the page here how smooth is this effect and now we should move towards the progress bar for the progress bar I am going to the most below section after this div yeah and here I am making a div with the class name of progress bar inside the progress bar I am making a div with the class name of line which is basically a dashed line and I am giving no content in this and then we also need three circles like green orange and yellow so for these circles here I am pasting some code like this so this is nothing more just some simple leaves with the class name of circle and having their own different background colors so if I save this and see here okay they essentially nothing happened and why nothing happened because we have no content in any div we have nothing inside progress bar we have nothing inside line and then inside the circles we also have nothing so we have to play with the CSS purely so here the trick part is this this progress bar hold div should reside inside the experience diff so if I format the code now okay I should not form it because it is making it too much out of alignment align this like this and if I make this selection here you can see this is the parent experiences div and inside this div I am making the progress bar because I want to make this line in the center according to this experiences let's save this section here and move to the module dot scss okay here in the scss I am making a progress bar inside the experiences div and for the progress bar I am making its position absolute with the height of 100 with the display flex and a column direction also I am giving a gap of 1.5 1.4 REM between its content and its content are going to be the parent divs of the circle here you can see in the verse dot GSX we have the parent divs around the circle divs and also in Contents the line is also included okay so we are giving gap of 1.4 REM and a left value of 45 percent so it seems just like it is in the center of div now I am targeting the line itself and making its position absolute with the height of 92 percent so making it absolute is give it a way out of this display Flex because here you can see we are giving display flash with the direction column and we don't want to make it in alignment with the circles because this line is going to be as a background of those circles okay let's move on now I am giving the width of 2 pixel and then the line is having a background image the trick part is we are not making its border like dashed border instead of doing that we are using a background image of linear gradient color and then making the background position towards the right side with the size of 2 pixel width and 30 pixel height of each Dash in the line then I am making the background to be repeat in the y direction let's save this and here we have a beautiful line in the center of experiences to have a sense of in the center because for now it's not in completely in the center of div I am making left 48 percent and yeah now it changed perfectly in the center with the Z index of 1 and Border radius of 5 pixels let's make it bigger and if I save this I should move towards the div inside the progress bars these divs are actually going to be the parent deals of circles and for those I am making Flex one so they will have the equal width and then the padding top of minus uh sorry 0.8 REM with the Z index of two so making it Z index 2 and line as the index 1 make us show that the line is always B in behind of circles okay after this I am targeting the circle and making its border 50 with the background black and a width of 1.2 RM as we are also specifying the background color inside the works.jsx so this background color will override this background black so you can skip this from here and then a height of 1.2 RM let's save this and here we have these beautiful circles over the line now if I expand this to the desktop version here you can see it is perfectly aligned for the big screens and for the small screens also it's time to add the animations in within this progress bar so inside the works dot GSX first of all on the progress bar I am making a variant of Zoom with the parameters of one and one let's see what these one and one do basically one basically one parameter is going to be the delay and second one should be duration but we can confirm by visiting the definition okay first we have to import this from the motion.js now I should visit this here you can see here first one is delay and second one is duration so and then we have to give this div a motion dot div name let's save this and see what will happen if I refresh the page yeah the whole progress bar is showing a zoom in animation but we also want these circles to show a different animation as in the developed version if I refresh only the background progress bar is moving is sliding in and the circles are zooming in so specifically we have to change the animation for the line here for the line I am giving it a variant of fade in also Auto Import it giving it a direction of down with the animation type of twin the delay should be 2 seconds and duration should be 1.5 seconds let's make this as motion dot div and save it let's refresh our website here okay there is some error I think it is not Auto imported let's save again actually it is not Auto importing so I have to make it import manually after this zoom in I am just pasting its name and save this now if I go to that specific section yeah the animation is exactly same as we have in the developed version like this and then here so our experience section is complete now we should move towards the next section which is going to be the my latest works here so this is a relatively easy section to build if I make it on full screen here you can see this very easy section to build so let's make it very quickly close all of these files so we should not be messed up and inside the components again okay let's close this also I am making another folder with the name portfolio for the next section inside this I am making portfolio dot GSX and thus CSS so portfolio dot module dot scss like this one open them side by side and here in the GSX rafc for the fat react Arrow function again make it the section dot css.wrapper with some initial stylings like the first place the dollar sign okay here and make the paddings around it and for now make it a little bit small and inside this section I am making a container also so here okay I have to import the CSS here import CSS from the relative folder portfolio Dot module dot scss let's save this and and inside the container I am simply saying portfolio section now let's move towards the app app.jsx and after the words I am saying portfolio fraction should be imported let's save this and see the results here you can see it is saying portfolio section with some padding means it is imported successfully for the container again put some styling so for this container I am saying it should have some inner width with the flex Center okay again if I make it side by side then you can see it better so yeah something like this so instead of this portfolio section we have to place our heading first so make are dipped with the styling of heading and for this I am saying make an other div inside this which will contain a span and a p element so after this pen I am making a p element why I am making such structure because if I go deployed version and here you can see I have this my latest works at perfect solution the two parts of the heading so for making the two parts along with this Explore More heading I am making such structure the first tip is going to contain these two align parts and then the second D will contain this heading of explore wall so make them one by one the first one is my second one is perfect solution for digital experience okay format our code like this and for the span I am giving a class name of primary text go to our development website again and here it has the primary text and for this P P tag I am giving it a styling with the margin top of 10 pixels let's save this also so it has a little bit more distance now it's time to make the second div after this one so I should make some spaces to make it more clear this is our heading here the first div is ending and here is the second actual the second is not the give but a span with the class name of secondary text and inside this pen I am saying explore more work so simply copy and paste this copy here and paste here and here we have Explore More Works let's let's move towards some styling for this particular heading I am again making it inside the back text with the curly braces and then making it as the flex Center so everything will be in row direction we will style it more in the scss part let's move towards the images so the heading is ending here and here I am saying it is going to images of our portfolio so here I am making a div with the class name of showcase inside the Showcase I am simply pasting some images with the animation so here if I paste this and let's uh okay here a tag is missing essentially and make it formatted so here you can see that inside the Showcase I have this image which is having a variant of fade in I should import it from my motion.js and it is having a source from the Showcase one dot PNG so if I go to my public here you can see showcase one two and three so basically these are the sources imported from the public directory and then the thing to ponder here is fade in animation all of these images are having the same animation type which is the upward movement and the twin type of Animation but the difference between their delay is around 1 millisecond first one is having a delay of 0.5 second then second one is 0.7 and third one is 0.9 second actually it is more than one milliseconds they are around 2 milliseconds and for all of them the duration of Animation is going to be same of 0.6 seconds let's import the fade in let's save this and see what happens okay there is an error and the error should be yeah because we have not imported the motion from framework motion I was thinking about it but I was not sure whether I have imported or not like this we have imported the motion and now if I save this our website is again working and let's make this website a little bit smaller so we can see our code more clearly and close this sidebar and yeah our images are here but they are too much huge so we will not be able to see the animations if I go to my full screen here like this I should zoom out and if I reload and try to see the animation no it's not applied just because of we have not specified any parent container with the staggered children so in this section part I have to make it as motion dot section and then after this again I am giving some predefined configurations like the staggered children we shall hidden and the stuff that we are doing from the very first part let's save this and see the animations again okay they are not actually happening and I think this is just because of our alignment our alignment is not good here so let's fix this and move towards its CSS part so here I am going to portfolio module and make it again around 100 percent yeah like this move towards the portfolio section okay first of all I am importing the constant scss and then for the wrapper I am saying background to divide if I apply this then a white background should be applied but uh we are not seeing any kind of white background let's see why this is happening actually this is going too much out of alignment I think this whole bug is because of our image size so what I am saying uh I am here making a comment out our all pictures let's say and try to see what is happening exactly yeah so now it's working if I import only one image here and then try to see okay one image is showing up and similarly if I try for the second one remove this from here and like this one let's try okay still the section is showing up let's try with only these two images for now and after making the alignment correct we will move towards the third one okay after giving background white I am saying or flow hidden with the container is having Direction column let's save this okay now you can see uh at least all the things are appearing inside the portfolio section after this I am giving the gap between them of two RDM with the heading inside the heading I am giving this heading a width of 100 and then adjustify content of space between let's save this and and here we have the distance between them because now they are moved towards the relative Corners making them align items flex and with the flex wrap wrap so they should be responsive now I am targeting the second child inside the heading means this Explore More works for this I am saying text decoration should be underline and color of text should be orange so if I save this now it is designed okay I also want to make the cursor as pointer on hovering this now our next Target is to fix these images means the showcases here I am targeting the parent div which is having name showcase giving a width of 100 a gap of 1.5 RM between the images so yeah here now it has a cap okay make the justify content space around with the flex wrap of wrap but the one thing that we have to fix is actually the size of image so for sizing of image I am seeing in the media of small devices because for now we are on the mobile device stage make a width of hundred percent and otherwise make the Border radius 20 pixels and the maximum width 25 RM let's save this and here are our images now we can uncomment our third image from here let's uncomment this so now it is showing up here the third image is also rendered okay let's style them more for more I am saying give the maximum height to these images as 18 REM and with this beautiful Shadow if I save this here you can see there their height is also now controlled at last make a cursor as pointer okay so I assume this section is also style if I go here no this is in center and this is not in center and yeah this should be fixed by giving our showcase Flex Center so go here and then make it as Flex Center if I save this yeah all the images are now centered exactly like we have in the deployed version so how easy that was to build on the big screen if I go to the development version you can see it is exactly like the developed version okay so our next section is also going to be a kind of easy and at some point it would be tricky and this is the testimonial section here we have a beautiful Carousel which is having custom cars with Shadow with the navigation functionality and with the swiping functionality and if I make it for the mobile screens like this now the number of cards on The View has been changed so we have to take care all of these things while building this component so let's start building this again go to the components directory let's close all the directory inside the components I am making a new folder with the name people and inside the people I am making GSX and module scss okay here inside the people.jsx again rafce and import the CSS import CSS from relatively people dot module dot scss now we have to make the section for this one so make section Dot css.wrapper okay so this one we have to make our div with the class name of container inside the container I am saying people comments let's save this inside the app.jsx after the portfolio I am importing this component okay let's save this and see what happens here we have the people command so it is imported now again go to the people.jsx and give some classes here so for the wrapper I am giving it the paddings here like this so it is having paddings and for the container here I am giving it some more padding so in the y direction y padding with the inner bits let's make text like this one let's save this and yeah now it is having a good distance I am also pasting some initial configurations for the framework motion so here I also have to import the motion so import from framework motion import the motion and then make the section as motion dot section let's save this and there is a problem here okay I should fix this like this one and then import the staggered children from the Motions dot JS let's save this again and here all of the things have appeared okay I have to give some distance for the better overview now inside the people commands first thing I have to make is the heading so CSS dot heading and 4D heading I am giving it a class name of flag Center so here right Flex Center like this one inside the heading first I am making a span with the class name of primary text and inside the span I am saying people talk about us and then the second thing is going to be a P tag so here A P tag inside this P tag I am pasting some text here like this one now let's save this and here I have this text after this I also have an other P tag so I'm just pasting that one let's format the code so this is the first P tag and this is the second one now for this P tag I am giving it not the class name but the style so for the style make the margin top has two REM let's save this now we should move towards its scss so here I am giving the link of our constants and targeting the wrapper for the wrapper we have container inside it and inside the container we have the heading so for the heading I am giving the flex direction as column and if I save this everything is aligned perfectly here after this I am saying the heading is having a P tag and for this one make the line height of 30 pixels let's save this and yeah so our heading is now exactly like the deployed version as we are seeing here now it's time to make these Carousel to make this Carousel we have to import some links in our index.html so I am going to our index.html here and below this actually above this title I am pasting some links so these links are towards the the carousel files which is the library slick Carousel so first one is its CSS and second one is also CSS now we can use this library and we can have better results let's save this here I will provide these links in the readme file so you don't have to worry about this and now inside the people.jsx The Heading div is ending here after this I am making the Carousel like this one and make a div with the CSS dot comments inside the comments I am making a slider component and this slider is basically an object of react slick Library Rex click is a very popular library for making the smooth carousels now I have to make an ending tag here and for this I I am making some slider settings and we have to import these slider settings from our data.js so we will see what is inside the slider settings but before this I have to give it a class name so CSS dot slider let's save this and I prefer that first we should make some content inside the slider then we will look what exactly is inside the slider settings these are just the props that we have to send to the slider component so it can work according to our requirements okay inside the slider I am again using some JavaScript and I am saying commands we have to import them from data file so let's go to its definition first inside the data.js I have some comments array again this is an array of objects first one is the name of the person who who commented and then its post with the comment and the image of the person so similarly I have some data of T command now I will iterate through these comments and I will say for each comment with its index number we have to return something and what we have written I am returning a commentive inside the comment div first thing is going to be the image with the SRC of comment dot image as we have inside the arrays object then a P tag and for the P tag comment Dot comment after this we have to make a line so div.css.line we can reference this line in the deployed version here you can see we have the comment and then we have a line and at the very top we have the image so similar structure we are following here after this line I am saying bio class name for a div and make two spans for this in the first pen I am saying comment dot name of the person and in the second span I am saying comment dot post of the person let's format the code again and let's save this now go to the development version and here I have some data which can actually slide due to the slider but it's not styled because we have not specified styling in our scss file let's make some styling that is possible inside this section so first of all for the comments again I am giving it some padding here to give it a distance from both sides why paddings here now it has some distance from the top after this for this comment here again inside the pack text and then the dollar sign make select Center so everything should be in a flex now so everything should be in center but it's not applying here just because of some styling that comes with the slick slider and it is our writing our styles of flag Center so we have to fix this so but first of all let's discuss about the slider settings I am going to its definition and in the slider settings I am saying dots should be true so because of Dost true we are seeing these doors and then infinite as false so you cannot scroll as an infinite blue it stops at the end you can see now we can't Loop more and then the speed of 1000 slice to show 3 at the youth screen and then slice to scroll means on each scroll it is shifted to the one slide now the initial slide should be the zero and this is basic the index number touch move means it is very helpful for the mobile screens and the touch screens and then use CSS through now now it is the responsive part as you can see here we are saying that slides to show three but actually we are seeing two slides why this because we have specified some responsive rules in the responsive rules here if you come here break point 1000 we are saying on the 1000 pixel screen width only show two slides and then slice to scroll to and the initial slide is the second one now because we are not on a very too much small screen which is the reason why it's clean it will show one slide there and here at this bit it is showing two slides because it is satisfying this condition now let's move to its CSS part inside the module scss make the font size bigger and after this heading I am saying Target the comment section make a box Shadow here so I am targeting a very beautiful box Shadow here let's copy and paste this value and you can also copy and paste this from the video now padding of 2 REM with the display flex and I also want to make it important like this one no flex direction should be column with the gap of one RDM let's save this and here you can see now the display Flex is applied because I have specified as important now the background of slides should be white and then they should have a border radius of two pixels after this I want to make the position as relative now I am targeting the image inside these commands make the margin Auto for these ones so margin Auto with the Border radius of 50 percent so they will be in a circle and essentially we can make them as 100 percent okay after this the width should be 3.5 REM with the height of 3.5 REM the position should be absolute for the images let's save this and here are the results now to specify the position I am saying top should be minus 2 REM let's save this here they are now I am applying a specific filter which will give a very light Shadow on these images so let's save this now these images have very light Shadow okay now there is a problem with the slick slider that it can't put the distance between the slides and there are also some issues with the Overflow property because now our flow is hidden so our images are not shown however on the internet I found a solution for this one so I am just copy and pasting this solution you can also copy and paste this as we know that here we are only targeting the comment the each individual comment but these come comment or in the comments parent folder so comments can lie here and the closing brace should be after this one yeah like this one we should format the code and in the comments I am pasting some code which is fixed for spacing between the slides you can just copy and paste this code from the video because I found this code from the internet and this is doing what we want if I save this now you can see the Overflow plot the Overflow problem is solved and the distance issue is also solved now let's move to the comment section and after the image we have a P tag make the text align Center for that one font size of 0.9 REM with the line height of 25 pixel let's save this now Target the line specific which should lie after our comments so for the line I am saying width should be 100 with the border of 0.2 pixel solid and then I am giving a very light white color here like this one let's save this and here the line appears the very last thing is the bio of the commands so in the Bio Section I am saying Target all the things inside the bio make the display block for all of them and the text align Center let's save this now I am saying for the first thing which is the nth child one and nth child one is going to the name of the person make the font weight 600 which is equal to the Bold font weight and the margin bottom of 5 pixel let's save this and now I have to Target the position P tag so nth Child 2 and for this one make the font size 0.7 REM with some color of this very light color let's save this and here is our section if I go to deployed version okay the only thing that is different is the Border radius so I should fix this in the okay background and the Border area it should be 20 pixels yeah now it is it's actually like the deployed version it's time to add some animation on this section because if I reload there is nothing happening I am going to people.jsx and on the container I am saying it as motion dot div and let's say yeah okay after this motion dot div I am giving it a variant which is the footer variance because we are going to use the same footer for we are going to use the same variant for our footer and it is essentially made for the footer but then I realize it is also working very fine on our testimonial section so if I refresh this and refresh our page here you can see now it is animating if I visit this section again here you are seeing very smooth transition here and on the big secrets let's test this yeah it is moving very fine very cool thing to show our next section is going to be the footer which is the final section of our website let's make this again go to the components folder inside the SRC here and make our last folder with the name footer inside the footer again first one is the GSX file and second one is module file so module dot scss okay now inside the GSX rafc e and here there should be a section with the wrapper class like this one and here I am simply saying it is as footer now import CSS here import CSS from relative footer dot module Dot scss cool let's save this and try to import it in our app.jsx here inside the app.jsx below this people section here I am writing footer and yeah let's see this on our website if I go to my website here I have this footer section imported again let's make our project side by side yeah so here we are go to the footer file again footer dot GSX and instead of this photo and instead of this footer as we have from the very first component we have to make a container here inside this container I am making a div with the class name of let's say left okay why I'm saying left because I am going to make two sections of footer the left and the right one like this okay so if I simply say it left one and then say it as right one format the code and here I have left and right because if I go deployed version okay close the sidebar they are going to be the two sides first one this one is the left side and this one is the right side let's make it maximize to the desktop version here you can see the left side and the red right side so we are going to work according to this structure by making this one first okay so as it lies inside the left one I am making a span with the primary text class and inside this class I am saying let's make something and then a line break after this amazing together like this again format my code and make it a little bit small so we can fit all the things okay then I am making an other primary text here and in this primary text I am writing a very simple thing this one okay let's format it again here it is saying align start by which is this one now I am making an anchor tag inside the anchor tag I am giving my email address so by clicking this a pop-up will appear as it is appearing here to send the email this is just because of this reference of male 2. so if I save this and go to our development version here I have these two things we have to style this according to orange color but we will do this on letter let's move to the right side of the footer and for the right size I am making a div with the class name of info inside the info I am making a span with the secondary text and giving it a name as information now I also making a P tag and inside this P tag I am making a random address here so this one is going to be this div and the final one is our menu so for the menu after this info div below this one I am making another div with the class name of menu and for the menu I am just simply making some list items like this one let's form it the code okay yeah and here these are list items so our structure is ready let's import some animation side by side so as we do from the very first section here I have to make some predefined configurations to enable animation which are the variance initial while in show and viewport and we also have to import framework motion so import from framer motion we have to import motion like this and make this as motion dot section now I have to give some styling on the wrapper okay let's make a distance here and remove these extra let's start styling so under the back takes and then the dollar sign gives some paddings here let's save this okay I also I have to import the Stagger children now if I save and go to the footer now it has a beautiful padding and then make some styling for the container so for the container I will say inner width again with the white padding and the flex Center let's save this okay now give some animations to this container div by making it as motion dot div and I am giving it a variant of footer variants let's import it by Auto suggesting and now if I refresh the page here it is showing an animation while in view essentially you can see it like this one okay very good let's move toward the CSS part and for the CSS first of all import all the constants and then I am targeting the wrapper making the background as white for the footer and after this we have a container inside this and for the element of container I am giving a gap of 2 REM let's save this okay and then Target the left side of our container I am giving the flex of three times the right side so if I save this this side contains a little bit more width actually three times the width of right side and again I am saying everything inside the left side means the spans I have should have display block now I am targeting the nth child to the second child is going to be if we go to footer dot GSX so this is the first child and this is the second child which is start by so I am targeting that one and giving it a margin top of three REM let's save this yeah here is a margin on this now I have to Target the anchor tag and make the text decoration underline with the color of orange let's save this yeah now it's exactly what we want and I think the left side is pretty much done after the left side we have to Target the right side for the flex of one like this let's save this and then the info for the info I am saying the margin bottom should be 1 REM and then inside everything which is sorry inside the info everything I am making display block again so yeah let's target this menu individually now so for targeting that menu I am saying okay I have to go outside of this info because menu lies outside of the info so here I am targeting the menu and for the menu make display Flex with the flex direction of column so FLD and then column and also I want to Gap of 2 REM let's save this yeah let's make the list style learn to remove these dots to list style none sometimes the shortcuts become a pain okay now I'm targeting each list item individually make the cursor as pointer and then I am saying on hovering this list item make the color as secondary color okay let's save this now if I hover this these items are changing their colors so that's enough from all the modules dot scss but it's not exactly like what we have here so to make it exactly like we have we have to make a media query on our containers our container lies here after Decap I am giving it a media query like this and I am saying Flex direction should be column on small screen with the gap of 2 REM and the Align item Flex start let's see yeah let's save this now it is exactly same as we have here but still the menu is not same so let's see what's happening with the menu I go to the menu here and after this okay uh actually I have to give above this so it should take the mobile styling first so here I'm saying on the mobile screens make the flex Direction row and after this make the flex wrap as wrap so f w okay Flex wrap and wrap let's save this yeah now it's exactly the clone of our deployed version here you can see there is no difference between both of them so our footer is also now ready and if I switch it to the desktop version Let me switch it okay here you can see it's very cool but the thing that is meaning when we click on a specific list item in the menu item it should be scroll down to the towards the specific section so to make this functionality I am going to works.jsx and here I am saying essentially after this wrapper make an anchor tag with the class name of anchor but with the ID offer which is the name of our component just this one and remove the href okay so an a tag without href let's save this because if I go to my header component here you can see the experience section is going to refer the work ID okay so when I am clicking The Experience section now it is moving towards our section similarly for the services I am going to Target the expertise okay so expertise component is here and let's make after the a a DOT anchor and then the Expert T let's save this remove this href from here and try to click on this one okay I should refresh this one and try to click okay it's not going towards expertise and I think we have okay because I made a typo here let's save this again now try to click on and it's moving so similarly I am going to paste anchor tags on all the sections so it starts scrolling on clicking a specific menu item and I am going to reference them according to these IDs we give here so I have completed this work here you can see that I am in people section and I have given it an anchor tag with the ID people and if I scroll to another section and click on the testimonials now it is scrolling me towards this but the problem is and other one the sidebar is not closing on clicking outside of the sidebar we have make this on the condition of clicking this menu item so we have to make a logic to to close the sidebar on clicking outside of the sidebar so for this again go to the header dot GSX and here I have made a custom compo sorry not the component but a custom hook and you can call this hook as use outside alter so use outside alerter I have to import it manually if uh I I am here okay so if I import two things from the hooks folder import use outside alert [Applause] from [Applause] go outside then go outside Hooks and then use outside a letter like this now it is here and we have to give it a menu ref and a set menu open function okay so we have no ref like the menu ref so let's make this also here I am saying cons menu ref is going to be the use ref which is the hook of react so I am just simply importing this now let's save this and at the very last give this menu ref to our menu yeah here I am saying its reference is going to be the menu ref now format our code let's see this refresh your website and if I click here and click here it is closing on clicking outside of the sidebar so our last task is to deploy this project on the internet so I am using cloudflare pages to deploy this so here if I write Cloud flare Pages like this one go to this link you have to make an account by sign up and if you already have you can simply log in like I am doing here my dashboard is loading and you will see all the pages you deployed on the internet so we have to create a new project here and I can say it as a direct upload for the name I will say YouTube bin Jan or portfolio like this one let's create a project foreign and now it is saying upload your assets so to upload the assets so go to your directory open your terminal and close your server by pressing Ctrl C and right command clear to clear your output and here write yarn build to make a production build actually I tried previously so I have to delete this one so it should make a new one okay now if I hit enter button here you can see that it is making a build for production used okay now it is made here inside list so what we can do I have to open it in file explorer find in folder not sorry not in finding folder but we can reveal in File Explorer and here it is now I can just drag this in my Google Chrome and paste it here now let's see how much time it will take to upload all of our files and here it took a very small time to upload file let's deploy the site by clicking on this button okay now it is saying successfully deployed now you have to wait around one minute or more than one like the two minutes so it should be deployed properly on the URL if I click now here you can see our website is successfully deployed on the internet I will also provide this URL in the description of video so you can also visit this live so here our project is completed if you really like my work and projects so do support me on patreon also subscribe this Channel and hit the like button with the Bell button you can also find me on buy me a coffee so if you want to support me you can also support me there on patreon and please hit the Subscribe button take care goodbye hello [Music]

Channel: ZAINKEEPSCODE

Views: 74,517

Keywords: react website, react website tutorial, react portfolio website tutorial, react, react js personal portfolio website tutorial, complete react portfolio website project, react js tutorial, learn react js, responsive react js website tutorial, how to build website using react, build and deploy the perfect portfolio, best react tutorial on youtube, best react project tutorial for beginners, for beginners, react portfolio, scss, framer motion react, ui ux design, react website design

Id: Pu9I33nDeBk

Length: 146min 35sec (8795 seconds)

Published: Sat Jan 14 2023