Build a Modern Responsive Portfolio Websites with React and TailwindCSS

1. SkillshareProjectsREACTTAILDINDintro: Course is for everyone who wants to learn about creating websites with react and tailwind. Welcome. Let me walk you through what you will learn and what you will get in this package of websites built with react and Tailwind. This course is completely project based, so you will be learning all this real project examples that you can then keep or customize, save into your portfolio or just use later for your first client project. You will get hours of content to learn and practice tailwind CSS. The projects we will be creating are portfolio websites. We will be building working contact forms so users will be able to send messages to us multiple responsive navigation bars that you can easily use, just like all of the other components, about sections, portfolio sections, hero sections with different layouts, and you will practice how to build your own cool user interfaces. These projects were my road to understanding where I should change or at a tailwind class to make the website work as it should, how to fix bugs, and so on. Now all these step by step solutions are here to help you understand how you can build websites on your own. Fix box in completed websites and overall, learn the knowledge, practice, or just gain more experience to kick start your front end developer career. We will be using Tailwind CSS, and Tailwind CSS is like a big library of premade CSS classes that you can use directly in your HDML to style elements without writing custom CSS each time. Unlike traditional CSS, where you might write styles in a separate file, tailwind lets you apply styles directly to your HDM elements with small single purpose classes. Alongside tailwind, we will be using to create reusable components that you can integrate seamlessly into any of your projects. 2. Project 1: Intro: We will start with creating a navigation bar that on mobile screen will turn into a menu icon that will then display the navigation items whenever it's clicked and expanded. In hero section, which is the first section visible after user gets on the website, we will be using a profile picture with a small t effect behind it and on the left side, a quick description with a CV to download button and on the right side, the social icons. In about section, we will create these columns for our pictures to create an interesting design element that we can put next to our text. And below, few metrics where we can highlight our achievements. Below, we will create a section with our selected projects that we want to highlight. Then we will create an experience section where we will create this letter of our working experience, or maybe if you don't have any yet, we can prepare some achievements from school, and then on the bottom will be a contact section with working contact me form that will be actually sending messages to our mailbox. 3. Project 1: Setup: We'll start by going to the tail end page and there in framework guides, we will go into WD and there we'll start using the commands. We will open the terminal there. We will now paste it, and we are already in our folder, or at least time portfolio website. So there we will delete the My project, do there just a dot, hit Enter, and it will initialize the project there. Now, as we are already also in the folder, we don't need to see it. There we will use this one, install Autoprefixor. Now the next one for initializing the tailwind. Now we will copy this and put it into the tailwind configuration file. Now the tailwind directive in index CSS. There we can delete Epidt CSS, and to test our application, we can also take this, put it in EpidGSsix, save it. We can clean the terminal and do NPM run depth. Now this will start our page. First, I will load the images into the asset you can find on Git, and then I will continue with creating a new folder that will be named pages, and there I can start. First, I will create enough bar. And we can create an export there and put it into our Epidot J six. So there we can start. We will do first import the navbar. And there we will return all the components. So we will do an empty fragments that will hold the Navbar. And on the bottom, we'll do Export default app. 4. Project 1: Navbar: First in the navigation bar, we need to import the use state because we'll be using a state variable there for the navigation bar as we will be switching from the mobile to desktop navigation. Also, we will import some icons. So I will use outline clothes and outline menu from react icons AI. First, let me import or install the library, so N PMI react icons, Now we can do the AI Outline clothes and outline menu. And also, we will import the signature and what is it. I basically created a signature there, transparent signature, and I will use it as my logo. So signature from As such, sinagrePNG. The first, I will start with the state variable, so I will do the NaF and set navigation use state default will be false. Then I will create a function to handle this navigation. So setNa and change the value. And we'll be using this in click function in our navigation. That should be it. There in the main Div we'll open we will first set some class name there. We can use text to black. Then flexbox layout, justify between, so there is evenly distributed space between our elements. Then center it vertically, maximum width to 1,300 pixels. We will center this as we are using the maximum width, and we will set some initial height. We can also set there background green to 700 now to just see the navigation on our page. Now it should be updating. So let's change it to light color and this so it's working. So we can see we have it there. So first in this man div will be a logo, and this logo will be wrapped in the anchor text because we want it to take us on the homepage when it will be clicked. So let's add source, and I will ada the signature. I import it. Now you can see there is the logo or the signature. So we need to add also a class name to this anchor tag. There first, we will start with some margin to left, and, of course, we need to set the maximum weight. To something like 100 pixels. Now I will increase the page there so you can see it better. Okay. Now we can continue with the unordered list that will hold list items. For this unordered list, it will be hidden on the mobile screen as there will be the mobile navigation, and on a medium screen and above, it will be displayed flex, and we will use phone semi boat for all the list items there. Our sections will be about work, experience, and contact. So we can start with about then with work, then with experience, and then with contact. Then we can hold add for all class name with some bedding. Let's bedding five. And now we need to wrap this into a link tag. But first, we need to open a terminal and do we need to get it there. NPM, I react scroll. Now, this will get installed, and we will do the link. Hit Enter. That way, it gets imported there. We can double check it. Now we have the link, so we can put inside the link tag the about. There in this link, we need to put a two, so two and about. Same will apply for work experience, and contact. And I think it won't need these slashes. Let's test it later. Now, also, we will need to add a few more try moods and that will be smooth to two, then offset to 50 and also duration to 500. And that will indicate how the smooth scroll should work. Now we can take this and compete for the other items. Now for the icon on the mobile screen, we'll start their div. Inside this div, we will do a navigation turning operator. So based on this value, which is default false, we will show the closed icon or the menu icon. So let's start with the outline close. In case of true value and in case of a false value, let's use outline menu. We can also put inside their size to 20 and we can also put there some class name or we need to. So on mobile screen, it will be displayed. But on medium screen, this should be hidden because we have there the desktop navigation. Now you can see there, we have there a new navigation, and we have there also the desktop navigation. But if now I will save there these values, it gets hidden because it will be shown only on the mobile phone. Of course, also to this day, we need to add the onclick function. So on click and it will call the handle navigation, which is there. And now we can prepare the navigation for the mobile phone. So whenever this icon of menu gets clicked, it will open div with the unordered list. So let's open div first. There we need to do the class for this dif, so it will again also use the Turner operator based on the value of the Np variable. And there it will say, again, true and false position on true, it will just show this mobile menu. So with some index, text to gray, it will be fixed. It will have full height. It will be fixed to left and top to zero. The width will be to 60% we can add some border to right. And I think that's it. And for the fourth position, it will just be fixed in a left minus -100. So somewhere over there, it will be just out of the screen. We can test it. You can now see how the border appeared, but we need to add the nord list in order to see all the items. So let's continue. First, it will show we can basically take the things we have there, copy there and update the styling. So this one, let's see how it will look like. What we can do is that we will add their background. So let's start there background gradient two, right? From gray 500 via gray 702 gray 900. Also, we will add their east in out and duration 500. Now this is a bit better. But we'll make it a bit darker. So we'll make it from 700, 800, to like this. Also, next thing we should do. Let's cut this maximum width for the image and put it there. So let's do width to 120 maybe. Let's actually do it also there. So we will add there width to 100, cut it from there. Now, it looks like this. And if we increase it on the desktop version, it still looks good. So we will now need to add there some margins and increase the text sizes. First, I would go there, do text for Excel, then maybe do their margin from left to, like, I don't know, 12. That's also a bit better. And then there we will add the betting. And we'll add our class name, margin left to 12, and that should be fine. So now that is how it looks the mobile navigation. What we should also do is to add some margin to the icon. So there you will margin right to six, and that should be it. And we can move to hero section. 5. Project 1: Hero: What we need to do is to open explorer in pages, do a new file, hero JA six. We need this export there in Abdo JSix. We will just write a hero, click Enter. Now it gets imported, we have it there. We will be using a react type animation, open a terminal and do NPMiRact type animation. Now I will close this. Take the page, put it somewhere there, and we can start. First, I will import there the profile picture. So it will go from assets profile picture. And let me check the name, actually. Yes. Is this one? Now we have it there. We will import some icons, so I will import AI fill Linkedin, AI fall Git up, and also AI fall Instagram. Next, I will import the type animation from the library we just installed together. Now there I can go directly into the main Div and I can start. So we will add some vertical margin there. On medium screen, we will set it. So it will be mainly for the mobile devices to have there some additional spacing. Then we will set a maximum weight to 1,300 pixels for the navbar. Then from medium screen, we will set also some viewport height. So we will have more space for our hero section. I will use 70 viewport height. Then we will center this as we have the maximum width. We can use there sum. And I will do it on the start some background green 300 so we can see where we're at. I will uncenter it for you now so you can see I will put it back. Then we'll be using a grid layout because we'll be having in this section, basically, let's say three columns, but I will use the for medium screen, grid columns four because I will want my picture to take two of these columns. So in the first column on the left, there will be the name. In the middle of two columns, there will be the picture and on the right column on the last one, there will be the icons. Now I will also use place items. Center. First, what we will do in this div is the name with the type animation and with the button for the CV. So I will do another div. And in this div, I will do a paragraph tech. And in this paragraph tech, I will do a M. Now let's do a new line. Spen tech. It's not on the win. And after this, we will use the type animation. For this type animation, there is some sequence. Where we will put the things we want to write on our website. So first, we will do the developer. Sequence will be 1,000, then we will do the web designer. Again, sequence will be 1,000 and a consultant. Sequence will be again 1,000. Then we can set there some speed, so I will set there a speed of 50 and some repeat. And of course, repeat will be on infinity, so this is an infinite loop. Now we can see our page is fully white, so it probably failed. We can see the issue by going on the page, inspecting it. And there in console, we can see infinity is not defined. And it just didn't like the small ladder. So now on our page, we can see it's working. Let's add the styling. So for the paragraph tag, I will add on medium screen and above text five Excel. On smaller, we can do text tree Excel and on mobile phone, we can do text Excel. Then we will use tracking tight, so we decreased the letter spacing a bit, as you can see there. Also, we will add there from the Spen tech, some different styling, so I will add a font extra bolt and italic. So maybe a bolt is enough. And after the span tag, I also need to add additional break tech, so we have this another line. Now we can go back to our div. For our div, we will set some maximum weight of 400 pixels. Then we will use a flexbox layout and why we will be using this. Because in this div, next to this paragraph tag will be also the button with the CV. And on the desktop version, this will be below each other. So the flex direction will be column. But on mobile version, this will be next to each other. So it will be with flex direction row. Now, let's add the styling for the button. First, where this button should take us. I will leave it up to you. It should take us somewhere where our CV stored. Then we can set the title for this button. So download CV. And we'll add a class. So for classes, we can add some margin to top. We can also add some padding, so let's use. Let's just do padding two there, and we can add another gradient color. So background gradient to right. And it will be from a one color to second color now let me take the coats for the colors I want to be there. So we will go from this orange to this purple color. It's pretty similar color to the one I'm using on my profile picture. And actually, we can add now the profile picture. Or maybe first I will do just round it. Excel. Let me move it for you and maximum width to Let's try 300 pixels, maybe 260. 80? Okay. Let's keep it like this. Now we'll find where this div is ending. That's there. So there now we will add the picture. That will be the second div and inside, we will do the image with the source of profile picture. We have there. We can add also an old profile picture. There we will add also class name. So let's set width to 300 pixels for the mobile phone and on medium screen and above, we will set this weight to 500 pixels. Then wait first, let's do it. Heads to auto, and we can also use the centering for the DIF above. We will set from medium screen and above to take column span two. And with this, we will achieve that this will take two out of four column span that we set there. So we have there four columns, and with this, we are saying that this should take two of them. We don't even need to specify it in the other diffs because this will be enough. And now you can see how our picture increased. So that will be for the picture. What we will also do is that on medium screen and above, we will adder some margin to left 28. Let's don't be afraid of the value. And now we will add the icons, so we will add a dip Inside the death, you will add the anchor text, and inside the anchor text, we will add the AI fail. Get up. Let me copy this two more times. AI fall LinkedIn and AI fail Instagram. Now let's do the styling. So the styling will be text five Excel, so we can nicely see these icons. Then flexbox layout. So on mobile phone design, we will use a flex row so they will be next to each other on this desktop design. So from medium screen and above, we'll be using a flex direction colum so there will be below each other like you can see now. Let's set also some gap. Maybe this is too much. 12. Maybe even ten is working. Also, something else for medium screen and above, let's set width to full. And also, let's place items to end. And this means they will be nicely aligned below or on the end of our 1,300 maximum width. Now let's dt the background screen. And that should be it for the hero page. Don't forget there to add some HRP of your Git up LinkedIn or Instagram. 6. Project 1: About: Now we will continue to the About page. So there on pages, you file about the J six. Let's get this to Abdo J six. Again, we can now see it on our page there. And we'll go to the component and we can start there. First, I will import the A image from the assets. So again, let me see how it's named about four JP Save it. Now I can open the main disk. And I can start with the styling there. So first, let's set a maximum weight of 1,300 pixels as is standard for our page. Then we will add a flexbox layout, and we will use items to center and to justify center to center items vertically and horizontally. Then we will center it with the mixoto again, you can use the background to, I don't know green 300 to see where you add on your page. Currently, there's nothing. So if we just add something, you will see it there. With this, also, we can add from medium screen and above. We don't need on a mobile phone, height to 70 ie Baheit maybe. Okay. And we can even delete it. And we can continue with another div there. And but it will be there for holding our about image. So we are there class name with flex and flex row because we want these images to be next to each other. We will also at some Gib there. And in this dis, we will add the first image, and we will add the attributes, and then we will just copy it as a second one. So about image. This can be with about image, and the class name will be object cover. We already have it there on our page. So let's do it rounded Excel. Let's also do a width to 100 pixels. Ah, now is there? Let's do height to 300 pixels. Let's use a filter and set a gray scale because I don't want my about image to take too much attention, and also we can lower the brightness to 50. That is better. Now if we copy this image and we'll put it there, we will have these two about images next to each other. But what I wanted to achieve there is that I will lower the height of the second one to 200. And now you can see on our page it will create something like this. Let's first add other content, and then we will be figuring out how to make it work a bit better. But for this, first, we need to also add there some description. So in this other div, we'll be adding something about us, few sentences. So first insight, I will add the paragraph. Let's add the styling. So there for the paragraph, we'll add the king tight. So again, we will decrease the letter spacing a bit, reading loose, so we will increase the line height. Then we will see the maximum weight. Let's use 500 pixels. Now in this div, if we will move, we can add there the statistics. So we will create a new dish. And inside this div, we will create more discs. That will be holding the H two with the statistic number, so 11 and then Spentek plus. And then below, there will be a paragraph tech with projects. Now we will add the styling. So for this statistics dip, we will use let's first do the main one, flexbox layout, gap, margin from top, maximum width to 600 pixels and centering it. For the containers or small containers with statistic itself, we we the class name, background gradient to right from gray 800 to black with some pink and with some rounded large. Save now for the heading two, from medium screen and above, we will set text to four Excel. Otherwise, it will be text to Excel, f semi bot, and we would like to have this text gradient color. So we will now at a CSS class. Let's open the files, open the index dot CSS, and there we'll add background text primary color. And inside, we will add background image, linear gradient to right. There we will use the colors we used before. So where it is there, we can copy them. But we don't need this from and these braces. So we'll do it like this only with comma s. So it's to write from this color to that color. And then we will do a webkit, background clip to text. Also, we'll do background clip to text. Web kit text filled with color transparent and color transparent. With this, when now we will go to our A section, and there, what was the class, Background text primary color, take it and put there and save it. We will have our text with this color. And we will use it there for the projects, not for the projects, we'll use just text white or actually text gray, I don't know, 500, maybe 400 let's see how it looks. That is better. Now what we can do is that we can cook this. Put it there two more times. There I will do six plus years experience and that I can do 30 plus at the liens. Now before moving to green background, we also need to style this. So we have there the first diff, there is the second one. Let's adt gap 24. Let's remove this background and let's see how it looks. What we need to do is to update there for the text of the size. So this one will be Text Excel, definitely, at least. 7. Project 1: Portfolio: So let's open the folder. The pages you file portfolio dot JS six. Now we'll import it there. And we can start. Let's start with importing the project pictures. So import Project one from assets project one dot PNG. Then I will do this for all the other ones. So one, two, three, four. Nice. I have it there. What else I would do there is that I will create a list or constant of these projects. So I will do a constant of projects, and there, I will load all the information about the projects, and then I will iterate over them, and my code won't be repeating, and I will do just one project card. And whenever you will just want to add some project, you will dit there into these projects. So you can see there I will add image that will be Project one. Then I will do a title that can be just project. One, then I will do description, and I can repeat it. Now I will just add there a few more projects and I can continue with defining the project card. This project card, what I will do there, where we will take a project as an input that we will put there in the map that we will use in this main portfolio. This project card, you can also do as a standalone component there. If you will just create a new folder with components and create a new file, project card.j6. You can also take this L code there, but I will keep it in this portrayal of J six component. There we will start with the return, and I will do the div. This main div for the project card, have some styling. I will add I will add rounded corners, background gradient to right from gray 800 via gray 900 to black. Then we will use overflow hidden, so nothing will get out of our cards. Then some shadow to Excel is enough. Let's also add some z index, at some transform and transition and duration. So whenever we will now use the scale to 500 and whenever we will hover over the card, you will be able to see how it will increase and transform itself and increase the scale. Then we can start there with the anchor tag. And in this anchor tag, again, we will put an image. For this image, we will add a source, and the source will be the project dot image. And again, this project, you cannot see it anywhere. There is only project, but we will be mapping over projects there and using this project and calling this project card. And then this will map this image value, title value, and description value. So source will be this image value. Then we will have there also some class name, even for the image, of course. So height will be 300 pixels width to full, object to cover, object to top. Rounded top will be to Excel. That's it. Let's also do this styling. For the Anchor tech, we will set there an HRF, and there in ideal scenario, you will put URL to your working life demo of the website, you did. Or if it's for some clients, just put there the link to their website, then class name. So we can group this, set the column span to three, set their display to block, and also do their overflow hidden. And below the image, we will put the disk And inside this dif, we'll do heading two with the project title. And also a paragraph tag with the project description. Let's close it. Now, about the styling. So for the dif itself, let's put there some bedding, set text to white, some margin to bottom, and margin to right. Now before adding there more styling, we'll add code there. So we'll be actually seeing the styling we are doing there in the portfolio, we'll do another div. And in this div, we will do the projects dot Map. We'll do a project index, and there we will call the Project card. So project card. Inside this project card, we will input a key, which will be the index, and in project, we will input the project. So we'll input there from the project maps, the project, and there it will read its title and description. And all these informations we have there. Now on our website, we will scroll down, you can already see there the project. Of course, now you'll add the styling. First into the man Div, some bedding, something from button also. Okay? Now, let's continue there with some maximum width. We are using 1,300 pixels. And you also center it now into the second div, we might not even actually need. We can do it in the first one. What we want to do or maybe what you want to do also, is to have the grid layout and put at least two projects on a row. If you maybe don't have that many projects and you feel it will be better to just have the projects online and below each other, you can also leave it like this and just add there some spacing between the projects. I will use the grid layout, so I will add the grid. And on mobile screen, we will leave it as default value on column span one or grid columns one. But on medium screen and above, we will add grid columns two. So the projects will be next to each other. Also, we will add some gap. So we have some spacing between them, and we can move back there and do some styling for the heading two, which will be text to arch on semibt. Okay. And for project description, we will add text to gray 300 and text small and march into dp. Let's see the Bache. I think we'll leave the heading to text white, and that is fine. And I think we can leave it like this. 8. Project 1: Experience: Now let's continue with the experience section. So in Explorer pages, we'll create a new file experience.j6. We will edit there. And we can start. First, what we will do is that we will do a constant with our experience. So let's do experiences or also resume. And there we will start with company duration and description. Oh no, this They're company, so I will do just first company. Duration I can do there, I don't know, 2017 to 2018 and description. I worked as a front end developer. Now we can coup it, do there something similar, but change it to second, third, of course, there should be the real names of the companies, but I will put there just some placeholders. Fifth. This can be 2018, 2019, 2019, 2021, 2021, 2023 and 2023 to present. Of course, there will be a different description, most probably. Again, I will use this as some placeholder. Now as we have the list of the experiences, we can now use it in the main div, so we won't do any repetitive code, but we will have it there, and we will access it via the map and reuse it. So in the main div, we will add some class name with some bedding, with some mixing with 1,300 pixels. We will center it with a Mixoto and we'll add also relative class because we'll be using the line, and it will be some timeline for us, and that will be of position absolute. Now before I will map over this constant, I will create the timeline, so it will be a separate div there, and it won't have any content inside. It will have just class, and this class will be of position absolute with some width, background gradient to bottom from gray 500 to gray 800. Then we will add height to full, left half, and also on another line, I can do Transform, translate X, and again, 50% like this. Now you can see the start of the timeline is already on our page, and below, we will map over the constant, so we will do their experiences dot Map, experience, or we can do XP Index, and there we will start with the not empty fragments, but with the div. In our first di in a class name, we will do curly Basis, backslash, flexbox layout, and inside, we will check if the remainder of index divided by two is zero. And if yes, we will do justify start, so it means our experience will be on the left, and in case no, we will use justify end. So the experience will be on the right. And this is a turner operator. So the first position is a true one, and the second one is false or is executed. In case, it's false. So this condition more exactly. There we will add items to center and also vertical margin to eight. And there we will use key as index. What's wrong there is that for Turner operator, we are missing there the question mark. Now inside, we can create another div And in this dip, we will at the experience dot company dot duration at and do the description. So we will do the paragraph tech with experience dot company. Of course, company. Now we can copy it and do it for duration and description. Like this. Now we can check the page and you can see on our page how it's on the left and on the right. Now, also, if you will add the class name background black, you will see how exactly look like. We can for now, or we can now edit the gradient color gradient to right from gray 800 via gray 900 to black. So we can nicely see how it will look like. Now, check the page. And now you'll play with the padings and not even margin, I think. Let's go. Also, we will set there the maximum width. Definitely, so into our div right there, we can do the maximum width. Let's try 600 pixels. Maybe 700. Let's check the page. 700. Also, let's do it to full. Now it's better. So now maybe you can go back to 500 let's do 500. Or six? Let's do six. Now also we will add there some rounded three Excel. Let's see how it looks like. That's fine. Some shadow. Some overflow hidden in case, so it won't overflow outside of this card, let's say. Maybe some padding. That's a bit better. Now you'll need to add also text color, but I won't be putting it there, but to each line because on the company, I will use text white maybe or text grade 200. I will use definitely font semibolt I will use text Large. Okay. Now there on the bottom, for duration and description, we will try text gray, 400 Mm hmm. And for description, also, we will add text Small. That's better. And I think that can be for our experience section. 9. Project 1: Contact: Let's move to contact section. So there on pages, new file, contact.j6. Now we'll edit there. First, we will add their icons. So we will do import AI fail. LinkedIn. Also AI fail Git up, and also AI fail Instagram. Save it. There in contact, we can start with the main DIF. Inside, we will first do some bedding, 16 from top, and that's it. And then we will do another div, and that will hold our contact form. So there we'll do a maximum width of actually, let's now use seven Excel, for example, let's use a background gradient to write again from gray 800 via gray, 900 to black. Now, if we will add there some content, we can see it already on our page. There we will again center it. We will round it Excel. And there we will at at least from medium screen and above, height of 92 portight Now, you can see there is our section. Ipectrum to black, you will be able to see where the section exactly is. Inside the second div that is for the form with this background, we'll start adding the header div, which will be with let's connect and start working on something. Paragraph text. I think we can edit right now. So there we will at first heading two, that will be let's connect. And below, we will add a paragraph with and start working on amazing things. Now let's add some styling there. So margin bottom, punt ball, tracking tight for the style. Text gray, let's use 200 for the heading, text three Excel, maybe even increase it. So for medium screen, let's use Text five Excel. For the paragraph, let's use text XL and text gray 400. And I think that's it for now. For the dif that will hold this, we will use maximum weight of three Excel. We can see where this the rng y. So we can do text to center and mix to like this. Now maybe we can increase the text even here. Awesome. Below this div. Let's add some margin to top. Actually there. Now, what I would do is I would add something. And then below this day, we will do another one, and there we will fill the information for contacting or we will let the user fill the information in case he would like to contact us. So there we will do first class name with flexbox layout and justify to center So there we will do a dip with grid layout. On mobile screen, we will leave it with grid cools one on a medium and above. We will change it from the default value of grid columns one to grid column two. Inside, we will start with the first and second div. The first div will be on the left side and will be with some contact informations. And below, we will have a second dip, and that will be the actual form for the contact Form for filling the email. So we can edit right there, ID, form. But we will start with the first diff. For the first dif, we will add a vertical margin to auto, some padding to write to six. Inside, we will do an unordered list. And there we will do a first list item second and also third list item. Each of them will hold the icon we have there. So AI fill LinkedIn. Then AI fill Git up and AI fail Instagram. And there let's continue with the class name. Actually, what we can do is to hold out and do the class name with some width to 70. Pixels eight to audio and text to gray 300. Also, then we can style it like this. And in this list item, there will also be a dif. And in this dif, we will have a heading three with We can put the address. We can put there contact. Then a paragraph with mobile, and the paragraph with email. In case somebody don't want to fill the form and just want to use the email and contact us directly. Then this div we'll add some margin. Also, we can already sit there, but take this diff, cut it and put it below this one. Now it's better. Now we will do more magic tricks. So there into the dip, we place items to center for the list items, and actually, we can take all of them. We will add a class of flexbox layout. Now there for heading, we will add text too large, one too bold, and text to gray 200. This is what we all exactly there. But instead of 200, we will at 400, save it and see how it looks like. Now, for the Git up, if we will do the same thing as in the previous list item, we can copy this paragraph with heading or the Wal dif, actually. Put it there, and instead of contact, we'll put working hours and we can do Monday to Friday, I don't know, from 3:00 P.M. To 8:00 P.M. And on weekends, we can do Chels available on WhatsApp. For example, now for the Instagram, we can leave it as. Now we'll add the email form. So there in the div for the form or with the ID of a form. This four is kind of straightforward, we will add there some class with the maximum width of six Excel, some padding, and we'll increase the patting on a medium screen and above, something like 12. We'll add a form Inside this form, we will put an action. In this section, we'll put an endpoint, but I will do to do because after we will code this UI for the form, I will show you how to make this work with the gtformtiO page. And actually, when someone will fill this form and click on submit, you will receive an email into thisgtform dot IO, so it will be fully working. Let's add their method, post. And we will start adding their input boxes. So first, let's add a div. Let's do their margin to bottom six. Inside, I will put input, another input and the text area. For the first input, it will be of type text. Also with ID, name, then also placeholder your name. Then also class name with. Let's actually save it so we can see it and add the margin to bottom with the full. That's actually not at yet width to full. Rounded medium. Now border gray 400, some bedding Y to two, bedding left to two, bedding right to four, Let's check it. We can actually add there width to full. But yeah, we will add or we will just copy this line and put it there because now this input, it was right next to it. Now, as it's taking full width, it will be below. There we'll just add different placeholder, which will be your email. So let's put it like this with ID, email, and type also email. A, we will put there name two. Name and there name two email. Like this. In text area, we will at ID. Or let's start with the we will at ID. That will be text area, name will be text area. Columns, so defaultly we can set like 30 rows. We can set defaultly to five. So it will look like this. And we will set a placeholder write your message. And now we can do class names. So we'll use the width to fill margin to actually about the margin we don't need. Let's do rounded medium, border gray for 100 and also a border itself actually for better readability. Let's do it like this, copy it and put it also there. Nice. Now, after Border color, we will set also some padding white. Two, pdding left two, and I think that's it. Now let's check the page. That looks fine. We will need to add a button also, and maybe if we will set rows to four, it's okay. Fine. Now, below this div, but still in the form, we will add a button that will say send message, and this button will be of type submit and this button will be of type submit with class width to fill. We need to do background gradient to write from gray 400 via gray 600 to gray 800. And now we need to move the colors a bit. I think, or maybe let's make it a bit darker, 600, 800 to 900. Maybe that's too much. What about 700, 604 hundred? Let's do four. I think that's better. So now, if we will add there also some BI to three, round it to Excel. It looks better. We will also need to add text to white or rather text to grade 200 for semi bolt and text Excel. And we cannot do rounded Excel. We need to keep the rounded medium as we do for our inputs. So we'll do it like this. I think that's fine. What now else we can do Basically, that's it, and I will now show you how to make this contact form work. And for which endpoint, you will need to change it there. Let's go to this page, ap dotgtfm dot IO slash Login. Then we will sign up, click on Create there, put there some name and put there the time zone, copy this endpoint and put it there. Of course, this endpoint is not valid. You need to put there your own endpoint that you got on that page. 10. Project 1: Footer: Now we'll open an explorer. There in pages, we'll create a new file, footer.j6, and there we'll do the Footer. Let's add it to our Epi Ja six, Footer. Save it. For the footer, we will add icons first, so import FA Github, square FA Instagram. There in the main Div, we had a maximum width of 1,300 pixels, center it. We will do background gradient to write from gray 800 via gray 900 to black. Now also, we centered it so we can round it to to three Excel. Actually, let's add there some content. We will want to have only rounded borders on top, so we will use this. Then also, we will use a grid layout. And we will use great columns two, actually, on mobile phone. And on medium screen and above, we'll use grid columns to four. So we'll have four columns next to each other. We will use place items center, some pink, and text too Large. Let's start adding the unordered list. So first, unordered list. With paragraph tech, there will be some logo. Then with the paragraph tech, there we can have our name or some description. I'm a Costach developer and consultant. There we can have the icons. So let's put them into a DIV, have a Github square, have a Instagram and why I'm putting there into a DIV Because I would like to have them next to each other. And for that, I will use the Flexbox layout and flex direction row. I will add some gap, and I will also set for them text to gray 400. With this, I don't need to do any additional staling for the separate icons. And on the bottom, I will add a paragraph 2024. G join. There I will also add the styling for text gray, 400. Now, for the description there, let's add text gray, 400 also. And for the logo, we would use something like text gray 200. Also for this unordered list, I would use margin to left. I would also use space y22. So vertical spacing between all of these elements we set it two. And I think that's enough. We can now move to other unordered lists, and now we'll do just one and we will copy it two more times. So we'll end up with four columns. Unordered list. Inside, we'll do a list item with general And again, we will do the space Y do. There another list item we can do home about projects. Then for this, we will do text gray, 400 and for the general, we will do font bolt. That's the same for logo, so font bolt. Like this. Now let's take this unordered list, copy it two times. The heading should have some color, and let's use text grade 200. There we can do live or we can do Project Limo Project one, and then we will change it for Project two and three. And the last one can be contact. There can be phone email once again and we can just delete one list item. If we don't have any more content, we can put there in our footer. Now let's check how it looks like. So now, if we will check our page, we can go to top of our contact component there and there we can at some margin top. Let's do 44, some higher value. That looks better for our project page. And actually, by the way, this march into 44, let's do only for medium screen and above because on a mobile version, this shouldn't be an issue. Let's go to a portfolio there actually there to this main dith we'll at marge into bottom, also 44, save it. Now this is better. And otherwise, it's fine. So this is how the page would look like without the background that we will now add. But make it a little bit more interesting, let's say, we'll also add the grid background. So let's go to VS code. There we'll go to index dot CSS. There we will open a body tech. And inside this body tech, we will add the background. And the background looks like this. I just copied it because this is a background you can find on the Internet and just take it and we can modify it a bit. We can modify the color to ours a bit. So let's use something like this. But maybe it's too much. Now, if I will put the page there, we can set this to 50%. I changed also this 800 pixels to 500 pixels, and it will be in the middle like this. Also, now we can check the page, and it will look like this, also with this great background. We will now change this to a mobile size and check how it's looking there. So what we can do is to move this CV button a bit, then there's some p. This is fine. Huh. There we need to improve this experience section and also at some margin to contact and footer. So let's go and do it. Let's start from the bottom. So there we will set the I think it's there, margin from left, we will set from medium screen above, margin to bottom to eight, maybe. Yes, from medium, we can reset it also, I think we can set text to small. So from medium, text will be large again. Also, I think there is some bedding that should be only from medium screen and above. Actually, there should be some, but definitely smaller. So let's use six. So basically, what I would do is that I would create another div these three unordered list, put inside the DIV for this dish, I would add a grid layout with grid calls three. And now, if you'll increase the page, it of course looks terrible, but we can fix it. So at least on mobile screen, it looks better. If we will now do or do I we will now delete it from there, it will be like this, which is fine. And if we will increase it, it will look terrible. But we can fix it by deleting this margin to left And actually, yes. So what I did, I will show you, is that we will also delete this margin from bottom on medium screen and above. Now we will save it and check it. It will look like this, which is better and on a mobile screen like this. Also, what we will do is that we will at the margin to top to 12. Awesome. So now you probably didn't see it. Oh, you did. There, I added margin to top on the main diff in our footer. 11. Project 1: Final Updates: Now I will scroll up. So we need to fix this experience, and that can be simple fix because there we can just do Hyden. And on the medium screen and above, we'll do display block. Now, let's try it. So there we are on a mobile phone. Let's increase it. And on desktop, we have it there. So we will also add there some pitting. So let's do betting ten. And on medium screen and above, we will do betting zero like this. That's the responsiveness. Okay, works. Now, what else is missing? We need to go to a section there in the main dipth. So let's do putting to two on medium and above. We will reset it two. And there we will delete the Gap. We will just make this gap for medium screen and above. And on mobile phone, we will use get 12 that's too low. Let's use 16 or 20, and it works. So now we can do patting it to four, and it's better. What we can also do is that from medium screen and above, we'll use Text Excel. Otherwise, we will use textarge and now also we can add the margin top something like 12. Maybe let's do 16. And if we'll go to hero section there for the button, which is there, we can add margin left to six. And from medium screen and above, we will reset the margin to left. And that's it. Now we will try the navigation. We can open explorer there in about section. We will do ID about contact form, ID, contact, experience, ID, experience, footer. Well, we don't need ID there, hero section. We can do ID home and portfolio, we can do ID portfolio. Now we can go to Navbar. There we can see it works, but for work, it's portfolio, same there. Well, the navigation bar works, but of course, we have there some problem with the z index. So let's go to portfolio. The remove the z index from ten. Now save it. Now it works. Also, what we need to do is that we need to go to navigation bar. And there for the icon, we need to use display fixed, top zero, right, or top five, right five, index to ten. Sorry, it's five. And we can also increase the size to 40. That's better. So now we will go to contact. And we'll have it like this. What we will also do probably, we will do some bedding we'll do background white, rounded medium, bedding four, or maybe two. And that's better. So now we will open it we will go to work or experience or about, and we will be able to see it and close it. One more thing we can do to increase our UX. We can create the const, close navigation there we will do Set NaF to pulse. Now we will go to our menu navigation there, and there we can add, let's actually select everything. So hold hold There we will do On click, and we will do close navigation. Now we will save it and we will test so we will go to experience and now to about, and it's working fine. And that's it for the wall page finally. Let's check how it looks like. 12. Project 2: Intro And Setup: Act tailwind, with all of them in today's portfolio. We'll make contact form work, so we will receive emails. And of course, it will be responsive. First, make sure we have this intellisense extension installed and also this ES seven. Now we'll go to terminal. There will the new terminal, and we'll paste there our first command, and that will be this one. You can find them in a description there we will use this as a front end name. We will select react JavaScript. Now on the talent page, we'll go to get started framework guides Wet and there we already did this, so we'll use this first command. We actually maybe didn't went to our front end project that we created, so we will CD. Now we'll run the command. Now we'll run the second one that is there. Now we should go in tailwind config file and paste there this. Then we should paste the tailwind directives. So let's go to the source folder, index D CSS, pase there the directives, and there to try that our tail wend is working and connect it, we'll go to Abdo J six file and pase there the thing. Like this, we don't need logo and tweet. Also, we don't need well, basically anything now, even this constant, save it. Let's check the ADCSS. We can delete it. In the EO CSS, we will leave there and this MindGS six also. Now we will do that we will run death so NPM run def and that we'll open the server where will be our page. Now let's try this is working. So let's do for example, this and yeah, it's working. So we have Telewnd installed. And now we can start in our folder. First, we'll create there some folders. So first one will be components where we will have the sections that we will use. Then assets we have there that we will put the images, and that will be it for now. We can also install create the new terminal, and we can also actually, see the front end, and there we can actually install the react scroll and also React icons library that we will use for the smooth scrolling and also for the icons on our page. Now, I would pre create all the components that we will be creating and put them in our Edo S six, so we have this ready and we can just then code the components. So let's start. First one will be actually Navbar. Now, as we imported or install the extensions, we can use this AFC and save it. Then we will also use some skills section Also, some about section. Contact section. Then Puter And what else? So you have about contact outer. Definitely your section, right? And also we will have there some work section with our work that we did. Now in this ABG six page, we will put all these components and then we'll just code it and it will be ready. So we'll start with Navbar. It will import it, then we will continue with the hero section. After hero section, we will continue with work, probably. Then we will have there some skills. After skills, there will be about section. Contact section, and on the end, there will be a footer. So we have the 24, 67 components. Okay, that should be fine. Of course, we can reorder it in the end. It will be fine. I just now prepared it, so we can then just code. Let's go and code the first component. But before that, we should add some assets. I will edit these assets that you can find on a Git I will provide for you and also, of course, use your own pictures, but if you want to code along and use something that I used, you can of course use also this that I will give to you. I will also give you this index dot CSS file where I'm using this grid layout or grid background for my web page, also this font space grotesque and also this CSS class that we will use for most of our components to make it with this effect that will have some shadow backdrop filter with blurred background, so it will create the class effect. Then we'll just apply it as other taunt classes, and it will edit to our element or component. And this is how the grid background will look like, by the way. And you can also see there on the left side, there are all of our components that we imported in Epilod J six, and we like pre create it. And now we add a code and a content to all of them. So let's dive right into it. 13. Project 2: Navbar: What we'll do first there is that we'll also import use state because we'll be using state variable that will be changing our navigation from desktop to mobile version. Then we'll import the icons for our navigation. So we'll be importing outline close and also outline menu. Then we will be importing the link from the smooth scroll or from the react scroll library. So from react scroll. And now in our NAF bar, we can start above the return, and we'll start redefining the state variable that will be a constant and NAP with function Set Nap. There we will create a function handle math and this function will be setting the state variable NAF there. So whenever we will click the element that will have click function with this handle NAF, the NAF value will be set from true to false or other way around. Now having this state NAF, we can continue in our navigation in our main div. There we will just start with some unordered list with list items. And inside these list items, we will have the link. That we just imported from this Rax scroll library. It will be used for the Smooth scroll. Let's copy it three times, let's say, because we will have it for the homepage, home, also for about. Then for portfolio and also for contact. Then let's do some spacing there. Then after this, we will have there also the icon that will be changed whenever it's like mobile screen or whenever it's disco version. So there we'll edit and we will add there the onclick function. So on click, we will call this handle navigation. And after it's called, it will change the value of the navigation state variable. There inside, we will add the Turner operator Nap and this will execute the first position or the second position based on the value of the variable. So the first position as true position, and in case it will be true, it will execute the so in case it will be true, it will be showing the outline closed icon. We import it there. And in case it will be false, which is the default state, it will show the other icon, which is this outline menu. We will set there some size. Let's set 30. Let's close it there and set the same size. And also, we will set there some styling for this icon, but let's a it later. As I will need to change the screen, you can see there to mobile screen, and I don't want to do it now. I just want to finish now the text, and then I will start adding the classes. Okay. Last thing that we need there is the mobile navigation. So we'll create the div that will hold another unordered list. And again, that will be the same story. That will be the list items with these links. We will use in this div another turner operator because we want to show this navigation only when this onclick function happens. So only when this menu is changed to this closed icon or the value of the variable is changed from force to true. And there in the styling, we will again use the turner operator. So there we'll use the variable, question mark, and we will define the first position, and then the second or force position. First, what we need to do is that we will need to actually hide this unordered list for the desktop. For the menu and close, we will set the styling. So on the mobile screen, it will be block. And then on a medium screen and above, we will hide it. Also, we will put there some colors. So text grade 300 is fine. Then we will make it fixed. Also, we will as this is fixed, we will put the two right. Let's try ten, and also top ten, so it's not, something like this is fine. And also we'll hire the Z index. Now let's try the so it's changing. That's fine. So the turn operator works. And now what we will make is that we will code there for the second turn operator, the styling, and it will actually show the mobile navigation when we will click it. So when this will be false, we will make it fixed to left -100%. We will style the text gray 300. But let's actually make it true on our screen. So when I click it, it's getting to -100 fixed left. And when I click it again, it appears. Well, that's basically it for this mobile screen navigation, but of course, we need to style it, so it looks at least somehow good. Let's start with the text gray 300, continue with Z index 240, so we are able to see it, even though there are some other elements with other z indexes on the page, then we will make it fixed to left zero and also top zero. Let's make width to full. We can now try the background to white. Yeah, of course, so it's taking the full width and it's fixed to left and top zero. As we want it. Let's now actually set some background. So usually what I'm using for my navigations is something like this gray color. Then I will continue with ease and out that will make our navigation smoothly slide in and also some duration, so it's not instant. 500 is fine. Let's now try. Now we'll add styling to our unordered list. So yeah, it doesn't look like this. Let's put there some bedding let's increase the text size. Et's also do some margin to left. Let's also hire the index there. And what else will we do is that for these links, is that you put there all the holds, you basically hold Alt and then you will click on all these lines, and then we can write on all these lines at the same time. I will use their class name, and I will set the pedding 22, and it will do this. Okay, we also need to make this link work. What we need to do is that we need to add a destination where this link will head us. So we'll add two. And the first one, as it's a homepage, it will lead us to hero. Then also, for the smooth scroll to work, we need to add a few values. First one is spy. We also set it to true. Second one will be smooth. Course we want it to be true. And then we will set the offset values, which is 50 and also the duration, and again, I will use the 500. Then I can just copy it from there and put it there and then just use this contact portfolio because it will be the IDs I will put to my pages. So I can then just reuse it and this smooth grown navigation will work. Let's change this to different screen size. Let's close it. Change it to different screen, and this is where we will go to the desktop navigation. So now let's do there something like medium screen and above. This will be again displayed flex with background white, so I can see it. Okay, so let's put there something more or actually now you can see it because I move the window in my OBS. So yeah, we can continue. I made sure it's there with this background white, and there I will just continue with the styling. So I'm using on a medium screen and above display flex, so that will change the display hidden. And now we can continue. So we can leave there the background only for the purpose, so we will see where our navigation bar is. We can do something like orange 200. Or 100. Okay. We will use also some fixed height, so it's not this thin. Let's use something like, I don't know, 96 pixels. This fixed height we'll use on the top diff because that will hold the wall navigation bar. So we'll set it there. Also the color will be set there. And this will just keep the hidden and on medium, it will become display flex. We can set there some max width let's use 1,200 pixels. We can set the display flex and justify between. So we will have between spacing between all elements we will have in our nap bar. So I will justify between and also items center, so we will center it vertically. How our navigation bar looks like. Okay, we also need to use their MMX auto. We will also add their logo or our name, and that can be just in some H one tech, so I will use the H one, John Doe, name, and on the right side, the items. Of course, in the items, we can also use justify we can set some gap, for example, to six, or some text Excel. Maybe that's fine. And for the logo or for the name, we also set text Excel, and maybe want both. And that's fine. Now we'll do the thing that I mentioned on the beginning. We will start or we will change the background for the class effect. We import it in index CSS, and it will look like this. Also, we'll add some bedding on a horizontal line, so I will add maybe eight. Of course, I also need to change the text. So let's use text white or even better if you use something a bit darker. So text gray 200. Okay, 300 works the best, probably. And I will keep it like this. Now let's try to change the window to this, and it works. We need to change this to the same style as we have there in mobile navigation. That means we'll change it to the link with the smooth scroll like this. Yeah. And now we can really we maybe don't even need the spanning, by the way. How it looks like. Yeah, this spending is not needed. So we can delete this, you know, classes from the link list items like this and we can keep it. 14. Project 2: Hero: In here section, we'll start with all the imports. We will import the images. Then we will import also the other pictures, which will be two notebooks and one mobile, if I'm not mistaken, so we can check there, notebook left, notebook middle, and also mobile right. These pictures are named the same, so we will just copy paste this one and also we will need to import the type animation, so import type animation from react type animation. Yeah, I don't import the library, so let's open the terminal. NPMIRac type animation, install it, and that should make it work again. Yeah, it helped. Now we can go to coding of the hero section as we imported everything. So there we will open the section or the main div and again, we'll start with the elements. So we want the three pictures that will be behind all the text in our hero section. So this will have this will have some class name, also some source, and also anode. We will want it three times. Then we will have the if that will hold the heading one with our react animation text or yeah, type animation text where will be written what we are doing and so on. And under this, there will be a paragraph. That will say our name and below this div. We will have profile picture. It won't be actually below this div. It will be next to it, but it will be on the bottom of this section. So there we'll just add a div. And inside, we will again put some image like there. Of course, we have the errors, but we'll quickly fix it. So the first images will be the notebook left, then it will be the notebook middle and then it will be the mobile phone. Then we will have the the profile picture, and it's working now. We have the pictures, and we can continue. First, let's at the react type animation, actually. So there in the H one tech, we will add a span. And inside the span text, there will be a paragraph tech I'm and there will be the other text. Now a break text, and below this will be the type animation. This type animation requires some fields we need to fill. First one will be sequence. And that will be saying what we want this animation to write. First, we'll want you to write front end, developer for duration of 1,000, second one, web designer for duration of 1,000 again, and third one consultant for duration of 1,000 again. We will wrap this in Spen tax and also we will put there some speed that will be set to 50 and we will repeat this on infinite. That means it will be in an infinite loop. We will also need maybe first to style the images because then we would be able to see actually our navigation and be able to play with it. Now we cannot see it because it's actually so small that you cannot see it on the screen yet. Let's go and add to this H one, some styling. So there we will use text white. So you can see it's there. Also, well there text for L, and we'll make it responsive. So on a smaller screen and above, we'll be increasing this on a large screen, even bigger. So we'll let's use text eight XL and also font extra bolt. We'll also use there for this dip, class name of the glass, so it's wrapped like this. Horizontal padding. Let's set horizontal padding to five, so we have it a little bit more not on the corners. Now let's actually go to the images because we really need to get them to absolute position so we can starle the hero section better. There to every image, we will set position to absolute. We will set the lower z index. We will also set there some width. So let's use 400 pixels. We will set bottom to zero, and we will set some position on left. For this one, I will use -170 pixels. And in order for this to work, we also need to set position relative to the main dip. There we position relative like this. Now we can take all these position absolute classes, put it to every image. Okay. And we also let's actually go to this image and set there some width so we can see Awesome. There we'll change the positioning so we can keep this a -170 pixels. The second one, we can try something else. So let's do I don't know, 320 pixels. Yes, it will be somewhere more in the middle. And for the third one, let's use 450 pixels because we want it to be more on the right side. Okay, Let's also decrease the width to 200 pixels. So it's a bit smaller. And now to work with it, let's also start to add some styling for the main div. So we'll use their grid layout. And on a mobile screen, there will be defaults set grid coms one, but on a smaller screen and above, we'll be using grid Comms three. So we'll create the three columns. And we'll want this text, you can see there this type animation with also the paragraph that we fill, my name is John Doe, and I have five plus years experience and but development. For this vol text in this div, we will set the column span to two. So it means it will take two out of three columns. Also some horizontal padding and center it with Oh, we already have it there and center it vertically like this. And we will continue, so we will set there some gap we will set there also some max width. So let's use, again, 1,200 pixels. On medium screen and above, we will set some viewport height. So let's use 70. Now, let's center it again. It's starting finally to get in some shape, which is great. And also, we'll set there some vertical padding. Let's try eight. Okay. The mobile picture, we will need to change also the bottom position. So let's use there something like 500 pixels. It looks better. So it's behind our navigation, and we can see some of the mobile. Yeah, you can play with these values for bottom left, and maybe even with wid depends on what pictures will you put on your page and style it as you want. Of course, if you want on mobile screen to be somewhere different, you can just change it from medium, that it will be there and on the basic mobile screen that it will be somewhere on the different position, something like this. Then when you will change it, you can see how the bottom of the mobile is changing there. Let's actually continue. We can revert this because I won't be using this for now. For the image there, we will do the same thing. We will set it absolute. We will put it to bottom zero, so it will be there, but we'll also put it to right zero. So it will be in the right bottom corner. Then we can also delete the width from there. Because we will set it in the div above, and there we will set the width for the large screen and above to 750 pixels. Still too big. Let's decrease it 500 pixels. And now we'll be playing with it, but 600 pixels works. And on mobile screen, we will set this to What about 200 pixels. Maybe 300. Okay, that's too much. Let's continue with styling of this paragraph text. We cannot even see there, so we will style this with text white. Now we can see at least that something is on the bottom. We'll continue with some margin on vertical. Okay, we will definitely increase this text, but we'll be careful with it. We will start with text small or maybe even okay, we'll leave it as this, but from smaller screen, we will continue with TextLarge and on a larger screen, we can try something like text Excel even. We will use the Mx with. Hundred pixels. Mm. Okay, and when on a larger or medium at least screen, we will set the mix width to, I don't know, 600 pixels. How it looks like. It looks like a bit better. But what would I also do is that I would put the mix auto. No, it doesn't look good, so margin left four. Okay. Then I would do text gray. Okay. Of course, we will delete this also. So we'll use text gray 300. We will make this font bolt and on top there, we will need to change this one a bit. First, we will get the dirit of this break tech. Then to this we will say actually, we don't even need to spend there. Right. There we will add a class name. We'll add some march into bottom. Let's write something like four. We will add the text gray 200. Oh well, 400. Maybe even 500. Maybe even 500 isn't that bad. And most probably we will leave it like this. So we have their IMA then the type navigation, and there there is little bit of a description, and that will be for the hero section for now. So let's move to another section, and maybe on the end we'll do some final updates. Depends on the final design, how everything will look. 15. Project 2: About: We will continue with a section. So let's go there, open about. We'll do some imports there. Actually, we will do similar imports like we have there. So let's do two images, go to about, put it there. We will want middle notebook again and mobile again. So we can keep the same things. Just remove this one. What we'll do there is that we'll do the grid layout, and we'll put there four containers. And these containers will be taking a different colspan on each row. So we'll have, I don't know, three coalspans and the one container will take two and the second one. And below them, the one will take one colspan and the right 12. You will see how it looks like in a while, let's just code it and see. First, let's do the containers, so we'll open the div, copy it three more times, do some spacings there, so we improve the readability for our purpose, of course. Otherwise, we shouldn't do there any blank spaces. We will delete them later at the end. And there we will set text to white so we can see it. Also some gap between again, mix width to 1,200 pixels. Then we will center this as it's some different width that we have on our report height because there is more than 1,200 pixels. So in that case, we will center it with mix auto. Then we'll do some margin or vertical margin. We'll set this to 12. Then we'll set there the grid layout, and on mobile screen, default value will be one column and on a smaller screen and above, we can set this grid columns three. Yeah, we'll start editing some contents. So we'll actually see something also on the page, but not yet. First, let's do the dips. The first one will take the column span. Two. So it will take two columns, and it will use the class effect and also on smaller screen and above, it will have some pedding. So we'll set there pedding of 16 on smaller screen and above. Now we can see there the container. Let's do the second one. So on smaller screen and above, this one will take one colspan. Also, it will have a glass effect. Then let's go for the third one that will start from the left side. So again, will be the same as the second one, smaller screen and above, one colspan, glass effect, then the fourth one on small screen and above, we'll have column span of two. And it will be basically the same as the first one, so we can copy it. And now you will see how the layout will look like. So we have the left and right containers, and this one is taking two out of three com spans and all the way around in a bottom row. And we'll have some additional tap and it will be only for the mobile screen because we will be also hiding some of these grids on a mobile screen. This one there will be only for mobile phone, so we'll make it hidden for now and we'll get back to it later. For the first one, we can continue. So we will center it vertically. Then we will center it also. No, we don't need horizontal centering. We will just put the text to left and that will be it. Inside, we will create another div that will hold our H two, and also it will hold the paragraph this div will have some max. So I will show you why we need max width. First there, we can do some text, and I can optimize your website. And the paragraph will be Epsom for now, and you can see what's happening on the page, it's aligned to a left side, and we don't want it. So what we'll do and we cannot also center it because yeah, it's taking the fluid. So what we will do is that we'll set there a max width of 60%, and we'll have it like this. Now we can also do the styling for the heading two. That means we will do the text three Excel, font bolt, margin to bottom, and, that would be it. For the paragraph tech, we will do the text ray, I don't know, 200. We can now move to another div that will be this one, and there will be image. This image will have a source of the notebook. We will set some width on a small screen to 200 pixels, and on medium screen and above, we will set there width of 500 pixels. We also need to set there, of course, the height. But maybe we can leave it as is. Maybe we can set there the position absolute. Yeah, that would be better. Also, you will need to set there overflow hidden because it's running out of our card. Of course, take there, and it will look like this. Okay, then we can move to another diff that again hold an image, so we can just cop it. Let's take it, put it there. Mobile image, again, we will copy this overflow hidden, put it there. It will be like this. Then for the hidden one, we'll leave it for now. And for the last one, what we can do, we can just copy this we have there and paste it on its position. And that will be it. Now we can just play with a text. Maybe we can also do Mm hmm. 80%. Yes, I think I will change 60 to 80%. And then we can also add some text like this. There it will be the same Awesome. Like two rows of text are fine. I think that will be for the work section. Yes. And this gets us to this next div. We'll do is that we will hide these two pictures on a mobile screen because it doesn't look good and there is no way we can make it look good on a mobile screen. It's mostly for the desktop version. So we will make it hidden, and we will make it on medium screen and above display block. Copy there, do the same filling for this second div, so it will look like this. And now we can code this div that is only for the mobile purpose, and it will be basically connecting these two images. So we'll take this there and there There we will set on medium screen and above display hidden. Also, you'll add the position relative for the absolute position that we will add there. Overflow hidden, so it doesn't get out of our card and we also set some fixed height to the card that will be 200 pixels, and also you'll apply the class effect we have. And it will look like this. Now we'll play pictures a bit. So first, this one, we will just set there. We don't need medium screen because on medium screen and above, it's hidden. First one is there that the weight is set to 400 pixels, and then we have the 200 pixels. We actually need to set there write zero. And when we expand this page, let's see what happens. Yeah, it will get hidden, and there will be the elements we had there before. But for mobile screen, we will make a section where actually there are both of the images in one card. What I would do is that I would add there some bedding and on medium screen and above, I would reset it. Then I would take it, apply it also to the first diff, save it. And let's see now it looks better. And when we expand it, actually, let's just do patting four for both screens. And I think it's fine. Mobile screen like this and medium screen and above is like this. We have this section, and now we can move to another one, and it will be the section with our work or portfolio with our project. 16. Project 2: Portfolio: I'll go to work component. There we will need to import all the images. So again, we can take from there and we will import project one image from Assets Project one dot PNG, I hope I'm right. Yes. And then we will copy it. So it's Project two, three, four, five and six. Awesome. Now, what we'll do is that we'll make a constant with informations from this project, and then into HTMOtext we'll map this constant, so we don't need to repeat our code multiple times and we will have everything in one place. So let's put our constant project Then I will open this there. I will put there ID. That will be one. Image will be Project one. Title will be Project one and Live URL will be there, or we will put it there later. I mean, I won't put it there, but if you have some, you can put it there. Okay, now we will copy this five more times. Now change the numbers. Project 23, four, five, six, two, three, four, five, six. Now, we have the constant so we can go to our main div. And there we will first divide it even more. So there will be a first div that will be with heading one, my work. And then there will be the project mapping and inside we will have another div. So we will open the caer brackets, and there we will say that projects dot MAP project. And there we'll start to div. And inside this div, we will put an image and another div. And in this div, we will have a Spentag that will hold the project title. After this san tech, we will have another div that will actually hold the URL for the live demo. So this div will need to have an anchor tag inside, and this anchor tag will redirect the person to a live demo of the project. So this HRF would be project dot Live URL. And there, of course, will be something like f. The main div will again have max width of 1,200 pixels. We will also center it. I will use two grid coins. We'll have some gap of four between all the items. We will use the glass CSS class that we defined in index dot CSS, and also you'll say there's some petting. Now we have it there, so we can start. And there for the first day, also first we'll define the text. So there we will put column span two, and I will explain to you why because if we didn't put it there into the column spent two, it would take you can see there. You can see there is the MW thing. And if we didn't put it as column span two, it would be next to all the other cards. So we need to put it there. Now we need to starle my work, H one, so there well at text four l, some margin to bottom, and also text grade 300. Awesome. And now we can go to the cards itself. Well, the cards, first, the div that is holding, the cards will have a key. And this key will be the project ID. Then we'll add a class name, and it will be a class for everything. Then we will use this transform and transform transition. Because we want to use this Her scale one oh five, and that means when we will hover over the card with the project, it will be increasing the size inside. So it will create a nice effect when we will hover over the project. Now we also need to set the duration for how long it will be increasing the size. Then we will need to set overflow hidden, so nothing will run out of our card. Then some shadowing for the card. And let's try. So now you can see how the effect works. So it's increasing like this. What we will now add is that for an image, we will need to put a source. So the source of the image will be project dot Image. Awesome. We'll define some classes. So with the full height to full and object to cover. Great. There we continue after shadowing, and we will put there some fixed height that can be like 200 pixels. And this div that is holding the spenteg and the other dif tech will make an effect where we will how it and it will show the button to live demo. So we will need to add some opacity and so on. Let's start and make the group hover and add there an opacity 90. Let's see what happens now. Yeah, we will also need to add the group. And next to group also relative because this showing with the life button will be of position absolute, so we need to do it. Then we can go back to the stiff and we finally can set the opacity to zero first. I will add some background. Let's use again, these numbers I'm using mostly. Also, let me set the absolute. I think we will need to set there even more values to see it. So we will need to next to the opposity then we will group hover over it that increases the opposite to 90. There is the background we will use now position absolute, that is relative to this. That is also fine. We do transition opacity. And duration 300, so it's not instant. Then after this, we will need to set also the inset. And now you can see it's working. The inset zero is adjusting the positioning of the element. Okay, we can now continue with the styling of this Spen tech and of the second or of the dip inside. This one, we just set. For the Spen tag, we will just set there text to Excel, also from the bolt. How it looks. Of course, we need to set also text to white so we can even see it. Looks better. And I think that will be for the Spen tech, we will need to set the flex position there. So after the insight, let's do flex and justify center item center, how it looks like now, better. That gets us to styling of the anchor tag itself. So the div that will hold it won't have any styling. And the anchor tag itself, let's s also text to white so we can even see it. Great. There maybe we need like cooling better. Now we want to make it a sum button. So let's just do something like background white. Betting five, betting on two, margin top two. Actually, let's do the margin bottom. Let's do four. Let's do rounded Excel. And let's do also font bolt. So that will be it for the work section. And now we can move to the contact one, and then we will finish with the footer. And also, we have the skills section, but I don't think I will use it in the end. I wanted to create some styling element, but in the end, probably we can just delete it. We can also go to Abdo J six, delete it from there, from there, and that's 17. Project 2: Contact: Let's go finish with the contact and a footer. Next to react, we will need to import also the icons from library react icons AI. There we will import fall LinkedIn. Also, we'll import Fil Git up and also Instagram. Next thing what we will do is that into this main div, we will create another div that will hold Heading two, and paragraph then there will be another div that will hold the email form. And it will be also divided on two sides on left and right side. On the left side, it will hold the icons that we just imported. And on the right side, it will hold the actual form. So inside this diff on the right side, we will also have the H two that will say something like ready to get started maybe with and G. And below there will be an actual form. Inside this form, we will have two dips. First one there, second one there. Inside this dip, we will have first input. Then we will have second input, and then we will have a third input, but it won't be just will be text area, actually. And then in the next div, we will have a bottom send message. Of course, everything will have classes, but I just wanted to do some blueprint of how this will look like, and there will be the icons. But the icons, we will wrap them in Anchor tech. They will be redirecting us to the pages we will set there, so Linkedin and so on. So we will have some HRF. Also then inside there will be icon, so AI fall linked in. We will add some styling to the icon, and this will happen two more times there and there. AI fail Git up, and also AI fail Instagram. Now let's fill the class names, so we will set there a fixed width of 100 pixels. And let me actually move the page down so we can see there. Well, not yet, but we'll be able soon as we do more styling and head to do and also march them to bottom for the first two icons. For the next one, we won't need it, or I mean, for the last one. I like this. Now you can see the icons on our page there. What we also do to the disk that is holding these icons, we will set the an epsilon, it will center it vertically, but not yet now because well, it's technically centered because it's taking the full height, but it will change soon. And also, we'll set text purple to, I don't know, 800. Let's make it a bit darker and use 900. Perfect. For this div that is holding these icons and the form, we will also at Flexbox layout and justify center. Awesome. For the form itself, we will add some more styling, so we will use there some being and maybe some mix width. Mix width six Excel. Let's try. But let's do there. Of course, the max width of 1,200 pixels that we are using for all of our page. Now we need to center it. Now we will add there the class effect. We have defined Exo CSS on the start, and that will be it. For the next day we have there, we will add there some text first so we can see what we are styling, actually. Let's connect and then start working on amazing things. Now, we would really use some text color. So let's add the text gray 500. Also, of course, the text size. So this can be like Tre Excel. So merging to bottom. What else? From the boat. And maybe let's change it to five Excel and from smaller or medium screen and above. And on the base screen on the mobile screen, I would do like text three Excel. Awesome. Now for the paragraph tech, we will at also text gray, maybe 600, so it's a bit darker. But we still need to see it. So let's do 500. And text Excel. Well, that's better. Then for the div that is holding this one, I would use also, again, MMx Auto, but we need to do a max With to it because otherwise, we won't be able to center it. So let's do 600 pixels of Mx With. Awesome. Where we are at now, Okay, text center. Awesome. Now you will also use there some bedding. That's better. And what next? Next one we will style. Well, I think we will just add the content for the contact form and we will style it. So I will go there and I will start with the contact form, and I will start with this ready to get started text. So there, I will use some margin in the bottom again. I will use text Excel, so it increases the text size, text weight with one Bolt, text ray 300. Awesome. Maybe more darker one. That's better. For the form itself, we will need to have there the action that will be with the endpoint from Gt form IO. We will change this to an actual endpoint. Let's go to this page, a dogfdtiolash Login. Then we will sign up, click on Create there. Put there some name and put there the time zone, copy this endpoint. So now we also need to set method to post then in one diff below, we will set some vertical spacing between the elements to four, and also you'll set a margin to bottom to six. Now each inputs, we'll need to set type. So first one will be text, ID will be name, name will be name, and placeholder, we'll put your name with three dots. And I think we will just copy it and do the same for the other inputs. But there is email ID is the email also name is also email, and placeholder is your email address. For text area, the type is text area, there is no ID. Name is message. Initial routes are five. Placeholder is your message. And I think we can move to class names for these inputs. The first input, we all set with two full. Now we will do border gray, 400, some vertical padding, some horizontal pedding And what else? Um, I didn't add the border. I set the border gray but didn't add it. I should definitely do it. What about some border radios? Looks better. Okay? Can we basically copy it to all the other inputs? I think we can. Let's see how it looks like. That's fine. So now let's dial the button and it will be for the contact section. I will go there to this button. I will use text center. We cannot see it, so I will use some color. Let me use the color there on the button itself. So and before it, the button needs to be of type submit because it will be submitting the message. And again, it will take it full. It will be purple, I don't know, 500, maybe a darker one, 700 looks better. Then we'll use some padding x or horizontal padding to six. Of course, we need to use some xwid and Mm What about large? What about medium? Okay, that is better. Putting is to six, then we will set vertical padding to three, and we will do medium round it. Okay, maybe we can do Excel around it. That looks better. So I think that will be it for our contact section and we can move to Footer. 18. Project 2: Footer: And the Putter will be a quick job for us. So let's go there. For the Futer we don't even need to import anything. It's basically just Spen tech, and below is a paragraph tech, John Doe, jon.com. In Spen tech, we will use something like maybe J Doe, something like this. Then we will actually you can just do their break tech, do their I don't know hash tag web development 2024. Of course, now we need to style it a bit. So again, let's use the max width of 1,200 pixels. Let's use some bedding. Let's use flex box layout, so we can justify between. That means we will have even spacing between these elements and center it with MMC Auto. Now we have it there, but you cannot see it. We need to update the text color to text grave 4500. Do the same thing for the paragraph tech. 19. Project 2: Final Fixes: Page is almost done. We should make this navigation work because I think I forgot to add all the IDs to sections. So let's do it actually right now. Contact we have ID, contact. Let's copy it. Go to work. ID work, go to about ID about, go to hero. There we will add ID hero. Let's go to navigation bar and IC the issue now. We cannot use capital letters there, so H. So let's just change it to regular letters home about portfolio and contact. Save it. Now we can try it. Home section. About section. Contact section. And portfolio section is not named. Portfolio, but it's named. Work section and we are naming it as a portfolio in our navigation bar, which can be confusing most probably, but I think I will just leave it like this. We will change this to a mobile device screen. And so we need to make overflow hidden for the hero section. In our hero section there, we will add overflow hidden. And we'll also style a bit better the the hero section itself for mobile screen, I think, or my idea is that we will, for the notebook, left, set hidden, and on medium screen and above, we will set it to block. So it's better readable. You use this glass effect from medium screen and above. For our picture or profile picture, we will set the something more than 200 pixels, let's you 250 there from medium and above. And from medium and above, bottom zero, but otherwise on mobile screen, let's see what it can do. 50 maybe. No, I don't like it. 140, 190. Okay. This is better, I think. Actually, I like this. So what I will do more is that I will expand this text. So I will go there and set the higher max width. So actually, I have it there. I didn't see it. Set there 300 pixels and set there. Mm hmm. Text small and use 250 pixels. 280 pixels. And what about some padding Bedding four? Well, that would be fine only if we do the pading gaette on medium screen and above and to do the same also for this heading one, because it needs to be aligned. Okay, so this will happen on medium screen and above. And this will happen on medium screen and above and margin to bottom two or actually, let's just six and medium screen and above, we will reset it. Let's open this. We will need to go to Hero page. So let's add there the z index there. Now when we open it, it will work. And well, we can leave there the image or we can hide it also behind the numb bar because then it wouldn't like that it's broken. So let's edit also there. Now, what else we need to fix there? So we need to go to hero section and the overflow hidden. We will apply only on a mobile screen, but on medium screen and above, visible? Like this, and we need to resolve the Nagbar issue where we cannot click the link because it's behind this hero section that has the same class glass, and we need to go to this hero section. First thing that we will do is that for the glass that we are removing there, we will put it back. And for the index CSS, we will put there we will copy this glass, we will do class navigation remove this backdrop filter, save it. What will happen now is that we need to go to Navbar, change this glass to glass navigation, and this won't be blurred. So now the navigation is working. What we will do is that we will just go to Navbar as we are now, and we will also add from medium screen and above backdrop blur Excel. Now if we increase the size of the page, it will be blurred again. So we will have our issue fixed, and that will be finally for the design of the page. Now, let's test everything. So there is our page. First, let's test the navigation that works. Let's now check the mobile screen design. And this navigation wheel changed from fixed also from fixed there to absolute like this. 20. Project 3: Intro and Setup: This session we'll be creating this ReactJS and Tailwind CSS personal portfolio website. We have a grid layout in the hero section, Smooth scroun navigation, project section, that switches the project depending on which one you select, Skoll section, and a contact section with working contact form. And of course, it's fully responsive. Let's start with executing all the commands we have there on tailwincss.com. We will open a terminal, make sure we are in our folder. And to not let this command create another folder, we will go there and instant and instead of my project, we'll put there dot, Head enter, and it will create a project right in the folder where we are. So then we need to do a C project because we are already in. We will run another command for the tailwind installation with both CSS and auto prefixor. Now with another command, we will initialize the tailwind. Now we will go into configuration file. Pase there these things, and now we will go there in index CSS and paste there detail in directives. Now with NPM run Def, we will start our page on Local Host. Before we start, let's also open another terminal and there do NPM, I react icons, space, react, scroll and space react type animation. I will move it so you can see it. Now we'll install all these three libraries that we will use, and we can start with coding the navigation bar. So first, what we'll do is to create a new folder with components. Then we'll create Now bar. Then we will use the snippet, go into Abdo J six. We can do all of these, this and this. And there we will do an bar had Enter and it will get imported. So now after we will save it, it will be on our page. If you want the snippet for export, I'm using this ES seven extension, and also definitely, if you don't have yet, install the intellisense extension, and it's this one. 21. Project 3: Navbar: The navigation bar, we will start with importing their icons. AI outline, close with AI Outline menu, we will use this for navigation or for the menu buttons on mobile screen. Also, we need to use the use state there we will start with defining the state variables, navigation and set navigation. The default state will be false. Then we will create our function handle navigation And this one will be setting the navivigation to a different value. So we will call this in on click on one of our elements with these buttons. So there we can start with the main div. And we would like to have this some maximum weight. So let's use that 1,200 pixels. Also, we can set there some background. For now, I will use background red 200, so we can see where the navigation bar is. We need to de there something. Now also we would like to set there some height 024. Of course, we'll delete this background color later. Now it's just for us to see where our navigation is and we can better style it. I mix Ato, then we will use the Flexbook layout, and we will center the items with justify between and items to center. So this will center it horizontally, and this one will center it vertically. Then we will use also some bedding. Actually, we don't need bedding gigs when we set there the maximum width, that will look fine also. And we can set there some text size. The potex size maybe yes. Let's use text large for now. Let's continue with the H one that will hold our name, so I will use the RJ Do. For this one, we can style text three Excel, font to both, and let's not use margin from Math now. Basically why I did their TextLarg when I'm setting their text Excel because I don't then need to set the text large for all the other menu items that will be held in the unordered list. Let's start with an order list inside. We will do a list item. And inside this list item, we will do a link. And this link will be from the wreck scroll we installed earlier. So this link is basically a anchor tech, but it starts with the smooth scroll navigation. So instead of href, we will do there too, and there we will do about or maybe it's actually with the slash. I'm not sure now, but we will test it later and we will see. For the list item, we will do padding to five, and that's it. Now we will copy as many list items as we need. I will need for the A section, experience section, and for the contact. Then inside the link text, I will put the names of the sections. So about experience. Nice. And I will continue actually for the contact. I will need to do also class there additionally, because we would like this contact to look at some button. I will add a class name, and into this class name, I will put some bedding gigs and Bedding Y round it Excel, and for now, background pen 300. And we also need to put there Oh, flexbox layout. Nice. And on mobile navigation, as we are entailment, so the fourth it will be hidden. And on medium screen and above, it will be shown with display flex. Now we will add the dip. Inside this dip, we will do Turner operator. So based on the value of a navigation, which we have there, default is false, we will execute true position or false position. And as it is defaultly false, we will first execute this one. So it will be AI Outline menu because we want to show there the Burger navigation icon, which is like this menu. Then on True position, after we click on the menu, it will show the cross. So when we will click on it, it will again show the menu then, so it will be switching whenever user will click on this one. So Outline menu. Let's say there's some size. Let's use 20. Another 120. Now we will have it there. But of course, we don't want to have it on desktop. This should be on mobile, so into this div we will add on a mobile screen display block on medium and above, we will hide it. And let's use some hist index 40. Also, of course, to have this working, we need to add the nclick function, which we defined there. So this handle navigation, we will put there into this click. Now we will save it, and now it will work. Now we will add div and inside this div, we will basically copy this unordered list. We need to do a few updates to it. So first update is that this won't have any hidden or flags. It will have just some bedding, and we can increase text to it so. Also, what will be important is to create a class name for this dif, and in this class name, we will set again higher that index. We will also set there text to gray 300. We'll make it fixed. So now we need to assign it to let zero and top zero, and height will be full, and to it, we can set something like 60%. Let's change the view to Mable screen actually so we can see so now we can continue with adding a border. Also on border right, border right, gray 900. Then we'll add some background. So let's use some gray color. I'm using usually for background, 23, 23, 23, but there we can make it a bit darker like this. Okay. And we will continue with Ps in out and duration 500. So we have the smooth slide in after we will click on the menu icon, which is this one. But now after we are clicking on the icon, nothing is happening, and it's because we don't have there the ternary operator. So what we will do is that we will add there these curly brackets. And on the start, we will do a navigation question mark, and we will execute this first through position. So we'll just paste it there. And then we can start on another line. And there we will put a force position. So in case of force position, we will make this fix left -100%. Now we need to actually the closing is there. So now we will save it. And now after we click on it, it will work like this. So make sure you have correctly written the turner operator there also for this diff. So this is the di, and there's a turner operator. And based on the value of the navigation state variable, we are changing these icons and also showing these menu items on the mobile screen. We also miss the name or logo. So we will put it there. Text itself on both, and let's at some margin like this. Now check how it looks maybe what we also do is that we will add there putting x to four and on medium screen and above, we will reset it to zero because we just need this on a mobile screen. Now it looks better. Now we can remove the background. And I see a typo there, so it's, of course, a outline close. Now we can test it. So it works fine. Now what we will do is that for this contact, we will change this background to background primary color and also the background primary color. We will save it. And we will now go to the folders, and there we will go into Index CSS, and we will paste the index dot CSS. I will provide you on Git. What this is basically about is that I edit font from Google fonts, then I a background. Then I set there primary color. Now if you would like to just change a primary color to some different one, you will change it there and it will be applied to wall page. Then I set there some text for heading two and paragraph, and also I added there this glass effect. So whenever I will use this glass keyboard, this effect will be applied to the element where I will set it, and I will use this for a few cards on my page. Let's continue now with creating of the hero section. So there we'll create Hero J six. Make an export, go into Eb Do J six and put it there. Now we can continue inside the hero section. By the way, I also see we have issue on our page. So let's go to Navbar, and there we need to use text grade 200. Now it's better. 22. Project 3: Hero: Hero page, I did these imports. First, what you need to do is that you will take the assets in case you want to use mine from my Github, I will provide you in the description, load them, and after you have loaded, then I have there the profile picture. I have the three icons from react icons, AI library we installed earlier. Then I have their type animation, from react type animation, library we also installed, and from another react icons, I have all these icons for the JavaScript react and so on. Now, after you have these imports, we can move to the hero section itself. There we'll start in the man Div with maximum weight 1,200 pixels, similar as we did in Navbar or the same, basically. Center it. Then use a grid layout because we'll have a dar three columns next to each other, but we will still on the medium screen and above, use grid columns eight because we would like one column to take more columns. And if you don't understand what I'm saying, you will see it in a minute. Now, let's use a gap between them, some pedding and on the medium screen and above, we will reset the bedding. Also, let's set the ID for this section, so it will be ID at home, and we can continue. So first, we will do the uh Di Di. And this div will be for our name or picture and name. For this div, we'll do class name with also a grid layout, will be grid columns two. And on medium screen and above, we'll use the columns ten to five. And this is what I was talking about. Because currently we have there like eight columns, and on medium screen above, this div will take 85 of these eight columns. So you will also see it in a while if you still understand. Now what we'll add there is a image. For this image, we'll add the class name also, but first let's add the image, so profile picture. We have it there. Let me move it like this. And also some odd profile picture. So what we will set there is some width. Let's use 800 pixels, a mix, or a height auto or maybe you don't even need it, actually. Let's set it for now like this. Also for this div, let's add our glass effect. And below this image, we will add actually another diff because we would like there that this div will hold the reac type animation, our name, and our experience. So inside this div, I will do MI auto margin to left eight and flex direction column. Inside. I will put the paragraph. Hi I'm John Doe. I need to change the text colors, so let's set the text grade 200. There we can start with setting the different text size. So let's use two Excel, medium and above for Excel, then font bolt, Okay. We'll play with the sizes a bit later also. We'll do break tech. So the next element will start on another line, and we'll call that the type animation. In this type animation, we will do sequence, and in the sequence, we will use front end developer duration to 1,000 web designer. Actually, we need a commode duration to also 1,000 and consultant duration also to 1,000. Below this, we'll put a wrapper and this will be set to span. So this will use span wrap. And if you check R CSS, for span, we defined there the transparent linear gradient color. So we will set there speed, so I will set there 50, and I will put this on repeat to infinity. So it will be going in infinite loop cycle. Below, we have the closure of the paragraph tech, and even below we can start with the next one, and this will be with a five plus years experience. We'll put our class name. So on a mobile screen, we will set text Excel, medium text, Tree Excel, font semibt maybe, and text gray 400, something a bit darker than the text we have above. And even below this text, we will put a button with download CV. We will put there a styling. So we'll be merging from top, ping to and paring to Y. Text too large, font bold, text to white, actually, background primary, color, and rounded Excel. So now we have a button like this. Now update this bit. So currently this is our first card. Now below, we will continue with another two. So we will create a dip there. Inside this div, we'll put a grid layout on medium screen. We will do column span three and get up to six. So with this, we will ensure that the first dif, we'll be taking on medium screen, column span five out of this eight, and the second 13 out of this eight. Let's continue inside this div. Inside this div, we will start with another diff that will hold the icons and the text. So let's move it back there we'll do text five, Excel, bedding, and also a glass effect. And inside, we'll do a paragraph with Mitch stack. There we'll put text grade 200, text Excel, one bot, margin to bottom and text to center. And below this paragraph, we will put all the icons. But we have them nicely next to each other, we'll do another div, use the grid layout, set the grid columns to four. That means after four icons, it will go to another line and set some gap. Now inside this div, we will put the icons, and for each icon, I will use color to 500. For the first four, I will use actually 600. We can play with it a bit so the colors look nice. Now we will add another div. So below this one, you will create a div. Inside this one, we will add the Linked in icons. So fill get up. Linked in and also Instagram. We'll put the pluxbx layout, center them, and the glass effect. So now on our page, we have it there. Let's just add there also Plex gray, 600 or 500. Let's try 600, it looks better. Also we need that text size, so let's use actually seven Excel, maybe six. Let's check the page. And currently, it looks like this. Maybe we will increase the gap between them, so we will use their gap four, and that looks better. 23. Project 3: Portfolio: Now we can move to portfolio side. So there we the new file portfolio six. There we'll import it. And in portfolio, we first need to do the imports. So I'll import the use state, all the project images, arrow image, and also Git up icon. Then do not repeat our code. We will create a constant with projects. And inside, we'll be putting there the project itself. So image for the first project will be Project one, title for the First project will be Project one, description will be UI for front end development using R and links will be to site. I won't have the link and to get up. And I won't also have the link, but put there yours. Now, do this for as many projects as you would like to have there. So I will have there six projects. So it will look like this. Now we can move to coding the portfolio itself. First, I will use the state variable for setting the current project. So constant current project is set current project. Defaultly there will be zero. And then we are moving into the return, and there we'll start with the man Div. So MI six, maximum width as we are used to 1,200 pixels, center it, make a grid layout, grid go to eight, also, some gap between them, and also ID portfolio. Inside this div, we'll create another one with the selection of the project. So we can put it there, select project. And also, we will put there the arrow. So arrow with class name, absolute with 50 pixels, top to ten, and right to 12. Then that means for this main div or for this div that holds this image, we need to set the position relative, and also set index to ten, columns 1023, grid layout, we will center items, grid columns one, and that should be now. Now for the paragraph, we will set text grade 200, p two bolt and text for Excel, and minus skew Y six. I will also do the for now, but you don't need to do it. Height to I don't know, 90 vie pothet Because I want to scroll there into this section, currently, you won't be able to see it. Now you are, so now it's better. So currently, of course, this isn't right, but it will be fixed soon. Inside this dish, we will add unordered list. And let's use the classes there first. So margin to left. X box layout, flex row, and on medium screen and above, we will use Flex Colum. So the selection of the items will be on medium screen and above, below each other and on mobile screen, it will be next to each other. Then some gap between them, flex wrap. Now we will center it. On medium screen and above, you'll use some gap, some space Y to two. So we have some spacings between them. On medium screen, we will increase it to four and we will set text two Excel. You can see there. Now in this unordered list, now we will map or iterate over this constant that we created there with the project. So we'll do project dot Map, project Index, and there we can start writing the list items. So inside these list items, now we can do this project title, and this will be changing based on the project we will go through. Project 65, four, three, two, and one. Let's start with styling or actually, first, we'll do the arrow key, which will be the index for the list item. Then to onclick function, we will set an arrow function for set current project index. And we will set there also class name, which we can do actually on another line. And for this class name, we will set a cursor pointer text to gray 300. And now we actually need to do some magic there. So let's do a backslash. Also there because we need to use a Turner operator. So there we will do $1 sign with these curly brackets there we'll do current project equals to index and Turner operator. So in case this is true, we will set active project, and in case it's false, we won't set anything. Then we have the project title, and we did some typo. So where is the typo and it's not closing the deck of list item, so now it should be fine. Also, this active project, if we go to index dot CSS, we need to edit there. So the idea is that whenever we will click on the project, we should get some active class. So that active project, we will now define it. So the active project itself will have position relative, and now you'll do magic with active project before and active project after and there we will set the content to empty value, position to absolute left to zero, width 100%, height to four pixels, background color to some pink. I will find the codes later and bottom two minus six pixels. You will see it after we click on the project. And also active project after two background color, and there will be some yellow. Again, I will need to find the code and with 80% width and bottom two minus ten pixels. Now let me find the correct code values for the pink and yellow colors. So I will use these two. Now you can see on our page that it got underlined for the active project. So this is what we wanted. Now we go back to portfolio, actually accidentally closed it there, and we can continue with creating the deep project preview. So below this div, we'll start another diff with some index. Also the glass effect we have index of CSS and columns pen to five. Nice. Inside, we'll create a div. In this div we will have an image. Let's do styling for the dF. So with the film, also height to AD and for the image, we'll set sours to projects, current project dot image. Nice. We have the first one selected. We can set their all to projects current project dot title. And now on another line, we will set a class name, and there will be with to full height to full object to cover round it large and margin to bottom. Awesome. Now below this image, actually, we'll do it in another div. So below this div, we'll do another div. We will set there some bedding, can you sting six. There we do a paragraph and inside this paragraph, we will do projects actually, not dot yet, grant project dot description. And we can copy it for now, and the the styling first. So we will use text grade 200 and margin or vertical margin to four. Now, below this paragraph, we will have a di this day will have a flexbox layout and Space x24, and also it will have anchor text where we can copy these values and actually do them twice. And these anchor text will be with reference to Links dot site and Link dot Git up. So it will take the user on the site and get up that they set there. We need to add some styling for this. And also, we need to do it like this. And this will be as HRF. And there will be AI fill Git up, and there will be view site. Okay. Now we can move to styling. So let's put it on another line, class name, and we'll use padding x24, padding white to two, background slate 600, text gray 200, round it large. On her, we will change background slate to 700 and transition duration to 300. Now we can copy this, do the same thing there. Save it. Now we can check it. Of course, this reference. We are not using quotes on this one. The thing that helped us from the beginning, we need to now delete it because it's the ruining the page. So I think I will just need to move this up so we can see it properly. But before I will just open the page only. So there now, we can test it, go to another project, and it's working as expected. So I think I will still keep it somewhere over there. Now we can move to contact section. 24. Project 3: Contact: Let's create there in components, contact dot JS six, and you know what? Actually, let's create even about J six and footer.j6. We have it prepared and we can just code it. Next one, we will use the A or contact. We can use the contact and we can switch it later if we won't like it. Actually, one more thing we need to do is do the export there in about contact and Footer, we need to use the snippet. Now we can import it about and Potter now this is the complete layout for the page. So we just need to quote this contact about Footer. We can close all there and open it contact about Footer, so we have the prepared things. Let's start with contact. So in contact, we will import the AI fill linked in and AI fill get up. Okay. Nice. Then we can start with the main div and that will be with bedding X two, six, maximum weight to 1,200 pixels, Mx, auto, grid layout on medium. We will use grid Colum two and center the items. Also, we will set their ID of contact. Inside, we will do a first div. And for this div, we will create heading cream with let's connect. And actually, we can put this connect into a Spenek. That means this disk will have text grade 300, marching Y two, three, on some heading. This heading three will have text for Excel on semi bolt and march into bottom. Now below, we will do paragraph. Inside, we'll put some text. For the class name, we will do text to justify and leading to seven. So I put there some Lori Mpsum for the testing so we can see it. Now we can see if ideally text justify what will happen. The lines won't be ending at the same time there or at the same place. And with leading seven, we are decreasing the line height a bit. Now we'll do there some statistics. So let's actually do there one more div. Inside this div, we will put this one that we just created. And below, we will start with an di and inside, we will put the statistics. First, let's do the class there. So flexbox layout, marge into top, items to center, and get to seven. There we will start with divs, but we will copy them, so don't worry. We won't actually coat that much. Now. Inside this div, we will do heading three with 11 and with the Spen tech. Inside the Spent tech, we will put the plus sign. Now, into this div, we'll add some background. So let's use again this one, but a bit darker. Maybe something like this. And let's change the opacity to 40. Then we will add some bedding and round it large. You still cannot see it, but now we will because we will add that well, we'll start with mobile screen so text to Excel on medium manuba we'll use text for Excel on semi bolt and text to grade 200. Now also we will add the paragraph with projects. We can also put this into Spenteg and class name will be text excess and on medium text base like this. I'm actually not sure if we want the spend text there, maybe. Let's delete them. Okay, and also what it looks like currently. I think we need to add the text grade 200, actually. Okay. Now we will take this diff. Copt two more times. I will do that instead of 115 plus years experience and 30 pre clients. Sorry will be like this. And now you'll find the correct dif which is below this one. And there we can start with the actual form for the email. So in the form, we will put class name, of course, but even before we will put an action, there we will put later the endpoint. I will show you after we form or after we finish this form, I will show you how to add the endpoint and make this form actually working. Method will be post and now the class name. So for the class name, we will at the maximum weight of six xl, some bedding, I know medium screen and above, we will do betting 12. ID will be to form. And we can start with the first paragraph. Actually, we have there. Let's connect, so we won't do it there. So let's start with input right away. Inside this input, we can make it like this and do type of text, ID of name, placeholder of your name, name to name, and class name to margin bottom with the full, rounded medium. Let's add also border. Let's add border color to gray 400, PY to two, padding left to two, padding right to four. Okay. Now we can take this input and just change the values. So second one will be for email. Actually, the third one will be for text area. Let's change the second one now, second one, type will be email, ID will be also email, placed will be your email, name will be email. That's it. And texta will be of name. Text area. ID, the same your message. Also, we need to set their coins to 30, let's say, rows to four. We don't need the name there, and class name can stay ***. Also, what we will have there is a button. This button will be of type submit, and the class names will be with the full B Y two, three, rounded medium, text gray, 100, one semi bot. Let's use text Excel and background primary color. And send message. So maybe let's change this 2000. So now let's check how to put there working action or the endpoint for our action. So actually, when someone will fill this form, we will receive the email. Let's go to this page, dotgtfm dotiO slash Login. Then we will sign up, click on Create there, put there some name and put there the time zone, copy this endpoint, and paste it there. But 25. Project 3: About: Now let's move to about section. Then in about section, we will first import these two projects or the project images. Then we will import these icons. And then we can move there and start. First, in the main dith we the class name with maximum width to also 1,000 centred and Moto, betting to six, we'll use a grid layout. So grid comes two. Gap to eight, actually grid comes two only from medium screen and above. Place items center and ID to about. Inside, we can start with the first diff. And for this div, we will add a heading to six, and inside, we will put heading two with skills for this ring two, we will add text grade 200, text three Excel, font to bolt, and margin to bottom. Below skills, we will put a paragraph with some text I will add now. Now we can add the styling, so it will be text grade 300, margin to bottom. And below, we will add the icons. So before we add them, we'll create another di like this. Class name there will be flex from medium screen and Bob, flex wrap, get to four, and text to four Excel and justify center. Now I will add the icons, and I can move the DIF. There it will also have something. Inside, there will be heading two with front end experience. So let's set text gray 200, actually, text, Excel, form the bot and margin to bottom. Then we'll add a paragraph with class name text gray 300 and margin to bottom four. I will ddt some text. And now we can dd the pictures because we have the text. So first, we will do text on left and right there, we will di the picture. And then we will have another picture below and text to write because we are using great columns too. Let's first code this first picture, and then we'll just copy it and maybe small updates, but it will basically for just coding the first one. So we'll use the relative and group. In this day we will create another one. And really basically an empty dith because it will be just for the border for our image. So there we all do width to full, height to full, position Epsot inset minus one, background gradient to right from purple 100 to orange 900 and rounded large. And it's an empty dif, so I can put it there. Below, I will put another div and inside, I will put the image itself. For the image, we can put it there class name of rounded large and on medium screen, maximum weight to 500 pixels. Also, I will put there, of course, the source. That will be project one, old Project one. Now, of course, it looks terrible. We need to add styling to this depth. So relative position, and it's better already with four, adding to four, background to white, and background opacity to one to ten. Backdrop Buller to large and rounded large. Now it's like this. Okay. Maybe we can change the purple to 300 or maybe even 700. I guess we can play with this later. For now, what we will do is that we will copy this, paste it below instead of Project one, and there will be Project three. Uh, of course, it should be let's actually rename it Project two. Project two, like this. Now let's check how the page looks like. Okay, so there is some issue with the grid layout, so let's check it. We are using their grid columns two, which is fine. And most probably, okay, this div we should cut it and it should end there. Yep, that's correct. Now what we can do is that how this should be. This should be moved. Oh, this should be back like this. And we can do this. Now let's check the page. A bit better, but we will need to make the images a bit smaller. So we will just go on about J six and there we'll change it to the size we would like to. So 350 maybe we work. 60, 360, we can use 360, now let's check it. 26. Project 3: Footer: For footer, we won't make any crazy things. We will just import there the FA Github square and AA Instagram. Inside, we will create a maximum with 1,200 pixels, MMX Oddo flexbox layout, justify between, so we have even space between all our elements there, bedding to six, on medium, bedding to 20, text small, on medium, text large. And margin from top to 12. Inside, we will do a dif. This will be on the left side and a paragraph that will be on the right side. We can do there on the right side, something like this. Text gray 400 and on the left side, we will do space y24 and put the heading green with our name and put their DIF with the FA Git up square and with the A Instagram. For this dip, we will need to do a flex books layout like row so they are next to each other. Some gap, text gray, 400 and text for Excel. For this heading tree we will do text to Excel text ray 200, funk semi volt. 27. Project 3: Final Fixes: Check how the page looks like. Now what we can do is that probably it would be better if we will go on there into the Ablogis and switch the about section with the contact section. Now let's check it. For about section, I would put the margin to to 24 maybe. Okay. And for contact, I would do the same 24. Now I tried and project hovering is not working. So what we need to do is that we will go to there. And we will need to add blur, capacity 25 group how to capacity 100, of course, transition and duration, 300. Now we can copy this. Put it right there. Save it. Now if we will test it, you can see that it's working now. And another thing is to go to a navigation bar. There we need to change this. So this first will be portfolio, then experience, then contact. We will delete these slashes. So first one will be two portfolio, then the bot, then the contact, and similar, it will be there. Portfolio, experience, contact, and there it will be portfolio, their experience, and their contact. Save it. Now let's test it, and it works, but it's not smooth scroll yet because we need to add few more attributes. There, after a link, we will do smooth true offset to 50 and duration to 500. Now we will copy it and put it to all the links. Like this. Now we will save it. We will go back to page, and it will be working. There is not experience, of course, it's portfolio and about. So there I will put about. Now it will be working. What we would like to do is that this would get closed after we click on it. We can fix it easily by going there, creating another function, close menu. There we will use set knife to force. And for these menu items, if we will at on click function to close menu, we'll put it to all the other items. Save it. Now we can test it. So for the arrow, we will go to portfolio Gasix. We'll do this from medium screen, and we'll set the right to, I don't know, five. Let's try. Maybe two or maybe even zero. Zero will work there. So this is how we fix the arrow. We need to fix the front end developer. So what we do there is that we will decrease the size on mobile screen to just Excel, and we can also do the break text. So if we will put it like this, we will get this output. Now to fix this, we need to go into about J six, and there we will delete the flex layout from medium screen and above. That should be fine. Then we have two pictures below each other, so it would be nice to divide them with this front end experience. Let's try to do it. In order to fix this for this first relative group, we will do order two and on medium squeen and above, order one. And below there, we will do order one and on medium squeen and above, order two. In portfolio to G six, we will set the Gita Bacon to text to Excel. Now if we will go into the about section, or this is actually a contact section, for the statistics, we should use a different color, or maybe delete opacity. I will change it to this one. Now I will paste it to other statistics and delete opacity also there, save it and it will look like this. The last thing I would do is to add some scale effect to the hovering on these icons. So let's go there, and also we need to add them to Anchor tech with HRF to the desired link. We will put in the icon, and we will adapt the class hover on scale 110, transition transform, duration 300. Let's test it. Now let's edit for all the icons. I will copy paste this two more times. Then cut the LinkedIn, put it there, cut the Instagram, put it there, save it should be it for the page. Let's check the final layout. So the smooth scroll is working. The eo type animation, icons projects are being switched. There we have the about section or skills section, and there we have the contact form. 28. Project 4: Intro and Setup : Session, we'll be creating this website with Rick and tail end. We have their project section that is switching them based on the button user select. I will also help you create a picture like I have, and we also add some shining effects. First, let's open a terminal. Then we'll run the command from the tail end page for creating the ID Then we will install the tailwind, both CSS and auto prefixor then we will initialize the tailwind. We will paste the content into the tailwind config file. There we will paste the tailwind directives into Index Dot CSS. We will delete the Epidot CSS we will paste this into the api J six and we will NPM run deep to open the page. Basically, we just now run the commands that are on the tail end page. We can check our page and if the text is underlined, it's working. Let's create a new folder for our components. Inside, we can start with the Navbar component. There we will use the snippet, use the Export, and put it into app Jasix. So there we will do an empty fragment Inside, we will do the Now bar. Now we will import it, and it will be shown on our page. And before going there, we will set the background and font for our page. So there we will import this font that you can find on the Git in the description with the handy files. Now, if we will open body tech there, inside, we will define the font family space, grotesque sanserif. We also put there the background. So background, we will use linear gradient, put there some degrees. But in the end, it's basically a gray background. So we put there some color. Now let's find the proper one, so I will set it. And now we would also define background size to cover, and background repeat to none. One more CSS we use in this file. Otherwise, we will use everything in the tailwind is this glass and this shiny effect. You can also find them in the handy files I will provide to you. Basically, glass is using this background with this backdrop filter blur. Also it's setting border radius to the element where it's applied. It also has some border and it has some box shadow. For the shine effect, it's using position absolute, so we need some element with position relative to stylet better. Then it's using the full radius. So with the 50%, it's like a circle, then it's using a low z index and also it has some background set. We will use this blueish color. Now to have a nice styling of our text, we will set the H two, and we will apply to all of our H two, text l, and on medium screen, we will apply text for Excel. Then for the paragraph text, we will apply text Excel, tracking type, and leading relaxed. That should be for the CSS. Now let's jump to Navbar and start coding it. 29. Project 4: Navbar: First, we will need to install two libraries, so we will do NPM, I react icons, and also react scroll. We will be also using us state, so there we will use state. There we will do import, AI outline menu, and AI outline close. And also, we will be importing the link from react scroll for the Smooth scroll. First, we will define the state variable, so const No, set NF, and use state default value will be false. Below, we will do total navigation function. That will basically set the state variable to the value. We will use this in Encliq function on one of the elements, and also we will use a function close navigation. And this will be setting navigation to falls. So this specifically we will be using on the mobile navigation. Whenever we will click on mobile navigation on the link, it will close the navigation for us. Let's first add some content and then we will style it. So there we will want to add Anchor tech with our name, so J Doe. You can add also logo. Then you would like to unord list. There we will later add also list items. There we would like to add a div with the onclick function that will be triggering the navigation, so Togo Map. And then below, we would like to add another div, and this div will be with the mobile navigation. So there in this div will be unordered list, and inside will be a list item with actually the link Awesome. Same case will be there. Now we have the skeleton, so we can start styling it. Actually, we will add the first link, which will be about same here, and let's also add the icon so we can style it better. There, we use the ternary operator. So based on the value of the navigation variable, it will execute the true position, which will be AI outline close or if it's false, which is the default value, it will be executing the second one, the false position, AI Outline menu, whoops, like this. I will create a Burger navigation. There also let's set some default size. So let's use Tirty and same size will be for there. Now let's save it. On our page, you can already see the items and the navigation. Now if we go back, we can start styling so the main div will have a class name with. First, we will use flex. Then we will increase the text size. We will justify between to make space between all the elements. We will use text gray 200, so we can actually see them. Now it's better. We will place items to center to center them vertically. Then we will do some Horizontal padding. Let's use six. Actually, we also set a max width. I will be using for this page 1,300 pixels, and let's center it with MMX Auto. We can also increase the height, height to 24. And if you are not sure how your navigation is doing, basically, you can set background to white to check it every time. So I'm happy with this. I will now remove it. That's the main diff. For the logo, I can set there some HRF. We can use basically the homepage or whatever you want. But for now, I will use this empty. For the unordered list, we will set the class name with hidden on the mobile phone because actually on mobile phone, we will be showing this div with these menu items. There on medium screen and above, we will again show it with display flex. We will use some gap there between the items. We will increase the Z index, and we will use cursor pointer. So when we will hover over the items, we will have different cursor. For the list items, we will use a class name with relative and group because we will be using there some effect on Hober. Now, we can go to Link. For the link, we need to set where it will head us. So the first one will be two about section. Also, we will set smooth to three, so the smooth scroll is activated, then the offset to 50, and then the duration for the smooth scroll, which will be 500. I usually use this value. Then we will below this link set a span, and what this span will do is a small hober animation that we will use. So just an empty span, there we'll do class name, and we will start with absolute. This is why the disposition relative is important because otherwise, it won't be underlining this about item. So after absolute, we'll use bottom zero, left zero, width to full height one, background sky 600 we can use. Then we'll use transform scale horizontal zero and group however, two, scale horizontal 100. We can continue on another line. There we will use the transition, transform. Also, we will set some duration and ease in out. Now let's save it and let's try if it's working. And it's working, which is fine. Now what we'll do is that we will first copy this link and we will put it there for the mobile. Then we will copy this wall is tem, and we will paste it there and there. We'll be using a section, portfolio section, and contact section. So we can change this to portfolio and contact. What we'll do there is that we will copy for the distal version, the wall is tem, as you can see there. We can make some more spacings there, so you want lost to code. Copy it second time and third time. And also, you have the about section, portfolio section, and contact section. There this will be heading us to contact and to portfolio, and we cannot forget on adding the IDs to the actual sections, so this will work. Now let's continue there to the Berger navigation. So for this day, we'll add a class name with medium screen and above hidden, and we'll increase the index to 30. Now we will go to the DIV and there first, we can for the unordered list, set the class name with font semi bolt, text for Excel, space Y to eight. So the spacing between all these list items will be set to eight and margin from top to 24. You will see y right now because we will be using there for this DIF that is holding this unordered list, another ternary operator there. And basically, Again, same case as before. Based on the value of the NAF, it will be executing disposition or disposition. So first, like disposition, when we will open the mobile navigation, we will make this text center, set index to 20, fixed height full width full, left zero and top zero and some background. Usually, I'm using this gray 2020, 23 or 23, 23, 23, yeah, right? And when it's false, I'm using fixed position and left minus -100%. Save it. Now we can test it. So when I will open it now, we'll have it like this. And we need their own click function. When we will click on the items, it should get closed. So there we will hold hold, and we will do on click Close Navigation. Now it's working. And also for the disc versions working. 30. Project 4: Hero: Great than your file, hero.j6. Get the export there, go tap JSix, put there the hero, can style it, save it. Now we can go and do the hero section. First, we will install the library with react type animation, so NPMIRacttype animation. Now we will import the profile picture, so profile picture from. And actually, we need to edit the assets now. You can find in handy files on a Git. So I edit it just right now, and there I will do assets profile picture dot PNG. Save it and we argued. Now I will do another import with the type animation. Awesome. This hero page will have a main div, then an ordered div that will hold a text and then an image with the profile picture. But I will edit a bit later. Let's start with the styling of the main div. So there we'll be using grid layout. On Mobile screen, it will be defaultly set to grid columns one on medium screen and above, we will set there grid columns two. We'll place items to center. We will set a max width of this hero section to 1,250 pixels. We will center it. In case again, you don't know where you are, you can set background white. But I need to add some content there in case to see. Then some margin to bottom. For another section from medium, we will increase it. So we have some spacing there, and that will be it for now. Also, we can maybe at some margin to top. Let's use 14. That's better. For the main div, we will set a maximum weight of 800 pixels. Inside we will put a paragraph and below the paragraph, we will put heading two. And inside the paragraph, we will put a text. A, now we will break it, so it will start on another line. And there we will put a spenteg actually for us to be able to style this Jon Do then again, we will put a break tag, and there we will put a type animation. We can close it like this. And inside this type animation, we will do a sequence that will be basically developer for this time. Duration will be 1,000, web designer, duration also 1,000 and consultant, duration also 1,000. Then we will set there a speed, which will be 50, then a repeat, which will be infinity. And then like this. And then a class name, which will be font bold and italic. Save it. Now it failed. And it failed because of the infinity, we need to have I. Yes, that's it. Now, what else? There we at the text with five plus years of experience. And now we can remove the background white. And we can start styling it so we can actually see the text. So for the paragraph tech, we use the text gray 200 on medium and above. It will be sized with six Excel on a screen or mobile screen, it will be text three Excel and it will have tracking tight. So the letters are closer. Looks like this on our page now. Let's continue. The span tag, let's leave it as is now, but for later, we can do something like text blue 200, something like this. But for now, let's leave it empty. There we did the styling. For this, we already don't forget for H two we already did the styling in index of CSS there. But we will also add there some color text gray 300 maybe. Okay. And now we'll put there the image. So that will be pretty easy. There we will do the source with the profile picture, and class name will be width to 500 pixels. I think let's do this from medium screen. On mobile, actually, I'm usually using something like width to 300 pixels. By the way, the image is created in canva.com. There you have the picture. There you have this element, and you set the color there. Then you play with the position and you put the picture inside. Then you need to download it as a transparent image and, of course, cut the corners. Now, what we will also add are the buttons. So right below this H two, still in this div we will do New Div. And this new div will hold button one and the button two. The Button one will be like download CV, and the button two will be like view W now what we will do for these buttons is that they will be next to each other. So let's set it by flex box layout and using Flex Row. Then we will set some gap between them, margin to bottom on medium screen and above. Let's reset this margin. It's basically for mobile screen because then the image was right below the buttons and it didn't look good. Now, let's styling for the buttons. So for the first one, I will start with setting the Zen index, then the cursor pointer, then also font bolt, text grade 200, also with two half, then margin from top. Then I would use also bedding two. And now we will start with the colors. So let's start on another line, and I will set the background gradient to right from some color. I will set in a minute via some color. To some color. So like this, we will get there three colors gradient, and we will make this rounded Excel. Now what I can do is I can start class there, and I can set there also that index to ten, Crouser to pointer, point to bolt, text to grade 200 with 12. Margin from top to six, wedding to two, and I will say there a border because this will be outlined and not filled with the color. So border and border gray 400, and I will also use rounded Excel. I can put it also on another line so you can see all the code. Now I'll save it. I have there two buttons on my page, but I will be now adding the color. So let me get the codes from the color I want to use there. I will be using this color, and now we will add the hover effect for the buttons. So let's start on the top. I will add the transform, transition transform, then Her scale to one oh five. It will increase it, and also on Hover, there will be some shadow. We can now copy this, put it to another button. We have there. Save it. Let's try it. 31. Project 4: About: Let's now go and create there about section. So about J six. We can import it. Now put it there. First there, we need to import the images, so import project. One from the assets and I will actually do it off video, and also we'll import all of these icons from the library we installed react icons DI, and there we'll be using JavaScript and so on. We will start with styling de Mandiv there. So we will set as usually next week to 1,300 pixels, center it, some padding, then a grid layout on medium screen and above, grid columns two, some gap, place items to center, and also we will put their ID, which is about for our navigation. Inside, we will start with the cards. So we will have on this page seven cards the real shown in the grid layout. But on desktop version, there will be only six cards. On mobile, we will have additional one card to have some better syling element there. So let's start with it, actually. Class name that will be hidden on the medium screen and above. But actually, we'll do this hidden later so we can see it now. Let's use the background white background oppositiutn backdrop. Blurred large, rounded, large, and also bedding to six. Now into this diff inside, we will put actually the icons. So DI HTML five, it there with their class name, and there we can set the color. So for this one, I will set the color of orange, 600. And now I will do it for all the icons I want from there. So I will actually do it of video. Now you can see it. I have it there. So I can actually add more classes there. Flexbox layout, flex rep, cap four, text for Excel, and Justify Center. Now I'll save it. I have it like this. And let's actually check how it would look on the mobile, so I will do it like this. Now we can see it will look like this. Fine. Now we can hide it as we want it. So there we will do a hidden from medium screen and above because it will be only on mobile phone for the styling purpose. Let's actually now start edding the disks we will have on desktop also to the first one will be for the image. So there is the new div. There we add a medium screen above to hiddon and for the image, first, we'll put there relative because we'll be using an absolute position inside and we will group it. And don't worry, we will use these elements, so we'll code it once, and then we will just copy paste it. There we'll create a div and this will be empty diff. It will be just for styling. So we'll have a width and height to fell. We'll have a position absolute, so there we have the position relative to it. We will do inset minus one. We'll do background gradient to right, and we will set this from teal 100 color to teal 900 color. We'll do round it large. We can start on an underline now, and we'll do blur, o plasity to 25 group over, we will do oplasity to 100 and transition and the duration to 300. Now, let's save inside, we will put another div that will actually hold the image. So we can put there the source of the image that will be project one. We can also there. So let's put there Project one and a class name, which will be rounded large and on medium screen and above, we will say there mix with 500 pixels. Now we can scroll down. We have the dimage. So it's working like this. What we will add there also is that into this day there is holding the image, we will put the relative position with the full, bedding to four, background to white, background to opacity, ten, and backdrop blurred to large width, rounded, large. We save it, and we will have it like this. It's actually scroll will be down. Now if we continue below the div and we will add another div that will be basically the skills section. You can put the class name with heading to six. Inside this diff we'll put heading two with skills. So styling there. So text grade 200, text three, Excel and pond bolt and margin to bottom. Below the skies, we will put a paragraph with text grade 300, margin to bottom four. And now, inside the actually what did I do? We need to cut it, put it in class. Inside this paragraph, we will put down some text. So I will put it there. I will write it off video, and there we have it. Now we have it there, so below, we can put some icons. So I will do another div. For this div, we will do class with medium and above flex, flex to wrap, get up to four, text for Excel, justify center, and hidden on mobile screen. Now we can take some icons we have there. Copy paste it there. We can style it like this. Save it. Now what we want there. HTML CSS, good strap gel script react. Note, we can I think this is fine. Now what we will do is that, actually, what else do we want to do there? I think nothing. I think this can be it. We can play with the margins later if we want for the styling, but for now, it's good. So I think we can continue. Basically, what we would like is that we would like to copy this wall section and put it below, and then we will be able to see it on the left side below the picture. So then we would like to take the picture there and put it again below. So it will get on the right side, and then we'll repeat it. So we will take this picture, put it again there. It will get on the left side. And with taking this text, it will get again on the right side. Now we can just update the text and the images. So the first one is Project one, two, and three. So the first one is Project one, second one is Project two. Third one actually there. Project two. And third one is Project three. Like this. Now we will update text. So for the first one, we have the skills. For the second one, I will update text now like this and the third text, I will also update now like this. Now we can check how it looks like. So of course we can play with the icons, text and images for our projects, but it's ho like this. And later we will add even the shining effect below. One thing we should fix are the icons. So for the last one, I would use the Actually, let's copy this one or let's do it. Even. So there we are saying about the ftc. So I would put there note. Then we can do Mongoi B. Then we can do rea and you get up. Then let's add some colors. So let's copy paste this. And I would put there green. We can leave there also green, blue, gray like this. Then I would go to these icons for front end. So basically there, we can use this, this, this bootstrap Ja script. Let's delete the note. I canon let's put it like this. 32. Project 4: Portfolio: Copy these imports, open explorer folder, and components, click on you, do a portfolio.j6 component, do an explorer there, put it in Eb do JSix. There we can paste the projects. So we'll be using there actually six of them, and I will change them a bit later. We'll be also using the Gita icon, so AI fill Gita. We'll be also using the use state. From react, and now I can change the projects and we can start. So first, what we'll do is there we will create a constant with projects. Do not write a repetitive code, we will save it into this constant, and from there, we'll be mapping over it and using the image Title description UI for front end development using React. Also link which is site and G up and there below, we can just copy paste this. I will use six projects, so one, two, three, four, five, six, we can change the values to images. So project six, five, and so on. I will now do it for everything like this. You can see there. And we can move to the portfolio. First, we'll do the constant current project, two set current project. So we'll do a state variable there, and default value will be zero. Then there we can start writing in return. We can set the styling for the main Div, which will be again with a relative class because we'll be using some absolutes there for the shining effect later, maximum width there will be 800 pixels. We will center it. So padding then let's do some vertical margin there on medium screen and above. Let's use 20. Flexboks layout, flex direction, ColumO medium screen and above, flex direction row. And ID will be portfolio. Did we made ID on about? Yes. So now we can start writing there into the main div of our portfolio component. We will have there basically a div with the project information and an unordered list. That will be holding the options, and we'll be selecting the projects and it will be changing on our site. So let's start for the project, and we will have their background white or we don't even maybe need it. We will use the glass effect that we defined there in index to CSS. So we'll apply all of this to our card for the glass effect, or after the glass effect, we'll be opening with the full, border to two, and maximum weight to 600 pixels. Now we can see there on our page. So below, we will put a div, and this div will be with an image. And that image will have a variable there instead of the like Project one, source, for example. But for now for styling it, I will use their source of Project one. Then it will have some old also. So there for now I can put Project one and also some class name width to full, height to full, object to cover, round it too large and margin to bottom. Awesome. This div, let's say that also with full and height to 80. So we'll set some height for the image. And below this div, we will set a paragraph, and this paragraph will be some description, and we will make this variable later. Class name will be text gray 200 and march into or vertical margin into four. Then below this, we'll create a div. And this div will be holding the anchor text for the Git up and for the link to the page. So the first one will be view side, and the second one will be like AI fail Git up. Nice. Let's use the flexbox layout and vertical space to four. Then for the first anchor tech, the HRF, we will set for now this, but it will be variable. Then we will set our class name with some bedding horizontal. We'll make this a button. So we'll do this, and we will set the background, you will be able to see how it looks. Actually, for the site, we will use background slate 600 text gray, 200 rounded large. Her background slate 700, Then the transition and duration 300. We will save it. Now we can see it already on the page. We'll do the same thing almost for the get up. So big to four, y to two, background to gray 800, text to gray 200, text to Excel, round it large.Oher we will set background gray 600 and some transition and duration to 300. Now we have it also for the Git. Let's check it. Okay. Now, there will also the HRF. For now, we will leave it with the hastek only, and we can continue. And we can continue to this unordered list. There we'll set some margin to left. Flexbox layout, flex row on a mobile screen, and on medium screen above, we'll do flex Colum some gap, flex rep, so it's wrapped on the mobile screen, justify center, so it's centered horizontally, margin to top, and also on medium screen, we'll change the gap to one. On mobile screen, the gap will be six. This unordered list, first, what we'll need to do there before the list items is that we need to do projects map. So we'll map over the constant we created there on the top over this one. We'll do project map, project, index, and there we'll open it, and inside, we will put the actual list item. Inside the list item there, we'll put a key, which will be the index. We'll put there the click, which will be like set current project index. And also after this one and before ending of the tech, we will put a class name. Inside the class name, we'll actually don't start with backslash, but we'd like this and now we'll do backslash. Inside, we can start with cursor pointer, put it to another line. Text gray, 300, background, slate 700, rounded large, bedding, then a mix weight of 100 pixels on Her we will change the background to slate 800, and we'll do transition and duration to 300. I need to scroll so you can see what is important now, I will make this on another line is that we won't be ending there. We'll do $1 sign and curly brackets. Inside, we will say that current project equals index, and there, in case it's selected, we all set background slate to 900 and in case we won't set anything. So this is another turn operator we will use there with this question mark. So what we are saying there is that when this set current project will be selected, we will have the background slate, a dark color. So now let's see how it actually works. We will need to just put there the project, the title. Now the magic happened, so we can go on our page and test it. On our page, you can see it's changing. On our page, you can see that it's actually working, but it's not changing the images because on the images, we didn't put a variable, but we put there the hard coded image. So let's fix it. There we will need to scroll up. And so you'll start there image source. There we will do projects. Current project dot Image. Now we can basically copy this and put it all. But instead of image, we will put a title. Now we can copy it also there. But instead of image, we will put their description. And now let's go to Anchor text and to HFF HRF, second HRF. And there we will put the links dot sit and links dot GitA. Now, let's save it. Let's test it. So as you can see, it's changing images, and it will be also using the site and the git up you specified there in the constant. So it will be using this site and this giup for the like project where you set it. 33. Project 4: Contact: We can continue to contact form, there we will create a new component, contact the J six. Add it to Abo J six. And we will do an import there, so we will import AI fail LinkedIn and AI fail Git up. Awesome. There we can start with the man Div. So first, we'll do pink. We will do maximum weight of, let's use 1,000 pixels, and mix codo, and set there also an ID of contact. Let's actually continue with more classes there. So we will set that glass effect that we edit in an index that CSS there. Then we will set a grid layout on medium screen and above. We will use grid column two, place items center. So What else? Actually Hmm. Actually, what we will do is that we'll use another div or we want. Actually, let's continue with coding the contact form and then later we'll update it with the UI. So I will our first div. In this div, we will do unordered list. Inside the unordered list, we will do list item. First will be AI fail LinkedIn. Second will be AI fail Get up. For the first list item, there we will set a class name. We can already see them there, but they are too small. So let's continue now there in this unordered list. Let's actually set MI to Auto. So vertical margin to Auto, padding to write to six because we will have their on the right contact form. There for this list item, we will set a flexbox layout. And for this LinkedIn we will set a class named width 70 pixels. Also had to do text grade 300. Now, what we also do is that we will basically we can actually copy this, put it there, and put there the AI get up. Now, let's make some spacing between and let's continue. So there in this list item, let's actually make it like this. What also will be there is a disk with heading three, which will be contact. And with paragraph, that will be mobile, something, and another one, which will be email, something. Now we can hold out. There we can do class name with text gray to 400. And then contact, we can do text Large, font, bolt, and text gray 200. Let's check the page. It's looking better. But of course, we still miss a lot there. So actually, let's do the styling there. Let's do there something similar, we can maybe also even cop it as Waldif. But what we miss there is some margin five. Now, let's cop it, put it there. In the second one, we can do working hours. We can do there Monday to Friday and Saturday to Sunday or weekend or whatever you want, maybe you can just live there Monday to Friday because we won't work on the weekend, right? So we can do that. I don't know. 10:00 A.M. To 5:00 P.M. And there from the styling point of view, we have it currently like this. So I think it will change a bit after we will create a form, and later we can update it. So what we need to do is that under or below this unordered list, we will create a div and that will be the div with the email contact form. First, to have the grill lay out let's actually delete this div. Save now we should have two columns. So if I save this text, it should be on the right side, and it is there, so it's working. Now, for this day, Inside, we will start with the form, or we can actually do the form instead of the world div so we don't even need to use the DIF. So we'll start with the class name, which will be maximum width. Let's actually use six Excel, some padding on medium screen, we will increase the pending even more. ID will be form. Now we'll save it. Let's put there some content so we can check it on the page. It's there. Inside the form, we will put the inputs. So there will be a first input, then there will be a second input. Then there will be a text area for the text or for the message, and then we will have the button for the send message. Nice. Let's actually do it like this. And like this. And let's start. So for the input, the type of the first one will be text, ID will be name, placeholder will be your name. Name will be name, and the class name will be margin bottom to two, width to full, rounded to medium, then some border. Well dorsal border colors of border grade 400, PI two, two, bedding left two, two also, and bedding right to four Okay. Well, it's pretty similar to the second one, so let's do it. But there instead of type text, it will be type email ID, email, place holder your email, and name will be email. This will be the same. For the text area, we can, like, copy the fields. Type will be text area, ID will be text area, then columns. Default 30 rows to four. Placeholder, your message. Like this, your message. Type. Actually, for text area, there is not a type. There is a name. So let's use it like this. And that is fine. Now let's go for the button. For the button, it will be type. Submit with class name to width to four, color we will set in a minute. Bedding white to three, round it to medium, text to gray 200 from semi bold and text to Excel. Now, let's go to hero section. Let's go to this button. Let's actually take this gradient color. Copy, go back to contact. We can start there on the new line, put there the gradient, save it. Well, and that's it. We have the contact section. I see issue there. The It's not below, so we miss there some We miss there something on the page, as you can see. Actually, we don't, it's just a long line. I didn't see it correctly. So yeah, that's for a contact section. Actually, one more thing. I guess the most important one in the form, we need to add also method that will be post, and the most important thing we need to read there to have it actually fully working, we need to add an action, and into this section, we need to add an endpoint, and the endpoint, you will add, like I will show you now. Let's go to this page, a dotgtfm dot IO slash Login. Then we will sign up, click on Create there, put there some name and put there the time zone, copy this endpoint. And then you will paste the endpoint there. Now let's test it, and it's working. So we now receive the email into gettformiO. 34. Project 4: Footer: Now let's do the footer, so the components we'll create a new component footer J six, like this, put it into the app. Let's import. Now let's go there. That will be pretty quick. First, we will import the FA Github, square and FA Instagram like this. Nice. Inside, we will put the D for a left side, and also for the right side. So we will use a relayout there. Let's at maximum weight to 1,300 pixels. Let's center it. Let's do flexbox layout there. Justify between ftting to six on medium ftding to 20. Text to small is fine on medium, text to Excel is also fine. Or let's reduce text too large and marching from top to 12. Now let's jump to the first div on the right, then on the Now let's jump to the first div on the left, then on this one to the right. Inside or inside the diff on the left side, we will have a heading three with J Doe. Can do it like this. And the div that will hold the anchor tag. That will hold the FA Github square, and below we'll hold the FA Instagram. Now let's do the styling, there we will do space Y four. We have some spacing between the elements between the H three and this DIF. For the H three, we will use text two Excel. We can now scroll the page so we can see it. Of course, text grade 200, so we really can see it better. Want to bolt or semi bolt, maybe. Mm hmm. Then to this div, I would put the flexbox layout, flex row, so the icons are next to each other. So gap, text gray 400 and text for Excel because we can actually see the icons at least. Then for the other div on the right side, we actually maybe don't even need to dip there. Let's put a paragraph there with Dak at 24 J Doe. And let's put there text gray 400. Let's see the page. This is how our footer will look like. And I think that's it. So now we should have our page done. What we are missing is the shining effect we'll do right now. 35. Project 4: Shinny Effect: We will need to create there a new component and we will call it shiny effect with Jasix. We won't be now putting it anywhere. We'll do it just there. So inside in the return there, actually the dip will be empty. Class name will be the shining effect, and this shining effect is not a tailwind class. It's the thing. Let's do actually close others is the one we edit there. You can find it on Git up. I will provide you with handy files. So we'll apply there and also we will put the position styles. And we'll define these position styles there. So there we'll be constant with position styles, and we'll set the W width, height, and the index two minus one. We will need some input parameters. So inside, we'll put the left, right, top and size to 500. Also, what we will do there is a condition. So when we will be defining this shiny effect, we don't need to define left or right side every time. For this occasion, we'll do the left undefined. Then the position styles that left will be and we need to use backslash left pixels. Basically, now we can copy it and do the same thing for a right side. Right is undefined, so we won't be defining it after calling this component. We will set position styles right to right pixels, which can be zero. Then for the top, we will be using the same as there, so we can copy it, put it there, there and there. But the top value will be top. The weight value will be size and height will be also size. We set there. Now we can go and try to use it. So let's scroll the page up. Let's now go to hero section, make sure it's saved. On hero section, somewhere between the div and the image, we will do a shining effect. So shiny effect. Now it enters, so make sure it's imported there for every page where you want to use it. And there we need to define the left. Let's use, I don't know 100. Top 200 and size, something like 1,600. Let's say that now you can see the shine effect is on our page. But what is also happening on our page is that we got this vertical scroll where you can scroll to the left and right. And we need to fix this by actually putting these shine effects into a div were really setting overflow hidden. So let's create a div And there we'll put an absolute position inside, zero overflow hidden on the mobile screen. On a medium screen above, we'll do overflow visible. Inside, we'll put a shining effect. Oh, actually, got it. Put it there. And we'll put it there also a second time because we want more shining effects, of course. The first one, we'll put in another div. So we'll put it like this. And in the div for the first one, we'll actually hide it on the mobile screen, do not make any mess there. So we'll do hidden and medium block. By the way, on the mobile screen, this shining *** isn't that much visible. So in the end, you can just hide it and put it to block on medium screen above because there it's visible pretty much. But on the mobile screen, all the screen iscked stuffed with all the elements and all the content we have there. So it's barely visible there, but you can do it like this. Now we'll save it. And we will change the value. So the first one will be 100, 216 hundred. The second China effect, we can move it a bit. There, we can do top zero and the size, we can use 1,200. Now let's check the page. So we have it like this. We still have the vertical scroll, so let's fix it. Basically, we need to change the sizes. We need to be careful with it. Let's use something like 1,412 hundred to have effect like this. Now we can also put this shiny effect to some other page, but we need to import it there, of course, let's go and do it. For example, if we go on the portfolio, there we will go somewhere between the unordered list and the DIF. Let's go there. Let's put it there. We can leave there just the one shine effect. Let's put there zero size. We can use 900. And let's do these overflows now because we should be fine. And now you can see the error. So don't forget to import it like this. Let's check the page. Now you can see there in portfolios. So now you can play with the shining effects as you wish, put it there on the page and so on. Now also being on the portfolio, as we put there Shining effect, don't forget it has some Z index, so we need to go to the page and higher the Z index there. So if we will check, it has a Z index of one. So we need to go to the first dif, put the Z index of ten, save it. Then the second one, set index to ten, save it. Now let's test. And it's working even there. Okay, and that's it. Let's check how it looks like.