How To Make Portfolio Website Using React JS | Create React Portfolio Website

hello developers welcome to Great stack we are back with a whole new video where we'll be getting our hands on on a real world react portfolio website which will be Top Notch compatible with all the browsers and extremely mobile responsive at the same time in addition we will also be integrating an automated email service called email.js in our contact form which will allow you to send an email to the organization's email or whatever the email you will set without requiring you to sign in so let's get started this is the website which we'll be creating you can see it has all the navigations and here this is the contact form which will send and email whatever the name you will type and whatever the email you will type and whatever your message will be it will just send this to the email which is set by the organization also if we talk about the mobile responsiveness if you see this is whole mobile responsive see it has this Burger menu which looks like this and when you will navigate it will also be shown in this particular menu also if you want to see about the compatibility the whole website is extremely compatible for everything if you are using a tablet or Android phone whatever you are using it is just compatible for everything like here you can see everything is extremely responsive according to all the desktop sizes all the tablet sizes and everything else see everything works great so let's get started so now as you are here I expect that you have a pretty good knowledge about HTML and CSS and some basic knowledge of JavaScript too along with a basic knowledge of react is appreciated but not required as we'll be covering all the parts like not all the parts but a very good portion of react in this video so to get started I hope you have react installed in your PC so let's begin for that you just need to open your terminal like I'm using vs code and to create the react app you just need to open your terminal and write npx create hyphen react hyphen app and then you have to write react app name so our name will be portfolio so press enter and wait until the installation like creation of the react app is complete now as our react app is installed what we can do is we can just see that here is the portfolio website and what we can do is go to that folder using CD that is used in terminals go to a directory so CD port for you the same spelling yes and then we are in this folder portfolio then we have to write just npm start so this will start your react app which will also take some time once you see this this means that your react tab is running now as we have started you can go to your folder like I can open this from here start the react app from here directly without doing that navigation to like CD portfolio we don't need to write it so npm start again we are here with react app and now go to your vs code and find this Source folder and we can delete some unnecessary things like the app.css and whatever else than this app.js so we'll select all like this and we'll just remove this app.js and delete also we need to make changes in this app.js like removing these and removing these stuff whatever is inside this div called app so just removing this as nothing is useful for us for now and from the indexes we'll be removing all the unnecessary things like this one and this index.css which we deleted and this function Idol asked as we have deleted it then we're moving to the public folder and removing everything set this index.html so letting everything then moving to the index and removing some more of the things like the comment in this body and the comment like all the comments because they are of no use for us and with this we have an empty page which looks like this so we can create whatever we want according to us one thing that we'll be using and also providing you in the resources is this asset file and this file will be containing all the required resources that will be using like whatever the logos where and the background images that we saw however you can also keep it in your public folder but we will be keeping it in the source folder so now as we have this logo here so we can use it just here by writing dot slash logo dot PNG and what this tag will do is you can see okay there's something wrong I guess what we can do is we can just use this logo here now the destination is right yes now it's work we can see here also we can create a components folder here like this which will be containing all the react components like navbar footer or different sections that we'll be creating like the contact Section the work section skill section and the intersection all those sections and the other components however this is not a mandatory thing to do but following this will result in a structured quote and even if you will see your code after five years it will be too easy to figure out what portions of the website does what operations as your code is well distributed because everything will be distributed according to its component like whatever component it is it is it will be distributed in this components folder also as this index.html is a generalized HTML thing so what we can do is we can just link a Styles it here like this link the CSS file which will be dot slash like located right here dot slash style.css and as it is not created we will be creating it and we can write here all the generalized thing that we know about this index.html or the whole web page so for a whole generalized thing what we can do is we can write some of the basic things like removing the margins removing the paddings and the Box sizing like this box sizing to border box and we can also remove the text decoration and set it to none and what we can do is we can set the background to transparent as everything can have a background like buttons have background and for the body part what we can do is use the body tag and set the default background of everything to somewhere near RGB you can use the RGB tag so RGB 30 30 we can use 30 30 and this one 2 set to 30 which will result in something like this the background is set to this color also if you write something on this it will be Black by default so we can just change the color to white also if something does not fit in our like website so what we can do is we can just set the Overflow to Hidden and to make it scrollable we can do overflow in y direction that is the in the vertical direction to scroll so setting these basic things we can move to create our first component that is the nav bar for that what we can do is create a new folder in this components folder that is the nav bar like this and inside this nav bar we can create a new file that is navbar dot Js also with a navbar.css that will contain the CSS file of the whole navbar thing coming back to navbar.js we can just write rafce and what this will do is create a function a react function with this n capital so what we can do is we can write this n Capital here so now this snap bar will be used here to export and to import the CSS file we can just write import dot slash in our codes dot slash navbar dot CSS now the CSS file will be imported here and used in this div thing and in order to use this component what we can do is we can go to the app.js which is the main.js file and just use that nav bar here for that we need to import it so we can import it like this nav bar from here and we can just use it here nav bar slash like this and now you can see that the nav bar is here so for now what all we have is just this div component which contains the nav bar and this is shown here so now observing from the image that we are going to build the components of the Napper what are the elements that the nav bar carries so there are three things that we can see first is the logo second is this menu and third is this contact Section so there are three components in this nav bar also if you see the width of this whole Lab bar it is not spreaded all over through this like whole body but it contains almost 80 percent of the body that we have so first of all what we need to do is we can just add that napkin which can be named with the class name napper so now far and here we have the element nav which signifies that this is the nav bar and what this nav contains is the three elements that is the image thing which is this and the menu the desktop menu which I will name like desktop menu and a button that says the contact Section here is defined so that can be a button and we can name it desktop menu button so this is the button which will be containing this image and this text so this button is containing an image which can be named like desktop menu icon or image like this and then a text something like contact me contact me and this will be the end of our button and to use the images what we can do is we can just import the images or we can use it directly though but I feel it easier to like import it and use it so import the first image will be the logo so import logo from quotes dot slash which will be not here actually what we can do is we can go to the parent element and then again to the parent element and go to assets and in assets we can find the logo so where's the logo here the logo and what we can do is we can just use it right here just writing logo so now the logo and the alternative can be it is just the logo so we can write logo and the class name we can write is it can be low however we can just write this address in the source name directly but I find this easier as all the Imports are in the above of the page like in the top most part of the page and we can just check like rather than finding whatever we want to change in whole code we can just see the above like at the top and we can just change it so it is easier to make changes if we follow this technique and hence it is also considered a standard format or a standard practice so if we save it and see yes we have the image here then filling the division that is this the desktop menu we will be having four links like here home about both free and clients we have four links so what we can do is we can just use a link tag which will be importing from something like we will be extracting it from react scroll so minus take reacts Chrome scr o l l but for this we need to install this react scroll so for this what we you can do is just write npmi that is npm install react crawl so it will download it and install it and once it is installed we can use this link tab so this link will have a class name of desktop manual item it can be so yes desktop menu list item that is every item of the list and we'll be having four of them so just copy this and paste paste paste paste and the tags that we see is home about portfolio and client so we'll be writing it here first one is for home second one is for clients oops the second one will be for about the third one will be for portfolio and this one will come here so this will be the list that we have and yes if you see yes we have all of them and now we need to start the styling part so go into the CSS of this here we can set the we can select the nav bar and we can set the height of the nav bar first which can be Max like 5 Ram yes and the width the whole width can be 100 viewing width so let's see if we inspect this what you will see is now this thing is spreaded all through this like from the the whole width of the screen and to align this thing what we can do is we can add margin for top and bottom it will be 0 and for left and right it can be Auto so it will auto adjust so if you see we'll be having no margin however we have already did it in the index dot HTML where the first thing here style.css we have set all the margins to 0 and padding to zero so now we are free to do anything that we want so just remove this extra stuff and getting back to our navpar.css the first thing that we can do is we can add a padding a little bit of padding one ram for the top as you can see that it is just stuck all above so we can add padding of one ram and for left and right we can add two rims and then we can the main thing that we need to do is display Flex we can use the flick box so if we use the flex box and if we align the Align everything so align items to Center and justify content to Center if we do so what we can see is it is aligned here and whatever the block elements were present here these are all now inline elements so as we use the display Flex so this is now at its great position more of one thing that we usually do use when we are creating an f word is we can use the like we can set the position to Sticky sorry it's sticky and where it should stick is top 0. also with the Z index anything greater than one so yes it will be just right above of everything so now if we see we have this but if we want to like separate these things what we can change is where we use this justify content we can use justify content space between so now this will maintain a space like this so this will be a better choice so now what we need to do is we need to style this icon so that was named with logo so low first thing that we do if using an image is set to object fit to cover because this will not let your image to stretch and like look bad it will just maintain a ratio of the height and width of the image like of the real image then we can set the height to 3 RAM and the width to 4m and if you see the logo is of highlight the correct size but this whole nav bar is spreaded all over the screen like from here to here but we as of our image we can see that this whole logo is just covering this part like not the 100 of the screen it's just covering the 80 of the screen so what we can do is we can set the nav bars Max width so what we can do is use max width to somewhere around 75 frame so that is 750 pixels from here to here and now coming to this desktop menu what we can see that we need some space and like in between everything so what we can do is what was name it was desktop desktop menu list item list item this thing will have a margin basically we can add space through margins so margin of 1 Ram then what we can do is we can set the cursor to pointer to pointer yes it is changed so we can see that we have spaces and if we inspect this we can see that for every element for every particular element we have one ram space in between like all around them so for every two consecutive elements so for let's see it's about in portfolio we have two Ram spaces in between them because one ram for the about one and one ram for the portfolio one and now this pointer looks like like the cursor looks like a pointer and Alden for this and then we need to move to the button section like to design this button the button we have this contact me so for this we need a image so for this image source what we can do is we can import an image that is for our contact Section so we can name it contact IMG that is contact image import contact image from the parents parent assets to this contact.png and we can use it now here it is contact image and if you save it and run it we can see yes we have the image but the background of the image like background of the button is transparent so we need to change it to white as we can see in the sample image we have it white so changing it okay the class for this was desktop menu image IMG so this image will be object fit as it is an image object fit cover height can be set to 1 RAM and the width also can be the same one rim as it is in square image and we can set a little of margin of one ram around it but what about the background for the background we need to access the button so that was the BTN desktop menu vtn that is button and what we can do is we can set the border to none as we had borders but before that we can just change the background so background to something like white changing it to oops see it is white and the color should be black the text really black and we see yes we have it and now we need to align this contact me and we have to remove this extra clay border that we can see like here if you see we have this gray border so for that border what we can do is we can just write border to none and to align it we can use display Flex like we can use flexbox align items to Center and we can also justify content to Center so this is the whole page this is is aligned now and it has it looks pretty well but at the same time it has no spaces so what we can do to add inner spaces we can use padding so we can use padding to something like 0 on the top and one REM for left and right so yes and the Border radius border radius can be 2 RAM and on saving this we can see that yes we have now the borders that is the curved borders and yes everything looks great also with one thing for now as we'll be editing the snap bar a little bit more when we'll be adding the functionalities but for now what we can do is for the desktop menu that is the main menu the desktop menu list item here what we can do is we can just add some things uh like something about the looks if we talk about and when we hover so desktop menu if we hover on this it can be change the color to something like yellow and add a padding of bottom to 0.5 grams and add a border at the bottom so what will the border the Border can be of 3 pixels solid soil solid border and color of yellow the same color so now if you see if we hover on these items this effect will be created we just we are adding a border at the bottom and we are changing the color and the color of the border is also the same color that the font is changing to but if we talk about the click events like if you click this home button will be navigated to home and if we will click this client we can be navigated to client and those navigations and those responsiveness that we need like we will be adding a burger menu and those things will be added in the later part of the video when we will be creating the sections because we have now nothing to go if we click on these but for now this whole thing is working like besides the navigation thing like the navigation thing like if you killed about we'll go to about the sex about section so those things will be added for time for the part of the video but for now the navigation is completed and will be moving to the next part which will be this intro part this intro part that introduction page the landing page so that will be our new component so just creating a new folder named intro we can just name it intro and inside this intro we can add a new file intro dot Js and then we can just create a react component and we can just import dot slash intro Dot CSS and as we don't have a file as such so we can just press Ctrl and click on it and create a file so now we have this intro.css file and this intro react component and to add this component what we can do is we can move to app.js and we can just import that component the new created component here so create import what was it it was intro that intersection from from this very thing dot slash components slash intro slash intro.js and this intro will be used here so now if you see we have this intro right after this so if we inspect and see we have a nav bar and then we have this knife but now to start with the interest dialing we need to go to this intro.js and for now this intro.js is returning just this div but from now this will be returning section a section which will be named to intro or with an ID to intro but if we talk about the components that it will be having we need to observe this image so what are the contents of this whole intro thing is this left part and this right part where the right division contains an image and the left division is this and coming to the left section what we can see is we have a hello which is somewhere like medium text and we have a big text and then we have a simple normal size paragraph like it is maybe it is of small size we can consider it small and then we have a button so these are the components of the left division and the right division is just an image and the whole thing is the body like the main body of the section so this whole thing is a section and this section has a maximum width not all over the page it is not spread all over the page but yes it contains around 80 percent like whatever the nav bars the size of the Napper was it contains the same alignment to the nav bar so now it's time to reverse to the cooling part so like we have planned the image will have a left part which contains the content so we can name it intro content because this whole page is called intro so we can call it intro content and the next part is a simple image so we can just use an image with a class name of V because it's the background so for the image we can import damage import BG from the same place dot dot slash dot dot slash it's assets and there's the background here and now you can use it in our source like this BG which says profile and then for the left part if we see we have something hello which can be a span and this thing can be also span so just let's create it so what we can do is we can just create a span type which says hello and yes it says hello then we have an other span which can be named like intro text and says I am like this then we have the name spit then a line break which says web developer or web designer so we can do it like I am pan again you can use and we can name It intro name oops again typo which contains Smith then we need a line break then website designer website designer and if we save this what we'll be getting is this the division and the image which will be aligned to this but also in the left division we also have this paragraph and this button hire me so let's do it in our code after this web designer right here we'll be having a paragraph which can be named like introvera and it will contain this whole line which if I save you can see on the web page this is the whole paragraph and the button that we need is right here or what we can do is we can just remove this and use a tag instead or simply you we can use the link tag as we did in the nav bar so if you open this navbot.js we'll find this link we just need to put it here and then we can use the link tag so here we can use the link tag which will contain just the button which we can name like vtn so our button can contain an image first of all an image and then a simple text like hire me as we can see here it has an image and higher me so for this image what we can do is we can import it again so here we can just import the BTN image IMG from dot slash dot slash assets then we have higher me button here so now we can use that image right here ptn image which just says hire me and now if we see our page looks like this so now what we need to do is just the CSS part so going for the CSS into dot CSS the very first thing that we need to do is just get this intro thing the intrude ID and for that ID what we need to do is we can just fix its height to 100 viewing height but we have our nav bar there so we can just use the scalp 100 viewing height minus the width of Napper sorry the height of the nav bar was 4 Ram so we can just subtract that 4 Ram so this will calculate the total left amount of height that we have then we can just set its width to 100 waving width more of the things is Max width we can set to 75 REM like we did for the nav bar to just fit it here 75 with 75 Ram is the max width and to align it what we can do is just set the margin to zero and for left and right we can set it to auto and the Overflow can be hidden as we don't need anything to make our page look bad by creating any type of horizontal scrolling so after this we can see that the alignment is pretty well but the image is right here not in the right side of the page it's at the bottom of the page so two things we can do one is creating the flexbox but using a flag boxes not a good idea according to me as if we will talk about the mobile responsiveness both the divisions will not overlap rather it will squeeze themselves or just align themselves at the top or bottom like in any direction but basically these divisions will not overlap so for that purpose what we can do is we can take the background and we can make sorry we can make its position to absolute and here we can use position relative and we can set its Z index to minus 1 so it can go like behind the intro and also if we are setting this position absolute what we can do is we can set the top to just above like 0 or we can set it to minus 4 and so it can go a little above than the nav bar because if you see the image it's a little long or black at the top side so this fits well you can test it however and for the right part what we can do is we can set it to zero the right part can be zero also as it is an image so we can set the object fit to cover to save the image from shrinking or losing its Dimension so if we save this and see what we get is this the image is aligned at the right side and in the left side we have this division but the height of this image is I think it's too big so what we need to do is we need to set its height 200 pH so as you see now it fits perfectly so now coming to the Left Coast part that is intro content intro content yes so what we can do is we can first of all like set the height and the width to like it spread all over the screen then as you can see it's like here so what we can do is we can add some padding so add padding of to rim then you can see it's a little shifted and then the font is too small as you can see in this image we have big big fonts and it's a little thick font so what we can do is we can just go here and we can just increase the font size so font size to somewhere near 3M and the font to wait to nearly 700 we can set it so if we save it and see yes we have this Big Font here and to align them what we can do is we can use display Flex here you can use the flex box and the flexbox will align the items in a horizontal way so for that we can do Flex direction to column and to align them in the center what we can do is we can use justify content Center and also the color is white however so we do need to set it again and if you see yes it's aligned this way however this tone looks the same so we can change it dynamically so for the hello part as you can see the hello is small here and in this webpage that we are designing it's too big so we can just go to intro.css and change the hello as its name was also hello the class name was hello so we can select the hello and change the font size to somewhere near 1.75 Ram and the font weight the font weight to 100 as if you see it's not heavy so if we see the web page after saving this what we can see is the hello is smaller now and the Smith needs to be yellow so what we can do is what was the name of that Smith it was intro name so we can just select the dot intro name name and we can change its color to Yellow yes and now for the intro paragraph what we can do is we can select the intro para and we can just change it to its font size first to somewhere near medium and the font weight needs to be reduced so it's again hundred and let me save it and see yes the font size is quite well then we need to design this button so for that what we can do is let's see we have this link and this button here which contains an image so first of all what we can do is we can select the button and we can change its background to somewhere like white yes we can set it white and the merge into one rim on the top and bottom and then 0 to the left and right then we need to set some padding like if you see we need some padding here and we also have some borders so for the padding part what we can use is 0.75 Ram on the top and bottom then we need 2 RAM for left and right as we want a white button as in if you see this image we have some padding here and here but not that much of padding at the top and bottom so if we go through that we can use this then we can set the Border radius first we need to set the border to none as it's look ugly and what you can do is you can just change the bot radius to around 2 RAM if we see yes it looks like a little good not exactly the same that we designed but yes it looks similar the problem that it don't look the same is this image so for that image what we can do is we can just go to dot button image that we named the class name was Button image for that buttons image here and we can first as it is an image what we can do is object fit to cover and then the margin to yes 0 for top and bottom but we need a little bit of margin it's not a little bit like this on the left and the right part also what we can do is we can just set the height to one REM so let's see how this works and it didn't work I don't know why let's see if we see this button image okay we missed this so we need to add the class name to button IMG now if we save this yes this worked but if we compare we have a little more padding here like if we see in the page we have used a little more spacing the inside spacing that is the padding so what we can do is we can just remove that foreign from here you can just set it to 1.5 and let's see now it looks great like exactly similar to the design that we made the only thing that looks a lot different from that we designed is the font the font is not the same so for the font you can use Google fonts so for that we need to just go to your browser and just find Google fonts what we'll be getting is this page and just search for font what I want to use is this Poppins so you can just search here and search for these pop-ins and if you click it you see these demos I've already selected three of them so I like this 200 500 600 also I want this 300 and but just these will be enough I guess so now to use it in CSS basically you just need to copy this and paste it in your HTML code so here we have index.html as we want to apply it all over the web page so what we can do is just paste it here 's the 200 300 500 600 is here and then we need to use it so what one more thing that we can do is when we are creating this style.css we use this element which says to cover all the things so what we can do is we can just apply the font family here to pop-ins here pop ins make sure that this name must matches this name on Family equals Poppins let me paste it right here yes and if somewhat like your browser fails to import this so what we can do is what we can use just just serve so it says that I will import this Poppins font but in case I failed to import this font family Poppins so you can use this Sans serif which is inbuilt in your browser now if we save this and see let's see what our page looks like now it looks great but this text is a little big so what we can do is we can create a line break let's see yes here we have a line break after this creating Word so what we can do is we can go to style here the intro.css or the intro.js and we can find that word creating and simply create a Break Tag here so if you save this and see yes it looks great but not the same as you can see this text is a little bit smaller than what we used also the weight of the font is not like what we designed so what I can do is just increase this font weight to 200 let me check if I imported it from this index.html yes I got the 200 thing and we don't have that 100 things so yes font weight is 200 and if we save this it is still a little thin so what we can do is increase it to 300 now it looks good but the font is a little big so let's use small layer and see it got too small what if I add a letter spacing in this let us paste into one pixel letters spacing I guess using this is too small so we can just set it to medium it will look good also because I am using this is not a full screen this is just a square fit so yes using it like this will be good yes now it looks good so we can go for it and now we can move to the mobile responsiveness as I have already kept in mind for the responsiveness part so if we see it on phone yes this whole thing will overlap like this though both the divisions that we created the left part and right part will overlap like this but more of some responsiveness things that we need to do is for this nav bar and this background also with this content the intro content and let's see what we can do so the first thing that we can notice is if the screen gets a little smaller so we can see the position of this image is it is in center but we need to align it a little right we need to sift it a little right so what we can do is yes it's for 832 so we can set 840 pixels so what we can do is we can add media queries screen and the max width the max width of 840 pixels so if it reaches 840 pixels what we can do is we can get this background and shift it a little right so how much right will be good it's let's check for this 10 viewing width so now if we see if this reaches 840 pixels you can see here if it reaches 840 then the image will shift see you can see the shift and now it looks great so yes then the intro content this whole content this is a little like I find it a little smaller so what we can do is we can set this font size according to the width if it reaches this media width that is less than 840 so if it is less than 840 what we can do is we can just select this intro content and the font size can be 10 viewing width so let's see how it works yes now it's looks like great it looks great so if it reaches 840 yes now it looks fine and for this hello to what we can do is we can select this hello and change the font size to 4.5 uh viewing width again to make it a little more dynamic so C yes this effect the variable font size looks good then if we squeeze it more now again we can see that the right spacing is moved for this image so what we can do first we can check for phones it's 412 and the right spacing is a little like more according to me so what we can do is if the limit what we can decide for the limit is 360. photo it looks like this and now it looks good here so let's fix it for 480 pixels so the same thing that we need to do not the same thing but removing these things and if it reaches 480 pixels the right side should be minus 20 VH so let's see just now it's sifted so yes it looks good it looks good it looks good sifted looks good yes overall it looks very good even for this slim phone also if the height of the phone as you can't get we can't get a phone which is this much of height and this much of width so let's check for a normal phone aspect ratio I guess this is quite well so let's check for some phones yes that looks great in all of them yes I think it looks great so I think that's all for the nav bar sorry for the intro part if we see it maintains a good ratio and it looks great in almost all of the devices but the only problem that we have is this nav bar so a simple approach that I can say is creating a burger menu like it is good for phone width 684 like width of 684 pixels but if it gets a little smaller from here less than 640 I guess so we need a burger menu it will like be a great add-on for our project but that thing I'll be covering at the later part of the video after creating all these sections as you can see that we have these navigations so this navigations go nowhere so we need to set up location that if I click this where should It Go so that thing will be done only all these sections are made so let's first create all these sections so the home or this intro part is done this home and then we need to create this about portfolio clients and contact me section which will be really quick so after creating all this what we can do is we can recreate the nav bar with a burger menu so if we click on it we can just navigate ourselves so for that we can just get back to our desktop and now it's time to create this section this section this is the about section for our portfolio website so this whole section we will be designing but first we need to analyze this so if we analyze we have three things over here the first is this skill boxes then we have this heading of the whole about section and then we have a paragraph here which will be really simple and quick to make so let's start this section so now for the skill component what we can do is we can just create a new folder like we did already for the intro and nav part we can name it skills and this will be about section and in this skill what we can do is we can add a file skill dot Js or skills dot Js then also one more thing the CSS file for the same skills.css and in this skill.jss we need to import the react component which will be this and just need to import the CSS file s skills dot CSS during these and this Division and R this whole thing can be a section which contains a class no it can contain an ID of skills so this will be our skill section that about sections sorry I can name it about section and very similar operations we will do for this skill section 2 skill id2 and we need to add this skill ID so for that we can go to app.js and import import skills from here and then we can just add use it like this so if you see or if you check our web page it looks the same but now we have this about section right here but this about section as we analyzed have three things one two and three so what we can do is we can just remove this about section and we can add those three things here so before that what we can do is we can see here we have three image for this whole page so it will be simple for me if I import these images first we are the first one was you I design from the assets file assets and if you find the UI design here the UI design then I need to import the web design web design from the same path from assets website design and we can just import the app design from the same location assets this app design these will be the three images that will be using in this about section so the first component of this about section was this heading so what I can do is I can just use this pen pan and name it skill title and what is this uh this says what I do what I do then we have a span which says skill description and this says this whole paragraph so whatever this is I am a skill and passionate web designer experience with everything that you want to write in your resume on this website your portfolio website then we have this kind of bars that is skill bars so what we have is an unordered list of skill bars but what we can do is we can just write or use a div here so dots kill bars which represents this whole thing but this whole thing contains many like three more things here so every so the whole skill bars will contain another dip of skill bar so every skill so in skill bars division every skill we have for everything we have a skill bar in every skill bar what we have is an image which can be named as skill bar IMG skill bar image so we have a skill bar image and then what we have is Let's see we have a skill bar image for every skill bar we have a skill bar image and a skill bar text but this skill bar text contains two more things that is one is the heading and one is this small paragraph that is the description that we can see so for every skill bar we have an image and then we have a skill bar text and for every skill bar text we have a heading and a paragraph so this is the simple template for every list item so now we can copy it and paste it two more times so now our template is ready but what we need to do is just create the source of this image so the first one is UI design the second one is for web design the third one is for app design yes which says the same thing UI design web design and here app design and for the first heading what we have is UI ux Design This is a demo text so let's write it UI slash ux design and here this is a demo text you can write your own content here yes obviously you can write your own content here similarly let me fill these parts together and after saving this you can see we have all our content here the whole content now we are only left with the CSS part so let's move to the style sorry the skills dot CSS the first thing that we need to Target is the skills section this ID skills first thing that we can do is we can just hide the Overflow and set it to Hidden and then the width we can set 200 waving with then the max width we can set to let's see the image it's a little smaller than what width we use here you can see so we can just make it 65 Ram we use 75 RAM for the this nav bar and intro but we can use we are using 65 Ram as it is not as wide as the nav bar under intro then what we can do is we can set the margin to zero which is already zero so we can leave it and then display Flex but again this will align the items horizontally so what we can do is we can change the flex direction to column and for the alignment thing as you can see it is not aligned it is here what we can do is we can use align items to Center and justify content to Center then also we can use the text align to Center to align the text and center and let's save this and see what happens if you see yes everything is aligned but the margin of left and right are not well managed so what we can do is we can do the margin to 0 for top and bottom and R2 for left and right now this whole thing is aligned one more thing that we need editing is this nav bar background so let me just quickly fix it navbar.css and the whole left part must have a background of this color RGB 3030 so this is it so let's see now the nav bar looks at the top it looks like the nav bar is on the top it's not transparent anymore also in this skills part we had a skill title which we need to just increase the font size the font size to around 3 rim and the font weight should be 600 we have already imported the 600 font and let's see how it looks like so yes this looks good but we need some margin or padding at the above part so what we can do is we can add some padding here padding top of 3M yes like this and let's see if we need anything we also need a little bit of margin right here so margin at the bottom so margin bottom of one rem or I can increase it to 1.5 Ram I guess this will be great yes this looks great also styling this description what we can do is dots kill description to font weight of 200 then we have font size we can change the font size to one REM to 1 Ram yes this looks good then we have we can set the max width it covers an ounce like more than we designed if we see the design it don't covers that much of the space so for that what we can do is we can change the max width the max width to around 50 Ram and add some padding 0 on the top and bottom and for the left and right we can add 2 RAM so let's see now it looks really great you can just add like whatever changes you wanted if you want to make it 51 or if you want to increase the font size like 1.05 whatever you want to do you can do it like there is no restriction in trying anything and you can see that yes if it looks good for you but if we see our design and zoom it like fit to full screen what we can see is the font is a little smaller so we can just try around 0.5 Ram and let's see it's too small and 0.75 let's check we also need to add some font weight like 400 we have imported 400 yes it looks good but not the same like we designed here uh we need to increase the font size let's change it to 1 Ram 1 Ram is slightly bigger 0.9 let's check this looks good I guess if we match this is the thing and this is what we made now the font is a little thicker in our page so we can just use the font 300. now if we see setting at 400 will like it looks good if I'm setting it for 400 just let it be this way but now it comes for the scale bar so for the skill bar what we can do is we can use this skill bars and add some things like margin of 1.5 Ram in all the directions so 1.5 mm yes then what we can do is we can set its width 200 viewing width as if we want to see it in Mobile so and the max width it can contain is 80 percent so let's see what happens is for this whole skill bars what more thing I can do is I can change the text align to the left so that our tests look like this and for this whole skill bars for every skill bar what I can do is I can use the skill bar and for every skill bar I can display Flex so now this looks like this and we can add some margin of one REM then padding of 1.5 RAM for every skill bar and 2 RAM for left and right and for the Border radius what we can do is we can set it for 0.5 frame so let's see how does it looks actually I need to change the background so here the background needs to be changed for RGB oops just remove these and I can set it for 30 30 was the background so what I can do is I can use 50. 50 and 50 which will be a lighter version so it looks quite well also now we can see that it looks very similar to what we designed but one thing that we can see is this image we need to like resize it so let's get to our code we have set the background and we need to change the image so for every skill bar IMG what we need to do is first as it it is an image so object fit to cover and height what can be the height it can be 3 RAM and also the width can be 3M so if we save it and see the size is quite good but we need a margin at the right side so we can just use the margin right property and you can just add two runs for it so let's save it and see this looks quite good we are now only left with the sizes that we want to change for these two so for that what were these was kill bar text so dot skill bar text and we have a heading in at so first paragraph that you want as I think the heading size is quite good so change in the paragraph size is like this font size to 1 Ram sorry one REM also we can change the font weight to 200 let's see this looks good but again not as we design so just changing the size to 0.75 let's see if it is not too small it got too small so just change it to 0.9 let's see what happens it looks quite well but again according to the ratio of the web page I think these texts are a little smaller so let's change it right here in this screen bar skill description and we can change the font size to one rim so let's see I think this looks quite well now and even if we swipe the page like here the about section will look like this so if you are seeing the whole page it will look like this that yes I am in the intersection and yes here is what I do that means here is my about section and if we just see the whole about section it looks just like this so it will say that yes I am in the about section and this is all about me now coming to the mobile responsiveness thing so what we can do is we can just inspect the whole thing like this and we can see how responsive it is so it is quite good responsive as you can see let me just reduce the sizing show you yes this looks great so we don't need much of the things to do with that skill thing a mobile responsiveness but what we can do is just check for some of the four mobiles so if we are on a Galaxy Note 20 it looks quite good if we are on iPhone XR it is again good then for other phones like for you touching Mini which is good but the problem that I can see is if we are considering a phone be only because of this the size of this paragraph and this heading the above section will not fit in a single page like you can see it starts from here and ends here which is not good so let me check if it looks good it looks good but if it reaches like below 720 this looks a little like out of the box so for that what we need to do is go to the skill section add a media query media screen and Max width Max fifth of 720 pixels the scale bar text which contains the paragraph will change its font size to somewhere near to viewing width let's see and yes this will look good I guess yes if you see if it reaches near 720 what will happen is it changes its size quite well it's not this looks good however it is not a like big change so what we can do is we can just copy it and paste it and we can use for around let's see here around 560 this looks good around 480 let's see yes now we need we need to remove this like not remove this but it just decrease this size like if I am using a phone here you can see according to the length I need to like decrease this size so I can just go to 480 pixels or first let's see for 560 where I found some problems 560 hello it looks good in 560 but in 480 if I'm on a phone with 480 resolution let's change the size to 3 viewing width as it was a little small see this got too small and more of the things that I can do is kill bar image the skill bar image should get a height of 2 2 rem or 2.25 Ram a little more than 2.2 so and width we can set the same thing 2.25 Ram also the heading this skill bar text it's a skill bar text The Heading of it should be changed to somewhere near font size of 5 being width as it looks a little more so now let's test this these are some random numbers now on phone this looks small but not too small to like it's not visible The Heading also looks good and the design looks very similar as you can see in our like last part we can see that this image covered this much of space so the whole thing didn't look so good but now it looks so good also the whole about section will be covered in a single page like this and this thing will be covered by the nav bar I will just make it sticky when I'll be designing the Burger menu and yes now this looks great for everything and here we are done with the skills or the about section of our portfolio website and now if you see our page we are done with this part then we are up to here this my portfolios thing so this will be named as the portfolio thing so if we talk about the analysis of this portfolio section what you will be seeing is we have similar thing like what we have in this case section so we have a heading we had a description and then like whatever work we did we have a heading we have the description of the work and here are our works so these are our works yes these are our works and there is a button see more so yes we'll be doing the same approach we will be adding a heading uh description and a work like a list of works and then we have will be having a button and that's all for this section so we can see that we have six images here and we can just import these six images but for that we need to create this first for that we need to go to our components and create a new folder which can be named as works as it contains all our works and in this works directory what we can do is we have works.js file also in the same we'll be having the works.css for the same and now this works we'll have a react component named works and it will return a section of ID let me name it works and section yes this will return this and this will contain just works works done let's see does this works or not and first of all we need to import it so we need to get back to our app.js we need to import the works from this directory and use it right here works like this so if we see we have our portfolio we have our about section and then here are the work section Works done so according to the analysis let's start for this what we need to do is first of all import the CSS file import dot slash works dot CSS and then what we analyzed from this image here is that there are three parts this title this description and this those image gallery so we can design it very similar so just remove this works done and first thing that we saw was just a heading which can be named as Works title Works title which contained my portfolio put folio and another thing was the work description so for that I can use a span which can be named as Works description which had this content this everything that I wrote here you can just copy and paste I take pride in paying attention to smallest details and then what we had was this works images so I can just use a division of Works images imgs which will contain all those images so the first image can be IMG Dot average every image will carry this name works image IMG so in this division works images we'll be having an image tag of this class name Works IMG that is Works image so we'll be having six of them okay and for these images we need to import the images so import portfolio one there will be six images so I will like generally name it portfolio one two three four five and six so import portfolio one from the same location assets here I have this and I'll just copy this and paste it six times okay so for here just remove and write to three four five and six let me check if the names are right yes everything is correct now we can just use it here so let me select this whole thing and remove this with a portfolio Okay portfolio one this thing will be copied paste it here okay one more thing that I can do is just remove the cell okay let's remove this and copy this whole thing copy paste paste six times two three four five and six now if we save this and see uh web page yes we have all those images but here what we got is this issue the navbar has a problem right here which is because I think there is a margin over here like for the snap bar thing so I can just go to the navbar.css and find yes here it is auto so I can remove this and for left and right it will be zero same so yes now the problem is fixed or we can also keep it because it will just make create problems in our alignment so let's keep it and see that for these divs what we need to do is just keep it in the center so the width or the width of this whole section must not exceed this limit so that will be automatically fixed if we talk about the style of this work section so let's do it by accessing this works section so the works ID and it's Min height will be same calculate 100 VH that is full screen minus 4 RAM for the nav bar then we'll be having the width of 100 viewing width also the max width will be smaller I guess see it's same as the above one so I can just use 60 viewing width or 60 rim here 60 time will be great so if we check is it aligned Yes actually we need to center it first so for that what we can do is we can use flexbox so display Flex Flex Direction should be column and for the alignment part we have to align items to the center align items to Center and justify content to Center saving this didn't work so well because what we missed we missed the margin margin of 0 or 2. so let's see it's Center aligned and two more important things that we need to do is text align Center and what more can be a padding of somewhat 0 for the top and bottom and one REM for left and right so if we see this now this looks good also getting to this title and description what changes we need to do is just select the works Title First and then we can just add some margin for that margin of 1 Ram for top and bottom and zero for left and right as we don't need margins then for the font size can be 3 RAM as we are using this for the heading thing so this will fix the heading which didn't work somehow I guess there is some kind of error okay the t is smaller so now yes this works so well then we can move to the description part which can be done here dot works description what we need to do is we can change the font weight first as it looks so thick so we can use Font weight to 300 and the font size should be one REM and let's see what more we can do first save it and let's check this looks perfect for now and what more we need to do is this images we need to set these images so these images were works images imgs and for these images what we need to do is just display Flex which will make these like this but the width of the images is not that good so what we can do is we can just align items to the center so we can use AIC align items Center then we need to do justify content Center then the width can be 100 weighing width if you are talking about the mobile responsiveness but also if you are using desktop version so the max width we need to set is 65 REM what we need to do is we need to get every work image and as it is an image we need to do first object fit to cover then the height and [Music] though all the width will be Auto adjusted so height can be somewhere near 20 Ram that is 200 pixels if you are using this rims and the margin we can add for every uh this image what we can do is we can add margin as you can see there is no margin so margin all around near 0.5 Ram so saving it and see see this works pretty well but as we are using flexbox it's spreaded all over the screen and overflow is already hidden so what we can do is as we have already said this Max width what we can do is we can add the flex wrap here Flex wrap what this will do is if your content exceeds the limit like the width what it will do is it will wrap so Flex wrap to wrap and now it's perfectly aligned and also this will automatically do some stuffs related to the that mobile responsiveness thing so if you see if your images are this wide so everything is wrapped up but if the screen width like the max of it is already set so if the screen width is less than the max width and if in case your content does not fit in this so what it will do is it will wrap it wrap all the images and fit like whatever is the best possible thing so see now it's wrapped so let me show it see this will get automatically wrapped up like this so that will be a great thing for us also one thing that we missed in our template is it had a button like you can see in this image it had this button C more for that we can add just this button which can be named as works button so I can name it works BTN so and this will contain that c more and now we can just dial it dot work BTN and what it will carry is some padding for initials like 0.5 frame on the top and bottom and for the left and right it can carry 2.5 REM so let's see how it looks where is my yes but now we need to just set its background first and the water radius so for that the Border should be none and the background should be white the Border radius should be somewhere near 2 rim and the font size inside that button should be near one rim so once let me save it and let's see yes this looks good but as you can see there are no margins so we need to add margins too so for that what I can do is just add some margin which can be 3 RAM for top and bottom and zero we do need for left and right so let's save it and check yes now this has a margin over the top and bottom so now this looks great also as I have already shown you that this whole thing is mobile responsive automatically so that's a great thing for us but if the screen gets too like small like less than width so this image needs to be like get smaller so for that what we can do is we can see that where is it shrinking like let's check it on mobile and this width when it goes around 500 like below this range or some random thing can be 500 600 556 you can let it be 580 so when this screen will get below this 585 so we can add a media query that is Media screen and Max width of 585 pixels what I want to do is when it gets lower from this I need to access this work image and for every work image what I need to do is just change its height so it will change its timings and as we as we have already said the object fit to cover so it will automatically change its width so we can change the height to somewhere near 50 waving width so let's see 50 of the screen but we can just use less than 50 as we will all be also having a margin for every one for every work image we'll be having a 0.5 Ram margin so we can just use uh somewhere something less than 50 like 48 we can use 48 variable width so let's see how does it looks so if this image gets lower than that like the width gets lower than 580 this image will be like proportional to your screen width so let's see yes now this works great as we have a limit in the max width but for the Min width we have no limit it will just fit in your screen well so when so I guess the work section is good it looks great for me and if we check yes it looks great and works very fine for any type of screen it will manage and yes it looks great but for like bigger screens this description is a letter exceeding so what we can do is we can simply find this works description and set the max width for this to 45 REM so that it covers only this much and yes this looks now this looks pretty well as if we see in our design we have the same thing so yes now this looks too good just this is perfect now so now moving to the next section which is the client section for which if we analyze the image that we made just carries this much however the my client section is the whole thing contact me section but only the client section is this much which carries a title a description and these four things one more thing that we can do is like instead of creating two different components as this is a very small component what we can do is we can directly create this contact Section and just add this section at the top of it as it is a very small section so it will be not a great idea to create a whole new component for this so we will be doing that also for this contact Section what we'll be doing is using a library called email JS which will help us to automate an email so whatever you will type here your name email and your message without like letting you log in what it will do is it will generate an automated SMS and it will when you will submit it that message will be sent or emailed to the company or to your email whatever email you want and at the last here is our footer so now we are ready to go for this what we need to do is create a new component which will be here new folder which will be named as contact for now and inside this contact we'll be having our contact dot Js also contact dot CSS which will have the react component that is rafc sorry it will be here it will import the react component with C capital and it will return a section with ID something like contact page which will be having two parts the first part will be what can be the first part is clients so dot clients the first part will be clients and the second part will be the contact page this thing so the whole section that is this whole page will have two parts the first one is my clients that is the clients page and the second one is the contact Section first let us design this clients part as it is very simple also change this class name to idea and what this clients page will cover is first thing the heading this my clients then its description then we have something images so first is the heading so we can use an H1 with class name contact page title title which has my clients in it and then we have a span which is all a paragraph which can be named as something like clients description clients description or simply client description so what this paragraph will cover is this so what we can do right now is creating the third thing which covers the client images so we can name it client I MGs and this division will contain the images so image and it will be named similarly like client IMG so we'll be having this image and as you can see here in this client section what do we have is these four Images so getting back here I'll be having four of them so these will be copied and paste it three more times but I need those images so what I can do is just import those images but before that what we can do is just use our contact dot CSS and then we can have those images that is import the first one was for Walmart so Walmart oops from the same location assets slash there is the Walmart logo here and this whole same thing for the Microsoft and Facebook or the Adobe just renaming them as the second one for was at top and the name was also a dog third one was for Microsoft I guess Microsoft and here writing same thing Microsoft this was the image name then changing this to the Facebook one Facebook from facebook.png and now we can use it right here so the first one will go for the Walmart Walmart then we have a Dobby then we have Microsoft and then we have Facebook let's save also setting the alternates like client as all are my clients so let's save this and see what happens okay I forgot to import it so we need to get back to our app.js and here we need to import the contact Section contact Section from here and we need to use it right here contact Section right here and now let's check where's our website yes everything is here and now doing similar kind of operations in the contact dot CSS is just take the whole contact page and add the Min height to calculate 100 VH minus 4 REM then we have width of 100 viewing width then we can set the max width to 60 rim that will be good then we need to set the margin to zero for top and Auto for left and right then we can just use the text Line to Center to align these texts somehow it didn't work so let's check okay here I've made a mistake oops this is not for class name this is an ID so let's check now yes we have everything working fine then for the whole page what we need is a flexbox display flex and the flex Direction should be column and we have to align items AIC and JCC then what move we can do is nothing for now so let's see yes this is well aligned and now we need to just resize this my client's heading so we need to go for the contact page title which says font size oops font size maybe 3M and we can add a little bit of margin at the bottom so margin bottom to what we can do is we can add one rim so imagine bottom of one REM let's see yes it looked it looks great and changing this description so that was named as clients our client description let me check it it was client description so yes client description and the font weight first we need to change is font weight to 300 and the font size the font size to 1 rim let's save it and check this looks pretty well now for this whole client images first thing we can see is these images need some margin or padding not padding actually merging the needs so what we can do is we can just get here and just access those client images and for all those the whole div what we need is we need to add some margin of one ram for top and bottom and zero so that they are not stick anywhere and then we can just display Flex there and as you can see the images are quite big so first of all what we need to do is we need to access all those images and for each image what we need to do is set the object Fade to cover as it is the first thing that we need to do and then what can be the width I want all those four images to be all over the width so width can be around 2500 by 4 is 25 but we will be adding a little bit of margin so we can just write 23 percent and after that the minimum width we need to set is 9 rim then what we can do is we can set the margin to auto so it's margin Auto and we can add a little bit of padding of 0 0.25 Ram we need just a little bit of padding so if we see now yes this looks pretty well but the size of the image is good actually according to the r screen and what we can do is for the whole clients thing we can just add a little bit of padding for like 2 RAM as if we'll be like creating the second part that is this contact Section we need a little bit of padding for this client section to get separated from this and looking at the contact Section in this image what we can see is we have a heading then a little bit of description and then this form and then this like links so what we can do is we can get here and we can add a heading with the same name that is contact page title so this will contain that contact me part and it will be Auto aligned as we have already decided that if a element contains this class ID that is class name so what it will what will happen to this what kind of styling will happen with this and then we have a span of contact description which will contain the description that if this so let's see what else it will carry as a form that is obviously the most military thing so what we can do is we can create a form here with a class name of contact form and the contents will be if we see there are two inputs in a text box then a button that we have and at the end we have these links so let's check we have input dot name and the placeholder will be your name then we have input Dot text or dot email that we need an email ID so input dot email where the type of it is also emailed and the placeholder for this placeholder for this is your email then we have a text area so we have a text area with name message ID is not mandatory so we can remove it columns will be default and rows can be 5. so let's see how it looks we can also add a placeholder first placeholder can be something like your message and we can also add a class so the class for this will be MSG and let's see how it looks here is like this also what we need to do is add that button so button which will be named like submit button so with the class of submit vtn and at type of Summit with a value of send we can set it to send and inside this button it will just say submit let's see if we have our button yes we have this button over here oops I clicked it yes we have this then at the end what we have is the division which will carry the links so let me name it links and it will have those four Images so IMG dot link we can call it a particular link so link Source will be something and the alternate can be its name so first let's copy this and paste it four times then we need to import our images so for importing those images what I can do is I can just write import the Facebook icon from the assets folder and let's find the Facebook icon the Facebook icon then we have the same thing for Twitter Youtube and Instagram icon like this so now we can use it here the first one was for our Facebook icon so the Facebook icon second one was for the Twitter icon third one for YouTube and fourth one for Instagram and same thing we will be writing in this alternatives like here Facebook then a YouTube here Twitter and here and stop and start Chrome so let's save this and see if we have all our components yes we have all of them but for the contact form we can go to the CSS and first we need to just change the contact description so contact description we can just add a padding of one rim and the font size we can change to medium and the font weight we can change to something like 300. so let's see how does this look this looks great and now jumping to the form we have the contact form form and this form will first have a margin so a margin of something like one REM then we can display Flex display flex but the direction of the flex needs to be in column that is in vertical Direction and then the basic things that is align items to Center and justify content to Center and what we can do is we can set its width to 90 viewing width if it is if you talk about the mobile responsiveness thing but it will just spread all over the screen in laptops so we can add the max width of 60 remit should not exceed 60 RAM and if the screen is less than 60 Ram it will just go for 90 pairing width then for everything inside this contact form that is this name this email and what is the name of this thing MSG so for these three things or these three inputs that will be designing for this what you need to do is go to your contact Section let me remove this stuff dot name dot email add Dot MSG what we need to design is we can just make the font size first to medium and then we can change its width to 100 attic it should cover the whole form so hundred percent and we can change the max width to 40 REM also we can add some margin of 0.5 we don't need a lot of margins like we don't want it so and adding some padding that is 0.5 RAM for top and bottom and one REM for left and right so everything that we have inside will have 0.5 above and below and one ram like on the both sides not like if you can see if I type something it will cover whole input but I don't want it so for that I did this I added some padding and we can change the color of the inside thing to White White and we can set the Border to none we can also add a little bit of Border radius very little like 0.5 frame and the background the background needs to be somewhere like somewhat like RGB 40 40 40 yes it will look good I guess uh and let's check it yes this looks good actually it looks great this is what I wanted then I need to design this submit button so for that submit button we can just right here we can access the submit button and change its background to White background to White that's the main thing and then we need to add some padding but before that we can just remove the border to none then for the padding part we can add 0.75 RAM for top and bottom and one REM for left and right or what I can do is just change it to 3.5 I want the button to be wide so let's see how it looks it looks really good but then I need to add a little bit of Border radius so border radius of some a little bit like 0.5 I want so 0.5 Ram also if you see I want a little bit of margin too so just before this I can add margin of two rims will be good I guess let's see yes this looks great but these don't look so great I just need to fix the size of these icons these icons were called link so for that I can just get all the links and just say to display Flex then we can add Flex wrap sorry Flex wrap to wrap but this reminds me that I guess I've missed something are here the client images these whole images these images if the screen gets too like small so what we can do is we can add the flex wrap we can allow them to wrap so Flex wrap to wrap as they also have a Min width all those images so it will exceed like the Min width is set to 9 grams so if the images don't have any more spaces for 9 Ram so it will get like overflow it will overflow in the X Direction so what we can do is we can add this Flex wrap but for every link what we need to do is first as these all are images so we can the first thing we always do is object fit to cover then we can just change the height to near 3M will be good and the width will be 3 RAM will be great I guess 3 rim and more of anything so we can add a little bit of margin too so margin of 0 for top and bottom but for the left and right I want a little bit of margin like 0.75 Ram will be great as I think one ram will be like more than enough but 0.575 will be great so let's see how it actually looks this looks quite well actually this looks perfect and this whole contact page also fits in 100 VH so it looks great actually but the only thing that is missing is a footer so we can just quickly add it we need to add in that images things so we need to implement it so we'll not close the contact Section but we can just create a new folder or footer which will have a file called footer dot Js and another file of footer dot CSS so the footer.js will obviously import the react Arrow component and this will be capital f and this will just carry a division or we can just say it carries a food sorry a footer which will be off which will carry the class name of same thing footer and what it can carry is this thing copyright and Copyright symbol with all these that year and name and everything you can write whatever you want to write so let's save it and we need to style it first we need to import it in this app.js so we can just import it normally input foot from here and use it at the end here just like this and let's see if we have our footer yes we have it what is left to do is just put a styling for this we have the class name so class name was footer however we can directly access it like this it will just carry the element but we can add the class name so as it is a standard practice so we can just add the width of 100 viewing width and the height should be same as the nav bar will look great like for Ram and the background can be a little lighter like background everything is RGB 30 30 but I need a little lighter background so what I can do is I can use that 40 40 40. you can just click here and check whatever you want but I guess 40 40 will be great for me and display Flex then align items to Center and justify content to Center then we can add just font to it to 300 and okay you got 3300 and the font size the font size can be small so let's see we didn't saved it and we need to import it so import the footer the CSS file slash dot slash shooter dot CSS let's see this whole thing looks great so we are done with the designing part but let me check the mobile responsiveness of this client section or this contact page if I am in Android phone let me make it a little bit smaller so even on mobiles I guess I don't need any kind of like modifications it looks pretty well it looks great actually yes it looks great everything works just fine except this nav bar so the last thing that we need to do is create a burger menu for them but before that what we can do is we can complete the desktop part actually so here we need some navigations so if you go and study about the navbar thing that we imported this reacts crawl what this does we have already installed react scroll if you are following me what happens is it requires some of the attributes so what are they are some properties which says the active class uh if the link is active it will just add a class so we can just name it active so active class to active and to where you want to redirect it like if we click the home thing where it should go so it should go to intro this must be an ID it will go to an ID which you are writing here so to intro and spy equals true you need to write it it's the mandatory thing and the smooth scrolling that we need is yes smooth equals true then we have the offset offsets would be minus 100 for here offset is basically shifting of positions so if you try this you need to just change these offsets values and you can see that if you are clicking something like if you are clicking this home where it should go if we are click clicking this about section it will go here but it will not go here it will go here so if we are adding this offset so it will just shift it like this so that's the offset value and the smooth the scrolling must be smooth so smooth equals true says that and we also need to set the duration so the duration like how fast or how smooth is in milliseconds so this is the duration 500 milliseconds that is half a second so in half a second it should go from where wherever you are to that position like whatever speed it takes I don't care it will just go in 0.5 seconds so that's all for here we just need to copy this whole thing and paste what this python will do is it will just check that if I am on this ID or not if I am on the particular ID that you mentioned here it will just add this active class so it's basically spying behind you so just add those things right here like this and to intro it will change to the second section which is skills the third section which was works I guess and the fourth section was for clients so that was named as contact no actually it was clients so clients yes it is for clients and for this button which says contact me let's make this to scroll to bottom so how can we do this what we can do is we can just click add a click Behavior so on click a basic JavaScript we can write here it will call a function and what can we do in this function is we can just set the document dot get element by ID which can be contact so we are getting this contact button that contact ID the this thing let me show you this page is contact is with ID contact so like this I am getting this contact ID and if I am getting this element so what I need to do is scroll into view scroll into view and calling this function what this function will do is if you click this button what will happen is first it will find for this ID this section with ID contact and what will happen is it will scroll to that like scroll to that position but this crawling should be smooth so Behavior should be smooth like this it will work I guess let's check if we are going here and click yes it's going there and for these yes they are working quite well but for the home everything works well but if you are talking about the about section we can see a little more part of this intro so what we can do is we can change the offsets from here so let me decrease it to 50 so let's see see now it's 250 it looks perfect so changing these again to 50 and 50 everything now let's see yes everything works great and for the contact me section yes it is working amazing but what about the active class so if anything is active this active class will be added so we can go to navbar and what we can do is DOT active if anything has this active class change its color to Yellow let's check so now we are getting it clicking about if this does not work what you can do is just restart your like react app so if I go to divisions different sections it will change its Pi it will just spy on it and check one more thing that I want to do is just add this body that comes all over permanent so how I can do it is just creating a border bottom a border bottom of three pixels solid like we did earlier and the colors should be yellow and PC there is a border but I want it a little further so what we can do again is we can add a padding but bottom so the padding bottom will increase this that whatever is written in it it will just add a little bit of padding there so padding of 0.5 that we used earlier so 0.5 frame right it will be great I guess see it's great it's exactly the same thing see now this looks really good and now as we have done this nav bar thing what we can do is we can just create the Burger menu so for the Burger menu what is a simple thing that we can do is just copy this also this thing just copy this thing and paste it right here but now this thing will not have this logo this thing will represent the Burger menu so we can just rename it as move menu that is the mobile menu and the alternative will be obviously menu or the burger menu then we have this logo which we need to write menu and for the menu bar what we can do is we can just import that image that we had for menu so image menu from assets and we need to find that menu so this is the menu but now to change the styling of this mobile menu what we can do is we can just rename it to nav menu and here we can add one more link which will take us to the contact Section so here I can just change it to contact and here to contact Section to contact Section also we can change these names from here desktop menu list item to list item so just removing this and writing list item and what we need to do is to make this whole navbar disappear or appear in this mobile so what we can do is we can use react hooks for which we'll be using the use date thing so we just need to add const and so many new this will be a variable and set so menu then adding its value to use State see it's already imported to false for now and we can create a logic according to this in our desktop menu here so for everything what we can do is on click I want it to perform a function so like this we can create a function here and this function will do nothing but it will change this so menu to whatever it was to the opposite of it so whatever the so menu was I want you to change it just opposite of it so this is how we can change if it is true it will change to false and it if it is false it will change to true so by this logic I can change the value of this so menu variable and where it I will use it is here so if I can add a simple logic here is the style of this whole thing is dependent on this so many new things so menu we can add a ternary operator here which says is there is so menu so if is it if it is true so if it is true what I need to do is add Flex and if it is false what you can do is set it to none so Style will display so we can write display if this if there is a so menu you can write display flex and if there is no so menu if it is false you can go to none so display flex and display none will be done by this logic but this is a JavaScript logic so we need one more braces here then save this and see it's successfully compiled but one thing where I think I did wrong is this this logic does not belongs here so I can just copy it and change this thing everywhere here here here here and here to false as I want if I click on any item of the list in our whatever the list items will be in the nav bar that in the burger menu so if I'm clicking any of the list items in this burger menu it will just set this so menu to false so it will disappear and here if I click this image I want to make this whole thing appear so now this image which contains this burger menu this burger menu if I click it I want the app to show these things and if I click back on this I want it to disappear also if I click this I want to navigate and disappear but this don't looks quite well so what I can do is change this location somewhere like here for that what we can do is go to the navbar.css and check for this nav menu so what I can do is just take this nav menu and make its position to Absolute with its position of top to 4 Ram and write to 2 RAM then we can change its Z index to 2. or we can also make it display Flex with the flex Direction of column and we can add some padding of 0.5 Ram so let's see how it looks is like this then we can change the height so the height of this whole thing can be fit content so here fit content and the Min width that we can make can be 15 rim 15 rim also I need to change the background so the background should be somewhere near RGB 40 40 will be great 40 40. 40 and we can add some border radius so border radius should be one rim so let's see how it looks yes this looks fine but we need to style these components so that where the list items so for every list item for every list item what we can do is we can change the color to White which was white actually we don't need to do this and we can just add some padding of 0.5 RAM for top and bottom and 3 RAM for left and right it will look good I guess we can also set the margin to 0 .25 Ram we don't need a lot of margin between the list items and we can again change the Border radius inside first let's see how does it look looks quite good see this looks like this but one more thing that we can do is change the background to RGB 30 30 30 again and we can just see how will it look this looks good yes this looks good so we'll be using this but again we have both of the menus at the same time so we need to remove one of them so that we can do by going to navpar.css and just going to dot mob menu that was the main menu if we see in the Napa Dot JS this button that this image was the mob menu this was called the mob menu we can just set it to display none like forever it will display none and as it is an image we can set the object fit to cover and the height is a little more I guess so I it can be 1.8 rim so if I comment display none you can see the height looks good now or you can set it to 2m it's upon U and if I'm setting this to display none you can see that we no more have that button but what if I enter Mobile screen so we just need to add a media query for it so let's see the mobile responsiveness of this and if I am entering a width less than 700 yes less than 640 or it don't looks good so less than 720 say so say it's less than 720 so we just need to add media query media screen and a Max width of 720 pixels will be good so if the screen reaches less than 720 pixels what I want to do is display the mob menu to display Flex display the mob menu and we had the desktop menu so the desktop menu I want you to remove it so display none so this menu will be removed so let's see also we have the desktop menu button this thing so what we can do is we can also take the desktop menu button and remove it so display none so if we save and see I'm getting it less than 720 yes this whole thing got displayed none so this all thing got removed and this thing suddenly appeared and if we click on this we are getting this bar so this looks quite well I guess even if we check for our phones you can see this looks quite well if we are checking for iPads that is tablets I guess this looks quite well in tablets you got it for full we will get this and this looks good I guess and after this our nav bar is finally completed also with this our whole project is completed but the only thing that we are left up is with this automated email that is using the email JS service so for the images service you need to go to your browser and search for email Js and here is the react thing so just click on it and you will get to this page this will provide you all the documentation that you need to do for your email.js service so I will just copy it and paste it but for that I can see that we need to import these images from here so we need to install it first but to read the documentation you can click here and see that how you can actually use it and here installation you will find that to install it you can just write this so let me copy this thing and to install it go to your terminal which is here I will just split the terminal and this thing npm install Android email JS browser just enter it to install it so go to your package.json and see if it is installed so here we can see that the email.js slash browser was added so after the successful installation of the email.js service go to your contact Section and paste those things so what were those things I can go back to that template and import this email.js so importing this email JS here and how can I use it is here whatever we had we need to create a form and you have to use this use ref so copy it and just paste it right here but this form will need a reference so I guess the references from the form see the reference is from this form so you can just go to your form whereas our form is and you can just add the reference to this form so now this form will be referenced and saved in this variable form and what more we need to do is add this send email function this function this whole function actually this whole function let me see okay it starts from here and it's here so let's do this and set the alignment but it says that use ref is not defined so the use ref comes in react so just remove this and I will just import it in an easy way use ref from react yes it's imported here so now we need to use this send email so this send email function is here on Summit form on Summit we have to call this function so form where is the form form on Summit so form on submit call this function send email but if you are using this what we need to do is create this thing you have to provide your service ID your template ID and your public key so for that what you need to do is go to the email.js website and sign up for free you will have to go here email services and add a new service you can add a Gmail service or any service that you want and you have to provide your email like this you can see I have made this and service ID generated automatically so here I can get my service ID copy it from here and use it right here your service ID so my service ID is this then we'll be needing this template ID so for that template ID what we can do is we can go to email services and find this email template we can create a new template so for creating a template you will get this by default template and to add any variable that will be accessed through JavaScript you need to write like this so this will be the name of the variable and I need to just create this variable so let's edit this and we can just edit it and we can add any variable like email so like here if I write your email this will be our template so any template that you can create you can add anything and here you can set that to which email it should go so this is my email that I will be using so it an email that you do will go to this email and from whatever name it is from this name I can get it and reply to this so these are some variables that we need to do you can also add this black carbon copy BCC or CC and then finally create the template I have already created the template so let me show you this is my template a simple template which will be having this from name here and here then we have from email and message so after creating the template you can just see here we have the template ID so just go here and copy this thing this whole thing so if I copied this I can paste it here your template ID just paste this here then we need a public key for that get back here to the email.js service and find this account button then you have this private key here what you need to do is just select it and copy it then you can just paste it here your public key yeah okay let's remove this and let's try to copy it again copy and paste it here yes we have our template id2 that is the public key too then now your form will automatically send it but what about these templates so for these templates I need these names so from name from email and message for that what you need to do is go to your form and as you can see in this documentation what you can see is we we just need to add this name username user email and everything else so for that if we check our template from here what we have is from name so where is our name it is here in this form so here we have our name so we can just write the name to what was the name your name then for the email we can set the name to your email and what for this message the name is message already so we can just use it just save it and see that if we access this what will happen is the form will collect the name the your name the your email and the message then it will get to your template and it will fill the from name thing the from email thing and message thing so these three will be filled and it will generate an email and it will just email it so let's try this save this and see if we have this first of all let me open that email and show you how it looks so getting to my Gmail account and this is how my email will look so let's try this the name can be an rug and the email can be anurag 123 at gmail.com the message can be hide there and if you submit this let me see my inbox so if refresh I'm getting this email which comes from a rug and says hi there and from the same ID on an unrag123 gmail.com and we have our name here so this works pretty well one more thing that we need to do is once we submit we need to clear it so what we can do for it is go to contact Js and when the result is finally complete what we can do is we can set an alert to email sent email sent now this will alert you that your email has been sent and E dot Target Dot reset so it will reset the target so if we see now if I am sending anything that my name is ABC and I am from abc dot x y z or ABC at the rate x y z under a gmail.com hi there this is test two so if now if you submit this we will get this prompt that our email is sent and this whole thing will get cleared also one thing that you can do is you can just redirect the page or refresh the page and you can go here but I won't prefer it so I will just keep it this way so if we check refresh again and see we have a new message that is from ABC from abc.xyz gmail.com which says hi there this is test two so yes the email service is working great and everything is functional now and the whole thing is mobile responsive too so congratulations you have done everything and completed this whole project I hope you have learned a lot and also a proper way to code and a standard way to code which is well demanded in the market so I hope that you have learned a lot and stick to us subscribers to learn more cool steps like this and get yourself one step ahead of becoming a great software developer thank you

Channel: GreatStack

Views: 178,933

Keywords: portfolio website, react portfolio website, portfolio website using react, personal portfolio website, how to make portfolio website, how to create portfolio website, react portfolio, portfolio website react, portfolio using react js, portfolio website react js, react projects for portfolio, react portfolio website tutorial, portfolio in react js, react js tutorial, react js full tutorial, react js project, react js website project

Id: 4ag1LsgIUc0

Length: 182min 2sec (10922 seconds)

Published: Wed Aug 09 2023