All righty, the first step is to open up our terminal. And we're going to be using the Angular CLI to create a resume component inside of our components folder, just like we did for the nav menu. And we're going to start by going into that folder. So we're going to CD source slash app slash components. See we're in this folder now. And to use the COI, we're going to do n G, G for generate C for component.

And we're going to create a resume component. So again, this creates the HTML file, the CSS file and the TypeScript file, as well as updating the app module with the import for this component. Okay, so we can close our terminal for now and You can see that we have our folder created here, we can open up our HTML and CSS. And we're also going to need to modify the app module as well. So we're going to start by updating the app module in order to allow for routing between our components. If you want to learn more about this, you can go to the angular documentation, I'll have a link for it in the course.

And so what we're going to do in the app module is we're going to import our router functionality. So we're going to import router module comma routes. And this is going to be from Angular slash router. And then we're going to go down above our nav module, and we're going to define the constant app routes. routes equals. And inside of this, we're going to have the path.

Quotation marks resumes. Whenever the URL sub URL is resume, we're going to route to this component, our resume component, you see it autofill that for me, okay. And lastly in the imports, we need to make sure that this functionality actually does what you want it to do. So router module, dot four, route, bracket, app routes. And we're going to enable tracing. True for debugging.

Just leave a little note there. Okay, and then we're going to put a comma there. Okay, so this is making sure that we're actually using our app routes, which we weren't previously. Alright, so now we're going to need to go into our app component. And we're going to need to provide a router outlet. So this is going to go at the top of the page.

And this is where the component that the router picks up is actually going to populate this element here. So without this, it wouldn't work because it's actually like going inside of this element. The next thing we need to do is change our element here that's wrapping our view Resume button. And instead of an href, we're going to have a router link equals quotes slash resume and rotor plank Active equals quotes active. So when our route router link is active, we're going to be targeted the on the resume sub URL as I said previously, and now we need to actually make sure that something is going to be displayed. So we're going to go to our resume component HTML file, we're going to create a div dot resume dash wrapper.

And inside of this, we're going to create a p element with some Lorem text. So we can use Word wrap, Alt z to show all of our text here. Next, we're going to go into our CSS and we're going to target the resume dash wrapper class. And we're going to give it a position absolute. Top zero, left, zero starting in the top left And we're gonna make it 500 viewport height, so five times the height of the screen, we're gonna give it a width of 100%. a background color black, and our font color will be white.

And let's make the font big so we can see it. And we're going to give it a z index of five, so everything but the navigation has a z index of one. So this will go over top of everything. Alright, so I think we're ready to check it out. So let's go to our project. Let's go down to our about section.

And let's see what happens. Okay, so it's all black. That means we have our component. But where's our text, you can see that we're not quite at the top of the page here. We are going to need to address that later. But you can see if we scroll to the top, we have our text there.

All right, so our navigation works for our component. Now we actually just need to populate our components. So if you wanted, you could make your own resume and design it yourself and do it from scratch. But as I said, I've done the work of making a resume component that you're more than welcome to use and modify. So assuming that you're going that route, we can continue finalizing the resume component that I made. So make sure that you download the zip folder from the course.

Once you've extracted the folder like I have here, we're going to right click and open with code. So you can see that we have two font files in here. We'll copy those later. For now we're going to open up the HTML, CSS and the app module. And we're going to start by Ctrl A Ctrl. C, copying this over our resume component.

So we're going to replace this and you can see that the spacing is a bit off. So we're just going to quickly highlight this Shift Tab twice. Okay, cool. And we're going to go back and we're going to copy the CSS as well. And we're going to paste that here. So something to keep in mind with the CSS is that you want to make sure that if you're using different custom fonts that you they are in your font folder.

And so what we're going to need to do is copy those fonts over. So we're going to minimize this. And we're going to open up our downloaded folder here, we're going to copy our two fonts, and you're going to go into your project source assets font folder, and you're going to paste those inside there. Right and we can go back and so these should work now. The other thing you can consider is you can change the hero pattern to whatever you want, you can change all the color schemes, there are many different ways that you can modify this resume. So there's a few other things we'll need to change to make it work.

First, we're going to need to modify our app module to import the other font, awesome icons that we're using. So if we go back to our other project, you can see here we'll use alt z again to word wrap. So you can see what that we're copying some solid icons, some regular icons, and also some additional brand icons. So I'm going to copy those you also make sure that you copy them to the library add part down here. I'm just going to fast forward through copying these Alrighty, so we're done copying in our Font Awesome icons. Let's check it out.

Alright, so that's looking pretty, pretty awesome. We have our custom fonts here. So very cool our resume is is working. So let's go back to our homepage. And let's just confirm that everything's still working. So we're going to go about your resume.

So you can see, as I mentioned before, we're not at the top of the page. We want to be up here, when we click on it. So we'll actually need to add a function in our app component that will scroll to the top of the page when we click on this. So let's go back into our code. And we're going to open up the app component Ts as well. And but first, we're going to go to the HTML and our router link, a element here and we're going to add our function.

Click Equals quotations scroll to the top. And we have our brackets to indicate we're running this function. And then we're going to go into our app component Ts file and we're going to make this function as well. And the first one will be for Safari, so document dot body. Scroll top equals zero. Document document element, scroll, top equals zero.

So this will be for everything else, Chrome, Firefox, and Opera. And, yeah, that's it. Let's check it out. See if it works. Okay, so we're gonna go back to our home, I guess we can go directly to about and we're gonna click this and it scrolls to the top. Alright, awesome.

So it looks like we're pretty much done with our resume. You can see that as we click on each of these links, it goes to our different sections here. And you can see our Font Awesome icons here. we hover over we have our titles. You can see we have a couple little more subtle Font Awesome icons here. And yeah, that's looking, that's looking great.

All right, so the cool thing is about this, we could still use our main navigation and our sub navigation without them interfering with each other. Left to modify that slightly for mobile. And yeah, but for now, we're actually finished the desktop version of our project. So congratulations for making it to this stage. And next we're going to start looking at our mobile navigation and responsive design to make sure that everything looks great on all screen sizes. All right, well, I'll see you in the next one.

Bye for now.