 Hey, what is going on everybody? My name is Raddy and today we're going to create a simple portfolio website where you can showcase your work and skills. We'll be using ReactJS with the combination of Tailwind CSS. If this is something that you'd love to learn, stick around, it would be amazing if you liked the video, post something in the comments below for more engagement so the video can reach more people. Enjoy the process and let's jump on the computer. Everything that we're going to build today is going to be responsive. We're going to have active links in here. We're going to have this beautiful hero section. We're going to have a scrollable marquee that you can add custom data to. We're going to create this selected work piece which is going to come from an object that we will map to and then display the data. Then if you scroll down a little bit more, we're going to have a simple services section big let's get to work button and the footer. Not only this, we're going to create the about page which is going to be super simple and the contact page. The contact is actually going to come from a third party website. And last but not least, I'm going to show you an example of a portfolio piece that you can do. So Harley Davidson, for example, and that's pretty much it. Hey, welcome everybody and let's get started. In order to create our application today, I'm going to be using Vite, the two main reasons for this. First of all, Vite is a little bit faster. Well, it's a lot faster than create react app. And the second reason is that the bundle that Vite creates is a little bit more simplified. So we won't have to delete as many files and mess around with the package. One thing that I wanted to mention is that Vite requires a Node.js version of 14.18 or above. So make sure that you have that if you're not sure how to check which Node.js version you have, you can open the terminal or PowerShell and then just type node-v. And then this will give you your current Node.js version. If this is below the requirements, make sure you go to the Node.js website and download the latest version. That's pretty much it. Now let's move this to the site and create our application. So I'm going to be creating the application here on my desktop. And what I can do on Windows is left shift, right click and open PowerShell window here. If you're using Mac or Linux, all this does is basically CD's to the desktop folder. So it navigates to the desktop folder and I can install my project there. If you wish to do that manually, you can use the CD command and the LS command to list files. So let's do NPM, create, provide at latest. Then we need to give our application a name. So I'm going to call this react portfolio, press enter. We need to choose react and then react one more time. This has created a folder for me here on my desktop. And now we need to go inside this folder by using the CD command. And then we need to install all of the dependencies by doing NPM install. And last we need to run the project to see whether everything is working. So I'm going to do NPM, run dev. Okay, right gives us this local IP address that we can use with this port number. So I can grab this super quickly and paste it inside the browser. Okay, as you can see, we have our application here fully working, which is great. I'm actually going to be using Visual Studio Code to code this project. And I'm going to be using the terminal inside it. And so I'm going to be terminating this. So let's do control and C to terminate the batch job and then press Y. Now all websites should stop working. And I can close this. If I refresh, you'll see that the website doesn't work anymore. Let's minimize this. I'm going to go into the react portfolio folder that we just created. And then I want to open this in Visual Studio Code in Windows. And I believe Mac, there is a easy way of doing this. You can do left shift, right click the open PowerShell window here, which again, see these to the folder that we were in right now. And then I can do code dot. And this will open Visual Studio Code for me with the project here on the side. Now, if you're using another code editor, it's usually file and then open folder. And then you just need to select your project folder. So what I'm going to do now is remove the PowerShell from here because we won't need it. And the first thing that I want to talk about is some of the extensions that can be super helpful for this project. So in Visual Studio Code, you can go under extensions here. And there are a couple of extensions that I find really, really helpful. One of them is the ES7 plus extension, this one here. And this basically helps us with React snippet. It's just going to speed up the process of creating pages and components. The next one that I want to look into is the Tailwind TSS IntelliSense. And this is very similar. This basically has auto-complete for Tailwind TSS. It has syntax, highlighting and linting, which is great. You'll see how helpful this is as we start using it. And the last one is Prettier. Now, I'm not going to be using Prettier today, but I usually use Prettier all the time because it formats my code just so it looks a little bit better. But the reason I'm not going to be using it today is because I want to move the code whenever I want, so we can focus on each part as we're building it. And it's just a little bit easier to see. But this is definitely nice to have. Now that we've got this out of the way, the first thing that we need to do is let's open the Explorer here just so we have it. And let's start by installing some of the dependencies that we need. I'm going to be installing the dependencies as we need them and as we need to use them. So the first dependency that I'm going to install is the React Router DOM. So this dependency is going to help us create all pages. So every time we click on a link like about Router DOM, it's just going to render another page. So in order to do this, we can go to the terminal, new terminal, and then inside here is where we can start installing some of the dependencies. So to do this, we can do NPM, I for install, and then we can do React dash, Router, dash DOM, press Enter, and then this should take a couple of seconds. Okay, this is great now. And let's run the project one more time. In fact, we need to have a run in anyway. So let's do NPM run dev. Okay, we have the port number and inside here, I can actually do control and click to open it inside the browser, which is great. I think you opened it in another browser, but I'm going to close it. So now that we have our project here, we can start blank. So I want to remove all of this. In order to do this, we can go back to VGTD code, navigate to source, and then app.jsx. I'm going to minimize the terminal. It will be running on the background, but I'm just going to minimize it like so, just so we have a little bit more space. I've zoomed in so much already, it's going to be hard to see where we are inside app.jsx. And I want to remove everything inside this diff with the class name of app. So if I grab everything and remove, save this, let's go to the application and you will see that everything is gone. We also need to remove this counter as we won't need it here. And now this is not in use. So I'm going to remove this and remove the logo as well. Okay, this is great. Save it. Application should be still working. I mean, there is not much to see, but that's pretty much it. Now the next step would be to install Tel Win CSS. So let's go to the official website. And if you click get started inside here, you can follow the installation process. So I'm going to click on primer guidelines. Okay, so if we click here on white, all we need to do is follow the instructions from here and then get Tel Win CSS working. So I'm going to move to this to the site and follow it super quickly. Let's go back to Visual Studio Code, open the terminal, we're actually working on this one here. So what I can do is terminate this job by doing control and see, then press Y and enter. All right, now to install the Tel Win CSS, we need to do MPM, install dash D Tel Win CSS, post CSS auto prefix. This should take a second. And then we need to do MPX Tel Win CSS, you need dash P. Okay, we should have Tel Win CSS installed. And now we need to finish the configuration. So I'm going to minimize this a little bit and then go to the explorer and find telwin.config.cjs. If you click on this inside the content is where we need to paste this code here. And this basically adds the path to all of our templates files. So our templates files will be in the source folder. And I can just literally grab this and paste it inside here. Okay, let's see what else do we need to do. And the next thing that we need to do is add the Tel Win directive to your CSS. So I'm going to copy this, go to the project and click on index.css. And oh, we have a little bit of CSS here from white. I'm going to actually remove this super quickly and paste the Tel Win CSS instead. Save this. Let's go back. What else do we have? So the next step is actually already done. If I was to go back to the project, and if you click on main.jsx, you will see that this has the import for the index.css, which is the CSS file that we're working with here. So we won't have to do anything else. And I believe that we can just run the project and test Tel Win CSS. In order to do this, let's go down to the bottom here and copy a little bit of the HTML. So I'm going to copy this and let's go back, close this, close the index.css, close the config, just make sure that you save everything. And then inside the app.jsx, we can paste some of this HTML like so. So I'm going to close the explorer and rerun this project by doing npm, run def. Okay, let's go back to the website and refresh. As you can see, we have Hello World. And this is actually styled a little bit. It has the underlying working from Tel Win CSS, which means that all Tel Win CSS installation was successful. All right, the next thing that we need to do is change the topography. In order to do this, let's go and use a Google font. So I'm going to go to Google fonts and find the font that you want. But in this case, I'm going to be using Inter. I'm going to search for Inter. This is the one that I'm going to be using. So if you click on it, I've actually already reviewed the here, but I'm going to show you how to do anyway. So I'm going to remove all of this. And if you scroll down a little bit, then inside here is where we can choose the fonts that we want. So for example, I'm going to be using light. I'm going to add this to the collection, then regular, add this. And then I'm probably just going to be using both for the project. So I'm going to click on this as well. If we click on download family, this will actually download the zip file, but I don't actually want this. I actually want to include this in the project. And in order to do this, a thing that we can click on this icon here, view selected families. And this will show us how we can include it into our web project. Now there are a couple of ways of doing it. You can use the link or you can use the import. Today, I'm actually going to be using the import. And I'm going to click on import here and grab this super quickly. And this import can go straight into the, where is it? The index.css. And maybe we can just add it here at the bottom and close this. So maybe we can just add it at the bottom here of the tailwind.css, save it. And then the next thing that we need to do is a little bit of configuration for this font as well. In order for this font to work, we need to go back to the tailwind configuration file. Let's go tailwind.config.cjs. And inside team here is where we can extend the font. So inside extend type font family, like so, and then column, curly bracket, and then sans. And then we can provide the font name, which is inside single quotes, enter. And then this is sans seri. So save this. And I believe that this is pretty much it. So if we save everything, hopefully our font should change. I mean, I'm not sure if it has, let me let me toggle between removing the font. All right. So if I was to zoom in quite a bit and open the tailwind CSS config file here, and if I was to remove the font family, save it, you'll see that the font changes. It's not a big of a difference, but it definitely changes. So this means that our font is working. All right, let's close all of this. And the next thing that I want to do is add all of the images that we need for project. So what I mean by this is I'm actually going to paste all of the images that I need for this project, but we're going to be inserting them into our application as one we need them. So what I'm going to do is close this, go to Explorer, and then inside source assets is where we're going to be pasting all of the images, we can do right click or reveal when file explorer. And inside assets is where we can add all of the images. At the moment, we have this react dot SVG, which we want these, I'm going to read it. And now I need to find the images that I have. Also, you can download them. I will paste the link in the description below. Let me copy them and paste them. And what I've done is basically all of the images that you see from here are from unsplash.com and they're going to be linked in the description below as well. They're free to use as long as you credit the order. And that's pretty much it. And the way I've structured everything is I have all of my main photos in here with the logo and then I have a bunch of icons that we're going to be using inside this icon folder, just because it's a little bit easier to organize this way. And now we can close this and we can start working on our project. Okay, let's start by creating one or two pages and set up the routing. In order to do this, let's open the app.js expo and inside here is where we need to include the browser router from react that we installed earlier. So in order to do this, we can do, let me close the explorer first of all, we can do import. And then inside here with curly brackets, we can do browser router as router, route routes. And then after the curly bracket, we can do from in single quotes, react router DOM like so. And we should be able to start using this. Now that we have the browser router imported, let's set it up. And then we are going to create a couple of pages. So to do this, we can start by writing router, like so we need to open and close it. Then inside the router, we can do routes, open and close and inside routes, aware or pages are going to be put and then obviously rendered. So inside here as well, we can put something like a header. And inside here, maybe we can put a button and then between them is where we're going to be rendering the pages. So of course, I'm going to move those things and then show you how this is going to work. So the first route is obviously going to be our homepage. And we need to create that. Okay, let's create our first route, which is going to be our homepage. In order to do this, inside the source folder here, create a new folder called pages. Inside the pages folder, let's create our homepage. So I'm going to do home like so. And inside the home folder, I'm going to create a file called home dot JSX, like so. So I'm going to be using the extension here, the ES7 extension here to quickly create the function for this component. And to do this, we can do RFCE. And as you can see, this creates a react functional export component. So I'm going to press enter. And one thing that I notice is that the function starts with small letter, which is not great. I'm not sure why this is happening. Used to work, I think. But what I'm going to do is change this to a capital letter and change the export to a capital letter. And the reason for this is because user defined components must be capitalized. When an element starts with a lower case, it can be confused with like a div or a span. So that's why we're doing it. And now we have our homepage. Let's close this and go back to app dot JSX. And under the import here, the last import is where we can import this page. So what I'm going to do, let's start tapping import, and then we want to import home from and then we need to navigate to the pages folder. So dot slash and then pages slash home and then slash home one more time. And we don't have to specify the extension. This should work. And now in order to be able to render this route, we need to do inside the route. So I'm going to do route path. Path is the path is the actual path of the URL where when you visit this path, you want the page to be rendered. And then element is where we want to specify which element we want to render. So in this case, this is going to be home like so. And we need to close it. So this is how we insert it. And then we also need to close this route. So after the curly brackets, do you slash and close? As you can see, nothing else is highlighted. So I can save this and go back to the browser and refresh. Okay, we have home, which is great. And I'm not sure why is it styled in the middle, but we'll figure that out in a minute. And now let's create one more route. Let's say for example, the about page. So exactly the same thing we can create inside the pages here, we can create another folder called about. And inside the about I can create another file called about.jsx. And we need to run the RFC. Press enter, capitalize this one more time. Whoops. About like so and save. About and save. Let's go back. We need to insert this page as well. So what I can do is here for this last import I can do old shift and down and then just change home to about and then change this to about and then about one more time. And now we can insert this route as well. If I was to copy this one here, old shift and down arrow, then I can replace the route path to be about. And also I can replace the home element with about here. So if we save this, at the moment, we don't have any links back in the manually. And if we go to the browser and let's say we type slash about present, you will see that we get in the about page. And if we go to the home page, we get home also. Now that we know how the routes are working, let's look into why this is actually sent it. So there might be some default styles that have missed out, maybe inside the index dot CSS, no, maybe inside the app dot CSS. Yep. Okay, so there are a couple of styles that have missed out that we can remove. So inside the app dot CSS, grab everything and remove it. And hopefully if we go back to the browser, you will see that now we have home on the left side, about one more time, we get the about page, which is great. Okay, that said, we can start developing our website layout, starting with the header. So the header can be a reusable component. Maybe you might want to have different headers for your website, different photos for your website, different sections for your website. And in order to do this, I'm going to create another folder called components inside the source folder. So let's create another folder, good components. And inside components is where I'm going to be creating the header, just like the way we created the pages. So let's create a file here. And this file is going to be called header dot JSX. And the reason I'm not going to be creating a folder inside the components is because all components for this project are going to be very simple. And there is no need to over complicate the folder structure by adding a lot of folders. And what we have to do for the header is our FCE to create or react functional component, change all of this to header with capital letter. And let's include the inside or app dot JSX. If I was to close this, we need to include this component just the way we included the homepage and the about page, we can include the header. So in order to do this, I can actually do another import. This one is going to be called header from and then this time is going to be dot components and slash header like so save this. And also we need to grab this and put it inside the router. So not inside the routes because these are going to be rendered. These pages are going to be rendered when we click a link. But I don't want to have the header re-rendered. I want the header to be on top here on top of the router. So it always stays there. So in order to use the header, we can open header with capital letter here and close it. All headers should be working now. If I go back to the website, you will see that we have an header and then we have the home. So if I was to go to the about page, like so, you will see that the header stays there, but the about page changes, which is great. Are we going to have to do this later on with the footer and so on? Let's get started with writing some styles for our header. Okay, let's close everything and focus on the header dot JSX. Now the first thing that I want to do is insert the logo for project. In order to do this, there are a couple of ways of doing it, but I'm going to show you the first way and then I'm going to show you why I'm not going to use it. What I'm going to do is import the logo. Let's do import and then logo from inside single codes, we can do dot dot slash and then go to assets and then go to logo dot SVG because this is the file name that is inside assets and then somewhere. Yeah, here it is. Logo dot SVG. Okay. So this is the logo and we're importing it. Now in order to display this logo, I can grab it and I can insert it somewhere inside the diff. So maybe I can say the URL and then with JSX, we can do curly brackets and import the logo. Obviously, this is just going to put the path, but if you want to actually see it, you can put it inside an image and just put the source here instead. So this is going to be logo and save. As to go back, you see that we're getting the logo and we're getting the URL. Now this is all good. This is the URL. Yeah, sorry. Now this is all good, but our application is going to have a lot of images, which means that we're going to have to have like a ton of images like this, name all of them and so on. So this is fine, but it can get a little bit messy. And I wanted to show you another way of how we could do this. So instead of doing each individual element inside here, we can actually create a file inside our assets over here that is going to kind of like act as a map for all of our assets. So what I mean by this is let's create inside assets, let's create a new file. And this file is going to be called index.js. Now inside this file is where we can list all of the pictures that we have, the JPEGs, SVGs and icons. And then we can import them as one we need. And this is going to be much, much cleaner as you will see when we start developing the homepage. So what I'm going to do is let's grab the logo from here. I'm going to cut it from the header.js and paste it inside the index.js. But the problem here is now that the folder path is going to be different because we are already inside the assets. I think what we need to do is dot and then slash logo and this should find the logo.SVG file. But we also need to be able to export this logo so we can use it in our functional components. In order to do this, we can do export and then we can export the logo like so. Copy and paste it inside here. Save this. So I know this looks kind of like overkill to do, but in a second we're going to be adding a lot more images and it's going to make a lot more sense. So now inside the header.js what we can do is import this file. And in order to do this, let's go here and let's do import and in curly brackets, we can put logo and then from quotes and then dot dot assets like so and then finish it with a slash save. So now we should be able to still have access to the logo and if I was to go back to the page and refresh, automatically refresh is anyway, you'll see that I'm getting the logo, which is great. And this is the source. So this works as well. And later on, you will see how useful this is because on our homepage, we can have a ton of images. So finally, we can start working on our header. Let me clean everything up inside here and I'm actually going to remove this diff and I'm going to wrap everything inside a header HTML element. And inside here is where we're going to be stacking all elements. Let's start by building this very simple and then we'll add the styles, we'll add the links and everything else on top, just because if we start simple, it's going to be much, much easier to understand how the layout is working. So I'm going to have a diff and I'm going to duplicate this three or two more times. So old shift down twice and then inside the first diff, we're going to have the logo. The second diff is going to have let's talk and then the last diff is going to be the navigation. Okay, if we go back to the application, you will see we have the logo, let's talk and navigation. Great. If I zoom in, you will be able to see, but if I zoom in too much, it might break the layout because we're going to be using break points. So I'm going to be zooming out a little bit. Hopefully you'll be able to see in a second anyway. So what I'm going to have to do is the plan is that we have the logo on the left side. We have let's talk on the right side on mobile and we have the navigation underneath on mobile. Now, when we go to desktop, I want the logo to be in the left. Let's talk on the right and the navigation to be in the middle. In order for us to do that, we can use grid here inside the header. Let's give it a class name of great. And this is going to convert the header into a grid element, which is going to make everything so much easier to stop. So for this, we're starting from mobile first, so we can give or grid two columns. To do this, we can do grid calls of two and look what happens now. We have a logo on the left side and we have let's talk on the right side. If I was to inspect them, zoom in a little bit, you'll see that I was to click on the grid here, the two grids perfect. Now I want this navigation to actually span across those two columns. In order to do this, we can go to navigation and give it a class name, call span two. And if I give this a background just so you can see a little bit better of slate 500, for example, you will see that the navigation is now spanning across the two columns. Now, when we go up to desktop, I want this to change. As I said, so I'm going to zoom out a little bit. And what I want to do is instead of having two calls, I want to have three. Okay, so we can give it a medium media query. And I'm going to create a custom grid here. So I'm going to do grid and then calls and then dash and inside here is where we can specify the sizes for each column. So for the logo, I want to have 180 pixels underscore one FR, which means one fraction of the available space is going to go for the navigation. And then I'm going to do another score for 180 pixels. And that is going to be for the let's talk. If I was to save this, and if I was to go back to the website, you will see that things are changing. Now we have the logo, we have let's talk, and we have another column here. Yes, everything looks broken, but we're going to be fixing it right now. And if I was to go back to mobile, first of all, let me just show you, you will see that we have two columns, then above the media query, medium media query, sorry, we have three columns. Perfect. Now we can use grid to actually position the elements where we want. So the logo actually doesn't need to be touched because it's already positioned the way it is. And this is because the way I've structured my HTML elements, I have the logo position first, I have the second. But now that doesn't make sense on desktop. So I'm going to have to position this on the last column of the first row. So let me show you how this is going to happen. So for the logo, there is no point of adding the first row, first column, and so on. You could if you want to, we're probably going to do this later on in some other sections. But for the let's talk, we definitely need to reposition this. So what I'm going to do for the let's talk, let's go and give it a class name. This is going to be on medium screens. I want this column to start, you can either put end, or you can put the number of columns. So let's try three. And this needs to be start like so. If I save it, you will see that we have the logo on the left. And we have let's talk, taking the last column, which is perfect. Now I can do exactly the same thing for the navigation. Let's go back to the navigation here, which is this depth here. And then what we can do is we already have col span to which could be an issue. But what we can do is we can do MD col dash span dash one. And in fact, we might not even need this because I'm going to reset the position by doing MD. So we want this to be on row start one, because we want the navigation to appear on the first row with the other element. And then we want MD col start to because I want the navigation to start from column number two. And this is where with the zoom in, it's kind of hard to see. So I'm going to do this. Hopefully this is a little bit better to see. So we have col start to we also can reset the ending. So MD col and three, technically speaking, if we go back, you will see that we have the logo on the left side navigation in the middle. And let's talk on the right side, which is exactly what I wanted. Now if I was to go mobile, I'm going to inspect and go mobile. We have this fully responsive now and it's working great. So now that we have the hard part out of the way, we can actually start styling the elements the way we want. And we're placing some of the logos and so on. Let's start with the actual header. As you saw my design, I have a lot of borders. So what I'm going to do is give all header a black border. In order to do this, we can do border black and then we can do border off to to add border everywhere on the header. And this is a problem with zoom it in. It's just going to be hard to see. So I'm going to have to space things around. Okay. So as you can see, we have the border everywhere. I definitely want the background color to be white because I'm going to change the body color later on to something else. In order to do this, we can do background dash white and save. So I think that's going to be pretty much it for header. And now let's focus on the logo. The logo actually needs to be a link. So when we click on the logo, I want it to go back to the homepage. And in order to do this, we're going to have to insert react router DOM. So one way of doing this is actually you can attempt by writing link like so and and then to and sometimes he adds a here on top. But for me, he didn't seem to add it this time. So what I'm going to have to do is import it. So maybe after direct here, we can do import link and then from react router DOM. And now we can use this link here and link our logo. In order to do this, we need to give or link a destination. So that's going to be two. And then this is going to be equals. And in single quotes, I can do slash and that would be it. So because our homepage doesn't have anything after it slash will be absolutely fine. And then we can put all logo inside it. So because we've already inserted the logo, I can actually use an image for this. So inside here, we can do, let's say image like so. And for the source, we can do curly brackets and then logo. Now, as you can see, sometimes the HTML is written with double quotes and sometimes react finishes stuff with single quotes. So I'm just going to send changes to single quotes. Now that I've started this way, I think that's absolutely fine for the old. Don't forget to do this. Obviously, I'm just going to put ready for now. And that would be absolutely fine. And of course, it's nice to actually put with to actually put a with and a height of the logo, which I'm not sure of. So I'm going to go to the Explorer, click on the logo and put 13715. So 137 and then 15. Perfect. We have the link with the logo. And now let's have a look at it first. It looks great in here, but obviously it will require some sort of styling because I want to send to rare and so on. So we have nowhere so far and this seems to be working, which is right. I'm going to be writing the styles on the actual link inside here. So let's do a class name. And for the class name, I'm going to convert this into a flex. So I can center line. So let's do a line middle. And then and then I want to give it a border black. Oops, black like so. And then this border is going to be border dash R, which stands for right. And then two everywhere I'm going to be adding pretty much borders of two. But if I look at this, you will see that we have the logo looking good in the middle here. And we have the line. Obviously this is zoom in too much, but it's looking great. Maybe the logo needs to justify it in the middle as well. So let's do that super quickly. Justify center. And let's have a look into it. Okay, this is much, much better. It's looking good. The logo is pretty much done. Let's concentrate on the actual navigation. So for the navigation, let's tidy this up and look into the navigation. The navigation is actually the last time in a minute. So let's quickly look into the actual let's talk button instead. Okay, for the let's start button, let's convert this into a link as well. So instead of diff, let's do link and make sure that you close it here as well. Link like so. And this link needs to have a destination again. So two, and this time the destination will be slash contact like so. So I haven't made this page yet, but I know that this is going to be the URL. So it's absolutely fine to add. And also for the let's talk, I want to add an icon. So the icon that I want, it's going to be and the hero icon. So I have the website open here, heroicons.com. And I basically want to add this arrow here. So instead of adding the whole library of icons and using two of them, I'm just going to copy this JSX and paste it inside here on top of let's talk. Let me tidy this up because I don't have pretty installed. And then we can start styling this. Let's have a look at the icons super quickly. It's looking good. And I want this to be in the middle. I want to put border on the left side and so on. This is important to still have the position of it. So next year, I'm going to do border black and then medium screens, border dash left dash two pixels. And what else are we going to have? I can cover this into a flex just so we can align the items the way we want. And I'm going to have to put this on the line one more time. So this is going to be flex. We're going to have a gap between the items of two. Let's sentence everything by doing item items center. And also let's justify them in the middle. So justify center. I want to make the text a little bit larger. So text dash large. And let's have a look. Okay, this is already looking pretty decent. But what I want to do is give it a little bit of a background color and a hover. So to do this, let's add another line so you can see a little bit better. And this is going to be background dash yellow of 300. So for the hovers, what we can do is put hover and then background yellow and then just change the number to something darker. And if you wish to add like a nice transition, what you can do is ease is in out. And then you can set the duration to be the quickest one just because it's going to look nicer. I think save this and let's go back. The hover doesn't seem to work. Let's have a look. Oh, it's because I misspelled hover needs to be hover and then save. Okay, yeah, this is working perfectly fine. Now let's look into the navigation. So for the navigation, let's tie this up. And now we can focus on the navigation. As you can see, we have the navigation wrapped in a diff. But what we're going to do is use the HTML5 element nav instead. Let's do nav and then close the nav here as well. So that's absolutely fine. And inside here is where we're going to be adding our list with links. So I'm going to do an unordered list, which we will need to start with a list of links. And inside here is where we're going to be adding the links. Now I could use the normal link element like we did before, but I want to do a little bit more than this. I actually want to have an active link. And in order to be able to do this easily, we're going to have to bring in the nav link. So in order to do this, where we have import link, let's do a comma and let's do nav link as well. So this is going to be helping us with adding classes to all links. In order to use this inside the list, we can start by opening nav link like so and close it inside here. Again, we're going to have a two destination, which is for the homepage is going to be just slash like so. Then we can literally just give it a name for now. Home. Let's make sure that we make a work festival and then we'll style it. So in order to add one more, I'm going to copy this list and just paste it here. So this one is going to be the about just because we have an about page already and save. First to go back and let's click on the about. You'll see that about renders, we click on home, home renders, which is perfect. And now we can start styling it and adding the active classes on it. In order to do this, we have the navigation. Let's start with the top. Again, I'm going to have to do a little bit of border adding here. So the border will be border top of two, and then border black. Now the border for medium screens and above is going to be border dash top of zero. And let's have a look how this way. Okay, this is working. And if I go to mobile, yep. So this is all working with the borders. That's exactly the way I want it. But I also want to justify everything in the center. So what we can do, we can convert this into a flex element. So flex and then item center and then justify center like so, save it. Let's go back. And as you can see all the elements say in the middle. And then let's have a look at it. It will be nice to tidy this up once we're done. But then I want you to see it as well. Okay, maybe like this. Let's see. Okay, that's looking a little bit better. And now we can style the unordered list. Now this is going to be a tricky one because I want everything to be next to each other. First of all, I want to have a scroll. Now, if we add a few more elements, obviously, I want to have a scroll just so we can see all the other buttons. So to do this, it's actually not so bad. Let's give a class name to the unordered list. So this is going to be a flex element. So everything stacks next to each other. And then we're going to have a little bit of a gap. So they're not touching each other with the elements and then padding on the X axis, which is up and down basically, it's going to be four. And the maximum width that I want to set for this is going to be small, which is usually, here it is, 384 pixels or 24 grams. So this is great. I also want to set the overflow of hidden so we get that nice scroll. And I could try, I'm not sure whether this is going to work. I didn't test it, but we could try snap always and then padding or four everywhere. And then text large. Now we do have padding X. So we might not need the padding of four. You know what? I'm going to remove this padding of X and just put padding for everywhere. Let's see how this looks. All right. This is actually looking pretty cool. It would be nice to add a few more buttons. So I'm just going to copy this and it doesn't really matter. So it's going to be home about contact work, whatever. So we need, okay, this is perfect. But for some reason, the scroll is not working. So let's have a look at why is that. Oh, this is because instead of overflow hidden, we need to set it to auto. My fault. Let's go back. And now, as you can see, you might be able to see the little scroll back here. But if I do this, and this is going to work quite well mobile, I think. And obviously, this is too small. But if I do this, you'll see that this is working quite well. Like so. And if we go back to desktop, you will see that everything is looking good. The only thing that I just noticed is that on mobile, the button on the logo a little bit smaller than what I would like. So maybe we could give him a little bit of padding on both. Let's have a look. So maybe we can just do padding Y on the logo. And that would probably push the container. Yeah, that's a little bit better now. A little bit easier to press. And we have the logo working and so on. Obviously, I don't want this color here. That was just for the example. So let's get rid of it. And this was on the actual navigation here. And remove it. Now, one thing that I'm going to do is on the action navigation, sorry, header here, I want to add a background color of white, which I've already done. But on the actual page of our website, I'm going to change the color to a creamy one. In order to do this, we can go to the Explorer and then click on index.css and add a body color somewhere around here. So after this, we can do body. And then inside here, I'm just going to do background color of hash faf4f0, which is a very nice creamy color. Of course, I could have imported a color from Terwin CSS, but I don't know which one it is. I'm going to leave it as it is. As you can see, we have a little bit of a contrast now. The header is looking nice. The buttons are working. If I click on contact, it goes to. It goes to content, which I need to change. So content needs to be contact, silly mistake. And then we can just click on about and home. And as you can see, the page actually changes, which is great. I'm going to remove the work one because I won't need it. Let's have a look. So the work list is not required. So we have home, about, and then contact. Save. Perfect. All right. The last thing that I wanted to show you for the header is how we can add a active class for each button. So if you're on about, I want to indicate that we're on the about page and so on. So in order to do this, this is why we used the nav link instead of a normal link. So this actually has the functionality to add class names when a route is active. And we can basically add a class to each individual link. So what I mean, but this is at the top of our page here, let's add a little bit of JavaScript. So what I'm going to do is create a const and then we can do active class name. And then we can maybe do text red. I think that should be okay to start with. And now if we go down to the nav link, for example, let's start with this one on the actual nav, we can put class name. And inside here, we can do another function that is going to check whether this nav link is active. So this comes from the react router DOM. And you can read it a little bit more about it if you wish. But the way to do it is you put is active. And then this is going to be another function. And inside here is where we can do the logic. So we can check if active is equals to true. So is active is equals to true. We can add the active class name that we've added here. So this is going to be text red. And you don't have to do it this way. You can potentially write your styles in here. But I'm going to do this way because I'm going to be adding a lot more styles. So if it's active is true, we want to add the active class name that I've written above. And if it's not, we just want to set it to undefined. Like so, let's have a look, save this. And let's go to home. And nothing happened. So I wonder whether this added the class name. Okay, this has added text red. And I believe that maybe it's my fault. Maybe text red doesn't exist. Text color, let me have a look. Let's just say, okay, let's just say text rows. So maybe this is my fault. Look, okay, text rows 600. And if we go back, you will see that home is now active. And if I was to click on about the about is not. And this is because I actually didn't add it. So what I'm going to have to do is copy this for the other links. So let's copy this. Yep, that's it. And then put in here and put it in here, save. Okay. So as you can see, we are on about here. And then this is active, we go on the home and this is active as well. So I'm actually going to add a little bit of a better style into this to make a little bit more interesting. All right, instead of adding a text row 600, I want to add an asterisk on top of every single link and style that a little bit in order to do this, what we can do is add a set of element, which is going to be before and we can add a custom content into it. What I want to do is add a little old school star. So what we can do is first of all make sure that our element is relative. And then we can position the pseudo element insider to be absolute. So let's start with positioning relative. Then we can create the pseudo class before or you can use after whatever you wish. And then you can do content dash and inside here is where we add the custom content. So you can type whatever you wish in here. I'm just going to add a an asterisk to make it look old school. So to position it at the top I'm going to do before dash top and then four and then to position it in the middle of the link, I'm going to cheat and do before and then do left dash one of a second, which is going to put it almost in the middle. Obviously the star has a little bit of a width, which we can adjust with a negative margin. I'm just going to move it and then we can do before dash negative margin left minus one is where we can reposition the star a little bit to the left and then we're going to do before set it to absolute. And then last but not least, let's change the color of the before element by doing before text amber, which is a yellowish text and that's 400. Let's save this and let's have a look. All right, as you can see, we have the star here, it's on top of home. If we click about, we have it here as well. And so on. Now let's continue and create the hero. Okay, let's close everything. So save the header, save the index dot CSS and so on. I'm actually going to leave this open because we're going to have to insert one more image and I'm going to go to the explorer and then open the pages and then homepage home.jsx. Open this and we can focus on building this now. I'm going to leave this diff inside the way it is. So what I'm going to do for this here is I'm going to start by adding a little bit of border. So border black and let's give it a border on the X axis, which is left and right of dash two. So for the hero section, I'm going to wrap everything into a section like so. And then we're going to have all of the elements in here inside the section. I want to add a container that is going to be in the middle of the page and is going to act as a grid for or text an image. So in order to do this, let's create a diff and close it. For this diff, let's give it a class name on off container. And let's make sure that is positioned in the middle by doing margin X on the X axis to auto. And we could give it a little bit of a gap between the two columns that we're going to have of eight. And also for mobile, I want to have a little bit of padding left and right of four. And this needs to be flex because we're going to have columns on mobile. So they're going to stack. I'm going to show you now. Let's go and we show you we're going to have two diffs here. So this is going to be diff one, this is going to be image. And then the next one is going to be diff with the text. So let me show you what's happening already. We have a little bit of padding on the left and right. This flex is converted into columns. So we have them stacking. We have the gap between them as you can see, which is great. But when I go up on desktop, I want the image to be on the right side. And I want the text to be on the left side. Now, in order to do this, we need to convert this into a row, I believe. So if we go back, we can put instead of where is it instead of flex column, we can do medium screens, flex row, save this, let's go back. And as you can see, image is now on the left side, text is now on the right side, because we're using flex. And I want each row and column to take equal width of the page. In order to do this, we can do class name. And then we can do medium, flex, medium flex of one. And we can do exactly the same thing for the text. So I'm going to copy this. And let's see what happens. So as you can see, now we the image is taking this available space on the left side, and the text is available, the rest of the available space. And this is already looking good. In order to swap the order on desktop, as you can see on mobile, we absolutely fine with the image, then we have the text. But on desktop, I want to swap the order. And in order to do this, we can go back. Let's say on the image here, we can do on medium screens, I want to change the order. And I want the order to be two. So because we are setting the order to be two on this element, we don't really need to specify anything on this one here, just saving a few characters again. So let's have a look. We have the text on the left side, and we have on the image on the right side. Now, when I start adding the element, everything is going to make a lot more sense. But I wanted to style it before it gets too complex. Now, let's start with the image, put image, let's remove this, and let's do this properly. So of course, we're gonna have a hero image that we need to add, we need to import the images. And if we go back to the assets, close everything. And then if you open the index.js, this is where all images are going to be stored. And we need to add them and explore them. Let's look into the ones that we need. And they're called hero, large, hero, medium, and hero, small. But we need to fill them. Okay, let's do that. Import. And I'm going to call this one hero, small like so, from and then dot slash hero dash small dot JPEG. Then I'm going to duplicate this twice more. And I'm going to do medium for this one, MD. And I believe I call the MD as well. And then for the last one, I'm just going to put this as LG or large and LG large. And now we need to explore those images just like we did with the layer. I'm going to put this on another line because it's going to get messy in a second. So what I'm going to do is hero, small, oops, then hero, medium, and then hero, large. If we inserted the images successfully and exist, we shouldn't be getting any errors in the terminal. As you can see, okay, so we're getting this error. And I believe that this is because the import here in the index.tss file needs to be moved to the top like so and save. And the error is gone. So from time to time, make sure that you check your command line. I usually do have it open, but because I'm trying to save a little space, it's kind of like getting away. So I'm going to close it. Okay, so it's so good. We've added the images and there is no errors, which is great. And now we need to import those images into a homepage, just like we did in our header. So where is it? Inside the header, we imported a logo from the assets, we need to do exactly the same thing. So let's go back to the com.jsx and import the images. So inside here, we're going to do import, curly bracket, and I need to import hero, small, hero, medium, hero, large. And this needs to be from, and then we need to put dot, dot slash, dot, dot slash to go back to assets. And then that's it. Actually, we don't need to specify anything else because this picks up the index.js file. And now hopefully we should be able to grab those images. So let's try one here, save it. And as you can see, we have the source here, which is great. So what I'm going to do is I'm actually going to use the instead of an image, I'm going to use the picture HTML5 element, just because this is probably the right way of doing it. And the reason for this is because of performance. And also, you can be really creative with this. And I'm going to show you why. Well, I'm not going to be super creative, but I'm going to show you how you can be creative. What I mean by this is let's start by writing a picture element. Inside the picture element, we're going to have three different sources. So source, closer. And then inside the source, we're going to have source set equals and then the hero small image to start with. This is the smallest one. We obviously need to give it a weight. So the weight for this one is three, six, three pixels height for this image is set to 222, I believe. And then we need to give it a media query. So media equals. And then this is going to only going to work for maximum width of 400 pixels. So this is a smaller image for mobile. So it loads faster. Can I move this just for now? I'm going to move it to the left so you can see. And then we'll start it later. And last thing that I forgot to do is to add a type type. It's going to be equals image. And then JPEG, I believe. Oh, we have the source open like this. But actually, we don't need to open it with another source. We just need to close this one here that makes sense with slash. So let's add the other two sources. And in order to do this, I'm going to copy this one here and paste it. So this is going to be hero medium. And for the last one, the way the picture works is we need to have like a default image. So IMG source in this case is going to be zero large like so. We need to give it a width. Oh, I need to change the width for the other ones as well. And I'm going to do this in a second. So this is going to be a width of 870 870 pixels. And the height is going to be set to five, three, two. And then the odds is going to be equals mean, working hard on a computer. And then close this. Now let's update the width for this one. It's going to be 608. And the height for this one is going to be three, seven, two. Perfect. If I save this, let's go back to the website and refresh. Okay, here it is. The image is on the right side of the column. When we go down, it scales nicely. And then it goes to the top here, which is exactly what I want. Now you might be wondering, like, how do you know if the images are changing and what we can do? I mean, if I go to the assets folder here that I have the images open, so the small one is this one here. So I'm going to open this in paint. It is paint. And I'm going to drag this image here. And I'm going to write with red letters s m a small and save it. So if I was to go back to the website, refresh, and you will see small, but if I go up, it disappears. And that's how this works. And earlier, I promised you that this could be a little bit more creative. And what I was thinking of is that you can make something fun where, like, you're looking down the screen, or when you are up on this, you can look left towards the text and so on. You can do a lot of creative stuff with this. So you have free images on your disposal here. And you can do whatever you wish. It's faster to load, obviously, because this is a tiny image that is being compressed and so much more. And that's it. So now that we have this done, let's focus on some of the styling. I'm going to remove this actually, Ctrl and Z and save it. Let's go back. One thing that I've noticed is that the image is right close to the top. So what I'm going to do is on the section here, I'm going to add a couple of classes with like a little bit of padding. So padding Y of 10, then large screens. I want padding Y to be 36. And then Excel screens. I want padding Y to be 48. Let's have a look how this ends. This is like a very large screen. But if we go down a little bit, you will see that the padding changes, which is great and mobile is looking good. And one thing that we could do is to ensure that our text and image is always in the middle, we could go back to this container class and do that in here. So we could potentially just do item center because this is a flex item center. Let's have a look. Okay, item center puts everything in the middle, which means that when we add more elements to the image, for example, we could add social media, I can see all text, everything is going to be always in the middle, which is exactly what I want. So now let's remove this and let's focus on the actual picture and add some cool styling to it. So for this, I'm going to put a class name here. Let's give the picture element a nice drop shadow. And to do this, we can do drop shadow dash. And then inside here, this is going to be a custom drop shadow. So we can do 10 pixels underscore minus 10 pixels underscore zero. We don't have to put pixels on zero because it's zero. And then underscore RGBA. And then we put the color, which is a yellow color in this case, 250, 204, 211. Save this. Let's go back to the website. And as you can see, we have a really cool, nice yellow drop shadow. And now I'm going to start the image a little bit further. Let's go to another line here. Let's do border black and then border, sorry, rounded. TL stands for top left radius. And then this is going to be a custom one. So we can do 150 pixels. And then I'm going to do again, rounded. And this is going to be bottom right. And this is going to be 150 pixels one more time. And then for the rest, I think that we can do rounded dash XL. It doesn't seem to pop up. Rounder dash XL. Yeah, that's correct. And then we can put the overflow hidden like so. So we don't have any edges or anything like that. And I think that's pretty much it. So let's save this. Let's have a look. And I believe that this is not working because the image might be like an inline element. So we need to either display as flex or block something like this. So I'm going to put flex like so and attempt. All right, as you can see, this is looking pretty cool now. Or image is looking awesome. Now we can focus on the text here on the left side. So for the text, what I can do is let's add it is up a little bit. So and let's go back to the second column here, which is text. So inside here is where we're going to be adding for nice text inside here. Let's start by writing an h2 tag. And this is going to just say hi with a wavy hand. So I'm going to insert an emoji here, this wavy hand. And then I'm going to say I ready like so. And let's style this. So this is going to have a class name of text large. The large text is around 18 pixels. I believe. Yep, that's it. And that's 1.125 REM. If you're wondering, and then for this, I'm going to do whoops inside here, I'm going to do the medium text to be text extra large and then font both. And I want this to be uppercase as well. Save this. And let's have a look. That's already looking pretty nice. Add an h1, which is going to say developer dot. And then I'm going to say content creator. Now for this, I actually want to make the dots different colors just to make it a little bit more interesting. So what I could do is wrap them in individual spans or m's, whatever you prefer. And then inside here, I'm going to put a class name. And this is going to have a text of yellow dash 400. I'm going to do the same for the other dot. So I'm going to copy this and replace the other dot. And instead of yellow, I'm going to put pilot. And then this is going to be 900 instead. Let's style the h1 now. Let's give it a class name. And this is going to have a text of four Excel, which is fairly big text. And for the large screens, we need the text to be even larger. So five XL and then for larger screens, we need the text to be even larger. Seven Excel and then font both to make it a little bit nicer. And then I'm going to put a little bit of margin to the bottom, which is going to be four look. So this is already looking good, but something is broken. So I want content created to be on another line. And I'm going to use a little bit of dirty HTML in here. So I'm just going to do a VR and close it. But this should put the elements on the line. So that's already looking nice. And the next thing that I wanted to do is add a little bit of paragraph about me. So under the h1 here, let's put a paragraph tag. And inside this paragraph tag, I'm going to write something super quickly. And feel free to copy it and remix it for your own needs. Let's take this and let's have a look. So it doesn't look very nice so far. I want to make the text a little bit bigger. And I want to constrain the width of it. Two things. Let's give it a class name here. And let's give it a text of large. So it's a little bit nicer to read. Let's give it a max weight of Excel, which is 576 pixels and margin bottom of six. So we push the rest of the content. So that's looking nice. Now we need the buttons. And the first button is going to be selected work. And the second button is going to be, whoops. And the second button is going to be let's talk. This button is actually going to be a little bit different because it's going to go to the next section of the website, which is where we have the selected work. Now this is a little bit of a problem because we're going to have to insert a hash link instead. Let's go back to the top and inside here below react is where we're going to have to insert link as well actually. So let's do import. And then we can do link. And then we can do from react router DOM. And then for the other one, we can do import hash link. So this is a link that you press and the page goes down. And we can do from react router, hash link, but we don't actually have this installed. So I'm going to have to install this. Okay, let's grab this and let's go to the terminal. And where Node.js is we can do control and C to stop it. And let's do MPM, I and then base react router, hash link. Perfect. Now that we have this installed, it should be good to go and we should be able to use it. We need to do MPM, run there again. So our website is running. Perfect. Let me minimize this. And now let me show you how we can use the hash link. So just like the other links, you can wrap this selected work into a hash link this time, like so open and close it, wrap the selected work like so, and we should be good to go. We need to give it a destination here, which is going to be hash, for example, work. And down below, we're going to have to create a diff with an ID of work. So when we click on this button, it scrolls down, which we're going to do in a minute. We definitely need to link this one as well, this button. So I'm going to do link like so, just like a normal link and give it a destination as well of two. And this one is going to be the contact page slash contact. I actually want a little bit of space between them. And I want them to stack next to each other. To do this, we can wrap them into a diff and grab it super quickly, like so, push everything inside. So this diff is going to be a flex and it's going to have items of baseline. And then we can have a gap of four between them. For the actual link here, we can do a class name of padding to the X axis of six, padding to the Y axis of four. Let's give it a little bit of rounded corners to MD. We can give it a background color of teal 600. And then hover of background teal, maybe like 700. Also, because we made the background teal, we need to convert the text to white. So let's do text dash white, like so, and save. All right, this is looking good. We have the spacing between them. And now we need to do the let's talk button. I'm actually going to grab the SVG from hero icons. It's going to be this one here again. I'm going to grab this and paste there underneath. Let's talk, have a look. That's looking good. I just need to style it a little bit. Let's do class name. That doesn't look very good. Okay, that's a little better now. And for the class name, let's say that we want padding X to be six, padding Y to be four, rounded to be MD, text black on this one. And then flex, we do need flex so we can have the icon next to let's talk and then gap off to between them. Let's have a look at this work. And that absolutely fine. The reason I did the baseline thing is because if you go to flex help, for example, as default aligned items are set to stretch. So this could mess up with the buttons and basically put them to baseline. So they all look nicely aligned. So this is pretty much it for the hero section. This is desktop. We go down a little bit nicely shrinks in, then we go to like tablet mode. It looks really nice. And then we go to smaller version and then even smaller, which is mobiles. And this is looking really, really nice in my opinion. So I'm going to leave it and continue with the rest. One thing that I totally forgot to show you is how to change the title of the website. In order to do this, go back to Visual Studio Code Explorer and find the index.html file that is outside the source folder. And then from here, you can change it to Radies or Folio, something like this. And then the title will change, which is great. Now the next thing that I want to focus on is the little marky scroller that we're going to have in here. Let's go back and let's close everything. We don't need the assets. We don't need the, okay. We're going to need home in a second, but everything else can be closed. So inside, inside source component is where I'm going to create a brand new component. And maybe we can call this one scroller. So scroller.jsx and put a scroller. We're going to do rfce and change the title to be, sorry, the functions to be with capital S and the export default to be with capital S. So I want to include this in our homepage. In order to do this, we can go back to the homepage. And at the top here, we can import it. So let's do import and then we can do scroller or something like that. And then from dot, dot, dot, dot to go to the components folder and then scroller. Then we can include this into our HTML here at the bottom of the section on the hero section. So I'm going to do scroller like so and self close it. If we go back to the website, you will see that we get in the scroller. And if I was to change the text from the scroller component to one, to three, you should automatically change as you can see, which is great. And for this, I'm actually going to be using a tool called rect fast marquee. Let me show you. Originally I was going to do this manually, but this is so good. And it's so easy to use that it's really worth exploring. It has a lot of settings that you can use. And it's very, very easy to use. I'm going to go back to vgstd code, open the terminal and actually stop the Node.js one here. So I'm going to do control and see to terminate the job. And then let's do npm install, react fast marquee. And then that's safe. This should take a second. And now that we have an installed, we need to include it into or scroller.js. I'm going to start the website again by doing double up and do npm run dev. Now, this is good. Let's close this and let's include the marquee. Now we can do import marquee from and then react fast marquee. In order to use this, literally we just grab it and insert it inside here. This is going to be marquee like so. And inside here is where we paste the text. Let's have a look at what this does. As you can see, I'm not sure if you can see a little bit. Oh, here it is. There is a little bit of a gradient going on. But this is how simple it was to get started with this. So obviously I'm going to modify make it look nice. And I also want this to be a link to the contact page. So in order for us to have a link in here, we need to import it import link from and then we do react router down like so. So I can wrap this marquee into its own link, wrap it super quickly. Okay. And also instead of a div, I want to wrap this into a section just so it's a little more HTML5 like section, section and that's it for the link. We need to have a destination. So this is going to be two and we can put the destination here to be contact. Later on, I can show you actually how we can make it custom. But let's first of all style it and I'll show you what I mean. We can have custom properties for each individual thing for the marquee. Let's give it a little bit of a class name and let's do a background of yellow 300 border top to be two border black padding to the y axis to be two and then font both to make the text a little bit bigger. I can do text for Excel and that's pretty much it. Let's have a look. Oh, this is looking nice. Obviously, I don't want this gradient. So I'm definitely going to move that on the marquee here. What we can do is do gradient and then put this to false. And also I want on hover the marquee to actually stop. So there is a pause on hover option here that we can use. And that's it. Now let's add something cool like a text that actually looks good. So what I'm going to do, let's add an emoji in here. And the one I want is the stars. And then I can put something like and I can put something like let's get to work. And then we can put whoops, and then we can put another emoji in here and we can say have a project in mind. Let's save this and let's have a look. Okay, this is all looking good. What I could do is copy and paste the text a few more times. And this is going to be fully scrollable, which I'm going to show you in a second. But before we do that, I actually want to be able to pass custom properties from here to the scroller. If I want to reuse the scroller on other pages and change the text, I want this to be a little bit more customizable. So let me show you how we can do this in order to be able to pass custom properties. Whoops, go to the home.js X and inside here, literally, we can start typing the properties that we want to pass. For example, I want to pass a text property. And this is where the text is going to go. For example, we might want to change the link. So maybe we can put link equals and then the actual link, which is going to be contact in most cases, I guess. So this is where we're going to put a little bit of text test. Let's have a look. Obviously, this is not going to work just yet. I'm going to copy this just so I have it. But in order to grab those properties from here to the scroller, all we need to do is to destructure them inside here inside the scroller, like so. So the properties were text and link. So now I should be able to use them inside here. So two can become a link. And then the text can become in curly brackets, text, okay. Hopefully, as you can see, we have test. If we go back to home and test 123, you will see that test 123 is working. And I copied the text that we created earlier just so I can paste it. So I might paste this a couple of more times, like so. And maybe that should be absolutely fine. Okay, maybe one more time I need to paste it and that would fill the whole screen. Or I can just do view world wrap. And that would fix the job. Okay, one more paste. And hopefully, as you can see, this is looking so the reason I didn't put border at the bottom is because the actual section that I'm going to add next is going to have that border. I want to make everything as reusable as possible. And with that said, if we go back to, if we go down to mobile, you will see that this is looking pretty cool. You can obviously make the text smaller if you wish to, but I think this is pretty cool. And now the next section that we need to create is the selected work. All right, the next section that we need to do is going to be the selected work. And this is going to be inside our homepage. So if we jump back in into the source pages and home, after the marquee here, the scroller, we can start creating another section. This section is going to be or directed work section. So I'm going to make some space just so we can see the code clearly. And what I'm going to do is create another section. Now this section will have an ID of work, just because if you remember, we hash linked this button here to go to the work section, which we're going to create now. So if I give it an ID here, and let's just tap on to three, I'm not sure whether there'll be enough scroll, but if I click on it, you see that it did go down, but there isn't enough scroll. So maybe I can just give it a class name super quickly, just to show you of padding, padding Y or 48 or something. And that gives a little bit more padding. So now if I click on this, it jumps down to the portfolio section that we're going to create now. And one thing that I noticed is that the scroll jumps straight away. And what we can do is add a smooth scroll. In order to do this, we can go back to the, we can go back to the styles. Let's go to Explorer and then index dot SCSS. And inside here where the body is actually, we can apply it to the HTML. So what I'm going to do is HTML and apply, apply a tailwind CSS class, which is scroll dash smooth, save this. And let's go back. And if we click on the selected work now, you will see that the scroll is much nicer. So this is pretty cool. Let's concentrate on the section now. I'm going to close the index dot CSS, close everything else. And let's have a look at what we have in here. I'm going to start by adding some classes. So for example, let's add some padding to the X. So we have a little bit of padding. So padding X, padding bottom of 12. Then we're going to do border black, border top of two pixels. And then let's add a little bit of background color to this. So I'm going to do background teal of 600. And then I'm going to put a background fix because I'm going to add a background to this section that is going to be fixed. So when we scroll down, the background is going to stay in the same position and give us a really cool effect. Now in order to add the image, I'm going to have to do a style in here. And this is going to be equals curly brackets. And in double curly brackets, we can do background image, background image like so. And then inside here, we can put the URL, double quotes, that's fine. And then we need to close double quotes. And it is correct. We need to close double quotes like so to curly brackets. Yeah, that's cool. And inside here, we just need to put two pluses. And inside here, we can add or background image. But first of all, we need to include that jump back into assets, go to index and inside here, we need to find the pattern. So portfolio pattern dash SVG. And I'm just going to copy this line here, but in all shifting down. And then I'm going to call this one portfolio pattern. And the image is under portfolio dash pattern dot SVG. And now we need to export this so we can use it. Now we also need to import this into our homepage. At the top, for example, we can do assets and we can just do comma portfolio pattern. And now we can use it. So if we scroll down to where we are in the background, I can literally just paste it in here. And hopefully that will work for us. Now we're not going to have much content to see it. But what I'm going to do is put some BRs and just like literally copy a few of them. Okay, as you can see, this is the really cool background. Originally I made a better one, but it was too big. So I had to scale it down and simplify. In fact, that's around 50 kilobytes, which is probably too big as well. But it looks cool. Now one thing that I'm noticing is that the border doesn't seem to be working at the top. So let me quickly see what's going on. We have border black and we have Oh, I've put border top. So border T is border top. And that should now work. Right. The border top is now working, which is perfect. And we can start adding some of the elements. The first thing I'm going to do is add the titles. But before we do that, I want this to be in the middle, just like we have this section. I don't want it to be full width. I want it to be in the middle. All right, let's create a div. And for this div, we're going to have a class name of container on MX auto to center align it. So inside here is where we're going to be adding all of the element starting with the title of the section. I'm actually going to wrap the title and the paragraph inside his own diff. Let's do that. Div with a class name of text white text center, and then padding to the y axis of 12. So inside here, we can then add or h1 tag, which is going to say something like selected work. Of course, I want to make this a little bit bigger. As you can see, this is h1 in this tiny. Basically, I want to make the selected work title pretty much the same as this one, the behavior of this one. So that pretty much two ways of doing it the manual job. So if I find the h1, which is here, I can copy this and paste it inside here for the h1. And that will work absolutely fine. As you can see, it looks beautiful. And if I scroll down the website, it scares down just like this one. Let's add a little bit of a paragraph here explaining what's going on. So I'm going to do a paragraph. And this paragraph is going to have a class name of max width of Excel. I want it in the middle. So mx auto add in text set to large. Inside here, I'm going to write some nice texts that again, you can copy and remix if you wish to. So I'm going to say I've been developing websites for a while, but I also equally enjoy creating other digital products. Cool. Let's have a look. That's looking good. For some reason it's not in the middle here. And this is because I have max auto instead of m margin x auto. And here we go. Now we have everything in the middle. And what I'm going to do actually, because it's really hard to see, I'm going to create another section and just give it a lot of padding. So I'm going to do section closer and then just give it a give it a class name of padding, why 48 or something like this. Okay. And now we have a little bit more scroll so we can see what's going on. And now the next bit that we need to do is or portfolio. So for this, what I'm going to do is split the portfolio into two columns. So we're going to have one in here on the left side and one on the right side. In order to do this, let's go underneath the text stuff here. And I'm going to create a grid. When I make some space and inside here, I'm going to do a div with the class name of grid. And this grid on medium screens is going to go grid with co co's of two. So on small screens, I want every single grid to stack, but on bigger screens, I want them to be two columns. And then we can put delivery of a gap like eight and margin bottom to be 28. So inside here, I want to loop through a list of portfolio items. In order to do this, we're going to have to create a data file just so we can pull out the data that loops from here. All right, let's do that. Let's go back to the explorer and maybe outside, outside everything, maybe around here, we can just add a new file called data.js. And inside this file is where we're going to be adding the portfolio items in an array that can be reused. So what I'm going to do inside the data, let's do export and we can do const portfolio data like so. And this is going to be an object like so. And inside here is where we're going to put each individual data. So for example, we can have a title and let's say Radis brand, then comma, we can have thumbnail. And then we can put the image in here that I'm going to pull right now. And then we can have a note for the images. And then this can be something like a photo, a photo showcasing branding where that is ready. What's going on in here? We need a comma. That's why put commas after every single bit. Then we can have a category maybe. And then this is going to be branding. And then last but not least, we can have a link that is going to go to a specific place. So I'm just going to put hash just so we don't have a broken link there and leave it as this. So what I'm going to have to do is import some of the thumbnails and I'm going to duplicate this a couple of more times just so we have a few more items. So I'm actually going to copy and paste them, but you can pause if you want. So I'm going to paste them in here and comma. So literally, I've copied this a couple of times. And we have the title thumbnail or category link and so on. For the Harley Davidson, which we're going to develop, I've actually put the link to work Harley Davidson, which we'll look in a second, but for the other ones, I'm not going to develop every single one. So for the other ones, I'll just keep it as it is. And as you can see in here, I already prepared some variable names for the thumbnails. So I have one, two, three and four. So we need to do this as well. Let me put it in here. And now we might be wondering when where they're coming from. Well, we need to actually add them. So we need to import them. We need to import them from all assets. So I'm going to from from and then we can do dot assets like so. And that should be good enough. Now we need to include those assets inside or index.js, like we always do. And let's go down here. And maybe I can duplicate this and we can start from here. So we can do portfolio one. And then I can put the image which should be called portfolio dash one dot jpeg. Okay. And now I can duplicate this a few more times and just change this to two, three and four. And the same way here, two, three and four. Now we need to export those imports. So let's do that. I'm gonna copy this and put a comma here, one, two, three, four. Okay, let's change them to three, four. And now I copy them. And now we can insert them into our data.js file in here. Like so we import in portfolio one, two, three and four. And now they can be used inside or data. By the way, you can create more data objects like this. So we need to do is export cons, give it a name, and you can create objects the way you want. And now let's have a look at how we can loop through this data. So portfolio data is what we're exporting, which means that we need to import it into our home dot jsx. If you go to the top inside here, we can do import. And then in curly brackets, we can do portfolio data. And then we do dot dot dot dot to go backwards. And we do data. That's all we need to choose. And now we should be able to use this portfolio data object to loop through the details. Let me show you to scroll down inside here, we can loop through it by using map. So in order to do this, in curly brackets, we can use the object and then put map. And then inside here, we can use the item as a keyword. And then we can have an index. Then this is going to be an arrow function like so. And then inside here is where we can start rendering stuff. So for example, item, and if you go back to the data, we have item title thumbnail or category and link. So let's try to render the title item dot title. And that is not looking good because I think that we need to wrap everything into a diff. So let's wrap everything into a diff. And as you can see, the squiggly brackets are now gone. And let's go back to the website. I cannot see anything. Did I save, save, save? Okay. So I didn't save the data. And that's why, but now that it's saved, you can see Radish brand, Oakley, Harley Davidson and head. And they are all into different columns because we have grid with grid calls to when we're on larger screens. But if I go down, you will see that they should stack. Here we go. They're stacking now, which is great. Right now that we're getting the data, we can actually start styling these things and making them look a little bit nicer than they are right now. I wanted to mention that this index is important because if we don't put index on diff here on our list with items, we might get an error. If I get, if I go to the terminal and open inside here, potentially you might get an error asking you for key. I'm not sure if this is, let me rerun it, maybe. But usually this comes up and you need to add a key to the element here to the list. Each list inside here is going to be a link. We've already included the link early in this tutorial. Here it is from React, router DOM. So I can wrap everything, where is it? Everything inside here as a link. Now this link is going to have a two and this is going to be two item.link. So what I'm using is this as a keyword, which you can change to whatever you like. You can call it portfolio. And then it's going to become portfolio.link, portfolio.title. But usually it's just a standard thing to put it as item. Now let's put a key to this and we need to put the key to be index, like so. And that's it. Now the link, as you know, it's coming from the data and it's coming from here. So if we hover over the Harley Davidson, we should be able to see work Harley Davidson. And we have an error. Okay, we have a closing tag link. Yep, that's correct. And it's because I opened the link here and I did not close it. Let me close it, save this and let's go back to the portfolio. Hover over the Harley link here at the bottom left corner, you will see that it's working and the other ones are just empty for now because I'm not going to be linking them. All right, let's style this now. So I'm going to do here on another line so you can see a little bit better. But what we need to do on medium screens, I want each even item to have a padding of top 12. And you see why it's just going to make the portfolio look a little bit nicer. We can have a hover effect. So for this, maybe we can have an easy out animation. So let's say is in out and then duration can be 75, which is the fastest one. And then for the hover, we can say translate dash Y and then this is going to be minus. This is so hard to see minus. And then I can do a custom one, which is going to be minus four pixels. And then we can have hover, drop, shadow. And then this drop shadow is going to be custom as well. So I'm going to say 10 pixels underscore eight pixels underscore zero. And then RGBA is going to be black. So this is going to be zero, zero, common, zero, zero, one. That's it. If I go back, it's going to look a little bit ugly. But as you can see, the hardware is working, which is great. And now we can start the rest of the stuff. So for the image, I'm going to make a little bit of space in here. And let's add in another diff inside this diff is where I'm going to add the image. And then this is going to have the source of oops, in curly brackets item. And then thumbnail, like so the old for this, which we've already prepared in the data sheet there is going to be oops is going to be is going to be item dot old. And then we can have loading equals lazy as this image is not on the initial view screen, you have to scroll down to see we can add loading lazy, which is good for speed. Now we need to close this image and style the div a little bit. If I save it just so you see how it looks like, they're just like random squares and they don't look very good. So on every even item here, we add in a little bit of padding, as you can see here middle, even padding top 12, let's style the image a little bit. What I mean by image is I mean the outer depth of the image. So class name, let's give it a border first or border of two, border dash black, and then we can do rounded Excel, which gives it the rounded edges. And of course, when we do rounded corners, we have to do the overflow hidden. And then maybe we can give it a background of black just in case, that's probably not necessary. Let me move this to the left. So you can see, okay. So as you can see, this is already looking pretty cool. And the next section will be to add the rest of the details. So we have the link, we have the thumbnail, we need to add the title and the category. But this I'm going to create another diff. So inside here, let's create another diff. And this diff is going to have a class name or background white border dash x, which is to the x axis of two, border black, and then we can do border bottom only with 2v2. And again, I wanted to give it the rounded edges. So what I'm going to do is put rounded but I want to only give rounded edges to the bottom left corner here of Excel. And then I want to do the same for the right one. So rounded bottom, bottom right of Excel. But basically, this is bottom left and bottom right. And then after this, we can do mx margin x or four padding or four everywhere, text large. And because I'm going to be adding an arrow here as well, I'm going to have the title and the category on the left side and another on the right side. I'm going to have to split them and position them with flex. So to do this, what I'm going to do is flex justify between and you'll see what's going to happen in a second. And we need to give it a little bit of a gap of four, and maybe items center, so they're in the center of the box. So you will see what's happened, what's going to happen right now. And inside here, I'm going to write the div which is going to contain the title and the category. So maybe we can put them in span, spans like this, so we can style them a little bit better. And inside here, we put the item dot title and we put another one. And this one is going to be item dot category like so. So let's give them a little bit of a starting class name is going to be font bold for the title. And then for the category, we can do class name of text dash zinc dash 400, which is like kind of like a gray color. As you can see here, we have the category. And I also want to have a dot between the title and the category. And to do this, we can make a little bit of a spacing here. And I can use the HTML character, which is ampersand hash nine, nine, six, seven, nine, I believe, and seven, nine, and closer. So this should give us a dot character. And if I go back, you will see the dot character here. And maybe I just need to put a little bit of space between the title like so. And that's already looking good. And yes, we do need to put the arrow here. And we need to remove this item dot title because it's looking odd. So for the arrow, I'm actually going to go back or I've closed it. So I'm actually going to copy this one here. Let's talk SVG. Here it is. I'm going to paste it underneath. Yeah. And because we have the flex justify between that should space them out like so. And if I go down to mobile, you will see that they're looking good. But then we start the whoops, the each image or element stacks underneath each other, which is really nice. The things are working. And if you have a longer text, I guess you can then further improve it and wrap around like so. I think this is pretty cool. So I'm going to leave as it is. And we have over effect. Now the last thing that I want to do in here is maybe another page that you can showcase more of your work. Maybe you can have a view or working here. And to do this, we need to add a link. So let me there is a lot going on. Let me have a look. So we have the grid of the portfolio here, loop in no props. And then after this diff is where we can add whatever we like. So inside here is where we can add all link to do this. I'm just going to put a link, put the link to and this is going to be, I guess this is going to be something like work. I'm not going to be making this page, but I'm going to leave it like so. And then obviously we need to close this link. And inside here, we can type a view or work. Of course, we could grab this SVG one more time to reuse it and make it look nice. And now we can style this link a little bit. Give it a class name super quickly or flex so they can be on one line. Give them a little bit of gap so they look good. Point, bold, maybe text of white and then justify center. And maybe we can give it a margin of bottom to be eight. So save this. It looks very messy. Okay, save this. Let's go back. And as you can see, we have your work. I'm not going to do a hover on this. And potentially we might need to make this a little bit bigger because it's kind of hard to see. Maybe, yeah, maybe this could be a little bit bigger. Where's the text text. So what's after large, we have extra large, maybe have a look. That's a little bit better. I'm not so sure whether this text needs to be white, but that's things that you can always improve on and make it work. With that said, we are done with the selected work section. And now we can move on to the next one, which is going to be the services for the services section. Again, this is not going to be reusable is going to be on our homepage. But of course, if you wish to split everything into components, feel free to do so. So these are the ones that are actually reusable and I'm going to be creating more reusable components as we go along. Same this again, let's jump back to the home and create a new section. And this section is going to have a class name of border black, border top of two, padding to the X of four and padding to the Y of 12. Inside here is where we're going to be adding the container. So let's do a diff of container. Like so. And this is going to far now. Okay, so this is going to be our container. And this needs to go in the middle. So MX auto, like so, let me test this super quickly one, two, three. And we have it in here, which is absolutely fine. Now one more time, I'm going to split the title into two sections. So this is going to be one. And then this is going to be the second sections, just like we did with the selected work. In fact, we can copy some of the selected work stuff from here, the whole bit can be copied and paste it inside here, inside the container. And this could be kind of like all title container. Perfect. It's to be done like so. Right. So instead of selected work, and instead of text white, we can remove this because the default text is black, we can remove it and that should just work. So instead of selected work, we can say services. I'm just going to leave this because just to save time, I'm going to leave the text as it is. And let's have a look at how it looks. Perfect. Services is done. And now we can start making it look nice. What I want to achieve with this is I want to list a couple of services on the left side, maybe two on the left side, two on the right side with a nice image in the middle, make a retro. So in order to do this, we're going to have to have three columns or maybe four actually, because I want the middle section to take more space. Let me show you what I mean. Inside the container, div and below this one here is where we're going to be adding it. I'm going to make a little bit of space just so you can see. And then let's start. Let's create a div. And this is going to have a class name of text black, adding to the y axis 12, we're going to convert it into a grid. And on live screens, I want this grid to have great cause of fall and items to be sent it. So they always look nice when we add more items, we're going to have a div on the left side. Left, we're going to have a div in the middle image. And then we're going to have a div to the right. At the moment, we go back, you will see that this is taking one column, this is taking another column, and this is taking one more. And I want the image to actually take two columns. Let me show you what it is. Here we go. And I want the image to actually take the second and third columns and then the right text to be on the right, the way to do this. First of all, the left one can be left alone. The middle one here with the image, we can give it a class name. So this is going to be a flex just because I want to justify everything to the center. And this is going to have a margin bottom of 12, margin bottom of 12. When we're mobile, I want a little bit of margin to the picture, you will see in a sec. On middle screens, I want the margin bottom to be gone. So zero. And I want this column to span between two. And now if we go back and see we have here on the left side, we have the left column, the image is using those two columns. And the right is using the right column, which is great. We don't have to do anything else. And on mobile, you will see that they're just stacking it underneath each other. And the image has a little bit of space just so it's not touching the right here. And we'll see how it goes. So let's start by adding the left section. So in order to do this, we can go to the left here and remove it, remove everything inside and we can focus on it now. Now there is no class name that I'm going to be adding to this. I'm just using this as a column inside here. I'm going to add an h3 tag for the titles. And this could be something like web design. Cool. Let's give this a class name. And this could be text, free Excel font, both and margin bottom of four. Let's give it a little bit of a description as well. So a paragraph and this paragraph can have a margin bottom of four and text can be large. I'm going to copy and paste a little bit of text. In fact, I think this is the same text as above. Didn't have time to do every single bit of text, but they should do the job. And then last but not least, what I want to do is add a read more link. So inside here, we can do link. And this link is going to be two. And potentially, you might want to link this to a page that explains a little bit more in web design. So you can do web design. I'm not going to be creating this page, but this is just for the example. And this link is going to have what we need to close the first of all, don't forget that. And we need to have a last name for this. That is flex, flex gap to items center on both margin bottom, 14 maybe, and then text large. So the reason I'm doing the flex and the gap thing is because I want to add another icon, which is the one that we reused everywhere. I'm going to copy the SVG and paste it inside here. And the flex box is going to push them to the side as you can see. Now this is looking nice. We can actually duplicate this and reuse it. So inside here is where we can copy this. And maybe let's do web development. I'm going to leave the text as this and the link can be obviously web development like so. And that's it. As you can see, this is already looking good. Now for the right side, again, I can literally just copy this twice. So here on the right, I can remove the right stuff and paste this. So we have one, maybe we can put this as branding branding. This can be branding. And then the last one that I'm going to paste inside here can be something like WordPress and then WordPress. Cool. Let's save this, tidy this up a little bit, save it and go back. As you can see, this is looking nice. We don't have an image yet, but I'm going to add it right now. And what I'm going to do inspect and just scale this down just so you can see how it looks. So we have the services title, web design, web development, a nice breakup image and then branding and WordPress. So for the image, oopsie, let's go back for the image. Let's include that. I need to figure out which image it was. First of all, to do this, we need to go back to the explorer assets and then we can do index.js. So inside here, we're going to copy one line and do services. And then the image that I want is going to be called services.jpeg. Cool. We need to export it. Let's do that. Services and we need to import it into the home.js at the top where the assets are, we can do another one services. And maybe we can move this to the bottom here just so if we need to, we can stack them in one line. If that makes sense. And now I can grab this and use the image. Go down, down, down where it says image here. I need to tidy this up a little bit. So and then inside this div is where we're going to be adding the image. I'm just going to do IMG. Source is going to be obviously services right now, services I offer. We also want to have the width, which I really don't know. We also want to have the height, which I really don't know as well. So I'm going to check it out in a second. And we also want to do loading equals lazy. Okay, let me put this to the side a little bit so you can see it. And I need to find out the services image, which is one, six, one, one, seven, six, four, six, one, one. Loading lazy. We have the old tag. Perfect. I think this should work. Let's have a look. And here is the image. It actually looks pretty cool, but I wanted to make it look like the rest of the design. So I'm going to start a little bit. We're going to be adding a couple of classes to the image class name. And let's put it on another line because you might get messy. Let's put a bit of a border to water black, rounded full, and then width, three, three fifths, which is 60%. And because we have text justify center, the image is just going to go in the center, which is good. And then let's give it a little bit of a drop shadow as well. And because this drop shadow is custom, we put it in brackets and we do 10 pixels underscore minus 10 pixels underscore zero. And because it's zero, if we don't put the pixels, then we do RGBA. And inside here, we put the color that we want. So 250, two or four, 21, and then one, I'm going to put this on another line. So you can see this should work. And if I put the image inside a little bit, perfect. Let me show you. All right, this is looking a little bit cooler, I think a little bit retro-ish. And now if we check this section super quickly, as you can see, this is looking awesome. All right, the next section should be fairly easy to do, which is the big let's get to work button here underneath. But I actually want to make this reusable because I'm going to be reusing it on other pages. So in order to do that, let's close pretty much everything. And I'm going to leave home for now. Obviously, this needs to be tidied up a little bit later. Yes, it looks like a complete mess underneath the last section that we've just done of services is where we're going to be adding the new one. Let me first of all create this component. Inside components, we need to create any file. And I'm just going to call it contact because I can't come up with a better name contact.jsx. And inside here, we do RFCE and enter. Let's change this to big C and this to big as well. And we should be good to go. So what I'm going to do now is import this into their homepage. And to do this, we've already done a couple of times. Let's go here to the top where we have, for example, the scroller. So I'm going to copy this and let's do contact and then components contact. So now I should be able to use this in my HTML. Let's go down. And here below the last section that we have is where I'm going to be adding. So with the contact and we close it. Okay, as you can see, we have the contact and now we can start styling it inside its actual component. So let's close the home.jsx here and focus on the contact.jsx component. As always, instead of a diff, I'm going to have this as a section. And inside this section is where everything is going to go. So let's start with the styling. This should be fairly simple, padding of X to be full background. I want this to be yellow. And the yellow is 300. If you want to have a hover effect, we can do hover. And then we can do background of maybe let's say black, because of the folder text is white, when we hover over and the background becomes black, we need to change the text as well. So what I'm going to do on hover, we need to set the text to white like so. And we need to make because this is going to be a large button, we can put this as cursor and then pointer. Also, let's give it the border of top to water black. And then is in out formation and the duration can be 150 this time, just so we can see a little bit better. And inside here is where we can add the link link. What I'm going to have to do is insert the link manually import link from and then this is react rather dumb like so. We can now use the link. This link is going to be to and then contact inside here is where we're going to write some stuff and make it look nice. So first of all, I'm going to wrap everything inside the link into a container. So we have the text in the middle to do this with the diff with the class name of container margin X auto gap, we can do this as flex potentially on medium screens. I want this to be flex so we can give it a gap of eight as well potentially and padding to the y axis to can be 24 pixels. You will see what's going to happen in a second. And the reason I'm doing the flex is because I want the text to be on the left side and I want to have an icon on the right side. So potentially we're going to have two columns in a way. And to do this with flex, we could create another diff with the class name of flex call and then item center to center everything inside here is where I'm going to be adding the hc which is going to say have a project in mind like so question mark and then we're going to have an h1 and the h1 is going to say let's get to work like so. So let's give him let's see what it looks like. As you can see we have the hover which is quite large but let's make them look a little bit better. So for the h2 let's give it a class name of text for excel for the h1 let's give it a text for excel then large screens I want text five excel which is slightly bigger and then larger screens we can do text seven excel and then bond both this this already looks pretty cool but I also want to add a little dot and I want to add an array to do this the dot we just add the dot here perfect for the arrow I'm actually going to put this into another column so we're going to have to do a div and this diff is going to have text large as we're going to be using an SVG in here we can actually make it a little bit larger by using text large which is great and potentially we could do font both so we need to grab the SVG one more time I'm going to copy and paste in here and save okay here it is it's looking pretty cool but also we need to finish the rest of the website and then I think it's going to look a little bit better if I was to go down mobile for this potentially we might have too much space maybe I'm not so sure when it looks okay yeah that's not too bad I'm going to leave it and concentrate on the next section which is going to be the footer now footer footer this is going to be a reusable component as well so what we're going to have to do is inside components we can literally pretty much copy the header to be honest and modify so what I'm going to do is copy click on the header wow there is a lot and in fact yes if we copy the header then we're copying the logo and then we can do links and so on I'm going to copy everything from the header and inside components I'm going to put footer.jsx like so and paste everything now there will be some modifications that we need to make let's start from the top instead of a header this is going to be footer instead of a header this is going to be footer as well we need to change the bottom and instead of the header here we do footer let's insert this into the home page which is on the pages home.jsx at the top here where we have the header somewhere can't see it oh it's because we don't insert the header in here we actually have the header inside the app.jsx here it is so we have the pages and the header so I'm going to duplicate this and put footer and we're going into components and grabbing the footer like so which means that we can grab the footer now and just like we have the header inside here we can put the footer inside the router so let's do footer close it and just like so this should work on all of our pages as you can see the footer is here but I did add a lot of space on the home page so if I go back to the home page which is here and remove that random spacer die at it earlier where is it here it is I did this up save it and then as you can see we have the footer okay so for the footer of course I'm going to modify a little bit so what I'm going to do instead is remove all of this let me see uh no let's come to trade on the footer and let's go to the this the navigation one so this was the center one and instead of navigation I'm going to remove everything from here and instead of navigation maybe we can just have it as div this time right and then we can just do I'm present copy for the copyright symbol and then I can do 2022 ready and then I'm going to copy a dot and do built with react js hosted on github potentially I'm not sure where I'm going to host it I'm not even sure if I'm going to host it but here we this save this and then if we look into this this is looking pretty nice and I'm pretty sure that we scale down the website it should just work one thing that I'm going to do is potentially put a little bit of padding and maybe centerline the text thing that would look nice so on this class here we can do padding of four and text center all right that's looking a lot better I really like it the only issue that I didn't think of is that we have two late let's talk buttons but anyways I like it so this seems to work as well bam it goes to contact we go to about and we go to come perfect our home page is actually finished and now we can concentrate on creating a very very very basic about this page and include some of the reusable components such as the marquee and potentially this button here all right let's focus on the about page we actually created the about page early in this tutorial just so we can test the routes and here it is on the pages and then about just to recap this is actually linked inside app.js and you can see it because I've included in here and then we are rendering in here inside routes so that's pretty much what we need to know and the about.js is basically another react function in here as you can see nothing special about it now that we have this working let's put one two three let's go back and as you can see we have about one two three we just need to style this a little bit and we're not gonna do anything super special here so let's start by looking into the styles okay let's remove this different here and create this section like so open close let's give it the usual class names so for this we're gonna have padding of y12 border dash x2 and then the border needs to be black that's pretty much it inside here is where we're gonna create a container so div with the class name of container and then this needs to be mx auto so it's in the middle let's add a little bit of padding to the left and right of four I'm gonna have this as grid and this grid we can give it a gap of eight between the two columns which you'll see in a second and then on large screens we can have the grid set to cause two if we close this and inside here if we write two divs so first one here and this can be my story and then the second div inside here is where we can add the image just to show you what's going on super quickly we have my story and we have image for some reason the container are probably misspelled let's have a look container okay yep it was misspelled so these two columns are working fine on desktop and if I go down you will see that they're stacking which is what I want I want the text to start first and then we have the image so the responsive web design is already done and we can just focus on styling this and adding some more elements so starting from top to bottom this is gonna be let's focus first of all on the first column here so this is gonna be an h1 tag and inside this h1 tag we have my story let's give it a class name of text for excel large is gonna be text five excel excel which means on extra large screens we're gonna have text seven excel and then font both and margin bottom to be nice now the next thing I want to do is add a little bit of a paragraph so I'm actually going to copy this because I don't know right basically what it says is hi I'm ready a web developer and content creator from Europe with over 10 years of experience in the tech industry I've worked for Google, Meta and Microsoft so feel free to modify this the way you want and then the next bit is gonna be another paragraph like so and feel free to remix it the way you want and then on the second paragraph here I want to say I mainly make videos about web development on YouTube these days which fits well with my educational background and interest in my free time I like to build indie products that make the world a better place obviously write your own story and the companies that you worked for this is just an example we need to style the paragraph so I'm gonna do class name of margin bottom to text, text large and then in fact I'm gonna copy this and paste it inside here and we should be good to go and this one is gonna need a little bit more margin because I might end up having some social media icons so let's have a look at what we get my story we get this and potentially I'm thinking of adding a few social media icons in here so to do this let's add another div and this div is just gonna say find me on and like so let me put in one line and then we can put a class name of text large and then font bold okay superb and inside here is where we can look through some social media icons quite a few icons so we're gonna have to go back to the images map inside assets and then index.js so what I'm gonna have to do is spend a few seconds doing this but obviously feel free to skip this section because they're quite a lot actually so for the icons what I'm gonna do is just start writing them in here and hopefully it will be super easy to do actually I'm only gonna be adding four so it's not a big deal so let's do import and then this is gonna be youtube and this is gonna be from and then we're gonna do dot icons and then youtube or svg I think this needs to be small youtube and I'm going to copy this a few more times so we have youtube twitter then we have github and last but not least we have discord let's add them as well to the list so I'm gonna do youtube twitter github and then discord perfect so we need to insert these icons into the about.jsx super quickly in fact I'm gonna copy them from here and inside here above here is where we need to import them so import and then we do the icons that I just copied youtube twitter github and discord okay and this needs to be from dot dot slash dot dot and then assets like so perfect all right and now we need to import these icons into maybe your data we can create another data for the social media stuff and then import it into about so what I'm gonna do inside data which is in source we have data dot jes is where I can create another object so let's go down I'm gonna copy this super quickly and let's go down and do export const and this time we're gonna do socials for the socials I'm gonna quickly show you what I'm gonna do and basically I'm gonna have name so here we can say youtube comma we can have icon follow we're gonna add the icon in a second and then we can do alt follow me on youtube and then last but not least we need the link so for the link we can just do https and then column slash slash youtube dot com and then the username of the youtube cool so we can definitely duplicate this a couple of times create a few more I've already created some so I'm gonna copy and paste them here but as you will see right now the format is exactly the same so I have github I have this code and I have twitter that's pretty much here and now we need to replace the icons so for youtube think we can do youtube but we need to insert the data from the index dot jes those ones needs to be inserted into the data so import comma insert all of them here and github doesn't seem to light up let's have a look github oh yeah I put github with capital letter which is fair enough I've changed enough and it works now we should be able to use this data inside all about dot jsx page if we include of course and to do this let's copy this social go back to the about dot jsx page and inside here we can do import and then we do socials space and from and inside here we do dot dot slash dot dot slash data and we should be good to go so potentially we should be able to live through the socials now and make them look nice so inside here find me on is where we can do the magic loop so for them I'm gonna wrap them inside a diff with the class name of margin bottom 8 and inside here I'm actually going to wrap everything into an unordered list like so an each list will be a link and so on in order to loop through the lists what we can do inside the URL first of all let's give it a class name of flex so they look nice and gap of six so they're gonna be in one row all of them so inside here is where we can do the magic loop to do this just like before we do socials dot map and inside the map we can index sorry item for the keyword that we can use and then index like so so this is an arrow function which means that inside here we do the arrow and we need to put what they called open and close curly brackets like so and inside here we need to add some sort of a diff or in this case we're gonna be adding a list like so and as you can see it's working but not looking good okay so now in order to loop through the data here we need the name the icon or the name okay so what we can do is use item first of all and then let's say name let's have a look at whether this works first of all so save this save the data just in case save everything and it doesn't work item dot name socials we imported from data oh okay so i refreshed and it looks like import from icons twitter dot svg does not seem too bad okay let's have a look so if we go back to data okay if we go back to the asset and then index let's have a look at the twitter here so we have misspelled twitter hopefully that's the issue okay now we have youtube github discord and twitter so we can go back back and that's it so literally i've just misspelled twitter and it wasn't finding the image now though we're getting all of the items here let's make this look nice by adding a few more elements first of all we need to add the key just like before of index and inside here is where i'm gonna add a link now because this is gonna be an external link going to youtube github and so on we can actually write it as a normal link so this is gonna be link with a target of blank no underscore blank so he opens on another tab the href is where we can put the actual link so it's gonna be item dot link and then what else do we have we have the rail which is kind of important we can put as no opener and no referrer and last but not least we need to add a class so class name is gonna be equals part into the y of two flex flex call on middle we want this to be flex row gap of two between the items and i want everything to be always centered so item items center and potentially we need to justify everything to the center as well and we need to close the link in here don't forget that thing that i did not close it so well wrap yep i did not close this and close the link in here and that should be good all right and the last thing that i wanted to do is add the icon so inside here i'm gonna add an image and this image is gonna have the source of item in curly brackets and then icon and the alt text is gonna be i don't know if i have alt text yes i do okay the alt text is gonna be curly brackets item dot alt cool and also don't forget to add the width and the height of our icons in here i don't know them right now but yeah just don't forget to add them with like so and the height like so if you need to if they're all different widths and height you could potentially put this into the data but obviously just adds a little bit more time to do okay let's have a look at how this works this is looking okay but i've got the image wrong so first of all the name has to be after the image and we should be okay now save this and as you can see this is looking good if i click on one of them obviously i think i've linked it to username so this seems to work and now we can focus on the right side here which is just adding an image all right the image that i want to add for this one is going to be one of the hero images so what i'm gonna have to do is tidy this up and inside here is where we're gonna add the image we can literally just do image and then the source i need the source for this so let's go up we can do import and then we can do maybe hero medium which we've already inserted so from and then this is gonna be dot dot slash dot dot slash assets so i will show you right now this hero medium is inside the index.js and we have it around here it keeps it gets the image and then we're exporting it somewhere around here and that's why we're able to use it now so hero medium what i'm gonna do is add it here for the source like so and we need a note so me me programming have a look this is looking okay i'm gonna add a little bit of border to it and that's gonna be pretty much it so for the image let's go with with class and then border black and then border to and then round it maybe large or maybe i think it's xxl dining let's have a look and that's looking pretty cool in fact we don't even need this diff now so we could just have it as an image and it's probably just gonna work as well but just for now i'm gonna keep it here like so of course this needs a lot of tidying up but i can do that later let's super quickly inspect this and just go down to mobile and as you can see we have the my story at the top and we have this here you could reverse the order if you wish but i've already done in the home page so i'm gonna leave as it is and potentially just add the marky here and the contact step so to do that i'm gonna go to the home page super quickly and copy them from the top so this is gonna be what do i need i need the contact and the scroller copy go to the top here paste so now we can use the scroller and the contact let's go back to the section here at the bottom and we can do scroller then we can do contact so and also i need to wrap them into a diff or something so potentially we could wrap everything the whole thing here into an empty diff thing the arrow will go away and as you can see we have the scroller and the contact perfect um yep i didn't close the scroller that's why perfect let's go back go to the about and it doesn't work now the reason for this could be is because for the scroller we actually need to pass properties as you can see when i remove the scroller it means that we need to pass these properties so this is a good thing because we can modify the way we want and if you remember on home we were passing a couple of properties in here so i can make a custom so that's pretty good i'm gonna copy it here and paste the one from the home page and one thing that i expected is that potentially we need space on this one and now they might just loop nicely yep i think that just worked which means that we're gonna have the same problem on the home page so just add a little space and we're good to go one thing that i'm noticing right now is that i don't have just a little bit i need just a little bit more part into the bottom so my so the website is full screen on this it looks a little bit odd so maybe i can just give the picture which is this one here a margin bottom of something like eight let's have a look whether this fixes it yep well that creates a little bit of scroll obviously it's not going to be perfect on every single monitor so that's it we have that cool and the next page that we're gonna do is gonna be the contact page all right let's build the contact page which is gonna be super similar to the about page so in order to do this go to the explorer open the app.jsx and inside here is where we're gonna be adding the new route but before we do that inside pages we need to create our contact page so let's do contact and inside here is where we're gonna have to create contact.jsx like so let's do rfce change this to capital letter capital letter one thing that i just realized is that we already have a component couldn't contact which was a mistake but luckily for me i don't have to import this inside here otherwise that would have been bad but i guess i can always rename it anyways it's good to mention this just so you know but luckily for us we are not going to be inserting this component inside or contact page which is awesome now that we have the contact page created here let's go back to the app.jsx and insert it so under about here we can potentially copy this alt shift down and put this as contact and then put this as contact cool let's copy this contact and create a new route copy this put this as contact and change this to contact save it let's go back to the page and we have an error it says pages about contact yep that's correct this needs to be contact this is what happens when you copy and paste sometimes and here it is the contact page is working i can click about the home and so on so let's super quickly build this contact page which is going to be so similar to the about page we can probably copy and paste most of it let's have a look so if we open the about page and let's have a look what we get so we are not going to have could potentially have the scroller but you know i'm not going to have the scroller we're potentially going to have the socials so i'm going to grab this and paste it here and then maybe we can just grab everything else grab everything and we need to remove the bottom two bits let's have a look whether this is going to work and i'm going to remove those two because we won't need it and save okay we have some sort of an error i oh yeah it might be because we're not inserting some of the images as well this needs to be removed saved yep so that seems to work and we just need to change a little bit instead of uh what is my story we can say contact and for the contact i'm gonna paste a little bit of text so inside here i'm gonna paste see i'm gonna paste everyone to contact me if you're looking for help with your creative business have burning questions to ask me or simply want to interact the quickest way to get my attention is to hit me up on email and for the email i'm gonna put the inside here so we already have the social media actually so i'm just gonna put my email in here maybe want my email and then we can put hello at email com cool we can make the spacing a little bit more and then we can have the socials this deserves to be a little bit bigger i guess so what i'm gonna do is margin bottom to this needs to be six and maybe extra large yeah that works a little bit better and now let's quickly add a form for the form we can use this website because it makes it super easy all we need to do is literally paste the form and it kind of works so what you have to do go to get started click on the free one which gives you 100 submissions click on get started register and once you're in i'm gonna show you now you should be able to build your form underneath here your forms and then you have your form in here so technically speaking all you need to do is grab this form here copy it inside your website which is very very easy so this diff here i was to paste it you will see that the form is here and it should actually work so it doesn't obviously look very good but i can put red and i can put hello at ready the kkk and send it thank you it's sent if we go back and if we go to the forms maybe okay four submissions and here it is so we have the name the email and it appears to be picking up some gdp astef which is not great but i'm sure that there is a way of removing them and the other thing that i wanted to show you is that if you wish to add more fields it's actually fairly easy all you need to do is copy one in fact i'm gonna show you let's let's style this a little bit better but for the diffs individual diffs in here i'm gonna add a little bit of starting it's just gonna make it look a little bit better so class name is gonna be w4 which is full width and then margin bottom is gonna be four for the label here we can give it a class name also which is going to be form dash label an inline block block and then margin bottom of two we can also set the text to be gray of 700 and that should look already much better for the input itself we're gonna do something similar i'm gonna do a class of block so it goes on another line and then full width by doing w4 part into the x3 part into the y2 and then we do border black border dash two rounded let's save this and have a look go back and here it is that looks much much better so potentially i can now copy this and replace the email one so this is gonna be email name is gonna be email id is gonna be email and type is gonna be email also so this should work you have email so we have name email and potentially you might want to have a message to do this let's copy the whole bit here paste it and instead of saying your email we can do message for message and this needs to change actually all of this needs to change so what i'm gonna do is do a text area and then this text area is gonna have the name of email the id is gonna be of email and that can stay as default and also i need to copy the class name from here and add it to the text area like this the last thing that i'm gonna do is modify the button a little bit so the button is inside here the input i don't know why it says download cta but we definitely need to change this to send it send it like so submit that so good and just maybe give it a class name of body next to the six body y to four rounded medium background we can say to feel 600 over background feel 700 and then text white nice now if you type a message this will automatically pick it up and when you send an email it's gonna be in your submissions if you have a suggestion for a better form that i can use next time let me know in the comments below before we finish with this page i just wanted to mention that of course we can make this a little bit better by adding some imagery icons and so on and also you could potentially link your email but to be honest if you leave your email like this you're about to get a little spam try converting this into an image and you'll probably get a little bit less spam or just use the form i guess the other thing that i would suggest you not to do is honestly don't put your phone number because somebody calling when you are out with your friend is not the best thing but that's just my opinion and that's gonna be everything for the contact page the next page that we're gonna build is going to be the work page specifically it's gonna be the Harley-Davidson one i'm gonna make this super simple again just to show you how you can do it then you can duplicate that page and link it to the other ones and so on some of you might ask the question why didn't she put everything in a jason file and then everything is dynamic and so on it's because when you have your selected work i would personally do individual portfolio pieces for every single one and do them differently obviously the style of the page could be the same but but have them a little bit different that's all i'm gonna say so let's create the Harley-Davidson portfolio page super quickly we're gonna go back to the code editor i mean remove pretty much everything that we don't need we're gonna have to create a new page so what i was thinking is that if you're gonna have a few different portfolio pieces maybe inside pages we can have a work folder and inside this work folder you could potentially have another folder called maybe like work main page and so on and then for the other pieces of work you could potentially put Harley let's say this is how i'm thinking about it and inside Harley is where we're gonna be creating the page so let's create a new file and i'm going to call this one Harley.jsx inside here rfce press enter and let's convert this into h big capital H and capital H save now what we have to do is go back to the app.js file and inside here we need to insert this page as well so this is gonna be maybe we'll just put as Harley you could put as portfolio Harley or whatever you wish and i'm just gonna keep it simple and then pages is gonna be work and then after work is gonna be Harley and then Harley like so now we can include this page inside all routes so after this we can do Harley and then inside here we can do Harley but before that i'm thinking that you do slash work if you wish to have a proper work page where you have your selected work and then you have Harley as the slug if that makes sense so if we save this save this as well and if we click on Harley which we've already linked earlier in this tutorial as you can see at the bottom left it says work Harley Davidson okay that's wrong then in this case we need to link it to Harley dash Davidson Harley Davidson and save okay now if we click on it you will see that we're getting Harley and now we can start building this page super quickly as always first of all we're gonna have to include some of the images they're not gonna be many i think they're only two so let's go back to the assets and then click on index.js inside here we need two images so i'm gonna move this and i'm gonna do import Harley cover and then this is gonna be from slash Harley dash Davidson or JPEG and then the other one is gonna be import Harley website and this is gonna be Harley website like so and save we need to export them so let's do comma Harley cover and Harley website cool now we need to import those two images inside or Harley page and to do this we can go back and inside here we can do import and then i can't remember what they're called so Harley cover and Harley website put them in one line here just so they look nice and we can do from dot dot slash dot dot we need more dots here because we've gone deep and then assets and that's pretty much it now let's start building or Harley Davidson page everything seems to be working that's cool all right let's remove this diff and replace it with a section and for this section let's start with the styling so the styling goes like this text white then we can do padding y to be 24 background center because i want the background to be centered when we are there and i want the background to cover now we can add the background by doing style equals and then double curly brackets let me put on another line so you can see and inside here just like we did before we can use the background image and then we can do column and add the URL by doing URL banana and then plus the Harley cover and then we do plus double quotes another banana to close it and that's it now back as you can see we have the Harley Davidson here which is looking pretty cool and then inside here is where we're going to be adding our container let's do a div with a class name of container mx auto padding x4 and that's it inside here we're going to have a title so the first title is going to be h2 and you're just going to say customer for the customer we're going to have a class name of text large font bold uppercase cool let's have a look that's looking cool for the second one is where we're going to have the actual client so this is going to be h1 Harley Davidson and this is going to have a class name of text flash for excel on live screens i want to replace this to text five excel on extra live screens is going to be text seven excel font bold margin bottom of six say this as you can see this is already looking pretty cool i want to do two more things say what the project was about so this is about web design for example and we can put the URL as well to nicely style this let's put it in a div and inside here is where we're going to be adding the row and the URL so let's start with the class names text large for everything medium flex and then gap 12 so i'll show you what this does it's basically going to on mobile is going to be stacking the information that we have and then all medium screens and above they're going to be next to each other you'll see in a second and then inside here we're going to have a span and then this span is going to be row like so let's give it a little bit of styling by doing font bold and then block margin bottom of four then the next thing that i'm going to do is put what the row was so website so website design for example and that should be it now i'm actually going to have to wrap this in into his own diff as well so let's do a div and wrap it the reason for this is because i want the second element in this element to be next to each other you'll see in a second this means that potentially we can copy this paste it here and then do a visit website and the website is just going to be a link so a target equals underscore blank so it opens on another tab href can be htps column slash hash harley davidson com and then row and then this is going to be no opener and then no referrer like so we also need to add a class name to it so this is going to have a class name of hover underline because it's a link and we need to close this link somewhere so closer like so and inside here we can type www harley davidson com cool let's have a look at what we get as you can see these are next to each other now because of the flexbox and if we go down they stack underneath each other and we see a little bit of a problem and this is because i probably need to give it a little bit of margin to the bottom let me add that and see whether this works so on this diff here we could just do class margin bottom of four potentially yeah that fixes it maybe a little bit more you know but on medium screens i don't want the margin bottom because it kind of doesn't centerline everything if that makes sense so i think that's gonna work quite well and just for demonstration to be honest what i would do is i would do stuff like maybe we create another section inside here and that's not allowed one more time so i'm gonna have to write the empty diff here or we can just open and close and then close and now we can write another section perfect so what i would do is i'm not gonna style this super perfectly but what i would do is i would put stuff like my involvement so for this section let's go with class name of border black and then border top of two padding y 16 and then inside here i'm gonna do another container so diff and then inside this diff we can do class name container mx auto padding x4 gap eight we don't need the gap eight and inside here is where i would do stuff like involvement and then i would write about what was my involvement and how we improved the actual website so what i'm gonna do is give this a class name zone on both and then maybe margin bottom to four and then let's give it a little bit of a description so the description i'm gonna copy and paste this is what i've written in 2019 Harley Davidson the legendary american motorcycle brand had a major brand change my involvement with the Harley Davidson rebranding was to create and maintain their online presence along with being directly involved with the process of rebranding so i would write something like this obviously spend a little bit more time to do it and have this in here because it shows that you are actually involved in the project and what you did and people are gonna love this if you have any stats such as results and so on add them so what i would do for the padding is i'll do class name of text large max wxl and margin button of 16 so this is gonna make the text a little bit smaller so it's not full width nice to read and then maybe i would add the image that we included earlier which is Harley website after this maybe we do image and then we do the source as the Harley website and then Harley Davidson website we do need the width we do need the height we could use loading can we use loading lazy let's have a look ah potentially we could use loading lazy and that's it if we go to the actual image Harley website this is one zero five three five three nine okay try to remember this so this is gonna be one zero five three five three nine and that's it and the last thing i would do is definitely like put some stats oh that that could be centered you know that could definitely be centered so on the actual image if we add a class we can do mx auto and margin bottom or 16 pixels and that's it now it's centered i'll definitely put some stats in here just to show you i'm gonna do some dodgy demo here so what i'm gonna do is url and inside this url i'm gonna do a list and inside this list is where i would do something like 10 10 percent and then increase in sales and so on so if you wish to style this i'm gonna do it super quickly for you and let's do it's not gonna look good that's the problem text large flex gap eight so we have a little bit of space and for each individual list we're gonna do flex flex co text center background can be white border black border two rounded large and then padding or four that should look good and we can wrap those into span so we can give it a little bit of color or whatever and then this can be class name of font bold and then text to excel and then the next one can be span and then we can do what can we do um nothing we can leave this one as it is it should be centerline save so i totally forgot to add a title so for the title i would definitely copy the stuff that i've written here paste them and let's say results you write something about the results and then you put some statistics so if i was to copy this one more time and let's say increase in website engagement say 20 but obviously the statistics have to be real you can just make them up you need to be able to prove that you've actually done the job and so on and as you can see this is looking pretty cool and this is what i would do maybe i would put this on the middle here or whatever but that's your template you can grab it remix it reuse it have an amazing portfolio one thing i noticed just before i was about to upload the video is that if we scroll down a little bit and if we click on any of the links here for example let's click on the highly davidson and you will see that the location of the window doesn't change and we need to fix this so i want the location of the window to go to the top let's go back to visual studio code inside explorer and inside the source folder let's create a new file so new file here and i'm going to call this one scroll to top.js i would also link you to a stack overflow page where there is a couple of methods that you can use and i'm going to be using one of them but slightly modify it so what we can do inside here is if we look at the react router is what we can use because it has a location hook that we can use what we need to do is import use location from react router DOM and then we need to import use effect as well because we want to be able to update the DOM when something changes and we need to be able to update the location let me show you how this is gonna work so if you go back to scroll to top first of all let's import use effect and use location use effect will be imported from react and import use location will be imported from react router DOM like so and then inside here we need to start and export default function and in this function we can call scroll to top like so and inside here is where we're going to do the logic let's get the location in a variable so i'm going to do let location equals use cation like so and then we can do use effect to listen on changes to update the the DOM on changes and then inside here this is going to be another function like so let me space it out and we need to do window dot and inside here we need to use the scroll to method scroll to and we need to put the coordinates of zero zero which will be at the top the last thing that we need to do is we need to update the location so we can grab it and insert it here and then we can just do return no i actually have not tested this just yet so hopefully it will just work and then what we can do is go close all this and we need to go to app.jsx and import the power that we just created so inside here we can do import and then scroll to top from and then dot scroll to top like so and then we can actually grab this and insert just beneath the router here and if we this is going to be a self closing attack like so and save i think that this should do the job let's have a look so if you go back to the website and we click on ready let's go down and we click on Harley Davidson as you can see this goes to the top which is exactly what i want and the smooth scroll is actually happening because of the CSS that we added earlier in this tutorial which should be in inside index.css and then html smooth scroll so that's why this is happening but if i remove it it will just jump i believe oopsie i think i broke this again okay if i go back if i change this to tailwind it says so it doesn't break my code like so and if i was to remove the html super quickly and back you will see that it just jumps so that's pretty much it i'm gonna put this back well that's gonna be everything from this tutorial i hope that you learned something new i hope that you enjoyed this little challenge if you have any feedback for me please comment below consider smashing the like button because it would help with the youtube algorithm and i will see you in the next video thank you very much for watching