#08 Complete React Portfolio Website Project | About Page

[Music] [Music] [Music] so [Music] [Applause] [Music] so [Music] so hello everyone welcome to the part eight of the project today we are going to create the about page of our portfolio here in the about page as you can see that in the top part we will have this section we will have some information about ion khan and also will have this button which will allow you to download the cb and also if i scroll down i will have this information layout as you can see so this is really nice that's what we are going to create to show our information so i will have this education skills and experiences uh information will be here it will look good in the mobile device as you can see here this all layout will look good in all kind of device so yeah that's what we are going to make today we are going to make this about page and i hope you guys will like it also if you want to get some interesting tips and tricks about web design and development you can follow us on instagram the handle is instagram.com web underscore cipher also if you face any kind of problem with this tutorial you can join our facebook community group we have a great and helpful community and you can post your problem there so with that saying let's get started so today we are going to create the about page so if i go to the about page so right now we don't have anything we just have the navigation and also we have the footer here as you can see so we don't have any kind of page content right now so if i go to the end project here you can see that that's how it will look like so we will have a top section here we will have some information about iron khan and also we will have some other information something like education skills and experiences so we will create all this and let's actually start with the top section here so for that first of all let's actually create the page so for that uh in our page as you can see that we already have the about page as you can see and i have this text so first of all in our about with let's get id with the class of container so d with a class of container and inside that i will have a d with the class of top section and inside that i will have another div with a class of left and here uh we'll have the about sub heading means this one uh we'll have the sub heading first one so let's say that uh p with the tags uh sorry p with a class of about sub heading and inside that we will have our high iman khan so let me copy it and paste it over here so as you can see that that's our name and also if you notice that here we have some background for the name so to have that uh we just actually uh need to wrap this with spam and after that we can actually give some specific style in this aspen so after that let's have the heading here so after the paragraph let's have a h2 with a class of about heading and inside that we'll have our heading so let me copy that and paste it over here so that's fine and finally we'll have the about information so d with the class of about info and here we'll have our p text and let me actually import the p text first of all okay i can't import it so import p text from so we need to go to the component folder first of all so here uh component inside that we have the p text and that's it so inside the p text first of all uh let's actually give the text here so i will have this text and for that let me copy the text here and paste it over here so as you can see that i have some line track and uh this actually creating this break as you can see here and here so after that uh that's what we have for our top section in the left side also we have this button so let's have the button so after this div actually let's create a button and this is our component okay my auto import is not working good i need to import it from here so import button from component slash button and that's fine and now inside the button we need to pass the button text and the button link so button text will be the download cv and also uh button link will be the for now let's actually keep it that link so if i come here i should see my button here as you can see so after that uh let's have the right side uh information so in the right side we'll have only a image here so for that uh let's have a div in the right side first of all so after this div of left as you can see so after this div how is the closing so here is the closing div and after this div let's have a d with the class of right and inside that i will have an image and for the source let me actually get the image first of all so import uh about image about image from let me see where is the image so if i come here about image yeah that's the image so let's actually import that so it's in the assets images and here the name is about page image dot png and now we can use it as a source here about image and for that let's say that ion con image and if i come here i can see my image so perfect right now we need the styling so come here and let's get the constant and let's name it about page styles equals to styles.div and here first of all let's actually import the styled and after that we need to specify the strength so first of all we need some padding in the top and bottom so padding 20 ram and 0 and 10 ram for the bottom and 0 so copy that and paste it over here yeah fine so if i save now as you can see that i have my style here means i have the padding in the top as you can see so after that let's actually tell the top section and here let's say that display will be flex and align items will be the center and justify content will be center so if i do i can see that the layout is here so after that let's have some gap here so gap will be the two ram okay fine so after that let's go to our left side and say that flags will be three flex three will be for the left side and for the right side the flags will be two so as you can see that the left side is having a little bit more space than the right side so after that let's say that about submitting and here in the sub heading uh we need to increase the font size of 2.2 ram and also a margin bottom will be down to run so yeah so now let's say that a span for this pen will have a background color of background color of variable deep dark and that's it as you can see i have the deep dark here and now uh we need some padding here so padding will be the 0.5 gram will be good and bought audience will be 8 pixels yeah we have our background so now we need to start the heading so about heading here and font size for that 3.6 ram and margin bottom will be done through them fine and information right now so about info and here margin bottom will be forum fine and also for the paratext means this para we will actually have a max width of 100 so now after that we need to go to our right side so this image we need to do some style for the image so for the right we will actually go to the image and say that border will be done to pixel solid and variable will be the gray one so yeah that's fine as you can see that uh we are done with the top section of the page as you can see that it is pixel perfect and after that we need to actually work on this info section as you can see so for that let's go to our end of this top section div so after this div we will have the information so let's have a d with a class of about info items and inside that we will have a d with a class of about info item so this will be our individual item and here uh we will have our first heading so this will be the first heading and for that let's say that h1 with a class of about info heading and here we will say that education for now for the first one and if i come here i can see my education text and after that we will have the information uh this information as you can see so for that we will have a separate uh component so let's create the component first of all here so let's create a component so in our components folder let's get a new file with the name of uh about info item dot js and rfc to create the functional component inside that let's say that h1 hello from about info item anyway save it and let's come here and let's use it so about info item and if i import i should see the text yeah i am seeing the text so in this about info item we need to create the item so these will be the item about info item so for the each item we will have this component so inside this component we will have two part we will have this title and we'll have the information here as you can see so here first of all let's get a d with a class of item uh not item and first one will be the title and inside that let's actually have a title so let's say that title for now or what you can actually we can get those things from the props because ultimately we will get all these things from the parent component so for that uh we just can say that the title are yeah the title will be the let's say that this is title and also let's have some items here so these items means uh the information we will show here so for that we will have items here and we it will be an array first of all and inside this array we will have the item so you can see that uh for some case we have actually single item as you can see but in many cases um there are actually multiple items as you can see that so we need to make sure about that so that's why uh this item should be an array so right now we can actually pass a single item or multiple item inside this array so let's actually pass multiple items as a default so html and css so these actually information will be replaced whenever we'll have our actual information so these will be something like a placeholder or you can set default value so for the title uh we will use the title here so inside this we will have our so this should be a h1 instead of div first of all and inside that we will have our title so title and if i do i can see that this is title which is coming from here and also let's have the item here so for that i can actually create a d with a class of items so inside that i need to actually map through these items array so items dot map and before that we need to wrap it with kali brackets so items.map and here we'll have the item and also the index and let's actually wrap it with parentheses and here uh from this map what we will return so as you can see that we will return from here so for that let's actually do parentheses instead of curly brackets so inside that we will return some div so we for the each of our item we will return a div which will have a class of item and inside this item will have a p text we need to import this p text and also we need to show the item which will be inside the p text so here we just cancel that this item so if i save now i can see my html and css text here which is really good and also i need to actually pass a key in this div because we are mapping here so the key will be the index yeah fine so it's working so if i actually add another item it should map and it will give me another item so let's say that yes yeah as you can see that uh right now we have the js also yeah fine and is working so what i need to do now i need to do some style here so let's do the style so here let's say that a constant about item styles equals to styled dot div and here uh we need to import the styled from a style component and inside that let's say that display will be flex first of all and align terms will be the center and also justify content will be the center if i do let's actually come here and use these div so to use this about a style about item stands so about item styles so if i use this style here as you can see that right now what we have is we have a flex here so that's how we have the title and the item in the same row as you can see so fine uh what i need actually uh instead of having center for justify content i will have flex start and this will be in the start position so now uh we need to do some margin top here so margin top will be through them if i do i have some margin top so fine and after that let's say that for the title font size will be 2.4 m and also for the items so right now we have the items and we need to display them as a flex and if i display them as a flex as you can see that they are actually down in a row so we need to do some gap here so 1.5 gram will be enough for the gap yeah fine and position will be the absolute and left will be let's say that one point or 18 ram actually so if i do that uh as you can see that from the left side it is now 18 ram so if i don't have the left it should be a start from the zero so now it's starting from the left 18 ram so fine and yeah that's looking good and now uh for our individual item we need to add a background color so background color we'll have is the deep dark so deep dark we have the background color and need some padding one ram and finally border areas will be the 8 pixel if i do i can see the background color is here after this item we need to add some mediocre right now it's not uh it will be not good in our large in our small device especially so if i come here also i need to add media kodi for our top section right now we don't have any kind of media so as you can see that here we have this uh title and the information uh it's looking good but what i want actually for the information i want to show it them as a something like that as you can see that so the title will be in the top and after that we'll have the information something like that as you can see so this will be good whenever we'll have more and large information this will look good so that's why we need to create a video query and we need to make the title in the top and after that we will have the information so to have that let's actually get a media query so media and here let's say that flex direction will be the column if i do uh it should be as you can see that right now it's in the column and align items will be the center and not center it should be the flex start and also the gap will be the one ram only so if i do i can see that right now it's in the flex start and also it's looking good and we need to know position the items here so let's say that the position will be the initial because right now it's having the position of uh absolute we don't want that anymore so if i do the position initial as you can see that it's um after the title which we want and also we need to make sure that we have a gap of one ram yeah fine so that's looking good and also for the title let's say that the font size will be the two ram and that's it let's test it out let's actually come here in our about page and let's pass the information from the component so here let's say that the title for the first one will be the school and let's say that items so for the item so we need to pass it in area so inside the array we will have our information so let me say that nasirabad i can see that my information is here and also my title is here which is good so let's do the second one so for the second one let me duplicate that so instead of school this one will be the college and let's actually change the name here yes uh yeah it's working as you can see that so let's have the last one let me actually copy this last one and paste it over here so as you can see that i have the last one so i have my three information for the first education uh section as you can see that and also as you can see that i'm having a problem whenever i'm in the large device uh it's not looking good it should be something like that so what i'm thinking actually if i come here and let me check the left is 18 ram and i think it's not doing its work properly so let me check here so here it is the items okay as you can see that i'm having a position of initial instead of position of absolute so that's why the left is not working and the reason behind that the reason behind that is these items and these titles is actually out of our media query this should be inside of media query so if i take them inside of media coding as you can see that it's working perfectly fine so let's go and create the style for our this fast education section so here uh let's say that about info items and here let's say that margin top will be the about 15 ram i have this class or not okay not here not here we need this style in the about page so after that we will have it so as you can see that we have the we have the class here as you can see this is the second section so we have now margin top 15 ram and also let's say that about info item will be margin to a margin bottom will be the tangram yeah great and about heading here let's say that font size will be the 3.6 ram 6 ram yeah great and right now we need to say that text transform upper case right now it's actually fine and if i come here in the mobile device i think we can actually do something for that so here uh we can say that first of all for about info heading for that we can say that font size will be the 3m yeah it's looking really nice and also let's actually fix this as you can see that it's not looking good and for that let's say that for the padding we don't need that large padding we have in the top so we just can say that top and bottom will have a tandem only so that's good and after that for the top section for the top section the flex direction will be done will be the column and also we need to have a gap here so gap will be five ram great and finally uh here for the sub heading for the subheading font size will be the 1.8 ram great and also let's actually into the heading so heading will be the font size of 2.8 trim yeah perfect yeah that's looking really nice as you can see and right now we have the one section which is the education and we need to do more we need to have the my skill and the experience so which will be exactly same so let's actually duplicate this so this will be the my skill and if i come here as they consider this my skill and inside the my skill for the first item we will have the front end and here we'll have multiple item here so we'll have an array of all the front end tech here so as you can see that we have html css javascript and react and these are coming from this area as you can see so that's why we just actually made this array and as you can see that that's why we just made this an array so now we can actually pass multiple item instead of passing in single item yeah as you can see that we need to do the same thing for back end for design and also we need to do the same thing for the experience so this hole will be the similar thing as you can see that so from now i will actually fast forward this process so yeah as you can see that we are done with the experiences as you can see here we are done with all of our section it's looking good in our mobile devices you can see in the first place and also if i go to our desktop device it should be okay yeah it is not okay it is not okay so we are doing something wrong okay the problem is uh the problem is it is actually this item this thing is actually having an uh having an position of absolute so that's why we are actually seeing that it's going outside so to fix it we need to make sure that whenever i am having the position of absolute here what is the parent and we need to make them position relative so i can see that uh the parent is actually this div and i need to position that as a relative so position is the relative so position will be relative here so as you can see so now it should be done as you can see it is looking good in our mobile device and also the desktop device so yeah we are almost done for the last thing what we need to do we need to actually add this contact banner we already have this contact banner component so let's actually add this contact banner so contact banner and let's actually import that it's not having autoimport so import contact banner from and we need to go to the component inside that i have the contact banner so if i come here contact banner and so now as you can see uh i have the contact banner and it's looking really nice so now it's done this page this whole page is done if i come here in the mobile device it should be okay yeah it is looking good in the mobile device and also it should be fine in the large device yeah that's looking really nice so that's it for this video and in the next part of the project we are going to create the project uh the projects page as you can see so yeah i will see you in the next part of the project so that's it guys if you like this video please give it a thumbs up and don't forget to share it with your friends and family also if you want to watch more video like this one please subscribe the channel and also turn on the notification bell so that you can get notified whenever i will upload my next video so my name is arfan and i will see you in the next video till then bye bye good [Music] [Applause] [Music] office [Music] you

Channel: WEB CIFAR

Views: 1,613

Keywords: web cifar, shaif arfan, react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website portfolio, react website development, react tutorial for beginners, react js project, react js full course, react js website, reactjs for beginners, react portfolio website, react portfolio project, react project

Id: SRgdV6QIyU8

Length: 33min 21sec (2001 seconds)

Published: Fri May 28 2021