NextJs, React & TailwindCss Web Development: Animated Responsive Portfolio Websites

1. Intro: This class, you will learn how to build a website using NextGS. Welcome. This class is for everyone who wants to learn about building design like this on their own. We will be styling all of the components with Tailwind CSS. That is like a big library of premade CSS classes that you can use directly in your HTML 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 HTML elements with small single purpose classes. Why do you use Next JS for website, where it will be mainly just about the front end. Good to have the website prepared in case you will add also a back end functionality later and also because of the SO, which is something where Next Jess shines. We will learn how to structure the folder, how to create and include components on your page, how to set the layout with a font properly, and how to also efficiently create a website. In this example, it will be a portfolio website because then after this class, you can keep all the things that you just code it. Also, I recommend you to try the class project, as you can sharpen your skills there, and if you have anything, I will be happy to respond to any question or comment. Let's see how the page will look like after we code all the components. After this class, you will have the knowledge on how to build a website like this, how to use the tailwind classes, how to create reusable components, and how to work with folder structure of NextGS and use some of its advantages. Looking forward to seeing the lessons. 2. Setup: In our project, we will start with running this command, and as we already created a folder, we can do there just a dot because then it will install everything into the folder where we currently at. There we will do Y, click yes to tail end, no, yes, no, and no. It will stall installing all dependencies we will need, so we will wait a bit. Now our folder looks like this and we will create assets folder in public. There we will do assets. There we will put the pictures. You can get them from the starter link and the Nap. We will create also a new folder and we will call it components there we will keep things like Hero section, Navbar, and so on. We can actually create it right now. Let's do Navbar, do TS six. And let's do also hero section, the TA six. These are the first two components that we will start with, and later on, we will add more and more components. To actually have these components show on our page, we will need to create the export. That means we will there something like export const, hero and there we will open the body. Inside, we will do return for now we can put just the empty fragments there, and then we will go to our page TS six. There we can delete all the content and leave there just the diff. Even with the import, fact we can do there just an empty fragment, and inside, we will start typing hero, and it will automatically offer us to import this component. So we will enter. I will get automatically imported, and then it will be on our page, anything that we will put there and as we will run the server with NPM run Def, then get to our local host, you can see the content will be there. 3. Hero: In the hero section, we will start with imports, and we will import motion from frame or motion and also the profile picture. We will also import image from next image and define this component as a client one. So we will put there use client. Well first need to create a linear gradient background on the background of our hero section. We will start with the relative class there as we will have the planet effect there, and that will be of absolute position. Then we will continue with overflow clip as we don't want any content to get out of our component. Then we will say this as minimum height screen, and that means it will take at least the height of the screen that the user will be looking at. Then we will set text to white, and now we will set the linear gradient background. We will start with BG, that means background, and there we will set linear gradient in linear gradient, we will set that we want to define this to bottom and there that we will start with black color. Then we will continue with grayish color. 35% there means how much of this scale should the gray color take. Then we will continue with another gray color. We will change this later. This we can put something like 67%. For now, if I will put there white color, you can see how it split it, and then the last one, we can also try with white color, set there 85% and you can see it will be the color at the bottom. This one should be the brightest one. For now, we can put there some grayish color. Like this and we'll change this a bit later. For now, we will keep it like this, and then we will add the colors there because we still want to code the content of this hero section. What we will also do is that we will now adare the planet because then we will code around and adjust our design to it. So let's add there a div. This can actually be an empty div. We won't be adding any content except of the class names. For the classes, we will set this as absolute position with background, black. We will set its width. I will do 2,400 pixels. We will set its height. I will say there are 1,000 pixels. Then we'll make this circle. So round it to 50%, then we will set this position to 50% and also we will do translate X by 50%. So it's in the middle. Then we will start. I will do it on another line so you can see it. With another background, there we will put radial gradient and we will set this from closest sight, and there we will set, again, the black color to 85%. And then a color that we would like to be there. For example, if I will say there are white, you can see it will make the shape of the planet on our page. I can actually leave it there and we can change it to color that we like a bit later. Also let's say this to top 450 pixels. It's like on bottom that we can see now, let's say there's some border. I will do one pixel border and then a border color that we again for now can set to white color with 0.3 opacity. With this, we will have this planet effect on our page. Below this planet div, we can start creating the content container. I will create the div and inside this div, I will create another one and then below this other dif, we will create a motion div. Now for this content container, Dave, we will put the classes of container relative a mix order to center it bedding gigs for some horizontal bedding, bedding from top to 12 and padding from bottom to 24. Now we'll add some classes also to its inner div. There we'll put the flexbox layout, flex direction column, so the items are below each other items to center and justify to center to center items horizontally and vertically. Text to center to have centered text and also the index to ten. Inside this container div and in inner div, we will create a motion div for the profile image. I will do the motion to div and inside this div, we will put a div that will be there as a design element, so we will put absolute position inside zero background gradient to bottom and from gray 500 with 0.2 opacity to transparent rounded, full and blur tree Excel. Now below this design element, we will put an image and into this image, we will put a source of our profile picture of profile picture and the class names of some wit. I will use the 250 pixels relative and the index set to ten, there we will use image tag from next JS. Now we have it on our page. We can see there we will set the attributes for the motion dip, so this one is actually animated. For the initial, we will set opacity to zero, so it's not visible and scale, we will also set 0.5 as the initial state. The final state will be fully visible. So opacity to one, 100% and scale to one, so it makes this animation effect that it's growing on a scale. For transition, we will set the duration of 0.8. So we will set the amount of the time it will take. And also, we will set there some class names, and that will be relative margin bottom, and also margin from top. Now we can continue with the text content and that will be below this div. That means below this one, we'll create another one, motion to div. Inside this one, we will put heading one, and there we'll put high IM there we can put break tech, John, though we can put in spent and below H one, we will put a paragraph tech. There we can put some sentence about us. I'm a full stack, developer focusing on creating websites that provides user with best experience, for example, we can also format it like this. Then below this paragraph, we can create a div into this div, we will put two buttons. One for contact me or second one for work, or we can put the download TV, something like that. We will create the motion dot button for contact me, copy paste it and for second one, we can do view work. Now for the motion diff, we will again set their initial states that will be opacity to zero and Y position to 20, then animate and the final states opacity to one and Y to zero. So we will move to its final position. We'll at for transition, again, duration 20.8, 0.8 seconds and class names we will put there a maximum width of two Excel. Let's move to the styling of the ge one. There we will put text six Excel, text wide with 0.8 opacity, maximum width large, then a mix do to center it, leading relaxed to change its line height, and also margin to bottom. Leading relax is important there as we are having this on two lines with this break tech. By the way, for the Spentek for the dough, we can put there text gray 600, maybe 400. Now let's add styling for the paragraph tag itself. There, we'll put text Excel, text white with 0.8 opacity, also maximum weight large because it should have some maximum weight. Otherwise, it can be hard to read. Let's center this and mixdo Also leading relaxed for the line height and margin bottom. Now we can go to the buttons there for the div that's holding them. Flexbox layout, Gap 24 and justify center. For the animation of the motion button, we will put Wilho we would like to increase the scale 1.05. And for the class names, we'll put the pedding twigs, PI first one is for the horizontal padding. Second one is for the vertical one, then background gray 500, round it, full Font medium and hover background gray, 700 and transition colors. As we are using the color animations, this will provide the smoothness. For the button below, we can actually copy paste this and put it there, and that's it. The only difference there is that we won't put there the background, but we will put there just the border. Let's delete this background and put there just the border white with 0.2 opacity. Now we will need to update to the colors and also we will update the layout to add S font and global CSS. Let's go to layout. What we will need to do in layout is that we will need to import this DMSNs from Next font Google. Then in variable, we will need to define its weight and subsets, and then we will use it in a class name in our body tech. That is wrapping the children. That is our page. And we will put there dmsans dot Class Name, and it will load this font. Also, I would update this metadata. We can set the title, name of our portfolio, and some description. After we have this, our font will be loaded. Next thing, what we will do is that we will go into Globals dot CSS, and there we will leave just these three tailwiner directives, then the body tech where we will set background color to black and text color to white. And now we can move back to hero section, and there we can color it. You can put there any colors that you like, but if you want to use mine, you can use this how I did it. For the background, the linear gradient one, I changed the grayish colors to these purple ones. So you can use these codes, and there you will set how much of the space of this background should each color take? This one is the brightest one, so you can see it behind the planet. It makes the shining effect, and then it's going to darker, darker and bending on the black color. There is the radial gradient, and this is the planet itself. You can see if I will put there white color, how the planet will change. So I put there this purple one, and it will create again that the shining effect is getting on the planet. Then for the border, I will put there a bit different purple color, and then I will say 0.3 opacity to it also. So it makes the shape of the planet a bit. Moving on, I changed all the gray colors to purple ones, and I also updated a bit this color for the shining effect that is behind our profile picture. And then I also lower the number for the purple color of the Spen tech we are using on our surname. Next thing I did is that for the button, I will add a new background. We will change it to background gradient to right. We'll do it from purple. Let's do 700 with 0.8 opacity, two purple 5,000.6 opacity. Now let's check out the button looks like, and maybe we can update the colors so let's go there for a bit darker purple. Let's use just plain 700. And there we will go for a lighter one. Let's use 400. Maybe that's too much. Let's use 500. And now let's see how the button looks like. Yeah, I think it's fine. Also, what we will do is that in the code, we are missing there a border board for the tailen class. So let's add there a border. Otherwise, the border purple won't be active there because it will be missing the border itself. Now that will be for the hero section and we can move to the about section. 4. About: You will grade a component. We can start with Expo const about return empty fragments there and put it to page t six. For the at component, we will import Progress, but we don't have this component yet, how we will get it. It's from Shed CN and we will need to write a command in our terminal NPX Shed CN at latest at Progress. We will had Enter and it will download and install this component for us. There we will just it, yes, we can choose New York neutral, two CSS variables. There we will use force, use legacy peer Deep and that will be it. We will also import their image from next image, and we can start. We will start with changing these empty fragments to a section. For the section, we will set ID to about, and also we will set there some class names. We can do text white and Bedding to eight. Inside this section, we will create heading two. And in this heading two, we will do about with Spen tech M. For this H two, we will add styling of text six Excel, font, both, and margin to bottom eight. For the Spen tact, we will change color a bit. Let's add the text gray 300. Below, we will create a div, and for this div, we will set a grid layout with grid columns three, but it's enough if we will do it from medium screen. On mobile screen, default, it will use just one colum because definitely it's grid columns one. We don't even need to define it. Let's also make some gap there. And now we can continue inside this div. We will create another div. And in this div, we will create heading three with 0.1, background. And for this background, we will also make paragraph tech and below, we will also create another div. And in this div, we will actually put some code. So we will do code tag. For this code tag, we will set some class names to make it a bit different. Text grade 200 with 0.5 opacity. For this diff, we will make it rounded large, Bedding four, margin to bottom four, border and border white with 0.2 opacity. Now for the heading three, or let's start from this div that will hold this information for the first block in our grid layout. There we will set also class name and set the border, border white with point to opacity. We will be using this color a lot for the borders, rounded large and betting six. It's getting some shape now and it will be even better. Now for the background or for the title, we will set text to Excel. Font, bold and margin to bottom two. Now for the paragraph tech, we will set text wide with 0.5 opacity and margin to bottom six, and I will now put some text for this section. I put there this one. I'm a passionate flutech developer with a strong foundation in computer science and so on and so on. Then below, there will be this code snippet. And in this code snippet, we will now do constant of skies where we will create array this code, where we will list our skills. We will put there these signs that will be there for the spacing. If we don't have it, you can see how, for example, JavaScript will move on the start of the line. Let's keep it there and also let's check the page. I will show you how this looks like. We'll add more blocks, so it will create a bent to layout where we will put all the information about us. Let's continue with the second one. And for the second one, we will start below this div. So there is the closing of the first block that will be there then. We can also do this. There we can open a new di and inside, we can start. We will add a styling there, border, border white, 0.2 obesity, round it large, and bedding to six. Inside, we are doing heading three with second block expertise. And there we are putting for classes text to Excel, font both and margin to bottom two. As a paragraph, we are putting there the sentence. I specialize in building robust and scalable web applications. Let me format it like this. We will add to it text white with 0.5 opacity, and we can move to putting a div there, and inside this div, we will put an image with our project. Let's first set their margin from top, relative border with border white 0.2 opacity, rounded large, padding four, and let's set height to 220 pixels and overflow hidden. Nothing get out of this block. Let's again format it like this and inside, we can put image and there the source of project one or to project one, then layout to fill, then object fit to cover. And for the classes, we will put rounded large. Now, we got an error because I guess we did wrong mapping of our assets folder. Now it's fixed, and it will bid for the second block, so we can move to the third one. For the third one, we will grade there again a div. Inside this div, we'll do heading three with 0.3 skills, then a paragraph tech with some sentence, and then a div that will now hold two lists of some of our skills. I will put there a sentence. I'm proficient in a wide range of technologies and constantly expanding my skills. Then for the heading, we will leave it as. We can styling. So for the Div we'll add the border and border white with 0.2 opacity, round it large and padding to six as for all of our blocks. Then for the skills, we will add text to Excel, font bolt, and margin bottom. And now to DIV itself, we can add the grid, then gap to four. So we have some spacing between, and now we can start there with a div inside this dip, we will do heading four for front end and unordered list. Inside this unordered list, we will do list item, and we will put there, for example, react. There we can put typescript. There we can put tailwind, CSS or frame motion. Now, let's all at styling, then just copy paste this di below and change it to back end. There we will add border white two point to opacity, round it large, and some padding. For the heading, we will add text gray, 300, font medium, and margin to bottom. For the unordered list, we will at text wide with 0.5 opacity, space Y one and text small. Now we can just copy this diff, put it below, change this to back end. And for the list items, we'll put there, for example, no JS, then we can do Python, then Postgress and AWS. As an example. Now you will check the page. There is how the third one looks like. And now we have two options. If we don't like the current layout, we can put their grid columns too. So it will be next to each other like this. Or we can, instead of this, put their text to center. So it will be like this. I think I will leave it like text to center, so it takes the full block, but it can be changed easily. Let's go for the last three blocks. That means we will go back to IDE. We'll check where this div is ending is there, and below, we will open a new one. In this new div, we will classes of grid layout. We will sit there on medium screen grid columns two, Gap to eight, and margin top to eight. Then inside, we will create another div. We are the border wide with 0.2 opacity, rounded large and bedding six. Inside, we will create div again this div will be holding another div. Let's adare space Y four. We have some spacing between them and we will have a div that will be holding a label. Front end and progress, which is the progress bar or the het CN component that we imported there. We will put there some value for the progress. I will put there 90 as a 90%. For the class name, I will set background gray, 300 with 0.2 obesity, and for the color of the progress bar, we will use tilinTSS syntax that will touch at a direct child div element. So we will you there and greater than DI background gray 100 with 0.8 opacity. We also need to close this progress. Now you'll save it. And if you'll check our page, it will make the progress bar look like this. Now we will copy this and paste it two more times. We will change the values for the progress bar and the labels. The second one I will do back end, third one, DevOps. For the progress for backend, I will put 85% for the DevOps, I can do 75, for example, we now also add some heading below these progress bars with some paragraph and I will put the fourth block approach. I will put there these classes as for previous headings and paragraph with also text wide 2.5 opacity. I believe in writing clean, maintainable code, and following best practices, something like this. Now it's time for the fifth Div let's create it below. Div where we can open another DIV and put there just an image. And we will put the source of project two, project two, then layout to fail, also object fit to cover, and class name rounded large. Now we also need to add styling for the two wrapping diffs. Let's put their border border white, point to obesity, rounded large, bedding to six. Then for the inner div, we will set some height. Let's do 200 pixels. Let's overflow hidden, Bedding to four, we can add additional border and we also set the relative class, save it. Now it will look like this and there are some fixes we will need to do. But first, let's finish this with the next div and the last block. Let's create a div that will have a heading three paragraph, my goal is to continue growing as a developer. There again for the heading three, we will add some classes like text to Excel, phone both and margin bottom six. Let's now check where we need to fix on our page. And I think I see the issue. What we should do is that we will put there fifth block and we will increase this block with this content also. Now we will format it. Let's check the devs. This should be like this. Let's save it. The other thing we need to fix is that we will take this closing tag of this div there for the grid that is currently wrapping only the front end back end devops, the progress bar, and we'll take the closing tag of this div, cut it, and we'll actually put it after the closing tag of the div that holds these goals. So there and now we need to take one of the closing diffs on the bottom, and we actually need to put it above this div that defines this grid layout. We'll put it there. Now we will get a page like this. Let me actually show it to you in the browser I'm using for the responsiveness check. So this is how it will look like on the desktop version. And there, how would look like on the mobile version? Now we add colors to our About section. That means we will go to IDE, and there if you do sutural F and find there a gray color, you can replace this for probably purple color because to the colors I made in hero section, we will need to align them. That means we need to replace these gray colors for a purple one. If you don't want to use the replace tool to all gray colors, you can just check them manually, see if you may be added some gray color somewhere that you don't want to replace. Otherwise, just replace these gray colors with a purple one. This now there is no gray color left, if you will save it and check the page, it will look like this. We can also check its responsiveness again with the colors. Let's check it for mobile. One more fix that we will do to our About section is deleting this as there from GAPD because it was a typo. Now with Gabbid it will work, and it will make the spacing between the blocks in the first row. And that will be for the A section. Now we can move to the next one, that will be the logo animation. 5. Logo Animation: Will create the logo animation component in components, and then you will import it to the page T six there on the homepage. And now we can move to coding the logo animation component. For logo animation, we will first declare use client to this component because we will have their dynamic UI updates for the infinite logo animation. We will continue with imports. In imports, we will be importing image from next image, then motion from frame or motion and below the images from the assets. In case you don't have yet the library of frame or motion, you will open the terminal and do NPMiFramr motion. Then it will work. We will continue with an array creation that will be called images. And inside, we will have source and source of the imported image we have there, which will be just the name of the logo. I had figma before. Now I have the uremi so this can be fixed. Inside logo animation, we will start with a div and to this div, we will add vertical padding to eight, some background that we can change later or update to our design. We will also set there opacity to 0.8, which means we don't necessarily need to do the 0.1 opacity to our color there. We will continue with another div and this div will have a class of container and mix auto to have it centered. Then inside, there will be another one and that will have a classes of overflow hidden and also another class that will create the effect that our logo animation is fading away from the left and appearing on the screen again on the right with the setting of a transparent. You will see the effect right after we will add the items itself. Inside this div, we will add a motion div for the animation. We will set there some tail wendth classes for flexbox layout, gap to 14, flex to none, and bedding to right to 14. We will add the animate to translate X -50% to set the animation properties, this means that this animation property will move the content horizontally and -50% means it will move left by half of its width, and this will create a continuous scrolling effect when combined with the infinite repeat in the transition property that we have there right below. There we also set the duration to 35. Now, as mentioned, repeat to infinity is linear and repeat type loop. Maybe you are also asking why we have so much items and duplicate items in our array of images. It's because we need to have our logos, take the specific width. If there will be only four items, we are not able to make this loop infinite because it will just be four items going around and it will look that there are just some items missing. That's why we can just duplicate these items, let's say, two times, and it will create this infinite loop animation. If you have this many logos that you want to input into this logo animation, you then don't need to duplicate it. Inside, we will do the mapping over the images array where image is the current item of the array and index is its position. Then we will add the image tag, and we will set the key as index, source as image dot source, old asimaged we have in our array. And also height to dirty. We will save it and we will see that the component now works. There you can also see the transparent from left and right and how it makes the animation look like fading to the left side and appearing slowly from the right side. To check this responsivity, basically, there is nothing much to check. On the smaller screen, it will be just showing fewer logos at the same time. Now as we have it, what we will actually do is that we will take this logo animation component and we will put it between hero section and about section. Now let's open the component, and we will put there margin Y 224. That means we will create some additional vertical spacing around our logo animation. Also, what we can do there is that we can increase this purple color to, let's say, 300 and now we can check the page. And we will have their logo animation like this. If you want to make this a bit different, you can add the skew Y three, for example, save it, and then it will make the logo animation look like this. If you want to make it on another side, let's put the dash, save it, and it will change. So my option would be without skew, and then we can continue to another section, and that will be a portfolio. 6. Portfolio: We will do is that we will create a portfolio component and we will put it to our homepage below the about component. We will first enable client side features with use client. Then we will make import of react and use State Hook with use effect hook then we will import image from next image. We will import project images from Assets folder that we will be displaying. I will create const projects, and there for each project, I will create an ID. I will create here. I will create a title. I will create some short description, and I will also put the image. Now below, I will add more projects, and it will look like this. I will be using three projects in the portfolio component. I will initialize state for the selected projects with the folding to first project. So there we'll do projects and first in the array with zero. This will be the state variable, and with this, we will be setting it. Now we can go directly into return. There we will start with the section. Inside this one, we can do ID of portfolio. In a class name, we will do PY 32 and text to white. Inside this section, we will start with heading two. With heading two will hold the heading of selected projects. We can put the projects in Spen tech in case we would like to add to it a different color. Also for the styling of Heading two, we will at text six Excel, font bolt, and margin bottom to ten. Below this heading two, we will do mapping through the project array to create the project items. I will do projects dot Map. Name of the item in the iteration will be project. There we can open our dig in this div, we will set a key as project dot ID. We will set onclick function. And onclick function will be the setting of the state variable. There we will do set selected project. To project. Now we will do tail end classes. That will be cursor pointer, margin to bottom, and group. We will continue with displaying project here. We will do the paragraph tech with project dot here. Now we will add some styling to it and that will be different text color. Also text large and margin to bottom and below we can continue with heading three. This heading three will hold project dot title. The styling we will add there will be text free Excel, font semi bolt, group, our text gray 400, transition colors, duration, 300, and we will do that one more thing. Let's put there back quotes with the curly braces. Because inside, we will check if this project is the selected one, and in case, yes, we will display the different text color. Let's do selected project dot ID equals to project ID check, Turner operator, and in case, yes, we will do the text gray 200 in case no, we will do nothing. So the false position will be empty. We will be using transition colors because it will enable the smooth transition specifically for the color related properties. So as we are using this group however it will be handy. Now we can already see on our page that we are getting somewhere, and we will now continue with showing the divider line in case the project is selected. I will do their condition. So that project dot ID equals project ID, basically the same as we used there, but we don't need to use a turn operator. We will do that just conditional rendering. So in case this will be true, we will display empty DIV. And to this div, we will add border bottom two class with border gray 200 and also MI, vertical margin to four. Now you can see on our page that we have selected the first project is there. If I will set the second or third, it will be moving. Another conditional rendering we will do, so we can just copy paste this will be on the project description. In case the project will be selected, we will show the project description. I will just open this div, put there project dot description, and I will change this div tag to a paragraph tag. Also, I will add a bit different classes. I don't need the border. I will add text gray, 400, transition all duration, 500 and easing out to have the smoothly displayed. Now we will scroll on the top of this return, and there in the section, we will create a div and we will wrap this div around this mapping. Now for this div, we will add some classes. Let's start with maximum width to seven Excel, then mix Audio, px four, that should be it for now. We will move down and below this div. We will put an image tag there inside this image tag. We will set source to selected project dot image dot SRS. For all, we will do selected project dot title. For class name, we'll round it, Excel, shadow large, transition opacity, duration 500 and this in out for making a smooth animation. Also, we will set the width to 800 height to 450. We will save it. Now it should be fine. Now we need to play a bit with the diffs there. Let me add the additional div to wrap this project information we created there. Now into the second div we have there. We will add classes of grid layout, and on large screen, we will use grid calls two with Gap 212. Now, it should take this div and of course, the closing of the second div we will put below. Now on the page, it will be fine. Now also we will format the code. You will see the div structure better. This should go one top further. This should go also one top further, we will move this, and that should be fine. So we are starting there with the section tech continuing with DIV. Inside this div, we are having a div that is holding the project information and also the image with the project itself. And now we will also change it to a different color or to color of your choice. So let's put out a purple. Then let's go to another gray color where we want to change it. It will be this for me. Now let's see how this will look like, and I definitely don't want to change 1 gray color there, and that will be the one with description. So let me check which one it is, and it's this one, this one should stay gray. Then we can check the page. 7. Key Metrics: Now we will move to creation of key matrix component. That means create it there, then import it into HT six as for every component, and let's go to coding. We will start with declaring use client to indicate that this component will use lien site features. Then we will import react and motion and use and view from Framer motion library. And we will define an array of metric objects, each containing information about a specific metric. And inside, we will start with the first item that will have ID, value, label, and description. Now, I will add some additional metric items. You can take inspiration. I'm having there five plus years of experience, 50 plus projects completed, then code quality and comments on Github. In key metrics component, we will start with creating a R that we'll use in use in view Hook. We will create a rev using the reactive rev hook that will be attached to the section element. The ref is typed as HTM element, since it will be used on section tag. Initial value is null since the ref hasn't been attached to any element yet and this ref will be used with the using VewHok to detect when the section enters the viewport. Then we will use the us in view hook to determine if the component is in the viewport. We will use the ref and ones to falls. The ref is the reference to the element we want to observe and once false means that we will set that the hook will continuously track the elements visibility. In return, we will create a motion section. We will set there ref ref, initial state will be invisible and 50 pixels below. Animate will use a ten operator and it will check in case it in view is true. I will set the visibility or opacity to one and the final state. And in case it's false, it will set this to invisible, opacity zero, and again, 50 pixels below. The animation duration will be 0.8 seconds, and the classes are container and mix to to center the container because the container has some width, then some bedding setting and text to white. We will add motion H two to use it for heading of key metrics. The initial state will be opacity zero and Y 220. Animate will again use the turno operator on true position visible on force position invisible, transition with a delay of 0.2 seconds and duration of 0.6 seconds. And for class names, we will set text size to text, six, Excel, font to bold, and margin to bottom 12. We will continue with another depth that will use a grid layout. We will set the grid columns for the medium and large screen. And also we will set there a gap of eight. So we have some gap between the elements. Inside, we will start with the mapping over the matrix array. Metric will be the name of the item and index the position. We will create the motion disk and the key will be the metric dot ID. We will set the initial state, and also, again, we will set the animate where we will use the turn operator, same as before, because we would like to trigger this animation again and again every time we will have this in viewport. Transition to have all the metrics displayed at a different time, we will add also a new value of index, and we will multiply it. This means that each index will have a higher value, and by that, it will create the wave effect where the first index will be displayed faster than the last one. And also, it will use flexbox layout with flex direction volume to have the elements below each other. Then we will create heading three. In this heading three, we will display the metric dot value. We will set the initial animate and transition exactly the same as I displayed in the Div above. And the class names, we will set there for our metric value to text five Excel, font bolt, and some color. We also set the margin bottom two. Below this heading, we will continue with motion B for the paragraph tech. We will set the metric dot label. Again, we will set initial animate and transition, and class names will be text Excel, font semi volte, and margin bottom two. Then we will do another motion dot B for paragraph tag that will hold the metric dot description. We can just copy paste it and change the tailwind classes for text gray 400 and that will be for our key metrics. And for the colors, it will be simple. Again, we will just change this for a purple one, save it, and we can also change the heading for a purple one. Actually, this one should stay gray as it's a text. This one should be purple. And for the key matrix, there we can leave it as white. So there is not purple color everywhere on our page. 8. Stack: Now moving to stack component, we will again create SC DTS six in components and import it in our page DTS six there, and we will put it below the portfolio section. For the stack component, we will do these imports. In case you don't have these libraries yet, open a terminal, do NPM, I, and copy there these libraries. For example, this react intersection observer. That we will use for the animation to reappear to get this using view when we will be scrolling up and down, this animation of stack will be reappearing. Then framer motion. Again, if you don't have this yet, just NPM, I and put it there, react icons. Also we can put there. That means we will have access to these libraries with the icons we will use for our stack. Now if we tenter and we'll install the libraries, I already have them, but I just can do it again. Now before defining the stack component, we will create there an array of stack items. With C stack items. And there for each item, we will have ID, then name. First one will be framer, then icon, first icon will be the framer one with size to 100. Then on color, I can sit there for now text green 200, and then we can put the comma and paste it there as many times as we want. I will update the names and icons, and I also selected some different icons for the other four icons because there was some place holder icons. Now we will use Framer Figma, react note, Mongo Di B, and Docker. Then we will move below, and there we will start defining animation variants for the stack items. I will start Cs variance or item variance, and there I will put variant for hidden which will take index number, and there it will have opacity to zero and for X, we will take the remainder of index, and if it's zero, then it will be -100 on true position and on false position, it will be 100. This is something called Turner operator. By this, we will do that the stack items will go from left and from right side depending if this is true or false. Then below, we will have another one that will be quote visible. And for this one, we will set opacity to one, X to zero and transition to duration three. I started with the wrong bracket I need to do Carl one there. Let's change it for the square one, and below, we can start defining the stack component itself. Inside, we will start with setting up the animation controls. I will constant controls, and I will use animation. Then we will set up the intersection observer. That means we will now set the thing, we import it there. And with this, this animation will reappear when we will be getting this component back to our viewport. There I will do a constant, and I will use the ref and in view for use in view. Inside, I will do threshold 2.1. Then I will continue with setting the use effect hook to trigger the animation based on the view state. I will do use effect then inside, I will do I condition, and if this will be in view, then we will do controls that start with visible. And if it won't be in view, I will do controls that start hidden. Which are these two item variants there? And then we will say there that this effect will run whenever the controls are in view dependencies will change. That means it will trigger the animation to start when the components will come into view, and it will also rest the animation when it will get out of the view. There, we will do a section tag and inside this section tag, we will start with Div and let me explain why I'm doing the additional Div and not doing it in the section. For this div, I want to set maximum weight. For now, we'll do something like 250 pixel because we just want this to be vertical, not horizontal, but we can also add just this later and just change it to horizontal and set this to mix Ado with text to center. So we have this center. For the section. If I want to put some special background for the section, maybe some linear gradient, I could do it there, and it will be a full width. For example, background to white. We need to put there some content. And let me put there some content and let me put their background to green. Now you will see the differences. If I will go to our page, you can see that the background white in this wrapping section tag is taking the full width and the content that I want to use with this background green is inside, and it has this maximum weight that I set to 250 pixels and centered it. If I would like to do it there in the wrapping section, it will take the wall section and the actual background that I would like will be looking like this. Let me then use it like this. For now, let's get rid of the backgrounds. There I can start with heading two. Inside the heading two, I will put my stack. Below, I will do a div. And in this div, I will be iterating over the stack items. Inside this stack items iteration, I will do a motion div. And before we start doing this div, I will just style the heading and the div that is wrapping this. For my stack, I will use text seven, Excel, text gray, 200, font bolt, and some margin to bottom. For this div, I will just use grid layout and gap to eight default lay. There will be just grid coms one. That means all these motion diffs will be below each other, and it will be in one column. Let's see how this will look like. Let's just put to motion div the index dot ID. For the key value, then for custom, we will put index. Then initially, this will be hidden. And of course, not index ID, but item dot ID. Then we will continue with animate two controls, then variants to item variants And for class name, we will set background white too 0.1 opacity. We will continue with flexbox layout and center this with justify center and items to center horizontally and vertically. Then flex raw, that means elements inside the stiff will be next to each other. Then we will use rounded Excel, shadow large, some bedding. And on Her, we can just do shadow to Excel. Now inside this motion dip, we will create a div for the icon. There we will do m dot icon. We can add some class to it, and inside, I will do their margin bottom and dollar sign, m dot color. That means it will set there this class name of item dot color, and we have set there text green 200. Then we have the icon itself, and below, we will do the text where we will display m dot name. There I will do text white with 0.2 opacity, text three Excel, transform and rotate by 90 degrees. Now for the dive that is wrapping this iteration, I will put the ref to rev What this means is that this helps our animation to know when this container is visible on the screen. We can see the animation, how it goes. There is just one thing I need to fix. We are missing t to our rotate -90 degrees and I will refresh it. You can see how the animation works. The only thing we will change for colors there in our stack is that we will change the color of the icons there in this array stack items. I will put their purple for each of the icon. Then I will save it. And on the page, it will look like this. And if you want to repeat the animation, we will just go away from the section. We'll go back and we can see the animation smoothly transitioning into its final state. 9. Services: Let's now create another component and that will be services.t6. We will again edit to our page.t6, and we will jump into the coding. For services component, we will do inside the component an array of service objects containing the information about each service that we would like to offer. Each object will have an ID, title and description property. Let's do their constant services. And inside, we can do the first item where we will set the ID, then title, and also description. Now I will add more services, and in the end, the array will look something like this. In the return, instead of the empty fragments there, we will do a section tag, and inside the section, we will be adding other elements. For the section itself, we will the class name of text white and PY 20. To have there some vertical bedding, then we will add a div, and we will add to it tailwind classes with container, and mix Auto to centrate and flexbox layout to use flex direction Colume to have our items below each other. On medium screen and above, we will set flex direction row. That means the items will be next to each other. Then we will add two divs. One will be with services heading and the second one with the items from our array. The first day will have a tail end classes of medium screen above using one quarter of width, padding right will be set to eight, margin to bottom will be set to 12 and on medium screen, we'll reset this margin to bottom to zero. Inside, we will do the heading two with services and we will set there text, six exxcelFont extra bolt, sticky position, and top 20, which is the position where you would like to stick this. What do sticky position means? It means that whenever we scroll, the services heading will scroll with us. We will add another div, and we will sit there for medium screen above width to 75%. Inside, we will start mapping over the services array. There the item will be service. We don't need to use index because we will be using service ID as a key. And for class name, we will use margin bottom to 16 and flexbox layout to use items start because we would like to align our items there. Then we will add two more difs. One will be for holding the number, which will be the ID, and second one for holding the other two fields, title and description. For the first dif, we will use text grade 200 color font bolt, text five Excel, and margin right to six. For the second div, we don't need to do anything. In the first div, we'll also add service dot ID. Now if we will save it, you can see we have their numbers for all of our services. What left is that in second Div we will add the two other fields, and then the section will look like this. For heading three, we set the service dot title, and for paragraph tech, we set their service dot description. For the heading, we also add this text to Excel, from the bolt and margin bottom two. And what we should also do is that we will take this array and we will put it outside of the component definition because we want to avoid recreation on each render. Now, this is how these services will look like on other devices, and that will be it for this component. Let's play with the colors. So for the description, we will leave a gray color. For the ID, we will put a purple color and that will be it, and we are getting to the end of this portfolio, and that will be a contact section with the footer. 10. Contact: Let's now create contact and footer also. Then let's add it to the page. And now we can continue with coding it. We'll start with declaring this component as use client for the interactive hover effects, port triggered animation or frame motion animations. We also import motion from framer motion. If you don't have this library yet, open a terminal, do NPM I frame motion, had enter, and that we install it. Right to the component there we will start with a section. And to this section, we will add ID of contact, and for classes, we will add vertical padding to 32 text to white, and we will make this maximum width of 1,200 pixels with a mixdo to make this centered. We will also add vertical padding there to four. We will start with the first motion dip. This motion dip will start invisible and 20 pixels below final position. While this will be in view, it will animate to fully visible and final position. Animation will take 0.8 seconds, so we will set the duration to 0.8 to transition. This will animate only once when scrolling into the view. That means we will set the viewport once true. For class name, we will set a grid layout, and on large screen, we will use grid columns two and also we will set that gap to 16. In this motion dip, we will create another div and for elements inside, we will use space 12. That means we will have some spacing between them. We will create a motion H two, where we will set the animations. We will start with the initial. This will start invisible and 20 pixels left of the final position. While this will be in view, we will make it visible, and also for the transition, we will set the animation to take 0.6 seconds with 0.2 seconds delay. For the classes, we will set text size to seven Excel, font to both, and text gray to 300. Inside, we will input there heading of get in touch and the touch word we will put into the Spentex for the touch word and the span tag, we will add a different text color. I will now put the text gray 500. We will continue to another motion div. This motion div will start with opacity zero. That means it will start invisible and 20 pixels left of the final position. While this will be in view, we will make it visible with setting opacity to one and for the transition, this will again take 0.6 seconds with 0.4 delay. For the tail end classes, we will use bedding eight, round it to Excel, and space Y eight. That means we will again make some space between the elements we will have there in this motion diff. And what we will have there, we will basically have the contact information, and the first one will be about the mobile phone number. We will have their paragraph tech of phone and Anchor tech of the number itself. For the div, we will again use space y two to have their spacing between the paragraph tech and Anchor tech. We will set text size and text color for the paragraph tech, and then for Anchor tech, we will set HF to the actual number for the classes. We will add text to Excel, phone semi bot, some different color on hovering, and transition duration with 300. Also flexbox layout with items to center this and Gap 22. Then we also have there Spentec because we would like to add an arrow next to this number for the styling purpose. We can set there some color for the arrow, and that will be it. Below, we will continue with another div. In this div, we will hold email. It will be basically the same styling as we had there for the mobile, but we will change HRF to Mail too and the actual email, and that will trigger the email. When someone will click the email link, it will open, for example, on Windows Outlook for him with option to write email to us. It really has the same tail end classes as the phone, so I won't go through them again. Let's continue with the next div with the address, and there is the paragraph tag with the office and the actual address. For the address, we are also using styling of text Excel, and leading relax sets the line spacing between the text lines. Below, we will have another div starting with opacity zero and X 20 as divs before. That means invisible and on different position. While in view, this will be visible and in the final position, transition will take 0.6 seconds with 0.6 delay. And for the class names, we will set width to full height to full mean height of 400 pixels rounded to Excel and overflow hidden. Do not have any content outside of this div. This div will hold the iframe with the Google Map, where we will set the position of our address. Into this iframe source, we will put this Google Maps URL. We will set the width and height to 100% for setting the full width and height of the container. For the style, we will use border zero to remove the iframe border. And we will also allow full screen to enable the full screen mode. Loading laser means that we will lazy load the eye frame for better performance. These are just the attributes we need to define in our iframe tech. This is how our contact section will look like. We can also check the responsivity. There it is on desktop, small tablet or iPhone. There I will hit refresh to see the animation, and let's color this. So let's find the gray colors. For the Spen tech, I will put there a purple color. Then I will continue, and I will add purple color also for the paragraph text. So let's edit there. And there and there and also let's edit for the arrows that are there and there. Then it will look like this. And now let's move to footer component. 11. Footer: Footer component, we will import these icons from react icons library. Then we will define the array, the array of social links we will be displaying in our footer, and we will define this array outside of the component because defining it inside the component means it gets recreated on every render. Its static data doesn't depend on props or component state, so we can leave it there. In this footer text, we will do class names of relative because we will be using absolute positioned elements. We will do vertical padding to eight, maximum width to 1,200 pixels, center it with Mix auto and set horizontal padding to then we will create a diff. And inside this div, we will create three other divs. These three divs will be empty. The div that is wrapping these three will be of absolute position. We'll be using inset zero, and we have overflow hidden. Inset zero will set all four sides to zero. On medium screen, we will hide this because we will be showing a different, absolutestion dip that will be holding these styling or design elements for mobile screen. How are these diffs working is that they are positioned to some top and left position. Then they have some different width and height. Then they have some different color or they can have some different color. Then this first one is a circle, the second one, and the third one is just rounded. Then they can have a different opacity and the translate will move the div by 50% vertically and horizontally. We will copy paste this, and actually, this will be the desktop version, and the first one was mobile because now we are hiding this and on medium screen and above, we are displaying this as block. It has the same classes, but we are setting there different positions, different width, different height, and then we can also set different opacity and so on. Below, you will create another dip with relative class, the index to ten, and text to center with also margin from top to eight. Inside, we will create heading one tag with John Doe. As John Doe has a really short first name and last name, maybe you can put there just your surname or your first name. Really depends on you. We will set there hidden and from medium screen, we will again display this. We will set text to ten RAMs on medium, large, we will increase the text size. We will set this as found bold text to white and opacity to ten. This text shouldn't be visible as well. I know the text size is huge, but it should take the full weight and we are decreasing the opacity, so we just slightly visible. For the mobile screen, we will do it again, but I will use the break tech to have John and Doe on another line. What I could also do is to just decrease the text size. We will continue with another div that will be actually holding the socials. We will set the margin from top, flexbox layout, on smaller screen, we will set there justify between that means we will have on spacing between the elements. Otherwise, we will use Justify center and item center to center items horizontally and vertically. We will set there some gap, and then after this breakpoint, we will set flex direction coolum. That means the elements will be below each other. We will set there paragraph tech with all rights reserved, and we will set text graded 200. Then we will create an ordered list with flexbox layout, Gap 25 and flex wrap. That means if items will exceed the line, they will wrap below. Inside, we will do mapping over the social links. Our array, we created there. And there we are structuring the Hf icon and label in our array. And that means that now instead of having to write soclinks dot Hf icon or label within the function, we can directly access Hf icon and label as individual variables. We will create an anchor deck and we will set key as label HF as Hf Area label as label, and class name, we will set text gray 200, flexbox layout, items center and Justify center to center this vertically and horizontally width and height to ten, round it to full, and onHver we will do text gray 100 with transition colors. Inside, we will create icontec with set size to 30. This is how our footer will look like in the end, and we can also check the responsiveness. And now we can adjust the colors opacity for each element and modify the design to our needs. And now the footer is also a bit up to you. You can leave this with these grayish colors like we have there, or you can put there the purple colors. Then we will just paste there the purple all over the gray colors that we are using in these two design elements. 12. Navbar: Let's now start with coding the Navbar. We will need to import required dependencies. Next Jz link components for client side navigation, react and use State Hook for state management, and icons from library react icons. We can see that this react icons library shows us some error. It's because we don't have this library installed. Let's copy the name of it, open a terminal, and do NPM I and paste there the name of the library. Now we will hit Enter and it will install the library, and when we will get back to our component, it won't show error anymore. As we are using use state, which is a client site feature, we will need to define this component as use client to indicate that this component render on client site. We will continue with defining a navigation links array with title and path for each link. This will keep the navigation items organized, and also it will make it easy to add new links whenever we would like to. Now we can go directly into the Navbar component. What we need to do there is to initialize state for mobile navigation menu. This NAF will be a boolin to track if mobile menu is open or closed, and Set NAF will be a function to update the NAF state. Devotly this will be set to falls. We will then declare a function to toggle the mobile navigation and make it open or closed, and it will set the NAF to different value than it will be. So whenever the button will be clicked, the value will be changed, and we will then use it on our element for closing and opening the menu. We also create a function close NAF, and that will be used whenever the link will be clicked to make sure our navigation will close. In return, instead of empty fragments, we will start with DIF. For classes, we will use Z index 250. We will use fixed position, that means whenever we will scroll the navigation bar will go with us, Flexbox layout, so we can use justify center to center the navigation items. We will set width to full, text to white, and font to bold. Then we will create a di for desktop navigation. For desktop navigation, we'll also use a border and set it to border white with 0.2 opacity. Then we will do some margin from top and backdrop blur because as we will be scrolling on the page, we would like our nav bar to be nicely visible. Let's also make it rounded pre Excel. Add some border radios there. On mobile screen, this will be hidden and on medium screen and above, this will be displayed flex. Again, because we would like to center the items with items center and justify center horizontally and vertically. We will add some bedding to it and also we will set a maximum width to 400 pixels. If you will add more items to your Navbar, you can increase this. Then you will set a Mixto to also center this. Now if you add something there and save it, you can see our Navbar on the page. But by to add there just some letters, let's map over the items and add them there. Before we will map through them, we will create an unordered list for them. This unordered list will use Flexbook layout and flexaw. That means the items will be next to each other. We will again add some pending and SpaceX eight. That means we will have some gap between all the items horizontally. For the mapping, we will use Nablink dot Map. And we will use a link that will be the name of each item in this map and index. Inside an ordered list and this mapping, we will create the list item with key index, reactive uses this key to optimize the rendering performance, and there we are assigning the array index as a key. Inside this list item, we will add a link tag with href settling dot pv, which we have in our array there. That means after we will add IDs to our other sections, this will get us to the desired section. And then a class name where we will at transform Her text white with 0.5 opacity. That means when we will be hovering over our list items, we will see which one are we currently hovering over. Then transition all with duration set to 300 and easing out to make this animation of hovering smoother. Also, now you can see on our page that we have the layout with the navigation, but there are no items. What we need to do is to access link dot title we have in our array. Let's do link the title, save it, and we can now see our Navbar is on the page. We can move below and code the mobile version of this NAF bar. We will create a div there and we will add to this DIF onclick function. This OnClick function we will add there is Toggle NAF, and that means whenever this div will be clicked, it will execute this Toggle Nav function. We have there. And in this toga function, you can see that it will change the NAF variable. That means whenever we will be clicking on this div, the NAF state will be changed to true or to false. Now we will use something called ternary operator. We will check the value of our NAF and in case it will be true, it will execute this outline closed icon, and in case it will be false, which default lays, we'll be seeing menu icon on our mobile. Let's now save it. And I will also change the page layout to a mobile version. You can now see our menu icon. And if I will click it, you can see how it's being changed to cross and back to Hamburger menu. We will add a new DIV, and to this div, we will add a class name, and inside this dollar sign with the color braces, we'll be using another Turner operator. In case our Np variable will be true, we will set translate X zero, and in case it will be false, we will set negative translate X full. This means we will be moving our menu items outside and back on the screen. Other classes that we will add there is a fixed position to left and top zero. We will set width to full and height to full. Background black with 0.9 opacity, transform and transition transform and duration 300 for the animation itself. We will save it now and we can test it. You can see how it's moving. Of course, we are still missing the items, but we will add them now. We can leave this navigation open and inside, we can start adding the items. Similar as before, we need to create an unordered list and we will add the flexbox layout with flex direction ColumO list items are below each other. We will center them vertically and horizontally, and we will use space y eight. That means we will make some space vertically between them. We also set there height two full. As before, you can basically just copy paste this. We will add this mapping over Nablnks array with Link being the name of the current item and index being the position, then this index we will use in key. After we will create the link tag, we will set there Hf toolink dot path and Link Dot title for the name of the navigation item. Now we will save it and we can see it on our page. We also edit their on click function for closing the navigation. Let's click, for example, on the portfolio. With this, we can wrap the Navbar component. 13. Testing And Fixing: Now it's time to test our website. So let's check the Navbar, and portfolio and stack are not working. How we will fix it is that we will go to code, open portfolio and open stack. You can go to page dotix, hold Satorlo and click there on the chosen element. I will click on portfolio with holding Sadolo. It will open this one. And there I can easily add ID to portfolio. And for Stack, I can easily add instead of this class name, ID of stack. Now, it should be working. But of course, it would be super nice if we had a smooth scroll animation. So let's now easily edit. We will go to our globals dot CSS file, and there in HDML we will set scroll behavior to smooth. And also we will set there in case user has prefers reduced motion set, scroll behavior or to auto to turn this off because maybe someone doesn't want this smooth scroll behavior and has this reduced motion. So we will also consider it with this. Then let's go to our page and let's write. So let's get to a section. Let's get to portfolio section, stack section, and contact section. You can see all the animations. So let's go now through the wall portfolio. And also, now we will check the responsiveness for mobile screen. And let's write the mobile navigation bar. And I see that is something to fix. So let's go and fix it. Let's set index for the menu. Let's do that index to 40. Be careful. For the icon, we have index to 50, so it cannot be the same or even higher. Now it will work. And it will also do the navigation if you click on all the items. But what we want to add there is the closed navigation whenever we will click on some menu item. Let's it there. That means for this link, we will also add on click, and then we'll add close NAF, which is a function we already have there, Close NAF. In case it's clicked, we will set NAF to falls. Let's now test it. I will open there the navigation. I will click on About and it's working. We are getting redirected and also the navigation is getting closed. There's some additional thing I would do, and that would be setting this button from absolute position to a fixed position. That means as we will be scrolling, the button will go with us. Now for the Navbar, if you will click any of the items, the navigation will get closed and will direct us to the selected list item. 14. Project 2: Intro: We will build and deploy developer portfolio with Next JS or fast and SEO friendly website that will enjoy optimal performance and also having our website prepared in case we would like to add some beacon features in the future. Frame or motion for creating highly customizable animations that will give our website a professional and dynamic feel. After you will finish this project, you will be able to easily adjust these animations to make them exactly as you are imagining. Tailing CSS will help us keep things simple, powerful in terms of styling. Who wants to write tons of custom CSS? Well, it won't be us. We will build this project from scratch, and by the end, we will deploy it so you can access your page from anywhere. But this tutorial isn't just about creating a website. It's about learning the process, gaining new skills, practicing, and building the skill set. You will need to create page like this on your own. And all of this just for I'm kidding. Everything is free. And also, if you get stuck, you can ask in the commands. Let's do a quick project overview. You have already seen the hero section with the clouds, and now you'll check out the portfolio section. We will be displaying some of our projects, and as the user scrolls down the page, they will create a sticking card effect. You will be surprised how easy it is to achieve this. Basically, it's just one tail end class, making it happen. With framer, we can set opacity and control how the project card slowly fades onto the screen. Now you can see the mastec section, but take a look at enough bar, which is in a fixed position and moves with the user the entire time. It has a backdoor bler and is, of course, responsive with a Hamburger icon for mobile screens. Going back to the Mastec section, you will notice the stacks animate from left and right. This isn't a one time animation. Whenever you scroll back to this section, the animation starts again. So you could scroll up and down all day, and it will keep triggering. The services section uses another simple trick with a tailwind class. It's just there to provide additional information about the services we offer, and it's a quick section to code. The contact section offers user options to contact us via email, phone, or even a physical address if you decide to include it. If not, you can just delete it. We will also add working contact form when the user fills in their email, subject, and message, and it's sent an email will be sent to us to our Gt form IO. I will help you set that up and it will take just a few minutes, then we will easily collect messages. Finally, there's a footer. Instead of just boring links and icons, I edit a design element with our name. Your surname is probably longer than Dog. So instead of using both first and last names, you could just use the surname or shrink the size if needed. What I like about this footer is the three absolute position elements, where we will set the color of our portfolio, which will surprisingly be blue. But if you make a portfolio in the future with the main color like green, you can switch it to an emerald or green shade and adjust the styling of these absolute elements so the color design of your portfolio flows nicely from top to bottom. With all that said, it's finally time to get started. And now let's dive right into it. 15. Project 2: Hero: In our IDE, let's start with opening terminal and pasting there this command for creating a next application. If we are already in desired folder, we can change this Mi project to a dot, and that will create this next application into the folder we are currently in. Now I will set their tailwind, no to source directory, yes to a router, no to this Aas and now it will run, I will install the application, and that will be basically it. What we will do next is that we will go into this app folder, and there we will create a new one and that will be called components. Then we will create the new folder UI for now, I will start adding the actual components. I will start with hero section. We will create circles, and also we will create their clouds. These circles will be a design element in our hero section, and these clouds will be also a design element in our hero section. Let's start with the circles because that will be easier. There we will start with export const rings for having an export of rings and for us being able to use it on our hero section. Let's finish this. Let's return the empty fragments. And inside these empty fragments, we will have multiple dips and it will create the circles around our hero section area. We'll start with position absolute, opacity to 30, top to one half, left to one half, with something like 60 rams. Then border round it, full and also translate X to one half, translate Y to one half. Let me show you what I did there. I did this translate X and translate Y to one half. Then what I will do is that I will copy this line and I will paste it there. In the end, we will have there six of these dips and we will be just changing the width. For the first one, I will have 60 ram, for the second one, I will have 50, for the third one, I will have 30. Five, let's say for next one, I will have 20, 70 and for the last one, I will have 80. Now I will save it, and in case this one fit our design, we will come back there later and fix the width or positions. Now if we will go into Clouds Dsix, there we need to have the assets with the cloud images. This folder, you can get from the starter files and you will get also these Cloudimages I have there. Just visit the Gita blink you have in the description and you can take it and load it there into your app folder. For these clouds Dasix we will first import. React with use effect, use state, and also ref object from react, then we will continue with importing the mouse parallax. From library called React Just Parallax that we need to install. Let's first import the circles from circles and also the cloud images. Cloud one, and now we need to go to assets and there we will select Cloud one dot PNG. Now we can copy this and we have the five clouds. Let's do it like this, second, third, fourth, and fifth. And for the react just parallax, we need to install this. Let's open the terminal, do NPM, I react just parallax. It will install the library. We can close the terminal. Now we will have it working, and we can continue in this clouds component. What we will do first there is that we will define interface. Background clouds props, and we will do the parallax rep there with v object to HTML div element. By this, we just created the reference for the parallax container. Next, we will define this component, export const Clouds, react dot FC. Background clouds props. There we will set the parallax rev and there we will return this function so far with empty fragments. Inside, what we will do is that we will define state to track if the component has mounted. We'll start with mounted there with set mounted, and the default value will be false. Then we will use use effect hook to set mounted to drew after the initial render. I will start with use effect. And set mount it two through after the initial render. Now there instead of the empty fragments, we will start with DIP and this will be the main container for these clouds on our background. I will put their absolute position top two. Let's use -45% left two, 50% width two. Let's use 78 RAM, and translate X to one half. Now I will put the circles. Now for the circles, I put their bronc naming, not rings, but circles. Now that should be fine. If I will put it like this into curly brackets, for now, let's do their export Cs to o with return of empty fragments and inside, we will do cloud Okay. For the clouds, we need to input parallax ref to parallax ref, and we need to define this parallax ref. We will define it there on the top constant parallax ref to use Rf. Now, I hope it will also import this URf. I have a typo there exactly use ref. If we are edit, we can do a few more imports for the hero section. Let's indicate that this is a client component and it will render on the client side. Also, let's import image from next image. Let's import profile picture from the assets. Let's import the type animation from react type animation library that we will need to install and there also react. Now let's take this library. Let's open a terminal, NPM and paste it. That will install the react type animation library that we will use on our hero section. Let's check our page that we can open again in terminal, and we will do NPM run death. Now as we open this page, we need to go into page dot TSX. There we need to delete everything we have there as a placeholder, and we can start by putting hero section there. It got imported. Also, we have it there. Now, it will go onto our local host, there will be nothing because we still don't have any content there yet. Let's go to Clouds component, and there below the circles, we will start with also putting there the mouse parallax. There we'll put the strength, 2.1, then the Parallax container reference to PerlxRf we can close the tech, and this tech will be wrapping the clouds. Inside, we can start with the first cloud, actually. For the first cloud, we will inside to define also the image. For the image, there will be the source of Cloud one source all can be Cloud one and the class can be width to 64. And in case this is mounted, will you turn an operator the true position will be translate Y zero with opacity to 100. And in case of false position, we will do translate Y, ten with opacity to zero. The position of this cloud we will define in this dip that wraps this image. There we will do absolute position with bottom to 17%. Right to 50% origin to bottom, transition to transform, duration 500 and ease out. Now with having this, we can just take this and copy it for cloud two, three, four and five. We will just change the source. I will change it there to two, three, four and five. Save it. Now I will also change the positions. Let's do 55 for the second one, write two, and, and this is something we will be maybe changing later in case it won't fit the design. This one to 35 and write to minus eight, and then this one to 45. Now instead of right, we will do the left to -5%. And for the last one, the value will be 45% with right to 7%. Now we will save it and we can come back later there into this Clouds component and update the positions, OPCD width height of the clouds and so on. To display this, we actually need to add into clouds component, there into the main Div, also aspect square, and we will now see the clouds like this. Also, it's moving. Now we need to fix these lines we have there and what only these lines can be. Of course, it is our circles component, and what we need to do is to also add this aspect square there. Let's copy it. Let's put it there. We can hold out, select all the lines, put it there, save it. With this, it will work and the code will look like this. We'll start with the main div. Instead of these empl fragments, we will create it there. We'll put inside the clouds component. And we can start with the classes. First, we will put their overflow X clip. That means horizontally, it won't be overflowing our hero section. Or if the image will get out of our viewport, it won't create the empty space on the left or the right side of our page. It's important because if we will have it there, users would be able to scroll into the empty space on the right or on the left to explain it really, really simply. Now the next thing what we will do is that we will set a minimum height to screen. That means the section won't take less than the viewport height of our screen. And we can continue with bedding from top to 12. That means the content will move a bit down. Let's continue with setting the flexbox layout and doing items center and the Justify center, which mean we are centering items vertically and horizontally. I will put there a linear gradient background, and you can also use this color, or you can go to Figma or to any other online site where you can create gradients and play with colors, find something you like. For example, for the sky color, I will be using this one you can see there. Also, instead of 180, if we will put there 90, you can see what is happening. So 360 basically means we will just rotate it, and I won't be putting any ID to this div there because for this section, we won't have any navigation bar that would put us back on the hero section. We'll do it later for the other sections, but for this one, we don't need it. Let's continue with next Div. We will be doing this div because we would like to make this container. Next to container, I will also now center it with MMC Auto, and I will put there relative because we will have there some absolute elements. And I will also put the reference to parallax Rf. Which is the rep for parallax effect we set there. In this dif, let's start with the image for the image. We have it imported there from next image, and let's do also the closing of the stack. And inside, we will start. The source will be the profile picture. This is this import. Then we will continue with setting their d. If the image won't be loadable, I will put their profile picture. Also, you will continue with a class name. We will set the mix auto, so it's centered, and width I will set there 250 works fine. We can update it later if we need to adjust it. Next thing we will continue it is actually the adding one, and there we will put Let's create. Also, I can style it. Let's put the margin to bottom because below we will have the animation text. So let's have there some space between. What we could also do is that we could put there space, Y and some value, for example, six. Actually, maybe I will do it. We don't need them to do this margin in the bottom because this will make sure that we have spacing between all these elements image, heading one and the type animation, I will do right there, type animation. Let's do the closing tech. Of course, we need to set there the values. For the heading, I will now continue. I will put their text Blue 200 font Extra Bolt and text seven Excel. Of course, it's through error now, but it's because we don't have defined needed values for this type animation. We need to put their sequence. For the sequence, we need to put the actual values, we want this type animation to write for us. I will put their experience. I will put their websites and designs. What this will create is that it will be just writing this text. Now I can put their class name. I will put there also text Seven Excel and text white. And now you can see how it looks. Let's create designs, websites, experience, put there anything you like. I will do it like this because in last portfolios, we put there instead of these words, something like I work as a full stock developer, consultant, things like this. And maybe this can be also more interesting, more original there. We will set inline block, and we will continue with the wrapper. And what will be this wrapper of this type animation is also Heading one. Let's put it there. Then we will continue with cursor. True, we repeat to infinity. That means this will run infinite loop. I would like to take also Fontextrablt, below this, I will put a paragraph tech, and I will put there some really basic information about me. My name is John Doe. I'm a Costac developer with Then we'll style it. Let's style it with and actually let me move it like this. So you can see the code. I will style it with text Let's try blue 200 and see how this will look like. Text to Excel from semibt maximum weight. Let's use 500 pixels. I want to be this on two lines, not on one long line. Now what I will do is that there to this wrapping dish I will put a flexbox layout items center and Justify center. And flex direction column. That means we will have it like this. Now let me refresh the page. And I will also put the text to center. Now it is even better, we can go there and take these clouds and put it into this div above. Now the animation is working. Now we have this animation inside this div, and what we will change is that we will take this relative class from there and we will put it to the main div or to the wrapping div. Now we will have the clouds like this. And what we will do if we want to adjust the position of the clouds is that we will just go into our folder. There we will go to clouds. Then we play with the bottom position or right position or left position. We have all our clouds there. What is just needed is to adjust the positions. Let me now play with the values. I also increased for some clouds to wait 64-72. I change the positions. If you want to use my positions, I will now go through this class and you can check them. Yeah, so just play with it, set the bottom or left and right to different position. Also, use a minus value, for example, there, and you can also get to some different positions then. What we will do next is to continue it in other sections because for now, I think the hero section is done. The animation works. It's moving like this. Only thing what we could refine there is just the cloud size, cloud position, and so on. But I think as we now know how to do it, it's easy to adjust as we like it. 16. Project 2: Navbar: We will continue with the navigation bar. First, what we will do there is to indicate that this component will be rendered on the client site. Then we will continue with imports. We will start with importing link from next link, then we will continue with importing react with us state that we will use for state management. Also, we will import two icons AI Outline menu and AI Outline closes. From react icons AI, and then we will also import motion from frame or motion for the animations that we will use. What we need to do is to open the terminal, and there we can paste this. We will do NPM, I react icons and frame or motion. We will tener, and then we'll install these two libraries, and we can continue. What we will do there is to first define the array of our navigation links, and then we will use them in our navigation. So let's do a constant of Nav links. And there we will start with title. For the first one, it will be some about section and path. For the about, it will be hashtag about. Then we can copy this as many times as we need. So I will use it for about portfolio. Also for stack and contact, maybe also some experience, but we will see what we will need as we will be developing our portfolio. For now, I will work with these four menu items. Then I can go inside the nav bar function, and there I will start with setting the state to manage the visibility of the mobile navigation menu. I will start with constant NAF Set NA and use state default false. That means default state of our navigation will be false. Then we will create the toggle knife function. And this tog env function will be toggling the NAF state. There I will call the set NAF, and I will change the value of the NAF. Next function will be close the mobile navigation. We will call it close NaF. And we will set enough to false. This will be called whenever you will be closing the navigation. Then we will create the animation variants for the mobile menu. Let's start with const menu variants. On open menu will be at normal position. We will set there x to zero and transition stiffness to 20 and damping to 15. When it will be closed, we will set position -100%. That means it will be moved off screen, and for the transition, we will add stiffness to 20 and damping 215. And stiffness is controlling there. The bounciness lower value mean less bounciness. And damping sets how quickly the animation settles. With these settings, we will create a smooth animation for our mobile menu. Now we can go straight to return. I will create a div there. And inside these diffs, we will have desktop navigation, mobile navigation, and the tagle that will be opening and causing the mobile navigation when a user will be on mobile. Let's start with giving our navigation index 250. Then we will make it fixed and we'll make it left 40%. Then we will set text white to our navigation and font boat. Let's start with the desktop navigation. There we will create a div and inside the DIF we will input class names. For our navigation, as we don't have any content yet, let's start with the content so we can style it better than in unordered list, we will iterate over the Nav links. So Nablinks map, ink index. And there each of them will be in list item. In list item will be paragraph tech, and insight will be the link dot title. Now, if I will save it, I can see on the page that the links are there. Let's now style the unordered list and also the DIF. For the dif, we will create the border, and we will put the border color of white with 0.2 opacity. We'll do it with this 20. Then we will do some margin from top. We will do some backdrop blur. That means when we will be scrolling with this position fixed Naug bar, we will still see a background, but it will be blurred. That means our enough items will be nicely readable. Let's save it. Let's make this rounded Tree Excel. Actually, backdrop Blur, let's make Tree Excel. Then on mobile screen, this will be hidden and on medium, we will make it display flex. We will make it items to center, so we center items vertically and also horizontally. We will add some peding. We also put there a mix width of 400 pixels, and we will center this with mix Auto. Now to unordered list, we will put Flexbox layout, Flex row. That means our items will be next to each other. We will add also peding and SpaceX eight. Now let's go inside our iteration, and there list item, we will put key index. Then we will continue to paragraph tech. There we would like to do some animation. Whenever user will hover over the list item, we will put there transform class on our skew X 12, on our text white with 0.5 opacity and transition all with some duration and is out for the smoothness. Now let's save it, and let's try it. You can see the items changing when I'm hovering over them, and that will be it for the desktop navigation. Now we will create another div and that will be for the mobile navigation toggle button. Let's find where the first div for desktop navigation ends, and it's there below, I will create another div and inside this div, I will create a ternary operator that will be on the NAF. I will do their question mark, and as it is with ternary operators, whenever it's true, first position is executed and whenever it's false, second position is executed. Defaultly always, AI Outline menu will be executed. Let's say there also some size, and after it will be changed, we would like to have their AI outline close, also with some size because then when we will click on again, it will be changed to menu. Also with making our menu items show on the page, it will create the mobile navigation we would like. For the div of these menu tag buttons, we will also add some classes. It will be hidden on desktop. Otherwise, it will be absolute position, top five, left five, border with rounded corners, text to white with 0.7 opacity and border to white, also with 0.7 opacity, and then some pedding. Now I will change the window actually to mobile navigation. We can see nothing is still happening because we need to add there also on click functions. Let's edit on click and on click, I will call Toggle Navigation. Now when I will click on the Window, you will see it getting changed. But of course, our menu items are still not shown because we need to now code the mobile navigation menu. I will create there a new div, but not a normal one. It will be a motion dip from the frame or motion. And for this dip, we will use these animations. Let's start there. I will do it like this. And I will start with initial two falls. And now I will put there animate based on the NAB value. Again, this is a turner operator. We will be using there on true position, this will be open on force position, this will be closed. And what this open and closed means is what we defined there. On open, it will do this animation on closed, it will do this one. For the variants, we will put there the menu variants because that's how we named these variants. Now we can continue with the class name itself, where we will put the tail width classes and I will put the fixed left zero, top zero, width to full, height to full, and background black width 0.9 opacity. We can even copy this unordered list, put it there. And just from flex row, we will change this to flex column. Items to center justify centers. That means we will center the items horizontally and vertically. Then we don't need the bedding. We don't need the space X. But we would like the space Y. That means we will have the spacing between the items vertically. Now let's check it. I we'll open it, we have it there. Doesn't look bad at all, but still something we need to do there. Let's continue with height to full. Now we can see the icon is behind our navigation. Let's go there and set there z index to 50. And now it's working fine. If I will put it there, you can see how this is working for the mobile navigation. And as we are on mobile, we don't need anything from this Haring. We'll just put there text to Excel. That means we will increase the size of our menu items. Maybe I wouldn't be afraid to put there even five Excel. Yeah, I think that's fine. We can keep it like this. Now, if we will go into this page for mobile, it will look like this. And that's it for the mobile navigation. 17. Project 2: Portfolio: Portfolio section, we will start with the imports, and then we will continue with creating constant of project. Into this constant, we will load our projects, and then we will iterate over them and display them in our cards we will code. For projects, I will put their ID. For the first one, it will be one. Then I will put their title, then category. And last one will be the image source. For the first project, it will be just this project one. Now I will do the coma, and I will copy this three more times because I have the four projects in total I will be displaying, I will just update the IDs. I will update the project image source. And now I will figure out some description, and I will use these four websites I found on framer, now into our functional component, there into the return, we will delete these empty fragments, and we will start with the section. And for this section, we'll set BY for 16. So we have some padding from top and also from bottom. And then inside, we will continue with the mapping over our projects. Let's do their projects dot MAP Project index, and inside, we will start with the motion Div. Let's now go to the top, and there we will import motion from frame or motion. Now there we will use motion div and now there we will motion Div. Inside this motion div, we will put all the content. We will define now the first motion div starting tech, and there we will set key as project dot ID. Now we will set the class name. We will use border with border white 0.2 opacity, then flexbox layout with flex direction Colum that means elements inside this diff will be below each other. Then we will continue on medium screen on test cop version, we will do flex raw. That means the elements will be next to each other. We will set the text to white, and also we will set there rounded Excel. Let's do Tree Excel. Now we're going to see already something on our page. Then we will continue with background that we will set gradient to right, and we will set its colors from via two. Now as it's some codes I defined in figma earlier, I will just copy paste it there, and it should create some grayish color. There we will do some bedding. Then also, we will set there justify between. That means we will have even spacing between our elements in this diff items start, margin to bottom. Also for now, we will set width. Let's set some initial width on mobile screen. There will be 300 pixels, and on a medium screen and above, let's use something like 1,100 pixels, but we can adjust these values later. Now we finally can see the shape of our cards. We will want to have this sticked on top. Let's use a sticky class with top 28. That means when we will be scrolling, these items will be sticking over each other, and it will create the stacking cards effect. Now if we go to the wrapping section, we can put there container and a mix auto. That means our projects will be centered. If I will put there something like main height to 300 viewportet, I will be able to scroll down on my page. And you can see there is the first card, and this I'm scrolling down they are getting on top of each other, and then how this will work is that there will be another section, and this portfolio component will just get out of the viewport, so we won't see it. And when we will be scrolling up, we'll be again seeing all the cards below each other. Now I will define their initial state of our animation. That means we will start with opacity zero. That means the elements will start invisible and also this Y, it will be 50 pixels below its final position. For next one will be while in view, and this while in view is the definition of animation when the elements will come into view. There we will set opacit to one and Y to zero. Then it will be transition. That means the duration will be for us half of a second. And the delay will be index times 0.2. This means that there will be some delay to the animation, and that means that not all elements will get shown on our page, but with the index, it will be more delayed. How it will look like is that the first card will be displayed first, and then the rest of the card will be slowly displaying after this one because then it will create this wave effect when the first element is displayed and then slowly, all of the other elements are also displayed. Now also we will define a view port that we will set once True. That means that this animation will trigger once the element will come into view. It will be for the motion definimation, we will start inside with the paragraph tag inside this paragraph tag, we will have a project dot category. Below, it will be heading two. There will have project dot title. And then we will have an ordered list inside this unordered list. We will have a list item, and inside these list items, we will have a bullet points. What we achieved with the project there in paragraph tech inside our list item, I will put enhanced user experience by 40%. For the project category, I will do something like text to gray, 200, then text to small. For the project title, I will do text to Excel, font, both, and on medium screen, we can increase it to text for Excel. For the unordered list, we will do space Y two. That means all these blood points have some spacing between them and not arches stacked on top of each other. For the list item, I will do plex, box layout, and items to center. And then next to this Blot point, I will do some react icon. We can do AI Outline check. For this icon, we will use react icons AI. Let me do NBMiRact icons. Now, if we will do this check, we have this option for this library. I will enter. That way, it will get imported. Now if I will save it, it will work. On our page, we have this icon. We will add the class name with width 25 and height 25 and text Emerald 400. Now let's check the page. We didn't increase it, but these are some values that you can increase in case you want this check bigger. I will leave it like this. And I will also set there to this list item space X four I will take this list item, and I will paste it two more times. And then for this enhanced user experience, I will just take it and change it to some other text. We can do improved side speed by 50%. And for the last one, increased mobile traffic by 35%. Of course, these are some example values that can be there. And also, currently we have this hard coded. What we can do is that we can create there a new field. I will do bullet 0.1. Then I will copy this, paste it, do bullet 0.2, and three. Then I will take this even with the coma, and I can put it to other projects. Then I will take these values. Put it there. Also, this bullet point. And even the last one. And there in the iteration, I will do project bullet 0.1, paste it for the other ones, do bullet 0.2, and three. And now, for example, if for the fourth project, I will change this to some random thing. On our page, you can see that we have it fine, but just for the first one, we have the different value. Now we have some issue with the first card. Did I forget something? Yeah, I forget to actually put the values there. Let me just put it like this, save it, and we'll continue below the unordered list with the image. And for this image, we will set a source of project, image source, then to, we will put project dot title, then to wit, we will put 500 to height, we will put 300 and to class name, we will put rounded large. Now we will save it. You can see how our project cards look like and few things we should do. First one is that we should take the rounded of same value that we have in the motion div. We are using their tree Excel. That means we will put it also for the picture. Then there is not an issue in this medium flex row that should be like this. There is an issue missing a div there. This flex row, we now want to have a div for the text, and then the image element is fine on its own because it will be put on the right side. As it's flex row, it means that if we will put this text into a div and let me also do a tab there. These two elements will be next to each other, and on mobile screen, they will be below each other with this flex direction column. What we can now do there into this div that holds our project information, we will set there space Y to four. Then also, we will go into this wrapping motion div, I would put there space X to four. And I would even do their space Y to six. Now if we will check the page, we will need to increase the margin to bottom. Let's increase this to 24 and also we will go into this motion di and we will put the Mx auto. Now it's centered, and now we can test our portfolio section, and as we are scrolling down, they are overlapping each other. That will be for the portfolio section. 18. Project 2: Stack: For the stack component, we will do this in ports. In case you don't have these libraries yet, open a terminal, do NPM, I, and copy these libraries. For example, this react intersection observer. That we will use for the animation to reappear to get this using view when we will be scrolling up and down, this animation of stack will be reappearing. Then framer motion. Again, if you don't have this yet, just NPM, I and put it there, react icons. Also we can put there. That means we will have access to these libraries with the icons we will use for our stack. Now if we tenter and we'll install the libraries, I already have them, but I just can do it again. Now before defining the stack component, we will create there an array of stack items with C stack items. And there for each item, we will have ID, then name. First one will be framer, then icon, first icon will be the framer one with size to 100. Then color, I can sit there for now text green 200, and then we can put their comma and paste it there as many times as we want. I will update the names and icons. And I also selected some different icons for the other four icons because there was some place holder icons. Now we will use Framer Figma, react note, Mongo Di B, and Docker. Then we will move below, and there we will start defining animation variants for the stack items. I will start Cs variance or item variance. And I will put variant for hidden, which will take index number, and there it will have obesity to zero, and for x, we will take the remainder of index and if it's zero, then it will be -100 on true position and on false position, it will be 100. This is something called turner operator. By this, we will do that the stack items will go from left and from right side depending if this is true or false. Then below, we will have another one that will be called visible, and for this one, we will set opacity to one x to zero and transition to duration three. I started with the wrong bracket, I need to do a Carl one there. Let's change it for the square one, and below we can start defining the stack component itself. Inside, we will start with setting up the animation controls. I will the constant controls and I will use animation. Then we will set up the intersection observer. That means we will now set the thing, we import it there. And with this, this animation will reappear when we will be getting this component back to our viewport. There I will do a constant, and I will use the ref and in view for use in view. Inside, I will do threshold 2.1. Then I will continue with setting the use effect hook to trigger the animation based on the view state. I will do use effect then inside, I will do I condition, and if this will be in view, then we will do controls that start with visible. And if it won't be in view, I will do controls do start hidden. Which are these two item variants there? And then we will say there that this effect will run whenever the controls are in view dependencies will change. That means it will trigger the animation to start when the components will come into view, and it will also rest the animation when it will get out of the view. There, we will do a section tag. And inside this section tag, we will start with DIV and let me explain why I'm doing the additional Div and not doing it in the section. For this div, I want to set maximum weight. For now, we'll do something like 250 pixel because we just want this to be vertical, not horizontal, but we can also adjust this later and just change it to horizontal and set this to mix Oddo with text to center. So we have this center. For the section. If I want to put some special background for the section, maybe some linear gradient, I could do it there, and it will be a full width. For example, background to white. We need to put there some content. And let me put there some content and let me put their background to green. Now you will see the differences. If I will go to our page, you can see that the background white in this wrapping section tag is taking the full width and the content that I want to use with this background green is inside, and it has this maximum weight that I set to 250 pixels and centered it. If I would like to do it there in the wrapping section, it will take the wall section and the actual background that I would like will be looking like this. Let me then use it like this. For now, let's get rid of the backgrounds. There I can start with heading two. Inside this heading two, I will put my stack. Blow, I will do a div. And in this div, I will be iterating over the stack items. Inside this stack items iteration, I will do a motion div. And before we start doing this div, I will just style the heading and the div that is wrapping this. For my stack, I will use text seven, Excel, text gray, 200, font bolt, and some margin to bottom. For this div, I will just use grid layout and gap to eight default lay. There will be just grid coms one. That means all these motion diffs will be below each other, and it will be in one column. Let's see how this will look like. Let's just put to motion div, the index dot ID. For the key value, then for custom, we will put index. Then initially, this will be hidden. And, of course, not index ID, but item dot ID. Then we will continue with animate two controls, then variances to item variants And for a class name, we will set background white too 0.1 opacity. We will continue with Flexbox layout and center this with justify center and items to center horizontally and vertically. Then fxraw that means elements inside the stiff will be next to each other. Then we will use rounded Excel, shadow large, some bedding. And on Haar, we can just do shadow to Excel. Now inside this motion dip, we will create a div for the icon. There we will do m dot icon. We can add some class to it, and inside, I will do their margin to bottom and dollar sign m dot color. That means it will set there this class name of item dot color, and we have set there text green 200. Then we have there the icon itself, and below, we will do the text where we will display item dot name. There I will do text white with 0.2 opacity, text three Excel. Transform and rotate by 90 degrees. And now for the Dave that is wrapping this iteration, I will put the ref to rev. And what this means is that this helps our animation to know when this container is visible on the screen. We can see the animation, how it goes. There is just one thing I need to fix. We are missing T to our rotate -90 degrees and I will refresh it. You can see how the animation works, and that will be it for this stack component. 19. Project 2: Services: Now we'll create quite simple section named services with the services that we will be offering. What I will do there is that I don't even need to import anything and I will just create their constant with services, and there into this constant, I will put the offered services. I will start with ID field, which will be zero, one. You can put there just one, but for the design purpose, I will put there also zero. Then I will put their title. Then I will put their description. And that will be it. Now what I will do is that I will fill it with the content I would like to put there. If you want to get inspiration, I will put there Full Stack web development, APA development, database design, cloud integration, DevOps, and CICD, and performance optimization. Then also some description. And then what I will do is that I will go into this return, and there I will create a DIFF this div, I will put PI 20 text to white. I can also put the container class, Mix audio flex and flex direction column. And on medium screen, we will put flex direction row. That means we will need to create two divs. First one will be with the title. That means for us, it will be services, and second div will be with the services list. That means we will be trading over our services there that we created, service and inside, we will do DIV this div will have a key, and that will be the service dot ID. Also, it will have a class with march into bottom. There will be 16 flexbox layout, and we'll put the items to not actually center. We'll put it to start. Now it's displayed on our page. We can continue there with next Div That will have some different text color. Let's put the text gray 400. Font boat, text, five, Excel, and margin to write six. There what we will put is service dot ID. We will save it. Now we can see it on our page. For the title of services, we'll put width to 25% and bedding to write to eight. Now it's getting better shape. What we will do is that for our heading, we will put text to six Excel, font Extra boot, sticky and top 20. This will create the effect that whenever we will scroll on the page, it will be sticked on the top of our viewport height. For the services, we will put there the rest of the 75% of width. We will also add there another div, and this div will be grabbing heading three for the service dot title. And also paragraph tag for the service dot description. Class for the service title will be text to Excel, font, both, and margin to bottom two. Description, we will input the text gray 400, and you can see how the services is on the fixed position. And as we are scrolling, these services are moving, and that will be it for our service section. Now we can continue on next one. 20. Project 2: Contact: For the contact section, we will to the main div, put a class of PY to 16, set there a maximum width. Let's use 1,200 pixels and center this with a mix order. For this div, that will be holding the text with our email address and also call to action like get in touch. We will set flexbox layout items center and justify center to center this vertically and horizontally. Also we will put the flex direction olume and on medium screen, we'll put flex direction row. Then inside, we will create another div to separate the cold action with the actual address. There we will put the codection. We will create heading two tech, and we will put there get in. And we can put touch to Spentex. For the touch in Spentex, we will later add some color. Let's now put text gray 400. For the heading two itself, we will make it on medium screen, text seven Excel. Text for Excel on mobile screen font, both margin to bottom ten and text white with opacity to 0.5. Now you can see it on our page. There below, we will continue with Anchor tech, and inside this anchor tech, we will have our email, which will be on dow.com. I can put it like this and there for Anchorteg, I will create a class. And in this class, I will also use on medium screen text to seven Excel. On mobile text for Excel, font, semi bold text to white, underline with some decoration. For now, let's use gray 400. Then we'll do decoration two and also underline off set four, and on Her, we will change the decoration to gray 200. We will also use the transition and duration 300. Let's save it. Now on our page, you can see when I will hover it how the underline is changing or decoration. What we will also add to this anchor tag is HRF, and HRF will be mailed to gon doo.com. We'll still have the form for filling the email with message and making it work, so user will be able to send email to us via form, and there we'll create another DIV. Inside this div we will have a class of text white with 0.5 opacity, margin from top to 12, and now we will have their phone with the number and also the address. That means we will do another div for the phone. There we will create a paragraph tech with phone and also Anchor tech with the actual phone number. Let's put there something like +99 078-897-9999. Let's save it. There into Anchor tech, we will do HRF, and into HRF, we will put this phone number without a spacings. And we can also do the styling. That means for the DIF, it will be margin to bottom eight, for the phone. It will be text to arch and margin bottom one. For the anchor tag, it will be text to Excel, phone semi bolt, underline, decoration gray 400, Decoration two. Underline off set four on Her decoration gray 400, transition and duration 300. Now we can put this on another line and also this anchor tag below. Now below this depth, we will create another one. Then we'll create a paragraph tack with office. We will copy this and based it three more times. Then we'll put street. There we will put Berlin and Germany for the class name, we can put font bolt. There we will put text large and margin bottom to eight. Let's see it on our page. Now let's continue with form. That means we need to go below this div. We will create a form tech. And inside this form tech, we will create another div that will be there for the inputs, then another one that will be there for the input message, and then a third one that will be there for the button. Now for the form, we will add classes, and we will start with maximum width to 1,200 pixels, Mx, auto, flex flex wrap, and justify between. But with justify between, this means there will be an even spacing between these three divs. Now let's continue with the divs. For the first one, we will add width to 50%, space Y to six, and inside, we will put a div that will hold label with input, and we will copy paste it because second dip will also hold label and input. In the label, we will have email, and in the second one, we will have subject. For the input, let's also close the tech like this. And let's start with styling these labels for the label. The style will be display block, text too small, font to medium, and text gray 300 with margin bottom two, and also HTML for email. We can just copy this line and put it there, change this to subject. And HTML four will be also subject. Now for the input there, we will put our type of email ID also of email, placeholder to email.com. This will be also required. And for the class name, we'll put there with the full Bedding X four, Bedding y23, background transparent. Border and border white with opacity 0.2, rounded large and focus to outline none. The focus on Ring two and focus on ring gray 200. Now we can test the input. Basically, what we just need to do is to copy paste this input there and change this type to text. Change this ID to subject to place holder, we will put what is this about now let's move to second div. For the second div, we will put their class name width to full. On medium screen, we will put width to 50%. Margin from top will be six, and on medium screen, we will rest this margin to zero. Inside this div, we will put the label for message. In this label, we will put a class of block, text to small, fonts to medium, text to gray 300, and margin to bottom. And also for this label, we will put HTML four, and it will be for message. Below this label, we will put text area. And for this text area, we will make it ID message rows 28. That means the faulty, it will be displayed on our page with eight rows. Now you can see it. We will make it also required. We will put there placeholder your message here. And now it's time for the classes. We will put the width to full bedding X four, BY 23, background transparent. Border white with opacity 0.2, rounded large, focus outline, none, and focus ring two with focus ring gray, 300 or 200 as we did before. Now it's better. Let's check the page. We need to make some spacing between these two dips. Let's do it, and let's do it by setting this width to 48% for this one, and also 48% there. Now, if we will check the page, it will look like this, which I believe is fine. Now we will just do the button. That means there on the bottom. We will do bottom tag. We can just input there this row. For the styling of the dif, it will be width to full on medium screen, it will be width Let's again, use this 48% margin from top. On medium, margin from top will be to four and text to right on medium also. Now we will style the button itself, and also we will add the button type to submit. As we are using this form for the class name, we will put their inline block. Width and height to 16. Background to transparent. So border. Let me use Border gray 400. And text gray 400. So it's the same color. Then I will go with font medium, rounded, large. OH, I will change the background to gray 700 on Her the text will be changed to white. Transition and duration 300 is out, so we create a smooth animation and also transform and hover scale to one oh five. Now if you save it and we will try to hover this button, you can see the scale changing a bit, color, and also the color of the arrow. Now, if you want to make this contact form work, we will need to add a method and set it to post. Let's go to this page, atgtfm 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, but we will add their action, and into this action, we will put this endpoint that we will get from getfmtiO and also we can put the ID of form. And looking on our section, we will also need to change there from justify center to justify between. This is how the contact form will look like. Now we will try it responsiveness, we can see we have an issue there. Let's go to our code, and there let's make this width or from medium size. Also, I will put it there, which is already working. Let's also put there width to full. Let's also put the bedding X to 12. Let's now copy this and go there to message. We can put it there. Also, we can put this to the button, and that will be for the contact section. 21. Project 2: Footer: Now the last section and that will be Footer. For the futer, we will need to import a few icons. Let's do it right now. We will import AI fail Gita AI Outline X, AI fail Facebook, and also AI fail Instagram. We will start with Putter tech and inside this footer tag, we will put the content. Let's do some styling. It will be class relative because we will have also absolute elements. That will add some design styling to this text. Let me explain later. Now let's just do the large text. We will start with relative class. Then we will continue with that index to ten, text to center, margin top to eight. Inside this dip, we'll do H one with John. Though, let's keep it like this with capital letters. Styling will be hidden on mobile phone and on medium screen, it will be displayed block. Now, let's do ten RAMs. Large text. Let's do 15 RAMs. And let's not forget medium. Let's do it text to 12 RAMs. Also, let's put their font bolt, text white with 0.1 opacity. And below, we will do the same thing for mobile version. Let's copy paste this H one tech. And there let's do hidden on medium screen. And set there also relative class. Now we will keep it like this. Theoretically, we don't need it there because it's hidden and it's being displayed only from the medium. That means from this one, it's starting on 12 prim text. And I guess that's it. Now let's go and above, we will create the background elements for our text. We will also duplicate this and first, we will create this for desktop, and then we will create it for mobile. Now inside this dip, let's create three more dips, and I will first code one, then we will just copy paste. First, the glass of this wrapping dipth will be medium hidden, absolute position, inset zero and overflow hidden. Now for the first diff, it will be of absolute position width top to 30%, left to one quarter, width 100 pixels, background to gray 300, for example, now rounded full opacity to 40, transform and translate X to -50% and also translate Y to -50%. Let me put it there. And the only thing I put there is this. Translate Y -50%. I won't put it to another line. Let's just remember this. And now copy paste this line two more times. I will leave it like this. We won't be changing any values from these translations. Only thing we will be changing are the backgrounds. Let me put the background grade to 906 hundred. Now let's also change the opacity. I will change this second one to 20 and the third one to 30. Now I will also change the weight. Let me change the second one to 150, and the third one, we can keep again 100. Also, we forgot to create their height. For height, I will do their 100 pixels. I can copy this and paste it there. For the second one, we will do 70 pixels, and for the third one, we can keep the 100 pixels again. Now what we need to do is to this footer, we will put classes of relative and PI 28 with maximum weight of 1,200 pixels and a mix Auto. Also, we can put the padding x24. We will copy this and paste it below. But below, we will delete this hidden from medium size. We will keep this hidden for mobile size, and on medium, we will make this display block. After we will do it, you can see something was displayed on our screen. What we need to do is to play with these positions. That means we will do the just 50% and also 33%. Now you can see, again, it's changing. Now let's change the top. We will put there 35%, and let's do 50%. I think let's also change color of this one because it's not visible. And let's also increase the sizes. The first one are great for mobile phone. The desktop ones, we need to increase to like 200, 250, and again, 200, height to 200, 150 for the height on the second one, and we can keep 100 for the third one. We can again play a bit with the values. Let me put their top, for example, 40%. Then let's do 60, then let's do 45, and also we can do there some different value, for example, 20% there. 60% there and 40% there. For now, let's continue with the normal footer, how you know. We will create the DIV and inside this div, but you can first put there also classes. We will make this grid layout, default layout mobile, it will be Grid Comes one, starting from small screen, we will change it to grid coms three. Also, we will put there some gap, text gray 200. And inside, we will start putting the Divs. In the first div, we will have a heading with Contact me. Then with paragraph text, there will be the number And next will be the email. There we will add some styling for the contact me. We can put the font bot, and also there we can put space Y two, two. Let's see how this will look like. I think it's fine. What we will do now is below, we will create another dif, and in this div, we will create heading three, again, useful links, and below this heading, we will create unordered list, and inside this unordered list, we will create the list item, and inside this list item, we will create an anchor tag with, for example, home or for four page or licensing. We can put it there for a four page, licensing. Also, let's add some styling there. So useful links will have formed both. Well this dip we have space Y four, or let's keep two. For the unordered list, nothing for list item. Actually, also nothing. For the anchor tag, we will put some HRF and a class name with our underline. Now we can add this anchor tag to all the items. Check how it looks on the page. And as we make sure it looks good, we will check where the dif ends. We will take it, copy it one more time. There we can put again, something like socials, get up, X and Linkedin and below this disk, we can create another one that will have a paragraph tack and inside the paragraph tack, we will have 2024, all rights reserved. We will add some styling to it. Let's do margin top 212, container, flexbox layout on small screen and above, we'll do Justify between. So there is even spacing between our elements, justify center items center with some gap between them. And that's it. Also, we will add styling to the paragraph. Let's do text gray 200, and then below this paragraph, we will add unordered list. Inside this unordered list, we will add the list item. And inside this list item, we will add Anchor tech, and inside this Anchor tech, we will add the icons. I will start with AI hL Git up. I will also add the size of 30. That means for the Anchor tech, we need to add HRF of the link to get up and also we need to ada some styling. I will have their text grade 200. Now I will copy paste it four more times, and I will ada the rest of the icons, Outline C, Facebook and Instagram, Outline s, Facebook. And Instagram, I could add another one, but let's delete the last one. Let's keep there just these four. Then if I will check the page, I can see I need to put it into row. For the unordered list, I will add flax and flex row like this. Then I can see on the page that I maybe should do there also some gap. Also, I will take this wall dif, cut it and put it outside of the div that has the grid columns. This one, we can see where it's ending. But basically, you will have the div with the icons just above the footer or end of the footer tag. I think we can take it away from the anchor tag. And we can define it there in the div that is wrapping this paragraph text with this unordered list. I will put the text gray 400. I will also remove it from there, so it will be same for this paragraph and this unordered list. On the page, it will look like this. This is our footer now. Now if you check it on a mobile phone, we can see we have some issue there with the text. Let's go there where it gets hidden from medium. We can delete the text sizes. Also, we will put text eight Excel. But what we will do is that we will go there, and we will start from grid comes too. Next thing, what we will do is that we will put there margin to bottom to 12. And then we will go there. And for the ty link elements, we will make a different positions. So let's change the first element to 20, the second one to also 20 and the third one to 25. Now the positions, let's start with the first one, 20%. Second one, let's do 60%, and the third one, let's do 35%. Maybe even more 65 for this one, 50. For this one, we will increase the opacity, and to decrease it for the first one, now our footer section works. 22. Project 2: UI Fixes: I will do now is that in a folder, I will create a new folder and I will call it sections, and I will move all these sections there and in components, I will just keep these two components I have there. I can even move it out from the UI. Let me just put it like this. I can do update there. I can delete this UI folder, and maybe I have also some error there. But more likely, it's not if you sometimes get some error like this, it's enough if you just closed and open the IDE, and you can see the error is gone. Now we have the components, where will be these circles and clouds components and the sections I have there. Let's check the wall page design and do the final UI updates. And by the way, this is how our page in a folder will look like. We don't need the imaging port there. Yeah, just one folder away. I will just delete this and after safe, it should be fine. So there is the hero section. There is the portfolio section. Now there is the stack with the animations. Now there are the services, and there's the contact section and the footer. Now let's check how this actually looks for a mobile phone. And everything looks fine. Even there and even there. I think the first point will be in the color difference, we can see there. If we will go into Globus dot CSS, the background currently is this color. Let's take it, and how we can easily fix this is that we will go to hero section, and there instead of the black color on the end, we will insert this color. And now you can see the color difference is gone. Then what we can do is that we will go into portfolio section, and there for the project category, we can put text blue 400, maybe also making this text large. And also making it font bold. And I will change it to 300 with 0.3 opacity. Okay, maybe seven. I think that's better. For portfolio, for the project category, I will use this color. Then for the stack, we can keep this green color or we can go to Stack component and set the text green or text sky 200. Let's see how it will look like. Maybe let's try 300. I think that's fine. Let's set it actually everywhere. I will just take this text sky, paste it. I messed it up there. I will just delete the additional T, save it. And what I will do, I will just take this and put it also to the project category. Maybe I will delete even the opacity. Now we will scroll up. And also the stack looks good. Now the services, I will take this sky color, go to services. For the ID, I will put text Sky to I think 300 is more decent. And we can even put this text Sky 300 to the services heading. That means I will put our text Sky 300. And now for the contact section, we will put text Sky there. And also for decoration, let's do 300 and also there for this decoration. And we can just change it for this gray color. Not a big deal to do it. I will just paste it there for the gray, save it. And for the footer, my favorite part, we'll put there some. Let's start with sky. And I think that's fine because we have the already different shades of the sky color. In the end, it will look like this. We can refresh this and one additional fake. We will check our hero section. We also could go there on clouds. And instead of -45%, we will do the 35. And with this, we will get these circles centered around our profile image. Now you will go to Navbar. The Navbar, we see that we need these directions to about portfolio stack and contact. Apparently, this should work, but it's not because we don't have the IDs set to our sections. What we will do is that we will delete this about section or we will cut it and we will put it below the portfolio section and we have actually services. Now let's go to each of our sections. Let's start with portfolio. Then we will add ID. Portfolio services, we will add ID services. Then contact, we will add ID. Contact. And for the stack, we will add their ID. Of a stack there in our navigation bar, we will go down there and what we should add is that this should be actually changed to an anchor tech. We should add the HRF, and for this HRF, we will settling dot path. Now we will copy this. We will put it there. Also change this to Anchor tech, save it. Now, if you go to our page, we will see that it will be working for us. Now let's check the mobile version of our website. Let's try to go to different sections. And we see we also need to do one last update, and that will be adding our closed navigation this one. Let's find the mobile navigation, which is this one. And to the anchor tag there, we will add on click Close NAF. So whenever we click on this item, it will call this closed Navigation function which will set NAF to falls. That means it will cause the navigation. 23. Project 2: Deployment: Now how to deploy this site on Verso and have this life. We'll do utero Shift B and initialize repository. DevCloud portfolio is the name of my repo. Now I can check this source control. There I will stage everything. I will do some initial message. We can commit. I will hit Publish branch. It will be private for me. Def Cloud portfolio is fine. Hit Enter. Now, it should be fine. I can click Open on GTA. There I can see the code. Now I will go to sal.com and I will click on Add New Project. I will click on Import on this Death Cloud portfolio. I will click on Deploy. Now we can see we have the two errors. First one in Navbar with Link and second one in Stack with icon. We will go back to code and in Navbar, it's enough to just delete this link in a stack, and intc, it's enough to just delete this amonicon Now stage the changes. Update one, commit synchronized changes. And now again go to projects on Varsel and we will click there on this one and click on Deployments, you can see as you are pushing to get up with new changes, this is automatically rerunning the build. Now, it will hopefully go through. And in the future, if we will be adding anything to your page, this build will be rerunning over and over again. And our page is live. If I will click there, it will open the link to my page. I can copy this link to mobile anywhere. Now it's accessible on the Internet. What is important to bear in mind is that if you do any other changes to your website and you will push them, it will rebuild this website, and in case you will have some new errors, it can fail again. So you need to take care what you are pushing into your repository. And after redeploy, you will probably see something like this. What we need to do is that we will just take this dark mode and put it also into something we have there set as a light mode. And this is something that you can then set if you will want to do light mode for your website. Currently, the easy fix and also to have this prepared, we can just set there the same color as we have for dark mode. So in Global Z CSS, let's just take these two lines, put it in the root there, save it. Then we will deploy it as update too. Click TheOS synchronize changes, and now it will rebuild the dual page and it should be fixed. 24. Reusable Component: Contact: We will start with declaring this component as use client for the interactive hover effects, port triggered animation or frame motion animations. We also import motion from frame or motion. If you don't have this library yet, open a terminal, do NPM I frame motion, had enter, and that we install it. Right to the component there we will start with a section. And to this section, we will add ID of contact, and for classes, we will add vertical pading to 32 text to white, and we will make this maximum width of 1,200 pixels with a Mito to make this centered. We will also add vertical padding there to four. We will start with the first motion dip. This motion dip will start invisible and 20 pixels below final position. While this will be in view, it will animate to fully visible and final position. Animation will take 0.8 seconds, so we will set the duration to 0.8 to transition. This will animate only once when scrolling into the view. That means we will set the viewport once true. For class name, we will set a grid layout, and on large screen, we will use grid columns two and also we will set the gap to 16. In this motion dip, we will create another div. And for elements inside, we will use space Y 12. That means we will have some spacing between them. We will create a motion H two, where we will set the animations. We will start with the initial. This will start invisible and 20 pixels left of the final position. While this will be in view, we will make it visible, and also for the transition, we will set the animation to take 0.6 seconds with 0.2 seconds delay. For the classes, we will set text size to seven Excel, font to both, and text gray to 300. Inside, we will input their heading of get in touch and the touch word we will put into the Spenex for the touch word and the span tag, we will add a different text color. I will now put there text gray 500. We will continue to another motion div. This motion div will start with opacity zero. That means it will start invisible and 20 pixels left of the final position. While this will be in view, we will make it visible with setting opacity to one and for the transition, this will again take 0.6 seconds with 0.4 delay. For the tail end classes, we will use bedding eight, round it to Excel, and space Y eight. That means we will again make some space between the elements we will have there in this motion diff. And what we will have there, we basically have the contact information, and the first one will be about the mobile phone number. We will have their paragraph tech of phone and Anchor tech of the number itself. For the div, we will again use space y two to have their spacing between the paragraph tech and Anchor tech. We will set text size and text color for the paragraph tech, and then for Anchor tech, we will set HF to the actual number for the classes. We will add text to Excel, phone semi bot, some different color on hovering, and transition duration with 300. Also flexbox layout with items to center center this and Gap 22. Then we also have the Spentek because we would like to add an arrow next to this number for the styling purpose. We can set there some color for the arrow, and that will be it. Below, we will continue with another div. In this div, we will hold email. It will be basically the same styling as we had there for the mobile, but we will change HRF to Mail too and the actual email, and that will trigger the email. When someone will click the email ink, it will open, for example, on Windows Outlook for him with option to write email to us. It really has the same tail end classes as the phone, so I won't go through them again. Let's continue with the next div with the address, and there is the paragraph tag with the office and the actual address. For the address, we are also using styling of text Excel, and leading relaxed sets the line spacing between the text lines. Below, we will have another div starting with Opacity zero and X 20 as divs before. That means invisible and on different position. While in view, this will be visible and in the final position, transition will take 0.6 seconds with 0.6 delay. And for the class names, we will set width to full height to full mean height of 400 pixels rounded to Excel and overflow hidden. Do not have any content outside of this div. This div will hold the iframe with the Google Map, where we will set the position of our address. Into this iframe source, we will put this Google Maps URL. We will set the width and height to 100% for setting the full width and height of the container. For the style, we will use border zero to remove the iframe border. And we will also allow full screen to enable the full screen mode. Loading laser means that we will lazy load the ee frame for better performance. These are just the attributes we need to define in our iframe tech. This is how our contact section will look like. We can also check the responsivity. There it is on desktop, small tablet or iPhone. There I will hit refresh to see the animation and for contact component, that will be it. 25. Reusable Component: Footer: For footer component, we will import these icons from react icons library. We will define the array, the array of social links we will be displaying in our futer and we will define this array outside of the component because defining it inside the component mean it gets recreated on every render. Its static data doesn't depend on props or component state, so we can leave it there. In this footer text, we will do class names of relative because we will be using absolute positioned elements. We will do vertical padding to eight, maximum width to 1,200 pixels, center it with Mix auto and set horizontal padding to then we will create a div. And inside this div, we will create three other divs. These three divs will be empty. The div that is wrapping these three will be of absolute position. We'll be using inset zero and we'll have overflow hidden. Inset zero will set all four sides to zero. On medium screen, we will hide this because we will be showing a different, absolute position div that will be holding these styling or design elements for mobile screen. How are these diffs working is that they are positioned to some top and left position. Then they have some different width and height. Then they have some different color or they can have some different color. Then this first one is a circle, the second one, and the third one is just rounded. Then they can have a different opacity and the translate will move the div by 50% vertically and horizontally. Will copy paste this, actually, this will be the desktop version, and the first one was mobile because now we are hiding this and on medium screen and above, we are displaying this as block. It has the same classes, but we are setting there different positions, different width, different height, and then we can also set different opacity and so on. Below you will create another dip with relative class, the index to ten, and text to center with also margin from top to eight. Inside, we will create heading one tag with John Doe. As John Doe has a really short first name and last name, maybe you can put there just your surname or your first name. Really depends on. We will set there hidden and from medium screen, we will again display this. We will set text to ten RAMs. On medium, large, we will increase the text size. We will set this as found bold text to white and opacity to ten. This text shouldn't be visible as well. I know the text size is huge, but it should take the full weight. And we are decreasing the opacity. So we just slightly visible. For the mobile screen, we will do it again, but I will use the break tech to have John and Doe on another line. What I could also do is to just decrease the text size. We will continue with another div that will be actually holding the socials. We will set the margin from top, flexbox layout on smaller screen, we will set there justify between. That means we will have on spacing between the elements. Otherwise, we will use Justify center and item center to center items horizontally and vertically. We will set there some gap, and then after this breakpoint, we will set flex direction column. That means the elements will be below each other. We will set there paragraph tech with all rights reserved, and we will set text graded 200. Then we will create an ordered list with flexbox layout, Gap 25 and flex wrap. That means if items will exceed the line, they will wrap below. Inside, we will do mapping over the social links, our array, we create it there. And there we are structuring the HRF icon and label in our array. And that means that now, instead of having to write social Links dot HRF icon or label within the function, we can directly access Hf icon and label as individual variables. We will create an anchor deck and we will set key label HRF as Hf Area label as label, and class name, we will set text gray 200, flexbox layout, items center and Justify center to center this vertically and horizontally width and height to ten, round it to full, and on hover, we will do text gray 100 with transition colors. Inside, we will create icon tech with set size to 30. This is how our footer will look like in the end, and we can also check the responsiveness. And now we can adjust the colors, opacity for each element and modify the design to our needs. 26. Reusable Component: Key Metrics: Now we will continue with the key matrix. We will start with declaring use client to indicate that this component will use client site features. Then we will import react and motion and use and view from Framer motion library. And we will define an array of metric objects, each containing information about a specific metric. And inside, we will start with the first item that will have ID, value, label, and description. Now, I will add some additional metric items. You can take inspiration. I'm having there five plus years of experience, 50 plus projects completed, then code quality and comments on Github. In Kemetric component, we will start with creating a ref that we'll use in use in view hook. We will create a ref using the react use rep hook that will be attached to the section element. The ref is typed as HTM element, since it will be used on section tag. Initial value is null since the ref hasn't been attached to any element yet, and this ref will be used with the using view hook to detect when the section enters the viewport. Then we will use the using view hook to determine if the component is in the viewport. We will use the ref and once to falls. The ref is the reference to the element we want to observe and once false means that we will set that the hook will continuously track the elements visibility. In return, we will create a motion section. We will set there ref to ref initial state will be invisible and 50 pixels below. Animate will use a turn operator, and it will check in case it in view is true. It will set the visibility or opacity to one and the final state. And in case it's false, it will set this to invisible, opacity zero, and again, 50 pixels below. The animation duration will be 0.8 seconds, and the classes are container and mixdo to center the container because the container has some width, then some wedding setting and text to white. Will add motion H two to use it for heading of key metric. The initial state will be opacity zero and Y to 20. Animate will again use the turno operator on true position visible on force position invisible, transition with a delay of 0.2 seconds and duration of 0.6 seconds. For class names, we will set text size to text six Excel, font to bold, and margin to bottom 12. We will continue with another depth that will use a grid layout. We will set the grid columns for the medium and large screen. And also we will set there a gap of eight. So we have some gap between the elements. Inside, we will start with the mapping over the matrix array. Metric will be the name of the item and index the position. We will create the motion disk, and the key will be the metric dot ID. We will set the initial state, and also, again, we will set the animate, where we will use the Turner operator, same as before, because we would like to trigger this animation again and again every time we will have this in viewport. Transition to have all the metrics displayed at a different time, we will add also a new value of index, and we will multiply it. This means that each index will have a higher value, and by that, it will create the wave effect where the first index will be displayed faster than the last one. And also, it will use flexbox layout with flex direction volume to have the elements below each other. Then we'll create heading three. In this heading three, we will display the metric dot value. We will set the initial animate and transition exactly the same as I displayed in the Div above. And the class names, we will set there for our metric value to text five Excel, font bolt, and some color. We also set the margin bottom two. Below this heading, we will continue with motion B for the paragraph tech. We will set there metric dot label. Again, we will set initial animate and transition, and class names will be text Excel, font semi volt, and margin bottom two. Then we will do another motion dot B for paragraph tag that will hold the metric dot description. We can just copy paste it and change the tailwind classes for text gray 400, and that will be for our key metrics. 27. Reusable Component: Logo Animation: For logo animation, we will first declare use client to this component because we will have their dynamic QI updates for the infinite logo animation. We will continue with imports. In imports, we will be importing image from next image, then motion from frame or motion and below the images from the assets. In case you don't have yet the library of frame or motion, you will open the terminal and do NPMiFramr motion. Then it will work. We will continue with an array creation that will be called images inside, we will have source and source of the imported image we have there, which will be just the name of the logo. I had Figma before. Now I have the uremi so this can be fixed. Inside logo animation, we will start with a div and to this div, we will add vertical padding to eight, some background that we can change later or update to our design. And we also set there opacity to 0.8, which means we don't necessarily need to do the 0.1 opacity to our color there. We will continue with another div and this div will have a class of container and mix auto to have it centered. Then inside there will be another one, and that will have a classes of overflow hidden and also another class that will create the effect that our logo animation is fading away from the left and appearing on the screen again on the right with the setting of a transparent. You will see the effect right after we will add the items itself. Inside this div, we will add a motion div for the animation. We will set there some tailwind classes for flexbox layout, gap to 14, flex to none, and bedding to right to 14. We will add the animate to translate X -50% to set the animation properties. This means that this animation property will move the content horizontally and -50% means it will move left by half of its width, and this will create a continuous scrolling effect when combined with the infinite repeat in the transition property that we have there right below. There we also set the duration to 35. Now, as mentioned, repeat to infinity is linear and repeat type loop. Maybe you are also asking why we have so much items and duplicate items in our array of images. It's because we need to have our logos, take the specific width. If there will be only four items, we are not able to make this loop infinite because it will just be for items going around and it will look that there are just some items missing. That's why we can just duplicate these items, let's say, two times, and it will create this infinite loop animation. If you have this many logos that you want to input into this logo animation, you then don't need to duplicate it. Inside, we will do the mapping over the images array, where image is the current item of the array and index is its position. Then we will add the image tag, and we will set the key as index, source as image dot source, Alt as image dot old we have in our array. And also height to dirty. We will save it and we will see that the component now works. There you can also see the transparent from left and right and how it makes the animation look like fading to the left side and appearing slowly from the right side. To check this responsivity, basically, there is nothing much to check. On the smaller screen, it will be just showing fewer logos at the same time. 28. Reusable Component: Navbar: Let's now start with coding the Navbar. We will need to import required dependencies. Next Jz link components for client side navigation, react and use State Hook for state management, and icons from library react icons. We can see that this react icons library shows us some error. It's because we don't have this library installed. Let's copy the name of it, open a terminal, and do NPM I and paste there the name of the library. Now we will hit Enter and it will install the library, and when we will get back to our component, it won't show error anymore. As we are using use state, which is a client site feature, we will need to define this component as use client to indicate that this component render on client site. We will continue with defining a navigation links array with title and path for each link. This will keep the navigation items organized, and also it will make it easy to add new links whenever we would like to. Now we can go directly into the Navbar component. What we need to do there is to initialize state for mobile navigation menu. This NAF will be a boolin to track if mobile menu is open or closed, and Set NAF will be a function to update the NAF state. Devotly this will be set to falls. We will then declare a function to toggle the mobile navigation and make it open or closed, and it will set the NAF to different value than it will be. So whenever the button will be clicked, the value will be changed, and we will then use it on our element for closing and opening the menu. We also create a function close NAF, and that will be used whenever the link will be clicked to make sure our navigation will close. In return, instead of empty fragments, we will start with DIF. For classes, we will use Z index 250. We will use fixed position, that means whenever we will scroll the navigation bar will go with us, Flexbox layout, so we can use justify center to center the navigation items. We will set width to full, text to white, and font to bold. Then we will create a di for desktop navigation. For desktop navigation, we'll also use a border and set it to border white with 0.2 opacity. Then we will do some margin from top and backdrop blur because as we will be scrolling on the page, we would like our nav bar to be nicely visible. Let's also make it rounded pre Excel, add some border radios there. On mobile screen, this will be hidden and on medium screen and above, this will be displayed flex. Again, because we would like to center the items with items center and justify center horizontally and vertically. We will add some bedding to it, and also we will set a maximum width to 400 pixels. If you will add more items to your nav bar, you can increase this. Then you will set Mito to also center this. Now if you add something there and save it, you can see our Navbar on the page. But by to add there just some letters, let's map over the items and add them there. Before we will map through them, we will create an unordered list for them. This unordered list will use flex Book layout and flex row. That means the items will be next to each other. We will again add some pending and SpaceX eight. That means we will have some gap between all the items horizontally. For the mapping, we will use Nablns dot Map. And we will use a link that will be the name of each item in this map and index. Inside an ordered list and this mapping, we will create the list item with key index, reactive uses this key to optimize the rendering performance, and there we are assigning the array index as a key. Inside this list item, we will add a link tag with hrefsetlin dot Pav which we have in our array there. That means after we will add IDs to our other sections, this will get us to the desired section. And then a class name where we will at transform Her text white with 0.5 opacity. That means when we will be hovering over our list items, we will see which one are we currently hovering over. Then transition all with duration set to 300 and easing out to make this animation of hovering smoother. Also, now you can see on our page that we have the layout with the navigation, but there are no items. What we need to do is to access link dot title we have in our array. Let's do link the title, save it, and we can now see our Navbar is on the page. We can move below and code the mobile version of this Navbar. We will create a div there and we will add to this DIF onclick function. This OnClick function we will add there is Toggle NAF, and that means whenever this div will be clicked, it will execute this Toggle Nav function. We have and in this tognav function, you can see that it will change the NAF variable. That means whenever we will be clicking on this div, the NAF state will be changed to true or to false. Now we will use something called ternary operator. We will check the value of our NAF, and in case it will be true, it will execute this outline closed icon, and in case it will be false, which default lays, we'll be seeing menu icon on our mobile. Let's now save it. And I will also change the page layout to a mobile version. You can now see our menu icon. And if I will click it, you can see how it's being changed to cross and back to Hamburger menu. We will add a new DIV, and to this div, we will add a class name, and inside this dollar sign with the color braces, we'll be using another Turner operator. In case our NP variable will be true, we will set translate X zero, and in case it will be false, we will set negative translate X full. This means we will be moving our menu items outside and back on the screen. Other classes that we will add there is a fixed position to left and top zero. We will set width to full and height to full. Background black with 0.9 opacity, transform and transition transform and duration 300 for the animation itself. We will save it now and we can test it. And you can see how it's moving. Of course, we are still missing the items, but we will add them now. We can leave this navigation open, and inside, we can start adding the items. Similar as before, we need to create an unordered list and we will add the flexbox layout with flex direction Colum so our list items are below each other. We will center them vertically and horizontally, and we will use space y eight. That means we will make some space vertically between them. We also set there height two full. As before, you can basically just copy paste this. We will add this mapping over Nablnks array with Link being the name of the current item and index being the position. Then this index we will use in key. After we will create the Link tag, we will set there Hf toolink dot path and Link dot title for the name of the navigation item. Now we will save it and we can see it on our page. We also edit their on click function for closing the navigation. Let's click, for example, on the portfolio. With this, we can wrap the Navbar component. 29. Reusable Component: Portfolio: A portfolio section, we will start with the imports, and then we will continue with creating constant of project. Into this constant, we will load our projects, and then we will iterate over them and display them in our cards we will code. For projects, I will put their ID. For the first one, it will be one. Then I will put their title, then category. And last one will be the image source. For the first project, it will be just this project one. Now I will do the coma, and I will copy this three more times because I have the four projects in total I will be displaying, or I will just update the IDs. I will update the project image source. And now I will figure out some description, and I will use these four websites I found on framer now into our functional component, there into the return, we will delete these empty fragments, and we will start with the section. And for this section, we'll set BY for 16. So we have some padding from top and also from bottom. And then inside, we will continue with the mapping over our projects. Let's do their projects dot MAP. Project index, and inside, we will start with the motion Div. Let's now go to the top, and there we will import motion from frame or motion. Now there we will use motion div and now there we will do motion Div. Inside this motion div, we will put all the content. We will define now the first motion div starting tech and there we will set key as project dot ID. Now we will set the class name. We will use border with border white 0.2 opacity, then flexbox layout with flex direction column that means elements inside this dipth will be below each other. Then we will continue with on a medium screen on test coversion. We will do flex raw. That means the elements will be next to each other. We will set there text to white, and also we will set there rounded Excel. Let's do Tree Excel. Now we can see already something on our page. Then we will continue with background that we will set gradient to right, and we will set its colors from via two. Now as it's some codes I defined in figma earlier, I will just copy paste it there and it should create some grayish color. There we will do some bedding. Then also, we will set there justify between. That means we will have even spacing between our elements in this diff items start margin to bottom. Also for now, we will set width. Let's set some initial width on mobile screen. There will be 300 pixels, and on a medium screen and above, let's use something like 1,100 pixels, but we can adjust these values later. Now we finally can see the shape of our cards. We will want to have this sticked on top. Let's use a sticky glass with top 28. That means when we will be scrolling, these items will be sticking over each other, and it will create the stacking cards effect. Now if we go to the wrapping section, we can put there container and a mix auto. That means our projects will be centered. If I will put there something like main height to 300 viewporteit, I will be able to scroll down on my page. And you can see there is the first card, and this I'm scrolling down they are getting on top of each other, and then how this will work is that there will be another section, and this portfolio component will just get out of the viewport, so we won't see it. And when we will be scrolling up, we'll be again seeing all the cards below each other. Now I will define their initial state of our animation. That means we will start with opacity zero. That means the elements will start invisible and also this Y, it will be 50 pixels below its final position. For next one will be while in view, and this while in view is the definition of animation when the elements will come into view. There we will set opacity to one and Y to zero. Then it will be transition. That means the duration will be for us half of a second and the delay will be index times 0.2. This means that there will be some delay to the animation, and that means that not all elements will get shown on our page, but with the index, it will be more delayed. How it will look like is that the first card will be displayed first and then the rest of the card will be slowly displaying after this one because then it will create this wave effect when the first element is displayed and then slowly, all of the other elements are also displayed. Now also we will define a view port that we will set once True. That means that this animation will trigger once the element will come into view. That will be for the motion definimation. We will start insight with the paragraph tech inside this paragraph tag, we will have a project dot category. Below, it will be heading two. There will have project dot title. And then we will have an ordered list inside this unordered list. We will have a list item, and inside these list items, we will have bullet points. What we achieved with the project there in paragraph tech inside our list item, I will put enhanced user experience by 40%. For the project category, I will do something like text to gray, 200, then text to small. For the project title, I will do text to Excel, font, both, and on medium screen, we can increase it to text for Excel. For the unordered list, we will do space Y two. That means all these bullet points have some spacing between them and not arches stacked on top of each other. For the list item, I will do flex box layout, and items to center. And then next to this bullet point, I will do some react icon. We can do AI outline check. For this icon, we will use react icons AI. Let me do NPM I react icons. Now if we will do this check, we have this option for this library. I will enter. That way, it will get imported. Now if I will save it, it will work. On our page, we have this icon, and we will add the class name with width 25 and height 25 and text Emerald 400. Now let's check the page. We didn't increase it, but these are some values that you can increase in case you want this check bigger. I will leave it like this. And I will also set there to this list item space X four I will take this list item, and I will paste it two more times. And then for this enhanced user experience, I will just take it and change it to some other text. We can do improved side speed by 50%. And for the last one, increased mobile traffic by 35%. Of course, these are some example values that can be there. And also, currently we have this hard coded. What we can do is that we can create there a new field. I will do bullet 0.1. Then I will copy this, paste it, do bullet 0.2, and three. Then I will take this even with the comma, and I can put it to other projects. Then I will take these values. Put it there. Also this bullet point. And even the last one. And there in the iteration, I will do project bullet 0.1, paste it for the other ones, do bullet 0.2, and three. And now, for example, if for the fourth project, I will change this to some random thing. On our page, you can see that we have it fine, but just for the first one, we have the different value. Now we have some issue with the first card. Did I forget something? Yeah, I forget to actually put the values there. Let me just put it like this, save it. And we'll continue below the unordered list with the image. And for this image, we will set a source of project, image source, then to, we will put project dot title, then to wit, we will put 500 to height, we will put 300 and to class name, we will put rounded large. Now we will save it. You can see how our project cards look like and few things we should do. First one is that we should take the rounded of same value that we have in the motion div. We are using their tree Excel. That means we will put it also for the picture. Then there is not an issue in this medium flex row that should be like this. There is an issue missing a div there. This flex row, we now want to have a div for the text, and then the image element is fine on its own because it will be put on the right side. As it's flex row, it means that if we will put this text into a div and let me also do a tab there. These two elements will be next to each other, and on a mobile screen, they will be below each other with this flexible direction column. What we can now do there into this div that holds our project information, we will set there space Y to four. Then also, if we will go into this wrapping motion div, I would put there space X to four. And I would even do their space y26. Now if we will check the page, we will need to increase the margin to bottom. There, let's increase this to 24 and also we will go into this motion div and we will put the Mx Auto. Now it's centered and now we can test our portfolio section, and as we are scrolling down, they are overlapping each other. That will be for the portfolio section. 30. Reusable Component: Portfolio 2: We will first enable client side features with use client. Then we will make import of react and use State Hook with use effect Hook. Then we will import image from next image. We will import project images from Assets folder that we will be displaying. I will create const projects, and there for each project, I will create an ID. I will create here, I will create a title, I will create some short description, and I will also put the image. Now below, I will add more projects, and it will look like this. I will be using three projects in the portfolio component. I will initialize state for the selected projects with the folding to first project. So there we'll do projects and first in the array with zero. This will be the state variable, and with this, we will be setting it. Now we can go directly into return. There we will start with section. Inside this one, we can do ID of portfolio. In a class name, we will do PY 32 and text to white. Inside this section, we will start with heading two. With heading two will hold the heading of selected projects. We can put the projects in a Spen tech in case we would like to add to it a different color. Also for the styling of Heading two, we will at text six Excel, font bolt, and margin the bottom to ten. Below this heading two, we will do mapping through the project array to create the project items. I will do projects dot Map. Name of the item in the iteration will be project. There we can open our dig in this div, we will set a key as project dot ID. We will set OnClick function. Onclick function will be the setting of the state variable. There we will do set selected project. To project. Now we will do tail end classes. That will be cursor pointer, margin to bottom, and group. We will continue with displaying project here. We will do the paragraph tech with project dot here. Now we will add some styling to it, and that will be different text color. Also text large and margin to bottom, and below, we can continue with heading three. This heading three will hold project dot title. The styling we will add there will be text free Excel, font semi bolt group, our text gray, 400, transition colors, duration, 300, and we will do that one more thing. Let's put there back quotes with the curly braces. Because inside, we will check if this project is the selected one, and in case, yes, we will display the different text color. Let's do selected project dot ID equals to project ID check, Turner operator, and in case yes, we will do the text gray 200 in case no, we will do nothing. So the false position will be empty. We will be using transition colors because it will enable the smooth transition specifically for the color related properties. So as we are using this group however, it will be handy. Now we can already see on our page that we are getting somewhere, and we will now continue with showing the divider line in case the project is selected. We do their condition. So that project, dot ID equals project ID, basically the same as we used there, but we don't need to use a turning operator. We will do that just conditional rendering. So in case this will be true, we will display empty DIV. And to this div we will add border bottom two class with border gray 200 and also MI vertical margin to four. We can see on our page that we have selected the first project is there. If I will set the second or third, it will be moving. Another conditional rendering we will do, so we can just copy paste this will be on the project description. In case the project will be selected, we will show the project description. I will just open this dif, put there project dot description, and I will change this div tag to a paragraph tag. Also, I will add a bit different classes. I don't need the border. I will add text gray, 400, transition all duration, 500 and easing out to have the smoothly displayed. Now we will scroll on the top of this return, and there in the section, we will create a div and we will wrap this div around this mapping. Now for this div, we will add some classes. Let's start with maximum width to seven Excel, then mix Audio, px four, that should be it for now. We will move down and below this div. We will put an image tag there inside this image tag. We will set source to selected project dot mag dot SRS. For all, we will do selected project dot title. For class name, we'll round it, Excel, shadow large, transition opacity, duration 500 and this in out for making a smooth animation. Also, we will set the width to 800 height to 450. We will save it. Now it should be fine. Now we need to play a bit with the diffs there. Let me add the additional div to wrap this project information we created there. Now into the second div we have there. We will add classes of grid layout, and on large screen, we will use grid calls two with Gap 212. Now, it should take this div, and of course, the closing of the second div we will put below. Now on the page, it will be fine. Now also we will format the code. You will see the div structure better. This should go one further. This should go also one top further, we will move this, and that should be fine. So we are starting there with the section tech continuing with the DIF. Inside this div, we are having a div that is holding the project information and also the image with the project itself. 31. Reusable Component: Services: Services component, we will do inside the component an array of service objects containing the information about each service that we would like to offer. Each object will have an ID, title and description property. Let's do their constant services. And inside, we can do the first item where we will set the ID, then title, and also description. Now I will add more services, and in the end, the array will look something like this. In the return, instead of the empty fragments there, we will do a section tag, and inside the section, we will be adding other elements. For the section itself, we will class name of text white and PY 20. To have there some vertical bedding, then we will add a div, and we will add to it tail wind classes with container, and mix Auto to centrate and flexbox layout to use flex direction Colum to have our items below each other. On medium screen and above, we will set there flex direction row. That means the items will be next to each other. Then we will add two divs. One will be with services heading and the second one with the items from our array. The first day will have a tail end classes of medium screen above using one quarter of width, patting right will be set to eight, margin to bottom will be set to 12 and on medium screen, we'll reset this margin to bottom to zero. Inside, we will do the heading two with services and we will set there text, six Excel, font extra bolt, sticky position, and top 20. Which is the position where you would like to stick this. What does sticky position means? It means that whenever we scroll, the services heading will scroll with us. We will add another div, and we will sit there for medium screen and above width to 75%. Inside, we will start mapping over the services array. There the item will be service. We don't need to use index because we will be using service ID as a key. And for class name, we will use margin bottom to 16 and flexbox layout to use items start because we would like to align our items there. Then we will add two more difs. One will be for holding the number, which will be the ID, and second one for holding the other two fields, title and description. For the first dif, we will use text grade 300 color font bolt, text five Excel, and margin right to six. For the second div, we don't need to do anything. In the first div, we'll also add service dot ID. Now if we will save it, you can see we have their numbers for all of our services. What left is that in second Div we will add the two other fields, and then the section will look like this. For heading three, we set the service dot title, and for paragraph tech, we set their service dot description. For the heading, we also add text to Excel, font bolt, and margin bottom two. What we should also do is that we will take this array and we will put it outside of the component definition because we want to avoid recreation on each render. Now, this is how these services will look like on other devices, and that will be it for this component. 32. Reusable Component: Stack: The stack component, we will do these in ports. In case you don't have these libraries yet, open a terminal, do NPM, I, and copy these libraries. For example, this react intersection observer. That we will use for the animation to reappear to get this using view when we will be scrolling up and down, this animation of stack will be reappearing. Then framer motion. Again, if you don't have this yet, just NPM, I and put it there, react icons. Also we can put there. That means we will have access to these libraries with the icons we will use for our stack. Now we will enter and we'll install the libraries, I already have them, but I just can do it again. Now before defining the stack component, we will create there an array of stack items with stack items. And there for each item, we will have ID, then name. First one will be framer, then icon, first icon will be the framer one with size to 100. Then on color, I can sit there for now text green 200, and then we can put their comma and paste it there as many times as we want. I will update the names and icons. And I also selected some different icons for the other four icons because there was some placeholder icons. Now we will use Framer Figma, react note, Mongo Di B, and Docker. Then we will move below, and there we will start defining animation variants for the stack items. I will start Cs variance or item variance. And there I will put variant for hidden, which will take index number. There it will have opacity to zero and for X, we will take the remainder of index, and if it's zero, then it will be -100 on true position and on force position, it will be 100. This is something called turner operator. By this, we will do that the stack items will go from left and from right side depending if this is true or false. Then below, we will have another one that will be called visible, and for this one, we will set opacity to one, x to zero and transition to duration three. I started with the wrong break it down to do Carl one there. Let's change it for the square one, and below we can start defining the stack component itself. Inside, we will start with setting up the animation controls. I will re constant controls, and I will use animation. Then we will set up the intersection observer. That means we will now set the thing, we import it there. And with this, this animation will reappear when we will be getting this component back to our viewport. There I will do a constant, and I will use the ref and in view for use in view. Inside, I will do threshold 2.1. Then I will continue with setting the use effect hook to trigger the animation based on the view state. I will do use effect then inside, I will do I condition, and if this will be in view, then we will do controls that start with visible. And if it won't be in view, I will do controls that start hidden. Which are these two item variants there? And then we will say there that this effect will run whenever the controls are in view dependencies will change. That means it will trigger the animation to start when the components will come into view, and it will also rest the animation when it will get out of the view. There, we will do a section tag. And inside this section tag, we will start with Div and let me explain why I'm doing the additional Div and not doing it in the section. For this div, I want to set maximum weight. For now, we do something like 250 pixel because we just want this to be vertical, not horizontal, but we can also adj this later and just change it to horizontal and set this to mix Oddo with text to center. So we have this center. For the section. If I want to put some special background for the section, maybe some linear gradient, I could do it there, and it will be a full width. For example, background to white. We need to put there some content. And let me put there some content and let me put their background to green. Now you will see the differences. If I will go to our page, you can see that the background white in this wrapping section tag is taking the full width and the content that I want to use with this background green is inside, and it has this maximum weight that I set to 250 pixels and centered it. If I would like to do it there in the wrapping section, it will take the wall section and the actual background that I would like will be looking like this. Let me then use it like this. For now, let's get rid of the backgrounds. There I can start with heading two. Inside this heading two, I will put my stack. Below, I will do a div. And in this div, I will be iterating over the stack items. Inside this stack items iteration, I will do a motion div. And before we start doing this div, I will just style the heading and the div that is wrapping this. For my stack, I will use text seven, Excel, text gray, 200, font bolt, and some margin to bottom. For this div, I will just use grid layout and gap to eight default lay. There will be just grid coms one. That means all these motion diffs will be below each other, and it will be in one column. Let's see how this will look like. Let's just put the motion div the index dot ID. For the key value, then for custom, we will put index. Then initially, this will be hidden. And, of course, not index ID, but item dot ID. Then we will continue with animate two controls, then variants to item variants and for a class name, we will set background white too 0.1 opacity. We will continue with flexbox layout and center this with justify center and items to center horizontally and vertically. Then flex raw, that means elements inside the stiff will be next to each other. Then we will use rounded Excel, shadow large, some bedding. And on Her, we can just do shadow to Excel, now inside this motion dip, we will create a div for the icon. There we will do m dot icon. We can add some class to it, and inside, I will do their margin to bottom and dollar sign m dot color. That means it will set there this class name of item dot color, and we have set there text green 200. Then we have there the icon itself, and below, we will do the text where we will display item dot name. There I will do text white with 0.2 opacity, text three Excel. Transform and rotate by 90 degrees. And now for the dive that is wrapping this iteration, I will put the ref to rev. And what this means is that this helps our animation to know when this container is visible on the screen. We can see the animation, how it goes. There is just one thing I need to fix. We are missing T to our rotate -90 degrees and I will refresh it. You can see how the animation works, and that will be it for this stack component.