Learn React JS and Styled Components by Building a Full Project | Maclinz Universal | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn React JS and Styled Components by Building a Full Project

teacher avatar Maclinz Universal, Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

30 Lessons (9h 36m)
    • 1. Introduction and What We Will Build

    • 2. Overview and Where to Get Inspirations

    • 3. Introduction To Styled Components

    • 4. Download and Optimize Images

    • 5. Setup and Clean Up

    • 6. Sidebar

    • 7. Header Page

    • 8. Particle-Js Fix

    • 9. Routing With React Router

    • 10. About Page 1

    • 11. About Page 2

    • 12. Some Monor Fixes

    • 13. Blogs Page

    • 14. Contact Page

    • 15. Contact Page 2

    • 16. Skills Section

    • 17. Skills Section 2

    • 18. Resume Section

    • 19. Portfolios Filtering System

    • 20. Portfolios Styling

    • 21. Minor Fixes

    • 22. Custom Scroll Bar

    • 23. Theme Toggler Button

    • 24. Dark Theme

    • 25. Dark and Light Theme

    • 26. Media Querries

    • 27. Media Querries Sidebar 2

    • 28. All Media Querries

    • 29. All Media Querries 2

    • 30. Minor Fixes

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this tutorial we will use React Hooks, Styled-Components and Material UI to build a big high quality project for your cv will open doors and jobs for you.

This project will take your CSS and designing skills to the next level. To get the most out of this project, please follow along and code as I code.

This project-based course will have you coding right away. We will firstly look at how to install libraries using npm and then we move on to the basics of Styled-Components and then downloading and optimizing the images for better performance. After this, we will waste no more time and we jump right on creating our big project. The main cool feature for this project is the dark and light theme.

You don't really need to know React to follow this course, it's designed for anyone who wants to learn React by buiding a project. I will explain all the code as I'm writing it.

If you want to see the code or you can't get it to work or compare it , you can download the project below. To run the project run: "npm install" which will install all the dependencies and finally "npm start" to run it on the browser.

Here is the GitHub repo for this tutorial where you can get some updates : https://github.com/Maclinz/final-portfolio-2

Meet Your Teacher

Teacher Profile Image

Maclinz Universal

