Animate Websites with Framer-Motion (Hands-On 2+ Portfolio Projects with React, TailwindCSS, NextJs)

1. Intro: Class, you will learn how to animate websites using motion previously known as Framer motion. We will start with the basics, do a few fun challenges, and then build animated portfolio websites to practice what you have learned. I will explain the code step by step, and you will also get to use Talen CSS and the next JS to build websites. There is also class project where you will be creating your own animated website, and this course will be hands on. Now, let's take a look at the portfolios that we will build together. In this section, we will be creating this portfolio with changing colors. You can see that we have also some stars on the background in this your section that will be a simple import from React three library, and we will have there this Snovbr at section, interactive portfolio section where we will be changing projects like this. Contact also with the footer, and let's again, see the animations. I I will refresh the page. There you can see the animations on the hero section. The sections are changing colors. It will be up to you which colors you will define there. I will be using five or six colors that will be changing. There you can see the text text section, But me section. I logo animation section that will be dividing portfolio and about me, then we have the portfolio and the contact with Hooter. And for the next project, we will have this hero section. Then behind this image, we'll have this rotating object where you can simply change its sizes and style, so you can adhere more or less of these objects with a different shape. Behind, you can see the text where we can put our name and our position. Then we will have this about section with the key metrics of our projects completed, years of experience, technologies or so. Then we will have this text reveal section. Then the portfolio with selected projects. Our services that we will be offering and the footer section with very simple contact me option and social icons. Of course, everything will be responsive and animated. I'm looking forward to see you in this class. 2. IDE: Let's download an IDE. It stands for Integrated Development Environment. It's basically an app where you write and manage your code. You will build all your websites here and wide to use VS code. Probably the most popular IDE right now, and if you are planning to work in a company, VSCode is what most developers use. I use it at work myself, and I would say 90% of developers use it based on my experience. There are other IDs, and it's not a hard to switch later on to some other one. But sticking to one ID early will be effective because you will get used to things like seeing co differences, merging changes, pulling and committing to get, using some shortcuts or extensions, and just get used to smaller features of the ID. There is an IDE code cursor, and it's quite popular nowadays. It's basically a version of VS code with AI built in features. Will get a similar AI help in VS code just by installing extensions like Ro code, for example. But here's my advice. If you are watching this course, you probably want to learn and understand how websites are built. That's why I suggest not jumping into AI tools too fast. Use them only when you are stuck. You want something explained, and once you are comfortable with react and tailwind, then I would start using AI tools to build faster and smarter. For now, it will be just creating websites for you. It will be hard for you to understand where it is coming from. Or if you would like to do some update that AI wouldn't be able to do it, you will get in the same situation where you will get stuck. So for the first projects and learning correct entailment, I wouldn't use that much of an AI, give it some time, be patient, and then you can start using AI, and you will have much more fun than if you start using it right away. There on this code.visuostudio.com, you can download VS code, and in next lesson, we will get to downloading Node JS. 3. What is Node.js: Note JS. Before we download this, let's quickly understand what it is and why we need it. No JS is like giving our computer the ability to understand and run JavaScript outside the browser. Normally, JavaScript runs in a browser like Chrome. But when we are building websites or applications using tools like React, NextGS or Tele in CSS, we also want to run the code on our PC. It will give us a tool called Node Package Manager that will let us download and manage packages. For example, to start a local server, we will need to do Command NPM run Def. Every modern JavaScript project will depend on noJS. It's like the engine that powers all the development tools. I'm now on this page, nogs.org. I will click Download Nojs and then you will install it. 4. About TailwindCSS: Will go onto tailwinss.com because for our project, if we react or on the next JS, we will be using tailwind CSS for styling. When I'm creating a project, I'm always going to tailwins.com check if there are any updates to Tailwind if there are any new commands. I will click there on G started, and there you will now select a framework. If you want to build with react, I definitely recommend to use VID. WVD is a tool that will help us start and run our web project faster than older tools like create react application. And when we will change our code, WVD will show updates immediately in the browser. We don't need to refresh. It's faster and more optimized for today's browsers and tailwind react or framer motion. Everything works very well with ID. We will select using VD and there we have all the commands and the setup we need to do for our project. If this change and some newer version is released, it will be just changed, and you will use the latest commands or setup that you will need to do at the setup of the new project you will start building. And if you like to use NextJS, we will go to Framework guides there to NextJS. We will have a step by step how to create NextGS application that will be using Tailwind. At the beginning of every NextGzPject, you can just go there, set it up like this, and then you will be just programming and building your website. React is totally enough for all the projects because we'll be building websites, usually a single page website and we don't need NextGz for it. Even though I will use it for some projects because I also want to prepare you for building websites with NextGS or frontends with NexJS because it's a very popular framework. And if you would like to build some full stack projects in the future, you will be probably using NextJS. It's definitely good to know how to create some lending pages. Then you will be just adding backend, and same applies for portfolio websites that we will be building in this course. Maybe you would like to add some back end features, for example, some subscription list and so on, reading your database and then displaying some of your projects in portfolio, so it can be dynamic and you can set it from some Admint dashboard. If you would like to build all of the projects, we are building in this course in react. You can definitely do it, even though I'm building them in Next JS and the other way around. 5. How to Setup NextJs Project: We'll create our first project with NextJs. I created a new folder, NexJSFPject, and why in this course on front end websites, we'll be using Next JS. Even though we will be just creating front end, NextJS will give us smoother developer experience. For example, built in outing, we don't have to set react router manually. CO friendly. That means our website will be better for Google search. Past performance, image optimization, and overall, it's good to know how to create a project with NextGS because then you can also include a back end, build on top of your project with some additional features or just be prepared in the future. If you will be building a full stack applications, you will already know how to build some lending page and then just build a back end to it. We will go tailwnss.com. There we will select framework guides. We will go into NextJS and there we will use these commands. I will use the first one. I will open a terminal, again, use shortcut or this new terminal, paste it there, and I don't want to create my project folder because I'm already in the folder where I want my project to be, which is this next JS first project. So instead of creating a new folder like new folder, I will put there dot, and I will now do yes to tailinCSS, no to source director, no to Turbopek, no to LIS. Now it will install all the dependencies, and then we will be ready. There are also other steps on the TailinTSS comp page. But if you will check it, we have everything set already by the first command. So in Post ESS, there is DelwnTSS. We will go into Global Zoo TSS, there is Delwndimported. And that means if you will go into PageOTSix which is like app J six in the previous lesson, there will be all the content we would like to display on our page. What we will do is that we will open a terminal and do NPM run which will open local Host 3,000, where our website will be running. Now we will have the next JS template. And if you would like to use the tailwind, which we already know it's working because all these classes are tail end classes, we can still something. There we can add seven Excel, and you will see that on your page, it will be applied, so tail end classes are read and applied properly. I will now show you how you can build your page from components. Let's do the same example as with the previous one. Let's create Navbar and Hero section. I will create there in the root folder, a new folder called components. Inside this folder, I will create another one. I will just call it lending page. And inside these components, I will create Navarra, and inside this landing page, I will create he dot Tsix and y dot Tsix. It's like dot JS six, but we'll be writing react components with typescript. It will work all the same. We don't need to write extra typescript stuff if we don't want to, we don't need to worry about typescript or types right now. We will build UI the same way. But we are using this because I'm also trying to prepare you for building a full stack with next JS. When you will start ding backend, you add also typescript specific things later on. But even without types, it will work better with libraries like ChetCN that is a UI library where you can take some code and put it into your project. We can do AFC, but we don't need to import react, and same thing for Navbar, AFC, but again, react import is not needed. Now we have it. We will go into page TS six. We can now delete this template we have there, and we will just put there Navbar, import it same way like we did before, and Euro, we are not using this image. We can delete it. Now we can go to our page, and we have the Navbar and Euro. And now I want to show you the routing. So let's create a dashboard, for example. In app folder, we will create dashboard folder. There we will create page Ta six. There we will do export default function, dashboard, we will return a div and in this div, we will just write dashboard. Now we will go to our page slash Dashboard, we will get to another page, and it will be our dashboard page. And there again, we can add components. So let's add there just hero section for now. Which of course is duplicated and doesn't make any sense. But yeah, we can reuse or add the other components. So we can build pages like this. Now let me explain what layout does. There, whatever you will write there. Hello, I'm in layout will be displayed through your all page because dashboard is also using this parent layout. There you can now see, hello, I'm in layout. We can edit the Navbar because we will be using Navbar through our all application. So now I edit it and I will have it there. That means I don't, of course, need to have it on our page TS six in app because it's already in its layout. And if I would like to create this layout TS six in dashboard, it's also possible because you can have additional routing inside Dashboard. I can have their dashboard profile. For example, so I will add page DTS six, and if I want to add some admin sidebar, I will add it to this layout. And if I will go to Local Host 3,000 slash Dashboards Profile, I will still have the sidebar that I will add in this layout. That was just something to explain for the routing and for some basics of next JS, so you understand. But of course, we'll be creating a single page applications, mainly in this course. For that, using VD is enough, but if you would like to use Next Js, you also can. And some projects I will build with VID. So projects I will build with next JS. Landing pages for SAS applications will be Next JS, because there you have the option to build your backend on top of it, and it will be then easier for you, but we'll be also creating some portfolo pages. And this is how you will set up your website with Next JS. 6. Motion Basics: Now go through some basics of motion. You can use the project that we set up in how to set up project with react and wheat. There, for example, in hero component, we will first import motion package from motion React. Then in return, we will create a div that will be wrapping deck named motion.h1. In this motion.h1, we'll have something called properties, and that will be a class name with tail end classes, and then we will be setting the animation props there. Now I can set text seven Excel and text red 500, and there we will have the text with applied tailnd classes. And below I can start with the animation. First, I will define initial, and this will be how the element looks before the animation starts. Make it invisible, I will make the opacity zero and 50 pixels to the left. That means it will start invisible from the left side to now when we will set while in view, and we will define there that this should be visible in the end, we will set opacity at one and the final position will be X zero. Then the text will be displayed on the screen from an invisible state and left side. We will save it now and we will go to the page and I will refresh the page, you can see how quickly it went from the invisible left to the final position. But of course, we want to increase this time, so we have this animation smooth. That means we will sit there also transition. For transition, we can set the duration and I will sit there now 0.6 seconds. This will be a smooth and quick animation. I can increase or decrease the time also. Let me now again refresh the page. You can see the slow animation, how it's going to the final position. And there are even more props that we can set. So for example, viewport once, true, and what this means. This will tell the animation that it should happen only once. If you will say they are true, this animation will play the first time the element is seen, and never again when we will be scrolling and now we will at animate prop, we can do even more things. For example, rotate 360. Now if you will refresh, you can see what is happening to our text while it's still going from the initial position. If you want to play with initial position a bit, we can also set into the position scale zero. And to animate, we can add scale two. Now, if you check the page, you can see how it pops up. But to be honest, some kind of things like, for example, the scaling and everything, it's hard to integrate it into the web design, so it doesn't look too funky if you know what I mean. We can also add Wilhoer and there we can add scale to one. Let's change Wilhover to scale two and initial scale one. Now let's try to hover over the heading, and you can see how it's increasing. Of course, scale two is too much. Let's use 1.1. This can be good for some hovering animations. Then we can also add Wild tap and there we can set a scale to 1.1. We can delete while hover. Now, it will be reacting just if we will click on the heading for the challenge purpose and for some nicer view of the animations, let's change this motion H one to Dev. For cases, let's just add some height. Let's do two and with, let's do four. Maybe more. Let's do 40 62. And let's do background gradient to right from red 500 via pink, 500, two orange 500. Yeah, something like this. We can add some rounded corners. Let's do rounded Excel. We can delete the text tailin class, and now we have there the dth. We can also delete this hello and this closing tag. We will self close the first tag, and now we have there the box. So for this box, while we are tapping it, the animation is increasing. Now what we will do is that we will set initial scale 2.5, then position X to -100 and opacity to zero. You can see how it's moving. We can increase the duration. Let's do, for example, two, that's too much, but for this purpose, you see the animation, it's good. And the next lesson, we will do a challenge. 7. Motion Library: I also recommend using this page, motion dot Dev. There you will click on. Quick Start, select, react. There are a lot of components that you can also use, see how they work. For example, Hide and Show. You can see there, there in motion are some examples we did together, like the animations there, houring and definitely explore this motion Dev page. You have a better idea of how this works. Now, in some of the projects we will do in this course, we'll be using this motion library for our animations. 8. Challenge 1: You can now see the output of the challenge. When we will get on the page, the div will animate from top and from opacity zero like this. And then when I will hover it, it will rotate by 90 degrees. And while it will be tapped, it will be rotating by 360 degrees. Now, stop the video and try to recreate this animation with this box. Now let's check the solution of this challenge. First, the initial position will be Y -100, so it will go from top. And also, to make this invisible, we will set opacity to zero. Then we will continue that in a while in view, we will get to the final position y zero, and we will set it full visibility with opacity one. For transition, I will set duration one because if we will set more, then it will be too slow. In practice, on our websites that we will be building, we will be using a lower values, maybe like half second or something. Now for seeing how these animations work, I will be using something like one. I will set in a viewpardO to true. For this animation, it's enough if it will happen just once. So when we will load the page, it will get to the final position and then it will be there. For some other elements on our page, like some different animations that we will do, we will make this false, and I will show you how to make these animations reappear when we will be scrolling through our page. While, however, to make this rotate by 90 degrees, we will set rotate to 90. And then on Wile tap, we will set rotate to 360. That means when we will be tapping on this, so we need to hold our mouse button, it will be fully rotating. 9. Challenge 2: Now let's go to the next challenge. We will animate left and right paragraph tag. But when you get on the page, it will slide to the final position from left and right. Consider also we are talking about paragraph text, so you should change the tech itself from motion div. Then you should add some tail end classes to make this more visible. Now I will display tail end classes I will use for this motion paragraph text. You can see that I'm using text Tcel some maximum weight, and centering it with Mx Auto, which is giving a horizontal automatic margin. If I delete this automatic margin, it will be on left. So now you just need to add the props for this motion tech and then the animation should look like this. You can now pause the video and then after you are done, you can see the solution of this challenge. We will change the motion di to motion paragraph. We have the proper tech. Then we will adoptailment classes. I will use the size of Excel, maximum weight, and mix auto to center this. Then initially for the left side, I will start on X -100 and I will use zero opacity. Final position will be X zero and opacity one, so it's fully visible. The transition will take 0.6 second, and viewport will be once true. Now to put there also the second paragraph, I can just copy paste this. Make it text right. And the only thing I will change is that it won't go from left also, but it will go from right. Now, if I will save this and refresh the page, you can see I have there the solution animation. 10. Create Reusable Navigation Bar: 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 violin to track if mobile menu is open or closed and Set NAF will be a function to update the NAF state. Deftly 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 to 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 togonp 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 Nevelnks 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 onclick function for closing the navigation. Let's click, for example, on the portfolio. With this, we can wrap the Navbar component. 11. Project 1: Intro: In this section, we will create this portfolio. We have this hero section. Then behind this image, we'll have this rotating object where you can simply change its sizes and style, so you can adare more or less of these objects with a different shape. Behind, you can see the text where we can put our name and our position. Then we will have this about section with the key metrics of our projects completed, years of experience, technologies or so. Then we will have this text reveal section. Then the portfolio with selected projects. Our services that we will be offering and the footer section with very simple Contact me option and social icons. Of course, everything will be responsive and animated. 12. Project 1: Setup: You will start with a setup. First, what you need to do is that from the section, how to set up a next JS project, you will execute all the steps. Now we have it there. I'm on the page TS six. There I will be putting all the components that I created there. So you have the app folder, components folder, and in components folder, you will create the components, you can prepare it. Now, of course, in the upcoming lessons, we will code them together. And in public, I created Images folder, and there I will put profile picture. And some project picture, I will use these placeholders. For the profile picture, I basically took a picture. I went to check GBT, and I told it to transfer it into Gib Studio style with transparent background. It generated this picture, and I will be using it for the profile one on this portfolio. Now I can go back to page and before we start, we will install two packages. I will install framer motion and react icons. We'll do NPM I framer motion and react icons. Now, these two packages will be installed and ready for the use. Let's continue to the next lesson, and that will be starting with the hero section. 13. Project 1: Grain Effect: We'll start with few things we need to set. And that will be first getting this hero component on our page and then also the grain effect. That will be on our portfolio website. Let's start with the hero component. So we have it there as we created it, we will export it into return. We will now just do empty div and we will fill it later. Then we will go to page. We'll just make sure it's imported, and now we can continue with the grain effect. So you will get this grain picture in assets, and you will save it into images. Next thing, what you will do is that you will go into Layout T six, and there we will import this grain image. Then in layout, we will create this div and we will set there a class name of fixed inset zero -50 Z index minus Z -50 and opacity 0.05. What means this inset zero? As we are using the position fixed, that means this will be fixed on our viewport. It will go with us when we will be scrolling. Inset zero is basically just telling, Hey, this is top, right, left, and bottom position zero. Minus that -50, we want this on the background and opacity 0.05, actually. So it's really slightly visible. And last but not least in Global D TSS, we just want the background color. You can s there this dark gray. Now we can go to hero component and there we can start with the coding. 14. Project 1: Hero Section: First I will start with imports and defining this component as client one with use client. We will import image from next image, motion from frame or motion that we will use for the animations and our profile picture. Then we will continue with creating an array sizes. We will put the sizes of the rotating objects that will be behind our profile picture. I will put there three sizes, and if you want to make this circle, you can easily do it by just setting same width as height. And you can play with this, adjust it to your design and add more or less of them. Totally up to you. We will for now use these values and these three sizes. For the wall Euro section, I will set vertical padding to 96. I will continue with the relative class because we will be using absolute classes inside this div, then overflow clip, that means any content that will be overflowing horizontally won't be displayed, so we won't be getting any empty spacing around our section, and then I will create another div inside this one. Into this div, I will put an absolute class. And inside zero. So again, we will set all the sides top, right, bottom, and left to zero position, and then I will center all the items inside. I will put a flexbox layout, and with items center and the justify center, I will center them horizontally and vertically. I will set that index to zero. So I will say the position of this div so far below this diff is only the grain image which has index -50. Then overflow hidden, so nothing will flow out of this div. Inside this dif, I will create H one tech. There we will put a text that will be on the back of this section below all the other elements that we will put there. I will set there text to ten RAM because this text should take almost the full size of this section. Then I want really low opacity, even lower than 0.05, so I set there 0.02 on the bold, I will set text purple 200 and whitespace, no rap. What this means that this will stop text from wrapping to the next line. So you want to keep all the text in one line because, for example, we will have there our surname and we don't want to cut it in half. I will put there John Doe in the next line, you will probably put something like full stack and developer. And you will put there to break text. That means it will jump on another line. Let's continue with another div. Or this div, we will set width to full, and we'll be centering all the elements inside with flexbox layout, justify and items to center. Now we'll set that index to ten. So this element is above the set index 01, which is this one with the heading with the text we have there. Then we will also set the absolute position instead zero. So we are setting all the sites to zero position. And we'll put there the image. In the image tech, we'll put a source, which will be the profile picture. And you can see we need to add some class names. We'll just add old profile picture and for the class names to fix this, we'll add width to 170 pixels. We will center it with Amex Ato. We will set a relative class and that index to 20. So it's above the Jon Do flute developer text behind. Then we will add motion div and into this div, we will put the shapes that we want to add behind our picture. That's why we set that index ten here. Because we want this still to be above the text Jon Do flute developer. For this motion di, we'll at absolute position and in set zero again set the position. Then we'll at animate here, and we would like this to spin. So if you remember from the section where we did the animation basics, we'll put the rotate 360. For the transition, we will set duration, so 60, but this doesn't matter that much because we will set repeat to infinity. And then the e we will set the linear, and this means that the animation will move at a constant speed from start to end. Now let's continue to the sizes, finally. We will map over them. I will put the array name, sizes dot map. I will put there the name of the current item in the array, and its current position will be index. So then I will create a motion div. Inside this motion dif, I will put the key a index because react needs a unique key for each element so it can track the updates easily, and then for the class names, we'll put there the backslashes, and inside, we will put absolute position, and now we'll move element 50% from top and 50% from left. And with this translate, we will pull it back by 50%. And with this, we will reach the perfect centering. Which is needed because this should be exactly in the middle as it will spin around our profile picture. Now you add a shadow. What these values means zero is no shift left or right. Becon zero is no shift to top or bottom. Then this is blur radius, and the inset means that this shadow should go in instead of out. Then we will set the color of this shadow. It will be purple 200 with 0.1 opacity, so it's really slightly visible. And then for the styling, we will set the width and height, and this will use size dot width and size dot height field that we set in this array there. Now we'll also add paragraph tag and into this paragraph tech, we will add size dot text. There we will add some color with low opacity, text five Excel, and we will center it with text to center. And now what will happen if I will, for example, there in the first array item pot flutec developer. I will save it, and now let's check our page. You can see that the text got on the first tape, and it's also rotating. What you can do is that you can add there some text that you will choose, you add John or maybe John though if you want to play with this, you can also add text on these shapes like this. Of that is something I want use for now, you can play with it and maybe use it if you like it. Also, I would change text green to text purple. 15. Project 1: Services Section: Or the next section, we'll create component services. We will put it on our page. So I will add services, import it. Now we can start with the coding. I will show you how the section should look like in the end. We are on our website, and there be the portfolio. We have the services. I can now refresh the page so you will see the animations. And there into this section, we can note which services we are offering, for example, full stack web development, API development, cloud integration, and so on. And now let's start. First, as usually, this is a client component, so use client, and we will import motion from frame or motion. Then we will continue, and as before, for the portfolios, we will create again an array of services before we created an array of projects or portfolio projects. Now we are doing services. So let's create an array, and for each item, we will set again an ID, then title of the service, and then description of the service we are providing. Will fill these values, and we will put there services if you for now don't know, let's put there at least three so you can see the animation. I will now show you what I have there so you can get in some inspiration in case you don't have anything in your mind and you just want to fill there some data. And now let's go to the component and start with coding. In the main div, I will set some vertical padding, container class and center it with mix auto. Now, I will put there some content inside and put the background, I will see where exactly I have this on my page. But why to put there just this content? We can start with the heading too. And put there my services. And we'll put services in a Spen tech. Now let's quickly go to the portfolio because I don't remember which span color we were using. And for the title, it was text purple 300 with 0.6 opacity. That means we will reuse it also for this span, so we keep the same design. And for the heading, we will set text seven or six Excel on both, text to center, and text to white also. We will remove the background white, and that's perfect. Let's also set there for the heading to margin to bottom. Let's set 20 there, and we can continue. We will create the div, and this div will hold all the services. So we will put their services dot map. Name of the item in the current iteration will be service and its position will be index. There we will open and create another div. And in this dip, we will put the key as index, and now we can go to the wrapping div. The wrapping dip, we will set a flexbox layout and flex direction column because we want these services be below each other. We will put some vertical spacing between them. Let's set space Y 12 and some horizontal padding. Let's set x four. Now into this div, let's actually change it to motion div, and let's continue there with the classes. I will set there flexbox layout, actually, we can move this flexbox layout with flex direction column into this even with the space Y valve that we will maybe modify because we still don't know how much space we will need as we don't have any items on our page yet. And let's also style it like this because we will be setting the props for the motion div. And we can start there. We will set the initial meaning that we will set initial position, and what we will create now for the position. We'll be now checking if the remainder is zero. And that means or the even indexed items, we'll have position -100 and for the odd indexed items, we'll have it 100. We will do the turner operator. That means we are checking for this value. In case it's true, it executes the first position, and in case it's false, it will execute the second one. And also, it will start with opacity zero. Then for while in view, we will set X to zero and opacity to one, and for the transition, we will set duration to 0.8 seconds and some delay, so we will multiply index by 0.2. And with this, we will create the wave effect where the first items will appear sooner on the page. And in this motion dip, we will continue with a div and paragraph tag. Into this, we will put a paragraph tag that will hold service dot ID, and then another paragraph tag with service dot title. For the styling, we will set our flexbox layout with items to center to center them, some gap and margin to bottom. Now we will see it on our website, and for the paragraphs, we will set a text purple 300, font both text for Excel, maybe some opacity and for the title, let's also set something text to Excel on both text white with 0.8 opacity or the paragraph below, text gray 400, leading relaxed with Bedding to left because we will now put their service dot description, and maybe you don't even need this leading relaxed. It's there for setting the line height. But if you will try to put the really simple description of your service, which is the one sentence, then you don't even need this, but we can keep it there. You add our bottom and s coolor border purple 300 with 0.2 opacity, bottom padding. And what we will also do, maybe we will move this space Y 12 here. We can decrease space Y to six, and now we will leave it like this, this is our services section. So let's scroll up and back to it to see the animation and that will be it for this section. 16. Project 1: Contact Section: For contact section, we will do an export and we will import it to our page dot TS six. 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 the 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 mix to to make this centered. We will also add vertical padding there to four. We will start with the first motion diff. This motion div 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 an under 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 getting touch and the touch word we will put into the Spen text. For the touch word and the Spen tag, we will add a different text color. I will now put there text gray 500. We will continue to another motion dish. This motion div will start with opacity zero. That means it will start in visible 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, rounded to Excel and space Y eight. That means we will again make some space between the elements we will have there in this motion div. What we will have there, we basically have their contact information. 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 spacey 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 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 day 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 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 e frame with the Google map where we will set the position of our address into this iframe source. Are properties like width height. We want no border, so we will set border zero, and we want to allow fro screen when somebody wants to display it on fro screen and loading lazy. That means don't load this e frame and wait until it's really displayed on the screen. And then you have there the source with the information about the map you want to show. About this, there is a documentation on Google Maps, platform developers.google.com, and there you can see how this exactly works. How to create this and so on. But for now, if you want to create your own map, I think the easiest way is to go to maps, there, pick a location, and just send it into Chet GPT with this current source from my files and put a prompt, please transfer the location into my current source. Send it, and that will send us a new coordinates that we will copy. We will put it there on the line, save it. Now we will double check it, and you can see it's working. So that was the easiest way how to do this, how to handle this. You will just send these two lines, and you will get the new location you want to add to your map in your portfolio. So I hope this way is as simple as possible. 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. 17. Project 1: Footer Section: The footer, I will go for the simple option because I think it's totally enough to have just some icons to socials linked to email without any forms. We'll create a Futer component and we will do Export, then put it onto our page DTS six. First, we will do the imports. We will import all the icons that we plan to use, and then we can directly start with a component. We will set our class name of container and mix Auto, so we will set some maximum width as it's already defined in this container class, and then we will center it with automatic horizontal margin. We'll also add some vertical bedding and horizontal bedding, and then we can continue with another div. That will be holding the email address. For this div, as there will be the text and the email address, we will set the Flexbox layout and flex direction column. So on a mobile screen, the text with the email address will be below each other and on medium screen and above, it will be next to each other with flex row. Then we will set a gap, so there is some spacing between them, and we will center them with items center. We will set some margin bottom, and that means the icons that we will have below this will have some white space between this email address. We will set a maximum width and center it with AmEx auto. Let's add the text now I will add heading two with get in and the touch I will put in Spentex where I will set the text purple to 300 with 0.6 opacity. For the wall text, I will set text size to text five Excel on medium screen, text, six Excel, then font bolt, text white with 0.8 opacity, and again, some margin to bottom. Then I will set there the anchor tag with HRF to mail to Jon Do. This means when a user will click on this email, it will open Outlook, for example, if he is on Windows and have this set application for the emails or the email, I will set text for Excel and on medium screen text five Excel, on medium, text to white, on Her, I will change this to text purple 300. Maybe we can also add the 0.6 opacity, so it's the same color as this one. But on Her color change, I will set the transition colors and some duration. I will also set there border bottom two. This automatically applies some style and width, then the color. So border purple 300 with 0.3 opacity, and on Her, it will be just border purple without the opacity and some padding to bottom. I will set one. We will continue with di that will be holding the icons, and I will set there a border on top. I will set a border color border wie with 0.1 opacity, some padding from top, ex box layout to center the items into the center with justify center and items center gap ten, and this max SM flex Ds. On small screens below 640 pixels, to be exact, it changes the flex direction to colume. Let's first add icons, and then you will see how it looks like. We will add an unordered list. And for this unordered list, we will set a Flexbox layout, and we will center the items with items center and Justify Center. We will set there some gap, so we have some white space between them and Flex Rp. Flex Rp controls how flex items behave when they run out of space in their container. With this, we'll just enable wrapping. We will set there first item, and then we'll just copy paste it and change the icon and HRF. That will be it. Or the Git upp we will set HRF to Git to our GitAp page. I will just put there gitub.com. And the icon, where we will also set a size, I will use 24 and then the classes. I will set there text white with 0.7 opacity on our text purple 300, transition colors and duration 300 as we are changing the colors, and the flexbox layout was not needed, so this will be all for the classes. Now I will just copy paste it for the Twitter, Facebook, Instagram, telegram. Of course, Twitter is now X, so you can just change the icon and that will be it. This is how the final footer version will look like. And for the footer section, that will be it. 18. Project 1: Navbar and Final Testing: Now we will add a navigation bar. That we coded in the previous section, and now we will be just reusing it to not reinvent the wheel, and now we will do the testing and final updates and fixes. As you can see, we have some white space we definitely don't want there on our page. But how to fix this. So how I'm doing this, you should is that I would go to the paga Tasix and now let's try to remove, for example, the hero component. I can see that even without the hero component, there is still the white space. So let's try to put it back and remove key metrics. It's still there. So same thing, put it back. And yes, it is from services. Without services, everything is fine. Okay, so we need to fix services, which I believe will be fast. Let's go to services. But we can simply fix this by overflow XClip that means it will get a white space and it just won't display it. And we won't be no more able to scroll to the sites on our website. Now we can see our website is responsive. There is one more thing to handle, and that will be this about me. It will go to our key metrics, we will remove this Flexn wrap and add their flex direction column, then the items will be below each other. But now we need to modify it because there is still some styling from the desktop. First, what we will do is that on a medium screen and above, we will set the flex direction row. That means on desktop, it will be as before, and also this border right, we will set to medium screen, and now what else? We will add there space 12 and on medium screen, we will reset this to zero. And as we set this border right from medium screen, we could also our border bottom on mobile screen. And also, I would add there maybe bottom petting six. On medium screen, we can reset this to zero. Now this is how it looks like. On mobile screen, we have it like this. And if you will put it back to the desktop version, we will have it back like this. One more thing, we need to fix. We will put the maximum small screen. So let's get back to mobile screen, and we have it there. And that should be it. Now let's go to the text reveal component. There we will open it. We have some maximum width, text Excel and text size. Let's set this text size from desktop and text for Excel on mobile. Now it's better. Let's also set there some padding. Let's do Peding six, and on medium screen, we will reset it. And now this is also better. Let's check the page. And I think if we go to key metric, we can also do this for medium screen. Otherwise, text six XL should be enough for this heading. Well, that will be it. One last thing is that we will also add IDs to our sections, so our navigation bar is working. There, I will put ID about services. I will put ID services, then I can go to Navigation Bar, and there, for example, I will put two ID about and services that will be mapped to ID services. Then if I will go to navigation bar and I will open it and I will go to about, it will get me on this about section, and for services, it will get me on these services. If you want the Smooth scroll, you will go to Globus dot CSS. You will add scroll behavior to Smooth or HTML. Let's go to About section. Let's go to services. On desktop version, let's try it again about services. That will be it. 19. Project 2: Intro: In this section, we will be creating this portfolio with changing colors. You can see that we have also some stars on the background in this your section that will be a simple import from React three library, and we will have there this Snovbr at section, interactive portfolio section where we will be changing projects like this. Contact that we already did in other project, but we will just simply adjust it there and we won't be reinventing the wheel, also the footer. And let's again, see the animations. If I will refresh the page. There you can see the animations on the hero section. The sections are changing colors. It will be up to you which colors you will define there. I will be using like five or six colors that will be changing. There you can see the text text section. But me section. A logo animation section that will be dividing portfolio and about me, but if you don't like this, you can simply delete it. The transition will still be smooth as there. Then we have the portfolio and the contact with Hooter. Of course, this is fully responsive. And I'm looking forward to see you in this section where we will create this portfolio together. 20. Project 2: Hero Section: First thing, what we will do is that we will create the project, like we did in the section for setting up a project with next JS. Then we'll be creating components, exporting them, and putting them on our page dot DS six. Let's start with the first one, that will be hero section. Then after we have the export ready, we will put it on the page. We will make sure it's imported, and then we can do NPM run Def, which will start the local host with our page. We will mark this component as a client site component with us client. Now let's talk about the imports a bit. First, we'll be importing use effect, and this is a react that will let us perform side effects in function components. In our case, we'll be using it for changing the colors in our array that we'll define below these imports. Then we'll be importing two icons, row and download icon. From framer motion, we'll be importing motion, and next to it, use motion template that is creating a dynamic motion templates, motion value, which is a function for creating animations. Then we'll import image from next image, our profile picture. We won't be using this object and Canvas with stars from react three. Canvas is the main component from reactoryFber for three D rendering. And stars is a pre made three D stars component, and we will use these two imports for creating three D graphics and animations in our application. And by that I mean the stars effect. We will create an array that will be named colors top, and there we will add these values of these four colors. You can reuse mine, and then later, you can just change these, and of course, you can add more or less of them. It doesn't matter. Inside the component definition, let's initialize a motion value with the first color from colors top array. Then we will access the first one and we created this color constant because we will be using it now in use effect hook and it will be the starting point for our color animation. We will do their animate color with colors top array and we will put there ease to ease in out. Also duration to ten. There we can change the speed of the animation. Repeat will be on infinity and repeat type will be a mirror. This means that the animation reverses direction each cycle. Is out basically is a smooth transition between the colors there. Now also we need to add the dependency array, and we will leave this dependency array empty. What it means? It means that this effect will run once on mounting this component. If I will put there, for example, an input and that input will be changed, it will run on every change of the input, just for context, but we will leave this empty. We can continue with also creating motion templates for the dynamic CSS properties and also creating radial gradient background that will change the color. Let's do the constant and call it background image. There we will use use motion template. We will do backwards, radial gradient, 125%. Again, this is something I already have prepared in Figma with the colors at 50% and 0%. Now I will add the dollar sign with color. That means I will put there the color. I created there. I will finish this with the back quote, save it. And now in my background image, I will have this use motion template with this radial gradient. That will be changing the color there. You can imagine there this code for the color, then this will be changed to this code of the color. And instead of this color, there will be just these color codes, and the changing of the color codes is done by this use effect. Below, you will create a border style that will change color that we will use for our button. Let's name this border. Use motion template. Again, back quote, one pixel solid, again with the color. And last but not least, we will also create a box shadow that will change the color. Box shadow, use motion template, B quote, zero pixels, four pixels, and 24 pixels, again, with the color because we want to change the color, so we need to put it there. Otherwise, of course, there could be also something like this. We have everything prepared and we can start in return. We do that section tag not only the section tag but a motion section tech. In this motion section tag we will set a style, and we will put there the background image. Then we will also set some class names to you at the relative class because we'll be using an absolute element with the canvas and stars that will create this stars effect on the background. Then we will set a minimum height screen because we want this for our section, hero section, and now you can already see the changing colors on the background. Let's use a flexbox layout and center all with items and justify center horizontally and vertically. And let's also set text to white with 0.8 opacity. Now inside, we will create a div. And in this div, we will import a canvas from this reactory fiber. And inside, we will do stars tech also from this reactory fiber. The probes that we will set to the stars will be radius, count, factor eight and speed to two. Now let me explain the probes that we sent to stars. Radius, this will define the sphere radius in which stars are distributed. You can play with the numbers. I think this is a sweet spot because I already tested it for count, this is the total number of stars to render. I think, again, 500 is okay. And the factor, this will control the depth and distribution factor of stars. I will sit there too, and fade will enable smooth fade effect for stars and speed that will control the animation speed of stars movement. Again, I set there too. Now you can see on our page, it's a bit weird. Stars are just in the middle. And yeah, we are missing alient classes there on this DIFF. First, what we will do is that we will set the absolute position. And now also we will set the Z index to zero because this should be behind everything. And the last thing is that we need to set the position. Ideally, in this case, we will set position to top, right, left, and bottom. And now, there is one tail end class that allows us to set everything in just one class. And now you can guess which one it is. And it's inset, and that's it. So now you can see, as we said it, this is our background, looks cool, and we can start adding the content. We will add another one. And in this div, there will be one motion div, where will be the text and all the information and second motion div, where will be the picture? For this div, that will be wrapping these two motion divs. We will add set index to ten, maximum width six Excel. We can set there background white, so we can see where it exactly is, we need to add some content inside. It's visible on the page. Then we will set there also ax Autho to center it, we will use Flexbox layout with flex direction column on mobile screen on medium flex row. So the items are next to each other, items center and justify to have even spacing between them and gap to 12 to have some additional gap for the first motion diff, we will start setting the props. So initial will be opaciD zero and Y 20. Animate will get opaciD one, so fully visible and final position Y zero. The transition will take around let's set one or maybe 0.8 seconds. And for class names, xbox layout, flex direction column because all this text that we will now put into this motion div will be in column, then items to center center it, and on a medium screen and above, items start. So they are on the start of the container. Now in this motion dif we can add paragraphs first available for new projects, then another one, I I am, and to another one, we will put the name John Doe. And then we will put another one Austek developer based in Amsterdam with over five years of experience. And then we will create another div inside this, we will create motion button, where we will put FI Download icon and download CV. There we will put class name, text Large, and then we will create another button for view projects where we can put FI arrow, right, and then we will remove this background white from our page so we can see everything better. We can start with the styling. For the paragraphs, first, I will add a background gray 800 with 0.7 opacity. Actually, maybe purple and maybe a bit lighter and even lower opacity, some horizontal padding, vertical padding, so it looks like a button, mol text and border with purple hundred when they opacity, maybe we can try something like this. Maybe a bit darker, so let's do something like this. Now, definitely, let's add rounded. Let's decrease the padding. Let's do just one and three, and let's do font semi boat, now it is better. For the high IM, we will put our text for Excel and on medium screen, text five Excel. Phone both, and then we can move to the name. There we will put background gradient to write from white to gray 400. And as we want this to be a gradient text, we need to do background clip text. We need to increase the phone size. This will be on mobile. This will be on medium screens. And also text. Transparent. Now our text will be gradient and of course, on bold. You can also try purple color, for example, so then you will get this gradient. To be honest with purple, it looks also good. Maybe I will keep it. And yeah, now we can go to the diff that is holding these buttons. Ah, actually, I'm missing there one paragraph tag. So for this paragraph, I will use maximum weight Excel because the sentence is too long, maybe large. I will set text size too large. Leading relaxed for the line height. I think I will change the maximum width to 400 pixels and text size, I will set a text base. Then we don't need leading relaxed because that is setting the text size and line height. And we will also go to this motion diff and we will add space Y six. It will do spacing between all the elements we have there in this motion div. Actually, space Y six is probably still too much. Let's do four. And to be honest, I won't use this because I don't want spacing between IM and also the available projects. What I will do is that for this paragraph with the Fu Stack developer based in Amstrm and so on, I will just do margin top two, six, that is better, maybe even four, I don't need that much of a space there. And now let's go to the balance. Then we will finalize the styling. For the motion buttons, we will set the properties. So for the styling, I will set border and box shadow, if you don't know what it is, it's what we defined there. We want these borders to change colors and this shadow as well. So we are using this color variable where we are changing the colors. So now we will use these three variables there in this style. And with that, it will be changing the border, shadow color, and so on. On Wil Over we would like to increase the size. So scale we will set 1.05. While tab, we will decrease the size, so we will set 0.95. We need to do the coma. I have a typo there, and now for the tail end classes, we will set the xbox layout. Now we will add items to center to center this vertically, and then we will add some gap between the download CV text and the icon if I download. Then we will set some padding, horizontal and vertical, and then we will add rounded fool to increase the border radius. We will decrease the font size. We will do text small, and now we can go to the second button. And this will be for viewing projects. This will get the user to the portfolio section. So on click, we'll find the element with ID portfolio. In our case, that will be the portfolio section, and we will smooth scroll into this view. Also, if you don't want CV download button on your page, use this on click. There, change the text button and delete the second button. Now let's see what you'll use for the second button. Basically the same things as for the first one. So Wild Her and Wil tap will be the same. And I want to use the style for border and box shadow because it's enough if one of these two buttons has this for the class names, we will add a flexbox layout, vertical centering with items center, some gap, and again, wedding horizontal and vertical rounded full. We have the same border radius as on the button before and text small. Actually, let's add border at least. So for the style, I will put there a border, and one more thing, we will go into this div that is wrapping these two buttons, and we will add the flexbox layout and some gap. Now let's check the page. And maybe we will increase the bedding, so it looks a bit better. And I think we will just take out the border, and we will put there a normal border with some border. And let's use border color, border, white, with 0.3 opacity. Now for the pedding, let's do three and two. Let's see how this will look like. Okay, let's do the same thing for the download button Px three and PY two. And that should be it. For the left side, maybe one thing I would also do there is for the available text, I would put a margin bottom two. Now it's perfect. And now we can move for the motion di that will be holding the image. We will start with the props though initial will be invisible, Opacity zero and scale 0.8, then animate to fully visible Opacity one and scale one. We will continue with the transition. This will take duration 0.8 seconds, and we can add some delay to this animation, we'll start with 0.02 seconds delay. Inside, we can start with a div, and this div will be a background for the image, and below will be another div that will be actually holding the image. So let's da the image first. I will start with defining the props. Source will be profile picture. Hold will be profile picture we will set width, that will be 300 and the class names rounded full. Or the div that will be a background for this image, we will use an absolute position with inset zero to set all the sites. Then round it full also. We will set some blur there and low opacity, I will use opacity 40. Now, one additional thing that we will add for this div and let's actually do it like this that we will end it there, the tag because we don't need the second one. There will be nothing in this div tag, and there we will set the style. And we will set there the background and so there this background radial gradient with circle where we will use this colors top. This is an array that we have there. Also we'll see transparent 70%. What this exactly means. This means that we are starting with the first color from colors top. That means zero first item in the array, and then we will fade to transparent at 70% of the radios. This color effect is created using the radial gradient. For the div that is holding the image, we need to add a higher set index, relative class, it will get on top and the absolute position dip the background will be behind it, and now we will continue with background gradient two. But, from we can try some color, gray 900 to black. We can sit there around it, full and some shadow. Now, this will create this effect. And we can also add border 0.3 opacity to it. We can use border grade 200 here next to our profile picture. We can also add motion dot div. And to this motion dot div, we can add a developer text. And we'll add some probes there for the motion div, let's set animate to Y from zero to minus 50. And with this, if we will add transition to repeat on infinity with the duration two, we will create a floating effect of this developer text. Now you can see there, maybe we can add duration to three. To slow it down a bit. And now, of course, we can add another stylings. So let's say their absolute position minus bottom minus two, minus right, minus two, for example, now we will go to this motion dip that is wrapping this and we will add our class names with relative class. Now we have it here, and of course, we also fixed the shine effect, now being behind our profile picture instead of just being on the back of the section. If you will delete it, you can also reach having this shining effect in the middle of the section behind our picture up to you if you like more this design or this design. You will simply change it by adding relative class there because the div with absolute positioning or element with absolute positioning is relative to its nearest positioned ancestor. Which was, in that case, this DIF. And now let's continue with some additional classes. Let's say the background gradient too, right? We can set from purple 500 to blue, 500, for example, if you save it now on our page, now just say out loud which classes you would adhere, make this look better. And if you said something like bedding, border radius, and some font size, you are absolutely correct. Well, if you didn't mention the font size or font weight, it's absolutely okay. Probably it's not even necessary, but definitely it's good to add the bedding or Px 23 and PY one. Let's add round it. Well, let's ada text small and font medium. Now I would say it's much better. Let's see how this looks like, and let's test the responsiveness. We need to fix a few things. And one of them will be there in this text. The maximum weight will be from medium screen. Otherwise, let's keep the maximum width of 200 pixels. Then I would add the PY to 24 and reset this from medium screen to medium PY zero for the main motion section that is wrapping all of our elements. Then I don't like this text. Let's go there and let's decrease the text size. Now, what I would do is that I would a text center and the medium screen text part. And one more thing, I think the text is too long for this intro text on the section. I would just leave there where we are based and which experience do we have? So with over five years of experience, I think it's totally enough. We can delete this. It would look like this and on the desktop. If you would like to put these buttons below each other, you will just go there in this div that is wrapping these two buttons, and you will put there, and now you can guess what flex direction volume. And then just on medium screen, you will put flex direction row. And that will be for the hero section. 21. Project 2: Stack Section: Now you will start with the stack component. So we'll do its export. If you didn't create it, just create it in components folder. Then we will import it to our page TS six. So now I have there, stack, and now we can start with the coding. So first what I will do is that I will define this as a client component and I will do there the imports. I will import. We will first start redefining this component as client component with use client. Then we will import motion from frame or motion because we'll be using animations on our page and then let's go to importing icons. I will be using react, node, typescript, Mongo, next JS, tailing CSS, and frame icons. Then I will import from frame or motion. Basically, by the way, I could also like this, so I save one line of code and from frame or motion, I will additionally import also use motion template, use motion value, and animate. We will explain this once we get to it in the code. Also for the color changing that we will also use there on this component, we will import use effect from react. And now we will do something that we already have in our hero section. Let's take this color array. Let me put it there. And then let's take this background image with this use effect and with this color variable, and we will put it there into our stack. Now we will save it and we can continue. What is the next thing that we will do is that we will create another array, and it will be stack items. There we will put our stack that we are using and we want to highlight. And that means we will put there name of the stack. Then we will put the icon of the stack. It won't be a string, so don't do the quote. And the color there we will set a color of the icon. And what we will do there, and we can start with name that will be react icon will be FA react and its color will be 61 DAFB. I already prepared. I will fit this icon. We are missing a comma there, and now as we have it, we can copy paste it. Let's use I would use four stick items. I recommend you to use also four stick items. Then if you will use more, few of the tilent classes will probably need to be adjusted. If you will use less, then it will be fine. Now let's continue next to react, I would also use next Js. For the icon, I will change it to asi next dot JS, and for the color, we will use six zeros. I will add their tail end now and framer. For tail end, the icon is SI tailwind or framer, it's Framer icon we have there, and I will use this color. Now we have the array ready. We already copy paste the color use effect and background image, and that means we can go directly to our component and start coding it. Let's start in the motion section. I will put there first the props, the style, I will put background image. Now that we use this changing color template, and I can continue with another prop and there will be a class name. And for class names, we will add vertical pedding and horizontal pedding. Let's start adding content. I will start with motion dot DV or the props. We will start on zero opacity and on Y 20 position, while this will be in view, we will set it fully visible and to its final position, Y zero and the transition will take 0.8 seconds. I will show you these animations after we will at the content. For the class names, we'll at a maximum weight of 1,200 pixels and center it with Mix auto. Now you can already see it on our page. We have it there, and there is one thing we need to do. As there should be a smooth transition from hero section to this stack section, we would like to rotate this background. But we will go into this radial gradient and there instead of a zero, we'll put 100%. With that, we will rotate it like this. If you refresh the page, the colors will be matched, so it will look like this. Before it wasn't matched because I defined the array later. So it started from the first color when the array from the hero section was already running. So it was, for example, on the third position. We defined it on the stack section. So it started from the first position and it was some array items ahead. And now we can continue in the coding. So inside, we will start with motion.h2. In this H two, we will put a stack, and we will put a stack in a Spen tax. Because we would like the stack to be a different color text purple 300 or the wall text, we would like this to be text five Excel, for the wall section, I would also set text white. Now we will set text center, bond bolt and maybe also let's set directly some margin to bottom because we will have some content below. Now for the props in age two, we will add there some, so we will animate this, and I will add the initial. Basically, I can even copy and be doing it all over again, so we don't need to write it all over again. I will change the values. Now it won't be on Y, but on X -20, for example, final position will need to be X zero and opacity one fully visible. Transition will take 0.6, so it's a different value from the other animations. And let's also add some delay, maybe like 0.2 seconds. If all the animations will be the same, it will look a bit boring, we are trying to change the values. The elements are animating from different directions with different delay, and all the animations are a bit different, so we spice it a bit and it's not looking the same below this motion. H two, I will do a div. And in this div, we will hold the stack items. We will map over them, and the current item in the array, we can name item and its position will be index. Inside, we will create a motion dot div and let's start adding props there. I will first add there a key, which will be the index. So now reactor knows which position in the array this item has. We will repeat the animations. So initial while in view and transition. Let's set there different position or let's again use Y 20. Now final should be while this is in view, it should be fully visible and Y should be zero. And the transition will take, let's say, 0.5 seconds. And the delay, now we are mapping over stack items, so it would be nice if we will increase the delay per item, so I will just multiply it by index, and this will again create that wave effect. Now we will at element classes, but before we do, in this motion div, let's actually put there the icons. So this won't be that straightforward as just putting there the icon name and color. We need to create a div that will hold the item icon and item name. And because we want to add also some design around the icon, we will add another div that will be holding the effect, that will be just empty div with only the class names. And this effect will be behind the icon. And for the icon, we will do also a div. Now we will do the m dot icon. We will set there width and height. And for the style, we will set color to m dot color. With this, we will be applying to the icons, the color we set there. Below this div that will be holding the icon and the effect for the icon and grouping them, we will create heading three tech. And in this heading three tech, we will put m dot name. Now you can already see it on our page. But of course, it's below each other. At least it's animated. That's nice, but we will fix it. Maybe you think that it's getting too complex. There is a lot of text. Why is this happening? Why we don't need just two text and so on. And you will slowly get it because now if I would put there just tech by tech, you wouldn't see what each tail nth class will do to the tech itself. So I just wanted to first do the text, explain the text, and then do the tail length classes. So you exactly see how the styling is working. Let me re explain this div will hold the icon with the name together, and this div will be holding the effect or the icon that will be behind the icon and the icon together also. So we group them like this and then with the name like this in this div. It will probably make more sense after we will start doing the tail winth classes. Now, so we can see the text better and also because it's kind of straightforward, we will do the styling for the text first. So let's do text Excel, phone semivt and that's it. Now let's go to icons. And before we even start with this, we already have an items there, but we need to go even higher in the structure. So let's go to the disk that is wrapping these stick items. There we need to do grid layout. On mobile, grid columns one is defaultly set. So on mobile, the icons will be below each other. That's completely fine, and we don't even need to define it. But on smaller screen, we would like to set there grid columns two. From medium screen, this already can be grid columns four, and we will have the items like this. Now we can go into class names of the first motion div in this mapping, and we will add the s bedding. Then rounded Excel, we will add a border with some border color. I will use border maybe gray 800. Then on Her, the border will change the color to purple 500 with 0.5 opacity. And as this will be changing the colors for the smooth transition, let's use transitional duration 300 and we will also group this. And what group does is that when you hover over the parent card that has the group class, the child that will have the group hover that we will add there will change its blur effect, and that will create a nice interactive effect when the gradient background will become more blurred on Her. For now, we don't have group Her yet, but we will get to it. I just wanted to clarify it now. Let's continue in this diff. We will add a flexbox layout with items to center and text to center and flex direction column. Now, we will continue below, there we will also do styling, and because we will be using for the effect and aslode position, we will put there relative class because we want this diff to be its first relative. Now some margin to bottom from the text that we have there. This keeps margin bottom on four. From this heading, and we can start with the styling of the effect that will be behind this item icon. We'll put their absolute position and inset zero. With inset zero, again, we are setting all the sites to zero position. As this is absolute position, we need to set it. Now we'll add background gradient to right, and we will go from purple 500 with 0.4 opacity to blue 500 with 0.4 opacity. If you would like to add additional color into this gradient, just put there via yellow 200. I would look like this then, but I will be using just two colors. Now let's set there around it Excel and the blur Excel, and we will now add the group Her. I will start on another line so you can see everything clearly. Now let's add group Her on border purple 500 with 0.5 opacity. Now we can test it. And transition colors with duration 300 as we are on how changing the colors. We want to create a smooth animation effect. Then for the div that is holding this icon, we will add a relative class, adding, rounded Excel, and background gray 900 with 0.5 opacity, we can add the better visibility to the colors. Let's also see there border with border gray 800 for now. Now also let's add group hour on border purple 500 with 0.5 opacity. And again, transitional with duration 300. Actually transition colors because we are transitioning the colors that we are using on Hauer. And now we will check the stack, you can see how everything is working together. But what I would do is that I would also add there sum gap. Let's go to the wrapping div of the stack items, mapping and put there a gap dx, maybe even 12. Now the design will look like this on our website. Let's check the mobile version. And that will be it for our stack section. 22. Project 2: About Section: We will continue with about section. Let's prepare about in our components with Export about, and we will add it to our page. Now in the about section, we will start adding use client as this will be a client component, then imports, motion, use motion template, value and animate from frame motion. Use effect for react because we will be again changing the colors and some icons. I will use code layers, server and CPU. Then we will define the color top that we can copy paste from our hero section or now even from stack section, and we will define array with skills. There I will put icon, title and description for our skills. And I will add more of them I will use for skills. And then in about component, we will define the colors, the use effect, and the background image exactly the same way as we did it there or in stack component. That is our quick start for this section, and now we can start with the coding, and we will start with the props on motion section. We will set the style, background image, so it's changing the colors. And we will continue with class names where we'll set vertical padding to 32, and that will be it. We will continue with motion dotted Div and there we will start with setting the props. If you want to speed up your development, just copy paste initial and violin view with transition props, and then you will be just changing values. For your motion elements, there we will leave it as is. But for example, for the next one, we can just copy paste it and change the values. And then, yeah, we are developing much faster. Class names, I will put the relative class because the element that we will put inside this one will have absolute position and we want this motion diff to be its relative. So let's create a div and inside this diff, we will create two more divs, but they will be empty. It will be just for the effect. And for the effect, we will start that This one will be absolute position inside zero to set all sides position to zero and negative z index minus ten. Inside, we will start with classes. It will be absolute position, top to zero, left to 25%. Some width and some height. Background purple 500 with 0.2 opacity to give it some color and round it full with some blur on the background. This will be shiny effect on the background. We can copy paste it, and for the next one, we will just change the values a bit or top, it will be now bottom, and instead of left, we will put it on right. Now we will go on our page. You can see we have these two shiny effects. Below this effect, we will start with motion heading two, there for the props, these three. Instead of Y, we'll do X -20 and X zero in the final position. Duration can be 0.6 with some delay. Let's use 0.4 seconds, the class name will be space Y six because we will have there some elements inside and we want some white space between them. Now let's put there some paragraphs, my journey there some paragraph with a string and another one with a string. Now we can or we cannot see it on the page because we need to add text white. Let's actually add it there. We will add text to Excel, font semi boolt and text Purple 300. Then for the paragraph with a text, we will add text grade 300, text large and leading relaxed because most probably it will take more lines. Now I will put there some text that I will use for this portfolio, and it will be something about us. I will put there these sentences, you can take an inspiration or just put there whatever you like. And for the second one will be similar case. Again, something about us there. Now we will take this styling, and we will also put it for the second text, and I did a typo there. It shouldn't be motion H two. It should be motion dot DIV. And in this div, we will have also another div. So actually, I will need a additional div. We will format the code like this. We will put it into the new div tag. And now in this div, we will have even more motion diffs, and they will be holding the information about us. So to style them, we will put their grid layout, and on medium screen, we will use grid columns, too, so they will be in two columns. On mobile screen, they will be in just one, but we don't need to define it because definitely grid columns one is applied. We'll also set there some gap, and we can delete these empty lines, and there below, we'll be adding motion disks with additional information. What I wanted to do and that's why I did a typo is that I wanted to add there motion.h2, and there I wanted to put about me heading. I will put me in Spentex now for the styling of motion H two, I will take these props. I will put it there. For the class name, I will put text five Excel, text white, width to full, text center, and fond bolt with some margin bottom. For the Spen tag, I will set text purple 300 and we will move into this div that is holding these motion dips, and we can start with adding another motion div. Before doing so, I would also go there into this motion dot div that is wrapping all of these, and I will put the maximum weight to 1,200 pixels. Which I think is much better and center it with a mixed automatic horizontal margin, then I would go into this motion div and I would add there some border gray 800 with 0.3 opacity. Let's first continue with another motion divs, and then we will get back to this styling. There we will create motion div inside. We will map over the scales array that we created on the beginning there. And the current item in our mapping will be named scale and its position index. There I will create a motion div and I will adapt the props. I will start with key that will be index. Then again, I will take these props and put it there. By the way, I can also put it to the wrapping motion dif, of course, already. X, we will set to 20 and final positions to zero. Durations are fine. Maybe we can set there some delay or the motion diff in our skills mapping, we can reduce it, but the delay we will do 0.2 seconds multiplied by the position. So by index, again to create the wave effect. Position I would do from Y, change it. And for the class names, I would set some padding, round it, large border border gray 800 on H border purple 500 with 0.5 opacity and transition colors with duration 300. Inside, we will do a div that will be holding another div that will hold skill dot icon. Where we will set width to six and height to six. And then a DIV that will hold the title and description of our skill. In age three, it will be skill dot title. And in a paragraph, it will be skill dot description. Now let's add the styling. You can already see it on our page. We have it there, but it's not styled yet. We will add there flexbox layout items start, then some gap. Now you can see how on the start is the scale icon, and then it continues with a title and description. For the icon, we will add some padding, rounded large, background purple 500 with 0.1 opacity and text purple 300, which will be the icon color. We have it like this and we can continue. We will now style this heading three. Let's put there text Excel with one semi boolt and margin bottom. And for the description, we will add text gray 400. Now this is how the page looks like. We definitely need to add some gap. Go to motion div that is wrapping this mapping, and we will add just space y six for vertical spacing, and that's much better. Let's sit on the page. And let's actually take this design for the border and on hover and so on. Let me take this, and we will add it also to the first motion div, let's edit there. And actually with this, it will be applying it for all the height that the right column has. We need to do a fix there. Let's create there a div that will be wrapping these paragraph I will wrap it like this format the code. Now I can add styling there. Let's see how the border with some border gray 800 with 0.3 opacity will look like. Remove the heading, even space Y. Now it's useless as there is just one element. And we can move the space Y there. So let's do space Y six. To be honest, I cannot see the border. I probably put there a wrong one. There is border gray 800 without the opacity. Let's remove the opacity. Let's add there a peding and let's see how this looks like on the website. The her is not working and we are missing a border radius. Let's set there round it. Large. And we are also missing with the transition and duration. Let's set it there. David, let's go to the website. And now, all the design is the same. Let's also check its responsiveness. And we have there sum back. I see the white space there. Let's fix it by going back to our section. Also overflow clip, so there is no white space. And also, I can see that the last items are not visible on mobile when this color is too light. So we can go to the Skills map, and there we will add backdrop blur tree Excel. And now the readability is much better. And let's also check this on the desktop, and I think this is also okay. And that will be it for the about section. 23. Project 2: Logo Ticker: Now we'll continue with this logo ticker animation. Let's create it in our components, create export, put it on our page T six, and we can code it. For logo animation, we will first declare use client to this component because we will have the 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 framer motion, you will open the terminal and do NPMiFramer 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 2.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 ax 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 said 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 will 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 source, old asimageOld 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. And now we will also add the border with border gray 800, and I will also add the background gradient to bottom right, and I will go from white with 0.1 opacity to transparent. I will add some backdrop blur, medium, and some shadow. Let's now see how this will look like without borders, and I think it's completely fine. 24. Project 2: Contact and Footer Section: Or contact section, we will do an export and we will import it to our page dot TS six. But we won't be coding it, and maybe you are asking why. And it is because we will be reusing it from the purple planet portfolio that we did in the project before, and same for the next component and actually the last one on our page. We finished the design of our portfolio. Or the footer, we will reuse the one that we did in the previous project. There was also this dip with getting touch and our email address. We can now delete it because our email address is already in the contact section. So on this footer, we will leave just these icons. You will check out this looks like. 25. Project 2: Navbar and Final Testing: Now to test our website and also at the Navbar, we will just edit there, Navbar. We will reuse the already created Navbar that we did. Then we need to go through the sections. So let's check the Navbar. We have about portfolio and services. We will change it to about portfolio and contact. Now we need to add the proper IDs for about section. There we will add ID to the motion section, ID, about. We can copy this, go to portfolio. There we will add ID portfolio, and then go to contact. By the way, if you hold Sutter and click on this, it will redirect you to the component, and there actually not in this motion dive in this section, we will at ID contact. And now we can test it. Let's go on our page. There we have the Navbar and the typo there, it's not with the hashtags. On contact, we already have it, and I also did a typo in portfolio and about it's not with the hashtags. So let's remove the hashtags and then we will go to Globals dot CSS. We already have their scroll behavior or smooth. That means we can go to our website and test this. Everything is working. Now let's test the responsiveness. And that is also working. 26. Project 3: Setup: We will start in VS code, and there we will create the project like we did in how to set up a project with next JS. Then you will create these components that we will, of course, code together one by one, and we'll be also importing them to page DTS six there like this. First, you need to create them. You need to do the export there, and then you need to import them on page tixEactly like we did in that how to set up a project with next JS. And now let's start building, and we will start with the section component, then move to hero section, and then continue with all of the other components. 27. Project 3: Section Component: Let's start with section component that we will use for all of our sections, and we'll be wrapping our sections into it, so we'll create borders at their beddings, all the sections are styled the same from layout perspective. There we have our section, and we will import first pin merge. Need to install the library, so we will do NPI tailwind merge. And what it is, it's a utility that will help merge tailwind CSS classes while handling conflicts properly. Without it, some class conflicts can occur, and that means, for example, if in this section, we will say that pedding should be eight. In the probes that we will set from the component, we will define that pedding should be two, then we will have a conflict. But with tail end merge, if we will get there pedding two and pedding eight, it won't draw an error. It will just apply the last one. In this case, the second pedding so the peddingeight. We will start with defining the section properties. We want to use the class names. There will be a string and there's a question mark, so we don't even need to define it when we will be calling this section then ID, bordertop, custom peddings and children. Children will be required, so we will need to have content in our section text that we will then use in our components. If this is not clear for you, you will see how this works once we will be using it on our components because then we will start sending down the props and I believe then you will understand it better. Then we will create two variables default pedding and content pedding. And we'll be using these in our sections if we won't send any pedding in the props, custom peddings there. In case we will send it, this will be ignored. In case not, there will be this preset padding that we have there, saved in default and content pedding variable. Then let's go to the return. First, what we need to do is that we will need to send there the props, and also let's take these two variables inside. So above the return, let's put it there. And for the props, we have them there. So basically, we can copy paste them. We'll be sending the class name, ID border top, which is default le falls, custom pattings and children, and there we will do section props that we defined there. So we will be checking its types. Now we have everything ready, so we can start with the props in our div in return, and there we will set ID to ID prop that we have there in case we would like to add some ID for our section. For example, for navigation purpose like ID portfolio and so on, we will just send it there and we don't need to create another tag and then we class names into these class names, we will do the tailwind merge, we don't get any conflict in case we will be sitting there some different padding, for example, in custom paddings, and it will get applicated. And in this tailwind merge, I will set relative border one, border right, and a border color, which I had defined in CSS file. And now I will show you CSS file. I will just map there the border color which is color border. And now let's go to the Global CSS. And there you can see in the body we defined color border and light gray. Also in Global DSS, we will have this grid background. Basically what it does. That's an absolute position. I calculates the height, and then it creates a grid, and you will see it once we add it to a section. This background image is creating a grid pattern using two linear gradients, one for horizontal line, second one for vertical one, and the lines will be one pixel. Then the background size will set the size of the grid cells with three to three RMs, and then we will create a fade out effect using a radial gradient. Now in the section, we can continue. There we will now add border top, and in case it's there, so the value is true, we will add border top to the section. Then for the custom pedding let's do turning operator. In case it will be true, we will apply the custom pedding and in case not, we will apply default bedding that we set in the variable there. We are missing a comma, and we can continue. For content pedding, we will always apply content pedding and class name, we will apply it and merge any custom classes, we will send it in the props when we will be calling this section component. And for the children, we will render it here inside this Difteg. And now we have the section ready. What does it mean? If we will go to our here section, in hero section, we will import the section component. Also, you'll define it as a client one, so we'll use client. Then we will create a section tag, and inside this, we will call the section component. And inside the section component, we will start writing children, which will be this DVTech where we will apply this grid background that we did in Globals dot CSS, and inside we will put some content so it will get displayed. Also in Globals dot CSS, I will set a background color and a darker color border. Now as we have it and we imported the hero section on our page, let's check how the page looks like. And there is, you can see there the grid background on the section and looks like I did a typo there. I section, it should be border left. 28. Project 3: Call to Action Button: We will now create this component where we will put Full Stack developer, text and HRF that will take the user to our portfolio section. I call this button usually sale button or cult action button. In this case, I will call it button glow in effect, but let's find a better naming. So maybe after you can rename this to cult action button or something like that. And also I created this button in different project, but now I will put there a video that is showing how I exactly did it and with the explanation of the Delwnth classes, but it's in a different folder, so just don't get confused. There we will start and it won't be that long, we will just import a link. We will import an icon, Chevron write, and we will create an interface there for button glowing props, where we will need to define the text that should be as a string, and we should have the text every time, of course, because there should be something on our button and HRF, that is not mandatory but would be a string if there is any. Then we will create export default function, button glowing, where we will take the text and HRF as a prop button glowing props. And we will do return there inside this function. What we will do there is a div. Inside this div, we will add a padding to eight item actually flex box layout, and then items to center with justify center to center it horizontally and vertically. Inside this div, we will create the link for the link, we will set the HF to HF and some class names. We will group it, we will make it relative in line flex, items to center with Gap two, rounded full, background black, horizontal padding to four, vertical padding to two, text small, text white, transition to all and on our background white let me put it on another line so you can see on our background white with 0.05 opacity. Now let's say the Spen Tech. This Spenteg will be actually empty, will hold only the class name. For the class name, it will hold absolute position inset zero, rounded full, then background gradient to right from this color code that I have there. So it's FFE 56 via another color code, which is FF 00 FF and two last color code, which is 00 and four times F now let's set there also some opacity. We will set there opacity to 70, blur small transition to all and also on a group however, we will make opacity 100. Let's go to our hero section. And in our hero section, there above the terminal previewer, we will call the button glowing. As a prop, we will input there the text, starting price available 30% of with HRF that I won't fill, and now we will have it on our page. Of course, we still need to add the styling. So let's go to button glowing effect, and let's finish there there below the Spentec I will put another one. Also without any content, just put there class name with absolute position in set 05 then round it pull and background to black. Below, I will put a Spentec, but now it will have a content. It will also have a classes of relative flex items to center, Gap two, and font medium. Inside, it will show the text prop, and also next to the text, it will show the icon Chevron write. And for the class names, it will have size four, transition transform, then group hour with translate X 0.5. 29. Project 3: Glowing Button: Will now continue with this button glowing effect that we will add to our hero section. I created this component in a different project, so we can create the same one here and use it for our portfolio. So don't get confused in the video that you will see will be a folder and website from a different project. We are just curious about this button glowing component. We'll continue with Bt and glowing effect. The landing page, we will create a new file with button glowing.d6. There inside, we will create export default function button, glowing with text and HF as input parameters, we will set there some default value and we will call these button glowing props. Now inside, we will do return, and there we will do first div. And before going to this first div, we will do there some imports. First, we will import link from next link, and then we will import an icon, Chevron write. Now below, we will do interface props, and there we will define the types. Text will be string, and HRF will be string and it doesn't need a value, but text needs a value over time. For HRF, we don't need a value because, for example, on our lending page, it's enough if we will leave this empty. And we will put there this question mark that means it can be empty. Now we are ready to start. So we will start with the main div there. We will put there some bedding, flexbox layout and center with items and justify center. Now inside, we can start with Link tech. We need to put HRF, which will be the HRF from these input parameters, and there we can continue. Actually, let me style it better like this. And we can continue with grouping all the elements inside this link, putting the relative class inline flex. What this inline flex does is that it makes the link behave like an inline element, then we will center the items at the sum gap, make this rounded full. We will add some background. We will use background black, horizontal padding to four, and vertical padding needs to be the half size of that one. So it will be for our case, vertical padding to two. We will set text too large, text white. And as this will provide some kind of animation, we'll set the transitional and on how we will set the background white with 0.05 opacity. Inside this link, we will create three spentex and two of them will be closed on the same line because they won't have any content. They will be there just for the glowing effect, and the third one will hold the text from the input parameter, and below, it will have the Chevron write icon. For the icon, I can put there right now size to six, transition transform. And on group, however, this will translate it position a bit by 0.5. Now let's go to hero section. There we will find the button glowing and we will import the button glowing. There I can close it, but I need to put there the text, and it will be get started. If it's not working for you, just make sure it got imported back to the component. Now you will need to add the class there and also for the other two spenteg, we will set absolute position for the first one with inset zero, and that means it will cover the entire link tag that is wrapping this one, then round it to full. And we will start with the colors. I will do background gradient to write and from some color, again, now I will have the color code already prepared. But in case I don't have it, I will need to figure out some good color combination. So you can take mine colors or you can just try to figure out yours and change these codes and don't use the ones I'm using now, but it's up to you. It will start on this color, go through this one, and the last color too will be 00 and four Fs. Now you can see it on our page. Let me start on another line, and there I will put some opacity 0.7. Now I will add some blur to it. I will as this will be working with the Huber, I will add transitional group her to opacity 100, so it lights up nicely when this is Havard. And now for the next span, I will at absolute position in set 0.5, so it's not covering the wall parent element, rounded full, background black with 0.5 opacity. And now for the spentag that is holding the text with the icon, I will add some bedding, text to center, relative class. I will center this, so I will set Flexbox, layout with items to center, then some gap and font medium. Now I have it on our page. You can see how the arrow is moving. If I want to increase the movement, I will put there, for example, value two, but now it's too much. So maybe even one can work, and I think we can leave this value. 30. Project 3: Hero Section: Continue with hero section. We will import framer motion, icons, sale and glowing button, image, and hero image from the pictures. We need to install the packages, so we will do NPMI and this port awesome. We can copy it like this and also the second one copy it, paste it. And with NPMI, we will install these packages. We will enter that will install it, and it should be fixed. Now you'll create inside this div, first motion div and second motion div, one for text, second one for image. Into the div that is holding it, we add flux box layout and flex direction column on medium screen, flex direction row, and that means on medium screen and above, the image and text will be next to each other. On smaller screens, it will be below each other. Also, you will center it with items to center. For this motion div, we will add props, and that will be initial where opacity will start on zero and its position Y will be 20. Then we will animate the fully visible opacity one and final position Y zero. And the transition will take a duration of 0.5 seconds. Inside this div, we will start with adding a sale button that we coded, and the props we will set there will be text and HF. That will lead to contact because we will put there flustc developer and if anyone will click it, it will redirect him to contact where he can contact us. Now to speed up the development, we can take this motion div and we can copy paste. We will then get this motion Dave that we have there. We will change some values for the animation. We can keep initial and animate, but for the transition, we can just add there some delay. I will at 0.2 seconds. Then as this will be heading, I can change this motion to heading one, and I can put there some text, and that will be crafting digital experiences. Now as we have it, it will be displayed on a page, but we cannot see it. So let's add some classes. I will add the fonts to black, so I will increase the font weight, then text for Excel on medium screen, text five, Excel leading tight. So we decrease the letter spacing, a margin from top. Now I will make this text gradient, so I will do background gradient to write from this color that I prepared already, so you can copy this code. And with this color that I also prepared, again, you can just copy it from me. And now to have a gradient text, I need to background clip text and text transparent. And as I have it, you can see it on the screen, but you can also see that there is something wrong. And for now, let's not use content bedding. Let's continue. We will copy paste this motion H one, change it to the paragraph, motion paragraph. There we will delete cases as we will replace them for text Excel, vertical margin to eight, and max width to Excel. Now I will put there some text. I will say there text white. Now it looks like there is another issue. What we need to do is that we need to end this div there on this line, and we need to remove this ending tech that we did there. Now it will be fixed. Also, make sure that in Global TSL, you have this index minus ten. Can continue with the hero section below this motion paragraph, we will create the motion dot DIV and inside this motion D div, we will add a bottom glowing component, and there we will add a text, view projects, and AHF to our portfolio. This will be clicked. It will redirect to the portfolio on our website that we didn't code it yet, but we will soon do it. And then inside this motion div and below this button glowing, we will create a div and inside this disk, we will start with the link tech, and we first need to import it from next link. Make sure you are not importing glucd react, but this next link. And after we import it, we can put inside the font awesome icon. Now let's copy this one more time. Now we need to add the props. So for Link, we need to add HRF that can be empty for now and classes text gray, 400 and Her just text white. And as we are using color change on Her, let's add transition colors. Same class name and HRF, we can add to second link, and for font awesome, we need to set the icon that will be FA Git. I see we have some issues with icons. Let's just add the FAA LinkedIn icon and FA Get up icon if this is not working properly. So we will edit. Now we imported it, I will put it there. And if we don't have this library, just do NPM, I react icons. And that will install the package that we can use for getting these two icons. Now for the div that is wrapping them, we will set a flexbox layout, some gap, and some margin, we will set size 30 and for the second one as well. And for the motion diff that is wrapping this button glowing and these icons, we will now add props that we can just copy paste from this motion paragraph, put them there, update them, so I will update just the duration. I can do 0.6, and also the classes. I will for the classes, put their flexbox layout, flex direction column on medium screen, flex direction row, some gap, and that will be it. Also, as now I can see, we should also add items center and maybe increase the size to 40. I will let say the image, and then we will just finish the styling of this hero section into this motion div there, we will at Image tag, and props for this image tag will be source as hero image, then as profile picture, then with 2280 and the class name round it. I will find it hero image, and it should be public images Profile one. Now I have it. For the props of this motion div, I will again take this and put it there. Instead of Y position, I will set scale to 0.8. Then the final scale will be one duration 0.5. Dlay we can do even 0.7. Now you can see it's not very nicely centered. What we'll do is that we will add white for this motion div. We will go to the first motion div and add there also background white or maybe background green, 200, so we can see where exactly it is. What I will do is that below this section, I will add a dif tag, and I will wrap these section tags. For this div, I will add a container amis do to center it. I will remove it from this section. Now what I will need to do is to find which div, it is this one is wrapping this text with the image. Then I will put the background red 200 to see where this exactly is. And now I know I should at the justify center, and it will be centered. I will double check it on the page. What I will do is that now I will remove the light background because I already know how it's positioned. I will remove it from there and from there. And now let's see it without the light backgrounds. I think that's fine. This is exactly how we should be. Let's check it on a mobile screen, and we need to do a few adjustments. First will be for the text. This will be to Excel on a mobile and this will be xEcel from medium screen, otherwise will be text small, and also it will have some maximum width. I be the max with large and Excel from medium, and maybe even maximum width excess. Also we will do their text center and on medium screen text left. And then I would like these icons to be below this picture. The easiest solution is to take this div that is holding these icons and put the hidden on mobile screen and on medium display flex. Then copy it, paste it below our image and on medium, put the hidden. Otherwise, we will be displaying it. Then we will add the class name of Flexbox layout and flex direction column. The icons will be below, of course, then we will also add their Flexbox layout and flex direction row, justify center to center them horizontally, and then it will look like this on the mobile screen. If you want to also add some margin to top, just increase it there to eight, and this is how it will look like on desktop. One more thing I would do will go to the code, and for the desktop icons, we have there, I would add adding bottom to four. And that will be it for our hero section.