How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion🌟

hi there today we are going to dive into building a minimal portfolio website using index.js Tailwind CSS and framework motion now as you can see here this is the home page of our portfolio on the left there is this classic image and on the right we have some text and buttons now for this image I have used the mid Journey for those who don't know my journey uh it is an AI tool that generates images from the text forms you just have to tell what kind of image you want in the text and it will generate various images now to use this tool you will need to have a Discord account I will share the text prompt that I have used to generate this image now here we have the navigation section and in the center we have this logo which has the initial CB and on Hover it shows us effect on the right we have the social icons and theme Switcher now if you look closely it is animate animated SVG so when I click on this Moon it will change the theme to dark let's switch back again and here we have a simple footer now uh if I click on this resume button it will download this dummy PDF you can replace this PDF with your resume also there is this hire me button and we have the circular text around this button and this button leads to your email now let's go to the about page now as you saw here we have this cool transition effect we will use a framework motion to create this now in the about page there is simple code in the beginning and here you can put details about yourself we have a profile image and some numbers on the right now if I scroll down this number will increase to a certain limit now let's scroll for the down and we have this skills section now in this skills section I have created this structure that looks like a web and placed the skills let's check this again and it looks great now let's uh scroll down and we have this experience section now uh check out this SVG line that follows the scroll Direction and simple animation applied to this content same for this education section now let's uh open the projects page in the projects page we have text same as the about page here we have featured project in the card that has this bold borders which make it look like a 3D card now in this card we have Project image type title and some details with this links now let's scroll down we have a smaller cards we will use a grid to display all these cards let's open the Articles page now in the Articles page we have this text then latest articles on the top same as the project page now if we scroll down you can see a list of other articles that come out from the bottom when you hover on any of this article name you will see the cover image of the article that follows the cursor all this effects are created using a framework motion now this portfolio is also mobile responsive let's check it out this is the home page and if I click on this hamburger menu it will open up this menu let's go to the about page let's open the projects let's go to the articles let's change the theme and this is the Dark theme I have checked this portfolio link using a page speed insights and we got 100 score in every aspects uh in the mobile and in desktop as well so it is really fast and it does not have any uh side effect or or any delays also I have checked with the inbuilt lighthouse and here we also got got the 100 score for performance accessibility best practice and SEO now for all these social icons and svgs I have downloaded them from iconify dot design it has a lots of icons you can just search from here now let's start creating this portfolio let me close this tabs now uh go to this link you will find this link in the description these are the starter code files where I have added all the required images and text that we will need to create this portfolio now you just have to go here and copy this and open your project folder right CMD which will open the terminal in the windows and just write git clone and paste the link now this will clone the starter code repo and I've already cloned it right here also make sure you change the directory by using as CD and name of the project uh also use npm installed to install all the libraries now let's open the vs code by writing code and Dot this will open the vs code let me walk you through the different files so we have images inside the public folder and inside this images we have images of articles profile images project images and SVG that we are going to use also all the text or the icons pages and prompt and styles now let's uh set up the Tailwind CSS for this project so open the tailwindcss.com and click on this get started we will use the framework guides and click on the next.js now let's follow all the instructions we have already installed the next.js and let's copy this and paste it right here this will install Tailwind CSS post CSS and auto prefixer as a developer dependency and this command will initialize the Telvin CSS and now we will have two files ocss.config.js and Tailwind config file let's open them now let's check the next step configure your template paths so let's copy this and paste it instead of this content so we are using the SRC directory because uh inside this SRC directory we are going to create components and pages so we don't uh net this one let's remove it and save this now add the Tailwind directives to your CSS let's copy this and inside the Styles we have this global.css let's remove all this and only paste the this directives and I think we are ready to develop let's open the 11 server by using an npm run Dev and the server started on 3000 and here is this starter template so first let's go to the index.js page and remove all this and just write home let's check if we have implemented Tailwind CSS let's add one class with the background like and it is applied right here now let's configure our application let's open the underscore app.js file now next yes uses this app component to initialize the pages the component drop is the active page so whenever you navigate between routes this component will change to the new page so anything you pass right here will be received by the new page uh Let's uh let's initialize the fonts so import font name and we are going to import it from the next slash font slash Google uh now for this portfolio we are going to use the monsterat now to use this font we have to initialize it let's declare one variable called on sterart with the small m and we will use this font now inside this font we can add a different options so uh we want subsets of the Latin and also we want this font to be used by the variable name so we will Define one variable let's just write dash dash font Dash m o n t you can read more about this from the index.js documentation so let's open it next fonts click on this link foreign here you will find the documentation on how to use fonts with the jln CSS so we have done up to this point and and this is how we can use this variable inside the app component so let's uh copy this and paste it right here instead of nter we have Monster Rod now uh let's uh use this variable inside the Tailwind CSS so open the tailwind.config.js file now as mentioned here first we will import the font family from the default theme then inside the theme we will extend it with by adding this new font family let's just copy this and paste it right here now the variable name for our font is demo and T now it is the type of the Sans font let's change the name here from Sans to MNT and now inside the app file instead of font Dash sounds we can use this font now instead of this sounds we can use our variable let's save this let's remove this background and check this out and the font is applied now why I have selected this specific fonts because these fonts are variable which means uh they can accept different type of Weights we don't have to Define different weights right here we can directly add it in these styles now inside this index let's remove this we don't need the image or the styles let's save this now for both of these lines we are going to use it in every page so let's uh let's cut it from the index.js and paste it inside this app component let's import the add element from the next slash head and inside this head we will paste these lines make sure you grab this hole by using the react fragment now let's declare some variables for the colors inside this Tailwind CSS so to declare uh new color variables you just have to write Colors and here you can write variable name and the color code or color hash let's open the public folder and inside the alt text folder open the styles.txt file here you will get uh all the variables that we are going to use so let's copy this and paste it right here now for the dark I have this one shade of the black color and for the light that is this shade of the white and for the primary we are going to use a dark pink and for the primary dark we are going to use electric blue let's save this and let's open the app file now let's add the background color to BG light so this will use the uh light variable let's keep the width to full by using W Dash full and minimum height let's set it to 100 BH and for that you can use H dash screen let's check this out now this light variable has a different shade than the normal white color now let's create the never component for that go to the SRC and create one folder called the components and inside this component create one file called Neo bar dot Js now here I am using react Snippets to create this component you can just write r a f c e and it will and it will generate this snippet let me close this and minimize it now for this number we are going to import it inside this app before the component let's import it foreign we will use the header let's style this header set it width to full and let's add the padding left and right for that you can use PX and set it value to 32. which is around the 8 Ram and set padding top and bottom to 8. we will keep the font to medium so it will add some weight on the fonts now let's add the items so first we will add four links and for that we will use the nav let's import the link element from the next slash link inside this link we have to give the address so first is the home so just write slash and right home let's do the same for other links second is the about third is for the projects so slash projects last one is for the Slash articles let's save this now after this navigation we will display the logo so for now let's just write logo and for the right side we are going to display social media icons so for that we are going to use the nav again and add link for now let's just write the Slash and let's add the target attribute to blank so that it will open in the new tab first is the Twitter so just write t and paste it for five more times let's say this let's style it uh set display of this header to flex items to Center and justify content to justify Dash between now it looks great let's create the logo component or that go to the components folder and create one file called logo dot Js just write rafce and it will generate this small snippet let's import this logo component inside the navigation bar now let's style this add class name inside this div let's use this payflex and items to Center justify content to Center as well and margin top 2 2. mt-2 will add the margin top to 0.5 Ram now for the logo we will use the link component so whenever someone clicks on the logo it will redirect them to the home page so for the Edge Drive we will use the Slash and let's add the initials of your name for me I am writing the CB don't forget to import this link from the next slash link let's add some classes let's skip width to 16 and height to 16 as well with Dash 16 adds 4 Ram of width and 4 Ram of height let's change the background to BG Dash dark and text dash light Also let's set the display to flex items Center and justify content to Center now to make this round we will use the rounded glass [Music] this will make it a little bit round now to make the whole round we'll use rounded Dash full and here we have our logo now let's increase the text size for that you can use text Dash LG MDR let's try double XL and we want this font to be bold and now it looks great now on Hover we want to change this different colors inside this logo for that we are going to use the framework motion so let's import the motion element from the framer motion now usually to use this motion element we can just write motion before this HTML element motion dot do and now inside this we can use the different properties of the frame of motion but we are going to use the motion inside this link and for that we have to Define one variable called let's name it as motion link and here we will pass the link component to this motion element let's use this motion link instead of this simple link now to use different animations on the framer we have different properties such as while over which will activate when when we hover on this logo so for now let's just write scale to 1.5 let's save this and check this out as you can see here when I hover on this logo it is scaling up from 1 to 1.5 so instead of the scale we are going to change the colors so let's remove this and make sure you write this properties inside this double brackets let's change the background color now here we are going to pass an array of different colors for that you can go to the public alt text and open these styles.txt file and add the end of the file you will find this area of different colors just copy this and paste it right here now as you can see on Hover it is changing the different colors but it is running only for once so let's add the transition inside this transition you can declare different properties such as duration of the animation let's keep it for one second and we want to repeat this animation for infinite time so just write in Infinity let's save this let's reload this and it is working great now this logo is not uh in the center so for that we are going to use fixed or absolute take this logo out from here and add one to paste the logo and let's set the position of this div IDE absolute and we want center from the left so right left dash 50 percent and 2 from the top and also let's Translate X to minus 50 percent so this will make it in the center let's save this now it's it looks like in the center of this page now for this links instead of adding styles for each of this link we will create one component called custom link and this component will take href title and the class name if there is any other ways we'll pass the empty string let's use the arrow function and return the link element let's add the title and instead of this link let's use this custom link also we don't need this let's add title foreign for this change the title to about projects and articles let's save this now to use this class name we will add it inside the link using curly braces and back text add the dollar sign braces and use the class name so whenever someone passed the class time from this link it will apply to this link right here let's add the class name for this this link set margin right to 4 and as you can see it is applied right here let's do the same for other links as well instead of margin right we will use margin right and left so for that you can write mx-4 let's do the same for projects and for the article we will use margin Dash left let's save this and it looks great now uh let's uh add the underline for this links now for the underline we are going to use the spawn element just write M person n b s p and let's add the class name will keep the height to 1 1 pixel let's change its display to inline block and let's keep it its width to full so let's change the background to BG dark foreign class for this link and for the spawn we will use the absolute let's set left to zero and bottom to zero as well let's add some more offset for that we are going to use the negative value of the bottom from 0 to minus 0.5 and this looks great and now this h-1 is applying the 4 pixel height we only want one pixel now this looks great now on hold of this link I want to animate the spawn from with 0 to full width so let's do this now the link is the parent element of this Pawn so I want to animate this Pawn when someone holds on this link so let's add one class name called group and on the group Dash over we'll use the which Dash full otherwise width is going to be 0 and let's set the transition to width only and transition type 2 is let's set duration to 300 milliseconds let's save this and check this out and it looks great also when someone is on the home or about page we want to keep the spawn width so let's use the use router hook right cons router and let's import this use router Hook from the next slash router now let's see what this hook provides so just log console.log router let's save this and check it out so this router hook provides us an object which has different properties such as a push as part Etc we only we are going to use this as part which will uh going to show us the URL on which the user is so let's remove this let's copy this classes and add the curly braces and back text paste the class name now we will check if the router Dot s path is equal to the href then we will keep the width to full as we will keep the width to zero so remove this width and let's save this now as you can see we are on the slash so it is the home page and that's why the spawn element is right there that's it now let's add this social icons foreign we are not going to use SVG directly instead we are going to use the svgr to convert them into the react component and now inside this components folder let's create one file called icons dot JS in this file we are going to show all the SVG components so let's open the SVG r now this is react-so gr.com when you paste any SVG right here it will convert it into the vi component so that you can easily manipulate this SVG that's uh let's open the Twitter SVG let's copy this and paste it right here it has converted this SVG into a react usable SVG so now let's copy this converted SVG component and paste it inside the icons.js file let's change its name to Twitter icon now instead of this props we will pass the class name and the rest of the prompts to use this class name we'll pass it inside the class name using curly braces and back text just write dollar sign brackets and class Name by doing this we can pass different class names directly to this component which will be applied to this SVG Also let's keep the width to full and height to auto Z of this props let's use the rest let's use this icon inside this Nail Bar instead of this t let's just write Twitter icon make sure you import it from the icons file let's save this and here is the Twitter icon now we are going to do same for all the icons I have already created one file called the icons Dot txt in this file I have converted all the SVG to a react usable svgs so just copy this file and paste it right here so there are all the svgs that we are going to use let's save this and add the different icons first is the critters next let's add the GitHub icon next is the LinkedIn and let's uh add the Pinterest foreign that's it we don't need this one make sure you import all the icons from this dot slash icons file let's remove this from the default export and add it inside the list let's check it out and it looks great let's style this icons let's keep the display to flex items to Center justify Center and let's add the flex Dash wrap now let's uh add a simple motion animation instead of using this link let's just use the anchor tag let's change these links now we are going to use framer motion so let's import the motion component from the framer motion now to use this motion we have to apply it before this HTML element so just write motion dot anchor tag now here we are going to use the while over property let's add the double brackets and I just want to lift the icon when someone holds on it so just use y to minus 2. let's save this and check this out and it looks great let's increase the width of all these icons let's add the class name set the width to 6 and margin right to 3. let's do the same for all this links also there is one more property called while tab which will work when someone Taps on this icon let's scale it down to 0.9 let's copy this and paste it in the in all other links thank you Also let's change the simple anchor tag to motion dot anchor tag let's save this and it is not working for the dribble let's check it now it looks great now let's increase the margin between these links now instead of this Mr let's use MX to increase its margin on left and right of the link let's do the same for both of this link for the last link we will use margin Dash left let's save this and it looks great as you can see when I tap this it is scaling down from 1 to 0.9 now this simple and subtle animations uh stands out from this uh those typical animations now let's see how we can get the this image on the left now uh open the images.com and if you haven't uh have made an account on the Discord then make sure you have one now on this side click on the join beta and it will lead you to the their Discord Channel now this this is the mid Journey channel on the Discord and you can open any newbies Channel now here you just uh have to write slash imagine and press enter then write your text that you want to change it to the image now uh inside the code if you open the froms.txt file and here is the problem that I have used to create that image which is a developer wearing a glasses and I want it to be it in a digital art as a profile picture and with the white background so just copy this and paste it right here don't forget to write this last imagine and press enter now this will take some time to generate the image and it will generate a four image if you want to upscale any of this image you can press this buttons U1 for upscaling image one or if you want a variation of any of this image you can press this button with the V V4 will give you variant different variant of this fourth image now let's see if whether our image is ready or not as mentioned here it says waiting to start foreign before you use any of the images generated by their AI now it has started generating the image now it has generated these four Images if you want to upscale any of the image you can just press this buttons or you can or you can get variations of these images by pressing this V1 V2 V3 or V4 button and that's how you can generate these images using the mid Journey after generating the image make sure you add them in your public folder uh here I have added it inside this images and profile uh folder you can also remove the background by using remove dot BG or such websites now let's create this home section now let's open the index.js file and inside this main let's add some classes let's set the display to flex item Center and text to dark which do full and minimum height to 100 VH so for that you can use this class called minimum height screen now before we create a further components let's create the layout so inside the components folder create one file called layout dot Js and let's import it inside the index.js file thank you please now this layout will accept two things first is the child components so just write children and second is the class name if we want to change uh any class of this layout let's add the class name write the brackets and back text dollar sign and add the class name now instead of this layout Let's uh render the children inside this live inside the index let's pass the H1 with the home now let's add more classes inside this layout set with two full and height 2 full as well let's keep its display to inline Dash block set index to 0 and background to BG dash light Also let's set padding to p-32 which means pairing a a to ram that's it now inside this layout we will create uh one more div so let's create one right do T display to Flags set items Center and justify space in between also set with two full make sure you you change this from class to class name now we will add one more div which which will act as a as an image container so let's create one div and inside this div we will use the image component from the next slash image and this image component will uh take SRC Alt you can just write your name and also inside the class name we will keep the width to full and height to auto that's it now let's import our profile picture import profile pic from dot slash find the public folder slash Images slash profile and select the first image let's put this profile pic inside the SRC and let's save this and it looks great now we don't need the padding top inside the layout so let's add the class name and pairing top to zero also uh this deal should only cover the half of the bits so for that we will add one class called with dash one by two which means width equal to 50 percent that's it now after the image we will add the text so after this div add one module and here let's just write H1 tag and after the edge one add one paragraph tag now for this text you can get it from the pages.txt file just copy the first line and paste it inside this H1 tag and copy this second paragraph and paste it inside the P tag let's save this and it is right here now let's style it this text view will also have width of 50 percent now let's uh animate this first text now let's uh animate this H1 text for this we are going to create a separate component so that we can use it in the different pages open the components folder and create one file called animated text Dot Js and let's import it inside our index.js file now this animated text Will will have the two props one is the text and other is the class name initially the class name is an empty string let's save this and inside this index let's pass the text that we want to animate let's cut this paste it right here Let's uh add some classes inside this div foreign [Music] margin left and right to auto side padding top and bottom to two and set display to flex items to Center justify them in this Center as well set text to Center Also let's set the Overflow property to Hidden inside this div let's use one more H1 tag let's add some classes now for this H1 tag we are going to use this class name inside this H1 so make sure you use the curly braces and back text and dollar sign and prices to include this class name let's keep the display to inline block width to full text to dark and let's set font to bold and capitalize Also let's set text size to the 8 XL and instead of this animated text we will split the text so let's write text Dot split this text by the space and now we will get the array of words so we will use the map function map function will give us the word and the index now let's uh return the spawn tag with each word and one space so for space we can do Ampersand nbsp this will add one space after each word and here we are using the map so we have to add the key for key we can use index bar to make this key more unique we can do word Plus add Dash Plus index this will generate unique key for each of these words let's save this and the text are bigger if you want to decrease the size of the text we can do from here to we just have to pass the class name and set text to let's say 6xl and it is not working because we already have defined one size here which is text 8xl and then we are trying to Define uh we are trying to override this now to override this we can use the important inside the CSS but uh in the Tailwind you can just place the exclamation mark before this class name it will add important keyword right here let's save this now let's add some classes before this animated text let's set the display of this div to Flags and set the flex direction to flex Dash column so Flex Dash call set items to Center and self to Center as well let's save this and let's give the display to this one tag right and line block let's check it out and it looks great let's set this text on the left side so for that we have to override one more class right text Dash left and now it looks great now let's animate this text for that we will using motion from the framework motion now instead of writing initial and animate properties for each of these elements we can Define the variance like uh let's say for this we can write code and inside this we can write initial property and set its opacity to zero and for the animate we can write opacity to one and let's add the transition as well let's delay this by 0.5 now we just have to use this code inside this H1 now before that let's convert this into a framework motion component so just write motion dot H1 and we can use this whole uh we can use this directly inside the H1 by using the variance and let's pass the code now inside the initial we just have to write the first property that we have defined which is initial so let's write initial and for the animate let's write the inmate so this will eventually take this properties and its values and this animate will take this values let's save this I think that is spelling mistake let's change this to any show let's check this out and you can see opacity goes from 0 to 1. now here we will animate each word uh so in this animation each word will come from down to the top for that we will use the motion dot spawn and same for this we will create variance as well instead of code let's write single word and in this let's add y to 50 so initially we want each word uh down from its original position and inside the animate we will set y to zero and let's uh set the duration to one second now let's add it inside this spawn write variance and pass the single word or the initial let's write the niche initial and same for the animate let's reload this and the animation is happening for all the words at the same time now to delay this we can use one property called stagger children right here inside this code after the delay let's use the stagger children and set its uh time to 0.08 second now this property will delay uh each of these children by this 0.08 second let's save this let's reload this now instead of this opacity 0 let's keep it to one I think if if we are using this staggered children we don't have to initialize this let's save this and let's reload now it looks great so our animate text is completed Let's uh add two buttons now for this paragraph let's add uh some classes set margin top and bottom to four text size to text base which is the 16 pixel set on to medium and that's it let's check it out looks great now after this paragraph tag Let's uh add one more div and inside this div we will add two buttons now this will be the link component here we will uh add the file name out of the PDF file name that we want to download whenever someone clicks on this resume button for that we can just set the slash dummy dot PDF now this to work make sure you have this PDF inside this uh public directory and not uh inside any of this folder but outside of this folders and inside this public folder called dummy dot PDF let's just write resume make sure you import link from the next slash link and after this link let's add one more link component and inside the href we will use the mail to and let's write your mail right contact let's save this now on click of the resume it will open this dummy PDF now it is opening this PDF inside the same tab so let's add the target attribute set Target to blank same goes for this contact as well let's check it out again and it is opening in the new tab let's style this so for this too let's set its display to flex items to Center and self to the start of the element and set margin top to and looks great now for this resume let's add a class name set display to flex items to Center and let's set its background to dark and text color to light Also let's add the padding to 2.5 let's increase the left and right padding by using px-6 let's make it rounded by applying the class to round rate Dash LG and increase the text size to text LG Let's uh set the font weight to font Dash summing bold and it looks great now on Hover I want to change the background color and text color as well and for that you can use forward colon write BG dash light and same for the text right over colon text Dash dark so on Hover it will change the background and text color let's add the powder as well set border border Dash solid and for now set border Dash transparent but on Hover we will set the Border color from transparent to dark and it looks great let's uh increase this border bit so just write border Dash 2 and it looks great now also to uh instead of opening this PDF inside the uh another tab you can also set one attribute to download this PDF so inside this link just use the download attribute and set it to true let's save this and check this out and click of it and resume it will download this PDF let's add one icon right here if you go to the icons file and here is the link Arrow so after they resume let's add this icon make sure you import it from the icons file for this icon switch we will set the class name to width-6 and set margin left to 1 let's save this and it looks great now let's add the style for the contact as well set margin left to 4 text size increase it to large font let's set it to medium and let's capitalize this fonts and change the text color to dark and let's add an underline to this text [Music] and it looks great now let's create the footer as well close all these files and inside this component create one file called footer dot Js and let's import it inside the app.js file so after the component import the footer let's use the footer element and let's import the layout as well now inside this layout we will display three things so one is for the rights and another is for the link and the last one for the contact which is going to be the link as well let's check it out so here is the footer now let's style this add bit to full border desktop to two let's set the order to solid and Border color to dark here is the Border let's set font way to font medium text to large now inside this layout let's pass this class names we don't want uh this much padding so we will write the padding top and bottom to 8 only and set display to flex items Center justify them space between now uh as you can see whenever I write the class name I am getting this suggestions because I have installed this extension foreign CSS intellisense uh which will give us the suggestion for different class names so make sure you install this so let's write justify space between and save this and it looks great now instead of writes let's write uh first let's get the full year for that you can use new date dot get full year and let's use the ampersand copy for the copies Copyright symbol and write all rights result that's it now inside this link Let's uh use a div and add the link inside this div we will write write the build with let's add one symbol you can use Ampersand hearts or you can use this symbol which starts from Ampersand hash 9825 which is also a heart but it is not the solid one let's add this inside this path and let's add some glasses set X color to text Dash primary which will make it uh dark pink and let's increase its size by using text Dash 2XL and let's uh add the padding right and left so px-1 that's it now inside this table let's change its display to flex and set items to Center thank you and it looks great let's just add Buy we have to add Space by using Ampersand and bsp by code bugs now for the code box you can add anything right here you can add your link uh I'm adding my own website which is called Dave dreaming.com Let's uh add the underline now also uh by using Telvin you can also add subset between the underline and this word so let's use underline offset to to now you can see some space between this word and this line now let's do this same link for this say hello as well and set its Target to new tab [Music] let's add the underline for this say hello as well just copy this and press it right here now our footer looks great now let's create that round text and Harmony button now for that uh you have to create the account in the canva so I have already created One account inside the canva just search for the Instagram post and select on the Square you can open any blank template for now we will use this create playing Instagram post now here let's add the text let's write web developer space and Dot space again right UI slash ux designer space dot space now uh for this text let's select our phones and here is our font which is the Monserrat let's make it bold and click on this effects and select this curve now we will create this go until the it it reaches the whole circle now before that let's increase the size to 60. let's increase the curvature that's it now you can download this first let's increase its size and let's download this now this will be in the PNG now we will use this erase.bg to remove the background so let's upload the image from the desktop and this will remove the white background from here let's download the original size now let's uh convert this image into an SVG using this Adobe Express now I have already converted this so which you can see in the public folder and go to the images now this is the PNG file without the background and inside the icons file you can see there is this circular text which is the conversation of this png2 and SVG so we will use this now let's uh create a separate component for this higher me button inside the components folder let's create one file called hire me dot Js and let's import it inside the index.js file just add the hire me after the layout now inside this harmony first uh let's set some classes inside this div we are going to set its position to be fixed set 4 from the left and 4 from the bottom set its display to flex items to Center justify to Center as well also keep overflow to Hidden now inside this div let's create one more div so this view will be the circle so let's add the class with the width to 48 and height to auto let's set its display to Flags items to Center justify it in the center keep it relative now inside this div we are going to import the circular text SVG let Let's uh change the color by using fill Dash dark and let's check this out and here is our SVG now let's spin it by using one class called animate Dash spin let's save this and check it out now this is really fast so we have to slow it down and for this we can create a separate animation if you check the this Tailwind docks let's write the animation and click on this customizing your theme now this is how we can reduce the uh spin so let's copy this animation and open the Tailwind config.js file now after this colors let's add the animation now this pin slow is going to be the class name now this will spin for the three second now let's save this and use this class pin slow it is slow but still that is little bit faster so let's uh change this to 8 Seconds and now it looks great now in the center of this SVG Let's uh add the harmony button so open the hearme.js file and inside this div we will add one link inside the edge ref we will use mail 2 and write your email for the text we will write hire me make sure you import the link component from the next slash link inside the class name of this link let's keep its display to Flags items to Center justify content to Center as well and we are going to uh position it to the absolute so that we can keep this button at the center left right one by two so left is going to be 50 from the top one by two and let's translate x to the 1 by 2 as well but in the negative Direction let's do the same for the Y let's check it out so here is the harmony let's give it a background color to dark and text to light Also let's add some Shadow to Shadow Dash MD which stands for the shadow medium and let's add the powder border Dash solid and for now we will keep the Border Dash dark let's save this let's add some width and height so let's add width to 20 and high to 20 as well and make it more rounded so right rounded Dash full class this will make it Circle and it looks great now let's uh increase the font size so write font Dash semi bold and it looks great let's change the styles on Hover on Hover uh let's change background from dark to light and on whole let's change text from light to dark let's see now let's add the light bulb image on the right so open the index and after the hire me let's add one two inside this div we will use the image this image will accept one SRC and ALT text let's just write our name and for the class name we'll keep the width to full and height to auto now for the SRC let's import the live light bulb image so import light table from slash dot dot slash public slash images slash svgs slash find the miscellaneous icon let's copy this and paste it inside the SRC let's check this out and it is quite big let's add the class inside the div we'll keep it absolute date from the right and it from the bottom as well set its display to inline block and inside it width to 24. so with with Dash 24 which means width equal to 6 Ram and it looks great that's it for this home page uh now let's create this about page now let's open the Pages folder and create one page called about.js and let's create this snippet now first let's uh add the add element from the next slash head and add the title Let's uh add the name and type and write about page you can also add description by using a meta and for the name just write description and for the content you can write any description you want for this page this will uh help you to achieve a good SEO for your portfolio let me just close this now let's start with the main element here we will import we will import the animated text component and for the text let's use the this file and just copy this which says passion fuels purpose and let's save this looks great let's add some classes we want the display to flex width to full and flex direction to column let's set items to Center and justify to Center as well now let's add this animated text inside the layout component make sure you import it people and it looks great but we don't want this extra padding here so let's remove it in the layout class pass the class name and set firing top to 16. and now it looks great now let's create one due to store the details profile image and numbers so after the animated text let's write one do and let's add some class we will use CSS grid for that just write grid and keep it width to pull we will use eight columns so write grid Dash calls Dash 8 this will create the eight column layout and we will set Gap grid Gap to 16. so for the first two where we will store all the information about yourself so let's just write H2 and set its title to biography or you can uh also write about me or something like that let's set its class set margin bottom to four let's increase the text to large set font to bold and make it uppercase Also let's not set a whole text totally dark so we will use the opacity let's set it to 75 so as you can see here this will set this opacity of this dark color to 0.75 let's save this and it looks good now for this still let's add some classes this detail should cover three columns so we will write call Dash span-3 and set display to flex text direction to column set items to item start and justify all the item to start as well that's it now after the H2 let's add the paragraph now for all the stacks you can go to this page.txt and here are all the paragraph Let's uh paste it paste them right here for each paragraph I am creating the paragraph tag Let's uh add some class name set font to medium same for this paragraph as well also for the middle paragraph let's give it a margin top and bottom to four so mi Dash 4 let's save this and looks great let's add some margin to the bottom of this text for that we can add the class name inside this animated text margin bottom to 16. and looks great that's it now let's add the profile image so after this do let's add one module where we will add the profile picture let's use the image from the next slash image SRC for the alt tag you can just write your name or the class name we will keep it twitch to full height to auto and we'll make it rounded to let's say to excel let's import this image import profile click from public slash Images slash profile slash select the pick 2 let's copy this and paste it right here now for this view let's set the class name uh this table also occupy the three columns so write call Dash spawn Dash three let's keep its position to relative we'll set height to Max and this will be also rounded to 2XL let's set the Border Dash 2 border solid and water dark Also let's set the background of this image to light set padding to 8 that's it let's save this and looks great now let's add this uh darts darker border on this right and bottom of this image for that we will add one more div here let's make it self-closing deal and we'll add some class names I will keep this due absolute and 0 from the top and minus 3 from the right so for that you can just write minus right dash three and let's keep it it's Z index to minus 10 so minus Z minus 10. let's set it switch to instead of 100 we will increase its width so that we can see it on the sides so let's keep 102 percent and same for the height uh let's increase the height to three percent so 103 let's make it rounded up to 2XL and set the background to dark let's save this and it looks great but let's change this uh radius so instead of uh rounded to excel let's try to ram and it looks great it looks like a 3D that's it for this profile image now let's uh add this numbers foreign let's create a 112 this table will have one more do which will contain the one spawn tag let's just write 50 Plus and after this Pawn let's use the H2 and let's try it satisfied clients let's create two modules let's write 40 plus projects completed and for Plus years of experience that's it first let's uh give you style to this main div let's set go spawn to 2 this table should only occupy two columns let's set display to flex next direction to column items to the end and justify space between let's save this let's increase the size for the sleeve let's set its display to Flags Flex direction to column items to n and justify to Center let's use this same classes for both of this do and now it's aligned to the right let's increase this size of these numbers uh settings display to inline block let's increase the tag size to up to 7xl and change default way to font Dash bold that's it let's apply this for all the numbers and it looks great Also let's uh add some glass in in this H2 element let's increase the text size to text Dash Excel font weight to medium let's capitalize this and set text color text Dash dark slash 75 opacity let's save this copy this and paste in the other H2 elements let's check it out now for this number let's create a separate component let's create const animated numbers here we will pass the value and this will return this span element so first uh let's use the use ref will connect this wrap with this one so that we can access this element now we are going to use three hooks provided by the framework motion so first will be the motion value the hook is used motion value and will pass 0 initially and the next is the use bring or then let's write the variable name called spring value and let's import the U spring now this u-spring hook will uh first take the initial value for initial value we will pass the motion value and an configuration object where we can pass different options such as duration of the animation let's keep it to three seconds so 3000 milliseconds and uh one more Hook is for the uh use any View so let's write is in View and let's import the use in view hook now this hook uh will help us to run the animation when the element is in view when the element is in view of the viewport so this hook will accept the element so let's write ref now let's see what are these three hooks that framework motion provides so first let's uh go to the documentation let's go to the overview and here is the use motion value so uh as it says by manually creating the motion values we can set and get the state pass it to the multiple components to synchronize motion across them and chain motion value instead of this use motion value we could use a simple use statehood but there is some benefits so that's why we are going to use use motion value so initially it is a zero and next is the use spring now you spring as it says a motion value that animates to its Target with the spring so spring is a type of animation and as mentioned here the spring takes initial value X which is a motion value and if we set this value let's say x dot set let's say 50 then it will animate from 0 to 50. so that's why we are going to use U spring and another one is the use in view so it is a simple State hook for when an element is within the viewport let's write the use effect make sure you import it so first we will check if element is in view if this returns true then we will set this motion value to the past value which can be 50 40 or 4 so let's write motion value dot set and inside this brackets let's pass the value so it will set the value so so that our element can animate from 0 to this value also in the dependency less let's pass the use in view and also value let's pass this motion value as well so any changes happen in this 3 will trigger this code now let's create the Second Use effect now in this use effect we will use the spring value now on Spring value dot on change event we will pass a callback now this callback will give us the latest value so first let's just log the value use console.log and pass latest and inside this dependency we will use the spring value and value let's just use this component instead of this numbers let's pass the 50 as the value and let's save this I think there is some mistake uh this ref should not be inside the brackets so let's remove this and let's let's check this out again and we are getting this latest value which is from 0 to 50. so let's uh update this value we will set the condition if ref is there which means element is already mounted and let's test let's use two fixed zero so it will not show us the fraction values Which is less than or equal to value then we will change the ref dot current dot text content to the latest dot two fixed zero let's save this and it is working great that's it so let's uh use this for all these numbers let's fast value as 40 and in here let's pass the four and it is working great now let's uh add one more thing we don't want this to animate every time someone scroll down or up so that's why we will add one option inside this using view hook which says only once and set it to true so it will not animate uh multiple times and it will animate only for once when the page is loaded that's it now let's create these skills for that let's go to the components folder and create one file called skills dot Js and let's import it inside this about.js page inside the layout let's close other tabs and just open the skills make sure you add the react fragments let's add the title inside the h2 tag let's write skills and in the class name that's increase the font way to font bold text size to hit Excel and margin top to 64. and width to full and set text to Center now after this uh h2 tag let's create one more div let's add the class name set width to full and height to screen now H dash screen glass will give height of 100 uh viewport height and let's keep it its position to relative and let's set display to Flags items to Center and justify to Center as well and let's make it rounded to full and here is our skills section now let's create the that web pattern right here now for that we are going to use repeating radial gradient let's check out this mdn documentation now this uh repeating radial gradient is a CSS function that creates an image consisting of repeating gradients that radiate from An Origin just like this so this function takes uh different colors and position so let's try different settings now in our case we are going to use black and white color so let's write rgba zero zero zero and for the opacity use 0.4 now for the second color we are going to use the shade of white which is F5 F5 F5 and let's set it for up to 5 pixel now let's add one more white shade with F5 F5 and F5 and let's uh increase it to 100 pixel and this looks good let's increase the size of the black color to 2 pixel let's copy this let's see how we can implement this inside our application in the Tailwind CSS open the Tailwind config file and after this animation let's use a background image and let's create one variable called circular and light a light is for the light theme we will create another for the Dark theme so we have three colors one is black up to two pixels white up to five and another white shade for the up to 100 pixel let's save this let's use this variable now inside this table just write BG and variable name which is circular light let's save this and it looks great if you remove this rounded full you can see this full gradient we don't want the full so that's why we are going to use rounded Dash 4 now let's uh start uh adding skills first let's add one div and inside this div We'll add the web let's add a class name set display to flex items to Center justify to Center as well let's make it more Circle so rounded Dash hole set font to semi bold and margin set back down to dark and text to light let's save this let's increase the padding so set pairing to heat and let's add the shadow of dark color looks great now let's uh add on Hover effect now for this we are going to use the motion from the framer motion so let's use this motion for this tube just write motion dot do and we will use the while hover property so while hover we will scale this to 1.05 let's check it out looks great Let's uh change the cursor to pointer and it looks great now let's add all the skills now we are going to add multiple skills for that let's create an individual component called skill now this skill will take three arguments name of the skills uh position on the x-axis and position on the y-axis so let's return now we are going to uh style the skills same as this web so let's just copy this paste it right here and let's save this now instead of web we are going to pass the name let's use this skill for the name let's pass the CSS and for the x-axis I'm going to use the viewport width so just pass minus 5 you put width and for the Y plus minus 10 viewport width let's see how this looks okay side by side but uh we are going to make this absolute and then we are going to change its position so let's uh set the skills to Absolute and uh and instead of padding Dash 8 let's set padding uh top and bottom up to three and padding left and Y to six now CSS is on top of the web so let's see how we can set the position so we are going to use the initial initial prop and initially let's set X to Zero and Y to zero as well now on [Music] animate we will change its position to the X that comes from the props and same for the Y let's add the transition value for the duration let's keep it to 1.5 seconds let's save this and as you can see the CSS skills is away from the center Let's uh add more skills let's add the HTML Set uh 20 viewport width away from the x-axis and to viewport width away from the y-axis now these are all the values that I have set by experimenting different values so you can either copy this or you can add any custom value you like so let's add all other skills now let's save this and check it out and this looks great let's change the position of this HTML element on the left set to [Music] 22 viewport width let's set it to 25 and it looks great now uh on scroll I want to animate all all the skills from Z from the center to this positions now for that let's uh use while in view instead of this animate let's save this and whenever I scroll down and whenever the skills are in view it will animate from the center to their own position now if you only want to animate these skills only for once then you can add viewport and add once to true so this will not animate every time you scroll down only for once as you can see here now this cable component is completed so let's create the experiment component create one file called sorry it's experience experience dot Js okay that's imported and the about.js file after the skills now inside this view let's add the class let's set margin top and bottom to 64. and same as we did for the skills let's create the title and let's add the class inside this H2 element change font weight to font Dash bold increase the text size set margin bottom to 32 width to 4 and text to Center let's save this and here is the experience now after this title let's create one div inside this div we will use UL elements and inside this another list we will add few L elements with the details first let's add some class inside this do let's set width to full uh let's uh keep it to 75 because we want all the details to be seen in the center let's add width 275 margin left and right to auto and set position to relative now for this alignment we are going to have four to five elements so instead of creating all this individually let's create a component called details and this component will accept [Music] a few data such as position company link time address and work and in this details component will return the Li element inside this error element Let's uh use one div and inside this div let's add one H3 element where we will uh use the position current position of position of your experience and inside this H3 let's give one space by using Ampersand and bsp and let's use ankle link here we will use at and company name and in place of href we will use the company link after the H3 let's use the font tag inside this spawn tag first we will display the time then a pipe symbol then the address after this one let's use the paragraph tag where we will display the work details now let's copy this and instead of this Ally let's use the details component now for all the text you can open the pages dot txt file if you uh want to open this menu just click on control plus b and write Pages dot txt file now in this experience let's copy this and inside the details paste it right here now we will need position company link time address and work so for the position let's use software engineering or the company let's use Google in the time paste this one and for the address let's use this and cut this out and paste it for the work now for the company link let's write www.google.com let's save this and here is the details let's let's uh style this details just now in the Ally tag let's add class name let's set margin top and bottom to 8 we don't need any margin for the first and the last element so set first margin top to zero and for the last margin bottom to zero Now set its width to 60 percent set margin left and right to auto set display to flex and flex direction to flex Dash column set items to Center and justify space between now for this do we don't need to add any style let's go to the H3 tag let's capitalize thank you set font way to font touch bold set text size to 2XL that's it now for this one let's use capitalize again Set uh font to medium and set text to dark but not uh total dark so we will add opacity by just writing slash 75 so this will add and 0.75 opacity to to this dark color save this and for the paragraph Let's uh set the font weight to medium and width to full and this looks great now for this link let's add Target blank and for the class name let's change the text color to text Dash primary and capitalize it let's save this and this looks great let's add more details for now let's just copy this and paste it for a few more times we for and 5. let's save this and looks great and let's add some glass in the UL as well set its width to full display to flex direction to column items two and justify space between set margin left to 4. let's save this and it looks great now let's add line on the left side for that we are going to use do make sure you place that div before the UL element so just write do let's make it self closing add the class name set absolute position and set left 8 from the left and 0 from the top set width to 4 pixel and height to full let's set dark background and origin from the top let's save this so here is the line now let's animate this line so for that we are going to use the use scroll hook so let's uh check the documentation for the premium motion thank you let's go to the U scroll now this will create a scrolling animation with you scroll hook so let's import it from the frame and motion Also let's uh import the motion as well now as per the documentation you scroll returns four motion values scroll X and Y scroll X progress and Y progress so X and Y Returns the absolute scroll position in pixels while the scroll X and Y progress Returns the scroll position between the Define offset as a value between 0 to 1 here we will use scroll y progress so let's uh get it out from the U scroll hook right scroll y progress Q scroll in this hook we have to set the target of the element that we want to measure these scroll y progress so inside this let's add curly braces and add Target for the Target we will use use ref let's import it from react and let's initialize this we will Target this ref element and in this case we will set this step to this tube so this hook will monitor this the scroll in this div after the target we will use uh one more uh option called offset let's check its documentation open the scroll offsets so offset is an array of at least two intersections and intersection describes a point when the Target and container meet so uh if we write start and end which means the start of the target meets the end of the container so in our case let's write offset we want the start of the target to meet the end of the container and also uh the center of the target element should be aligned with the top edge of the viewport so right start let's save this and let's use this scroll y progress inside the still Let's uh use motion dot div or this do we will use the style so just write Style and we will use the scale y because we want to increase or decrease this line on the y-axis so the value of scale y will be the scroll by progress so let's save this and as you can see on scroll this line is increasing to downwards and on the other direction as well so this is how you can use the use scroll hook and scroll y progress value now let's create the LI icon these circles right here for that let's create one component inside the components folder create one file called Li icon dot Js let's import this icon inside the details component so before this do let's import the Ally icon let's save this now for this icon we will use the figure element inside this figure let's create an SVG with width of sanctify and height of sandify as well let's set the view box to 0 0 and 100 100 now inside this SVG we will create three circles so let's create uncircle let's copy this and paste it for two more times now this circle will have attribute which is CX and c y now the c x and c y attributes Define the X and Y coordinates of the center of the circle so for the c x we will keep the sanctify for the x coordinate and for the y coordinate we will use the 50. now let's define the radius as well for this circle we will keep the radius to 20. let's copy this and paste in both of these circles let's save this and as you can see we have this circles on this on top of the details let's add some class in the figure let's keep its position to Absolute and set left to zero Also let's keep this stroke color to stroke Dash dark let's save this now for the circles let's add the class name for the first Circle uh let's change the color of the stroke the stroke Dash primary and keep the stroke width to one and we will set field to none let's save this let's copy this class name and the second and third circle as well now for this second Circle we don't need this stroke primary and not for the third circle as well let's fill the second circle with the fill light and for the third circle we will change in color to primary and let's decrease this radius for this third circle to 10 and let's save this and here are our circles let's change the width of the stroke for the second Circle to let's say 5 pixel and it looks great now let's add motion to this circle right motion dot circle make sure you import the motion from the frame or motion now again we will use the use scroll hook so let's just copy this and paste it right here make sure you import this you scroll hook now for this ref we have to get it from right here we will use a l element as the reference element so let's take layer 1 user f we'll use this L element as our Target let's attach this wrap and also pass this ref as a reference inside this Ally icon let's get the reference from here and for the Target we will set this reference now for the offset the target elements Center should match the startup or uh that's the end of the container and for the second intersection Point Let's just use Center now let's see how we can use a scroll y progress for the center circle let's use Style and inside this style use path length and use this scroll by progress let's save this now as you can see on scroll the circle is completing itself and it looks great now let's animate this third circle for that we just have to write one class called animate Dash pulse and as you can see there is an animation applied it is increasing and decreasing the opacity now this circles are a bit on the right side let's check them so Circle are on the right side of the SVG so let's rotate them beside the SVG let's add one class name negative rotate to 90 degree Also let's uh shift this line a bit on the right so inside the experience here instead of left-8 let's increase it to 9 and this looks great Also let's uh animate this content so whenever we scroll down uh it should go up let's open the details component and we will use Motion in this div so just write motion dot do now inside this div for the initial props let's pass y equal to 50 so first initially we want to move this div downwards and while in view we will move it to the original position which is y equal to 0 and let's add some transition as well let's set the duration to 0.5 seconds and let's set the type of the transition uh type of the animation to Spring let's save this and check this out now on scroll the content is moving upward and it looks great now let's do same for the education so just copy this whole code and create one component called education.js let's paste it here also change this name from experience to education let's export this component now we have to change a bit detail for the education let's remove all this and this details of the education component will accept the type time place and info so instead of this position let's set it to type let's remove this link we don't need it anymore inside this one let's keep the time as it is and set the place in place of the address and info in place of the work now for the data let's go to this pages.txt file just go down here copy this and let's use it in this details so we are going to use the type time place and info let's remove this or the type just copy and paste this one let's copy this inside the time and for the place let's select this and let's copy this inside the info Let's uh copy this part two more times and don't forget to import this education inside the about page so after the experience right education and here is the education so the about Pages completed next let's create the projects page let me close this tabs now let's create one page called the projects inside this Pages folder let's open the about not JS and copy the head element make sure you add the react fragments foreign let's import this head from the next slash head change this to projects page now inside this project Let's uh start with the main element Let's uh import the layout inside the layout we will use the animated text okay now inside this animated text let's add the text from the pages.txt file just copy this make sure this text is inside this project page let's paste it right here let's save this and it looks great let's decrease a bit padding top let's keep it 16 also add some class in the main as well let's keep the width to full margin bottom to 16. display to flex and flex direction to flex column set items to Center and justify to Center as well now it looks good now inside the layout after the animated text we will display featured project and before that let's add the grid layout so write do and for this do we will use the grid and there will be total 12 columns so right grid Dash call s 12. and let's add gap of 24 between X and Y let's save this now for this tutorial I'm going to show only few projects but if you want you can change the grid layout so for the first do let's show the featured project now this project will get the all 12 columns so in the class name add call Dash span dash 12 let's copy this now and the second row we are going to show two projects side by side so just paste it right here instead of course 1 12 let's use cool spawn-6 let's just write project dash one on this side of this project we will display project Dash 2 let's save this so the feature project will cover all 12 columns while the project 1 and project 2 will only cover the six columns so after project two let's display one more featured project and then other two projects let's name it as three and four now let's create this feature project component for that let's create featured project okay now this feature project component will have props such as type title summary image link and GitHub link and instead of do let's use the article so inside this article let's add one link make sure you import it from next slash link and for the href let's use the link crop and set Target to blank now inside this link we will add the image make sure you import this image component from the next slash image let's set the SRC of the image by using the prop and for the alt you can use the title of the project for the class name let's set the width to full and height to auto now after this image we will add one more div now this do will have one spawn element which shows the type of the project after this one let's add one more link let's just copy this and instead of image we will use the H2 for the title so after the link let's add summary inside the paragraph and let's add one more div to Showcase links so the first will be the link for the GitHub let's copy this paste it right here let's import the GitHub icon from the icons file and close the link as well instead of this link let's choose the GitHub prop after this link let's add one more link which is says visit the project this will use normal link let's save this and add this component inside this div now for all the data you can use this pages.txt file let's copy this and paste it right here we will use this as the title of the project and let's copy this add it to the summary for the link and just adding the Slash and for the type let's add the featured project let's save this and we have failed prop type [Music] I think we forgot to add one prop so we have to add image now for the image let's import the Project image from the public folder let's import project one from public slash Images slash project slash let's set this crypto screener cover and copy this project one and add in the image let's check it again we have type title summary image link and GitHub thank you again for the GitHub I'm just adding the Slash later you can add your own links right here let's save this and images too big but we have here to style this so let's go to the article and let's add some classes set width to full display to flex items in the center and justify space between Also let's make it rounded so just write rounded Dash up to 3XL let's add border as well powder powder type 2 solid and watercolor to dark let's add background VG dash light and Shadow Dash 2XL let's save this and so here is our featured project now let's style this link now this link should only occupy the half of the space so let's keep its width to width dash 1 by 2 which means 50 percent and set cursor to pointer let's set overflow to Hidden and grounded up to large so Dash LG let's save this and here is the image now let's style this div let's keep its width to half as well set width to set display to flex and flex direction to column items to the start justify space between set adding left to six now for this one let's change the text color to primary and font weight to medium and let's increase the text size to Excel let's save this and now it looks better let's style the title in this paragraph now for this H2 let's set margin top and bottom to 2 width to full and text to the left let's increase the text size up to 4XL set font weight to font hold that's it let's add the underline on over on this title let's add class name to the link on forward let's add the underline Also let's set the underlying offset to to let's check it out and it looks better now for the paragraph let's add classes set margin top and bottom to two let's set the font weight to medium and text to dark and it looks great let's add padding on this featured project let's go to the article and add padding to 12. and now looks much better Let's uh style this link or just do set the class name set margin top to two display flex and items to Center now for this link let's give the width up to 10. let's save this now it looks better now instead of this visit project Let's uh add background around this text let's add the margin left to 4 let's make it rounded as well background to dark text to light let's set adding to 2 and padding X and Y to 6 increase the text to text Dash LG and font break 2 semi bold let's save this and it looks great Let's uh increase the space between this project and the title go down and inside the animated text let's add the class name set margin bottom to let's keep it to 16. now it looks better now let's uh create a different component for for this project one two three and four [Music] same as this featured project let's create one more let's name it as a project now this project will also have title type image link and GitHub link so let's add these elements let's use the article and inside this article we will add the link Let's uh copy this from right here copy everything or from the article and paste it inside this project component now for the link it will take full width so let's use with Dash full same goes for this tube let's keep its width to full and instead of visit project just keep the visit let's save this and use this component let's copy this and paste it right here and instead of feature project we will just write the project let's save this let's remove the summary now inside this project component let's remove this paragraph tag and also uh let's add classes inside this article add width to full display to flex items to Center and justify to Center as well let's make it rounded up to 2XL and let's add the Border border type to solve it border color to dark Also let's add the background color to VG dash light and padding of six Also let's set its position to relative foreign and after that we will display all the details so let's add Flex Dash call let's style all this now inside this div instead of padding left let's remove this and add margin top to four let's save this and now it looks good let's decrease the title size from 4XL to 3XL and let's not keep background color for this visit and padding as well Also let's remove this text dash light and download LG let's switch this GitHub and visit so just cut this and paste it above the GitHub and also let's set justify to space between let's save this I think we have to add the width so let's set width to full and it looks great now for the GitHub let's decrease its width from 10 to 8 also add space here and I think that is the margin left so let's remove this let's add a line for this visit so just write on the line and that's it and this project component is completed so let's use both of these components now copy this featured project and paste it right here and same for this let's copy this project and paste right here and in both of this div and it looks great now for all this different project data you can add your own projects and images now let's add dark border for this project so we are going to use these same div which we have used right here for the profile picture so let's go to the about page and go to the profile page section which is right here and just copy this day before this profile image and inside the featured project Let's uh paste it right here after the article Let's uh set the relative inside the article write the class called relative now as you can see we have to adjust its width and height as well so for this do let's skip the top 0 right 3 and for the width Let's uh decrease it to one zero one percent and let's keep the height to one zero three and let's change its radius to 2.5 from 2 RAM and let's save this and it looks good now for this corner Let's uh add some adjustments so uh the corner is at the bottom right so we will use the class rounded Dash BR stands for the bottom right corner and we will decrease its radius from 3XL to 2XL and let's uh decrease the width of this div so right rounded Dash bottom right and let's keep it to 3XL save this and it looks great now let's add this for all these cards first let's copy this too and paste it inside the project after the article now this project card is smaller than the feature card so we have to make some adjustments so let's uh decrease the radius from 2.5 to 2 RAM let's save this and it looks great let's increase the gap between these cards so we will only increase the gap of the y y axis foreign go to right here now write Gap Dash Y dash 32 let's save this and now it looks better so our project Pages completed Let's uh create the Articles page let's create one file called The Articles inside the Pages folder now if you are new to next.js and don't know how the routing is configured so uh you just have to make any changes inside this Pages uh directory then Nexus will handle the routing part so whenever we create any new page inside this Pages folder it will create it's a separate route and uh for the for its routes name it will choose the name of this file so that is why we are keeping the name of these files as the route name that we want to set so for this article let's open the about page first and copy the head part choose the reject fragments and import the head from the next slash head let's change it to articles page after the head let's start with the main element and import the layout and let's use the animated text component now for this text let's open the pages.txt file go down right here and copy this which saves words can change the world now for the class name Let's uh add the margin bottom through 16. that's it let's save this and open the Articles page and it looks great let's uh remove this padding top let's keep the padding top to 16 only and now it looks better now after this animated text let's use the UL now inside this UL we will add featured article or you can say latest article H1 and here is the second article Let's uh add class name for the main let's set width to full margin bottom to 16 display to flex and flex direction to column set items to Center and justify them in the center as well and set overflow to Hidden now for this UL we will use grid again so write upgrade and we will only use two columns let's set Gap to 16 that's it now awesome is we did for the projects folder we will also create a featured article component so let's create one [Music] featured article now this component will accept the image of the blog or article title time it takes to read the article summary and the link of the article let's return an ally element now in this alignment we are going to place the image inside the link so same as we did for the projects so let's open projects.js file and inside this feature project let's copy this link let's remove this one by two let's set its width to full and let's import this link and image as well now after this link Let's uh add one more link for the href we will use the link prop let's set Target to new tab so just right blank and inside this link we will use the H2 element to show the title let's add class first let's capitalize this title and set text size to 2XL and font to fold margin top and bottom to two that's it now after this title let's use the paragraph tag after this link and inside this paragraph we will add the summary so let's add the class for the summary set text size to text Dash SM which stands for the small and margin bottom to 2 and now inside this spawn element we will add the time which is the reading time Let's uh change this color to text Dash primary and set font dot dash semi bold [Music] let's save this and check it out now before that we have to add this featured article in place of this L element [Music] now for all the details let's go to the pages.txt file and copy this and paste it right here so this is the title and we have the summary here is the reading time [Music] and for the link let's just add slash so we have image title time summary and Link let's import the image let's name it as Article 1 from public slash Images slash articles and select any of this image uh let me see the title is a pagination component so let's select this image let's pass this image by using the image prop and save this we have to add some classes for this Ally element so let's go right here now we have used the grid to Showcase this Li elements and so each element will occupy one column so just write call Dash span Dash one set width to full padding to 4 background to light let's set border so border border type to solid and Border color to start Also let's make it rounded up to 2XL let's save this and now it looks much better let's paste it for one more time in place of this L element let's save this I think there is some mistake let me check we have grade grid call actually it should be calls let's check it again and now it looks better now on hold Let's uh add the underline for the title right here now go to the H2 element right here and on Hover let's add the underline save it and it looks better now for this image uh let's uh add some effect like scale up or scale down let me add one more image [Music] let's select this and instead of Article 1 let me pass this second image [Music] let's make this image rounded so go to this link now here let's change the display to inline block we have rounded and overflow hidden so now this should make the image rounded and here we have now on hold Let's uh scale up or scale down this image we will use framework motion and to use framework Motion in a component we have to Define uh its own components so just write primer image and make sure you keep the capital letter of this variable and let's use emotion and inside the motion let's add the image so this will help us to use a framework motion on this image component so instead of image we will use this framer image make sure you import the motion from framework motion so now we can use the initial and animate properties let's use the while hover now inside this hover let's scale up the image to 1.05 and let's change the transition duration to up to 0.2 let's save this and it looks better now uh we have images in the project as well so let's add this effect copy this go to the projects paste it right here and import the motion and let's copy this both of these properties so inside the image and instead of this image we will use the primary image let's do the same for this project component as well let's copy this and paste it right here let's save this it looks better now here in this article let's uh add that dark border on the right and the bottom for that we can directly use the one do inside this project component let's copy this and paste it right after the Ally let's save this again we have to add the relative position and it looks great now this featured articles are completed Let's uh add all the other articles so after this UL let's add one title which says all articles and let's add last names set font weight to hold and text size to 4XL set width to full and text to Center Also let's add margin top and bottom to 16. now let's add more margin on the top and for this title as well so let's add margin top to 32 and for the featured article let's open this H2 and let's add margin top to 4 as well now it looks much better now let's create a component for this article which only contains two items one is the title and another is the reading time or let's place the date instead of reading time let's create and article component make sure you keep the capital letter now this article component will have image title date and a link now we will show this image when someone holds on the title let's use the LI element inside this Ally we will use the h2 tag to show the title and after the H2 let's use this contact to show the date also instead of this H2 let's add a link set link to the edge ref and set Target to blank which will open this in the new tab and inside this link we will add the title let's use this article so after the H2 let's use UL again and this article will take the title image date and date and Link let's go to the pages Dot txt let's copy this now for the date we can add any dates so let's add today's date which is March 22 2 0 2 3. or the link I'm just writing slash for now and for the image let's import it from the public folder let's import article 3 from public slash Images slash articles and let's select the second one let's copy this and paste it right here now let's add multiple articles so copy this and paste it for a few times let's save this and here are all the Articles so let's try this now inside the Ally let's add the class set position to relative width to full padding for and varying top and bottom two six margin top and bottom two four let's make it rounded so rounded up to excel set display to flex and items to Center and let's justify uh the space between and set background to light text to dark now for the first article we won't need any margins so we will keep the first colon margin top to zero let's add the powder order type to solid and Border color too dark let's save this okay now it looks much better now let's uh add darker border on the right and bottom for that we want to use uh div instead just use the Border so write border Dash R which stands for the right let's increase its width to four and same for the powder hash bottom Dash four let's save this and it looks great let's add the class for the title capitalize increase attack size to excel change font weight to semi bold on forward we will add the underlines let's save this and it is much better now for this date let's change its color so let's add class inside the spawn tag set text to primary color I wanted to say my bold and let's add my padding left to four let's save this and looks much better now let's see how we can display the image when someone hovers on this title and this image should also follow the pointer Let's uh create a separate component for it let's name it as a moving image here we will use the this link so this will accept title image and Link now I am using this moving image as a separate component instead of inside the article component because we are going to use uh multiple states and which can re-render this component and we don't want to re-render this article multiple times so that's why it is better to separate the this animation logic inside this individual component so inside this moving image let's copy this and return it and here we will add this component for the props let's pass the title image and the link let me format this now we will use the image after this title so let's add the image for the SRC let's pass the image and inside the alt you can add the title Also let's add the class names so let's skip width to 96 and height to auto Also let's uh make it hidden for now and we will set its position to Absolute and let's make it rounded up to LG let's save this and let's see how we can obtain the position of the cursor first let's define some value for the X let's use use motion value hook and initialize it with the zero let's do the same for the Y as well Let's uh create one user app make sure you import it from the react let's name it as image ref and inside this let's add null let's attach this ref with the image [Music] now we will create two functions so the first function will be the handle Mouse this function will give us an event object and then we will use this event object so for now let's just log the also DOT log event Dot page X which will return the uh cursor position on the x-axis this and create one more function now this function will be called when the arrow leave the title so we can hide the image again let's change its name to handle Mouse leave uh sorry this is not the arrow function it's just a force of habit let me copy this and inside the link we will add this functions so we will use the on Mouse mode attribute and let's attach this function and for the handle Mouse leave function we will use on Mouse leave let's save this and let's check it out open the console now as you can see here whenever I hover on this title we are getting the x axis coordinate of this pointer so for now it is the 375 so let's use it let's remove this log now inside the handle Mouse first uh we will set the display of the image to inline blocks because for now we have image hidden so write image ref dot current dot Style dot display to inline block and then let's set this use motion value x dot set and we will use the event Dot Page X and now for the Y we are not going to use any event but uh let's display the image a little bit uh down of the arrow so just write minus 10 now for this function we will again hide the image so set the display from inline block to none and set x value to 0 and Y value to 0 as well that's it now let's see how we can use this use motion values so we are going to use this framer image again instead of this simple image component and inside this let's use the style and pass the x value and Y value as well let's save this and check it out as you can see we have to increase the set index of the image so let's add one class Z dash 10 save this and it looks great let me add multiple images foreign let's use this article 4 and 5 image right here and it looks great let's add the opacity for this image for that we can use the while in view and set opacity to 1 and let's add transition property inside this transition add duration to 0.2 seconds and initially let's set the opacity to zero let's save this and now it looks better Let's uh add the effect on this individual article elements so that whenever we scroll down it moves from down to up now instead of this Li let's add the motion Dot Ally here uh initially let's set the y to downwards Let's uh keep it 200. and when in view we will set y to zero and for the transition let's add duration of 0.5 second and let's set ease function to is in out now we want this to animate only for once when someone Scrolls down and not the uh in the other direction so let's set the viewport and add once to two let's save this and scroll down it is coming up let's reload this and it looks great so uh the article page is completed now let's add the Dark theme now for this dark theme let's create one hook let me close all this and inside this component let's create one folder called Hooks and inside this folder let's create one hook right use theme switcher dot Js and make sure uh the name of this Hook is start from the use keyword let's save this and first let's define the one media or css media feature so just write const prefer start query so this is a media query that we are going to use to check the user preference for that you can use this CSS feature called prefer color scheme just write prefer Dash Color dash theme sorry scheme and let's set it to dark as default and we can use this media query just like this just type the name and write dot matches if this media query will match it will return true or it will return false so this preferred color schema is a CSS feature it is used to detect if a user has requested light or dark color themes and it is based on the user preference and their operating system settings and next we will need one state so let's name it as mode state and set mode Let's uh import the U State Hook from react and initially Let's uh set it to an empty string now let's uh use an use effect let's use this media query so Define one variable called media query and here we will use the window Dot match media and let's pass this prefer doc query variable this is how we will use this media query and also we are going to store the user preference in local storage as well so let's create one variable called user reference set window dot local storage dot get item and let's give it a name as theme now whenever uh we see any change in this media query so we will add an even listener and this event listener will listen for any change then it will call the handle change function so let's create this handle change function foreign now in this function first let's check if that is user preference which means that is already a variable called theme inside the local storage if it is true then we will check so let let me just uh add this variable called check and in this variable let's write a condition if user preference is equal to Triple equal to dark then we will set the Dark theme as we will set the light thing so let's check will store the value based on this condition let's set mode with the check now to use the Dark theme in Tailwind CSS we are going to add dark class inside the HTML so let's check if check equal to dark and let's add the dark class inside the HTML for that we can use document dot document element which means the HTML let's use the class list and add the class called Dark it's the same as this uh in the else condition we will remove this class let's copy this instead of add just write a remove that's it now uh on the else part will again Define this check variable and put condition that if this media query dot matches returns true which means this query is true the user preference is Dart then we will set it to dark else we will set it to light let's set more with the check again let's copy this condition and paste it right here now why we have used this if else so let's say the user is opening this portfolio for the first time then there is no variable inside the local storage so that's why this if condition will return false and that's why we will again check if there is any user preference through this media query and if there is then then we will set the state accordingly Also let's uh return this event listener so in the return let's call one Arrow function and write media query Dot remove event listener event is change and function is handle change that's it so uh using this function we will check uh if there is any user settings or configuration available through local storage and media query now after this use effect let's use one more effect now through this effect we will update the values in the local storage so we will run this effect Whenever there is any change in the mode state so when user click on the mode to change the theme we will set it to the local storage so if more equal to dark Let's uh set the local storage value so just write window dot local storage dot set item and here let's add the name and value to dark now same as we did before let's set this class name as well so just copy this and paste it right here else we will use the light theme instead of dark replace it with the light and instead of add write remove so that's it and let's return the mode and set mode that's it so let's use this hook Let's Open The Nail Bar now after this social media icons let's add one button now here we will use the Sun and the Moon icon now before that let's uh import the hook that's right const get more and set mode from the use theme switcher hook now inside the button if more is equal to dark will display the Sun icon import this one icon from dot slash icons file let's use the class name and fill it with the dark otherwise we will use the moon icon let's add the fill dash dot here now on click on this button let's attach the set mode so when our user clicks on this button we will use the set mode first we will check the mode is let's say light then we will change it to the dark as we will keep the light let's save this so here is the theme switch button now this will not uh do any changes yet because we have yet to implement the Dark theme inside this pages let's add the class name for this button foreign [Music] s to Center and justify to Center as well let's make it rounded to full and padding dash one and now let's see how we can use the Dark theme inside the Tailwind CSS let's search for the dark mode so we are using the class now as mentioned here if you want to support the toggling dark mode manually instead of relying on the operating system so uh use a class strategy instead use the or instead use the media strategy so we are using the class strategy that's why we have to implement this inside the Tailwind config so just copy this and open the Tailwind config file and after the content just paste it right here let's save this that's it now open the console and check this HTML element if I click on here it will add the class called dark and let's change it to light so there is no dark class and if I click it again it will add the dark let's check the local storage as well now as you can see there is theme if I click on this button again it will change the value to light and again to the dark now our current theme is the dark so let's try it now first let's go to the home page and in the layout open the layout.js file now to use the Dark theme inside Tailwind CSS you just have to write dark colon and let's say the current background color color is light so let's change it to PG Dash dark for the Dark theme let's save this and check it and as you can see here the background color of the layout is dark and if I click this again it is light let's try it okay again now let's apply this dark uh in all the pages first let's open the app and here for the dark mode we will change the background to dark let's save this let's open the logo and inside this logo for the Dark theme we will change the watercolor to light and there is no border initially so let's add the border border that's solid and for the color let's add the transparent color and on the dark mode we will change the color to light and that is this white border now let's open the Nail Bar so inside the Nail Bar let's change the text color so whenever there is Dark theme let's change text to light save this and it looks great now that is this line is still in the black so let's change it as well so if the theme is dark change background color to light now let's change the background color for this button so inside the Nail Bar find the button let's cut this and use the packtix now run there is a light mode then we will apply the background to Dart and text to light otherwise we will apply the background to light and text to dark this should be the question mark let's save this and this looks much better let's change the this text colors go to the index file now inside this main let's change the text to light for the Dark theme let's change this animated text as well open the animated text and here let's change the color to light for the Dark theme I think we have to add this inside the H1 tag so right here let's change the color for this and contact as well go to the index okay contact so let's change text color to light and for the resume for the Dark theme let's change its background to light and text to dark let's save this and it looks great now on Hover it is not changing the background color for the Dark theme so we have to set it individually so unhower when the theme is dark then we will change the background color to dark and on over in the dark theme change the text to light again let's save this also on whole let's change the Border color as well and hover in the dark theme so let's change the border to light and it looks great now for this hire me let's change the color of the SVG so open Army component now for this circular text the current color is the fill Dash dark and for the Dark theme let's change it to fill dash light let's save this and it looks great now let's change this background color as well now here we have to apply the same classes that we have applied for the resume so let's copy it on the right here let's save this now this looks great let's change the color for the footer let's open the footer and for the Dark theme let's set text to light as let's change the Border color as well now instead of this dark pink we will use the secondary color so right here or the Dark theme change text to secondary instead of primary let me check the color name again so we have primary dark not the secondary so right here change it to primary dark and it looks better that's it for the home page let's open the about page next open it and inside the main let's change the text to light for the Dark theme and there is some text left so let's go to here and for the Dark theme we will change the text color to text dash light slash 75 let's copy this and paste for both of this text let's save this uh let's check the use theme switcher hook again I think now on the first load we have to check this condition so let's call the handle change function so that it will change the uh so that it will check the all the conditions on the first load as well and whenever any changes happen in the media query let's save this so the current theme is the dark and when we reload into the dark but uh notice when I reload this the first it will load the light theme and then it will uh changes change this theme to the dark based on the local storage value so why this happens now this is an effect called flash of unstyled content for UC which is an instance where uh webpage appears uh briefly for a few seconds with the browser's default settings and then when when it checks check the all the conditions such as local storage then it will change the theme back to the user preferred state so uh how we can avoid this from happening so let's go to the tailwind and inside the dark mode check out this support system preference and manual selection so there is this script as stated here on page load or when change changing the themes it is best to add this script inside the head element so let's copy this and and open the underscore document.js file now this document is almost the same as the app.js file but it is a custom document and it can update the HTML and body text that is used to render a page so let's use it inside the body let's use the script tag provided by the next.js so make sure you import it from the next slash script and inside the script use the curly braces and backtracks and paste the script right here now as mentioned here next script requires an ID so let's add an ID just write theme Dash Switcher that's it now uh the script tag has different features so let's check its documentation let's open this now let's go right here so uh as mentioned here there is one prompt called strategy strategy for the script now in strategy there is three values so first is before interactive which means it loads the script before any next.js code or before any page hydration occurs and after interactive which is the default option that loads the script early but after some hydration on the page occurs so let's use the before enter Interactive let's write strategy and let's paste the before Interactive let's save this and check this again so this is better the there is still flash but you won't be able to uh see it in in the production build let's add the background color here let's close this and right here so we have BG Dash dark and this is the absolute div actually that it should be light and let's change the background of this image so instead of this do let's change the background here to dark let's change the Border color as well so for the Dark theme change border to light and it looks great now that is biography let's change its color to right here for the Dark theme we will use the text dash light slash sanctify and looks great now for the skills let's change the color of repeating gradient open the tailwind.config.js file copy this we will create a new variable which called as circular dark now instead of this light shade we will use the darker one so copy this and paste it right here and here let's copy this variable save this and go to the about foreign and just after this for the Dark theme we'll use the background to circular dark let's save it and we have to change this black as well for now it is zero zero zero let's make it white so let's try two double five two double five and double triple Phi again let's save this and it looks better let's increase the opacity of the white color so from point four to increase 2.5 and it looks great let's change these skills right here let's change the text to dark and inside the dark theme let's change background to light let's save this and looks great let's change the color of this web copy this and paste it right here now let's see why uh this effect is slow for the skills but not for the web okay uh it is happening because the transition duration is 1.5 we only need this transition for the while in view so let's add it inside this transition and duration let's remove it from here save this and now it's working let's go for the down let's change the color of this line open the experience and find this motion div let's change the background color from BG Dash dark to BG dash light thank you also we have to change the color of this SVG as well let's open the LI icon now for the stroke for the Dark theme let's change the stroke color to stroke Dash primary dark also right here for the Dark theme let's change the stroke from dark to stroke dash light let's save this here we have to change from field primary to fill primary dark let's change the color of this internal Circle So currently it is fill light foreign let's change it to fill dark and now it looks much better let's change this color as well open the experience and go to this details component let's change this color for this one for the Dark theme we will use text dash light 75 and instead of this text primary we will use text Dash primary dark and it looks nice let's do the same for the education open the education find the motion do and let's change the 3G light and inside the details let's change this text from dark to light and add the opacity and it looks much better now let's uh change the width of this repeating gradient go to the Tailwind config and for the second color [Music] let's change from 5 to 8 pixel let's save this and now it looks much better let's change the color for the projects let's open the projects.js file let's change the background from VG light to BG dark for the Dark theme foreign for the featured project let's change the Border color as well for the Dark theme we will change the Border color from light sorry from dark to light let's change this text as well let's change the background color from dark to light let's scroll down now for this type let's change it from text Dash primary to text Dash primary dark now for this summary change the text color to text dash light let's save this let's change the color of this title [Music] inside the H2 or the Dark theme let's keep the text to light [Music] now instead of adding text color for each individual element let's just go to the main element and for the Dark theme set text to light and it looks much better now let's add the color for this visit project which is in the featured project component so for this let's change the background to light and text through dark and this looks much better Let's uh change the color for this go to the project now here we have already set the background to dark now for the Dark theme let's change the Border color to light and also after in this day let's change the PG to light as well save this I think we have to make more changes inside the use sim hook now for this use effect whenever the mode is dark it is uh setting the theme with the dark and adding the dark class else it is removing the dark so we have empty string so which is not the dark so we have to add a separate if condition so instead of s let's write F mode is equal to light then we will remove the dark and set the theme with the light let's see if this change work and it is working let's change this color inside the project component find the text Dash primary and for the Dark theme let's change it change it to primary dark and this looks great now let's do the same for the articles open the articles.js file and inside this article in the main let's change all the text from dark to light and inside this article component let's change this border dark to border light and change this text primary to primary dark let's save this let's change the background color so for now the background is light let's change it to background dark let's also do the same for this featured dark background for the Dark theme and let's change the watercolor as well from border dark to border light and this looks better we have to change the color of this text go to the article and for the Dark theme let's change the text to light and much better let's change the color of this read which is in the featured article or the dark change it to dark text Dash primary dark it looks great that's it server portfolio is completed now for this icon let's add the background so it looks better open the Nail Bar and find the Pinterest icon right here say the class let's add the background to light and make it circles around it too full and it looks much better oh let's uh optimize uh our image component so let's uh go to this documentation and write the image click on this next slash image now there are some attributes that we can use to optimize the loading speed of our portfolio now in the home we have this image so let's see how we can optimize this let's close this and open the index.js file now here in the image we will use the priority attribute let's see what this attribute does so uh when the priority is true the image will be considered high priority and it will preload so a lazy loading is automatically disabled for this image uh it will preload which means uh it will it will have more priority over the other content so whenever we load this portfolio it will preload this image and that's why uh we will get a good score in the Google lighthouse so now along with the priority there is another attribute that we can use for the sizes now here is the attribute so the size is uh as mentioned here it is a string that provides information about how wide the image will be for different breakpoints so let's see the example now here is the sizes attribute now for the maximum width of 768 pixel Total Image width is 100 viewport width so for it covers the full screen now for the 1200 pixel uh the image size will decrease to the half and otherwise it will be for the one third of this screen let's copy this now in our case our image covers the half of the screen for full screen devices so let's configure this after the priority let's add the sizes now for the max width we'll keep it to the 100 viewport width and for the 1200 let's keep it to 50 and otherwise let's keep it to 50 as well let's save this now uh you won't see any difference right now but uh when when you build this portfolio and load it then you can see see the difference now we can check in the console go to the elements and open this head now here is the image component now because of the priority attribute it has this preload right here so this image is pre-loaded before all the other content let's use this attribute or the about page as well let's copy this open the about inside this image that's paste the priority and the sizes attribute now for the 768 pixel let's keep it 200 1200 for the 100 pixel let's skip it to 50. and otherwise we will keep it to the 33 viewport width because it will occupy the one third of the screen let's do the same for the projects open the featured project and inside this primer image let's add the attributes now for this sizes let's keep the 50 viewport width let's save this let's open the Articles we have two images on the featured articles so let's add these attributes in the Articles as well now inside this featured article component let's add both of these attributes now let's save this you can change these sizes as per your requirements that's it now if you want to know more about the benefits of using this image component from the nexgis you can read this documentation there are lots of benefits uh now when you post your website to aversal then you will get more benefit for the image component because virtual automatically handles handles the image generation now for the other hosting provider you have to add some package like sharp to optimize this images now let's see how we can make this website responsive Let's uh check the original website and let's decrease the width so after the 1280 pixels uh the size of the animated text is decreased so at 10 24 pixel we are not displaying that image and only this text let's decrease it more and after the 768 pixel will display the image and text both and also this hire me button is on the upper right corner and we have this hamburger menu [Music] let's create it now in the Tailwind CSS open the responsive design Now by default Tailwind uses the minimum width but for this portfolio we'll use the maximum width so for that we can Define our own breakpoints if you scroll down so this is how you can add your own custom breakpoints let's add our own breakpoints open the tailwind.config file and out of this extend keyword let's write the screens and here let's uh Define the maximum breakpoint let's name it as 2XL and it will have the max width up to 15 35 pixels so this will make the query such as media of Maximum width of 15 35 pixel and let me show you how we can use this so you just have to copy this and inside the class as we did for the Dark theme just write the 2XL and colon and whenever you write any class name here it will apply to that media query save this now uh if you open the Styles dot txt file I have already added this screens so just copy this and paste it right here let's save this so the minimum screen uh is going to be 479 pixel and the maximum is the 15 35 pixel so let's use it I have used simple names such as 2XL XL LG MD S7 and access which stands for the extra small let's close this close everything and open the Nail Bar so first we will make the never responsive now first let's create the hamburger button so after the header let's create button now inside this button we'll add three span elements let's copy this and paste it right here let's add some classes set display to flex Flex direction to column just if I have a thing to Center and items to Center as well now for this one we'll add some classes so select all the spawn tag and for that now to select multiple uh same elements just select this and press Ctrl D and again press Ctrl D this will select all the spawn elements let's add the classes now uh let's start with the background to dark and for the Dark theme we will use the background of light display to block and height of the spine element will be the 0.5 and width let's skip it to 6. let's make it rounded so right rounded Dash SM let's save this now as you can see here are our span elements now let's uh add some space between these elements so for the first span element Let's uh add negative Translate y 2.5 and same for the last small element let's save this as you can see there is some space for last don't use the negative and now it looks better Also let's add some margin in the center span element margin of 0.5 and now it looks great so this is our hamburger menu let's add more State to open and close that menu so let's use the use state name it as is open yeah right set is open initially it will be false let's create one function to handle the click event so right handle click now this will set the is open state to false or true so write exclamation mark and write the current state let's attach this handle click with this button now let's use this state value so uh whenever the menu is open we will make this hamburger menu into a cross so for this Center span let's select this and use the curly braces and back text and paste them right here now uh here we will use one condition when uh when the is open state is true then uh we will add the opacity opacity to zero so we will hide the center uh spawn element else we can set the opacity to 1 so for Tailwind we have to write 100 let's do the same for both of these spawn elements select this use curly braces and backtracks and let's use the condition now whenever this is open state is true uh we will use the rotate value so just write rotate Dash 45 degree and Translate y to one otherwise we will translate y to negative 0.5 value let's do the same for this spawn as well let's copy this condition and paste it right here remove this and paste this condition now instead of negative this will be the positive but for rotate we will change it to a negative value and for the translate as well let's save this and check it out we have to import the U state from Viet let's save this and on click we are getting the cross value let's make it more smaller by adding the transition now let's select this press Ctrl D to select all three and let's add the transition Dash all duration of 300 milliseconds and is out let's save this and check it again and it looks great now we will show this button only when the width maximum width is the 1024 pixel so the LG let's hide this button for now this button will be hidden and when the maximum width is the large screen then we will use the display to flex so remove this flex and save this let's decrease this on the maximum to 10 24 foreign and now you can see this button now let's make this navigation menu responsive now we're going to create uh different menu for the mobile so for this we will hide this desktop menu so let's select both of this navigation bar and add them inside a div now for this deal let's add some class set width to full display to flex justify space between and items to Center and for the large screen we will hide this navigation bar let's save this and let's check it out as you can see when the screen is the large which means 10 24 pixel then it will hide the navigation bar and show the hamburger button now let's uh create the mobile menu let's copy this div and paste it right here we'll make changes to this div Let's uh set the minimum width to 70 VW and flex direction to Flex Dash column and let's make it fixed so just write now remove this LG for now we will use position fixed 50 from the top so top dash 1 by 2 and do the same for the left negative translate X to 50 so 1 by 2 now this means it will use the translate X property and its value will be the minus 50 percent let's do same for the by so because of this class it will show the menu in the center of the screen let's save this and also let's add relative to this header and check this out there is no menu let me check the elements inside the header and here is the do let's increase the set index to 30 and that is our menu so we have to add the Z index as well so let's just write that index to 30. and let's save this now let's add the background color so set background start up to 90 opacity and for the Dark theme we will use the background light and set opacity to 90. now let's keep it to 75 let's make it rounded up to large and let's use the backdrop blur filter set like backdrop blur Dash MD and set set padding top and bottom to 32. let's save this and it looks great Let's uh add the classes inside this navigation bar let's set display to flex items to Center Flex direction to column and justify to Center let's save this and it looks much better now instead of this custom link let's create this same component for the mobile oh so let's just copy this and create one more component called custom mobile link and it will it will have this same elements now we have created this separate component instead of this because we are not going to use this link component let me show you why if we use this link component then let's say if I click on the projects it will open the project page but it will not close this menu so instead we will use the this router to change the page so instead of Link component let's set it to button and let's uh create one function called const handle click and this function will use router Dot push function to push the new address to the URL so inside this push let's add the href and let's connect this function to this button now on click let's connect this function and let's save this Also let's use this custom mobile link inside this make sure you are in the mobile name and not in the desktop one let's replace these links with the custom mobile link let's save this and uh let's see how we can close this menu before we change the page so for that we have to uh use this handle click function because this function is changing the state of the menu so let's copy this and let's pass it as a toggle prop [Music] ose the underclick function and let's deconstruct the double prop now before we change the page let's close the menu and this toggle function will change the state of the menu now before we do that we have to add the condition for this menu make sure you use this div and not the desktop one so just close this let's cut this to and for the condition if is open state is true then we will show the menu as we will return null so paste the div right here and let's save this now let's check it out decrease this so that we can see this button let's click on this and we have our menu now let's click on this about page and menu is closed and we are on the about page now let's uh add more styling to this menu go to the custom mobile link now for the normal light theme we will use the text dash light and for the Dark theme we will use text Dash dark let's say this and as you can see let's remove this margin so if you go down and in this custom mobile link we have already added these classes so let's remove it let's save this now it looks much better Let's uh add the margin top and bottom thank you so go to the custom mobile link and right here let's add margin to open bottom two two save this and now it looks much better let's change the color of this one Let's uh change the background to for the light theme we will use the right background but for the Dark theme we will use the dark let's save this let's change the theme and looks much better now for this GitHub icon we can add the background so go to the GitHub and same as we did for this Pinterest let's copy this and paste it in the link of the GitHub and as you can see it looks better not for the light not dark theme so for the dark let's change its color or the dark let's change background to light and body Dark theme let's change its background to dark and it looks great let's add a styling for this nav bar now which contains the social icons so first we have the flex as a display item Center justify Center and flex to wrap Let's uh add the margin top up to two let's save this and it looks better let's decrease this width Let's uh decrease the space between these icons for a smaller screen sizes so in after this mr-3 for the Twitter icon now for the smaller screen we will use margin left and right up to let's say one which means 4 pixel let's do the same for all these icons let's save this and this looks great now let's close this menu now let's uh animate this menu so for that we'll use the frame motion so for this do let's make it motion dot do and for the initial property Let's uh set the scale to zero and let's set the animate to scale 1 let's use the opacity as well opacity to 1 and for the initial will keep the opacities opacity to zero as well let's check this out so the menus uh so the position of this menu is not right because we have already used transform tools address menu in the center so inside this initial prop let's keep it that way set the X2 minus 50 make sure you use the edible quotes and for the Y minus 50 as well save this as you can see uh when the manual is coming to the screen uh it is scaling from zero to one and it looks great you can change the the duration if you want using transition property now that's it for the navigation bar that's uh let's make this home page responsive let's close this open the index.js file now we are using layout and all the pages so first let's make it responsive now for the Excel which means the 1279 pixel so uh when the screen maximum width of screen is 279 pixel then we will decrease the padding to 24 and for the large screen we will decrease it to 16. let's decrease it for the medium screen so write empty and set padding to 12 and for smaller screen we will decrease the padding to 8. let's save this and let's check it out so the padding is decreasing on the sides now let's uh make the animated text responsive now we have used this padding so for this smaller screen let's remove this by writing py-0 now we have used this animated text on multiple pages so instead of making changes here let's use this class name prop so go to the index file and inside this class let's decrease its size right here now for the Excel Let's uh decrease the text size to 5xl and remember to add the important tag because we have already defined this inside the animated text so use the exclamation mark before this class name now I've got the large screen let's make the text from left to Center now again for the large screen we will include increase the text size because we are going to display only text and not the image for the large to up to medium screen so let's set text size to 6xl again and for the medium screen we will decrease the attack size to 5xl and for the smaller screen let's decrease data exercise to 3 XL let's save this and check this out so the text size is decreased for the Excel and text is in the center and it's working now let's uh do the same for this extra padding inside the layout we have set padding top to zero now for the medium screen we'll set padding to 16 and for the smaller screen we will set padding top to a here it is padding top let's save this now let's hide this image for the large screen so inside the class name for the large screen let's write hidden now we will show this image for the medium screens so for the medium screen right inline block for the display and for the medium screen we will show the full width image so write width to full same goes for this text for the large screen let's make it width to full let's save this and check it out now the screen is large but width is not working for this text let's see why now we have used Flex to store this image and text so for the large screen let's change the flex direction to column let's save this and it looks great now let's uh Center all the text and for that go to this do and use for the large screen use text Dash Center let's Center these links foreign let's choose the self Center class save it and looks great now let's decrease this bit and for the medium screen will display this image again somehow the image width is not the full let's check this out and here we have width to 50 let's change it for the medium screen to width to full now it looks better let's hide this light bulb or the medium screen go to down here and for the medium screen we will hide this light bulb and it looks great now let's uh make hire me responsive and change its position from here to the top right corner open the hire me let's change the position for the medium screen to write Dash 8 and we are also using the left so we have to use the auto so for the medium screen left will be the auto and in the medium screen instead of using bottom we are using the top so right top to let's keep it to zero and for the medium screen bottom to auto let's save this and decrease the width and it looks great now let's decrease this size now here the width is 48 so or the medium screen let's set width to 24 now inside the link for this link for the medium screen devices let's decrease its width and height to 12. Also let's decrease the text size up to 10 pixel let's save this and it looks better now this is fixed so instead of that let's make it absolute so for medium size screen let's make it absolute now it looks great now let's add the Z index in the header so this logo don't get any cut open the Nail Bar and in the header let's use this Z index 10. and also let's decrease the padding left and right so for the large screen we will keep the padding left and right to 16 for this small screen we will keep it to 12. and for the smaller screen let's keep it to 8. save this and this looks much better let's decrease the size of this text and this links let's close everything else and open the index.js file so here is the paragraph tag now for the medium screen let's let's set the text size to small and for the smaller screen let's set text size to extra small thank you now this is for the medium screen size and for the smaller screen size let's reduce the size of this resume and contact links now for the resume or the medium screen let's decrease the padding to padding Dash 2 and for the medium screen set padding left and right to 4 and set text size to text Dash base now for this contact link for the medium size screen set text size text Dash base let's save this and it looks better Let's uh make this footer responsive open the footer now for the smaller screen let's make uh let's decrease the text size to text Dash base and here for the large screen we will change the flex direction to flex Dash column Let's uh decrease the pairing top and bottom as well so for now it is 8 let's skip the six save this and it looks good Let's uh increase the padding between this first and the last so what this middle do for the large screen let's add padding top and bottom to two and now this looks good so home page is responsive now let's talk about the about page first let's decrease the size of this animated text so open the power.js file let me format this and inside this animated text let's uh decrease the text size for the large screen we will decrease it to 7xl make sure you add the exclamation mark right here and for the smaller screen let's decrease it to 6xl for the extra small screen let's decrease this to for excel let's save this and the text size is decreasing now for the mobile device let's decrease this margin so inside this animated text or the smaller screen decrease margin bottom from 16 to 8. now we have 12 column layout right here so for the Excel Let's uh decrease this to three column so for that we will give this biography four columns and this image up to four column as well so this number will go down and we will give it a whole 12 column and make it horizontal so let's do it let's decrease this gap for the smaller screen to 8 and instead of all spawn-3 for the biography for the extra large screen let's add one more column so add call spawn Dash 4 let's do the same for the image as well for the Excel calls one two four now this number takes two columns so for the maximum width of extra large screen we will use the cold Dash spawn Dash let's say eight column and change the flex direction from Flex column to flex Dash row and now this looks much better let's use the items Center so for the Excel use items Center let's decrease the size now we are at the medium screen now for medium screen let's show this image on the first then the biography then this numbers so for that we have to change the order so current order is first we are displaying this biography second is the image and third is this numbers so for the medium screen let's change this so for the image right here for the medium screen let's change the order to 1. let's copy this and for this text which is biography for Let's uh set its order to and for the numbers let's set the order to three let's save this and also uh this image currently takes the four columns so for medium screen let's increase it to eight columns let's save this and this looks much better let's increase the width or correspond for this let's copy this and for the biography let's close one to eight as well and it looks much better let's decrease the size of this number and this text now for this numbers now currently items are at the end so instead of that for the extra large screen let's set items to Center and for the spawn for medium screen let's decrease the text size to 6 XL and for the smaller screen text size to 5xl and for the extra small screen let's keep the text size to 4XL if you want to see the CSS you just have to hover on this class and this will show this CSS let's apply all these classes for these Pi elements now for this H2 text Let's uh keep the text to Center for the extra large screen and for the medium screen set text size to LG and for the small set text size to text Dash base again for the extra small screen set text size to text Dash SM let's copy all these classes and paste it for the projects completed and years of experience foreign Let's uh keep both of this text on on the center Let's uh copy this and paste it right here and clear now this looks much better now let's uh make these skills responsive close this open the skills component first let's decrease the size of this title for the medium screen decrease the the text size from 8xl to 6xl and also add margin top to 32 from 64. let's save this Let's uh decrease these skills so go to top and inside the class name Let's uh start with the large screen for large screen let's decrease the padding top and bottom from 3 to 2 and padding left and right to 4 now for the medium screen let's decrease the text size to text Dash SM and for the medium screen decrease the pairing top and bottom to 1.5 and padding left and right two three let's save this and Let's test this so the skills are decreased now for smaller screens we have to remove this background because it will not look that great on the mobile screen so let's uh do that quadri or the extra small screen let's make the background transparent and for the excess small screen and for the Dark theme let's make the background transparent as well we have to do this for both light and dark dark theme Also let's change the color of the text to dark for the light theme now for the Dark theme text color will be light and let's make it bold for the extra small screen let's save this let's decrease this and it looks much better now for this web all right here or the large let's decrease the padding to 6 for the medium padding two four and for the extra small screens set text to excess and Pad into let's save this uh it looks great now let's do something about this uh repeating gradient because it is not looking good for the smaller screens let's decrease its height for different screens so for now we have height to 100 viewport height so instead of that let's decrease this for the large screen set height to ATV H and for this smaller screen set height to 60 pH and for the extra small screen set height to 50 BH or one and half let's save this and check it out again and it looks better let's increase these rings from the center and for that we have to decrease the size let's go to the Tailwind config and inside this extent we have already defined this two just copy this and let's create one more variable and this variable is for the large screen and let's decrease its size from 100 to 80 pixels and let's keep everything as it is let's create another one for the darks screen and change this from 100 to 80. and let's change the name to LG and let's use this so here is our circular light background now for the large screen Let's uh change this to Circular light LG and for the Dark theme we have to use BG Dash circular dot LG let's check it out now you can see we have more rings after we after we cause the 10 24 pixel so we have to create this multiple variables of this repeating radar gradient I have already created one so you can copy them from the styles.txt file so here are all the repeating gradients for the large screen medium screen and smaller screens so just copy all this and inside this config paste it right here so and let's use them so copy both of this and paste it for two more times instead of LG let's write MD and here as well that's right SM let's save this and let's check it now after LG you can see more uh circles and we are now in the medium screens let's decrease it for the smaller screens and it looks great you can also decrease the width of these rings by just changing this uh medium value So currently we are in the small screen Let's uh change this from 8 to 4 and let's save this as you can see it is decreased let's decrease this to six and let's keep it to 8 pixel for the large screen and let's save this so this skill section is uh responsive Let's uh make the experience section mobile responsive open the experience.js file first let's decrease the size of this H2 element for the medium screen let's change the text size to 6xl for extra small let's change it to 4XL and let's set margin bottom to 16 for the medium size queens now let's go to the details component and here we have width of 60 percent now for the medium screen let's increase it to 80 percent Let's uh decrease the size of the position or smaller screen let's keep it to the text Dash Excel and for the extra small screen let's set it to large let's decrease the size of time and address for extra small screen from text base to text small and for the work as well for the medium size screen decrease the text size to small let's check them and it looks better but let's uh increase the width of this div so after this H2 we have width of 75 percent for the large screen let's increase it to 90 percent and for the medium screen let's increase it to full width now this looks much better now for this on order list for the extra small screen set margin left to 2 from 4 and for this line on the left which is a motion div Let's uh change its position so for medium screen Let's uh keep its width from two pixel from 4 pixel 2 pixel and for the medium screen let's change the left position from left Dash nine to left dash 30 pixel and for the extra small screen let's set it to 20 pixel let's save this and check it out we have to set the circles according to the line let's do that open the LI icon.js file now in here let's uh decrease the width so current width of the SVG is 75 inside the class name for the medium screen Let's uh keep the width to 60 pixel because we have uh keep the left 30 pixel for this line let's do so the size of this SVG will be 60 pixel with for the medium screen let's keep the height to 60 pixel as well let's copy both of this and paste it and for the extra small screen we will keep it to 40 pixels let's save this and it looks great now let's do the same for this education as well open the education.js file now from the experience for this title let's copy this classes and paste it for the education let's do the same for this width as well copy this for the motion do now for the UL element let's copy this class and paste it right here now let's change the classes in the details so for the details let's increase this width and change the text size of this H3 element copy this both of this class and paste it right here now let's copy this and paste it for the time and place and for the info we will decrease it its size for the medium screens let's save this and it looks great so our about Pages responsive and completed now let's make this projects page responsive so let's open the projects.js file now let's uh go to the animated text and let's decrease its size for the large screen set text size to 7xl or the small set margin bottom to 8 and for the smaller screen set attack size to 6xl and for the extra small screen set text size to 4XL and make sure to add this exclamation mark before this class save this now in the featured project for the large screen we will change the flex direction from row to column so right Flex Dash call and for the large screen decrease the padding to 8 for this smaller screen let's decrease its radius to rounded 2XL and same uh for the lower right corner so right now it is rounded PR Dash 2XL let's increase it to 3XL and for the extra small screen let's decrease the padding to 4. let's save this and check it out so this is the featured project now as you can see it is not working because we have the Gradle layout and we have to decrease the grid Gap let's go down right here so for the extra large screen Set uh grid cap X to 16 and for the large screen the case grid Gap X to 8 and for the medium screen let's set Gap Dash 5 to 24 and for the smaller screen set cap Dash X20 let's save this and now it is decreasing the width and for this large screen uh it has changed the flex Direction so let's uh go to the featured project again right now uh the image size is half of the width so for the large screen let's keep the width to full let's do the same for this text content as well also for the large screen Let's uh set adding left to zero and instead let's set fighting top to six now for the type let's decrease the size for the extra small screen to text Dash base now let's find the title here we will decrease the text size to small for the smaller screen and for this visit project for this model screen let's decrease the padding left and right to 4 and text size to text Dash base let's save this foreign great let's decrease this div so here is the div element now for the extra small screen Let's uh set it to write negative right dash 2 from 3 and let's decrease the height from one zero three percent to one zero two percent and for the extra small screen let's keep the width to 100 instead of 101 percent or you can write width Dash full now for the extra small screen we will decrease the radius as well so let's decrease it to right now it is 2.5 Ram Let's uh decrease it to 1.5 Ram save this and this looks much better let's decrease this height for smaller screen instead of extra small screen so let's try SM now this looks better than the extra small screen and let's uh do do the same for this project as well Let's uh decrease the text size for this summary so for the small screen let's set text Dash SM and save this let's go down to the project now for the extra small screen we will decrease the pairing only and for this do for the medium screen Let's uh change the position so negative right from two to sorry from three to two uh and for the medium screen set width to one zero one percent and for the smaller screen set height to 102 percent and for the extra small screen set radius to 1.5 Ram let's decrease the size text size of the type so for the large screen set text LG and for the medium screen set text Dash base now for the title let's decrease for the large screen set text to 2XL and for this visit set text Dash base for the medium screen and let's decrease the width of this GitHub icon right now it is w-8 for the medium screen set with 2 6 let's save this and it looks great now for this projects we are using the course 1-6 now instead of this for the smaller screen let's use the all 12 columns let's do the same for this and here and here is let's save this now for the smaller screen it should cover the 12 columns let's check the mobile version yeah and this looks great now let's make this article page responsive let's copy all the classes from the animated text from the large and open the articles.js file and let's go to the animated text and paste all the classes that's it now for the another list where we are displaying the two featured articles let's select these articles so for the medium screens let's set grid Dash post-1 and for the large screen let's decrease the Gap to 8 from 16 and for the medium screen let's set Gap Dash y to 16. let's save this and go to the featured article let's decrease the size of the title element so for the extra small screen decrease the text to LG let's save this now it looks great now if you don't want to display this summary inside this featured articles then you can just remove it for the mobile devices but uh for this tutor I am keeping them right here Let's uh let's style this so go to the article now uh here the flex direction is zero but for the smaller devices let's change its direction to column so we have to change the date position as well so for the smaller screen Let's uh use self Dash start let's save this let's decrease it up to 640 pixels and as you can see date is after the title Let's uh remove this pairing left or the smaller screen for the extra small screen let's decrease its size to text Dash SM foreign you won't be able to see that image so you can just hide those image or else you can keep it as it is but I suggest you to hide these emails for let's say for medium screens so let's uh go to right here and for this classes or the medium screen let's use the important keyword and keep it hidden so you can see there is no image also you can use the match media query to just remove this whole image that's it I think the article page is completed so let's uh see this whole website in a mobile so if I click on this it will lead us to the home page now for the smaller screen Let's uh change this hire me position open the hire me.js file and for smaller screen let's keep the right to zero and now it looks much better let's open the menu click on the about and this looks great let's check out this articles and change this theme that's it now let's see how we can create a the transition effect like this one let's close all this and inside the components folder let's create one file called transition action effect dot Js save this let's import this inside the index.js file let's import it after the head so right trans ition effect let's save this now uh here we will create a three div Elements which will move from left to right so let's uh import the motion from framer motion and let's use the react fragments let's create one do and make it self closing let's add some class name so first let's keep it its position to fix top two zero bottom two zero and from the right let's uh keep right to 100 so they do hold you will be on the left of the screen so for 100 you can add Dash full and its width should be the 100 viewport width so w Dash screen and same for the height let's add the Z index to 30 and background to VG Dash primary now let's add the motion now initially this uh div should be on the left so that's why x value is 100 percent and width is also 100 percent but on animate the X should be zero percent and with should be zero percent as well now let's add the transition keep the duration to 0.8 seconds and is function to is in out let's save this now as you can see here hold you is coming from right to left and sorry not from left to right so let's uh create the same one let's add another one now uh for this do we will use the light color for the background and for the last we will use the dark now the difference is uh in this second do the Z index will be 20. and there is some DeLay So let's add delay of 0.2 seconds and for the third div let's set delay of 0.4 seconds and also decrease the set index from 30 to 10 let's save this and reload the page as you can see here it looks great now let's add this transition effect in all the pages so we have added it in the about page so when we go to the about we can see this transition effect let's again go to the home page so here we have used initial and animate properties but there is also one more property called the exit so let me show you this inside the transition effect after the animate let's try it exit so whenever the page is exiting or leaving then this property will get in effect so for the exit we will go from zero percent to 100 percent and same goes for the width just copy this and edit add it inside the width let's save this we don't uh need to implement this exit inside this second and third div so let's check it out and exit is not working because uh we have to use animate presence from the frame and motion so let's uh see what it is so the animate presence allows the components to animate out when they are removed from the reactory and it is required to enable the exit animations so uh let's uh use this animate presence now we are using transition effect in all the pages so let's open the app.js file and let's wrap this component with the animate presence now to identify each page uniquely we have to pass the key prop and for that we can use the router let's import the use router hook and as a key we will use the as path attribute so this will uh create a unique key for each URL right key equal to router dot as path now as path will return the uh anything after the slash value so for about page it will return the slash about and for the Articles it will return the slash articles let's save this and check it again now as you can see when a home is leaving there is an exit animation but it is so fast so let's uh add one property for the animate presence if you scroll down add the props you can see there is a one prop called mode so there are different modes sync and weight we will use the weight because uh as it as uh stated here the entering child will wait until the exiting child has animated out so let's uh use this inside the enemy animate presence use mode equal to weight let's save this and check it out now observe when I click on the about page first the exit animation Run for the home page and then the entry animation Run for the about page so this is the exit and this is the entry so this is how we can create a different transition effect for this pages now let's add this transition effect in all other pages so we have already added in the about and the index page so let's go to the Articles page and after the add section let's add it transition effect and open the projects page after the head let's add transition effect that's it let's open the articles let's go to the projects and this looks great now my whole purpose of creating this tutorial in next.js is to show you different animation in a and static site and also some tricks that you can use to implement amazing Effects by using the framework motion now there is one more thing that you can do to increase the traffic on your portfolio just go to any page and inside this add element you can write some good meta descriptions by including the relevant keyword and do this for each of these pages and add the relevant title for each page and this will eventually increase the reach of your portfolio website now in this code for this tutorial purpose I have created many different components inside the same page file but you can separate them easily also please check out my new website called davedreaming.com on this website I write blogs and add videos and share different resources so you can check out the resources right from right here and here are a few different resources that you would like you can also give vote to your favorite resources just click on the resource and you can see the current votes are 16 just give vote from this Stars click on the continue and this will store your vote and it will update the total words now add this Resource page you will have this tool of the day which has received most of the votes and in future I will add more tools that are useful for the Developers now if you want to learn more about the Nexus then let me know in the comments that's uh it for this tutorial please do like the video and if you are new to my channel then subscribe thanks for watching

Channel: CodeBucks

Views: 501,706

Keywords: nextjs portfolio website, portfolio using nextjs, portfolio using tailwind css, responsive portfolio website, build portfolio using next js, nextjs portfolio, tailwind css portfolio, multipage portfolio, nextjs tutorial, nextjs project, next js tutorial, next js tutorial for beginners, next js projects, next js website, nextjs, tailwind css, framer-motion, next.js, next js, portfolio, nextjs website example, nextjs 13 tutorial, web development tutorial, modern portfolio website

Id: Yw7yWHigGKI

Length: 350min 44sec (21044 seconds)

Published: Mon Mar 27 2023