Web Developer


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction and What We Will Build: Hello everyone. My name is MacLean's and I'm a web developer. We'll come to this reactor and cell components project. So mainly for this project. So we're going to use React js and cell components. I'm going to be explaining everything as I go. So you don't need to have inexperienced or anything. Okay? So is this course for, so this course is for anyone who wants to react by building a full project from the beginning. You don't necessarily need inexperienced to follow this course. Is going to be explaining everything as we go. Okay, so for that, we're going to start from the basics of cell components. And then we'll move on to Create, Create React app. And then we'll create our project. Okay, so let me show you the projects that we're going to build. So this is the project that we're going to put for this course. Okay? So we have a nice home page with and mated these dots. I don't know, particles, I mean with elementary particles. Okay, So we also have light and dark theme. Okay? We can toggle between light and dark. Light and dark them. Okay. It's also responsive as well. So if I click F 12, as you can see, the navbar automatically hides itself and the website is responsive SO we can bring with enough iso. Oh, okay. Now let's go to the About page. So instead they abort page. We have some information. And then the CV download button. You can download the CV. You can link this Download button to an external link like Google Drive or anything. And then we have this exit section. You can put whatever you want in here. Okay. This Abbas second is also responsive is all. Okay. Alright, now let's go to the resume page. Here we have some skills in progress bars. You can showcase your skills in whatever programming language is 0, anything that you want to showcase. Okay, it's also responsive is 0. And here we have a timeline. And as timeline, it's also responsive. Okay, we can make the screen smaller and sees responsive. And then finally, not finally, we also have the portfolios page in here. Okay, so we can click one of these links and then you can go to whatever website you want to go too. We can filter the portfolios depending on whatever data you've put is that the portfolios, it's also a dynamic. The more portfolios you put, the more that I would come here. Okay. It's responsive is 0. And then we have the blocks flux page in here. We can add as many blocks as we want. We can. It's also responsive as you can make it smaller to whatever size you want. All right, and then finally we have the contact section. So in the correct section, we have the contact information to the right side and then to the left side we have the sum inputs for your email and a name in the subject, and then you can enter a message, whatever you want. Okay, and then you send email. Unfortunately, you are not going to do back-end for sending this e-mail. But you get the idea. It's not that difficult to implement anyway. Okay, so yeah, this is the, the project. Okay, So, so responsive is down here. Okay. You can make this smaller. It's also responsive, whatever you want. Okay. Yeah. So let's get started. I will see you in the videos. 2. Overview and Where to Get Inspirations: Alright, in this video, we're going to build this project. We're going to have a light theme and attack them. And also the project is very responsive as well. We're going to use React router transition to other pages. Okay, we have the about page. It says Section, reverse section, and the resume page. In here, we have a nice resume section with progress bars and a timeline. And then the portfolios page, we have some portfolios with the fruiting system. We can shoot everything and live a nice I've animation as well. We can go to external websites if you click on listings. And with the block section in here, we can put as many blocks as we want. Alright? And then finally we have the contact section. All right? Okay, but there's no back-end for this conduct section. I think we can do that on the some of the features later on. All right, so now if I go to the portfolios page and dynamically, my skin smaller and smaller helps smaller. And you can see it's responsive accordingly. And also the Nakba hide itself, we can bring it back. All right, so we're using a bit of material you ISO for the switch icon at the brightness I can. And the hamburger menu where using much of the UI. For the resume. It's also responsive as well. All right, and then you have the About page which is fair responsive as well. Okay? And finally the homepage, it's also responsive. Okay. We can use these links to go to any website that we want. Alright, so now before we go into the projects, I will show you some of the websites. You can get some templates from, free templates you can just get inspiration from. So the restaurants is a Behance. You can get some inspiration from this website. For example, if a website that has to do with project management, you can just project management. You can get some inspiration from here, then just try to mimic whatever you see here. You can type anything you want, for example, can just say chatter. Chatter. Then you can get something that is church website. Okay, there you go. You can get some nice designs here. And they'll say get-go color trends. You can get some nice colors, right? And also color hand. You can get nice colors here as well. And we have this website spec you boy, you can do some templates, you can get some inspiration from. And also on is it and rental market. You can get some nice inspiration from here as well. You can look for any terrible forces that you are looking for. For example, if I go to WordPress, again, look for something that is to do, let's say social networking. Then look for some templates here. All right, and then this one is like Instagram feed, bla, bla, bla. And you can just try to get some inspiration from here. I could demo. You can see the demos here, you can get some inspiration. But I think that's it for this introduction. So now we'll start building the project. I will see you on the next video. 3. Introduction To Styled Components: All right, welcome back. I've already created the projects, but there's nothing in it. I've already done the cleanup is if want to know how to do this. Coupled to the first section, we'll show you how to do the cleanup and deletes unnecessary files. So now let's run the project does nothing. So npm start and stop. Alright. Oops. There's something wrong is that the App CSS. Without CSS, I've deleted the SCSS, but let me see what's going on. Here. We're inputting the CSS, we don't need it in here. So delete everything. Save and then refresh the page. Okay, our titers showing up sub-components is that the ArcJS. So now let's start by installing sub-components. So npm install subcomponents. Make sure you're spelling is correct. Components like so and then hit Enter to install the sub-components. Okay. Before we can use the components, we need an extension which is cost components, VSCO sub-components. So this extension helps us with auto-completion. He said our components. Okay. Make sure you don't know the succession. Okay, let's go back. So starting new terminal, terminal, npm start on a new terminal. Alright? Now, to be able to use their components, we're going to import styled from cell components. Okay, So to be able to use these tout, we need to create some variables. Stout. So you notice here on the app, we have a div with the class name of app. So we're going to create a div just to replace this, this div with a new div from sub-components. So here we use child. We use this diode here, the one that we've imported from sub-components. And then we're going to create a div. All right, so in here, we can do our CSS styling. Before we do that, let's copy these apps tiled. And they're replaced this div here with the cell components div. Okay, So now we're ready to do some styling. For example, if I do bigger than color, red. Okay, The app has got a big uncover, Fred. We didn't define the height of this app, but the book on colors red now. Okay. If I change it to black, because black, okay, I'll leave it as red. But now we need to create a global styling to remove this padding and margins there. To be able to create a global style. Let's create a new file. Actually, let's create a new folder and name is tiles styles. In here. He said This tells folder, I'm going to create a new file is going to be global style to JS. Okay? So to be able to create a global file, a global styling, we're going to import create. It's called create global style from style components. Alright. So down here, const global styled. Let's close to create. Create global style. Now, we're ready to do the styling. In here. We're ready to do the global selling for example. I want to do a basic page every setting. I want to give it a pediment 0 margin of 0. But about fun size. So for the body, I then do a background color for the body in hopes of push through three. All right, now we need to export these as default because we want to import it's, I said the index.js, Export, Export, export, default. Global stout. Actually let's name this global style, styled style. Alright, now we've exported this as default. If we go to index.js, that's when we want to import the file above the app in here for the global style. From styles, actually one-to-one dots, styles and then global. Okay, above the app. In here we can do global style and then close, save, save, save everything, and then refresh the page. All right, now we've reset it to the browser. Or selling is working. Everything works. And I'll see you in the next video. 4. Download and Optimize Images: Okay, In this section, we're going to create a simple projects. We are going to need some images. To get some images. You can go to pixels.com and then you can download some images, whatever image that you want. So yeah, let's start by downloading some images. For this project. I think I'm only going to get four images. You can get as much as you need. But for this predict sake, I'm only to get four images studies to do with food. I think. I'm overthinking this I just done on any image, Free Download. And then desktop in here, I'm going to create a folder image. Okay? And then I'm going to save this is food. Actually. To make it easy, I'm just going to say Image 1. All right, Let's get three more. Okay, Let's get this down to let's go Lake Erie three. And the final image, just say percent. Alright, thing is this looks cool. And then you make four, right? Before we can use these images. We need to, we need to resize them because they're very big and they'll take though, affected performance of our website if we just use them like this, look how each image, how big it is. This one is like four megabytes. This one is two megabytes. So we need to reduce the size. So the less size we have, the better performance that we have on our website. So to reduce the size, I not do this on Windows, but I don't know how other people do to remark. And then I'll go to Edit and Windows. And then I'll go to resize and then pixels. And they maintain aspect ratio, make sure it's checked. And then for the horizontal, I'm going to do here is just the size. All right, then this looks better. Which images, this image tree. Safe and then save. Now if I refresh. So the imagery, now it's 300 one kilobytes, which is far better for performance. Okay? Let's do image for re-size. Maintain aspect ratio to 11000 here. Okay. And then save, refresh. 216 kilobytes. Yep, much better. This one. The second image is four megabytes. Resize. Rise 1000 here. Maintain aspect ratio and okay, still too big. Let's do 800. Alright, and then Save. Remember this image was four megabytes. I think now it's like one and this is a true color buys resize. I'll go ahead and go to this one is a and Save. All right, now we have nine kilobytes and turtle for the all of the images. All right, now, I think we've done the resizing of images. I think the next stage is to start doing our projects. I'll see you in the next video. 5. Setup and Clean Up: All right, I've already created the projected Create React app. There's nothing really in the project. So now let's do some Dina up, delete everything except the ArcJS and the index.js, right? Okay, deletes the supervisors function. And then this function and the CSS file. And it everything. So the, the header. Okay. Now let's, yeah, install some libraries that we're going to use for this project. So we're going to use React intersection observer, right? Region. The second observer, surgeon inserted index, intersection observer, run npm install intersection observer. Then just copy and paste here. And we also need another is called particular JS. Js, or is it Hey, there you go. This is the website package AS this is what we need for the particles. But we need it for React, react particle js. I'm using another screen here. Particle js for yet. All right. Now to answer Parker, Yes, run npm install package AS and the worse, I need a3x router start components. And what else? Yeah, I think that's it for now. React router and cell components and material. You are actually npm installed. Yet Rotterdam. And start components. React router, dom subcomponents. Yep, We also need material UI. Material UI. So it's material I call you icon. And we also need the icons or icons or copy these icons. Make sure you're spelling is correct before you hit Enter. All right, if everything is correct, just hit Enter to install. Everything. Is going to take a little bit. Time, but inside the source folder, let's create the folders that we need. We need the Pages folder. We need a components folder. Create a folder inside the source file. Opponents components. And then we need the data folder. And then your fiber a folder data. And then we need images folder. Finally, when it is taus folder. Okay, So inside the style is let's create a new file. Is going to be a global style for our global styles using a cell components group of server.js. In here. I want to import styled, actually enough styled, create global, global style from subcomponents. Components in here. One critic logo style, and then create global style. In here we're ready to do the styling for a global, global stage. Alright. So any am going to do a basic page resetting my genome 00 00 00, xx and list-style. List-style. None. Text decoration. It's going to be none. None. All right. In here we have the body. Before the the selector. We need to define a root, root element. In the root element we're going to specify the variables that we're going to use acoustic page. So we're using quite a lot of variables, but I just, I'll just show you how to create a new variable. For example, you want to create a book on color. You do this, the ground color or green color, and then you can give it, let's say black, zeros 0000 black, right? And then to use it inside the body, again, do Runge-Kutta. And then we do. And then they're gone color, which we have access to these variables across all the styles that we do, because we have access to the spectrum color. So now let's see fabrics and colors working. So now let's connect the global style inside the index.js. So in here, I'm going to import global style. Actually only one dots from Styles, global style. And then up here we just input the Globalstar. Actually, I hope I forgot to do something. We need to export this down hand. It export as default. Export default global flows to, okay, now save, let's run the project. So it's npm. Start. Alright, moment of truth. The background should be black. All right, now it's black, but then it's black. Then if I change the variable to a different color, let's say red, they're going to turn red. So we can just update everything here wherever these variables being used updates automatically. All right, so now I'm going to paste all the variables that we're going to use for now, I might add more later because I don't want us to turn creating variables and the color that we're going to use. So this is the whole thing that we're going to use. All right. So for the background color and went to give it this bad, that book on color here. Kayla. This meant welcome, color. Safe. All right. Well, I know it's working or I think that's it for this introduction video. I think we're ready to get started. Actually, before we do that, we need some images athlete. So some images, we can get them from Pexels. This way you can get some images, but I'll leave it, I'll leave you to it again, just find any images that you want. But on the next video, I'm going to have some images here. You can put whatever images you like. Or I will see you in the next video. 6. Sidebar: All right. We're back where we left off. So before we go any further, I'll go to Figma. I'll show you the overall layout of the website. So this will be like our sidebar is going to stay on a fixed position. And this is where our main content with the bile we can screw on this page, but they put the set but it's going to stay on a fixed position. Okay, so let's start by creating a sidebar. Right? I'm going to create a sidebar component is at the components folder. So WTS, I'm going to create a functional component. Down here. I'm going to create a new variable. Costs sidebars tout. This goes to styled div. And don't forget to input this town from cell components, right? Copy this or bust out and replace the div. Right? Now for the sidebar, I'm going to give it a width of 16, 13 RAM. And height, height of 100 vh. Background color is going to be, let's call it the global styles. So I'm going to get the sidebar dot color and put inside the ops. I didn't copy. All right. What else? Okay. Now, actually, we need to give it a position of fixes or position fixed. And then save. Oh, I forgot to render the navbar supposed to be rendered inside the app sidebar. Right? Make sure you put it up here. Save. And then I smelled coming up. So save this led by here. For some reason, it's not coming up. Up. What is their position fixed? Berg on color, all supposed to be like this. Alright, now it's coming the sidebar. Inside the sidebar, I'm going to create a div, actually a nav. Create a separate component for that. It's going to be navigation. Js. Inside the navigation, I'm going to create a navigation style. Style is close to Stout. Snarf started nav, and then in here I'm going to create a few days. Image. Source is going to be avatar. And then you our nav items and vitamins and then Ally dots, nav item. All right, in here, now we need something from a3x router. So I'm going to import love link from React floated on edx dot myapp. And then down here I'm going to do the nav link, right? To be, this is going to be at home. Let's go home, but home. And then home. And we need active class name. Active class. I know that active class. But before we can use this now brings up for me to put the avatar important avatar image. From dot-dot-dot image, valid images. I've already downloaded the images that I'm going to use for this project, avatar, JPEG. All right, so before we do anything, we need to go inside the sidebar. Navigation is at the index.js need to import something created browser router. So we need to surround this app food shelter. So it's browser router, it's coming from the react router, don't copy. And then sir, on the app with three clouds have allowed him in. So don't forget to import press a router from Rotterdam. Alright, save, refresh right? Now if I'm attain age. And the links. And he said the navigation. Okay, in here, I need active class. Okay, let me see if I click the link. Does it go to home? Yep, that's got home. Now copy this a few times. 1, 2, 3, 4, 5. And then after here we're about. This goes to about resume on IaaS, folios, plugs, plug and then finally, we need the contact section. Contact. All right, after the UL, do a footer. So inside the footer is just a simple paragraph. Really. It's going to be it looks like 2021. You can do whatever you want. I'm just going to say yeah, let me do whatever you want. Or you can just say my portfolio of IQ and put your name, whatever. All right. Now this is what we have. Okay. He said the navigation, display flex, justify content. Space between space between my days, between flex direction, column. And then items center is percent percent. All right, okay, now let's do the styling. So inside the navigation style, select the avatar class down here, and select the aperture. It's going to have a width of thing. I'll give it to 80%. Let's see what database it looks like with Oedipus end. And then inside the after with image. Let me he's going to have a width of 50 percent. Okay. 100 percent, border-radius, 50 percent and their border. So if we go to global, we need watercolor. Border pixels, solid and the border color. Okay? So this avatar is going to be over. What, a bottom. One pixel. Solid. The same water color. All right. Actually be 100%. And then the image will have width of 8%. Text align center. And then, oops, center. Image is going to have a padding. Top and bottom is going to be 200 m. And then left and right 0. Note the image, the avatar. Okay? I think putting off tour m is too big. Yeah, I just did before to m for now. We can customize later if we need to customize anything. All right, now let's go to the side-by-side. We need to actually give it a border is going to be, this one is going to be bottom-right. Polar, right? So it's going to have a smooth border here, but it's going to be one pixel. One pixel. So now we have a nice border here. Now let's go to the links. Nav items. Select the nav items after the avatar. Then put in our buttons. All right, for now I'm going to put this one on another screen. Seconds see, when I'm styling to make it faster than switching back and forth. All right, I'll bring it a bit later. So the nav items maybe give a display of block, split block. And then he said the ally, we have an anchor tag, we just didn't have link. We're also going to have a display of drug. Right? Before we go any further, I forgot to a different color. The font color, luckily the f of I forgot to edit font size 100 percent, percent. All right. So now let's, uh, bringing that up, don't but the peg, the page. Now we need to fund cutter. Now the font, color, font. Know Nieto guano is no Nieto. Strong Google Fonts. Select from 200. Extra light. Let rounded, regular 400 and semi bold 400. Copy this link and paste it instead the public index. Down here, paste. Now we copy the font family. Copy, call it the global style. In here, up with the font-family. Alright, in the body, our default color is going to be, what did I name? It is going to be fun to color. I think the light one, fun to color light. It's going to be our default cutter. Sure, we need to do for All right, this will be our default color. Changing. Fun light color. Below the body. Select an anchor tag, fund, family, inherit, inherit, and then color inherited. So let's see if that works. Alright though x. So I'm going to target the elements. Mendeleev them a font size, a default font size of 1 to RAM. Piece will be our default font size. Inherit. All right? And then this image is way too big when you do register size of the image. So we can have a bit of space down here. Set by Ashley's navigation. The image I do 70, padding top and bottom is going to be one RAM. All right, I think this makes sense. For the footer. We're going to reduce the font size. Now Vitamins, let's do the footer here. Foot, and then insert the photo, that paragraph. And we'll give it a padding of one RAM, top and bottom, left and right 0 font size. It's going to be 1.1 RAM. For the full day. We're going to have a border of one pixel. Solid thing. You already know what I'm going to put here. Whatever color. All right. Give it a width and a percent. Okay. I think we need to give it a bit more padding here, top and bottom. Let's try to ram. Yeah, I think two remotes fine. Api, display. Block. Text-align of center. Okay. Nano center. Yep. Now let's work on the links. So they have a display of block. I want to give them a subtle, a subtle padding top and bottom heading is going to be 0.3 RAM. Ram. Definitely to 0. Just as Sagittal. Yep. And that's all. And have a fun give them a QSR pointer. And then embed on color. Color. Actually, you know what, on this link. And we'll do on this end a tag DN after pseudo element applicant for Sudan. And let's go on. Before. Content is going to be empty, string, position is going to be absolute. Top. It's going to be talking about for the bottom. Proton and 0 left, 0, 0, right? He said the anchor tag, I'm going to give it a position of relative. Here. I'm going to give it a template, a width of 0.1 RAM. Actually buy RAM and they're hard to find RAM. This should go 100 percent, not one rem is temporary for now, just to show you, the wrong color, tend to be red. Okay? Yeah, Now if the B4 element right here, so if I increase the width to, let's say 50 percent there it is, covering 50 percent. Right? So I'm going to start on the width of 0 and the height of 50 percent. All right. When I have this enter tag. And then I want the before pseudo element to have a width 101%, 100%. Now let's see. Yeah. Now it's working. So now let's do some sort of a transition. Is a cubic Bezier curve. It's a transition. Okay? So it says fast and then it goes to the end. If you wanted to start slow and then it goes faster. Yeah, I think this looks fine. And then I'm going to do a transition here. It's going to be 0.4 seconds. And four seconds. It's going to be 0.4 seconds. Oops, I didn't copy the copy. And then paste here. Let's see. There's nationalization. After One second. Let's try easy. I didn't know why I did transition is not working but let's see why carried out from here. Try to put it in the before pseudo element. All right, Now it's working. Now let's do the cubic Bezier curve. Remember which value is copied? All right. I'll try to give it a Z index of three. And then the anchor tag is Z index. Let's try ten. I don't know, I'm not giving you the C-index. Nevermind because we're actually going to use the four basicity of these. Could be B of this before element is we're actually going to use a different opacity. So for the cholera, but Runge-Kutta, It's going to be like this opacity here. Nope, still not working. Okay. I don't and it'll go to Figma enriches the opacity of this main color here. Or is it All right Here? Let's decrease the opacity. I think point to 6%. Okay, so in here on the performance element, I'm going to give it an capacity to, I'll give you 0.21 for now. Alright, thing that works. Now let's change the color. If our global styles and in the primal Tara notification and then yet begun call is going to be far. And then permanent color. And then say, Yep. Or you can change the transform origin to bottom, where you can change it to top. All right. All right. Now that's done. Now let's do the active class name. Remember inside the navigation, we have these active class. Copy this active class. It's inside the nav items. Now by TMZ said the nav items in here, active class. We're going to give it a background color, primary color. Right now we have active class. Okay, this is what it looks like on screen. All right. I think we're finished for the sidebar. I'll see you on the next video where we're going to do the main content here. All right, That's it. See you next video. Whoops. 7. Header Page: Okay, now let's start working on the main section here. After the sidebar. I'm going to create a class. It's going to be main content. Okay, So this main content is going to have some styles down here. Main content is tout is going to be stout domain. All right, so I'll copy this main content. Replace the div. Okay, so what's going on? Stout is undefined. Definitely don't forget to import styled from cell components from start components. All right, So for the main content is going to have a position of relative with and margin. Left. 16, 23 RAM. Remember the surplus lies min-height. Min-height of fire, the VH. They're gone color. Let's do red for now. All right. This is our main content section. So It's at the Pages folder. Create a new page is going to be on page two. Ejs is going to be a functional component. All right, and so the homepage, home stout is going to be exceptionally a header. Started header. Okay. Let's remove this distracting background color ones. Where did I put this one here? Okay. So for the homepage, homepage styled. It's going to have with a 100 percent, right? Or a 100 percent actually wanted to vh. Vh. And then what else do we need? Yeah, I think that's it for now. Now let's do the content. For the content I'm much you have some particles inside the homepage. So before we do that, inside the, inside the main content any here, I need to do something first. I want to add some lines. We need four lines. Times 4 is going to be dot times four. All right, we have this lines. Copy the lines class inside the mainstay. For the lions position. It's going to be absolute. Min height, 100 vh, okay? And a width of 100 percent. Okay, so now I want to select each individual line. So line one, line two, line three, line four. They're going to have a width of 0.4 m. It's just temporary. I mean height, mean height of 100 vh. That one color is going to be read, is temporary. Read. Alright, then we have our lines here. They're going to have a display of flexible, flex because fat content space evenly. Okay, so there we have four lines here. Actually I'm going to reduce the width of the lines to one pixel. And the background is going to be for order tonight. I think that's what I've named it. All right. Thing the opacity. There'll be a little too high, but we'll see as we go on. Okay, now we finish the lines. Now when did you do the particles? Actually should to be able to read the particles. I'll import some some code that's Sure I'll show you how it works. So I said the components creating new file is going to be particles, which AS right in here, I'm going to copy and paste some code. All right, I'm going to explain what this means in a minute. Particles. Alright, so let's do, let's go to particle JS website. All right, so this is the percutaneous website. So we've inserted in part because already, so these are the particles. And then here we can tweak the values. Here we can change the color, we can change the number of particles. We can change the density, Valley area. We can do all sorts of things here. So it takes a little while to customize to what you need. So I've done that already. So this is the code to do the customization. So if you go to, for example, if I go to CodePen, if you customize your particles in here, if you go to contain to CodePen, I mean, could feign CodePen. And there you can still see your values that you have customized. You can, you can copy some of the values here, but it takes a while to figure out what you really want. So I've done that already for you. There was a lot of time. All right, So these are the properties of the particles. Okay? And then we're importing function is going to be practicals. We're importing particles from React js from App React particles, Yes. Right. So when putting particles right now, if I go inside the homepage, I'm going to create a new class name. Actually a new class name, yeah. P particles. Don't name it. Particle js. Dynamic like this. And like this is going to override some of these styles from the bug JS library. So name it a different name. Alright, so in the home styled in here, I'm going to run the amount to render the particles, particles and it'll add them here. Copy this particle js. Whenever position. Relative. Save. Now let's hope it's not showing up. I think when I went on the homepage. So if we go to app.js, after the lines, we need to render the homepage. Alright. Stout isn't undefined is on the homepage. Go we didn't impose tout. Okay, Let's sing post out from cell components. Safe. I think everything should work now. Okay, and now we have some particles. But I think this particles, oh, I don't know why they're not working as I expect them to do was have done some customizations. Find those customizations that are working. I don't know. I let's see why they're not working. Particles. Let me try to remove this class. Oops, the sinner working and the noise. Okay? Of course it is particles down here. I'm going to do position absolute 0. Pedagogy yes, particles, 100 percent. All right, I think I'll fix these particles later. Let's forget them now let's do something else. They should work differently. Okay, now let's do the main content. Okay? I'm just trying to wonder whether general, but forget about the particles will fix them later. Okay, make sure they have a position of absolute and the homestead its position relative. Let's see. Right after the the particles, Let's do the main touch type bulb graffiti. All right. Into the topography relative in H1 and they span. A span is going to be Lorem Ipsum. I am. The RAM Ipsum. I am I am. I don't know. Yep. And then below, we want to have a paragraph with lorem 20, but 20. Okay, after the paragraph, we have icons. Icon, Facebook. Then we have GitHub, and then we have YouTube. And here we're going to input a few icons. Face, good. Facebook. I 20 from material UI, UX, UI icons, It's going to be Facebook. Facebook, and they're not going to do Git Hub. I can actually get up with the issue broken. Kitab, YouTube, done here. Facebook, we're going to do Facebook. I can get up, we're going to get up. I can oops, get GitHub, I can teach you, but you can save. All right, There we go. Now let's position this to the center. Center full-page typography. Typography, position, absolute. Absolutes, top 50 percent. Left. 50 percent. Translates. We're going to have minus 50 minutes switching to send everything. There. Everything is centered now. Okay. And so the topography again do text align center. Okay. I want all of the H H ions. To have a white color, global H1. Font size is going to be, let's see what it looks like. And I think four or five remotely too big for him. Yeah. I don't know why the spine is not changing. That is inside the H1 adenoids I changing the font size. This is finance IDH1. And she'd have some font. The color, it's going to be a white color for this plan. And a tariff. Primal color, primary color. All right. And once you eat the width of this main container here on page actually step or graphy is it's going to be 80%. Yeah, I think it's this end is more I hit it a bit more text here. Five. Yep, makes sense. After the paragraph, I wanted to just tell the icons now, you know what? I'm going to give them some class. Actually. They only something in common, icon, icon. Icon, right? And we'll select the icons. He said the typography, icons. What's going on of icons and then is in here with ICANN. Border. Two pixels solid. Border color, display of inline block. Okay. I'll do flex, display flex, and then align items. Center, justify content. Center. That one's also going to have display flex, test fat content center. Right? Now let's give these icons a bit of padding. So it's SVG icon and then SVG, it's going to have padding. My RAM. Let's do this margin. Okay? I think that works. Border-radius. Okay. In the margin is way too big. And give it a 0.5 Fran. Yeah, makes sense. And they're called the 2011 margin top one gram. Okay. I'm going to give them a bit of a margin. So I don't want the last child. And on the last child to have that margin. Last Child. Tlc margin. Margin, write my RAM. Okay, we're good to go. Point. So if I have when I have a HI and went to bed one color, it's going to be our primary. Click on color. Primary. Actually, the server is not supposed to be on the icons themselves. Yeah, yeah, they're supposed to run the, whoops. Dividend. Yeah, that's obviously these have a book Runge-Kutta is supposed to be border. It's going to suppose to be, how much did they give the border? Two pixels at the port is going to have primary color. And the icons themselves, I want to have the color of primary color. Right? Makes sense. Now let's give them a transition. There were things that David tradition of 0.4 seconds is in his out. Okay. You know, I forgot something. These icons are supposed to be. There's also be links. This case a point it's not supposed to be in here. Oops. What am I doing? Care sub-point supposed to be in here. These icons are supposed to be links. They're supposed to take us to external websites. Changes too. Oops, I'll change this to an anchor tags. Okay. We're going to have an H ref. So if you want to send this, I am, I contain external website. You need to use HTTPS so you can send it to external websites. So test distinct here, CodePen. Then down here, even H ref as well. Same as done here. Oops. H ref is going to be alright now Save. All right. Now now it takes us to external offsets. Could write everything works as intended. To specify things up. I'm going to give these have a different colors for each one to make it red. Youtube or damage. It's I can use you. Copy the icon Issue. Icon. Youtube border to pixel color. Issue 1.5 on TV. Now for this one, and instead of using a variable, I can just do it. Actually LF, something else that border red. Android. Alright. You choose Fred at my show, what kind of GitHub? I think many kind of a GitHub is purple key tab. Now what I'll just give it a purple color. I can get hub. Okay. Yeah, this makes sense. I'm going to fix this particles. The next video, I think yeah, I'll see you in the next video. I'll fix that the properties of the particles. I'll be back in a bit. 8. Particle-Js Fix: Welcome back. I've fixed the package AS actually the way I've named it before. It wasn't correct. So think is fixed now. So this, these are the properties that we're using. Right? So inside the homepage up here, just to give it a div, particle container, political con, container. And then in here we're going to input the particle. Particle. You can measure, you don't emit particles. Dynamic like this. It should be particle. Particle. It's coming from the components. Yep. And then we need to import the portico in here. Important particle, particle from actually is from the components. It's going to be particle and then save something wrong or everything works now. Okay, I think that's it for this fix. I'll see you in the next chapter, actually on the next video and an acceptor of Sierra next video. 9. Routing With React Router: Welcome back. Now let's work on rotting the pages. But before we do that, let's update this towels for the navbar, we need to do some minor adjustments. Go to the global style. Actually for the anchor tag, I'm going to change the font size to one rem. Okay? Yep. So this should be one RAM. If a good objection, navigation. I'm looking for this anchor tag. Yeah, give it a font weight of 600 and let us facing one pixel. Okay, let's increase the depending a little bit. Whereas padding. Let's try point 45 Ram. Yeah, we're going to fix this error. When we have an element's, the font is another bright anymore. We're going to fix the error later. It's just a minor effects, but let's focus on doing the writing now. All right, so inside the pages and when to create like a formal pages. So we need the about page. We also need resume, page, portfolios, page folios, pays, plugs page. Finally, we need a Contact page. All right, now we have all the pages that we need. This touch doing the routing goal, instead the ArcJS. So the ab.js here is copy this homepage, actually cut it. And then we need something called switch from React router. Switch. All right? And then we'd route. It's coming from a browser to before you do the mature. Mature, you import the route switch from literature don't. Okay. Surrounds path is going to be. So this is the homepage. It's just a slash, right? One link to be exact. Okay, so we have home. But about, and then we have resume, portfolios, blogs, and then finally contacts. Blogs. And then contact. Okay. Now let's go inside. The navigation for the homepage is just a slash note home. Right. Now are re-rendering the home component here. So we need to change the components. Okay, So now let's say that the components of ARDS, resume, folios, blogs, contact, make sure they match. The names match. Let's say an app js, Let's compare the names about resume, Portfolios, Blogs, contracts. All right, I think the name is Mitch. Now what we need is to render the correct components. Remove this on a boat. I'm going to render the about page component. About page. Be sure to input the upload page component up here. About page or pages and then About page. All right. What page and then resume page. Resume. Page. Resume after resume. Portfolios page. For this page after that we have contact and blogs. So you have broke first book's page, page, and then you have contact page. Contact page. All right. Finally, homepage about resumes, portfolios page looks page, books page, and then we have the Contact page, page. Save everything. Something's wrong. Let's see what's going on. Well, you know what? I'll pay you say empty. About page save book's page. Resume page. Okay. Something is going on here. All right. The home stays active. Gives staying active. So we need to make goods, et cetera. All right, let's see why that's going on. Navigation. Okay. So if we go to bed to the navigation, make sure it's exact. All right. Okay. Now it's exempt. It's working as intended. Okay. I think that's it. Now we can transition to the about page resume page, portfolios, beige books, page content, phage, end bit on page. Alright, that's it for the routing our See you in the next video. 10. About Page 1: Welcome back. Now let's work on the about page. Alright, now go to the status page. Styles up, I mean styles folder and create. A new component is going to be layouts, JS. So in here, this is where we're going to keep water for layouts for the website. Export const. We're going to create the main layer for the whole page. Main layout. So we can reuse this layout across all pages. May layout. So it's going to be styled. Div. Okay, so in here, I'm going to give it a padding. Top and bottom is going to be fair for him. And then left and right. Actually, I just leave depending fair, from across top and bottom or from left and right to left and right. Save this layout. So now let's go to the About page, ponens pages, web page. Okay. About styled shoots because two df.loc is going to be a section. Section. Actually. Several see this towel. And it's going to be a div section actually section. Section. All right, cooker this right in here. I'm going to input the layout. Important, the individual layout, men layout. We can do as many layouts as we went here, and then we can just export them. Alright, so now you just need the main layout. Instead, the about page layout from is in this style is actually spouse layouts. And then save now in here, we're going to do the main layout. You know what? These are both stowage to be inside the main layout. Main layout. And then in here we're going to about age. Like so. Now if I do an H on as a yellow product page, whatever, and then refresh. And now is taking ages to refresh on what's going on and what's diode is a sign of as never used. I'll use a boss told Noah but all right. A bus diode. Something's wrong. How could the page I'll rerun the page. I'll cancel this. Yes. And then MPM sets. Let's rerun it. Here. Let's see what the problem is. Alright, you know from a bud page, okay. Go to the About page, delete this. So before we do that into the components folder, Let's create a new component is going to be title component JS. Inside the title. I'm going to have two props is going to be tighter. End span. Nf2 within emma potato and wellness plan. Actually the spine, I'll put it in sedentary time span. And then span. Okay. Title style is coastal styles. Dot div. In here. I'm going to give positioning relative. This replace with the press the Dave relative. It's going to give it a color of white. White color. What color? Font size, 3.8 RAM. Font, weight. It's going to be 600. Right there, 6,600. Okay. Before we do anything, let's go to the About page in here. We're going to rent a table component. Tighter. Weave, Plato, Dataproc. In here. We're going to do about the same as this one. It's going to have about me. And put me right in here when you do text transform, It's going to be uppercase. And then here we will understood the spine, front white and red color. It's going to be far. Let's go to the global styles. Ribbon light actually know is going to be parallel. Do I have NS color for this one? Let me look for some colors. I just put a fixed color here is tests that have reduced opacity or if the colors, all right? So now the font size, it's going to be more than this. Okay. There it is. This is the span. This is the title. I'm not sure what for what font ways that I've downloaded. I'll leave it and then 100. Let me see if I can do this. Now. So I can say, so it does go to make an equilibrium or bored. Okay, I'll leave it like that. For the x2 is going to have a position of relative plus relative. And inspires me to be able to see enough absolutes. Absolutes left 0. It's going to be 10 percent. So inside the H2 is going to have an a after pseudo element. Let's say what that before. Before pseudo element div. The width of eight RAM, height, point 33 RAM. You know these values, I just random values. I'm just coming up with random values. Then are we tend down or sad or anything? And then click on color on this light color here. Alright, let's pick one color. This is the index for this band. It should be minus 1, minus 1 Z index. And the top make it 20 percent. C index. Yep. All right, now we need to do the after pseudo element. So we 3D content and position absolute bottom 00. All right, There it is. I want to increase this to 12. Yeah. The thing that works for me this one says is way too big. I'm going to decrease it as or PhD is going to be three Ram. Yeah, I think there are M line through them. 3.12, I get a loop it. Yet the ribbon looks fine. Right? Now for this width, I'm going to have to decrease it a little bit. Seven. Similar to preserve and said Well three added outside. But for right now we need to border-radius of 10 pixels. Right? 15 pieces for the whatever, yes. Yep. And then we're going to copy this and change it to after after. What we want, what we need to change the background, say I give a primary color where I save. This is the after. So the element left 0, left 0. Right? Now I'm going to decrease the width of the after-school element to ramp is too small. All right. Yep. And then I'm going to give us a little bit of padding on the H2 pitting proton while rem too big and dew 0.8 ramp. Right? Yeah. Then that's fine. I'd say when for the span the top, I'm going to increase it to 30 percent. Okay. I think that's it for the title component. Now, let's move to another section. Or in the components, I'm going to create loops. Yep. Components. And what do creating new component. It's going to be image section, section two, gs. All right, So for the main section, I'm going to create a new style class. Styled standard. Def. Copy the image they can stout. Okay, so in here I'm going to import an image. It's going to be late anyway. Image it from the dots, and then resume that JPEG. Ok. In here, I'm going to have the right content. And then left content. Right and left content. We want to know how to do the image. It's going to be those main image. Okay. So for the well, this is several savy left. Left and the silver SUV, right. All right. So for the right or the right, I'm going to have something called subtitle. Subtitle. It's going to be an actual span. Iep. Remove the letter M here. And then this is the subtitle after that paragraph to paragraph. Okay. After that, I went to have some about in for whatever the four dots in here in full. All right, so in here I'm going to have multiple p elements. No, I actually want to. Yeah, I live program elements. P. This will be your name for the name, age, nationality, and allergies. Or you can use in at least unordered list. Whatever. It doesn't matter. Now, which is I think I'll do. What? Full name, nationality, language, age. I cannot do location. Location. And then finally, one more graph. This is going to be safe. It's alright. Okay, Copy this. And then the tighter just inflow. Name RAM. If some H6 nationality, Spain, Spanish, I don't know. Expand Spanish, Spanish, French, and English. London. And then for the service and when to do freelance. Right? So make sure this course one the full name because once to this. Okay, now let's do some styling. Let's see what do we have before we do anything? Well, before we do that, let's go to the About page and what to render the image section in here. Section. Yet, I'm going to render the image section. Now let's start this in a second and went to put the screen or my second monitor so I can see the setting I'm doing. So for the image section, I wanted to do a display flex in here. Display. There we go. Flex. All right, after that, and I'm going to select the right content. In the red content. Content. I am going to select the body and four. And then I'm going to the display flex. All right, let's see. All right, so before we do that, let's go to the left content lifestyle. The image is very, it's way too big. And left content. Emg with 90 percent, with 100 percent, right? So it makes section in this image. So you had to have margin top actually meant the top and bottom. So under the no, no polymyxin top? Yes. It has to be more than two up to around 02:00 AM. I just give it five. Here. Everything looks okay. Okay. So now about Int, actually the red content, the subtitle. We don't need this div to go next. This one was the div. Just leave the H4. Who has content? Content in here, I'm going to sell the HFile, right? Font size. Font size. I'll give it to a color. Include a white color. What color? And the noise not updating the cells inside the span. But just repeat this again. For this one, which is due the font right of way too much text in here, will be just the text. And then paragraph, that paragraph, the paragraph after the H4. So after these 84 and I do have a paragraph. It's going to have a padding. Top and bottom, left and right 0 RAM. Right. Now let's go down to the bottom four. I said they're button for with potato potato chips going to either planning of them. Left, right, top and bottom. Why RAM left and right to 0? Oops. Padding top and bottom by around 0, left and right. Rem is way too big. Point that RAM four. Alright, for tighter, this in for I want to give him potato, some petting. Petting, right? It's going to be four m six clamp. You know, as a mother thinking this, I'll just leave it at two or three. Yeah. Okay. I think this looks somewhat okay for now. We're assuming this tiling. So don't worry. Okay. Now, to increase the font weight of the potato potato paragraph. Front, wait. I'm going to say fondly. Still 56. Yep. Four out of 600, that either works. All right. Now, go to the components folder and create a new component loops. I'll bring the page. Okay, so now here we need a button. So we're going to create a Component, button component. We can reuse it across the pages. Alright. Now let's create a button, primary button. But under JS. Step out, does this button is going to be an anchor tag. We can rub this button to an external website if you wanted. Okay. Tighter. Because we want to make this title dynamic so we can just name it whatever we want. Alright, so now I'm going to do Runge-Kutta. It's going to be our primary primary color. Okay, Let's give it a padding. Padding top and bottom. Why RAM? Then 2.5 m, left and right. And a color of white, fella of wide QSR pointer. All right, let's go to the image section. After the info and went to render the button, primary button, primary button. It's going to give potato. Just going to be Download CSV. Okay, So this So button. Let's continue styling. I'm going to put this website on another page. This continuing this heading. Display inline-block, inline-block. And then font-size inherit texts transform. Case. After that, I went to reduce this value to this spreading to a tram. Tram. Alright. So now let's. Do some animations on hover. So after 2.5, to give it an after pseudo element, content is going to be string position relative depend Arendt. And then position absolute for the after pseudo element. 100%. Right? Let's say 20 percent. It just for testing purposes. We're going to color red. It's only for distinct purposes. Excuse me. Right? Now, Let's see what we have. Whenever we have a suit element after pseudo element, it's working. Now let's continue with this tallying. Do lift 0, bottom 0. All right, and then up here I'm going to transition or transform, but a transition, 0.4 seconds is an ease out. Okay? Yeah. Just remove this code. Don't want to bother with the error. But the warning, right? Seems like the transition is not working. I think we should add that transition inside the V after Sudan mend itself. Let's see. No transition is now working again. Transition, there are 14 seconds. Let's see y, 0, the width. So undo it to be a 100 percent. Okay, We need an initial value. So when transitioning from 0 to 100%, right? And went to reduce the height. Actually, at this point. I think when forums too big or too. Okay, fine. Let's give the button. Oops. You may section. I'm going to put this button in. Actually, never mind. Oh, do the red content. Read content and went to give it a padding bottom 1.5. Let's see. Oops. Let's see why. Well, after they are bought in for the subversive, the padding bottom right content. Type this about n for this one. Yep. Alright. The color for the have a, I'm going to change it to white. Primary button is going to be white. All right, and when do we come back and fix the transition later? Alright, now let's work on something else. Actually, we need to reassess this image a little bit. I'll give it a fixed height. This image. I'll do it, I'll give it a nice fixed age. Let's say for DBH. And then down here I'm going to do height 100 percent. And then object fits. So it doesn't stretch. It's going to be cover. All right. I think it's for the vh is not enough. You know what, I'll just leave it as is for defending a fixed height. Okay? I'll just leave it as is for now. Okay? So now this intersection is over. Let's do something else. Services section. But I think I'll have to come back to do this as section on another video. Yeah, I think I need to take a break. I'm a little bit Edna. I'll see you in the next one. 11. About Page 2: Alright, now let's work on the service section. Go ahead and create a new component. It's going to be Services section, DOJ AS section. Right now before we do anything, we need to create another layout in the layouts. Good as Taus or is it layouts? Okay, so in here, we need to create a new layout. So here, copy this and paste it. It's going to be in a layout. So the pitting is going to stay. Top and bottom is going to be fed from, and then left and right is going to be 0. Okay, in here and says section, I'm going to import the inner layout. Layout, styles and layouts. Right? And when sat on the whole thing with the inner layers right down here and create a style. So this is second style. We just goes to stereotype section. So if you have any here, Services section stout. Just copy. All right. So down in the About page after the May section, I'm going to import the services. Services section. What do dynamic components? Services in? A second first Services section. Components section. All right. And so this section, we're going to enter the title. Title is going to give it a title. So the chair is going to be services. And they'll remember this plan. Therapy services as well. Okay. Something's wrong. I see I still compiling their eyes taking ages to compare. Well, what is this? Yeah, there's something wrong. Say section. Titles are defined because we do not include the title. The dots components and decides, Well, yeah, now we have the Services section. So because we're using the inner layout, we automatically have a padding top and bottom. Plus a is in the inner layout. So we don't need to worry about the padding. Here. I think I'm going to Italy bit more styles here was it doesn't look but appealing to me. Later I'm going to update this, this section. But now let's keep going with this AC section. Alright, so it says section, I want to create a new component here is going to be service, service card dot js j in here. And what we have actually image. Then title, title. And finally, the paragraph right inside the study section in here. Create a div is going to be services to render service card. And I know it's not auto completing service card. I'm going to import service, the dots, components components service card. All right, so in here I went here, image, probe, image. This one is going to be design. And then title is going to be. Work design. And then paragraph is going to be, you know what, I'm going to put this make it tomorrow cleaner. Paragraph is going to be just giving you a random Lorem Ipsum text. Okay, That's what the paragraph. Let me go ahead and say, Well, actually we need to import this image is first though we're going to use important to sign ups. The dots. Image. Svg, SVG. Let me see, let me double-check the names. So let's design did SVG. And then I went to implant the early events intelligence to the SVG. And then finally, we have gum div. Again def, Yep. I want to copy this service got 2 times 12. This opponent is going to be intelligence dynein for the tighter. It's going to be at Fisher. If I discovered Fisher intelligence at fish, official tally gems. I must say if this is good experience, but I don't know whatever, right? Artificial intelligence. And then here I'm going to give it a game dev. And then document and then save. Something is wrong. Modular phone. So cessation services section components. So second, yes. What's what's going on here? Let me see something's wrong with the image. It's game def like this. Alright, save and refresh the browser. Once you have an error, when you save everything, actually, save, save, save, save. All right. There's nothing yet. Let's go to the service card. Service goes to out. She's close to give service. Alright. Now in here, I'm going to have the quantity k. And then I went here and I found that to be the title. Actually, I've started the image. Img. It's going to be our image. And then finally, a paragraph, which is a paragraph. Okay, now save. We have our cards. Now we need to display flex. Okay. It's actually down here in services. Says it says Section styled. In here, I'm going to select the services. Then display flex, justify content. Space between. Right? Okay, now, let's go back to the says God. Now, before we do anything, we need to give it a background color. Let's go to the global styles and have a look. It's going to have this dark background color. Let's see. Is it the dark one? Let me double-check. Yep. It's the dark one. Since cursed out clubs. Also be only two dashed lines. And I shift the big on, it's been applied yet. Let me try red. Yeah, it's, it's being applied. We can really see very well. Okay, I think this global styles are putting your color background. Let gotta kinda to do dark color. That color to think. Yeah, I'll do that color. Or that color gray makes sense. It's gray. Color gray. Hopefully this helps. And wet Makes sense. So in here I'm going to set the container is going to have a cladding to RAM. So for each card I'm going to give some sort of imagine. All right, I'm going to give it a margin. Margin. Left and right. Actually talking about 1000, left and right around. Okay. Actually, I don't want to give the rest of the and the rest of the items. Imagine that only the middle on this. Let's go to this section. Serves God. This one can make cut. And then you can put inside a parent container. This to the same. Nothing changes, but we can style it. You can select it. Since I said this is near, we can give it a margin. Top and bottom 0 left or right? Yep. Roughly 1.21 to RAM. And this whole thing, services weren't you have services run to have migraine talk? Okay. Make sense. Let me check what might interplay is in here. Yeah, it's fine for him, so it should be consistent. So it's y prime here. And right. Now, let's continue this telling us. Okay? Oops, I'm staying in the sepsis, got in here. The container I'm going to tell the H4. H4 is going to have a kind of white white collar. White collar. I think the font size is going to be 1.61. Yeah, I think that's though do padding top and bottom, left and right. Well then to have an after pseudo element. After content, empty string, empty string with RAM, bulk on color. It's going to be our watercolor. Watercolor height. It's going to be four pixels. And then position listed here like this. Let's see what we have now. Position absolute. Left. It's going to be 0. But I forgot to give the apparent position of relative is bottom 0. Let's give it a bit of a fading button, pen button. It's going to be, Let's try my level. I think it's too big. We'll see that when we don't need it here, we need depending on the paragraph. Now let's increase the width of the after pseudo element. Yep, I think this will do for RAM. And the height. Oops, height, or leave it on three pixels. Two pixels. And foreign for the width and the border-radius of 10 pixels. Okay? And then finally the paragraph after the H4. And let's start the part above. It's going to have a padding. Top and bottom is going to be 0.5 grams, left and right, 0.8. Yeah, I think this makes sense. Right? Now let's do the the border. What left? It's going to be one pixel, solid and water color. So I know you have to put a left one it would across the whole thing. So we need to put a left, right or the left. Need a Buddha, right. Put a bottom. And top. Top. Top. Top is going to be eight pixels. Yep. Okay, now we need to edit the hover. So when we have a discard one-to-one to happen, well, we wanted to check the what a top. Click on color to the primary. The primary color. Okay, Now it's working. And also we want a transition. 0.4 seconds is in, ease out. And now we have a transition. But I want maybe to lift up this cut. When we have a, I want to transform the code. To transform translate the y-axis. Only a few pixels, maybe three pixels. All right? Yeah, makes sense. Well, you can do minus three pixels if the transformation to go up. So you can do ionize, but I wanted to go down so it's three pixels. All right, Make sense. Now, let's fix this button. However, after pseudo element is the image seconds in it, in a second. It's actually inside the button. Primary oocytes will be primary button. I'm going to rename this to primary button. I didn't know I was a primer. Is an under mess up everything. Primer. Right? Primary. When did we import this button? It says that the primary, right. Now we're back to where we started. We said the battle and we want to start the after. So the limit we're going to do after, copy everything here. The height. Okay? Now, say, let's see what's going on. Position absolute. We want the position here and the content here. Wonder with the blind percent we understand on 0. Here. One sine 0 height. Remove this positioning. Okay? Now it's working as intended. Or 20 should do. Left 0 here. 0. Yeah. Now it's working I think, and read just the opacity. Opacity of this pseudo element of wind. My, thanks to do 0.7, Let's see what it looks like. Yeah, I think that's fine. Right. So now efforts have section, we're going to do the review section. Alright, so close this plus this plus everything better to do the sales section. Now create a new component instead the components folder, it's going to be reviews. Section two secondary js. Right now let's create the styles for the views. We use towered stout, but actually started section. Section reviews doubt. All right, now you just had, but before we do anything, we need to import the way out from inner layout. From our layouts. Dot-dot-dot styles and layouts. We're getting the individual layout in a layout. Layout. And then here we're going to render the title component under the tighter measure to input the title. I don't know. I start important the correct weights. Let me see what's going on here. Oh, if I click the wrong tighter, it's coming from material. You I know this one. I don't know why some are referencing my title component. That's fine. Remember we need a title prop. It's going to be use a span. A span crop is going to be the same reveals. And then close. Don't forget to input the tighter and tighter components. Tighter. Right now we need to render the review section down here actually says section reviews. Section. I don't know why it's not inputting automatically. Review. Right now I have the first section. Right down here. We have the reviews will waste a lot of space here. Let me see why. And why this space here. Dictator. There is a thing that depending on the tighter the top and bottom. And another pairing FEF round from the inner layout. I don't need fitting for the title I needed for the hopes for the actual content. In a layout. Just remove it for now. All right. I'll save. Just commented so we didn't get this one. All right. So now I need to fix something. I'll fix the data for these lines. They're not coming down. This should come all the way down. And then coming all the way down. We'll fix it later. Doll, get us continue. So now in here, that's when we need the inner layout. Layout. Right? I'm going to create a new component again, it's going to be review item two, js. View item. I might have the text in the text style. And that's Section D If text. Okay. So for the text, I'm going to do I'm going to give it a fixed height. I'll give it a height of 100 vh. Yep. They'll do it a width of 20. I'll give it a list for now, Angular with toner. So now let's do the paragraph. For the paragraph or to have a padding by REM top and bottom and 0 left and right. And if reading here is going to be, the pinning around is going to be top and bottom to RAM, RAM left and right. And then we want a border. What I left when I left, six pixels, solid. And then our watercolor, right? I think that's it for this service loop text. Okay. So now let's add some text enhancements to the reviews. Diffuse. Down here. Select reviews, multiple render, preview item. And there are plenty of text. Lorem. I'll do it down here. Just copy this cut here. And right here you item is undefined. Okay? Texts and review item. Again now if the review item and Bitcoin colleagues also be the same as this one? I forgot I've named it. That gray. Right now we need something they didn't know it and I don't know the name of this little thing down here. It's like I don't know if we've got aisle, you just see what I'm doing. So we need an after pseudo element. Content. It's going to be an empty string. For the position is going to be relative, is dependent. Position of absolute, absolute left. It's going to be point for RAM, RAM, RAM, RAM width point, right? And then bottom 0 for now, the, just for testing purposes. And then for the watercolor. Watercolor. This was supposed to be water. And then watercolor. Watercolor is going to be, it's going to be this gray. Okay? Play. And then if this is top-left and then transparent, transparent. And then this gray again, right? What is Tau? Which is going to be solid, safe. It's now showing up yet and let's see why. Okay. Let me try top 10 percent. All right, There it is. Now it's showing I want to give it a bit of a left to change it to RAM and think. Okay, now it's showing I went to decrease the width to render two of these. Just random, random text. Okay, I want to render to. So I'm going to do a display of flex for the views reviews. And down here, display flex, right? Xr. And to give him a list, Let me try. I want to go and I'm not going to get the metric side. Find them to adapt to the screen size 2% around them to adapt when you decrease the width of the page so that when to adapt. Okay. I wanted to keep the first one a clean and what I'm going to give them loops and padding. So not not the first child I think. Not first-out hopes. Not first-child. Last-child to margin-left. Okay. Let's see. Right. Okay. So I think I'll do to ram. Okay. Now to ram thing, the spacing is fine. You can actually implement a feature where you can drag and cycle through. So some reviews. But I'm not going to do the feature. I think I might do some fetus data, but I'm not going to do it now. Only return one. I'm not going to do now because it takes a lot of time to implement it, dragging and cycling through the reviews. All right. I think that's it for the for this but page my convey grace and resize this image. And yeah, that's it. I'll see you on the next section, which we're going to do the resume page. All right. See you around. 12. Some Monor Fixes: Okay, Um, but to do minor fixes. So remember for me, so the project our lines going all the way down. So we want to make them go down, no matter how much content do we add on the page. Right now, go to the lines inside the ArcJS. Look for lines and then for the min-height, change it to 100%. And then save. And there you go. Now the lines are going all the way down. And now let's do the image. We need to resize it. Right? Got to Figma. Go to Figma and making you shape here with a resolution for the width, I'm going to do 760 and for the height and wanted to fly 55. All right, Now File and then place the image selected resume and put it there. Now I want to change the image from image 2 for our future crop on to reposition the image. Okay? All right, I think that's it. I'm going to export this image. Export. And then it's going to be resume. Just replace it. And then let's see the page. All right, so now the page has been updated to match our current image. All right. I think I will give it a little bit of more, more height here. Let's try that. 760. Try 780 books in it for the width, right? I'll try 5757080. Doesn't seem like it's making different. Let's just do six hundred six hundred, and then let's crop the image. Okay. Thank you. Yeah. It's cropped fine. You can want to shift to make sure everything goes the same way. Now let's see, Now let's replace our current image. Let's see how it looks like in the web. And use small height. Okay? So 650, 650. Let's crop it. All right. Well, I don't know how good it tomorrow. The last thing I want to change this image for 7670. Alright, I think this looks fine for me. Now. What? You can update it as much as you want, but I think this will be the final time. Okay. Yeah, I'll see you on the next video. We're going to work on the resume page. 13. Blogs Page: Alright, now let's work on the blog page. And now on the last video I said we are going to work on the resume page, but it's going to take more time to work on this resume page or the portfolios page. I have limited time to record this video, so let's go to work on the Plus page. Doesn't take that much time. Alright, so go to the flux page. Instead the data, I'm going to create a new data file is going to be plugs to JS. So in here, I'm going to import some images loc1 from the images folder, and then plugs, plug one. But SVG. Let me double-check the names of the images, image, blogs. Yep, I think it's correct. So we need for images for the block section 2, 3, 4. It doesn't matter what order I put them. Okay, I'm going to create an array, an array of the blogs. It's going to be plugs. Alright? Now inside the blogs I'm going to create a few array elements. So we need luck for plugs. The more you have, the more images you're going to need. So for now, we're going to only four. You need an ID. And then we need actually, I just give it a title and subtitle. Title. I gave the title. Okay. Session gene optimization. All right, I think that's fine. Id and then we need what else we need? I think we also need a date. Okay. So for the date, what is today's date? 01. And then month, which is alright, so tight auto ID date. And finally the image is going to be the image, that image block one. And then copy this three times 123. Put a comma, comma, comma. They change the ID from one to 234. All right, so now let's shrink the image 2, 3, 4, or I save. And then we need to export. Down here, it's what default. Alright, so now we're done. Let's go to the blog page. So instead the blog page. Let's import the plugs from data. And plugs tell this because this tiled roof. Copy. Replace the div. All right, so now let's map the books. So well to get each plug, right, I want to return a div ops. So what's the big curly braces? All right, so I'm going to return a div. Alright, we need a key. So the key is going to be LID. Okay? We can actually use destruction in here. So const ID. We also need the image. Actually, never mind. The case goes to OK, dot ID. Okay? So in here, I want to make another div is going to be image. So for the image and went to have an image in here, the source looks for the source is going to be blog that image. Okay? And then after the image, we're going to have a title. The title is going to be an edge four. He's going to be plug dot title. We did the days later. Now, let's just do what we have now. Alright, now we have two plugs that are showing up. Now let's do some selling. Okay, I forgot something in here. We need to render the title component is tighter. That is going to be plugs. And then we have a span which is going to be also plugs. Don't forget to input the tides are from up here. You can put a title from my days I kinda minutes per title from opponents and then tighten. All right, let's see if the title showing up. The tellers showing up, but I forgot something. Do you remember our layout? Blocks page? What this does to the layout? We do need import is its main layout. Main layout. And in our layout from the tiles and then layouts. So in here, what I should do, men layout. Absolutely can put this inside the main layout. Looks alright. Now paste our content down in here. Now she'd have a layout. All right, now we have a layout. Okay. Copy this is copy this again, I think we need the inner layout in a layout and then copy the continents. Then they see, Okay, good. Now it's working live the spacing. Okay. So now let's continue this tiling. Give this div a class name. It's going to be, it's going to be a bloke. Down here. We want to start a blog. Display is going to be agreed. Agreed. We need two columns, grid, template, columns, literals, but columns. Oops, we need to repeat. Repeat two columns and 185 middle. They, they'll all have the same width. All right. See, plug. Alright, now let's resize these images. So big. Plug, image, width 100 percent. All right, and then wait to tell him the image with a 100 percent. Okay. Oops, on blog dot ID block. This block class is supposed to be in the inner layout. Save. All right. Remember this slide from 100%. The image she lived like about 70 percent of the height. That's one. Secondly, see what's going on here. All right. I think 65 percent loader. And then object fit. So it doesn't stretch out. It's going to be cover. Think 65 is too low. Let's go to 70. Okay. Let's see. Okay. I think I'll leave it at 85 percent. 85. 85. All right. I think we had 25 is too low or the 19th. This lever be a space for the title. Okay, I think that's fine now. Now we need a grid gap. Read the Quran, and then Draw gap. This is going to be three ramp. Let's see, by this looks like right. Now let's give it a padding. Top and bottom, left and right. Okay. I think we need to give it some form of a bit Mancala. Let me find a good one color. Let's go to the global number of styles. Like three. A three hour day, if this color is this dark gray here, copulas, but one color, and then paste it. I can then save. Let's see. All right. Oh, this was to be a roll gap. Freed up. The gaps now showing let's see why. It is the by this pick on cholera. Wait a second. Should be here. Plug item, blog. And then the blog item. Okay? And then this padding is supposed to be in the blog item as well. Okay, I think I'll do one room. Like so. Okay. Now let's turn the H4, this edge for actually supposed to be an anchor tag. So we can go to an external website. You can put whatever, whatever length you want here. So this is going to be plugs up the blog link. And then down here in the blog data source, or is it down here? Because I need to add a link. So make sure you have the HTTPS protocol. And then you can, let's say cougar. Mature. Yet the HTTPS protocol. So it should look like this. All right, I'll save. Now let's do the title, style, the anchor tag, font size, color, color white. All right. Let's zoom. Reaches the font size 1, the edge plan. Okay, now, need to give it a QSR of pointer. And when we have the color to change to the primary color. Personally, I forgot I've named it. Have a time changing. Let's see why. It's primary color. Primary color. And then transition 0.4 seconds. Is it and these out? Okay. All right, and then when we hover this image, I guess our pointer. And then copy the transition here to trans transform. Rotate 40 degrees. Right? Let's see. Down here, let's do overflow. He didn't he didn't. I think is supposed to be in the blog item. Okay. Yep. We can also do it here as well. Let's see what yep, makes sense. Remove it here. So it says B stays in the image, image container. Okay, let's do 10 degrees. And then we're going to do this K 1.1. I think the ten degrees too much. Let's do 31 up and one scale. Yeah, this makes sense. Alright, so now if I click issues The me to an external website. All right, so one thing is, is we intend it doesn't look like it's a white color. Let's see why What's going on. The thing is supposed to be the other way around. White-collar. Alright, Now it's white. I don't want to change the titers. Okay. All right. Now we have an issue down here, so we need to fix it. Okay, let's see why it's not. So let's look at probe item denoising it, adapting together with the title. All right. Don't define the height of this image. Remove it from the height, and then for the anchor tag, give it a padding of top and bottom is going to be to ramp. Let's see. Okay. By defending is now working with, let me see the image. Padding bottom. Okay, give this image opinion bottom, 0.5 ramp. I think this will do. Alright. I think we're done with the block section. I'll see you in the next video thing we're going to work on the resume or the conduct section. All right. That's it for this video. 14. Contact Page: Okay, so now let's work on the next page. Right before we do that, I need to input a few images for the blogs. So if you go to the data, I just need to change the names of the images here. So block 3 continue to 324. Okay, I forgot to do this, alia. Now we have different images. All right. So now let's go to the contact page. Festival. We need to input the layouts. Layout, layout. And then we have in a layout from snowfall styles. And then layouts, ups. There are going to do my layout. Contacts page Stead, right? We also need the potato. So I'm going to input data today, so dictators and entropy contacts and then span, and it's going to be contacts. So okay. Oh no, something's wrong. Import data from. All right, so now you have the contact. And then we have inner layout. Okay, so inside here I'm going to have intact. I'm going to actually, I'm going to create a new div in here. You know what? I'll give this a class name section. And then for the inside here, what do you have? Left? Content and then write content. So those would be class content. Okay, So we're going to create a form. Just remove folks with the action. All right. So in here I'm going to do farm fields. Okay, so in here I'm going to have a label name. And then it's going to be enter your name. Id is supposed to name. Given inputs. Get with an ID of name and a type of text. Text. Okay? Now let's copy this couple of times. Maybe maybe three times, I think. All right, so this is mail. Email. Alright. Into your email and then subject. And then finally, take Syria. There's any day laborers or enter your message. Okay, and now let's start with the selling. Before we do that is select the contact section. Forgot to use the style. Come up with this. Oops. Copy the style. You can put it around. Which around the inner layout anyway. Okay. This is still the same. It doesn't matter. Alright, now the next section, we're going to display grid template columns, whole idea of 2. Okay? So now let's test telling the inputs. In here. I'm going to select the form. Inside the phone is far-field. Give it a margin. Top point to ramp. Maybe. Yeah. Do position of relative. All right, so inside there we have input and the label. So let's start selling the label and then the input. All right. So for the input and what do you ever border? One pixel? Solid. Remember watercolor? Sit color. And then we need to note the outline. So she outlined in it they're gonna have transparent. Yet that's coming up. Height point. Let's go on at the height. And petting what prediction it can make it this 0 top and bottom, and then 15 pixels left and right. Okay, I think I should increase the height of it. I'll do it in pixels, actually give 60 pixels. Too big. Let's try 50. Okay? Let's do the labor or do not second and see. Let's give deform the width 100 percent, right? And then we want this ability of a 100 percent, right? And then position and absolute. I think I'll give it a credit pass. No padding here. No, it's fine. Left. And two, let's say 20 pixels here. Yep, I think that's fine. And then top minus ten pixels. Let's see which one works. Okay, I think men as theta1 pixels works fine. Right? Display, inline-block, and then color. It's going to be for loops. We need to get the main background color, paper color. Yet this is the one. And then we save this. Go to the contact. Yep. Okay. Let's see. I think I'll give it a bit of a padding. Top and bottom point for m. And then 25 forever left and right. Minus 19 and honor. All right, so fun-filled. Margin top to ramp. Okay. I think at two remarks, find magenta to point to. Here. To him, looks fine. Right? Let's give this a try. Inherit the level of the input. The padding is too big for top and bottom. The label books. I'll remove the padding. I'll give you 0. All right, Make sense. Okay, now let's do the text area. So for the text area, we also need to give it five. Here it is r. So we can have a nice, oops. Okay, So for the text area, we will set the label fulfilled inputs and then in here and select texts. Area that ground. It's going to be transparent. Right here, copy these porters or you need the same folder. And then let's look at the outline. Is going to be. All right. I think yeah. Okay. I think this is a bit of padding. I think it makes sense for padding. Top and bottom 2.8 RAM. There, my RAM left and right. Let's see how that looks. I think makes perfect sense. Now, we need also a form field here that fall. In here. We're going to get the pattern. I forgot I've named it. Framer button. Be sure to input the bar, the pattern, fill the components. Okay. We have a few proofs in the button. Let me check what they are. It's just the title, prop title. Scatter be celled. Email. Okay. There you go. Now, if the button I have a fear of fluid needs contact title. We're not going to raise the status or 80. This is going to have a white color. Let's show you're using variables because we're going to do a duck thin. So we need to be able to change the values of the variables. What color? All right, so then we need to offload size h. Well, okay, get in touch. So now let's work on the reverse side. So for the rest side, I'm going to create a new component is going to be quite that item. All right, So for the contact sites and went to need a few icons. So let's go to material UI to get some icons. So I need the phone icon. Alright, and also a need. Then finally, a need location. Right? All right, So now let's replace the div. Okay? So N here, this already to give it a padding. Top and bottom is going to be 1.5 rem there to remember for right. Okay, and then the background color, Let's see. This gray background color. Left contents. And then the right content. For the left content. Got to have some props here is going to be icon as n type of contact one and then left to right. So down here and we did it in No, actually not an image and went to render an echo. And I guess when the layer color actually a good paragraph, there are two icon. And then for the content. And once you do the basics, and here we have the title contacts and then contact two. And I'm going to cut this from this supposed to be here. So we're still gonna contact page right down here. I'm going to get the contact item icon. So this is going to be phone icon. And then tighter. So for the title is going to be do this. This will make it more clear. Title then if contacts, contact one. All right. This number's 230 legit. You can call this number. All right. Contact items are defined, I guess we haven't inputted the contacts item yet. Components. Next item. Okay, Let's refresh the page. We have an error. Let's see what's going on. Contact item conduct page. What's going on at this era of peace and love valid. Okay, and let's see. Get the stretch to rerun this projects. Sometimes we get those silly errors for no reason. Okay. Not working. What's going on? Let me see if it's working after moving the contact ratio. Let me put everything in one line so I can see what's going on. Contact. I'm missing something. I have to turn to. I Fantasia. No, I'm not. I don't know what's going on. I'm getting the error. Okay, So not valid. Keys. Where the error is coming from. This is giving me editor. Let's see here. Okay, I think I'll come back to, to fix this error later. Now I'm going to remove this for now. And then I'll come back later. I'll just comment everything anyway. I'll comment everything. I'll come back to fix this later. All right. Forget about this now. Okay. I think we're done for the quintic phage excepts and went to fix the error. And the next video. See you soon. 15. Contact Page 2: Okay, so now let's finish our contact section. So let's finish the contact items here. Right? I will resize my browser. Okay. So down inside the conducts conduct page, I remember created a conduct. Hm, we need three of these. Alright. So we need a title. Actually, why don't we need a title? I'll name this. This is fun for the title. And then we have icon. So for the icon to be able to use, icon is probes, material you wagons. We need to create a few variables up here. So we need to open the phone icon, close it. So it should be a variable. So now we're able to pass the icon here. Alright. So we need three icons. Actually need the phone, email address, email address. Email I can address. It's actually location. Location. Location. Location. I can. All right. So now let's pass in the another probe. Looks note here. It's here. Another probe is going to be contacts. For the, I'll just put cons for shortcuts. So it should go for contact, contact one. So here you can just put a random number, you can just do plus 66, 89. Just put a random number here. It doesn't matter if you really put. All right, and then we're going to have conduct to copy and paste contact to 07663 blablabla. You can just leave it like that. Alright, so I think that's enough for the first component. Now let's do the second one. The second one is going to be e-mail. So the icon email and then a random email at gmail.com. All right. Oh, it's supposed to be Here. Okay. And then here's some Lorem, Ipsum, a gmail.com. All right, now let's do a final. The final one is going to be the address. End with the location email, net, email icon, 27 roads. And we can just say England here then for the contract to ingest to United Kingdom. Alright, now let's save. Okay, there's nothing yet. Now what we need to do, we go inside the context item. We get the title probe. We have the icon. And then we have the corn one, conduct one. And then I can to conduct two. All right. So for the left content, I'm going to put a title here. Tighter. Okay, Save. Now if the tighter. Actually for the lift content, silver SUV and icon, I can. So we want to have three icons like so. And then down here, in the right content, we're going to have a tighter, this title is going to be actually in X6. So let's do an edge six is going to be tied to and then two paragraphs. So the first one is 11 and then 12. Okay. The contact is now showing let's see why it's not showing. Inspect. So the paragraphs are empty. So I think the name, the naming is wrong. So it's not quite so it's cont. Cont. Yep. And now let's refresh the page. All right. Our contact info is showing. So now I want to give this a gap, a gap between. So remember, it's a grid. So it's at the contact page. I'll give it to the grid gap. Create gap is going to be a column gap, which is going to be to RAM. Right now there's a bit of a gap. Now let's do these contacts items. Okay, So let's say the red content. Remember, so we have got there's left content up here and it is read content. Alright, so inside the contact section, I'm going to select the right content. And then I want to do display, display of flex. And then just fire content space between and then flex direction of column. Okay? So it looks like this. I think this is too much. Okay? So now let's run the space between. We'll give it a minute. We'll do the spacing manually. I'll take it this medulla. Oops. This one. I'll give this a margin. Top and bottom. And then 0 left and right. Let's see. Still not good. Anyway. Okay, we'll do the spacing later. Now let's tell these items. Go to the next item. Instead, the contacts item. I'm going to do the display flex. All right. Next and then align items center. So they're going to be aligned center, center. Now, let's start with the left content. Left content. So these, the icon, this icon here we're just tell it size the SVG, left content and then SVG. So for the left content as Fiji padding of 3M, Let's see how it looks like. What is the bloody I can read the padding should be up here. Let's see. All right, make sense. And then we're going to have a border, one pixel, solid. And then remember a watercolor border color. I think something's wrong with the naming of the variable. It's working actually. I don't know why the board is now showing up. We'll put a radius so those would be border. Just border. Right? Now let's make the icons Every bigger. I think three rems too vague as to to RAM. And then the icon size, let's make there be bigger. Right? This gives you a font size here. Font size of RAM. A second. How do I make these icons bigger? All right, I don't think it's the font size. This to the SVG directly. Font size through them. All right, she essay, I should do the tiger, the SVG element, SVG, and then font size. Font size. Let's try 2.3 ramp. All right, I think yeah, it makes sense. I'm just trying something for an experiment. Okay? And then for the left content, what am I going to do is I'm going to display flex, align items center and just fat content center. Okay, now everything is centered properly. Less reaches the padding to 1.8 RAM 1.8. Okay. I'll leave it on 15 for now. Yeah, I think one perfect, Good. Okay, so now let's give the left content. Imagine right of 1.5 grams. Okay, perfect. Now let's target the right content. We're into target potato. So for the right content with the red content done here, so copy the className left, and then you do right. So for the ride, so I'm going to target the H6 color is going to be our CUDA. White color. Font size. To make it a little bit bigger. It's going to v1. Let's see what it looks like. I think it's too big to 1.2. Yep, that's good. And then padding when forum. And on the bottom, 2.6. Okay? And then in here we have a paragraph. We can make this paragraph in anchor, anchor tags. So you can, they can redirect you to Google, to Gmail or whatever. But I'm just going to live deliberately as a paragraph, you can choose to use the link, doesn't matter. Okay, and then I wanted to give it a little bit of a padding. Top and bottom is going to be blamed for RAM. And then 0 left and right. Think 0.4 m is too much less 2.1. Yeah, I think, yeah, I think this makes sense. So now what we need to do is to space these conduct that agents. So for the context items. All right. Read content. All right. So if I go to the, I think the contacts item down here, I think we can give it a margin bottom. This is just for testing purposes, let's say to remedy, see how it looks. Ok. So now I want to give it a margin, bottom, but not the last child. So we're going to use the not pseudo element, not last child. So we don't set it the last child. All right. Okay. Yep. I think that's it for the contact page. You can resize the text area. Okay? You can always give it a bit of more spacing. You can do 2.5 fem. I think that'll be too big, but I think I'll leave it to 0.5. And now see on the next video. 16. Skills Section: All right, so now let's work on the progress bias. So let's create a new component is going to be skews EJS. And then we're going to get a functional component, React functional component in export. Okay, so in here, excuse tout, which is close to stout perception. Ups. We also need to before we do that, I would need the, you know, you can do this or we can do a man layout. Main layout. Remember we need to import this main layout. Men layout. And the inner in a layout. Styles and layouts. Main layout. Yep. And then before we do though, and to render the title, what's going on down here? Alright, so we need to render the tighter. And then he said the tighter we have fatigue. The title is going to be resume. And then learning this pan is one prop, which is going to be resumes or resume. And then we'll close the component and then we'll do in a layout. And then we close. Now let's import the title inputs which are from dot-dot-dot components and then title. Okay, let's save, let's see what we got. Leanna rendering the skills component. So instead the resume. Let's, let's render this cuz import a great skill from components and then the skills, skills must kill. Right? Excuses and I defined skews. Skews skills. Okay? Now if the tighter Let's work on the progress bar. Creating new component, namely progress AS, and then it's going to be functional component. So in here, we're going to need a few things. We're going to need an H6. This is not a V, The tighter and H6. Welcome to create a few props. Title prop. So we're going to have tighter. We are going to have a width. Then we're going to also have petal width and actually texts I just named text basics. Before we do that actually I need to yeah, potato and then tighter. And then below the title I'm going to create a div, progress, progress bar. Alright. So instead the progress bar, I am going to have the text is going to be a paragraph. And then text. And then below that, I'm going to have a div, which is going to be progress. And then inside the progress, I'm going to have a span. All right. So for the progress. Okay. For the span and what do you have a style? So the width is going to be, the width is going to be equal L with that is coming from the prompts. All alright? So we need to render the progress bar inside this kills. So in here I'm going to render the progress, progress, progress. But instead the progress bar, we're going to have a few props. So the first one is going to be typed. Her title is going to be HTML five. And also below the tighter. What else do we have in here? We have width. Width is going to be, let's try 70 percent. And then all else. Texts. So text is going to be the semester with text, it's going to be 70 percent as well. Okay. With some errors. Let's see what's going on. With text. If you need to integrate actually then blablabla tighter texts with with the sled. The issue is, What's going on. If men to render collection or children using array instead. And I said What's going on here? I'll try to replace this with let me try this. This arrow is going. This gives me a headache that a company has successfully done here, but there is an error in the browser. Progress bar. I think. In the next video, whenever you go this era, I don't know why I'm getting this error. 17. Skills Section 2: I've made a silly mistake. Have found out I forgot to put curly braces around the props. She's a silly mistake. Now, let's refresh. Okay. Now everything works fine. All right, so this then H6, so this i six tiles are coming from the global style. And then you do the K and the global style. So you don't have to keep redoing this tells over and over again. So just copy the styles from the conducts item. You can just copy the X6 and they're pulled here by default, we're going to have these tiles all over. Okay? So now Let's continue with this tiling. So in here I'm going to create a new variable, is going to be progress by stout and then we're going to import styled from step components. Standard def. Alright, so now we'll replace the div. Replace this helps never do it. Yep. And then replace. Okay, So now let's begin selling the progress bar. So now select the progress bar. And now in this progress bar, I'm going to give it a display of flex. And then align items of Santa. Or my day is it comes pair of data items center. And then after that, I'm going to set up this progress. And then for this progress, I'm going to give it progress is going to have a position of relative and then a width of 100 percent and a height of 0.4 m. Nipah can color. Remember? Border color. Okay, Now let's Save. Right now we have a progress bar. So now what we need to do in here, we have a span. Background. Color is going to be our primary color. Primary color. And then let's give it a position of absolute 0, left 0, and then 0, and then give it high to fund it a percent. Okay, so the width is coming from the Outlook. Now safe. All right, so the width, the width is the coming here, 70%. So if I change the width to 20%, is going to update the progress bar. Now I'll pull it back to the 70. Now it's buttress eventually. Okay. So now what I'm going to do, I'm going to give a bit of margin. For the paragraph p. I'm going to give it actually were petting right down here. Progress pan, progress bar, and then to the paragraph, and then now do padding, right? I'll do one RAM or 1 to RAM. Doesn't matter. You can put whatever especially like, but I'll leave it to 1.1 gram per one. Alright, so now we have a progress bar. Okay, so what we need to do, we need to create multiple progress bars. So for a first-time, just only going to create like 66 of these or seven. So if I go to the skills progress bar, I'm going to copy this 15 more times. 12345. Okay. And when to change the detectors, CSS3, 90%, 90%. And then I'll do JavaScript, script 85. So make sure the width matches detects 85. And then I'll do whereas Java, several days, 6060. And then our du, du Python 95, 95. And then finally I'll do react. I forgot to do a text transform. So now I have to keep everything capsulated was I didn't it trucks transformation to uppercase. So for Python, I mean for react JS, do 75 and 75, or I save. All right, so now we have our progress bars. So now, oops, Java. Let's do capital Java, okay, instead of writing calculators here, you can always do it. Text transform of uppercase. All right, so now what we need to do is go in here. This actually for this queues. You know, it could be this hour. I've already done that already. Okay, it's here. So now what you just need to do is copy this class skills, right? But you need to do, then just do a display of grid, grid template columns. When only needs two columns, so it's going to be repeats and then two columns. And then whenever they should have equal sizes, NFA. Okay? So now we have a grid. We need a grid gap. Grid. Grid gap. Greek up. Oops. Grid gap. Is Rho gap. I'm not sure. We've got the naming grid. Gap. Good. Rogue AP, IEP for the row I want to have to ram. And then for the columns, I'll do three rems through ramp. Right? Let's see what we got from. So this is supposed to be column. Column. All right. I think this makes sense. I mean, yeah. Something wrong with this one. Twice the height is certainly wrong with some of these progress was I don't know if I can secretly, but so the height since v, Let's see why. So this band, so the height, I guess give it for dopamine instead of 100 percent, just give it the 0.4 m just to make sure everything is really the issues to there. I don't know what's going on. I think it's my eyes. I don't know. This progress by seems to be thin and this seems to be thicker. I don't know. I think it's just my eyes. If there's an issue, we'll fix it later. Okay. I think that's it for the progress bars. I think I'll add one more. One more progress by down here. This is this a unity? A unity progress. But down here, I don't know, For some reason this progress, but seems to be very thin than the others. I didn't I think it's just my eyes. Okay. I'll I'll leave it here for this video and then see if we have an error. Okay. I'm just going to put this fixed 10 percent before I go. Oops, not this one. This one. Okay. I'll see you in the next video. 18. Resume Section: All right, Now let's finish working on the resume page. Okay, so let's go back to Pages and then there's me little components, skews and went to change a few things up here for the title is supposed to be my excuse, my skills. Alright, now let's see the updates. Okay. So now instead the resume page after this Qs and went to put another title here. Actually, I'm going to do the inner layout. In a layout. All right, don't forget to import the LinearLayout. Imports in a layout. And then layouts. And we also need the title, import title from components. And then the title. Right? So now what we need to do is put the title here. This is going to be the resume. And then span. And then resonant again. Okay, Let's save. Something is missing. We're missing the main layout. Books. You know what? I didn't just create a separate component to make it easier. So this is going to be resume JS. And then in here we're going to import my layout. As per layout for the air. Main layout out and then the inner layout styles and then layouts. Okay, so now what we're going to do is just to amend layout here. It's close to styled such. Okay, so in here to create here. Okay. Inner layer, above, inner layer says whenever to click the title, resume, resume, and then let's import the title and then title for right. Forward to render the component resume. It's just resume. All right, So now we have theorists middle here. Why do we have so Myspace? It thanks for the two main layers. I don't think we need the main layout now. Let's see if we didn't know we needed actually, we shouldn't do this. My space. I think I know, right? So this main layout, it's only supposed to be here, in, here. In the main layout. It's only supposed to be in here. Okay? So there is an issue. Main layout here. All right, so now let's remove the main layout here. There's two. What's going on? Resume. Okay, my skills, I think 1 second. Okay, Let's clean this up. Now what we need to do is go to this queue section. Air moves in a layout. We don't need it in here. Right? So now let's save again. Everything should be in order, Okay? Now everything is in order. So now let's keep working on the resume. Okay, so now we're going to create a new title, components, new component. Small, tighter, small title, tag js. So for this title to have an icon in detail later, when they have an A3. Then it's going to be this icon. Just to put it in a paragraph. Small, tighter styled. Dot div, right about in here. Small type is tied to make it different the component name and then now replace the div. Right? So now what we're going to do inside the inner layout, I'm going to swap SmartArt icon. This is going to be brief. Briefcase. And then title. What can experience. Okay, Now close it. Okay. So this is a small, tighter briefcases and undefined. Okay, Now we need brief is important. Brief case icon, icon from you. I can then briefcase and allow hello, the name. What? Let me go to my to you. I again, Business Center does name of the icon. Alright? So I'm going to create a few variables. Cost. Briefcase is going to be business center. All right, So for the proof case, now I need a book or let me say Education, Graduation, university, right? School. For this class. Score is plus two. Now, let's say briefcase. Now if the briefcase now you have the title. Down here. Display flex items center for the paragraph. And we're going to have a padding. The padding right? One RAM. Okay, now let's do the H3. White color, font size. Let's see what it looks like. Yeah, I think 20. 20 is fine. Experience to RAM and then do the same for the icon. Oops, not changing us, see what we need to have it exceed the SVG. Okay. I wanted to tell you the SVG, but then we have to make it three RMB. Right? So now, now if icon. Now let's work on the content that resume. You can create a separate component for this to make it more manageable. The actually, I'm going to do that. I'll just do it here to resume content. But you can, you can create a separate component. Resume content. Okay, so in the resume content, we're going to create a new component. Resume item. Oops, there is an item that JS. Okay, so now in here, let's replace the day first. Okay? So now we're going to have left content and the right content. Right content. All right. So in the left content, we're going to do a heading in here. Let's try for, I think a program from Makes sense. A P. In here. We're going to do 2015. You know what? Instead of doing a fixed, we can do some probes. Yea, yea. And then in the right content, we're going to do we're going to give it a title. So in H5 i 5, so this is going to be title. And then six of sub. Let's go ahead and X6 of subtitle. After that, we have a paragraph and then we have text. That's a lot of that of probes. Title, subtitle. Then we've text. And letting the subtitle should have. Subtitle, do CamelCase, Schindler, a dish sub. Yep. So now what we're going to do books, it's, it must be. Now. Alright, so now back here, charisma content, I'm going to get there is an item. So we have Yay. 2014, 2015 to 2020. Then we have what else? We have title and subtitle to that this to make it look cleaner. Title is going to be psychology. Actually, computer science. You can do a really old computer sends and then we have subtitle. Subtitle is going to be like name of the university. You can say Sussex investee, whatever city. And then finally we have the text. Okay, and went to generate your Lorem Ipsum text. Lorem is 220 for starters. Cut it. And then I'll paste it down here. Now let's say resume I two is undefined because we have not imported there is mad at him up here. Import, let's import resume. Resume item from the item. Okay. We've got a few errors. Cannot be a circle component for component, what was going to loops. Let's remove this. So we done this era's don't come in a way less than the item. Tired. Yeah, we're inputting this diode. Yep. What's the issue here? Can I create a style component? Emotional or this area is coming from. Let's go to console. Resonate. Yes. Thank you. Okay. Let's see what's going on in the resume cells of the standard def. Right now, Let's refresh the page now. Okay. So now let's go ahead into this tiling. Okay, so for the next step, the left, left content, content, content. Before we do that, I'm going to do a disclaimer flex, display, flex, right? See look like this. So for the left Content Manager to target the paragraph there, a little bit of a display of block, inline-block, actually, inline block. Okay, So after the paragraph, going to give this a certain width, I'll give it a width of, let's say 20 percent. Okay. And so they would have contained, I'm going to target the H5. This one is going to have a color for color, family, CUDA. And then down here, I'm going to give it a font size is going to be slightly bigger to 16 RAM. I'll give it a 2 for them, for 2.3. Okay, yeah, I think I'll leave it like this. Well, actually, I guess they've left to right. So I'm going to give do it a padding, padding bottom to give it a bit of a space. All right, so now I'm going to take it the H6, give it a padding bottom point for m again. Okay. So now I'll give it a more padding then the title font size 1.8, ramp close to the maintain data from 15. Okay. Yeah, I think this looks big enough. Okay. So this TableView work experience. So the title I wanted to give it what is the tighter, smaller, tighter. I wanted to give it a parent class. Small tides are within here. Small tie. Title. My title. I'm going to target this, my titer. Telling bottom of the ramp. Okay, thing that works. That works fine. Okay, I think I went to add more text to make it look good. Let's go right here. All right. I cannot break it. Doesn't make any sense. Oops. I don't know. I'm going to break it. Let me try to break in now. Breaking. What can I break? It doesn't make any sense. Okay. I'm just going to put in one line for now. And then I went to figure out why I cannot break it. Okay. Now save. All right. So now if the texts, this is weird. Okay, 20 percent. What's going on with the width? Okay, so now, oops. Let's go back to the resume item. What else do we need? Inside the OK? In here is at the right content. I am going to give it a margin. In the right content, margin-left percent. Increase this to 30%. In the margin left here to some values in rems. Something like that, right? Or more of five rem. And then I'm going to do it before, before pseudo-class content. So this is going to have a position of relative. Position. Relative. Relative. Content is going to be an empty string. Okay? So position absolutes solutes, top left with 0. And then top, something like 15 pixels, maybe shamed pixels. And then with 0.4 m, let me give it a background color is going to be our border color. It's nowhere to be found. Content, position absolute, left with. All right. Let's see why it's not showing there. Let me increase the width to six RAM. I know I there's no height to pixels. Okay, there it is. Okay, let's see, it was margin left, lists instead of margin and padding. Padding left. Okay, So it goes like that. All right. I see what's going on. Left. With like 50 percent, I think. Yeah. More like 50 percent. So 50 percent. Then change it from margin or padding. Okay. And it works. So now what we're going to do, INSEAD the, the, the resume content. Select the class. Resume content down here. So resume content, we're going to have a border. For the left. It's going to be one pixel solid. And then border color. Actually I'm going to change it from one pixel to pixel, two pixels. All right, now we have a border left. I think we need a bit of padding. If I give it a padding, I think they'll do. Okay. So I would give it a padding left. So putting left down here, left content, padding left, 20 pixels. Okay, that's great. So now what I wanted to do it down here. Instead, the can copy this resume item. Whatever 1, 2, alkyl be two times 20 times. So it looks like a timeline. Well, before I do that and it gives this, I think a border-radius works. And padding-bottom. Resume item. Padding-bottom. I don't want the last Taotie of appending button. Not last child. That last Cloud. Padding-bottom three. Well, right. I think it's working fine. So change the timelines. We said the resume. You say. And I know. You can say, listen, it can be teacher was actually experience. It's a four-step develop our full-stack developer to present. 2010, 2017, 2017. Here maybe. He's a interface design and Google Inc. Micro soft studios. Right? So now let's save everything she update accordingly. Okay. So this title and when to give it a pseudo element. And before pseudo element. So NewRez, my item. Yeah. Actually, the left content. I want to give it a pseudo element is going to be before. All right? Relative content. Empty string as usual, position absolute as usual. Left, top. I'll give it a few pixels from the top five pixels. And then I'm going to give it a height in pixels and the width centering pixels. And then border-radius of 50 percent. Border, too. Pixels solid. And then give it a border color. Whatever color. Cycling around. It's not fully rounded, is a 32-bit be. With sending pixels. I've sent in pixels. Let me try to adjust this. What's going on here? 15 pixels. Oops. I, my resume. Right now it's rounded. Okay, I think let's see what's going on. Before I left, I found it to be centered. 10, 9. Okay, let's see. All right, I think minus 10, minus 10. Minus 10 works fine. Right? Minus ten books, or is it minus 10 pixels? And also we need to give it a background color. Background color should match what we ever we have when the background color. So it's going to be our main. Forgot I've named it Styles global. What did I name it? Bergen color, dark. All right. Okay. This doesn't look right. It looks a bit off. First, see what's going on. Left content. Before. Oops. You know what, forget it. You can customize it to, customize it to your liking. But yeah, I think that's it for this second. Now let's go to their resume. Okay. There's new content. What I'm going to do is in the resume content, I am going to do another smart item after the resume content. Small, tighter. And this icon is going to be Cisco today anyway, score is this one here.gov. Most folks that are multivariate put in the school. Yeah, this one is going to be School. I am going to copy this resume content again and then paste. Okay? Since we have an issue, okay, now it's gone. You know, this tighter. You know what, actually, I am going to give this one a padding-bottom. Remember we didn't include the last child. But now I'm going to do that smarter. I showed, you know, I don't want to remove this pseudo-class. Okay. So they have no, that didn't work. Let's see why. Left and right content. So this one, padding bottom. What we need is a margin bottom or padding, bottom padding, but we need okay, so what we need is a margin-bottom. So what I wanted to do and lead to create a utility class, there is imagine this one. I want to put it in a utility to utility margin. My ox, my j. Okay? So a utility class is just a way of adding some, a few styles to sit em elements. So I want this to last element here that, that utility class with a margin bottom. So what I'm going to do now. So now back here, make sure it's not, not last child. Alright? When I went to grow, go to global or that utility class. So I'm going to put the comment utilities down here. I'm going to select the utility class. Margin-bottom. Foreign. Doesn't seem to be working to see what's going on, What the hell. It's not working again. Applying the class. But fear not. We are going to fix this issue. Okay. Padding top and bottom fat, right? What is this? Okay, So this is in a layout with padding, top and bottom. What else? And then this is the main layers. All right, Makes sense. Okay, I think, yeah, that's it for this for this section. And later I went to fix this spacing up here. I'm going to fix it or actually let's, let me, let me try this, this trick. Undo this safe. Then this resume content. Give it an inner class name. Utility resume margin. Right? So now let's see if I do this. Oops, what did I give the resume margin? I do remove this. I'm supposed to give this on the small title. Smart guy down here. Small tidal. Okay, so now down here after this more tightly on top, that should work. All right. We'll wrap up this video now and I'll see you on the next one. 19. Portfolios Filtering System: Alright, now let's work on our portfolios page. Okay, so now before we do anything, we need to import the layouts. So we have main layout. And in a layout that already to edit styles and layouts. Okay, so now I'm going to my layout. And then I'm going to call the title component. We have tighter, tighter and tighter. This is going to be port portfolios. Portfolios. Portfolios. Portfolios, I think that's correct. Discuss two portfolios. Okay, so now let's close the title and now we need the inner layout. Layout. Okay, so before we do anything, we need to input the title from components and then title. Okay, Let's save. Go to portfolios, okay, and now we have the title and the inner layout. So what we need to do now, we're going to actually create a state value. This is going to be menu, menu item and then set main items. He's going to use state. Use state. Make sure you input your state from yet. Okay, So before I do anything, I want to explain something to you. So I've created a file already for the portfolios, its portfolio stage AS and the data. You know, do this already. I've showed you did already for joy by D category, image link one link to entitle and text. Okay? So you can keep adding as much as you want down here. Okay, so now I went to input the portfolios, portfolios from that data, and then portfolios. And then it's going to be our menu items, going to be the portfolios. All right, so down here, I want to render a menu component with the, with the problem of menu item, which is our menu item from our state. Okay, So we didn't have this component yet. Inside the components, I am going to create a menu component. Menu js. Then it's going to be a functional component. So any error, we're going to get the menu, menu item. Okay, let's go to stare at const menu item stout. It's close to the div. Replace the div in here. All right, so down here I'm going to menu item. Down here, I'm going to map the menu item. Then I'm going to get an item. I'm going to return a great item, 3 item. All right, so now I've agreed item. We need a key. Say K is going to be the item ID. In here. I'm going to have a class of what folio content. Content, Portfolio content. In the portfolio content I went to. I have put for your email. Okay. Portfolio image and what do you have an image is going to be our item, that image. Okay. After that, I'm going to have a UL. So this heel is going to contain two links. We need some additional links when you have the image. So I'm going to hit some images pop up. Okay? So the graph is going to be item link one, link one. And then link to get, actually I'm going to wrap this in LA. Okay. I change this to link to. I am going to input some icons. Import GitHub from material at Cannes. And then GitHub. You can use whatever colors you want. I think for this one I'm going to use. Well, is it with Pinterest? I'm not sure if we have it. And an artist palette pinned, Pinterest. Rest. Okay, So down here and went to do Kitab, this Git Hub, and close the icon. Then we have Pinterest and safe. Right? Now let's refresh. There's something wrong. We're going to find out why. After the icons or CLI, after the portfolio is image. This, this UL symbol should be in the portfolios image supposed to be in here. Okay? So now what we're going to do is after the image, I'm going to add a title, which is going to be, I'm not sure a fishy make it an anchor tag. I just make it a tighter fit, but just make it in F6. I kinda tighter. You can make it an anchor tag to lead you somewhere else, but I've been just OWL. I'm going to make it an H6. And then we have a paragraph which is going to be item, the next item that texts, okay, now save menu. I'm menu is not defined. Import menu, components and menu. Right now we have our portfolios. Before we do that. Before we do anything, let's give them some basic styling. Okay. We have predate him. Here, we're going to do with display grid. Template columns. Repeats. Going to have three columns and then one FR grid gap. Let's give it a grid gap of term is just temporary. Maybe we can change it to something else later. Alright? And then over to target the grid item. Okay. So now the graph for the grid edge, and we're not going to do any styles yet. And I'm just going to give it a three year. I'm going to do any styles, hear it in the grid item. But Portfolio content and tell you the portfolio of content is add the grade item. So for the portfolio containers now want to target the portfolio image. Okay. Can you give me a second? I need to close my window. All right. So now Portfolio content. Okay, I've titled Portfolio content. So now let's touch during our styles display, it's going to be block. Okay? And then position. It's going to be relative. Okay? And then I'm going to target the image inside the portfolio content images my day with a width of 100 percent. All right. So now and went to also inside the portfolio content tagger, this UL I'm going to hide it just for now. Yeah. Display. This temporary was going to get in our way. So I'm going to go sorry, an island and need to hide. It was getting in our way. Alright, now, now it's gone. Let's go ahead. Contiguity styles. Okay. So for the image, now we need to give it some sort of a height. Some fixed temporary height. Actually in a temporary fixed height. So height is going to be, Let's try 50 vh. And then object fit. It's going to be covered so it doesn't stretch out. All right, so now we have a fixed, a fixed height for the images. I think we may Nixon pedaling for the texts. I'm not going to give it a painting now. Actually, I think go to the portfolio content, grade item. I wanted to give it a bit of a margin bottom. You see what I mean? So for if I go here, if a Edwin more portfolio item here, change AT to four and then I'm going to save or is it okay, It's down here. What I'm going to do is I went to give it a bit of a margin bottom. Select it. Oops. All right, so the grid item and when to give it in my conversion to ramp or I can actually just lived the grid gap. Do it's one work. Yeah, I'll leave the grid gap as it is. Right? So now let's do the styling for the six. So for the XX, it's inside the portfolio content. Okay, since I default for content. For the content, I'm going to tell you the F6. I am going to actually change it. Okay, never mind. I wanted to change the font size. I'm going to give it 1.5 mm. Okay, Makes sense. All right, so now the portfolios are working. Now let's work on the fishing system. Okay? So these are the periphery is I'm going to create another state value is going to be button, button and then set buttons. All right. I'm going to leave it empty just for now. I'm also going to bring the button component. Component is that the components is going to be Phyton to EJS. It's going to be functional component. Alright? Don't forget to input it up here and put the button. Okay? So first off, I want to, I went to feel it as on data and what do creating Iphigenia cons. So this is going to be future shooter function. It's going to be OK. And it's going to be an arrow function. And be sure you know how to do arrow functions are ready. All right, so it's either FUTA, I'm going to say const. Few. Filtered data. Data is close to portfolios to filter. All right, it's going to take in their cubic function and for sure you know how to do that already. But we're going to use 19 function, so we don't need to do that. We can already returns automatically. So we're going to return an item, item dot category. So we're getting a category. So if the categories coastal button. And then we're going to set menu items to whatever category we have. So it's going to be filtered data. So up here, I'm going to put a parameter, a button, whatever value we pass in, we're to return the category with whatever, whatever value that we pass in instead the inside our perimeter. All right, so what I'm going to do is I'm going to send this filter function is at the button. I'm going to say filter. Was I wanted to access this filter function. I want to access this filter function inside the button here. All right, so now, now I have the filter and the filter function. All right, so when I click on the filter, and we also, I also want to send the buttons. So right now it's empty. The buttons are empty. So what I'm going to do is I'm going to create a function. Notify, I mean, not a function in a variable. So this variable is going to be our is going to be our buttons there, we're going to send, is that the button here? Was we need the buttons for filtering the data. So it's going to be 0 buttons. And then it goes to an array. It's going to be an area of buttons. For example, if I have data that returns everything, we have 0. And also we have, let's say animation or whatever. And then in here, what I'm going to do is I'm going to do items, actually that items portfolios, portfolios and went to ten portfolios and then dot map. So I want to only get the category, category data. Okay? So and then I'm going to do item. Then I want to return item dots category. That's what I want. I'm going to use the spread operator to copy everything. Alright, so now we have all buttons and went to put it inside the button. So now the button, we have the data for the filtering system. I went to send this button and then he said the person button is close to battle. Alright, so now inside the button, I'm going to get the person. What I'm going to do is I'm going to map the button, button that map. I'm going to turn a button and then an index. So for each item that you map, you have access to. You have access to the index and the item and everything, all of the items, but now I want one too then the item and the index. Alright? So I'm going to return pretend. I think, and when to use a nav link. Import nav link. Nav link from. I'll just stick to the button. Was this is more work if a is enough links, but I have to do something else because the nav link button, button. Okay, now we are returning a button. So the title of the button is going to be our button. Now let's save, actually need the key. Key is going to be the index. Okay, now let's save, hopefully. Okay, now we have buttons, animation, animation, animation. Okay. So the data, it's repeating itself. We have so many animations. Because in our data portfolios, we have our Min animations with animation, the categories animation, animation and motion. And then you have Python, one-to-one Python date and everything else is animation. I think I'm going to change one of these two, Let's say Python again. So if two Python data and then two to animation data. So as I refresh down here, F2 Python data to admission data. Actually an animation and mission data is coming from here of a digital machine here. So we have three animation data. Okay? So I can remove this animation. So as you can see, now we have linear refresh. Now we have two pattern data to admission data. But the data is repeating. We don't want to have to Python veterans end-to-end mission buttons. There's an issue. Okay, So now, but before we do anything, let's do the fusion system. So onclick. Onclick. So when I click the button, I want to code the filter function. I've got the filter function. So the filter function is going to have our button title. So the title is the category name is going to return whatever title or Bhutanese. So if I say animation through Denning animation data, python, anything that has to do with Python. Okay, and mesh and Python. But if I click on or not, it doesn't work, we're going to fix that. So if I go back to the portfolios page inside the filter function. So I'm going to say if if, if the baton is close to, if the title of the button is 0, I'm going to set menu items. Set menu items back to. And what does sit the menu items back to the menu item, which is portfolios. Okay? So now after that athlete, we're going to set it directly to the portfolios, to everything, goes one to retain everything, and then return. Okay, now save. Okay, when I click Animation, Animation, Python, python, and when I click, oh, it retains everything that we have in our array. But was to have an issue right here. The data is still repeating. Okay, So let's fix the issue. So the issue is to make sure our data doesn't repeat. We're going to use a data structure called a set. If we put anything inside a set, it doesn't repeat itself. So for example, if I remove this, I'm going to say, I'm still going to see to use the spread operator dot dots because we want to copy whatever we have in our set. So new set. So whatever is inside of set. For example, if I say 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 4, and then 5, 5, 5, 5, 5, and then 6, 6, 6. So everything in here in our set is not going to repeat because we're using a set data structure. It doesn't repeat data. So it's going to return a unique value is going to repeat only 1212. It doesn't repeat all of these tools, only 12, and then 13 and 14, and 15. 15. Unless you always know it can live an issue. Oh, you know what? Our categories are supposed to be? Numbers. It's actually a string. So if I say, for example, one actually to know 20, and they are now say comma, comma again. And then I do too. And then I'll do three. And then I'll do three. And then I'll do four. I think you get the sense. You get the sense, Okay? It's got only going to return us unique values. Alright. So when I save, oh, I forgot to close the door. Never mind. Okay. Save. All right. So now something's wrong. Let me see why. To 22, 23. All right, so now it's only going to return us on the unique values. It doesn't, it's not going to repeat the values. Okay? So what I'm going to do inside the set and went to copy the spread operator for the categories so it doesn't retain. It doesn't return repeating data. I didn't always getting letters. Let me see, well, what's going on. New set portfolios. Hello dot o. Unless I was to fuse this print overwritten here again. So now let's save. Okay, so now it's not repeating the data anymore, Python and everything. So all is not inside set. I can also add another o here. O is not inside our set. It's going to repeat because it's not inside of a set. But if I put this again, instead are set, It's going to repeat. See? So if two rows down here, that's repeating. But if I remove it, it doesn't repeat anymore. Now we have unique file is now. So now we can fit everything. Yeah, I think I'll make another video to tell these buttons and everything. Yeah, I'll see you in the next video. 20. Portfolios Styling: Okay, now let's do the styling for our buttons. Okay? So it's tying the buttons. Okay, go to the button js. Let's create a new style here. Buttons, styled, doubt button. So button, alright, so now replace the button with this cloud that actually do buttons. I'll do buttons down and then buttons, buttons stout. So make sure you give them a distinction. So you know which was which. And then buttons, buttons and their buttons. I'm going to change it from baton to a diff. So for the bad terms, I'm going to give it a margin, bottom margin, bottom of two RAM. Let's see how that looks like. Yeah, I'll give it. Yeah, I think tourism is fine for the might've bought them. And then I'm going to do is I'm going to have a display flex. Display flex and then justify content is going to be center and then align items center. So we're going to align everything on the center. Then we are going to have a flex flex wrap. To wrap just in case we have more buttons. Okay. When to give it a width, actually, a width of 70 percent. Thus the width I'm going to give it. Whoops, not this one. Let me see. Inspect Element button. Yeah. Okay. I'm I'll give the buttons with St. Vincent with 70 percent and do a margin 0 and then auto to ensure it's centered. So now it's two centers. And I still need to give you my gene actually margin-bottom. So for the margin-bottom, and I'm going to do it top and bottom here. Which is 2.5. And then we're going to center, okay? Now it's centered. So now what we're going to do is let's do the buttons. We're going to do outline to none. Border, lamb, background color. We need to give it a light background color. So let's go to our variables. And so the Global Light, let me see if this one works. Okay. Then far. And then need also a padding point, a tram and then to ram left and right buttons. And then font size and the color to inherit. Font size, inherit and then the color is going to be the white. And then white car. Right? So for each button, except the last element, I'm going to give it a margin-right. My brain right? Ramp. Whoops. Portfolios. Okay, I think the padding top and bottom register to something like 15 gram. Okay? And imagine right, 0.516 RAM. Right. Now we can fit our data, but something is missing. We need to do QSR pointer and have a need to give it a background color. It's going to be color primary. So we needed transition. 0.4 seconds and then ease in and ease out. All right. What can I do today? Give it its color primary. Secondary. I don't know the colors. No working week is obviously primary first and then color. Okay. So now we can have a yeah, everything looks great. I think I'll do I'll give it a active and focus. Active. And then E2F. And also. Okay, we've got to focus on color. Let's do red. This is just a temporary on the C5. The way I've selected the Ferguson actives working. All right. It's working. All right. It's going to be primary color. Yeah, I think this makes sense. Let's see this one. Okay. I think we're down to the buttons. Now let's say something else in the portfolios. Now, add essay. This is going to be JavaScript. Java, JavaScript, yes, groups. And then I'll save. And then let's refresh the page. Right now we have a new button, javascript. Okay? So what we're going to do now is let's do the when I have on this element, the parent container of the image, the portfolio. Portfolio for free image. When I hover the parent, I want to do before pseudo element. So let's go back to put. Is it oh, it's actually where is it? Always in the menu? I'll go back to Menu. Well, I don't want to do is I'm going to set it, but for the image, for Fourier image and material before pseudo element. So it since I Portfolio content for your content and then Portfolio image. Okay, so in here for the portfolio image, I want to do it before. So the element. So this before, so determine the quantum is going to be an empty string as usual. Empty string, position of absolute position, absolute left. So for left and went to have 15 pixels. And then top 15 pixels. Okay? So for the height, height is going to be, the calc function is going to be 100%. 100 percent minus 30 pixels, which is 15 plus 15, which is 30 pixels. Same for the width as well. Same for the width. Okay? They're gone. Color is going to be some sort of a white color. And opacity is going to be 0.9 for now. And then I'm going to do a transform origin, transform origin, origin 0, or you can do left, whatever and then transform scale 0. Okay, so now after we finish this purple color, white. So we need to add here. I think maybe we might use a transition is our 0.4 seconds is in an ease out. Ok, save. Actually, we need to do their position. What's the parent container? Parent container, it's Portfolio content. Okay, we are parsing relative already. So you can see it was at this scale. Is, come this go to one. Okay. Now we have the before. Okay? I think this before. I'm going to give it a height. Let me change this image. What I'd had to give the image. I kinda remember when we say 30 vh loops. So for the top, I'm going to write, let me see what follows I want to calculate. All right. So now the height would say, OK, I'm going to do 100 percent minus. So I went to use vh, vh now. So left. Let me do 2%. And then top 2%. Okay? 2%. So the width is minus 4%. Okay? So now let's do the height. Height, Coke 10 percent minus well, I think something like 40 percent, I think. For this end. Let me see. 44. I don't know. Remember. 40. 44. Remember the values of use before? You know what? I'm just going to leave it somewhere around 23 percent. Yeah. Let me somewhere here. So for the top and went to say 4%. Okay, I will leave you some, some somewhere like this. Okay? I think this makes sense. So now what I'm going to do is on a half, That's what I wanted to show this. So when I have the portfolio image, I want to show this folio image. When I have a portfolio. That's when I want to show this before. Save. All right, now it's showing when we have a bot before this one, at this here, the height, these calculations should be here. And then scale, cookie scale and put it as 0 in here. Don't forget that this is before pseudo element. Okay? And then the height is going to be 0 with it's going to be 0. Okay? Transition, transition in here. So Transform Scale, remove this K-L transform origin as a left. Okay, now we have the hovering system. So now when we have an went to get the UL, put Fourier image. So whenever the portfolio image, now in the URL, you have a display block. Remember we, the URL is hidden, now it's coming up. So the heel is going to have a position of absolute. Okay. So it's coming down here. Okay? So I'm going to give it left 50%, 30 percent transform translate because I want to center my nose 50 percent minus 50%. And then I'm going to save, right now it's right down the center. And they're also going to give it a display of flex. So it's like this at three, I'm going to do change this to 50 percent, maybe not do 40. Okay. For the UL and went to target, the SVG. I'm going to change the font size. Font size to 20 RAM. So I wanted to be slightly bigger here. But let me, I'm just checking something okay, to RAM. So for the LI, I'm going to give it a background color. It temporary red color. All right. So for that I'm going to do I'm going to do other items here. Center. And then justify-content center. I want to do this same display flex. And just for content, let's do the same for the ALI. Right? Okay, now it's centered what we're going to do, the alignment to give it a bit of a padding. Padding is going to be somewhere around somewhere around 20 around like so. And then border-radius 50 percent. So we want to image rounded looks like this, 50 percent. And then what I'm going to do, I'm going to give it I'm not going to include the last element, the last child. Ciao, I'm not going to give it a margin. Left of one RAM. Didn't work. I don't know why it didn't work. Mightily left to RAM. Let me see why. Okay, let's do this here. See Ally target, the anchor tag yes, at the LA is to the margin is not working. Okay, Let's try to do it here. Margin, top and bottom, 0 to ram left and right. All right. One RAM, one RAM left and right. Okay, so I think I'm going to reduce the padding to one RAM to make icons look smaller. And register. Imagine here 2.5. So it looks yep, this close to each other. Right? So transform translate. Translate or interests led the y-axis to 0. All right, so as phone translates, so now I went back to the URL here. In here I'm going to say minus 100 pixels. And then we're going to do a transition 0.4 seconds format as this guy's shouting his classmate 0.4 seconds and is in, is out. Right. Now. Something is missing still transition, copy this transition i then to the heel down here. Students transition is now working. Let's see why. Just to be safe, just copy down here. Posidonia. Yeah. Transitions, no working. I'm not sure why the transition lower transition. So I'm going to change the Gurgaon color, border. Color. I want it to be slightly gray. I sent around a perfectly let me see why. So for the LI and give it a width of two ramp, I think terrain looks fine. Actually 2.5 and then 2.5. And within the height of 23, where it says centered perfectly sync. I think it's because of the padding, the acronym have. Let me see what's going on. Svg 0, we have an anchor tag inside the LI. So in here we have an anchor tag. We want to do the display flex in the anchor tag. And we need to do it up here. This. Okay, now it's centered perfectly. Okay, so now let's work on the white. Let's check why the transition is not working. I think we might need to edit down here. So let's see. All my days still not working or not. We're going to fix it later. One will have a life and a background color to change. Dash, dash 21, primary color. Okay. Background color is changing, is a transition on the background color, but the icons that are transitioning when they're coming. Let's find out why. I wrote this display mem. Copy this. This. Okay, now that I think that transitioning, now, we still haven't fixed this hovering. Right? There's something going on with the icons. So for the icons here, display none. Alright. This cylinder issue, position absolute ups, still an issue. Let's see. Let's bring back the heel down here, up here. Okay, so up here we're going to have a display of none. And then down here block. Okay, I think the transient, It's already here. I don't know either transition rocking, but if we're not told and fix it later, right now let's work on the icon. When we have the LI. And I want the SVG terracotta. I'm a white collar. White collar. Alright. I think now if we click on this link, this should take us to extend our set. Okay? So the one I've clicked, it takes us to Google. So now we can fit our data. Well, right? Yeah, I think that's it for this video. See you on the next one. 21. Minor Fixes: Okay, welcome back. In this video, I'm going to do some minor fixes for the, for some of the pages, for example, the links. Now let's go back to notice. Down here, it's unhappy. But this position absolute supposed to be up here. So it should be up here. Okay. And then oil supposed to be up there. I'll remove this display block. And the display none. I'll remove it. All right. Note it should not. Let me see what's going on it. I'll do the opacity. The background color should also note the LA, but the UL. These tiles, they should be applied before we have that this element. So I've made a mistake and went to copy this LI and then mapping AND I'm going to test the LA. Yeah. Okay. So 1.5, remove this. Right? So now what I'm going to do is I want to change image, however, I'm going to say one. And then loops. Velocity is 01. And then up here, or plasticity it's going to create. All right, so I think go. To this as 600 pixels. And then I'll do another flow feeding for the parent Portfolio content. And then overflow hidden. Okay. All right, I think that's it for the studying what the the HAVA. Now let's work on the resume page. And it did change a few things here. Okay. So on a resume page and went to recently? I think it's the resume page. Resonant page. Oops. No. I think it's a resume. Yet. It is resume. And want to change the title here to educational qualifications. Computer science degree. Okay. So I'll say from 2019, roughly 20 20192022. All right. And then give you a random screen here. All right. And then I'm going to change the title to computer science. Computer science. And actually this is a possibility, this cool name and then a Levels. Levels, and then from 2015 to 2017. Okay. Or you can just say high school graduation. Alright, now let's save. Okay, so now we also need to fix the about wanting something here in there about Scott, they reveal item. So we have the text and what we also need the load the review item. You know what, I'll fix the review in the next video because now I need to take a break. I'm so tired. All right. I'll see you in the next video. 22. Custom Scroll Bar: Okay, Now I'm back. Let's work on the Custom scroll bar k. So go to the, go to the body. Instead the global historically. Okay? So here in the body and went to do body. And then I'm going to do webkit, vertical scrollbar. Okay, make sure you, okay, you do that. This will be scrollbar. And then in here, I'm going to give it a width of nine pixels and a background color. Background color of. We don't need to use a variable for this one. So these two, so nice. 383 eight. Okay, now Save. All right. Now we have a custom scrollbar. Below the scroll bar. We are going to have a scroll bar, thumb to the right place. Scrollbar thumb. And then we're going to do border-radius. A border-radius of 10 pixels, and a background color of hash Six, Six be harsh. Six B. This one. Okay, and then say, There you go. We have a term. Now we can scroll up and down. Lastly, we need the truck. So for the truck, we're going to give it whatever it is of 10 pixels as well, and a background color for 38, 38, 38, 38. I think that's it. And then Save. All right. Now we have a custom scrollbar. Okay, I think that's it. Now let's get ready to look for the torque on the deck mode in write mode. All right, See you soon. 23. Theme Toggler Button: Okay, so now let's create our switch for totaling dark and light mode. All right, so let's go to the app, app.js. And then below the lines, I'm going to create a new div is going to be light, dark mode. Right? We're going to have left content and the right content. All right, so I went to input a couple of things from material you, I am going to get an icon. Material to a UI. I'm going to get an icon. We need a brightness. We take the second copy and then we paste it down here. In the left content. You're going to predict brightness. In here. After that we need the switch. The switch. The switch is okay. So amazing. And when to use an extension that I'm using for material us snippets. And I'm going to create a switch. It already it automatically imports to switch from material you I okay, I want to commend the value and checked for now. All right, Now Save, Let's see. We have an error. Identify so he's already been declared. All right, Notice this issue. We have a switch timing from Viet and we'll also have a suite coming from material UI. So what we're going to do, They said they react switch and went to input the switch as switching. So he doesn't have the name, the name switch. So I can change the name from switch to switching. Okay? So down here, I just changed from switch to switching. Okay. So now what allergies safe? Hopefully we should have no errors. No. Okay. We're good to go. So what I wanted to do, I want to copy this light, dark mode. We're going to the main content. I'm going to do position absolute, right? Syrup. And then took 10 percent. And then they're gone. Kara. Red for temporarily, and then six grams, and then a height of three ramp. Okay, now let's save. Actually I'm going to give this as Z index 15. And save registers to, to RAM actually 2.5. And then this one is 6.5. Right? Now, I'm going to give it a display of flex display flex items center. Okay. So we also need to give it just right content space between okay. Actually I'll do a center. I'll give it to just flip onto the center. Let's inspect display, flex items. Center. All right. Now let's do the SVGs or any I'm going to tell it the SVG display flex items to center. Everything should be centered fully. Okay. I haven't used material UI before, so I'm going to look at how to start this. The switch. Let me see out of static size, you can change the size as well. So what we are currently using this more and let's try to see if this medium size Size, crop size. Let's try. But then give it a medium size. So okay, I think this is a medium. Okay, what I'm going to do is I'm going to change the background color. To with my global Stowe is close stares. Ok. So I went straight to change this to a light background color. Background color, light to this one. So what I'm going to target is the left. Actually know the light. The light I'm going to do, the background is red. I'm going to do and then place this one here. Yeah, could do this color. And then the bird, the brightness. Svg, font size can be 1.67. Okay. I'll give it a color. Let me try white color. Whoops. Then, white-collar. Yeah, this makes sense. Okay, TO a stays the top 10%. Actually. Let's give it a position. Actually, never, Never mind, I'll just leave it the other day instead of giving it a fixed position. And I'll just make it stay there. We can scroll down with it, doesn't matter. Alright. What's going on? When these are blank page? There's something fishy going on. Something fishy. Now let's find out twice. Changing positions. All right. So why is it changing positions? Main-content stout. Okay. I think I know why you're not remove, oops, take it out of the take it out of the main content and put it outside below the sidebar. Okay. Below the sidebar. And then cut these tiles. Cut, cut. And then what we're going to do is we're going to go to global style. And then we're going to put a comment, floating toddler. Okay, and then Save. Okay, Now it's always on the same position. But I think we could well, we could do is we can give, give it a fixed position. Team. Put it on theme, theme. Now I'm going to grab this team. And then the theme is going to have a position fixed. Not we have an issue. This is why the child is position absolute. The parent is not does not it okay. So now I can give it position fixed instead of absolute. Down here, changed from absolute to fixed. Okay, So now the posterior is going to stay there. You can scroll, you can do whatever. It's just going to stay there. All right, that's it for the icon. I'll be back with the alphabet. And then we're going to start doing the lightened depth him. I guess he soon. 24. Dark Theme: Alright, now let's set up the dark theme and the light theme. So go to global style. Below the root element. I'm going to create a new class. It's going to be light, same. And then we're going to have a DAG thymus or dark theme. Right? So for the dark theme, I don't think for the dark theme, I'm going to copy what this colors that we have. These are the dark theme, that theme colors. And then for the light theme, I'm going to also put those dark theme colors. The reason why is because our variables, we're using these variable names inside our CSS. So we need to keep these names the same or the way it was if we change the name, the colors, and I'm going to match and we're going to get an error. So we need to make sure these variables stay the same. What we're going to do is just to swap up the colors. So these colors are the tectum and then the light theme. We're just going to swap the colors to put their light LED colors. So for the blue primary color, and that's going to change it to a black color. Okay, So the black color that we want is going to be some form of an RGB. Okay? So I'm just going to paste the cars here. So they said that color. So the premium color for the dark, for the light theme is going to be dark. The primary candlelight. Forgot which one it is, but we'll figure out when the secondary color which when a secondary care, we'll figure it out. So this is the primary this is the primary colors. The primary colors is going to stay the same. Much B is going to stay the same. But the white color is the one that's going to be a dark one. So our color, white, white color, it's going to be a deck one. The border color. I'm going to change the border color to a different color. So the protocol is going to have like some form of a white-collar. All right, so now I'm looking for a color to put with the border. Okay, so yeah, the protocol I think, and what to do with watercolor. I'm going to put this one some form of a white color. And then for the sidebar, Sidebar color, it's going to have a different color sidebar. And then is for the main background color. Background, light color, background color. Back on dark color. It's going to have this one curve the scholars or background light color. And then white-collar. The border color. For the border. The border color, watercolor actually is this one for the border. Okay. Now I think we've changed the main colors that I want to. So this is the light theme in depth him. So what I'm going to do, I'm going to comment out the root, the root. Alright, now save everything is going to be different because I've removed the root. So the root is gone. So what I'm going to do is I'm going to the body. I think it's the body that I need to add. The, oops. Class is close to. Think. Is it dark theme? Alright, now if a dark theme, Let's see if I put light. Tim liked him. Okay, this is a relative thing. Let's see what we need to change again. We still need to change the font, font color to a black allies or we need to change it out of stuff. So yeah, we need to change a lot of stuff. Okay. Now let's let me look for a dark color to a darker color. So let me change the, for the lead team with different color. I'll change the font color to this one. Let's see what we have right now if a darker color. Okay? Oops. So this is the, the deck one. Alright, so now let's just change only what we've done so far. Okay? So now what I want to do is I'm going to the app.js and when to create a hub domain. This we're going to create a state value. It's going to be financed. Yeah, it's going to be a theme. And then set them. We're going to use a US state and pushy, you know, to use these data already. So now what I'm going to do is add the US state by default. I want to have a dark theme. By default. Duck film. Ok. So, so I want, I want to start with the duck from right. Something's wrong. That for something here before our month, this this isn't supposed to be here. I was just messing around. Okay. So by default, I want to, I want to start with a dark theme. Alright? So what I'm going to do, I'm going to call a US effect, is going to render every time component, our component re-renders. So use effect is going to take a cubic function. Alright? So by default I want to have a theme which is, which is, which is the duct him, the default theme, which will set to deck familiarity. Alright, so what I'm going to do now, I'm going to do document. I wanted to select the document, document, document element and then dot class name. Class name. This is similar to Vanilla JavaScript and pressure in order to do this already if you know JavaScript. And then we're going to set the class to theme when we start the page. By default, it's going to be a DAG theme. Okay? And then I'm going to save. All right, What now if ducked him. Okay, so I'll see you in the next video, but to bound by 2, and then we're going to work on the lead him. Okay. 25. Dark and Light Theme: Okay, welcome back. Now, let's work on the lead him. Okay. So by default we're going to start with the dark theme. And then we're using the US effect because we want the debt him to load as long as the page loads, specify easily, easily factor. So that's when we want to apply the theme, which it did that theme when the page loads. But now let's create a function. So because want to be able to toggle the depth of using this button here, the switch here. So it's going to be same toddler. Then it's going to be an arrow function. Looks in our function. Ok, So I went to another state value here, is going to be checked for the, for the switch and then set checked. And then now we're going to do a US state. Okay, Don't forget to input the US state up here. I'm gonna call this horizontal to put them at the top. Makes sense to put them at the top. Okay. All right, so inside it came to UCLA. I'm going to say if the theme is close to, if it's delight him. If it's the light theme. If the class is left him and went to set the theme, I want to change it to him. Okay? And then also I'm going to quote the set, set check function. So if the tectum is going to be learning the strings, it's going to be false. False. By default, I want to check to be false. Okay, it's gonna be false. And then else, I guess you know, already what we're going to do. Except except I mean, else changed the deck them to let them and change from foster, true. Okay, so now what we're going to do down here, I'm going to remove the one change. And then they checked, I'm going to put the check, the check state value. And then I'm going to call the onClick function. So unclicked, I'm going to run to Tim, Tim top left, and then Save. All right, now we can toggle between light and dark theme. Okay, So now what we need to do is to finish doing the colors was we haven't finished in the class yet. You need to fix these colors. Okay, write a resume. Let's see what we need to work on first. I think that the buttons are fine. Okay, Let's, let's see down here, K. K. Now we have our first issue. This one. It's quite have. So we want this one to stay white. Okay, what variable are we using on this one? Okay, let me double check. Instead the blogs. What variable we are using. Flux page. So the title, it's using the white color. Okay? So it's using the white color. I want it to stay white on the debug mode. Actually, no, no, no, no. We don't just tell white. I want to change the color to blogs. Okay. So for the blogs, what color am I using? Bare ground, dark gray. So let me look for it. Light color. Okay. Their granddad gray. Go to the variables, the global weather, heck, is it all right? I'm looking at it. Okay. So for the lead him and went to look for that gray this one, it's going to change. Now. Safe. Okay. Fixed. Now, what else do we need to fix? Do we need to fix the portfolios? Do fix anything in the portfolios? Actually, and introduce something before I finish. Oh, actually, these icons I think they'll find, Alright, need to fix something. Before I go into the homepage, I'm going to put a comma here. Okay? And then before I go to the sidebar loops and displace here, I'm going to go to the sidebar. Go to components. Sidebar. I'm going to do overflow hidden. Okay. So far we said, Yep, in this half-life actually doesn't overflow the sidebar. Okay, so we're going to fix this issue where they have a deeper for element is covering the tighter. We're going to fix it later, don't worry. Okay. So yeah, I think that's it for the for the lightened dark theme. I'll see you on the next video. And then we're going to start doing our media queries. All right, that's it. See you later. 26. Media Querries: All right everybody, now we're back to do some media queries. All right, Let's open VS Code. And now let's run the project. Okay? All right, There you go. We have the project. Also. Don't forget to change the colors of the particles to a dark color, so it shows like him. Okay. All right, so now what we're going to do we are going to hide this on 11. Yeah, something like this 1300 and went to head the sidebar. So inside the global and went to do some global media queries. Job or media queries. Okay. So in here, I'm going to go to the sidebar. Actually after do the immediate crazy in here for the sidebar. Okay, It media and I place it media screen. And max width. So our max width is going to be 1121111. Oops, 11 200 pixels on the sidebar to transform. Translate. Actually on to translate only the x-axis minus 100%. Right? Now the sidebar is gone. Why is it not coming back? I'm not sure why it's not coming back. 112 loops is supposed to be 11270 to be one hundred and two hundred. Alright, now it's back. Now it's gone. Now it's back now it's going, Ooh, that's Beck. Okay, so now copy this media query. We're going to go to the app js. In here, the main content, we have a margin-left of 16.3 RAM. So it media screen and the max width, this one hundred and two hundred pixels. I am going to do a matching left of 0 pixels, 0. Okay? Damn cool. Okay. So I think I'm going to actually add a transition for the sidebar transition point. Or you can edit cubic Bezier. Remember what you've done before? Right? Okay, There it is. Okay. So now we need something else again, we need to add in a hamburger menu. We have material UI or we can design our on our on me. Actually, I'm going to go to the icons. Icons. I need a menu. I'll copy this menu. Alright, so I'm gonna go to the up chairs. In here. I'm going to input the menu. Input the Menu icon. Okay? Solve for the Menu icon. What I'm going to do is up here, because it's him and I'm going to say.com. Okay, Does he have a hamburger menu? Menu in here? I'm going to create something called an icon button for material UI, icon button. All right, in here, I'm going to do a menu. Menu icon. All right, so now I'm going to select this hamburger menu. Now. You can do below, below the lines. Actually spent inside the main. We can do it inside the global NADPH. Okay, in here, I'm going to do position absolute. Absolute. Right. 10 percent for the top. I think you can do 25 percent actually. Top. Hey, I don't want to conflict. I don't do this hamburger menu to conflict against the lithium button. I want these two actually only show only when the media query is it is set in. I'll copy this media query. Now Alice to show at this media query. Okay. So the top 10%. Okay, So if the max width is 101,200. Hard to show this. All right. It's up here. There's something going on. I'm going to put this upside down, put it outside. There it is. And then I'm going to give it as Z index, C-index of actually 15. So we can click it. All right. Top and we'll say 5%. Okay? Yeah, it's too small. I'm going to tell you the SVG in here. When I say size. Actually, I think it's a good idea to put it next to the deck. That theme. So in the hump actually the app, or is the dark theme? Looks, it's actually in the global. The dark theme. And when you do top 5% as well. So I can put them next to each other TO 5%. I actually sent at annoy the energy next to each other. I see why. Okay. Why don't we went to try to do is this and why do to 3%. Alright, so yeah, I think 3% looks fine. Top. What am I looking at? 3% represent? What is Esther? I'll put the depth him down below actually. Top. I do 25 or 35 percent. Yeah. Oh, actually 50 percent for their meta. We can do that as well. So the right what did I give? All right. So for this one, I'll do 50 percent. Yep. Okay. So now let's work on the click. So when I click, I want to also you notice we have an animation when you click here. So this is coming from material UI by using the icon button. That's where the effect is coming from. Okay, so now let's do one click. Now have Togo. And then set nafta. We're going to use state. By default. It's going to be false. Okay. I'm looking for the switch, for the icon button onclick. So I'll click Got are going to do went to run a cubic function. So when you click it, I'm going to check the state value from true to false to true or from true to false. I'm going to change the setting of Togo. Set enough turgor is going to be not. Nav total is going to change, they can forth. So now let's see four stages working. I'm going to press F to go and where to go to. Here two components up. All right, so click is troubling trend for central, state is working. Okay. It's toggling. So now let's go to the hamburger. To the sidebar. Okay. So in the sidebar and went to say className is close to so the class name. And when to say is enough. Tokyo true. If nafta was true, I'm going to add a class is going to be nav. Else. If it's not true and when to add nothing. Hello class. All right. So Inspect. Let's see the sidebar. I'm going to show me which one is this letter. I think it's this one. All right. Now I totally thing is not working. Let's see why it's not working. Let's see why. The sidebar. Alright, I think I know why they're going another video when I figured out how to make it work because I'm already to go through the process of well, to make it work, so I need to prepare for that. So I'll be back in a bit. 27. Media Querries Sidebar 2: All right, I'm back now. Now. Since we are using state management when are using Redux or Context API, we're going to have to pass our stage as a prop. So now down here in the sidebar, I'm going to pass in the nafta. Nafta was one to access the state value, the nav Togo, instead the sidebar. So in here we're going to get the nav toggle. Now if Togo, So class name, class name is close to what's sexually dollar sign. And then NEF toggle. This is a ternary operator. So to get more information about how to use this, just go on Google or YouTube to just such tenor operator, you see how to use it. So if enough toggle, if, if it's true, this state value is true, I want to add a class. I'm going to edit class if it's true. So this is going to be enough. Togo, if it's true. And then else, if it's not true, I'm going to remove the class, which is just empty string. And then save. Let's see, first state is working. Okay, let's right-click on the sidebar. Sidebar. Alright, Now it's working with enough toggle class. There it is. It's toggling. Nafta, go back and forth. Okay. So enough Togo class. The nav toggle set bust out, right for the nafta ago and went to the global style. Down here. I'm going to do nafta or go transform translate. I am going to bring back the sidebar. I think 00, 00, 00, 00. Know. It's coming back. Okay. But when we toggle and now it's toggling. But what we want. So it doesn't toggle because here, because it's not the range that we want to target, the navbar. But in here we are in the range. We can talk about it. But I want to check the Z index of the sidebar. See index to something like 20. All right. It's working as we expect. Okay? Okay. I'm also going to add these DC index to the sidebar down here as well when we're translating backwards. Okay? All right, Now it's working, but we are going to have to decrease the width depending on the screen size. Sidebar. Okay. Okay, I'll end it here for the sidebar. On the next couple of videos, we're going to work on the font size and other pages as well. All right, that's it. I'll see you next time. 28. All Media Querries: Now let's work on the about page media queries. So we can see the size. Okay? I think here, around here on 100 pixels, on one hundred, ten hundred pixels. Instead, the about page 100 pixel. We're going to do at media. Media screen. And Max. Max. With our max width is cost would be 100 pixels. Okay? Actually I'm going to cut, to cut this. Now I want to look at the image section. We're going to do the media query in the image section. In here. I'm going to do flex direction and then column. All right, so now we have a column flex direction. Okay? And also the left content. Left content. And we're to have a margin bottom to ramp. All right, Make sense. Now we need to target these flex items. We also need to do a column, the column floods direction as well. Now let's go to the let's go to the services sepsis service Kurt actually subsection is an IT service. Kurt. Services. Right now in the services in here. We are going to do flex direction, flex direction column. Okay? And then this meat cut margin 0. Let's see what's going on here. Top and bottom 0 electron right is 0. This Taylor much in here. I'm trying to rework the matching, but it's not going away. Top and bottom. I'm going to do to RAM. And then left and right 0. It's now going away. I want to remove this margin here in the midgut. We're going to fix it later die. Right now, top and bottom with tourism. Okay. So now instead of doing flex for the, these items, I do a grid to make it much more easier. And then, alright, grid template columns repeats. And then 3, 1, f. Now we have a grid. We can give it a grid gap. Let's just do a quick gap. To Rahm. Did we have term before? 125? 125. 125. Now. Midgut is not necessary anymore. Okay. So when it's 811, say somewhere between nine fifty nine fifty 19, 950. So for 950, I want the grid. I want to have two items. All right? Now we have two items. Once a rich 700, going to have, actually I'll go 650. Once every 650. I want to have one item, 650. Right now we have finite him. Finally, same goes for the reviews. Copy this media query. Then go to review section. In the reviews. We're going to display grid. We can keep it in flexibly. In here. We do flex direction. Column testimony to grid. Template columns. Repeat. We are going to have to NFA. Then down here we change it to one. Okay? What is this space? There is a margin left, which we don't need. We're going to remove it. Don't worry. We're going to do quit gap 1.1.5. Now, I'm going to write what's going on 1.5 display grid. Now let's see, review item, position relative. Remove this. Okay, I think we need to give it a width with percent. No effect. Let's see what you need to review item with 100%. All right, Now, it's working. So I think the About page is complete. We're going to do the font later. They were pages complete. Okay. Now let's go to the resume page. From the resume page on 700 sandwiches. I want to change this grade item 2, 2, 1, 1 rho k reveal. Now let's go to the resume page. Actually, what any of these skills in here I'm going to do it media. You already know it's going to do the media. And max. At media screen and screen and max width is going to be 700 pixels. We're going to do, we're going to have one column. All right, so now we have one column. Okay, so now let's go down here. It's fixed the timeline. We're going to fix the timeline later when we fix the font size. Okay, so now let's go to the portfolios, page 512. Around here. Less than 20 portfolios? Or is it portfolios? Portfolios. I seem to find it portfolios page. Okay. So the portfolios wage. I need to do the menu, menu. So for the menu, Portfolio content, display grid, okay, here, I wanted to add media, media screen and max props. Make sure there's a space between and max. Max width. 1920 pixels, I think, than 20 pixels here, but we need two items instead of three. Okay? Now we have two items. Somewhere here. 670. We are going to have finite him. 670. Okay. We're going to feel that we need to fix these buttons as well. Okay. So as for the buttons and went to the buttons is in button, actually is a button, button JS in here. I'm going to give the button margin bottom. Mike and bottom 1.2 around. Okay? So now we have nice margin. Actually I want it to be the same as the space padding margin bottom 0.6 RAM. I'm going to give the margin-bottom to 0.6 RAM 16 only to be consistent. All right, should be the same. Okay. Now the buttons are working. We're going to do this one later. Diary. All right, so now we've finished with the portfolios page. Now let's go to the blog page. This one is very easy and quick. Well, we need to fix the, this hamburger menu zoom need to make it disappear. Doyle, fix it. So here 77 says NT, okay, 770. Menu skills. What we need is the plugs flux page. So for the blogs and 770 media, screen. And max, with this one is going to present into pixels. I am going to change it to one. And we are good. Good to go. Okay. Now let's go to contact. The heck is contact? Contact? Okay. So about well, this size, 1978. I want to conduct page it media square and Max width of 100 pixels. You see how easy it is if you use a grid, it's easier to make everything responsive. And right, so now, OK, now we need to add a margin bottom on the button. Okay. Button. Left content was left content. You have read content left and then right. So for the left content, we have the form if the label for this pattern here, for feud from button, class, from bison. Alright, so fun-filled. After the form fields, button, margin bottom. My conversion to copy this one, this my chain in the media queries. Okay. Now we should have the margin-bottom. Why am I zoomed in? I don't know. I'm zoomed in for some reason. Okay. All right. Now we have a margin-bottom thing. I'm going to increase that from two to three red to distinguish these different seconds. Right now. Okay. We need to work on text. Now we've finished the contact. Me, I'll show you that now the website is responsive. All right. Here's the website. We need to fix a minor issue, the text. Okay. So if you go to the homepage About page responsive, resume page responsive, we're going to fix the text fluorescent or responsive portfolios. Okay. Everything works fine. Alright. Plugs. Everything works fine. Okay. And contact. All right. I think that's it for the immediate curious for now. And then I'll see you on the next video. 29. All Media Querries 2: Alright, now let's finish our media queries. I don't think I want to be doing the animations in this series. I'm going to make a part two. We're going to do focus on animations only. Remember we've installed the library intersection observer API. We were supposed to use it for the animation, but I'll do another video for that later. All right, Let's finish our media queries. So now I want to hide this, this burger menu. So I'll go to the global styles. Yeah, this bigger menu, I'm going to do display none. Display none. And then I wanted to show this bigger menu. Was it one dozen to a 100? This era? Let me see specific error. Okay, 1, 0, 0, 0, 0, 0, 0, 0 to a 100. That's when I want this hamburger menu to show the domain dot hamburger menu. Right now this hamburger menu to block. Okay? And let's save this refresh. All right, so now it's showing there isn't unless the cell but disappears, the hamburger menu shows up. Okay. All right, now let's do the text. Let me go to the portfolio section and announced I wanted this area here. And we should have a duplicate, duplicate key. Insert the data portfolios. Yeah, replicates. Okay. Okay, Now along to save, so we don't need to duplicate it anymore. All right, so now, now what I need to worry about is the font size. So we wanted the title or the, I guess the tide title component. So now I'm going to and to see the size of the okay, let me see the size. Roughly 12. So roughly at this size, that's when I want to decrease the font size. So it's 620. So for the dose titer after and decrease the span font size. So it media screen. And max. And max width is going to be this one, 720 pixels. I want the font-size to be somewhere around, let's say, for m. Right? Okay, now it's four. Okay? And also, I want to change the main layout. A 100 year change depending here. All right. I want to decrease the font again. So it's 596. 596, 596 difference going to be through ramp. I'm going to copy this one and you see, oops, I'm going to copy this one and the six is, or I'll put it in the H2 in here. I'm going to decrease the font is. So the font size is 3.1 RAM. And when I say 2, a tramp. All right, Save. All right, now the font size is smaller. Now. On for 400. Actually funded or 370 and wanted to do 370. 370. 370 will be our last our last size. I'm not going to do further than that. I will say to lamb, let me see how it looks. Yeah, to RAM makes sense. And then I want to decrease the the span is one. So this pan, I'm going to decrease the font size from three to one. Ramp. Oops. 4, 3, 2 REM. All right, everyone, I'll go further than that. Okay. Now let's look at other pages about right. So now it's hard for me to do is change the main layout. Okay? So right about here, 640 2. When I go to the Styles, Layouts, layouts want to change the padding at media. Screen. And marks with flux width is close to 652 pixels. Here the padding is going to change from five from, let's say forum. Alright. Now if more padding right about here, I'm going to change the padding again. So 514 actually or 510. And when to change the formatting again? 510 from foreign 23 rank. Okay. All right. I think this makes sense. Okay. Let me see if we have any issues with the resume page. Do you have any issues here? Yeah, we do have issues. The font will fix that. Portfolios issues now it doesn't then plugs. We have issues. We do not contact here, we do have issues. We're going to fix it. All right. Now, let's go to the actually, oops, let's go to the responsive. Okay. And this size, I think I want to change the font size for four to 542. How much do you have for the font field? Okay, we're going to decrease the width for the form field. Let's see the red content div for the container thing, we're going to reduce the padding of left and right. Okay. Now, lift running. What are we using you? Display flex. Okay, We're going to hold on a sec. So what do we need to go is to conduct page now for the form Connect section. For the four, we're going to do it media, media, screen and max. Max width. So it's this number in pixels. Width change the width to 70%. All right, so now, now we're going to work on these items. Can hear this item, Dr. I think I'm going to put them in a grid so we can make them responsive. Is the right content? What is the right content? I'll do. Display grid. And then grid template columns is going to be repeats. 1, alpha 3, and Unit 1, column 1 f. Ok. Now, we have lithium as a grade item. Okay. I don't know why they got bigger, but it's fine. All right. So now I'm going to change the width, right? Content. With 100 percent, it's not working. So with output's 80 percent, 60% left and right. I suppose the VND, right content. Content. Content is, this is what content with which I surrendered descent. And you see what it looks like. Okay? So we're going to apply 70% on the screen size, which is on the screen size. Actually, you know what? I think? I am going to remove the padding. Go to the layouts. First seven to one, padding, the point forum. So I'll think of common. These are the cell can do whatever feels good for you. All right. Okay, bring back the width to 100 percent for the for the, for print. I'm not going to sweat it anymore. You can keep adding medical reasons you like and what it stood for. And we'll stop here. Now let's do the font. Okay, I think I'm going to try to maintain the the margin top and bottom. So top and bottom numbers to ram regiment in that. Okay? All right. You can add as many media queries as you want, but I'm going to stop here. And now. Oops. Now let's work on the sidebar. The sidebar. I'll keep this width for the sidebar. It's fine for me. But you can change the width or whatever whenever you want with the media queries. Do that already. So now let's see if we have any issues before for the media queries before I go to fund still looks fine. Of CST resume. Will we need to register for and size and spacing for the pseudo element. Alright, so around here for 21. So I'll go to the resume, resume page. And then resume. I said the components. Okay. What do I need to type it now? Resume item. And you've got a resume item. All right. So I'm Hinduism item in here. I went to target the media, media, screen and max with books. How many pixels are the 421? 427 pixels. And then I want to change the font size to 90 percent. Right? Let me try to change the from maybe from 90 percent to 60 percent maybe. Okay. Let me try to change it more. You can know is change this font size to feel comfortable. I'm not sure if this is changing. I can tell the difference, but let me double-check again. We can try to do it in the, actually in the global emitter do here. But it's going to affect other font sizes as well. Let me see. So I can see why. Because I'm aren't targeting the, if I'm not targeting any element. Let's go back to the reservoir item and into target some elements. I'm going to tell it the paragraph rama does this guy is left is making a loan as these mass mate. I wish I had the paragraph and what I was trying to target and H6, H5, H6, H5, and H6. And then I'm going to say font size. 80 percent. Did it work? I'm sure. Okay. I think I'm going to cut this video for now. I will disguise making a little noise. I want to cut this out. We'll be back in a bit. 30. Minor Fixes: Okay, so now let's fix some small issues before I go. Alright, now, Kobe should Viscoat. I'll go to the navigation. Oops, my friends and I said, I'll go to the navigation. Navigation. I'm going to look for the link. Remember, we have this issue here when we have the item. All right, so now go to the link chain, the on hover. We're going to change the color from primer color to white color. And then let's save, let's see, it's white. But you see if the issue, so we want this before element to be below our parent element. So what I'm going to do is this before element, I want to do a Z index of minus one. Alright? So now there's the issues are there anymore? Okay? So now let's see if we have any more issues. Okay, now let's fix the warnings that we have. Green is used whenever defined. Let me green. So if I go to the contact page, actually the global, do I have grinning rain when there's no green in here? So let me see. It done here in a layout less than a page. Is it the resume page? I'm looking for? I'm looking for the title is I used in here. And the inner layout as I use in here. So I'm going to save man layout is known, never use kills the JS skews. Let's remove everything there when are using, right? And green is never used particular js, Where the heck is put QTS particle. Let me look for particle right here. Let's find it green to the Evergreen somewhere. The screener civil would come from material you I can move it. Now we have one warning. The warning is set buttons. We don't need to do anything. I said buttons, death, leave it as it is. And then now three-year finishes for us for the media queries. Okay, I'm going to change the font size a little bit for the main homepage. So I'll go to the URL, go to the homepage. I'll copy this. So for the homepage, It's homepage. What is it? Oh, I may conduct for yes. Also be in the homepage. Homepage. Right. So in here, I'm going to change the H1. It is setting the width and we'll change the H1. H1 is going to have font-size. I'll say 80 percent. Okay. Generalize too small. I'm going to do and when to do it in RAM topography. Sort of H1 inside the topography. But address it here. Span. I just said here. Let me see where it is. Global styles span, okay, it's right here. So I guess I'll have to do the media queries. In reducing the global. I'll do it here. In here I'm going to do font-size transfer around to do to them CMS, the span, mystery. All right. Now let's now let's save. Let's register with hopefully, Yep, The font size is smaller. Now, think to ram was too small. I'll do three RAM. All right, So now, okay, it's fine with me. Now let's go to the portfolios page. Contact, resume page. In here. Let's we can put this navigation puts you into fixed actually. So in here, we're going to have to do a media query for this spacing here and for these before. So detriment. I think you have to do they only on you not to do that already. So I don't want to waste anymore of your time. All right. Do we have any issues? We only have the set buttons issue. Alright, so now what else do we need to do? Well, in the resume page, actually in there about in the reviews, I was supposed to SM names below here on this this thing here. I was supposed to SM names. You can do that. I think you know that already. So I don't have anymore time to add some names down here. You can also create a separate data file for the reviews instead of what I did during a desert fixed to review, you can create a data file. So when you implement dragging 100 to drag, this reveals you can use that data. To do that. You can, it is more visits. I mean, as many visits you want and then it's going to keep expanding. So if, for example, if I go to the blog data, we have wonderful blogs. Now, if I go to the blog data, what I can do is the blocks, again, add another block down here and put a comma and put the ID of 55 AG. And then now we have another block down here. It's going to keep expanding according to how much data you add. So you can just create a data for the reviews. So you can add as many views as you want and then it's just going to keep expanding accordingly. But I think, you know, to just to do the design for the review agents, so I don't need to show you anything else anymore. All right. I think that's it for the videos. And then I think in the future I'm going to maximum videos as well to do the animations using the intersection observer API. But I'm not going to do that now because I have limited time to make these videos. I think this video is going to be around 10 hours or nine hours. I don't know. Yeah, I think that's it. I will make some leaders in the future. If you have any questions, just ask me and then 00 answer you. All right. See you.