Hello. So today we're going to finish up building out the base of our portfolio. So we just have our last little bit left about in the contact section which are both pretty straightforward. Um And then in future videos we're going to deal with some responsiveness um and make sure everything is connected. Um We're also going to add in some optional animations as well as fix. If we reload the page you'll notice there is um it will auto scroll to the I. Frame so we'll solve that issue. Um And then our last step will be deploying it. So let's go ahead and get started with adding in the next sections. So we're gonna go ahead and add in a new section and we're going to give it the idea of approach and then we will give it, you can be inside of the section here. We'll give it an H. One tag and we'll give it a class of about headache. Mhm. Let's say about we'll go over to our style dot CSS um And we're gonna copy Um the skills heading one because on the same side. So it just makes a little bit easier. We're gonna go under work, keep our affections together here and do about heading. You know what I realized I copied? Does that name as well. So let's just do this paste that groups hate when I do this. Okay right now if we go here we should have that where we just of course need to actually make it so that it's in the right spot. So for the about what we're going to have to add in something so that it sits in the right area because of course right now it is sitting way too. Hi asked. Yeah, but so what we're gonna do is we're actually gonna give it a container. I think that would be the best way to do that. So we're going to go back to the section here and do a class. We'll do about computer. Go back over to our styles. It's not the heading. Yeah. And let's do padding top 200 pixels that looks like it's sitting more in the accurate area. Right? Might need a little bit lower, but we'll keep it there for now and see what happens the next we're gonna want to do is we're going to add in our picture but we're going to have that be a absolute position. So I do want to go and add in. You probably guessed it the position relative to the other direction here. And then we're going to add an image tag And our source is going to be just that B I just named it me um say profile, image. Yeah. Yeah, Perfect. And we are going to give it the class uh, position flute. And I'm going to give a unique class uh avatar which we haven't built out yet um which we can go and do here. I'm gonna put under the Locos and for the avatar we need to make sure that it is reasonably sized because right now it is absolutely going to be giant when we go back over here, nobody needs a picture that large in my face ever. So let's set the width to let's say 500 pixels and check that out. We scroll the right way. That looks pretty accurate. Right? Be a little bit bigger because the screen is so much whiter. Ah yeah let's do 600 pixels. Perfect. And we're gonna do left to be photo not left right. We'll do negative 50 because we wanted to be off the screen. Um and pops well zero. Uh huh. Oh it's our position absolute or position relative spelled wrong. I wonder. Let's check here. Absolutely position relative. Okay. Yes it is this relative spelled incorrectly. There we go. Okay, so let's sit in way too high. Um Weird is that it's not let's change the uh bulk container to the margins. I should drop back down lower. Perfect. Um But it is not listening to the negative there. So let's try doing negative 100. Not 100. A little bit more. We'll do -120. Perfect. Sitting off the page, I do want to do a little bit lower. I think so maybe we'll do 10 pixels from the top. Mhm. Perfect. Let's look at a little bit better and then we're gonna add in a big paragraph. Uh which will add under here on a p class RP tech and we'll do a class of about text and then I'm gonna go ahead and copy everything from here. two Inside of this. Mhm Thanks. We're gonna save that. Go back over here, you're going to see is in one giant thing here. So we're going to have a couple different ways to fix this. Let's go ahead and start by defining that about text class. So ah robotics class we're going to use um the same font family is before auto serif. Um We're going to control the width of the text, Let's say 60%. We can adjust that where we need to uh we'll see the font weight is going to be that standard 300 and it's going to be the standard size of that 32 that we've been using for all the rest of our fonts. And let's take a look at this so it can be a little bit bigger I think for our wicks. Yes, somebody is better there. Um Our font size is not working so pixels perfect. And I want it to be over a little bit more. So we're going to do put the padding at the top, we'll do petting Left, we'll do 80 pixels. So that's that's been the standard that we've done and we move things over further on all these spaces. We've done 80. So Actually this was definitely a little bit more but this one was 80. That was 80 there. I wonder how far removed that one over. Let's see. Main para having left A. T. O. Oh it's because it's moved over 80 here as well so that was kind of doubled. But um now this is just one giant chunk of writing which is fine if that's how we want it. But I had it split up in the design to look like this so we're going to add in some breaks into our come here I had an extra slash after just for safety it's absolutely not necessary to do that. Um And that will separate them but not give an actual proper break. So I'm going to do the exact same thing again but the easiest way we'll speak to copy it down and say that and now that auto scrolling gets annoying really fast so we're definitely gonna fix that. Um The spacing there might be a little bit too big but. Uh huh. Let's see here. Break 38 pixels in height. So if we were to change this and just be like an in line style here could be a height of se 15 pixels that did not work. Yeah No it's just so Sarah by 38 interesting. Well what you can live like that for now it's not the end of the world. Um I don't want to spend time in the video worry about the spacing too much because it's something we can all fix on our own later. Um So that section is built out there and then now we're just gonna build out that last little contact section quickly there. Um We're going to do the contact. So let's go to do a new section here, make up the ID of contact. Uh Let's give this A and B. five, we have that standard there. Um We'll do yeah each one of contact, the class of compact heading. Let's go over to R. C. S. S. R. Skills is going to be on the same side that we were wanting for that. Uh huh. We're going to say contact and we're also gonna do a contact petr or contact container, what's it called? Header? Which what did I do? Countertop zero because we need it on the opposite side. We're going to a flex. We will just do flex actually, so contact heading. So that should be perfect. So let's actually just wrap this initiative. Yes, remove this up. We're going to give this the class of reflects and we're gonna do justify content and should shove it to the other side there. Um We just need to adjust the margin left. Uh Let's do it's because it's on the wrong side. Right? Mhm correct. And now what we'll do is we're gonna add in this so we're going to create a div that's going to contain both of them because they're all in that clean line there. So we'll do it, give we'll give it a class of reflex and we're going to justify content in between, justify content between again, these are all bootstrap classes that we're using here. Um we are going to create the first section which is going to be these two right there. Um I emails core color. Yeah, we're missing our email. Um Okay, so let me go see if I can find that. Um I realize we didn't at an even one. So even though yes grant let S P G um we're going after I get like this to be honest and then pop it in here email square color. Mhm Rename. We're going to say email. Yeah. Perfect. So we will add in a tag which can be blank for now because we want this logo to be clickable. That will lead to um an email um and then we want to add in our assets and then, you know, email icon. Yeah. Okay then we're going to a class class and we're gonna use that same logo class will be using for everything just to keep it standard fare for the size. So if we look over there, it's going to be the same size as these guys and then we are going to go ahead and add in. I'm not inside of the attack outside of it, we'll do an H3, I will do example, you know what I do want this to be clickable. So let's trapping in here. Could you remind us I go here um and we're going to actually do something kind of not recommended. We're going to reuse the class right now. Um We'll just use one of the other text ones. The skills text or um attacks has too many other factors to it. So the skills texture straight forward. So we're gonna reuse that to keep it looking. Oh we're not actually we're not gonna be able to do that because I have decided for it to be a link instead. Um So let's ignore what I just said and we're going to say contact text yes style we're going to use I'm gonna grab the skills text class. Yeah. Dua dot contact. Next get it girl. You're gonna wake. Yeah. Uh And then we're going to change our color to be black and we're going to change our text decoration to be done. So now it should be. Yeah. Yeah. No I know that's not working pinch shouldn't be inheriting that. Okay let's change let's move this to the A tag. Yeah. Listen. Yeah. Yeah. Okay so the underline needs to go on the A tag. So we're actually just going to do to solve this is and I'm only doing this because I know that I'm not going to be adding any more links here because it's really unless you're very positive, you're never gonna want to add something like this to um override all the classes but I'm not going to want any links that we have to have a text decoration. So I'm going to override back completely for all of them. Perfect. So now what we need to do is we need to make these inside each other. So unsurprisingly where are we here? Hey we're going to give this a class of deflects and we're also going to give it a line items into the center so that they sit next to each other reflects. Excuse me. Why are you not responding deflects? All right thank you. Yeah. Thinking having this inside of here is causing some issues. Yes. So I wonder if he just okay so let's drop the state completely. Mhm. And then we're just going to use it as the eight take here. So would you justify, nope align items? Okay. I did add the M. B. Zero to get rid of that standard margin there. I think I just have I don't even remember writing that. I think I just habitually wrote it out um to override that and then we're going to create a second give that. We're going to actually just go up here. We're going to copy out swears all of our perfect copy this whole thing. Let's get rid of that dip. We just wrote paste this here. I will have the line which we're not gonna want. So we're going to get rid of the main social container. Yeah that should pop right over there now we just need to see if the spacing is how we want it. Um I think I would like to definitely have a little bit more spacing at the top end at the bottom. So what we're gonna do is we're gonna give this section class Yeah. Of M. Y. And then we'll do four possible 45. Perfect. What a good at P. So it stop putting this basic properly. Uh huh. Take a look at that. Maybe we'll just add some under the contact. Oh but it's absolutely not gonna make a difference unless we just add it here where we do MV 4? Yeah, that's better. Perfect. So now the entire thing is built out here um we just need to deal with some responsive issues because if we shrink it, things are starting to fully overlap each other um and it just doesn't look so good. So in another video we will go ahead and deal with the responsiveness. We're also going to connect all of our links, deal with our hovers and make our hovers look how we want um as well as the hovers on any kind of items like this um set up all the connectivity between there. So actually one thing I did miss is I just want to add in a margin beside where is this here or such? For some reason the new bootstrap changed right to eat instead of M. R. I don't know why but they did and kind of keep making that mistake because I'm so used to them are but it is what it is. So there we go. That is our portfolio in the standard Web view built out there. We just need to make it a bit more responsive, but we've come quite a long way. I am sort of sick of looking at this uh standard me. I end up hating my designs after I actually end up trying to implement them. I've decided I don't like it at all, but that's fine. Uh We will make it a little jazzier with some animations and stuff later and then hopefully it'll regrow back on me there, so we will see you in the next video.