So to begin with, we're gonna go to the hero patterns, website hero patterns calm. And there are other similar sites where you can find repeatable SVG background patterns. But this is the one that I like the best. So this is something that can make your project really unique because you're able to pick a pattern, a foreground color and a background color. And also change the opacity so that can give you a wide variety of looks. You can see that there is a lot of really interesting patterns here.

But personally, my favorite is the circuit board pattern. So that's the one I'm going to go with today. There it is. So you're going to click on use pattern and then you're going to go into the settings here. And so the first thing I'm going to do is I'm going to change the background color to white. And I'm going to change the foreground color to black because I want it to be neutral and not impact the other colors on the page.

And then I'm going to turn the Opacity down, you can see that this number changes. As I move the slider up and down. I'm going to put it to point one. Cuz again, it's a background, I don't want it to distract from whatever's going to be in the foreground of our page. Alright, so now that that's done, we're going to copy both of these. And we can close this for now and go back to our code.

And down at the bottom here in our about section, we can actually get rid of this altogether. And instead we're going to have a dot back class. And we're actually going to need to give it the same properties that we had on the section, because we're actually going to wrap our section in this background div. So we're going to give it a position relative, a min height of 100, viewport and a height of auto. And then we're going to paste our background stuff. So you can see it's a very long string of numbers.

And that's what allows it to be infinitely scalable. It's using all of these points to kind of draw the shapes. And so you can make it as big of a pattern as you want and it will never lose quality. All right, so we're gonna go into our HTML now. And we're going to cut actually this line with our about section and we will make a div dot background. And we're going to paste that back inside because we want Our background div to wrap our section.

Alright, so let's check that out. So we're going to go down to our about section. Alright, very cool. So we have a nice looking pattern here. It's not too dominating. And we can see that it doesn't bleed through into our other sections.

Okay, perfect. So now we're going to move on to making the card. So let's go back to our HTML. And inside of our section, we're going to create a div dot card. And then inside of that, we're going to create an image. So IMG tab, and you can see that it has a source and alt attribute.

So we can fill in the alt attribute because that's good for accessibility. So if someone's using a screen reader, and also if the image doesn't load, there'll be this tag. So I'll just say, picture of me. Okay, we will link the picture in a bit. Now below the image, we're going to create another div, dot card, dash body, Enter. And we're going to nest everything else inside of this.

So we're kind of separating our image from our text and our button and everything. So we're going to first create an h1 with the card, dash title class. And then we're going to enter some type of title. So I'm just put about Yeah, that's, that's enough. And then underneath that, we're going to create a p elements. So P dot card dash ups.

Card dash text, Enter. And then inside of it, we're actually going to use another shortcut Lorem and then tab and this is going to create a chunk of dummy text. And then finally, below that, we're going to create an A element with a div inside of it. And this div is going to have a class of card dash button. So the same thing we did before with our links, we're wrapping them in the elements so that anywhere you click on it, it will trigger the link. And then inside of this, we're going to type view resume, because that's what's going to be on the button.

Alright, right, so just spaced this out. And we're just going to put a hash tag there. For now, we're actually going to give this a class to have a boat dash image so that we can style this image specifically, in case you have other images that we don't want to effect. And now the next thing we need to do is actually link to a picture. So for this, I recommend using a square photo because we're actually going to round it at the corners and you want to make sure that your image or likeness is kind of in the middle of that picture. So I'm going to be using a picture from my social media.

And what I would also recommend you do is go to tiny PNG calm, to make sure that you are optimizing the file size of your image. So we can look up this image that I have on the desktop, and you can see it didn't change much because I've already compressed it. So I'm not going to bother downloading that version. So we can close that. And we're going to go back to the desktop. And we're going to copy this into our assets folder.

And then we're going to copy it into our actual project. So again, source assets, and then into the image folder. And we're going to paste it there. So just sinto dash Wong dot jpg. Alright, so we can go back to our code. And we're going to change our source.

So we're going to again do dot dot slash and that'll bring up our assets folder, and our image folder. And then there's the image. Alright, so let's check that out. Okay, so we have all of our content, but definitely doesn't look like a card or a button. The image is way too big and it's not in the center. So, in the next video, we're going to tackle all the styling for this component.

Alright, I'll see you on that one. Bye for now.