Next.js Animated Portfolio Website with Framer Motion & Tailwind CSS | Next.js Beginner Project

Hello friends today we are going to create a beautiful animated portfolio website using react nextjs framework framer motion and Tailwind CSS when we navigate between our Pages we will see this page transition let's open up the about page we will have a text container here and on the right side we will create this SVG component when we scroll down or up we will end animate the parts of this SVG you will see how easy to do that using framer motion scroll progress function here we have the skill section if it's in the viewport we will see this animation and the experience section you can add your job or project history and after that we will create a portfolio page to show our projects again we will be using the scroll animation and I'm scrolling down but my projects are moving horizontally and here we have another SVG animation when I click here the contact page will show up and it will focus on this text input automatically and this form is functional when someone writes a message and mail address and clicks on this button you will receive that message in your mailbox and this project is responsive when I click here we will see the animated menu for each screen size we will change the styles using Tailwind it's a great project to understand nextjs and framer motion Basics but if you want to go deeper and learn every little detail of react and nextjs you can join my master course weight list the details are in the description after creating this project we will deploy our website so everybody can access to do that we will be using hostinger as you know it's the hosting sponsor of the channel and I use it for all my projects and I've never had a single problem if you want to see how fast it is you can visit my blog page and for this project we are going to be using the business plan which is the most popular one with this plan you can deploy all your static projects in one hosting so you can create the demo versions of your apps and showcase them on your portfolio page using different subdomains by the way with this plan you will get a free domain SSL and unlimited bandwidth and if you want to get an extra discount use the link in the description choose a time period and use the lamad dev coupon code here after purchasing you are ready to claim your free domain I want to claim nextjs portfolio.com after the registration let's come back and install our hosting create an empty website choose your domain and finish the setup right after that you'll be able to see the AG panel in this panel you can manage your hosting and domains and upload your files using this file manager so if you are ready let's create our website and deploy it using this panel okay I created a new folder and inside this folder let's create our next application to do that you can open up your console and say MPX create next app and it's going to create your application but if you do that it's going to create some unnecessary files and styles so I recommend you use my my GitHub repos story just visit my GitHub page and find this repos story and inside this repos story we are going to have some es link configurations we are going to have all the images we are going to use during this tutorial and inside source folder as you can see we don't have any unnecessary Styles or HTML elements so we are going to write everything fromt without wasting any time so let's come back and here you can directly clone this repos Story by the way this is the starter Branch at the end of the video I'm going to add here one more branch and it's going to be the completed version of the application so if you have any problem just open up the completed branch and compare your code okay as I said you can copy this URL and clone this project but I recommend you for this project in this case it's going to create a new repository in your account as you can see this is my test account if you say create Fork you are going to have your own repository and in this case it will be much easier to keep track of your progress so you can clone your own project instead of mine I will come back this is my own project by the way this is an open-source project I give you everything for free so I would appreciate if you could give a star for this project okay so I'm going to come here copy my URL and I will say kit clone the URL and I will say dot and enter as you can see our project is here but we don't have the libraries let's install them I'll say mpm install if you are using yarn just say yarn and enter and it's going to create here a new folder and as you can see not modules and it includes all the libraries that our nextjs application needs okay let's start our app I will say mpm run Dev our project runs on Local Host 3000 let's open up and it's here and I opened here our example firstly we are going to design our homepage but before as you can see our nowbar is on the top of the page if I open up the about page it's still here portfolio and contact so basically this component will be the common component so when we create our Pages we don't have to add this for each page in in that we can use it in our layout by the way if you don't know what the layout is or if you don't know the basics of nextjs you can watch my previous video that video includes everything you need to know about the latest version of nextjs okay let's continue I'm going to open up my vcode and inside the source folder I'm going to create a new folder and it's going to be components and the first one will be our Nar let's create our component I'm going to use this shortcut if you don't know how I'm using this basically I'm using cipit and for the jsx files as you can see I have some shortcuts and for this tutorial I'm going to be using this one it basically creates a component with tail in class names okay let's write our shortcut and and it's going to create our component so we can use it in our layout and inside body I'm going to create a do and I'm going to call the nowbar and after our children so basically it represents our Pages let's give here a class name firstly the parent will be W screen and H screen it basically means with 100 VI W and and height 100 VH so it's going to contain all our view ports let's give a background color and see let's say 500 as you can see this is the parent de and it includes nowbar and hello world if I create here some other Pages let's say about portfolio and contact and I'm going to create my page here about page let's actually copy this here and here it's going to be portfolio page and the contact page so if I visit some other Pages as you can see the N bar is still here okay so right now let's change our background color I'm not sure if it's visible enough or not you might see here the white color but actually there is a background transition here the top part is a light blue color and the bottom is light red it might not be visible in the video but when you create you are going to see better so let's do that instead of this red color I'm going to create here a linear gradient BG gradient it's going to be from top to bottom so I will say to bottom and at the top of the D will be blue from Blue it's going to be really light as you can see it's almost White and the bottom of the page will be red you can choose 50 or let's say 100 and right now it's much better let me give a little bit darker and you are going to understand better as you can see this is what we want so you can give any color you want let's open up our example as you can see our nabar has a height here and the rest of the page will be our page component so let's come here and create a new you do I will say class name and the height of the now bar will be 24 which means 96 pixels let's do the same thing for the children I'm going to WRA my children and if you remember the height of the component is 100 VH and 96 pixels of this 100 VH is our nailbar and the rest of the height will be our children so I need to use a calculation here I will say h I cannot use Tailwind here so I'm going to use CSS inside these brackets so I will say calculate 100 VH minus 96 pixels or 6 Ram it's exactly the same thing here right now I'm going to close everything and open up my now bar let's close here and firstly I'm going to Center my items let's check as you can see it's vertically centered and also there's a space on the left and right let's do that firstly I will say h full so it's going to contain all Rd it was 96 pixels I'm going to center items vertically as you can see it's centered and I'm going to separate my items using justy space between let's actually create here two items as you can see they are separated but as I said we are going to need some space here to do that we can use a padding on the x axis which means for left and right but there is something important here if you are using Tailwind it applies your styles for the small screen first let's open up our example and I will open my console and as you can see there is a space here this space is increasing so first we should give a space for the small screens and after we need to increase it according to our screen size so for the small screens let's say padding 4 16 pixels after this small screen we are going to increase this space it's going to be eight let's say after small this is how we are specifying our screen size and PX will be 8 and if it's more than medium screen it's going to be 12 large screen 20 and finally for XL screen 48 let's see I'm going to open my console okay it's smaller and it's getting bigger this is what we want okay right now we have our space we centered our items let's see what we are going to need I'm going to shrink this page and as you can see we have two items this logo and this button and when I click on this button it's going to open up our menu it covers all our viewport we are going to take care of this later but before let's create our logo and this button it's going to be our logo let me actually write here logo so you can see better and after it's going to be the responsive menu and inside logo I'm going to create a link so when we click on on our logo we are going to be redirected to homepage so let's say HRA and the homepage and inside as you can see we have two items the name and extension so I'm going to create a span another and do Dev and let's give a class name here first the text will be small the background color will be black text color will be white actually this is going to be white this is going to be black so I'm not going to specify this here I'm going to say rounded MD basically we are giving some border radius let's give some padding let's change the color of the first element class name text White okay and I'm going to increase the font weight font will be semi okay let's give a style for the second element uh we can see better class name I'm going to give some withd and height it's going to be rounded and its background color will be white and the text color will be black like that let me zoom in and and I can give here a space so I will say margin right one okay but I can see my height let's give here Flex okay I'm going to Center my items vertically and horizontally and I will do the same thing for this component this span Flex item Center justy Center okay awesome I'm going to zoom out our logo is ready and let's take care of our button let me sh this okay we are going to have a container and in this container we are going to have three lines let's do that I'm going to come here and and create my button let's say menu button and inside we are going to have three lines let's create the first one and will say with 10 height will be one background color will be black and I will say round it I'm going to create two more and for the parent let's give a class name and the width will be 10 height will be 8 but this time our items will be vertical to do that we can use flex column as you can see they are vertical but I'm going to separate them remember how we are doing this justify space between just like that and when I click on this button I'm going to change its shape let's see but I'm going to do this later because we are going to need framer motion but we didn't learn this yet so it can stay like that when I click on this button I'm just going to open up let me zoom out this menu let's do that after this menu button I will say menu list let's create our do and inside this do we are going to have our menu items but instead of writing them one by one I can create here a list and using this array actually let's move this here okay using this array I can show each link here using their title and URL I will say links. map and for each link I'm going to create nextjs link component and the text will be link. title and HRA will be link do URL as you can see there's a warning here because we are using a map so we have to give here a unique key and let's say item do title or URL doesn't matter oops not item link as you can see they are here let's give position absolute I'll say top zero left zero is going to cover all our screen so I will say width screen height screen and the background color will be black text color will be white let's see first okay perfect so let's enter our items here I'm going to be using flex but remember they should be vertical Flex column I'm going to Center my items let me close this sidebar okay I'm going to give gap between each item let's say eight perfect and I'm going to increase the font size text for x large of course we are going to give some animations but as I said after learning motion as you realize we don't have our button here so we cannot close our menu to prevent this for this button I'm going to say the index is going to be 50 and the position will be relative of course we can't see but as you can see our cursor is changing it's here if I change the color okay it's here so right now I'm going to create my functionality firstly we are going to need a state that decides whether our menu is open or closed at the beginning it's going to be closed so I'm going to come here and say const open set open I'm going to create a use State hook and at the beginning it's going to be false in nextjs if you are using any react hook your component should be a client component use client directive and again I explained this in my previous video where to use client components where to use server components what is the hydration everything is in that video okay so using this States I can show my menu list I'm going to write here a condition and I will say if it's open as you can see it's not here anymore but when I click I'm going to update my state let come here and on click event set open it's going to be the opposite of open if it's true it's going to be false if it's false it's going to be true you can do the same thing by writing here previous state and the opposite of the previous state it's exactly the same thing if it's true it's going to be false let's see I'm going to click as you can see it's here when I I click back it's gone this is what we want okay it can stay like that let's see what's going to happen if our device size is bigger as you can see if it's the medium screen instead of that button that responsive menu we are going to see our items here and on the right hand side we are going to have some icons and our logo is not visible anymore so what I'm going to do for the logo I will say if it's the medium screen make it hidden I will do the same thing for let's come here responsive menu I will say if it's empty make this hidden and instead of those I'm going to create two more D it's going to be our links let's do the same thing links map for each link I'm going to call nextjs link it's going to be link. title HRA will be link do URL and again don't forget your unique key and this time at the beginning it's going to be hidden we are not going to see it but if it's bigger than medium screen it's going to be display Flex hidden means display n and we are going to change it here and let's give gap between each item I'm going to increase the size our logo and button are display known and we can see our items here our links so I'm going to add one more de here let's write it after this logo and inside link and I'm going to create my first icon using image source will be GitHub do PNG alt you can write here any description we have to give a width and height let's say 24 let's check our image by the way if you use slash it's going to open up the public folder and search for your items it's here and HRA will be you can write your GitHub account I'm going to leave it empty as you can see it's here so let's do the same thing for other items I'm just going to copy and paste it's exactly the same thing as you can see dble Instagram Facebook Pinterest and Linkedin I'm going to save let's make this slash also okay so I'm going to do exactly the same thing at the beginning is going to be display non uh for the medium screen it's going to be display flex and I'm going to give some space between them MD Flex Gap 4 and if the screen is even bigger let's check we are going to see our logo so I'm going to come here if it's the L screen it's going to be Flex let's check okay there is something wrong oh LG okay but there is a problem here we cannot see the problem but if I add here more items let's add here actually I'm going to duplicate this as you can see if this D is bigger it shifts our other items to the left side but our logo should be in the center so to prevent this problem I'm going to give exactly the same size for this item this logo and this social de so when they are equal it's not going to overflow let's get this back so I'm going to say okay withth will be 1 / by 3 so I will do the same thing for the logo and those links basically we are going to divide our container into three pieces one piece will be those Social Links one piece will be our logo and the other piece will be our links let's actually write here links and social because when you use Tailwind it's really hard to see where your containers are this is why I'm writing comments you can see better and for this logo I'm going to Center my link otherwise as you can see it's going to be on the left let's give background color and see better like that I'm just going to Center my logo to do that I will say just y center okay awesome right now in any case it's going to be in the middle so let's give a style for our items as you realize the font size is bigger but also when I click on an item here it's changing its background color and text color but how we are going to do that when you use nextjs it's really easy basically we are going to take this path name from the URL and we are going to comp compare with our link title if they are equal we are going to change its background color to do that we can create a new component let's say Now link and we are going to take our link as a prop and show it here it's going to be exactly the same thing link do title HRA link do URL but how we are going to find out this path name we can use use path name hook I'm going to come here and say use client const path name use path name hook as you can see it comes from next navigation and let's see what we have but of course we should use this component here so instead of this link I'm going to be using my component and of course I'm going to pass my link here and don't forget the unique key let's import I'm going to save and let's see I'm going to open up my console and as you can see for each item it returns to path name and if you check our links in the URL we have exactly the same string so we can compare them if they are equal we can change the background color so inside class name I'm going to write condition firstly let's give rounded for each item and a padding and after I will say if the path name equals link URL the background will be black and the text will be white and that's all let's see perfect if I click and this is what we want okay let's increase this font size by the way I'm going to come here and say text X SL okay so we finished designing our nowar by the way as you can see our logo is getting bigger because we set justy Center for any case but it's going to be if it's x large and here okay let's close our console and take care of our homepage okay let's open up our console and see what we are going to create as you can see we are going to have here a container and it's going to include our image container and text container let's do that I'm going to open up my homepage and this is going to be our parent container and inside image container and a text container as you can see they are going to be vertical so we can use flex box and flex column and the half of the screen will be image container and the other half will be text container let's add here our image nextjs image I'm going to write my source is going to be this image hero.png and if you are using nextjs image you have to give here width and height but also you can say fill and it's going to cover the entire parent de but in this case don't forget you have to write here relative let's open up console okay our image is not here let's give background color and see okay it's not visible because our container doesn't have any height I'm just going to come here and say Age full okay still not here let's open up our layout it should work oh so you shouldn't give here any space this was the reason so let's remove this also and let's get back to the homepage as you can see our image is here but to keep its ASPC ratio I have to come here and say class name object with will be contain like that it looks much better right now and let's create our texts this is going to be H1 tag A P tag and after I'm going to create a new do which includes those buttons let's say title description and after another D and two buttons first one will be view my work and other will be contact me let's write here buttons okay that's all let's give our style as you can see it's bigger and the font is bolder and the first button is background black Tex color white and we are going to give here border radius let's do that it's really easy by the way I can give here flax flax column because I want to give Gap bit between each item it's going to be eight let's Center our items vertically and horizontally and for the H1 tag let's say text for x large font will be bolt for the description I'm not going to give anything for now and for the buttons it's going to be Flex box and the gap between items will be four let's change those items first I'm going to give some padding and they are going to be r. algae I'm going to give a ring and the ring color will be black it's going to be something like a border but I'm going to change this background and text color let's choose this one background black text White okay as you can see we don't have any padding let's give exactly the same padding that we gave for this number I'm going to open up nowar and copy here and paste for my container just like that it looks pretty good but after the large screen by the way I'm going to increase this font size for the medium screen let's say MD 6 x large and I'm going to increase here also okay perfect and for the big screens it's going to be flx diretion row it's not going to be vertical anymore if it's LG flx direction will be row our image is not here anymore because we don't have any width this time each container is going to contain the whole height but the width will be %. let's do that I will say if it's large screen H will be full but width will be 50% I will do the same thing for the other container here just like that by the way those items are here but we centered them let's come here and say with full and perfect it's that easy let's make this bigger perfect and right now we can create our other page or we can start giving our animations okay before starting other Pages let's see how to use framer motion I'm going to come here open my console a new console here and I will say MP can install framer motion let's open up the documentation as you can see to use framer motion we should create our HTML elements like that motion. div motion. H1 or whatever it might be and after we can add here any animation we want in this prop we can say x 100 opacity 0 height tag size color background color rotation whatever it might be as you can see when you say x it's going to move on the X AIS when you say animate y you can give any number and move that on the Y AIS you can rotate and using the transition prop you can decide the animation duration animation timing function you can give any delay you can make your animation infinite and you can give any initial value let's actually test it in our application and you are going to understand better instead of showing you documentation I'm going to close everything and inside app directory I'm going to create a new folder let's say test animation let's create our page of course JS or jsx test page and let's open up here okay right now let's enter everything inside our page Flex align Center justify Center of course the height should be full and after that I'm going to create here A do let's give some size background color will be red let's say 400 and I will say round it okay remember how we are using frame or motion I'm just going to come here and say motion and my HTML element of course we should import this import motion from framer motion of course everything is happening on the user browser if you are using an interaction the component should be a client component and it's ready to animate I'm going to close my sidebar and let's give an initial State I'll say initial the position X will be 100 and when we animate this now we're going to change its position let's say 100 so when we open our page its Position will be minus 00 and it's going to run this animation and change its position on the X AIS let's see I'm going to refresh as you can see this is what we want let's increase here and I will say y for example 300 I'm going to refresh I can give opacity 0.5 and you can give anything you want and using transition prop you can give any delay let's say 2 seconds and the animation duration will be 4 seconds so when I refresh the page it's going to wait 2 seconds and after it's going to run this animation let's refresh 1 2 and after it starts and it takes 4 seconds this is how easy to give animations and if you have multiple animations you can create them on your component and use them according to any condition what I mean by that let's come here and say const variance and I'm going to have two variants for example variant one let's give exactly the same animation here and if it's variant two let's make it 100 - 300 rotation for example 90 degrees I can give any other but for now it can stay like that so instead of writing our animation like that firstly I can add my variance it basically says I'm going to use either this animation or this animation how we are going to decide this we are just going to pass it here it's going to be variant one for example I'm going to refresh as you can see this is the first animation if I say variant 2 and the second animation and this is really useful if you have any condition here basically you can say if condition use variant two if it's not use variant one it's important because in our application remember we have a state here open or closed and according to that state we are going to give our animations if it's open our animation is going to run okay what else you can do let's take this back I can come here and create my transition here again you can give any duration any delay anything you want in this case you don't need this transition here I'm going to refresh okay of course you don't have to write initial and this is basically how we are giving framer motion animations of course we are going to Deep dive into some Advanced methods but for now we can give Animation for the NAB bar let's do that I'm going to open up the homepage and my console here and let's give our first animation I'm going to zoom in remember when I click here we are going to change the position of the first and third item and we are going to remove the second item so we can say opacity zero so it's not going to be visible and we are going to give rotation for the first and third item by the way at the beginning remember it's black let's take this back I'm going to close here and open up my na bar I'm going to change here okay so let's create our variants but before remember we have to write here motion and import this okay so I'm going to come here and say const top variance basically this is going to be variance for the first item and remember we have two conditions closed and opened if it's closed we are not going to have any rotation it's going to be zero and if it's opened the rotate will be 45° and also I'm going to change its background color of course I'm going to need a comma here and it's going to be remember at the beginning black it's going to be white but if you are using using animation for the background colors or any colors I recommend you use RGB colors if you directly say black to white you are not going to see any animation to prevent this I'll say RGB code and white color let's do the same thing for the second item let's say Center if it's closed it's open oity will be one so it's going to be visible if it's open it's going to be zero let's remove them and one more I'm going to copy this and paste and it's going to be the last item bottom again rotate zero and it's going to be minus 45 let's give our variance for the item the first one will be top variance Center and bottom we are going to need some additional class name for the first and third item but for now let's see what's going to happen of course we should give here our animation and I can right here my condition remember we have a state here the open State basically I'm going to say if it's open use the opened variant if it's not use the closed variant if it's open opened if it's not closed you can give any name you want let's see I'm going to click as you can see their colors are white the second item is not visible but there is something wrong with our first and third items because when we give a rotation they are rotating from the this center point but in our example this point and this point is not going to change we are going to move only the other parts in this case our origin is not going to be center it's going to be left s side how we are going to handle this I'm going to come here and say origin and left by default it's Center but we are changing this let's do the same thing for the third item I'm going to click and perfect this is what we want so let's create variants for our list and list items let me zoom out when I click as you can see our list comes from from the right side and for each item we have an opacity animation let's do this again as you can see we have an animation for this entire screen and also for each item but there's something important here there's a stagger effect here there is a delay between each animation let me show you how to do that firstly let's take care of our list de here so I will say motion and I'm going to write my variance I will say const list variance again closed its Position will be 100 v w and if it's open or opened whatever you say the X will be zero basically at the beginning it's going to be closed and and its Position will be out of our screen it's going to be beyond our viewport somewhere here and when we start our animation it's going to come from the right side and it's going to stop here this is why we are seeing x z let's use it I will say variance you can say initi closed and animate opened let's see I'm going to zoom out and click as you can see this is what we want as you can see our image is visible to prevent this we can give Z index let's say 40 okay awesome and what about those items I'm going to give motion here but it's not an HTML element it's a nextjs component if you want to use motion you can create here a div let's drop our link component and I can write here Motion in this case our key should be in the parent like that and again for each item I'm going to create variant and let's say list item variants let's create this if it's closed X will be - 10 opacity will be zero and if it's open it's going to be zero and one but how we are going to give the delay effect for each item it's really easy I'm going to come here to parent de and after my animations I can say transition and stagger children and let's say 0.2 seconds so when you do that it automatically affects our children and for each child it's going to add this play Let's see I'm going to click as you can see perfect and as soon as I click here it starts animating our children but you might want to animate your list container here and after your children to do that I can come here and say when before children in this case it's going to run first and after it's going to animate our children I'm going to click as you can see this is what I want it's that easy okay so I can close my console we have finished our homepage and now but how we are going to give the transition effect for each page let's open up our example when I click here as you can see there's a transition fact and after we see our page like that to do that we can use framer motion animate presence component let's check where is the search button oh okay we don't need it's here it allows our components to animate out when they are removed from the react 3 so what does it mean in our homepage we are using the homepage component but when I click here we are going to remove this homepage and we are going to show the about page during this navigation we can give some transition effects using this let's see how to do that as you can see again we can give initial and animate but additionally we can give the exit prop here so when we switch between our Pages we can apply this exit animation let me show you and you are going to understand better let's close here open up our menu and inside layout remember we have a d here which includes our number and our page right now I can wrap this de with this animate presence component but there is a problem here remember if you are using motion your component should be a client component but if you do this in the layout you will not be able to use a metadata because to do that your component should be a server component by the way let's change this description the best animated portfolio page so instead of using this here let's create another component and wrap our children with that component I'm going to come here and say transition provider and right now I will say use client animate presence let's import and and we are going to take the children here and right now I can copy here actually let's cut and paste it here let's import our nowbar and right now I can call my component here transition provider of course we should pass here our children because we are using it here I'm going to remove this now bar and right now our new layout is transition provider before changing each page I can create this dark background effect let's create here a do motion do let's import framer motion this is going to be basically the black background so I can self close this we are not going to have anything inside and I will say class name AG screen with screen it's going to contain all our viewport and its Position will be fixed background color will be black and if you realize there's a border radius let's click as you can see let's click again so it's not going to be sharp round it it's going to be only the bottom and I can give any specific size 100 pixels you can say small X lar whatever you want and also you can give any specific size here and I'm going to say Z index because it's going to be over everything it's going to cover our screen and right now I can give my animation animate the height will be 0 VH so it's not going to be visible and when we exit our page when we change our path name the height will be 100 VH I can give any transition here let's say duration 0.5 and I can give any timing function is out out so at the beginning it's going to be faster and at the end of the animation it's going to be a little bit slower let's remove this and let's see when I change my page nothing is going to happen because our component doesn't know when to trigger this animation so we have to pass here a unique key and whenever this key changes it's going to trigger a our animation when we navigate between our Pages remember our path name is changing and it's Unique so we can use it whenever it changes it's going to trigger our animation remember how we can call our path name use path name and I'm going to pass it here so if I click as you can see the exit animation works if I say a little bit bigger it's going to contain all our screen we are not going to see this white part and perfect but in this point I want to create one more de and when the first animation ends its animation is going to start but in this case it initial Position will be the entire screen and it's going to go back to the bottom what I mean by that let's see again of course it's going to be really fast but I'm going to try to explain when I click on any link here we are going to see our first item this item and when the animation ends we are going to see another item but the animation direction will be different when I click as you can see there's a border radius on the top let's see it again this is the first and this is the second it's really fast first second so in this case I will say but this time it's going to be Z VH I will say transition remember we can directly write it in our animation so we don't need this it's going to be our animation and initial and I'm going to give here a delay remember the first animation takes 0.5 seconds and right after that this animation is going to start actually let's make this two and you can see better and I'm going to change its color and remember the rounded part is the top part and I will say bottom zero because it's going to come from top to bottom and by the way let's say 500 it's set animation it's going to be animate let's try and we are going to have another problem let's see when I click as you can see the red item is already there first item is moving at the red item is behind it that because we said the initial is 140 VH that means it's going to be in the background and after 2 seconds it's going to animate but we have to wait this animation first it's going to exit and after we are going to see our animation to do that I'm going to come here and say mode and wait in this case it's going to wait the first animation let's see I'm going to click first animation and after the second one let's see again first it's moving back our red color is here so if I say black you are not going to see the first animation going back to the initial Point let's try again first one it's the second one and moving first one is going and second one is visible right now it's that easy so what about our path name let's see our example I'm going to click here as you can see it says portfolio contact about page we don't have any path name here so it's empty so let's create another d it's not going to be self Clos we are going to write a text here and this going to be our path name I'm going to change this class name again it's going to be fixed I will say margin Auto because I'm going to Center this to do that we can use top zero every direction will be zero and if I say margin Auto we are going to see our text in the middle of the screen text will be white it's going to be 8X large and I don't want to see the text cursor to prevent this cursor default let's give a background and we can see better and Z index will be 50 is going to be over this div let me close this sidebar I'm going to click here as you can see its size covers all our screen to prevent this I will say withth fit and height fit so its size will be only the size of this string okay so let's play around here its opacity will be zero and here it's going to be one and if I do it like that we keep seeing our text here as you can see when I click it's going to fade out and it's going to show our new path name but it's still here to prevent this I can give initial and animate it to zero let's say initial I will click okay it's here and it's gone of course it's too long let's make this 0.5 back and maybe I can increase here let's see I'm going to click and perfect of course there's a slash sign here to prevent this I can say substring and I'm going to remove the first one perfect okay this is how we are giving transition effect what else we can do during this transition we can give different animation for our homepage items because let's come back as soon as I click here we are going to see our image and text here as you can see they are there but it doesn't make sense we should see our transition first and after our component to do this I'm going to open up my page component I'll say use client motion frame or motion and I'm going to give motion here actually let's create another D and wrap my entire component class name will be again H full initial will be y AIS and let's say my - 200 VH is going to be under our viewport and when we animate it's going to be zero and let's give transition and duration will be one let's come here and when I click as you can see it's empty and and after we see this effect okay perfect so I can do the same thing for other Pages I'm going to copy this for about page contact page uh portfolio I will say import motion let paste this for contact and about okay let's see uh perfect oops because I didn't save perfect let's come back okay it works right now you know how to create page transitions so let's take care of our about page let's see our example I'm going to open up my terminal as you can see at the beginning we are going to have a container which includes this biography section skill section and experience section but when the page is bigger we are going to see this SVG also so let's close everything and open up about page so firstly we are going to have a container and inside this container we are going to have text container and we are going to have the SVG container at the beginning it's not going to be visible so I will say hidden and inside text container we are going to have three sections biography and two more is going to be skills and experience this is the main structure of our above page firstly I want to give my spaces let's open up the Mobile screen first I'm going to give exactly the same pings let's open up number bar again copy here from small to x large and I'm going to paste it here but if I do that it's going to give space for the right side also let's open up our example and as you can see there is no space here this SVG contains all these do so instead of giving here I'm going to give my padding for the text container and instead of X I can actually say directly padding and for the text container I will say Flex box and it's going to be vertical so I will say Flex column between each item let's actually say the text of the sections and we can see it better okay Gap 24 but if I increase the size I want to increase this Gap also so for MD it's going to be 32 if it's large it's going to be 4 the8 for x large is going to be 64 let me close sidebar X just like that okay let's see what's inside the biography we are going to have a title description there is a c here our signature and this SVG button so again it's going to be vertical Flags gap between each item will be 12 and I'm going to Center them we going to have H1 let's copy paste description so I can say ptag after that I'll say span it's going to be a C I'm not sure this code is good idea for your own biography or not because it's like you're Einstein or something but anyway it looks great and after I'm going to create a do which includes our SVG signature and finally I'm going to copy this actually let's write our commments otherwise it won't be easy to see description quot signature and scroll SVG okay let's give here our signature like that if you don't know how to create this SVG just install figma open up a new file and choose a pencil here and draw any shape you want this is a quick example I'm going to use it and after creating your signature just export it as SVG and paste it here let's see okay they are here let's increase this size move this signature to the right side I will come here and for the H1 tag font will be bolt TXS will be 2x SL and for the P tag maybe it's bigger for the code is going to be italic and for this SVG self and perfect and we are going to give Animation but first let's take care of skills let's see what we have as you can see again a title and for each item we are going to create different do I'm going to actually copy this and this title and I'm going to paste it like that skill title skill list and and again scroll SVG let's copy and paste this like that let's create our skills first one will be JavaScript and it's going to be rounded I'm going to give padding text will be small cursor will be pointer background color and the text color will be white let's see okay and when I hover over I'm going to change its color and I H over background will be white and the text color will be black just like that let's create some more actually I can copy and paste I don't want to waste time you can write here your own skills just like that so how I'm going to separate them inside the parent I'm going to give flx box and gap between each item will be four just like that but right now it's horizontal and it's overflowing to prevent this I'm going to say flx DRP and in this case if it doesn't fit inside the container our Flex boox is going to move the rest of the items inside the new line like this we are going to take care of this background but for now let's take care of experience again we are going to have exactly the same title and after that we are going to have a container and in this container we are going to add different jobs and each job container includes three parts the first part the second part this line and the third part in this case is going to be empty if we write our job on the right hand side in this case the left side will be empty let's create and you are going to understand better inside experience again H1 tag actually let's copy and paste and here we are going to need this class name also just like this okay but as you can see there is no space here I will say padding botton for the8 okay it's much better and let's add our jobs again a container experience list and let's a list item and as I said it's going to have the left side Center and right let's create our first item it's going to have a title description job dat and finally the company name job company and let's say apple and for the center we are going to have this line let's create a line and as you can see we are going to have one more item inside this line it's going to be this circle so inside line I'm going to create another div and it's going to be Circle and for the right side we are not going to have anything it's going to be empty and let's create second one in this case the left side will be empty the right side will be our job so what I'm going to do let's take this list item and paste two more this is the third one this is the second [Music] one in this case I'm going to remove them and paste inside the right okay we have three items let's give a style let's check again for the first item I'm going to give flax box it's going to be horizontal and I'm going to separate my items I will say Flex justy between and I can give any specific height let's say 48 let's see oops it's the second item actually I should remove the second and the third because we can create them after giving our style and let's give specific width for each item for the left and right side we are going to give exactly the same size but for the center for this line our size will be smaller for the left side I'll say 13 for the right side it's going to be exactly the same but for the center for this line it's going to be six it's going to be much smaller let's give background and you are going to see better let's say darker and light just like that what about our title let's increase the form weight firstly I'm going to give background color it's going to be white I'm going to give some padding font will be semi bolt and I'm going to give for the radius but as you can see for the top left bottom left and bottom right are rounded but this side is zero how we are going to do this basically I will say rounded bottom LG so the bottom of the D will be rounded and also rounded start LG so top left will be L also okay let's see okay it's here for this description I'm going to decrease the font size I'm going to give padding again text will be small and I will say italic and for this date again padding three text will be red again small and the font weight will be semi bolt and finally for this company again white background I'm going to give padding but smaller again round it BG white and text will be small and again font semi bolt okay let's remove those backgrounds actually it can stay here we don't have line for now let's see okay but let's take care of this background color because we cannot see our items backgrounds so I'm going to come here uh for this container H full but when it overflows we will be able to scroll just like this it's much better right now by the way I can decrease this width let's search for apple and I'm going to say with fit okay awesome so what about this line let's check we just going to have a normal line but inside we are going to create a circle and its Position will be absolute this is how we can see it on our line let's do that so I will say with one H will be full and I'm going to give background it's going to be gray let's say 600 I will say round it and relative I say relative because as I said our Circle will be position absolute let's see first our line as you can see it's here let's remove this background I'll say size five round it will be full so it's going to be a circle I'm going to give a ring it's going to be like a border and the ring color will be red I'm going to give background it's going to be white let's see okay so how I'm going to Center this remember its size is five and the size of this line is 1 so if I say left minus 2 it's going to be centered okay awesome it's that easy so let's create the other ones right now I can copy and paste experience list item and for the second one we are not going to have any text on the left side I'm going to cut and paste inside right just like that perfect let's see and in this point as you can see we are able to see our SVG in this case our container is going to be horizontal I'm going to come here and for this container I will say if it's a large screen make this Flex let's actually make this is visible if it's ALG it's going to be block and we can give any specific height for our left and right side as you can see in our example at the beginning this right side is smaller if it's two units it's going to be one unit but if it's bigger they are going to be equal one unit and one unit so I will say 1 three but if it's x large it's going to be the half of the screen let's do the same thing for the other container text container here in this case for the small screens it's going to be two out of three and if it's large it's going to be the half and also remember we gave here paddings but in this example if the SVG is visible there's no space here so I will say by the way it's going to be algae if it's ALG the padding rate will be zero okay of course we didn't create our SVG yet let's create if I write this SVG inside the about page is going to be really long it's already more than 250 lines so I'm going to create a new component and let's say brain I'm going to paste here my SVG but before let's say use clients and motion let's give a size it's going to be full and inside I'm going to paste my SVG you can find this SVG in the GitHub repository don't worry about the animation for now let's take care of the design part first let's use it here Rin component and it's here but there is something important here this is going to be sticky let's do that I will say position sticky and top will be zero now that's Q Z index and perfect okay let's see the big screen awesome when it's small it's not going to be visible anymore so let's give our animation let's check here I'm going to close my console and when I scroll down as you can see each part moves in the different direction and with the different speed when I scroll up or down we are going to take our scroll position and using that position we are going to move the part of this brain if you remember this is our scroll container using this container I can calculate my scroll position to do that we are going to be using use scroll hook and I'll say const I'm going to leave here empty for now I will say use scroll and inside I should provide my scroll container container will be this container but to pass this container here we are going to need to use ra hook I will say const that's a container ra use ra hook and I'm going to pass it here and right now I can use it in my use scroll hook and here I can destructure my scroll y progress as you can see you can use the progress of the X AIS or Y AIS we are going to need this one and let's see what we have I'm going to open my console oops this is not our app here by the way I forgot deleting those Now link here okay as we can see the position of the Y scroll is zero the position is 0.95 that means our scroll position is between 0 and 1 at the beginning in this point when our container starts it's zero when it ends it's going to be one so using this changing value we can give rotation animation so let's pass this value here our component I'm going to take this as a prop and before using this value let's let's see what we are going to do let's choose one of them let's see first okay it's behind maybe something more recognizable okay this one if I say motion path and let's say animate rotate 100° and I'm going to give transition effect and the duration will be 2 seconds as you can see this is the animation we want to give let's see again okay but right now instead of this value we are going to use this scr wi progress and we are going to create different rotation animations some of them will be slower and some of them will be faster but how we are going to use it to do that that we are going to need use transform hook let's create an example I will say const rotate forward use transform it comes from framer motion and I'm going to pass here scroll y progress and I'm going to map through my values remember it's from 0 to 1 and using these values we are going to decide our rotation degree and it's going to be let's say 0 to 360 when it's zero it's going to be zero when we scroll down it's going to increase and at the end it's going to be 360° let's use it somewhere where was that okay here right now instead of animate I'm going to be using style and I will say rotate and rotate forward I'm using style because if you say animate it's going to run only once and since the initial point is zero it's not going to move let's see right now I'm going to scroll as you can see this is what we want at the beginning it's zero if I scroll it's going to be 360 it's that easy right now let's remove this and dos and I'm going to create different rotation animations let me actually copy and paste like that as you can see we have four types of forward progress and four types of backward and if they are backward our value will be minus let's use them for this one for example I will say style rotate forward one I'm going to copy this paste here for this one let's say forward four for example let's see and I will do the same thing for each part I don't want to waste time I will just copy and paste and let's see I'm going to scroll and perfect this is what we want and we will use the same scrolling function for the the portfolio we are going to calculate our y position and using this position we are going to scroll our items on the x axis but before doing that let's take care of this animation and this one so I'm going to close this component and again we are going to need a function that c at if our container is on the viewport or not to do that we are going to be using use in view hook I'm going to delete this and I will say skill ra again we are going to need a used ra hook and I will say const is skill RA in view use in view hook and we are going to pass here our ra let's use it in our container here scale container and when we see this container in the viewport this value will be true and using this value we can give different animation for for example this H1 tag or this list let's do that I will say motion do H1 and let's say initial X will be - 300 for example and I will say animate and I can write my condition is kill RA in view the X will be zero if it's not it's not going to change again you can give here any transition let's say delay and 0.2 because when we see our container I don't want to start this immediately it's going to wait a little bit and after it's going to start let's see I'm going to scroll as you can see perfect if you don't want to see this animation anytime we see our container you can write here once and true in this case we are going to see our animation for the first time but if I scroll back as you can see it's not moving anymore I'm going to comment this out you can use it and also you can give here an margin minus 100 pixels in this case I'm going to scroll down as you can see our container is here but there is no animation only if I scroll 100 pixels more it's going to move okay let's do the same thing for the list I'm going to copy here let's paste perfect and let's do the same thing for experience I'm going to create my ref and my function let's say experience we don't need this I'm going to delete and this is our experience container I will say ra experience ra and using this value we are going to animate our H1 tag again initial let give exactly the same thing minus 300 pixels you can give whatever you want and animate will be is experience graph in view is going to be zero and transition and I'm going to copy this and paste here okay what about this SVG let's see again as you can see it's moving on the y axis and we are changing its opacity this is our SVG I will say motion at the beginning the opacity will be let's say 0.2 and Y will be zero and when we animate it's going to be one and the Y Position will be let's say 10 pixels and I'm going to give a transition and I will say repeat and infinity in this case it's not going to stop I will give a duration let's say 3 seconds and I'm going to give a timing function and let's say easy in out just like that okay let's copy this and paste for the other SVG here firstly I will say motion and that's all okay so let's take care of our portfolio page let's see what we have when I scroll down as you can see everything is normal for now but in this point we are moving our projects on the xaxis and as you can see my scroll bar is going down and that means the container includes all our project is position sticky it stays here all the time but at the ending as you can see we are able to scroll on the Y AIS so let's do the same thing we are going to take our scroll y progress and we are going to be using use transform hook but before I want to create a container that includes 1 2 3 4 5 and six full screen component because when we use scroll y progress we are going to need our reference point and it's height will be 600 VH what I mean by that let's close here and open up our portfolio page I'm going to create here a do and and let's say height 600 VH and I'm going to write here my ra let's say ra and let's use our hook const ra equals use ra hook and using this R I'm going to reach my y progress use scroll hook and I'm going to pass my R here you can use container or Target doesn't matter and scroll y progress and after that we are going to move our items on the x axis so I will say x and use transform hook remember how we are doing this we are going to pass our y progress we are going to map this progress and give here any position let's say at the beginning is going to be 0% and 100% we are going to give this animation but before let's create this component I'm going to create a d and I will say my works it's going to be W screen H will be 100 VH but remember we have our nowar here if you want to you can calculate it if you want to you can leave it like that I want to calculate 100 VH minus remember our NAB bar is six RAM and I'm going to Center my text I will say item Center and just why Center let's increase our Tex size it's going to be 8X large and I'll will say Tex Center there's something wrong here oops I forgot codes okay and after that I'm going to create my project container and it's going to be display Flex so we can see our items horizontally and as I said its Position will be sticky I see do the position will be sticky I will say top Z Z in this case I'm going to give here relative otherwise it's going to be over our n Bar I don't want to do that it's going to start from this point I will say flax H will be screen cap between each item I'm going to Center my items and inside we can create our items let's see what we are going to need as you can see we need a title image description and a button here so instead of writing them one by one I'm going to create a list let's create here as you can see title description image and Link and also we have the background color here because in our example it's pink to blue blue to purple purple to Pink so we are going to use those colors so I will say items. map for each item we are going to create a do we are going to need a uni key remember and it's going to be item. ID and inside I will create another D because this is going to be our container this full screen container and inside I'm going to create one more container and it's going to include our tag T image description and button inside we are going to have H1 tag let's say item do title we are going to have an image to do that we can create a container image container remember it should be relative nextjs image source will be item do image and I will say fill after that we are going to have a description item. description and finally a button let's say link create here a button and let's write here our text and the link as will be item dot what was the name link okay for the main de as I said it's going to be full screen I will say Flex item [Music] Center just y center and background will be gradient to right site and I'm going to write here the item color of course to do that we are going to need a back tick instead of cod like that remember our color is something like that from red to blue from Blue to Violet so we can use it directly like this and after that we have another container and it's going to be flexbox again but our items will be vertical Flex column gap between each item and the text color will be white as you can see there's something wrong here because nextjs doesn't allow us to use an external image if you want to use this domain name you have to add it to your nextjs configuration let's do that I'm going to open up my menu find the next ja config and insight I will say images I'm going to add here remote patterns and you can directly add your domain name here or if you need an extra configuration you can write it inside an object like protocol it's going to be only https and the host name it's going to be our domain like that if you want to you can add other domains like this we are going to be using only pack house.com and let's refresh it's going to restart your application and after you are going to see your items okay our items are not full screen let's check this is our main container but after that we didn't create any wrapper it's going to be Flex box so we can see our items horizontally let's wrap our items and see right now okay perfect right now I can scroll on the x axis as you can see our bar is here but I don't want to see that so I will say overflow hidden okay right now I cannot scroll but don't worry using our scroll progress we are going to move this dropper on the X AIS to do that we are going to need motion D and remember we have our x value we can use it here we are not using animate be careful here we have to use style and I'm just going to pass my x value here it basically means x = x and I don't have to do that I can pass it directly and let's see right now as you can see we had a mistake it's going to be minus 100 I'm going to go back scroll down and awesome okay but as you realize there's something wrong here we cannot see our first item because we have started our y progress here at this point it's going to be zero when I scroll down it's going to start moving but I don't want to do that if you want to you can play around this value or you can add here one more D let's do that actually here I'm going to add one more D it's going to be empty so I can have close this and it's going to be exactly the same class name and the background color let's say from purple to Red in this case our container will be here and perfect and as you can see there's a space here to prevent this you can change this value let's say 8 a perc and perfect and after that we are going to need one more component here let's create after our project container here I'm going to create another du and it's going to be full screen again Flex FL column gap between each item and let's enter them you're going to have an H1 tag and let's see what's the text do we have a project and after that we are going to create an SVG to give this animation to do that I'm going to create another do it's going to be the SVG container and it's going to be relative because we are going to create another D here this circle and its Position will be absolute this is why we need this relative parent and inside I'm going to pass here a circle SVG and after that let's create this circle is going to be a link and I will say hire me let's see class name it's going to be 16 height 16 and if it's the medium screen I'm going to increase this size and its Position will be absolute I'll say top zero left zero because it's going to be in the middle remember how we are doing this every direction is zero and if you say margin Auto is going to Center our item background will be black and the text color will be white and it's going to be a circle so I will say round it full and let's see okay there is something wrong because I didn't give HRA let's say contact Beach okay it ends here oh it should be under this de okay perfect let's Center this text I'm going to give Flex item Center just by Center okay so what about our SVG as you can see we we have a circle here but in our example we have a text front end developer and UI designer let's add this text I'm going to come here inside SVG I will say text the color will be black and inside I'm going to add my text path let's write our text and you I and I should give here this circle ID because our text is going to follow this path to do that I'm going to say xlink HRA and this ID and let's increase our Tex size x large let's see right now of course it's going to be hashtag because it's an ID okay it's not here let's see our SVG I didn't give any size I'll say class name background R 500 okay it's not visible because we don't have any width and height let's give 64 height 64 and if you remember we gave medium screen also so let's do the same thing here it's going to be 256 pixels and let's give 500 pixels for example and awesome right now I can give Animation but before let's increase this font size for this H1 tag I'm going to give a class name Tex size will be 8X SL okay let's give our animation I will say motion. SVG animate I'm going to give a rotation it's going to be 360 degrees and this animation will be infinite so I will say transition I will give duration is going to be slower timing function let's say linear it's not going to slow down or speed up it's going to be linear and the repeat will be Infinity just like that it's that easy and when I click here it's going to open up the contact page okay so let's take take care of our items let's see as you can see a really huge title and image and our button will be on the right side I will come here and say class name text x large font will be bold and when it's MD screen it's going to be for x large and for LG six and finally for XL screens is going to be eight just like that let's add our image okay it's here but it's not visible because we didn't give any height and width here I will say 80 56 and again for each each screen is going to be different size I'm just going to paste them I don't want to waste time there is nothing different here we are just changing the image size and for the P tag I'm going to give a width here and it's going to be exactly the same that because as you can see our image ends here but the description is too long I just want to end it here so I'm going to use exactly the same size 80 MD will be 96 LG will be 500 and X will be 600 and for the LG screen the Tex will be large also okay and what about this button let's see our link here I will say class name background R 500 as you can see its width is 100% in this case we can move our button to the right right side so if I say Flex let's remove this and say flax and justy and just like that let's give a style for this button I'm going to give some pading text will be small and if it's MD screen pading will be bigger and the Tex size will be MD and I will do the same thing for the LG screen pedding will be eight text will be large and the background color will be white text color will be gray let's say 600 font weight will be semi bolt I'm going to give some margin and it's going to be rounded just like this okay awesome my [Music] works and hire me if you want to you can change this background I don't know maybe it should be lighter you can give background color for this portfolio container you I say BG red and 300 interesting maybe if I give lighter background it will look better but anyway let's don't waste time if I add something different you can find it in the GitHub repos story let's don't waste time and take care of our contact page let's see as you can see we have two parts this animated part and this form let's create but for the Mobile screen as you can see it's going to be vertical and after this point this large point we are going to split our screen the first part will be this animated part and the second part will be our form let's close here and open up contact so I'm going to delete this text and create a new do and I will say h full and it's going to be flexbox Flex column it's going to be vertical and when it's to LG screen as I said Flex will be row let's give this pedding by the way again I'm going to open up my nowb bar copy this padding and paste it here okay let's say text container one more and is going to be form container and at the beginning when it's the Mobile screen they are going to be the half screen and when it's Flex row it's going to be H full but this time the width will be the half screen I will do the same thing for other D just like that and inside this text container we are going to have this animated text let's say motion. do we can give here any text we want so I'm going to create here text and it's going to be say hello and I'm going to use this text and I'm going to separate each letter using split function and it's going to return as an array that includes every single letter s a y space h e l l o and using this array I will say for each letter and index number return here motion. span and I'm going to pass the letter here of course if you are using map as always you need a key and it's going to be the index number I'm not giving letter because we can have duplication like this L it's not unique so we are going to be using this unique index so let's give our animation I will say initial the opacity will be one and animate is going to be zero and I can give transition effect I will give a duration is going to be 3 seconds repeat will be infinity and I'm going to give a delay using this index index 0. one so for the first item we will not have any delay it's going to be zero first item is going to be 0.1 second item 0.2 3 4 5 so we will be able to see this typing effect and right after that we are going to be using this Emoji I'm going to add this here let's see by the way we don't need this motion here okay perfect it works let's Center our text and increase the font size item Center justy Center text will be 6X L just like this and after we are going to create our form as you can see the background color is this red color and after we are going to have a text a text area that we can add our message another text and input we can add our email another text and finally the sent button so I will say span the lad a text area we are going to have six rows I can self close this and another Spin and what was that let's see my mail address is we are going to have an input here and finally recs and right after that we can add our button now will say sent okay let's give our background color BG red 50 is going to be really light I'm going to give rounded effect it's going to be let's say x large I'm going to increase the tag size again x large and of course they are going to be vertical let's say Flex Flex call gap between each item will be eight and I will say JY Center let's give some pading okay and let's remove this background color PG will be transparent I'm going to give border bottom let say two border button will be black I'm going to delete the outline it's going to be n and as you can see we can resize this to prevent this I will say resize none okay what about here we are going to do exactly the same thing I'm going to copy this and paste for our span of course we cannot resize this we don't need that just like that and for our button background will be purple let's say 200 round it qu we will be semi bolt and the text color will be gray and 600 let's give some pading perfect let's check as you can see this size is bigger because I said row is going to be rows okay awesome and then we send our mail if it's successful we are going to see here a green message if there's an error it's going to be red let's first create here use States const success and set success use State hook at the beginning it's going to be false and I will do the same thing for the error right now using those values I can write my condition after this button I will say if success is true right here as Spen your message has been sent successfully and one more and I will say something went wrong and it's going to be error and in this case it's going to be green let say green 600 and font will be semi bolt I'm going to copy this and paste for the error and it's going to be red let's make this true and see awesome and error okay let's take this back and right now we are ready to send our mail to do that we are going to be using email JS I think it's the easiest way it gives you 500 free email per day if you visit email j.com and sign in you are going to see this dashboard let's add a new service I'm going to add my Gmail account connect my account and we are going to be using this service ID I'm going to copy this create service and I'm going to store this ID in my EMV file let's open up our menu and in the root directory I'm going to create EMV and I will say next public service ID and I'm going to paste it here it's important to say next public because we are using a client side component if you don't write it you won't be able to see your service ID by the way if you are using EMV file write it into your git ignore file I'll say EMV otherwise when you upload your code to GitHub or an other git provider everybody will be able to see your service ID but it should be a secret so this is how we are hiding this and after that we are going to create an email template as you can see there's a default template when somebody sends a message we are going to see its name its message and its email if you want to you can change here let's say email I'll say user email and I'm going to use it here oops let's say edit you don't need this I'm going to delete and I will say user uncore message so basically this message will be this text area message and user email will be this input these are important because we have to use them in our form so I'm going to come here and say name user what was the name user message and this input is going to be name user email don't forget them otherwise you you won't be able to reach your mail and this is our mail address we have already connected we don't have to change that either way let's apply changes and save what's that by the way okay and I'm going to open up settings and I'm going to copy this template ID again EMV file and change this ID and it's going to be template ID and one more I'm going to open up my account as you can see there's a public key I'm going to copy this and the last ID will be public ID actually let's say public key okay right now we can use them in our application let's come back and open up documentation and I'm going to scroll down and find react as you can see we are going to need this Library I'm going to open up my console and I will say mpm install email JS and after that we are going to need use dra hook and we are going to pass it to our form and it's going to automatically find our inputs and text areas and using their names we will be able to send our message and as you can see we are going to pass here our service ID template and public key so let's copy here I'm going to close my console and paste it here that's import that's import email JS and pass this ra here our form and right now we can use our EMV file I will say process. EMV and remember what was the name next public service ID I'm going to copy this is going to be template ID and finally process EMV public key Public public key let's see okay and after if it's successful I will say set success and it's going to be true and after that we are going to reset our form current do reset so if it's successful we are going to remove our inputs and for here I will say set error it's going to be true and if there's an error here and when we try to send again we have to remove that message so at the beginning I'm going to say set error false again and success so when we click on this button we are going to remove all our messages first and after we are going to send if there is an error we are going to set our state or if it's successful we are going to set the success and reset our form okay let's use it in our form and I will say onsubmit and pass it here let's try I'm going to say test message hello gmail.com I will send and as you can see it's successful if you open up your Gmail account you can see that message right now and that's all I think portfolio contact page about page there's an awesome SVG animation here and that's all so let's let's deploy our application to deploy our application we are going to need all the HTML and JavaScript files to do that we should build our application I'm going to open up my terminal and I will say mpm run build but before we need some configuration because our application is static that means we don't have to use not JS there is nothing Dynamic here only thing we should do is upload our HTML CSS and JavaScript files into our hosting let's open up documentation as you can see we have three options our website will be static and the first thing we should do is open up the nextjs configuration and inside this object we are going to write output export let's come here like that and one more thing since we are using our own hosting we are going to need an image loader because remember we are using nexj as image component and it stores all the files inside this cached folder if you don't write your own loader you won't be able to see your images so let's scroll down and I'm going to click on here and loader file configuration and as you can see we are going to need loader and our loader file just like that and let's say the root folder and I'm going to create this file inside my root folder just like that and here as you can see we are going to take the image source it's width and quality and after this point if if you want to you can use any thirdparty image Optimizer but in our application we have just five or six images we don't need any additional configuration we are just going to return our domain name and the image path remember we have our images here in this case it's going to be our domain name Facebook PNG hero PNG or any others but there is one more thing remember we are using some external images like that images. PEX house.com in this case we are going to return this URL what I mean by that let's come here and paste this and I'm going to write here a condition I will say if Source starts with p house.com we are going to return that URL directly if not not we are going to write here our domain name and the image path let's save and I'm going to come here and say mpm run built okay there is something wrong let's see oh I just put them inside remote patterns it's going to be inside images let's build again and right now as you can see we have the out folder and inside we have all our images HTML and JavaScript files so using this folder we are going to upload our files into our hosting let's come here open up the age panel and I'm going to choose file manager as you can see this is our main folder we are going to upload everything inside this folder let's open up our project folder and choose out I'm going to select everything drag and drop here let's see and our website is ready let's check our Pages perfect portfolio Okay pxas images are here and the contact page okay and as you can see our connection is secure because we have a free SSL certificate and that's all and in the future we will create tons of different projects so make sure you subscribe to the channel if you learned something new today please like the video don't forget to follow lamad social media accounts I hope I'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 43,500

Keywords: next.js, react, next.js portfolio, next.js animation, next.js framer, next.js framer motion, next.js portfolio website, next.js portfolio project, next.js tutorial, next.js website, next.js ui design, next.js scroll animation, tailwind, next.js page trainsition, next.js tailwind, next.js projects, next.js course, portfolio website, portfolio animation, creative portfolio website, lamadev, webdesign

Id: DJaZUFK8Kv4

Length: 151min 2sec (9062 seconds)

Published: Mon Feb 05 2024