A+ Modern Developer Portfolio using React | Next js | TypeScript | Tailwind | Beginners Project

do [Music] [Music] [Music] hey guys welcome back i'm smith from back bench code so this is a new project where i am going to make this cool developer portfolio using nexus and typescript for the ui we are going to use taylor in css and for the animation we are going to use react trimmer motion and here is a disclaimer guys i have already made this project using react and bootstrap in fact that was my first ever youtube video it was also the worst ever youtube video i've ever produced anyway if you want to make this project using react and bootstrap you can watch that series cool and by the way guys i am currently working on the pwa version of this app so by the end of this series i might make this a pwa who knows anyway let's talk about this app so i have these two main sections one is the sidebar which holds all the method about the user like the user's image user's name the web developer users tag then this download resumes if i click on this download resume the pdf version will be downloaded here it is so with the resume.pdf cool then i have the social links youtube linkedin and github i have this contact section the address and this email id phone number whatever it is and then this email me so if i click on this email me it will open the system email look at this with the tool field already filled up here it is this code.sumacer.gmail.com already filled up it is same as this code.sumacer.gmail.com here it is cool well i think this is more modern way to talk with the client instead of making a boring contact form okay and then i have this dark ui this is sexy so click on this dark ui look at this so basically this button will toggle between the light ui and the dark ui cool i prefer that arc ui everyone prefers that that's all for this left section this is fixed and then at this right section i have these three main pages which is about resume and this projects i can navigate to the pages using the snap bar here it is look at this so let's talk about the about first so here at the top this is something about me i'm currently passing btec degree and all then what are the services i offer so front and back and api development at all as you can see this is a single component rendered multiple times typical react thing that's it for about just go to resume look at this cool animations all the animations are done using framer motion okay so here i have my educations the experience and all the skills with the label again look at the animation let's go to about click on this resume beautiful very minimalistic but quite impressive now just go to projects look at this page transition guys opacity of opacity on this is done using framer motion again look at this trigger animation this is also done using framer motion okay so inside this project section i have all the projects we can further filter this out using the snap bar so these are all my projects and then click on this react these are all the projects made using react and then these are all the projects made using and so on and now just click on a project let's click on this algorithm visualizer look at this this is all the details about this project like the project's name the description of this project and some technical tags i've used inside this project like react firebase framer motion and then this github link and the project link project link means the deployed version so if i click on this project the deployed version it will send you to the deployed version so just go back to the project cool just click on another project nice see the live ui version beautiful there are so many cool things going on inside the code that's why i'm also using typescript for the best practice okay so let's see the responsiveness of this project so ctrl shift i go to mobile version cool look at this sidebar my project section click on this about it'll go to the top and again you see all the services i offer and then click on this resume i love this resume section nice nice cool let's go to a desktop version beautiful and by the way guys we are also going to deploy this project in fact this project is also deployed look at the url this is sumit day sumitversal.app so you can just go to this url and check this out okay so that's all for this project let's talk about the prerequisites so as we are going to use nexus in our project you should have a basic idea about react like what are react components water react hooks and all the basic stuffs about react and then for the typescript and tailwind if you don't know much that's absolutely fine this is a good project for you to get started with telugu in typescript and nexus so that's it i know i'm missing something but we are gonna cover this in the project it will be fun guys so see you in the next video so this is the second part of this portfolio project if you have not watched the introduction part please watch that to get an idea about the final product i'll put the link in the description box okay cool so in this section we are going to set up our next step using typescript and table in css so just go to your terminal go to a directory where you want to create the app and just run npx create next tab and then your app name so npx create next app and the app name for me this is portfolio now remember the app name should not contain any capital letter so all should be in small so just enter cool so let it create the next step meanwhile let's talk about nexus okay so this is the official page of nexus now there are hundreds of videos available that tell you about the absolute basics of nexus i don't want to bore you with the same theory again and again but in short nexus is a react-based framework for building modern web applications now what is needed to make a modern web application let me talk about some of the points first one is server side rendering what does it mean it means send only those html to the browser which is needed to render the current web page that's it just send the page as pre-rendered so that the browser does not need to process the javascript and create html out of it i mean this is the main feature of nexus and then the second point is static generation now whenever you create a web app try to make content static as much as possible if you can make a page static just make that static you don't need to create that dynamically it will be much much faster for the browser to render the web page right so next just provide hybrid static generation support and then the third point is image optimization feature image optimization means load smaller image for the smaller device load images lazily in the browser and some other features nexus provides great support for image optimization okay the next point is easy routing next just supports file based routing so routing is very very easy to configure in next days and then some other points like typescript support css modules support core splitting etcetera etcetera like nexus has all the features to make a modern web application you can read about all of this on this official page like image optimization nexus analytics zero config hybrid ssd ssr we are going to use most of the features in this app okay so just go back to your terminal if the app is created so just go to your directory cd to portfolio nice open this in your code editor i'll be using vs code okay so this is our basic next step let's talk about the folder structure so just go inside this pages folder here we have two special files one is this underscore app.js and another one is underscore document.js let's create that underscore document.js which is not created by default because you don't want to mess with the underscore document.js but we are gonna mess with that why not so first of all underscore app.js so this one is our root file it means every pages renders on top of this look at this component it renders all the pages and then underscore document.js here if you want to modify the html document you can make that inside this file and then i have this index.js nexus is based on file based routing it means every file inside this pages folder is a separate route except the special files this special files this underscore app.js and document.js the empty file except these two files are separated out so this index.js it means our home page look at this this is some basic react it is just exporting a basic react component that's it yeah we are going to talk about this in detail okay then i have this api folder inside this api folder i have this hello.js so every file inside this api folder is an endpoint how cool is that you can create your own api endpoint inside this nexus framework i love this feature okay so this is api folder and then i'm done with this pages folder again i'm gonna talk about this in detail throughout this project so i mean this is just an introduction guys okay so then i have this public folder all the files inside this public folder will be served as static so just put your assets inside this public folder and it will be software static okay next i have the styles folder first one is this global.css which is our i mean global css put the styles inside this file which you want to be global i mean you can rename this file and then i have this home.module.css now nexus has this css module support built in so you don't need to worry about this unique class name like you can just literally import the css file as module and i can show you that just go to index.js look at this this home.module.css has been imported as styles and then just use styles.container styles.main styles4title how cool is that i love next yes man okay so i have the styles and then i just get ignored no and then i have this package.json cool let's talk about this package.json okay so first of all the name of the project the version which is 0.1.0 which you don't really care and then private is true what does it mean it means just an extra layer of security so that you don't accidentally publish this directory as a separate library i mean you are not going to do that but again some npm random things okay and then scripts this is important there are three scripts first one is dev npm run div it will run your development server and then build which is npm run build it will build your project just like react and then start it will run your you know production server so npm run start and then dependencies it's built on top of react so obviously reactant react dom is needed and then next okay so yep we are done with this project structure okay cool let's add typescript in our project now again nexus comes with automatic typescript configuration so just change the name of the file let's change the name of the file to index.ts index.ts not ts it should be tsx remember it should be tsx should be tas x tsx tsx okay cool now just run the development server nexus will recognize that you have used typescript so you need to install some modules so ctrl j it will open my vs terminal okay so npm run dev it will run my project on port 3000 yup look at this it looks like you are trying to use typescript huh so just install these modules okay so the modules are typescript types react and types node so just copy these three modules and i'm gonna use npm not yarn so cls npm i installed this as dev dependencies and then these three modules enter cool okay so let it install meanwhile let's see how we can add tellurium css in this nexus app so just go to official documentation up tell you in css ah tailwind css with what next is click on the first link cool so create your project i've already created that setting up taylorwin.css if you are using nexus version 10 which i am using next is version 10 so just install these packages npm install to you in latest both css and auto prefixer so just copy this command cool go to your terminal and put this here which is npm install television css latest for css latest and auto prefix early test and i'm gonna install this as dev dependencies cause my build will extract the css classes so i don't need the whole television css things so just install this as dev dependencies and enter by the way we need to change all the extension to ts and tsx respectively so this one is document tsx whichever file is returning a component just rename this to tsx and other file is dot ts so f dot tsx oh oh hey wait app.tsx cool and this one is hello.ts beautiful anything else nope okay so let's run the server npm run dev cool my taylor in cs is also installed nice so my app is running on localhost 3000 we detected typescript in your project and created config.json look at this this ts config.json is automatically populated by nextgs we can definitely change this if anything we want but we don't want that okay cool okay so our server is running on localhost 3000 so just go to localhost 3000. internal server error wow so that's our first bug and that is because our document it should be our document come on let's look at the error message yes this underscore document so we have created this underscore document.tsx but we have not created the html file so for now just just delete this underscore document.tsx just use the default which is provided by nexus behind the scene okay and then again run the server just close the server and run this again cool refresh the page and here it is and here it is and here it is okay so welcome to next js thank you get started by editing index.js then i have this documentation learn example deploy and all okay so let's see the source code i should see all the html look at this this powered by versa logo get started by editing and then like all the html is here now let me show you a react app and you can see the html a pure react app i should say uh let's go to my portfolio which is created using react so submit date.netify.app just go to the source code control u bunch of javascript but no html tag like i have only the title which is where it is submit the web developer that's it and then this javascript will create our html and render this on the browser so there are a lot of process going on inside the browser user will be frustrated if it just take you know more than 20 seconds uh yeah cool so just close this close this close this beautiful now i have this typescript setup complete and let's setup our television css oh what happened with my voice so first of all we need to create our tailwind config file so for that we can use a comment which is provided by telugu in css yeah this one npx television css init with a flag p it will create our television config file and the post css config file so just go to your terminal and paste this enter it should create two files yup look at this our television config file here it is beautiful here we can define what are the files we need to purge just go to a documentation and yeah this one i need to purchase all the tsx file just copy this piece of code and what does it mean by purge it will check all the files in the build process and then remove all the nsa css so just copy this i don't need this js ts jsx i only need the tsx so just remove this brace and dot tsx also dot tsx okay so it will check all the files inside these pages and the components and then pass that okay so these pages i need to create another folder which is components so let's create that in our root directory which is not needed right now components okay so yeah are we done with this no we are not yet done we need to import the direct tips so for that just go to official documentation yup this one this tell you in base tell you in component and tell you utilities tell wind not telling okay so just go to global.css remove all of this and put this here cool that's it save this now we don't need this home.module.css because we are not going to use any no simple css we are going to use television css okay remove this just go to the index.tsx here we can't import this home.module.css this file does not exist actually remove all the all the code inside this file okay now let's create a component so underscore rfc it will give me the boilerplate of a functional component this is an extension of vs code just install that okay so just write something like uh bye bye world cool now look at this you need to export the pages as default you need to export the pages as default default default look at this export default you have to make the export default okay so yeah bye bye world cool now it will be served as our home page just go to the browser refresh the page beautiful bye bye world let's see if tailbone is configured or not so for that we need to restart our server because we have just modified our config file so npm run dev again we don't need this terminal npm run dave npm run dev server registered refresh the page cool bye bye world now just go to the elements ctrl shift i the shortcut and just try to add some you know tell you in css so just click on this edge one okay click on the cls just add a new class uh text yeah look at this takes five nine whatever base now bg red three hundred four hundred yeah telling is working fine so we are good to go okay so so far we have set up our app we tell you and type script and in this section we are gonna create the layout and the sidebar so let's see the final version and let's plan the layout okay so basically this layout has two parts one is the sidebar and the other one is this main section the sidebar is fixed this snapbar is also fixed and this section will render by the pages so i have three pages one is this projects one is this about and one is this resume yup so let's create a grid of 12 columns and allocate three columns to the sidebar and the other nine columns to the main section okay so let's do that just go to underscore app.tsx because that file is our route but before that just go to global.css and set the background color of the body so target the body background color black for now this is temporarily because we need to change this using tailwind.says i mean tell you in css not telling that says okay background color black and the font family are sensitive cool save this and just make a to do use tailwind comment this out beautiful let's go to app.tsx and let's create the layout first of all we need to create a grid right so just create a div creating grid using tailwind is very easy so create a div inside this create a grid of twelve columns so just go to parent div and add a class name grid and number of columns to help so grid columns 12 nice add some space between the grid so gap 6 and then inside this div i'll have the sidebar so create another div put sidebar for now and then this component i need to put this in another div so just put this component inside the second div nice okay so i have these two div inside the grid and let's allocate three columns for the sidebar so let's again add a class name and this is columns pan three and for the second div this is column span nine because three plus nine is equal to twelve beautiful also set the background color to white so that i can see this bg white cool save this nice let's see go to the app local 3000 refresh this zoom this 200 percent okay so i have these two great sidebar and the main section let's give this some padding and margin so you can just go to f.t.s.x target the parent div so margin y i mean margin top and bottom around 14 and padding x around 48 also make the corner rounded of the sidebar so just target the sidebar class and this is rounded medium or just go for bigger value 2 xl cool copy the class also target the second div put this rounded to excel save this let's see refresh this i don't need to refresh but again hot reloading is a bit slow okay so this is fine now let's check the responsiveness now i can tell you in css is a mobile first framework so so all the classes are applicable for smaller device by default we need to manage the responsiveness using the breakpoint so just go for the mobile screen actually let's make this side by side so that i can see this okay just go for the mobile screen okay so how can i make this responsive so for the mobile screen i want this sidebar to take all the 12 columns so just go inside the sidebar class add column span 12 both the class so column span 12 because our grid is of 12 columns and then for this column span 3 it will be only applicable for the large screen so from the large screen this is column span three so lg colon column span three and again this is lg columns column span three very easy to make this responsive save this nice look at this i have this side where i have this bye bye world but i have some extra padding let's make this also responsive so just go to the parent component and set the padding to 5 for the smaller screen i mean by default this is for this extra smaller screen and this px48 will only be applicable for the large screen save this beautiful so let's give some padding to the sidebar so p4 padding at all side and then take center take center cool save this and now let's create the sidebar component so just go to a components folder and then inside this components folder let's create the component.tsx remember it has to be tsx dot component sidebar dot tsx so sidebar dot tsx cool okay let's get the dummy component r a f c e beautiful let's put some content inside the sidebar okay so what i need to put inside the sidebar we need this image we need the name in this web developer tag this download resume all the social icons and this contact person and this email me and this light ui button i mean this toggle ui button okay so let's do that so let's put an image the image i can get this from the url so let's get this url open image in a new tab copy this url just put your own image guys go here nice all tag what is like user operator our both are nice it will take some time for the whole reloading okay so let's put the name here so again h1 or h3 does not really matter so sumit i'll change the color of the first name look at this this is sumit there also the font is different this is caution script i need to import the font so let's put this first name in a span not h3 bro okay so span zoom it and just remove this submit nice and then i have this web developer tag so inside the p web developer cool and then again i have this downloaded zooming so again inside a p download let's see save this why it is not working and that is because i have not imported the sidebar wow so let's go to app.tsx import the sidebar should be auto imported let's see at the top yep sideward is important from component slash sidebar save this nice okay so i need to put an icon here inside this download resume so for that i'll be installing a package which is called react icons so just go to a terminal and type npm i react icons enter cool okay let it install and let's further populate this what i need next i need the social media icons again this is a game of icons okay and then i need the address bar so just keep these icons i mean social icons so social icons comment this out cool and then i have this address okay let's put the address here what i need i need the location so inside the div put another d for the location just let me resize this sorry okay cool so inside the div let's put a span and this is kolkata india i'm from kolkata india i need to put the icon here i'll put the icon once it is installed and then i have the email here so what this is sumax gmail.com and then i have the phone number eight five one eight four zero i don't know what i'm typing but i'm just typing 708 546134 cool is this 10 days no cold okay type this div i have the address section done and then i have the button so email button email button if i click on this button it will open my system email so button this is email me and another button which is toggle ui or toggle theme toggle theme we are gonna do the dark ui part later seems like our react icons package is also installed yep okay so if you don't know about this package let's go to the browser and search for react icons you will get almost all the icons in svg format so that you can change the color you can resize that so just search for reactor icons and click on the first link you'll have all the icons like from front of some and design metal material design okay so hero icons all the icons are available we need a bunch of icons so first of all the github github the search for github look at this i need this ai fill github so just copy this go to the code again resize this just open our local house 3000 resize this cold okay so let's go at the top and import the icons import in a curly brace ai fill github from reactor icons and then mention the provider this is ai and then i need the linkedin icon so ai linkedin yeah for linkedin and another one which is linkedin github linkedin github linkedin github oh youtube so here i feel youtube beautiful and then i need the location icon and this is coming from the go import go location from react icons let's go cool anything else yes i need the tie icon and this tie icon is available in gi so import gi ti from react icons slash gi cool now i can input this icon uh gi or not go tie this is gi type look at this cool okay so let's put the icons inside this download resume this is gi type so just use as an component gi type self closing tag as add the width and the height so use class name with around 6 pixel and height around 6 pixel nice and then inside this location you can put the go tie don't go ty this is go location save this i don't need to mention the width and height because this is small and then let's put the social icon so inside the div put an anchor tag and the ref just put your link here and then first one is a i feel youtube cool that's at the width and the height so with six height six actually make this larger with eight highlight okay let's copy this link couple of times cool for the second icon this is github so ai fill what github cool and the third one is ai fill for linkedin linkedin save this look at this i have all the data and let's design this okay so let's start with the image let's add a class name and by the way guys i need to change this to next image we'll do that later so first of all let's add then height and width at the end height and width with 32 height 32 make this round it's rounded full and border radius 50 percent and mx auto so that it is horizontally centered save this horse loading is a little bit slow okay cool and then for the name let's target this h3 add a class name just put some margin at top and bottom so my around three or four save this so margin at top and bottom four increase the text size so take three xl add some font weight so for medium hard loading is a bit slow oh i need to put a space here so after sumit just put a space cool also give some letter spacing so use tracking wide wider save this cool okay so let's go to our web developer tag let's add a class name i don't know i don't know what happened with my voice add some horizontal padding so px2 vertical padding around one unit so py1 set some margin so my3 at top and bottom the background color so vg grade 200 make this round that's rounded full cool save this it looks nice okay just copy all these classes and just go for the second paragraph i mean this download resume actually i can make this a paragraph i need to make this an anchor tag because it will download the resume right so anchor tag then use a class name put this classes save this okay okay and then age rep i need to put the path of this asset which is my resume so i'll put that later and then the download this is the name of my pdf i'll put that later so name that's for now called save this okay i need to make this icon and this text horizontally centered and vertically centered right so for that i'll be using flex that's the base option so flex just add a class name item center so that the items are vertically centered sorry then justify center this will make this item horizontally centered justify centered i mean justify content center i guess you all know the basic css by the way okay so just save this it's nice it's really nice let's go for these icons so the social icon just target the parent div add a class name again i need to place this icon horizontally so just use flakes justify content around not center but around at a vertical margin so my5 unit text i need to change the text color so for now this is text 500 green let's save this i need to decrease the width for the smaller screen so again with what nine by 12 so this is 75 percent and again from the large screen or from the medium screen it will be with full so making responsiveness in telling is really easy okay so that is fine save this save this safety save this oh let's make this horizontally centered so for the whole block this is a mx auto so marginal left and right auto nice and let's target all these icons and just add the cursor pointer cursor pointer beautiful look at this it's fine yeah it's fine okay so let's go for the address and target the parent div class name add some margin at top and bottom say my five add some padding at top and bottom py4 save this add a background gray so bg gray 200 just be consistent save this again hard loading hot loading or reloading nice but we have a problem can you see this space at left and right and this is because i have the padding on the parent div and inside this app.tsx look at this i have this padding which is p4 that contains our sidebar this is padding one rim right so to remove this space i need to set the margin left and right minus one ram so let's go to the sidebar and then target this div add style put two curly brace and then the first one is margin left margin left this is minus one ram because i have one damn padding at left and right for the patient component and then margin right this is again minus one ram so it will delete the space save this let's see yeah cool look at this it's far better right let's target this icon and the location so target the inner div class name again flex this is item center so that this is vertically centered item center means align item center by the way and then justify centered for the horizontal centered safety safety safeties okay i need to add some space between the icon and the kolkata india so for that i can target the span so class name actually nope let's target this parent div and add another class which is space space x around two let's save this yep it's fine nice let's target the paragraph so target both the paragraph using alt and click add class name add some margin at top and bottom so my two save this let's see yep it's fine let's target the buttons so again target both the button at class name again guys as you can see i need to put gradient background color on the buttons but this green color is not yet available so just use a proxy so target both the class i'll be using green 400 for now so to add a background color we need to use bg gradient this is coming from tailwind bridge gradient to r and then from from which color this is green so from green 400 to what to blue this blue color is available which is blue 400 save this that's fine let's add some width so with around 8 by 12 this is 66 percent and again i am applying all the classes to both the buttons okay make this rounded full and then add some padding at top and bottom add some padding left and right around five unit just change the color of the text to white text white just add some margin so my two units save this yeah it's looking nice let's go for the large screen okay so now i need to add the font which is caution script and then i need to change the background color of the whole body to the gradient i need to also add the green color okay so let's go for the font let's go to the google font and find this question script and then select the font select the style and here it is look at this just copy the link of this font and by the way guys i'll put the link in the description box so that you don't need to find this only thing you need to do is to give this video a like please like please it is 2 31 am so please hit the like button ok now where to put this link so for that i need to use the document file remember underscore document.tsx so just go inside the pages folder create a new file which is underscore document.tsx okay let's go to our nexus documentation and see how to set up this document file so next is document advanced features custom document yup okay so just copy this document let's go to underscore document okay cool so what is going on this is a class based component which is just extending this document class and then this gate initial props i don't need that okay so basically this is importing the html and then the head and then inside the body it is just injecting the next script and the main section so quite simple let's add the font so just remove the self closing head and put put a head okay just copy the font again because i lost the font okay so just copy this again let's go inside the head put it here just make the self closing also the second one self closing save this nice anything is wrong yeah save this full okay now how can you use this font using tailwind i need to add this font in my tailwind config so let's again go to a television documentation and guys do use the documentation properly like you will find everything in the documentation okay so let's search for what custom font or font font family okay let's find an example yeah customizing so by default tailwind provides three font family this sans serif and mono to add a font just go inside the font family and then add the font okay so just copy this piece of code and just go to telugu in config tell you in config oh oh oh telling config okay inside this theme just put it here okay i don't need the send sensitive mono i don't need to extend that remove this display and let's name this font word caulson i don't need to put this inside a string i guess anyway and then inside this array let's put the font which is causing script right so just go again to the google font and copy this question script the name of the font go inside the array put it here and then if you want to put any fallback fonts you can just put this inside this array okay i'm not going to use any fallback fonts save this code and now i can use this using font caution let's see so just go to the sidebar just go inside the sumit just i get this h3 and just use font what gaussian thousand nice save this it should work look at this the font is changed to question script and if it does not work in your case just restart the server because sometimes if you change the document.tsx file you need to restart the server okay so yeah we need to change the color but let's add the color first so again just go to documentation and let's search for colors or custom color yeah customizing color okay so look at this i have all these colors available but i still want another color so let's see how we can add a color custom color yup okay so let's copy this piece of code so just go and set the theme if you want to extend just go inside the extend i also need the existing colors right so just go inside the extend and put this here so first of all what is the name of the color this is green put any name you want i don't need any light person i don't need the dark version like birds and oh and then what is the color so zero zero f two six zero zero zero f two six zero the hex value save this okay now i can use this using text green busy green whatever so let's go to a document.tsx and set the background color of the body so body that's at class name so i need to add the gradient color right so bg gradient 2r okay from what from green so from green yeah from green i have this from green okay to what two blue 400 oh oops 400 nice save this let's see my local 3000 [Music] nice look at this also add the colors to the icons so just go to a sidebar sidebar dot tsx this takes green 500 yep takes in 500 just remove this 500 okay and also go to the buttons and then this is just from green no 400 from green default okay save this code now also go to the name which is my sumit just target the first name class name this is text green cool save this yeah look at this sweet [Music] yeah let's add the functionality for the email so if i click on this email me the system email will be opened so let's go to this sidebar let's go to the button okay so insert this button let's add an on click handler up on click so i'll be using the windows object so just use an arrow function just target the window let's use the open method that's inside the string pass mail to what my email which is sumax at the gmail.com it is not my email by the way there's some fake email so myself.gmail.com refresh the page and by the way guys i'm assuming you know the basic react like this arrow function and all this arrow function will be triggered and this will trigger my windows.open function so let's see if i click on this email me it will open it will open it will open it will open yeah select an email and the tool field is gmail.com cool let's close this and by the way let's remove this outline it looks cd okay so just go to this button now we can target this focus state using focus colon that's how easy tailwind is focus i should not say easy this is more you know handy outline none nice so focus on focus outline none and by the way guys i forgot to mention that i am using two extension which is called uh first one is head wind so let's go to the extensions oh how can i forget that so here doing yeah look at this a class sorter for tell you in css just to write some clean and organized code and then another extension which is tell you in intellisense and again as the name suggests it will give suggestion for the taylor and css class so just use these two extensions close this close this so i guess i am done with the sidebar let's see the responsiveness yeah look at this i need to give more padding a left and right for the medium screen right so let's just go to the app.tsx so underscore app.tsx so from the small screen so asm colon this is padding px14 or 20 just give more padding and then from the medium screen so md colon px around what 32 save this yeah it's better far better let's make this for the mobile screen yeah nice beautiful let's go for the moto g4 yeah cool so that's it for this video in the next video i'll be designing this snap bird and then this main section so see you in the next video but before that please hit the like button please please please see you in the next video bye so in this video we are going to create this snapbar let's see how this snapbar works so let me just go to the final product so here it is okay so inside this snapbar i have three items which is about resume and projects whichever element is active will be shifted at the left with some bold look look at this bold and the respective page will be shown here and the other two elements will be shown at the right so let's do it okay so let's create the number component inside this components folder navbar.tsx are not tsc csx cool underscore rfc which will give me the boilerplate or functional component just export for now navbar nava bar that is fine so just import this snap over neverworld so inside this underscore app.tsx just put the nav bar should be auto imported from component slash snapbar yup at the top auto imported and i need to show the page after the snap bar so this is my page the component so just put flex which will be display flex and the flex direction is by default row i want this flex column so the flex directions column that is fine i'll also create the pages so that i can test my component so inside this pages folder i have the about pages right so which is my index page i'll create the resume page and the projects page so resume dot tsx underscore r a f c e e underscore underscore rfc look at this this is export default which is masked for a page or i should say resume page for now just give this a class name padding four so that it gives some space at all sides okay cool and then i have this second page which is not second by third page which is projects dot tsx again underscore a fc just return what project speech let's give some padding p4 nice deadly simple okay let's see just go to my localhost 3000 and refresh the page i should see my neverword yup i have my neighborhood and my bye bye world okay let's go to another world now but the tsx cool you know this takes never a lot of hours sorry about that okay so the idea is whatever element is active i need to show this at the left and whatever element is not active also at the right so i need to keep track of the active element let's create a piece of state for that inside this nub bar use state which is a snippet provided by vs code and the name of the state is active or active element active item okay active item like i can literally spend my whole day to name a variable okay active name and then initial state start with an empty string use test should be imported from react okay at the top imported from react nice and now as we are using typescript you can actually specify the type of the state variable but in this context even if you don't specify the type explicitly it will by default a type of string look at this hover over this active element look at this active element column string so type is string why because you are also assigning the value during the declaration of the variable but in case you want to add a type you can add the type using this generic so just put this angle bracket after this use state and define the stripe string cool beautiful not cool so inside this div i swish pan and that will hold my active element so inside a curly brace active element not active element active item bro active item and then for the other elements i'll put a div inside this div i need to put the nav item and that will be wrapped with a link so let's import link from next link import link from so next slash link aha cool now inside this div this is link and then inside this link you need to put the hdref let's say this is for the about so slash which is our home route with your index page and index page is my about okay and then inside this link i need to put the anchor tag anchor tag not a anchor tag cool just remove this wave beautiful why am i saying beautiful i don't know you can put a dislike for this beautiful so inside this anchor tag i will put a span and that will hold my item so this is about cool but i'll only show this about if the active item is not about right so just before this link i can check this since i had a curly brace just check if the active item not equal to equal to about in that case i return this jsx if this is only valid and operator again some basic react save this goal let's copy this couple of times for the projects and the resume for the second case if this is not projects isoprojects projects i'm a lot of typo okay this is projects and the link is projects for the third one this is resuming the name is resuming the route is resuming cool save this and just put some style so that i can you know differentiate the active element so class name this is font bold and let's go for the color green and then for those elements which are not active just add some class name something like what text read and font large cool save this okay let's see okay so i have this about projects resume but i don't have the active element because i have not changed my active element so let's add an on click handler for every span so click on fd span and by the way guys i'll change this to separate component in a minute on click let's trigger an arrow function that will change my active element not active element active item so first one this is about for the second one for the second one this is projects and for the third one this is resume cool also put this inside a flakes so that i can put some space and then space x around 3 that's fine save this refresh the page why i don't have the text read oh that is because text does not exist text rate 400 500 i need to put a weight okay so let me just zoom in okay i have this about projection resume but i still don't have the active element because the active element should be in green color but why i don't have the active element this is because this active item which is the state responsible for this active element is still an empty string and this empty string is this active item so it is not rendering and this is also a reason why these conditions are filled and that's why it's showing all the three elements so i need to fix that but let's click on an element look at this click on projects look at this active elements projects click on resume the active element is resuming and also a resume page is shown here click on about my route is also changed to home route and this is bye bye world which is our index page so the problem is only occurring for the first time when the component did mount so i need to fix that how can i fix that so basically we'll check the route if the route is slash which is our home route in that case i'll set the active element to about and then if this is projects i'll set the active element to projects make sense let's do that so i need to check this window component mount so again use use effect should be coming from react yep it is not auto imported so i need to import that let's import that control space ah import it put the dependency array empty so that this function only be executed when the component mount okay so i need to get the path name and how can i get the path name i'll get the path name using this use router hook use router which is coming from react router dom no next router so use router let's see my auto import come on you can do that no same port use router from next slash router cool use this use outlet i only need the path name so path name just restructure this school and then inside this user effect let's check if the path name is same as the home route path name which will be a string is equal to equal to equal to is same as the home route in that case i'll change the set active to what about set active item about cool save this let's see okay so let it refresh look at this i have this about i have these projects if i click on these projects i just resume okay but we still have a work what is that so if the user directly goes to a route let's say projects route projects routes enter look at this we don't have any active element and that is because i am only checking for the home route so let's check for the other ones so copy this copy this path name this is projects projects and if this is projects in that case i'll set this to projects and if the path name is resume in that case i'll set this to resume capital resume cool save this the problem should be fixed okay and now i'll make this nav item a separate component so let's go at the top and create a component const nav item you can create this in a separate file but as this is a part of navbar i'll put this in a same file that's an arrow function oh what the heck arrow function return some j6 okay so what i need to return just copy all of this thing this active element to this parenthesis cut this or just copy this put this inside this return nice i will have a lot of error so first of all i need to get some properties and now as we are using typescript we can validate the properties inside this nav item it returns a react functional component so functional component should be auto imported from react yup it returns a functional component and then the way you can specify the properties which is coming is by using this generic just put a curly brace and let's define the types which are coming so i need the active item active item which will be a string and then the setactive item which will be a function which will be a function and then the name of the element will also be a string and then anything else yep the route which will also be a string save this cool and now let's destructure this see the power of typescript so just put a curly brace and then contour and space look at this i need active item and you can control space name anything else route and then the set active item okay let's substitute this say about i don't need the hardcoded about instead i need the name not a name name ah why this curly brace okay cool so if the active item is not equal to name in that case i return the jsx and if this is not the name i write a null so null just some basic ternary operator and then the route this edge rep will be substituted by the route so put a curly brace route and again why curly brace because we are executing javascript inside j6 save this my nav item is ready and let's put the snap item okay just remove this active element all of this active element this long chunk of codes okay let's put active element no active item no no no no item have item and let's see the power of typescript look at this you have an error and that is because just hover over this the type is missing the following properties active item set active item name route okay so control and space active item this is my active item of course the state variable and then the set active item this is my function the set active item that is cool anything else app name for the first one this is about and the route for the above route this is home route right yes so i have this nav item for the about just copy this couple of times for the projects and the resume change this to projects the route is slash projects and then for the third one this is resume and the route is slash resume so just save this and let's see just refresh the page resume about about wow what is going on here i am passing resume as the name project as the name inside my nav item on click set oh i need to change this name so this is inside a curly brace name and also a set active item to name you might have noticed that save this it should work fine refresh the page yeah resume about projects let me just zoom in just click on about this is my bye bye world which is our index page click on projects projects page beautiful let's add some tailwind css okay so just target this parent div inside this parenting i have my active item and all the other elements let's close this rib cool so let's target this parent div and add some class names so i want this active element at the left and all the other items at the right so just use flakes and then justify between so that it gets maximum space in between the items justify between cool give some padding around 5 unit let me just make this side by side so that i can see the design okay let's go for the mobile screen cool let's add some vertical padding ui around three unit at some margin around three unit vertically save this let's see looks good increase the font size for the active item target the span and add takes extra large excel and just add a border so border bottom around 4 pixel save this and then for the rest of the nav items let's target this parent div and just add some class name what is this font large this is not font logic it should be text large you might have noticed that okay and the border color of this pen should be green so just go back to your active element and add border green or cute green or dark green save this just remove this text red and just go back to the large screen it looks good i just need to increase the font size for the large screen and on hover i want this text to be green let's do that so just go inside the span and from the medium screen i want so from the medium screen i want the text to be 2xl to excel not wxl to excel and then just go back to nav item and target this pen and add some class names the class name on hover that takes to be green green cool save this anything else yeah looks good however this fine i think i need some more space in between this about and resume like this it's a game of padding and margin guys hardest part for a front-end web developer so just go inside this div and make this space x 36 around five save this it looks better anyway that's it for this video in the next video we are going to cover some fundamental tricks of next days like get server side props get static props api folder okay so in this video we are going to create this about page we are also going to talk about some of the fundamental topics of nexus like get server set props static props api folder and all so this will be an interesting video and by the way guys this is my final product and this is my ongoing project which is this bye bye world so so far we have created this sidebar this nav bar and this bye bye world so in this video we are gonna convert this bye bye world to this beautiful about component or about page about page yeah so let's see how can i make this so inside this about page i have two section one is this about me and then the services so what are the services i offer or i am good at so this front end development backend development api and all okay so obviously we are going to create a component let's say service component or service card every component is a single service card and then you can pass the props individually or a better approach will be make an area of javascript objects where every object is a service and then just map out the array and render the service component so you will be creating an array of objects or every service is an object so go back to your array not add a code let's create the area of objects so let's name this data since i do root directory data dot ts which will hold all our data's so the name of the array services so services this will be an array and i'm also going to export this so that i can import this in my about page so export cool now inside the services array every object will be a service so let's create an object so every service would have a title a description and an icon so let's create our first service which is title let's say front end developer and then about which will be my description some lorem blah blah blah and then an icon and this icon is coming from the react icons package so just import an icon from this react icons package import something from react icons slash ri the provider and the name of the icon is ri computer line or something like that computer line save this school and just put this ri computer line as this icon beautiful so this is my one service ready i'll have a bunch of services but now i'm also using typescript so let's take the advantage of typescript but before that let's see what's the problem without typescript let's say you are creating another service so just copy this and paste this here beautiful and now you made a typo this is not title this is tied to loo and then let's say this title is not a string you made this something called one two three but look at this javascript does not complain about this like everything is there in love word and javascript but we don't want that we want to make this strongly typed array so let's create an interface interface is a part of typescript you can refer interface as as custom type well the definition of interface will be something like interface describes the shape of an object that's it let me show you so let's create an interface to interface the name of the interface is service but i like to use i as the prefix so that i can recognize this as interface i service and then embrace okay cool let's define the shape so i'll have a property which is title the type of the title should be string cool and then about which will also be the string and then icon now what is the type of this icon it should be something like react icon or icon type but how can you find the type of a component how can you find that okay let me show you a trick so just hover over a component in this case our react icon is ri computer line press control and click look at this this is my source code look at the name of the page this is index.d dot ts and then the type is icon type so colon icon type look at this ri computer line colon icon type so type is icon type so just copy this and go to your data dot ts and input this import in a curly brace icon type from react icon obviously cool and just grab this icon type and put it as a type of icon save this school and now just set the type of this array so services put a colon this should maintain the array of this i service safe so i service which is our interface and just an array cool look at this oh the name of the interface nice and now look at this we have an error so now typescript says the message is titled does not exist in type i service did you mean title yeah bro i mean title the title now you have another error just hover over this look at this type number is not assignable to type string remember this title should have a type string but in this case this is number so just make this title and now the error is gone so that's the beauty of typescript okay so just save this and put this interface in a different file so that i can import this in my about component about page about page not component a file name called type.ts okay put this here also export this beautiful and this icon type should be auto imported let's see yep imported icon type from react icons and go back to your data.ts and input this i service interface control space should be imported yup auto imported i services from dot slash type and remove this react icon we don't need that okay cool so this is our basic shape now let me just copy an arrow of services okay coming back in a second okay so i have an array so just remove this dummy objects and put my beautiful array yep i need to import the icon so at the top import the icons nice okay so this is exactly the same step every object contains this icon title and about and notice that inside this about i have this b tag b means bold in html so this html this wrapper will be rendered in bold font weight and then the css in bold this react.js in bold you know just some extra focus on my skills on your skills i should say so just create your own array with your own skills and if you want to use this data.ts i'll put the link in the description box okay save this cool and now just go to your index.tsx which is our home page which holds our about page lot of page syntax.tsxcool so inside this index.tsx just import our services array so that i can map over this so import from dot dot slash data the name of the array services cool just log this inside our client log client means client side rendering by the way because we are going to see how server side ending works in this video oh not client services okay save this let's see so let's go back to the project and refresh the page which is localhost 3000 refresh we don't need to refresh and then go to console okay look at this i have an array area of objects area of services and then i have this front end development about and then this icon look at this ri computer line which is a functional component now this method perfectly suits our app but let me show you this in a different way which is called server side data fetching i really want to show you this method as this is one of the fundamental features of nexus like this server side data fetching this api endpoint and all so let's do it but before that let's imagine this data this bunch of objects is coming from a database and you have created an api endpoint to face the data so let's do it just imagine this this data is coming from a database and you have created an api so how can you create an api endpoint you have to create a file inside your api folder see inside this pages inside this api look at this i have this hello.ts this means this hello is the endpoint so just go back to your browser and then go to your local host 3000 and go to url and then just put api slash hello it should return you something look at this i have this response name john doe so whatever file you created inside this api folder will be converted to an endpoint how cool is that okay so let's do it delete this hello.ts but again guys in our app it does not really make any sense to create this endpoint to get the static content okay but i want to show you because this is your nexus project for beginners and you need to know the fundamentals of nexus i love next to be honest so let's create a file inside this api folder let's name this services so new file services it means the endpoint name is services the ts code so let's create the endpoint export we also need to export this cause in the build time nexus will compile this endpoint export default typical request response so request response and arrow function code now you can set the type of this request so type of the request is next request next api request sorry and the response is next api response dog is working it's 2 39 a.m anyway next api responds cool i also need to import this i don't know why autoimport does not work sometimes like i know why it does not work but why it doesn't work anyway so now inside this you can check if the request is get post delete or update by default it will be a get request and you also need a get request in this context because we want to fetch the data from the server so just grab the services array import now again just imagine this services address coming from a database from dot dot slash dot dot slash data and the name of the array services keyword services okay now if you get a get request on this url we will respond this with the services array so response raise dot status the status of the request is 200 if successful in this case it will be successful every time because you are just getting the static content and then send this as a response so dot json convert this to json services cool but before that let me just log this out i want to show you something log services so this will be logged in the server let's see the endpoint name is services just go to your browser it should work api slash services enter let's see look at this i have the response but notice that i don't have the icon why just go back to your server close the sidebar where is my console.log up look at this the icon is functional component but this express api does not know anything about the react icon it has no idea about what is react component and all this stuff so it basically omits the data and just filter out this title and about right so what i mean is in this particular context where you have this react component as the value this thing will not work so you just need to go back to our first approach which is this one just import this as object as plane object and then just map over this but that's the concept of api guys okay you just need to create a file inside your api folder and it will automatically be converted to an api endpoint and now let's see server side data fetching so just close this close all the unnecessary files close this close this close this close this index.tx open this cool so in our next js app we can use three types of data fetching technique one is get server side props second one is this get static props and third one is get static paths so let's see how this gets server side props and get static props works so you have an endpoint which offers the service write the servers.ts let's use this endpoint so inside this index.tx to use our gate server set props we need to create a function which is called get server set props as simple as that actually make this function outside of this default index okay the name of the function is get server set props get server side props now it will get a context which is called page context which will give you the information about your route the page the type of the context is get server site props context get server set from context yup that's some typical typescript thing now we don't need this context here but what is important is you just need to return a specific shape from this gate server set props and the shape is an object and in this object you need to put a property which is called props and this props will be your props so the result inside this function so whatever calculation you make inside this function inside the server side function i should say will be passed as the props and then these props will be passed to this page so inside this index page you can just grab this props as simple as that okay so let's do some logic inside this get server set first function so basically we want to make a request to our services endpoint and just grab our services data and then pass the services data as props and inside this props i can access the services data so let's do it i'll be using page now remember this page is not your browser fetch this is your node.js page because whatever is happening inside this gate server set function will be executed in your server not on your client page the url is let me just copy this this localhost api service copy this copy this copy just put it here beautiful so this will return your promise handle this using average also i need to make this asynchronous function okay that is cool just grab this data as a response and then convert this to json the const data is raised.json this will also return me a promise so android is using average cool and then just pass this data as services so instead this props the key is services and the value is data dot services beautiful i also want to make a console log so i can show you some interesting thing console.log server and then this is services services cool save this refresh the page go back to your home page refresh the page and go back to your console look at this have the data inside our server let me just you know expand this cool so now basically i can grab this data from our props so just go back to your page restructure this so services because this is the value coming through this props this product that is the services so i can grab this as services and that's console.log as client cli ent cool save this go back to your page now when you refresh the page the whole page will be revealed and everything will be console log in the server look at this i have the server and i also have the client but now just go back to another route let's say this projects click on projects i have my projects now you can go back to your about and now just go back to your server look at this i only have the server data look at this as the server data the page rebuild and then i have the server data now what does it mean so this function is executed every time the page is refreshed you can try again so just go back to another route let's say this time resume and then again go back to about look at this look at your server we have this server data right so it means whenever you go back to this page this particular index page the home page this function will be re-executed this get server side props so what are the use cases where can you use that one advance use case is the home page of your e-commerce site let's say your homepage is built using machine learning and that machine learning data is updated with the user's interaction so in that case you need to rebuild the page every time user refresh the page right so that's an advanced use case you can also use this in your social media feed so every time the user refresh the page the feed should be rebuilt so that's the use case of get server set props now just tell me do i need this get server set props in our app in this particular app we are only getting some static content from the database i mean not database but imagine this is coming from a database do i really need that because this is ultimately the static content so for this you have something called get static props how can you use this very simple just copy this function this is exactly the same you just need to change the name of the function so just copy this ah sorry sorry sorry sorry sorry okay the name of the function is get static props so get static props it will also get the page context but the type is get static prop context crops context cool just save this everything is same but this function will be executed one time it will be called only during the build of this project that's it but in development mode it will be executed every time you defresh the page just like your gate server side props let me show you so this is my server again let me just comment this out because it will give you an error if you use both both the data fetching techniques comment this out cool so save this refresh the page and now just go back to your resume go back to about look at the server this your client this client will be executed only one time and that is because when you refresh the page it rebuilds your component and this component let me just remove this client console log for the clearer console save this and now again go back to your resume oh let me rephrase hot reloading and by the way guys please hit the like button if you are enjoying this project because this is 3 30 name and i need to record this video so this bye bye words with your index page go back to resume you can go to about look at this this server again go back to resume go back to about look at this this is again re-executed server so this will be executed every time you refresh the page only in development mode let me show you what happened in the production mode so let me just build this project open another tab so npm run build this is a comment to build the project and guys make sure your local host 3000 server is running if you are building this project with me this local was 3000 because this build will be making a request on this server on this particular api endpoint and this server should be running let's see this is creating an optimized production build can you see this look at this data this icon title about the server this server is the same console log which is the server so what does it mean it means it executed this function during the build time and now let's run this production ready build so close the other server time in at the job and go back to another terminal and npm run start which is the command to run your production build so npm run start look at how fast this is and just refresh the page boom like in a second refresh the page boom projects resume about anyway the point is just go back to your server and see the console you can't see any console log why because this function is executed only when the build time that's it so that's what i wanted to show you so just close this development server now where can you use this where can you use this get static function you can use this in a page which is completely static but the data which is coming to that page is completely static let's say your faq page frequently asked question or your portfolio or a blog there are a lot of use cases so let's say i run the development server npm run dave cool and by the way guys during the production this localhost 3000 should be coming through our environment variable because in your production there is nothing called localhost 2000 this video is getting longer in the next video we are going to render our about component not component about page okay so again go back to our first approach which is our which is just import the javascript object and render over this so yeah we have covered a lot of things of nexus in this video if you have enjoyed this if you have any feedback please let me know see you in the next video i need to make some maggie bye so let's continue making this about page in the last video i have created this data which is this data.ts and here i have the services array oh my vs code is damn slow okay so i have this services addy let me just expand this okay so in this video i just need to map over the services array and enter this in a component let's see how can we do this and by the way guys this is my final product and this is my ongoing project which is this bye bye world i just need to replace this bye bye world so i have this description which is something about me which is the h6 tag or paragraph tag and after that i have this div which wrap our service component and then i just need to show service component fairly simple go to the code go to this index.tsx and by the way guys notice that i have commented out all these data phasing techniques you can use this as the reference okay i can't access the services from the props okay cool remove this console log nice let's create the skeleton you know this bye bye world put an h5 which holds our about let's copy this about i am currently passing b degree blah blah blah should i put my 75 percent attendance here okay for this h5 nice save this pull after this h5 let's put a div and say this div i have a h6 which says what i offer or what are the skills i'm good at what i offer cool after this a6 let's put another div which will wrap our components okay inside this tip let's grab the services array this services area which is coming from this dot dot slash data and just map over this dot map get every service as service and create another component let's say service card service card i need to create this component and i'll pass the service ops service as service a full object okay cool let's create the component go to this components folder components service card the tsx cool rafc which will give me the boilerplate of functional component nice here i need to get the services and let's use typescript why not so i can define the type of the properties so for that i need to use the generic of the functional component so the service card returns functional component it should be imported from react function component yup so inside this generic i mean inside this angle bracket define the props so inside a curly brace the props is services not services service and it is the type of this i service interface remember this i service interface we have created in the last video inside this type dot ts i have this i service i just need to import this i service let's see my auto impose should do my job i service ef bro cool i say which is imported and now i can restructure this so first of all control space what are the properties are available service and from service again this structure this again inside this curly brace press control and space look at the power of typescript i have my icon which i need about i also need that title i definitely need that okay so inside this div first show the icon and then again put another div inside h4 i need to show the title since it's curly brace title and why curly brace because i'm executing javascript inside ga6 and then a p which will show my about cool save this i think my skeleton is ready let's see uh hello girls 3000 refresh this hot loading is very slow oh service card is not defined i have not imported that go to windows.tsx yup control and space my auto import should do my job yeah bro imported cool let's make this side by side so that i can design go for the mobile screen cool my hot reloading finally did the job okay so i have my data and now let's put some sexy tailwind go to spare and dip which is my index page go to parent div add some padding margin flex whatever we can class name first of all make this flakes i want the direction columns of flex column padding horizontal six units so ps6 not psp x6 and pt1 padding at top and then go to this h5 at class name add margin y three margin at top three unit font medium and i think this is all for this h5 go to this div at class name padding at all side four unit and by the way guys all the codes will be available in the description box if anything goes wrong in your code especially in the television css you can just check that out margin at top 5 unit i love tailwind by the way that's our background color bg gray 400 cool save this go to the inner div add some class name class name and this div which is this inner div which contains all our services i'll make this a grid so for that use grid a class name grid and from the medium screen it will be two columns grid so medium or large make this large it will be better so lg colon grid columns two so one row will contain two service component and just add gap around six unit so gap between the elements nice i have some gap in between the elements and now i wrap the service card with a div i know it does not make any sense but to apply framer motion animation on the service card you need to apply the female motion properties on html element so as i am going to animate the service card which is a react component i can't just use this framer motion animation on the service card i'll talk about this more in the framer motion part but for now just wrap this with a div div cool my vs code my vs code is damn slow cool and now add some class name on on this div class name okay so from the large screen it will take one column so column span one span one pg gray 200 border rounded surrounded lg or md whatever you prefer i'll go for lg save this nice and now look at this this right padding and the left padding it looks ugly so just remove this padding and to remove this padding we just need to use negative margin we have used this technique before so just go to this div which div this one is bg grape 400 add some inline style style to curly brace and margin left a negative 1.5 ram 1.5 frame copy this now let's apply this for the margin right margin right cool save this nice target this h6 what i offer at class name margin y three unit font bold voltage better increase the text size so text excel save this only thing i hate about this next days is this hot loading time it takes around 10 or 15 seconds to reload the page okay so what i offer just use some later spacing so for that i can use the class tracking tracking wide or wider go for wide cool so i guess i'm done with this page and now let's go to this component which is the service card so control and click which is a nice trick to go to the service card component okay so service card i'm here so target this div the parent div at class name definitely i need to add some padding so p2 make this flex container so add text item center of course and add space in between the elements so space x 4 cool target this icon i just need to increase the size class name uh save this with around 12 height also 12 and just change the text color so text green text color means the icons color because this is after all the svg icon so text green my cute green nice save this and then go to this div i don't need to apply anything here go to this h4 and add class name bold font bold font bold save this nice and now notice that this about this about i need to show this as pure html because now this is showing this b tag which is which should be bold so for that i can use dangerously set in our html and this is an extra layer to save you from xss attack if you want to know more about xss attack i'll put a link in the description box so you can just check that out okay so to use that go to sp tag and you need to pass a property which is dangerously set in your html yup and here you need to pass an object so for that let's create a function which will return the object much cleaner code that will be so const name this create markup create markup there is a nice snippet for the arrow function i just need to use that look at this this is nine zero wow so just return an object with the key html and the value is about and this about is stored in my prop so i can definitely use that and then use this create markup function inside this dangerously set in html call this remove this about and the p tag make the self closing we'll save this and here it is it's in bold cool go for the large screen it should show two service in a row yup we are almost done with the design the last thing i want is to give this div a flex group properties so that it grows to the full height and remove this white background because right now this is looking ugly so for that let's go to index.tsx and target this div use bg gray 400 and add flex grow clicks grow and also go to the parent div which is this the ultimate parent i should say also at flex grow save this nice and now to get this rounded border at the bottom just go to the app underscore app.tsx you need to use overflow hidden underscore app.tsx okay go to this div which wraps our component and just use overflow hidden let's see yep beautiful so that's it for this video if anything i need to refactor i'll do that in the last video of this series so yeah that's it in the next video we are gonna design this resume page this resume page let it revealed is my page okay so bye see you in the next video hey guys welcome back i'm smith from back bench code so in the last section we have finished this about page in this section we are gonna create this resume page click on this resume i have this blank page i'm gonna convert this to this one this is my final product let's plan the layout so i have this two main section one is this education and experience at the top and then at the bottom i have this language and tools so basically i can make a grid for this top section and then also apply the same grid for this bottom section and then i can create an array just like the services array and then just map over this entire component nice we can do that so let's go back to the code editor so let's start with creating the interface for this bar what i mean by bar is the skill bar so name of the skill the level of the skill and this icon so let's do that let's create the interface first so for that i'll go to types.ts so export interface name of the interface is iskin okay so every skill should have a name a label and an icon name which should be string the type should be string and then label you can make this number but i'll go for string it'll be easier to apply the css okay we'll see later and then an icon icon the type is icon type save this and let's create the array for that we need to go to data.ts data.ts okay just close this one let's create this new array so i'll be creating two arrays one for this languages and one for this tools just like this one one for this languages and frameworks and one for these tools so let's do this export const the name of the array is languages the type of diary is should be auto is let's see nope let's try again look at this is imported so this will be an area of i skill and then create the array okay so let's create an object name is python python and then label let's say i know python 70 percent or just put 70 and then an icon i will go for the same icon which is this white circle you can go for the different icons whatever you prefer but i will recommend you to go for this one icon so the icon name is bs circle field let's see my auto import should do my job nope let's import this so import bs whatever from react icons slash bs and the icon name is bs circle feel cool so that's my one object that's my one skill and now i'm gonna copy an array so let's copy that here it is put a comma and paste this cool i just need to change this to percentage let me quickly change this to percentage and 80 percent cool cool so look at this this is the same shape every object has an icon name and label and let me just create a separate array for the tools just like this one copy this paste this code look at this this is the identical area just like these languages i've also exported this and it has an icon name and label icon is the same icon be a circle field and everything is same and by the way guys if you want to use this data i'll put this data.ts in the description box along with the full source code so if anything goes wrong in your code you can just check that out okay so i have the array right now let's render this so just go to resume.tsx yes this is my resume.tsx oh i need to save the data.ts oh save this simply save this go to regimen.ts cool so remove this resume page i need to create a grid let's make this side by side cool okay so at the top i'll put my education and experience education and experience comment this out and then the languages and tools cold so let's create a grid for this education and experience so div with a class name grid and from the medium screen put grid columns 2 so grid columns 2 and just put a gap in between the grid so gap 6 oops tab that's it i might be ready inside this grid put a div for the education so div h5 the text is education cool under this h5 i'll put a div which will hold the details about my education under this div i'll put h5 and the text is my college name which is academic technology or you know what i should put my degree first so this is computer science engineering computer cool and after this h5 i'll put a p which will hold my college name so academy of technology 2 2021 cool and then put another p which will hold a little bit more details about my education let me just copy this out ah i am currently passing my btech grid blah blah blah cool okay so i have this education part here let's put some style so let's target this h5 and put class name my three so margin at top and bottom three unit text to excel in increase the text size and give some font weights of one bold that's it for this one go to the second h5 and put class name my two margin at top and bottom text excel and font bold oh i can type bold okay then target this paragraph just some vanilla css that's the beauty of tailwind font semibold cool target the second paragraph and add class name what margin y3 that's it save this go for the large screen nice and let me just copy this div again for the experience so from this div to this end div and put it again this is inside a grid so just change the text okay so i've changed the text and now i should see my second div here nice i just need to give some padding on this parent div go to the parent div i'm not talking about the grid the ultimate parent is dp4 just give px6 and py2 and i've also noticed that i need to change the text color for the whole document so just go to global.css for a second damn slow global.css and target this body and change the color to [Music] three five 35435 save this it should be better okay coming back to regiment.tsx close these files okay cool let's close this div i'm done with this education and experience and then for these languages and tools i need to create another grid similar grid of course so div the class name grid gap of 6 from medium screen it will have a grid of columns 2 nice press tab my image should fire cool let's put a div for these languages and then i'll put a d for the tools so div under this div i'll put h5 with some class names so mi3 my image is in action text to excel font bold that's it the text is languages and frameworks nice and then after this h5 i'll put a div which will hold my bars and this deep with a class name my two cool and here i need to show my bars so i need to import my data which data languages and tools so let's see my auto imports should do my job inside currently based languages yup languages should be imported from data yup so if your input does not work just manually import this so languages.map get every element as lang or languages or language why not language and then render a component let's say bar bar let me just increase the font size cool so bar and i'll put the language as data so data the property name which is language the whole object and the key which should be unique in this case this is language dot name cool and now let's create this bar component so just go to this components folder create a component name bud.tsx cool rafc which will give me my dummy component my boilerplate okay so let's add typescript so bar should written functional component but functional component should be imported from react let's see you have function component and then inside the generic let's define the types of the properties i am getting only one property which is data and this data has a type which is i skill should be imported from interface yep imported and now let's restructure this so from data this structure one level more press control and space i need all of this icon comma label command name cool for now just show the name nice oh not like this in a curly brace that's it let's import this go to resume.tsx bar control and space my auto import should do my job again beautiful nope not beautiful and now yeah cool so that's it for this languages section let me just copy this div and put it again for the tools cool just need to change the text to tools and softwares this video is all about normal react and television css that's it so just replace these languages to tools should be imported we have imported and then this is language just change this to tool which is not needed but again just for a better code readability tool to tool tool and it is also tool i could have used multi cursor but it's okay fine tool dot name let's see nice i have this beautiful grid and let's design this bar so let's make this side by cool just go to bird.tsx okay cool let's now see how to design this go to his final product it's a little tricky okay look at this i have these two div one is this background and one shows this label and under the second div i have this icon and the name so let's do that just remove this name [Music] and put another div with a class name px4 and py1 padding on top and bottom this db is for the label so just add flakes make this flex container item center so my icon and the text will been centered vertically it should be rounded so rounded full which is just border it is 50 and then just add background gradient so bg gradient 2r and the color is from green to blue from my cute grain and again guys if anything goes wrong in your tailwind css you can just check that out two what blue 400 or 600 go for the 600 and press tab uh-huh just decrease the font size cool and then under this div i need to show my icon and the name my skill name so under this div let's put the icon just add a class name margin r3 i could have used space x3 but that's okay and then my name inside a curly brace oh cool save this let's see i have not designed my background dv yet but let's see go to his localhost 3000 aha we are getting the design let's go to this parent div which is my background div and add class name first of all text white and then margin y2 and of course the bg grey 300 and rounded full save this oh ho look at this and now i just need to adjust the width for that i'll be using an inline css so target this inner div and put style style this is really simple i just need to vary this width so it which is label save this i should see aha beautiful is it end i don't know let's see and guys if i need to refactor anything i'll do that in the last video of this project yeah it looks nice let's go to this final product oh in dark mode this is just just beautiful so you know what in the next video i'm gonna do a dark mode okay so that's it for this video and guys please hit the like button please that's the only source of motivation so see you in the next video bye hey guys welcome back i'm smith from back bench code so in the last video we have created this resume section this nice resume section and in this video we are gonna add the dark mode so that you can toggle this between light ui and dark ui and by the way guys this is my final product and this is my ongoing project so whenever i click on this button this change theme it should be toggled to dark mode it's pretty simple using television css we are going to follow the proper documentation so just go to this url just tell you in css.com dark mode i'll put the link in the description box so just follow the recommendation guys so it is written here tell you it includes a dark variant that lets you style your site differently when the dark mode is enabled and you can use this dark mode using this dark color and then whatever color you want like this bg gray 800 will be only applied when the dark mode is activated cool that's fair enough and then it says that the dark mode variant is not enabled in telugu by default so you need to enable this and how can you enable that you just need to go to this television.config.js file and then set the direct mode value to media and another option is available which is called class okay so let's go to this television.config.js file clicking.config.js file here it is and look at this the dark mode is false you can set this either media or class now when to use media and when to use class that's it okay so it says the media strategy uses the preferred color scheme here it is so it means whenever the dive mode is enabled on the user's operating system in that case this dark mode this dark classes look at this is dark hover bg white dark bg gray whatever this is after the dark the colors will be overwritten by this dark mode so it is kind of an automatic process but we want to change this manually we want to change this using a button so for that we can use the class strategy how let's see here it is toggling dark mode manually so it says if you want to support toggling dark mode manually instead of relying on the operating system preference just use class strategy instead of media strategy okay we want that so let's use class just remove this false inside a code class that's it save this okay so now we need to somehow inject this class in our html tree so let's put this in our html root so just go to this document.tsx this underscore document.tsx where it is yeah inside this pages folder underscore document.tsx just target this html and put the class dark that's it and now i can use the dark variant so let's test this so just go to the underscore app.tsx and change the background color of the sidebar so this is my sidebar div apparently okay so currently the background color is bg white let me just increase the font size after miss that okay so bg white let's use the dark variant see if the dark mode is in a build i mean if the dark class is enabled in that case i'll make this bg black yep save this let's see i should see my sideburn with a black background oh here it is okay now we just need to toggle this dark ui and the light ui using this change steam button we can do that the idea is very simple we just need to alternately add and remove the direct class from the estimatory that's what we need to do okay and look at this here is a code snippet provided by tailwind so basically it is saying that you can store your current theme in your local storage and whenever the page is loaded based on your current theme you can add this direct class in your document element or just remove this dark class but this is so messy we can do this in a better way so for that we need to install a package which is called next theme dark mode is activated let me just remove that cool so here is the package called next themes and let's see how it works okay so we just need to wrap our whole app using this theme provider so it is based on a context and then it provides a hook let's see here it is the use theme so this use theme returns theme and the set theme theme is the current theme and the setting is the setter function using the setting you can set the theme very simple using the set team you can send the team wow i love react hooks okay here's an example set team light theme so basically it injects a light and a direct class in your html tree that's what it does very simple to use and you can also pass this attribute okay let's do that so just install this next theme go to your terminal and by the way i have configured this g-cell i had to format my computer because the hard disk was corrupted but my computer is still slow okay let me just zoom out cool my package is installed nice so just go inside this underscore app.tsx i'm on underscribe.tsx and just import the theme provider so import from next themes cool import the team provider nice and just wrap this full app so just close this div wrap the full leave theme provided theme provider cool and just pass the attribute class that's it nice and just wrap the div beautiful save this nice and just go to this underscore document.tsx we don't need this class dark anymore remove this school and now we just need to use the use theme hook to get the current class so for that i will go to the sidebar.tsx here is our button to toggle this between light ui and dark ui this way it is this change theme actually make this toggle theme what is this change thing your professional bro toggle team let's go to the top now close this whole div called to import from next theme themes not theme use theme cool and inside the sidebar const there's this structure something i don't know what to do structure okay use theme cool let's see what it provides control and space okay we have the theme and then we have the set theme also that's it save this and let's create a function to toggle this so const change mode or change theme change theme an arrow function it will just set the theme using the setting function so it will just check if the theme is light in that case it will make this dark else it will make this light so on the first occurrence it will be undefined in that case it will set to dark and then it will set the light and now we just need to trigger this function whenever the button is clicked change steam go to this button add an on click handler on this button on click oh the name of the function is change theme that's it save this let's see let's see let's see let's see it should work go to this localhost 3000 refresh the page yeah here it is my live theme because the class is undefined and then click on this toggle theme here it is hey look at this i can toggle this between the rq and light ui and now let's quickly change the colors so for that i am going to add some colors in our tellurium.config file so inside our colors block let's add something called black or dark dark let me quickly define those colors and by the way guys i'll put the source code in the description box so you can just check that out so at default this is 0 1 0 1 0 1 let me just copy that copy that copy that copy that 2 0 2 1 two five that's it just save this and now just change the colors let's start with the background so for that just go to his document.tsx document.tsx cool okay so for the dark mode it will be still a gradient color but i'll change the colors value so dark color from dark 500 and again dark to dark 700 save this and let's just quickly check this out refresh the page click on this toggle theme nice let's do the other stuffs so the dark text color quite cool and now just go to this underscore app.tsx go to a div and this is not dark bg black it is dark bg dark 500 it might be boring to add those colors so let me just go a little faster just go to snap bar i don't need to do anything never nice and just go to this components folder go to tsx this is bg grade 300 right so just go to this television config.js we don't have anything called 300 so let's quickly add the 300 that 300 is same as the 200 i don't want to mess with the colors now so just leave that like that okay go to the sidebar so wherever this is bg gray just make this dark i mean for the dark mode this is bg dark 200 cool so grade 200 to dark 200 let's copy this and for the 300 you just make this dark 300 what was the 300 oh it was on the bar oh sorry anyway let's copy that put it here pg block bg block that is fine the buttons color is fine save this just go to bar tsx here it is let's make this bg gray sorry bg dark 300 a lot of grey lot of darks uh save this cool yeah seriously cool and now just go to the service card let's see what i need to change here i don't need to change anything beautiful just go to this project section or not projects resume section basement.tsx i need to do here nope anyway save this and just go to the index page index.tsx anything i need to change here i got a bg grip 400 so just copy this i don't need to copy that as the dark mode and for dark mode this is bg dark for 100 it's fine save this and this again bg grade 200 here it is just copy this set attack variant this is bg grey not grey sorry dark 200 save this i think it is okay fine let's see toggle theme toggle theme so this is my direct mode just click on this about this blue color i need to change that but i'll do that later now one important thing this dark mode by default is only applied for the colors so if you want to control other css properties like box shadows using the diagonal class in that case you need to enable that property so for that let's see the documentation here it is enabling other utilities look at this you need to extend that property and add this dark variant let's do that so here in this case we want to vary the box shadow for the data queue and the light ui so just go to stelwin.config.js telling.config.js okay so here is my variant we need to extend that so box shadow colon and then inside an array the variance you want to be activated this is dark cool and now let's define some box shadows so let's go inside this theme and define the box arrow so some custom box arrows i want to add let's say custom light the name of the box arrow let me quickly add some box arrow zero zero ten pixel the value is three one three one three one and for the light this is custom light oh sorry custom dark for the dark i'll be using two type of box arrow so 5 pixel 5 pixel 10 pixel okay so here it is just save this what is wrong here oh i need to put a comma save this code so i have my box shadows and let's add the box shadows so for that just go to this underscore tsx and just go to wrapper of the sidebar cool that's at the box side which is shadow shadow custom light and for the dark version i mean for the one if the dark variant is activated i should say the custom shadow custom dark uh huh here it is let's copy this shadow custom light and zero custom dark and also apply this for the second div save this let's see i should see a better ui aha i have my box shadow click on this toggle theme i don't have my box set i think no i don't have my box set why because for the dark variant this is shadow custom dark uh-huh interesting this shadow custom drag just go to this let's go to stallion.config.js oh it is 10 pixel save this yeah so i had a typo it should be 10 pixel not negative 10 pixel cool so that's it for this video i need to change the colors but you should show some creativity to come up with some great colors you can watch the dribble awards for the dark you are inspiration but i surely need to change that okay so that's it for this video and by the way guys thank you to all my 500 subscribers thank you for supporting this channel i have a dream to make this channel much much bigger so please keep supporting see you in the next video bye hey guys welcome back i am sneak from back bench code so in the last section we have added a dark mode in our app and in this section we are going to create this project page this nice projects page here it is i am not gonna add the animation in this section because it's a part of female motion and i'll make a separate video on framer motion so let's see what we have in this project page okay so at the top i have this snap bar using that i can filter out the projects for example these are all the projects and if i click on react these are all the projects made using react and then if i click on these are all the projects made using mongodb and then express and django okay so one project can belong to multiple categories what i mean by that is just look at this twitter clone this twitter clone made using react and the backend is made using django mongodjango nice and then if i click on a project these are all the details about the project so the project's image the github link the deployed version link the title of the project some description about the project and then these are all the tech tags take tags tech tag means what are the other popular libraries used in this project or or some key points like rest api authentication and all these stuffs you get the idea let me show you another project let's go to all is all my projects so click on this algorithm visualizer look at this this is react firebase and framework motion and then anything else okay let's talk about the layout at the top i can create this snapbar easily easily not easily but we can create that and then i have this project section it is scrollable it means it has a fixed height so the approach will be again same will be creating an array of objects and then we'll just map over this and render separate component so that's the idea let's go back to the code editor okay so first of all let's create the interface right so let's just go to types.ts nice and create the interface first export interface let's name this i project every project has a name which is a string it has a description which is also string it will have an image so image path or image url image path which will be a string and then deploy url url which will also be a string let's copy this this is github url and then the category and by category i mean the navbar so this react whatever mango express django mongodjango so this will be a string cool and then the key take key technologies i don't know if it is a good name or not so by key tech i mean this one so we click on i'll go visualize this react firebase framer motion some additional technologies okay oh this category will be an area of string because one project may belong to multiple category and key tag will also be a string save this cool and now we can make a beta type for this category instead of the string because this will be also used for the filtering part so if i click on express this will also use for the filtering part so this is a sensitive data we don't want any typo here so for that we can create our own type which will only hold a category so let's create our own type export type is the keyword and the name of the type is category cool so it will be either react or node or express or i don't know django anything else django mango and that's it for now and then i replace the string with this category cool save this so now if i put something else in this category field like instead of react if i put react.js typescript will say hey you can't use that okay that is cool my interface is ready and now just go to data.ts and let's create a data i'll be creating one object and then i'll just copy and paste cool so just export this out the name of the data is projects the name of the add-in or name of the data okay it will be an array and the type of the array will be i project so be auto imported let's see my auto import has done the job fly projects is imported from dot slash types that is cool thanks to my input so it's an object press ctrl space and look at this i can put a name the name is whatever some random hey you know what let me just copy the data the raw data so here is my one project my one object okay so every project has a name some description blah blah blah and then this image path this image is coming from the slash imageslashcopy.jpg i have not created this images folder yet i'll be creating this folder inside this public folder because remember i told you all the files inside this public folder will be hosted as static so what i mean by static is look at this versal.svg if i just go to the url so my host 3000 and just go to verizon.svg i should see the svg here it is so i want all my images to be static so for that i'll be creating a folder inside this public you can just put all the images inside this public folder but i want this to be organized so for that let's create a folder called images i'll put all the images here but for now just continue okay so then after this image but i have this deployed url which is just a normal url and then this gita rewarded which is again a normal url and then this category so this is an array which has react so if i just put you know node.js look at this typescript is showing an error it says hey node.js is not assignable to type category so you can't just use node.js you can use node in fact if you just press ctrl and space you can see all the options django express node react cool so this project is made only using react because this is only front end project and then i have the key text so react charges material ui all the other technologies so just save this this is my one object it means this is my one project and let me just copy all the other objects okay so here it is my other projects and by the way guys if you want to use this data i'll put this data in the description box in fact i'll put all the source code in the description box so you can just use that and i'll also put the images so if you want to use the images you can definitely use that cool so this is again the same data look at this i have the name image path deployed url github url category description key tech okay so just save this and let's just put the images drag all to this images folder cool and by the way guys make sure your image name is correct look at this this is dev dot jpg and dev dot jpg here it is my dev dot jpg so let's close this our data is ready just save the file close the file process type.ts go to projects.ts inside this pages folder have this projects.tsx not tas come on okay so let's design the layout remove these projects cool so at the top i'll put an app but right so nab navbar i'll add the functionalities later and then i'll have a div which will hold all my projects so instead of brace just grab our projects data should we auto import it oh this will not work that is because the component has the same name so just change this to capital projects also change this default to capital projects cool and now just try to auto import this could be auto imported from data it is cool so just map over this i'll get fd project as project and then inside a div oh my hand i'll show our project card and again i'm wrapping this with a dip that is because i need to use my primer motion animation project card cool so let's create this component go to components folder create a new file project card dot tsx ra fce cool let's use the type for the type script so this project is a functional component should be auto imported yup let's use the generic inside this generic i can define my type so i'll get the property project which is an object and the interface of this object is i project auto imported cool okay so just save this and let's just restructure oops okay so from the projects not projects project just get the name actually i need all of this image path confirm space category comma configuration space deployed url comma control and space description control and space control and space control and space hit x save this cool and now just go to projects.tsx import this control and space got imported cool let's pass the data that's why it is showing red pause the project as project cool save this i also need to pass the key the unique what is the unique value this is project.name name is the unique okay so let's save this i need to create a grid on this div so just use class name of course grid the grid will be 12 columns grid so great columns oh my shortcut is not working 12 a gap of 4 and margin at top and bottom 3 and then just come to this div this inactive and just define how many columns a single dip should take so for the mobile screen which is normally the extra small screen it will take all the 12 columns so column span 12 and then from the smaller screen the breakpoint asm [Music] evd will take six columns cool and then from the large screen say algebraic point every day will take four column so column span four cool just add a padding p2 at all sides save this nice let's go to project card and let's just show the name for now name and let's see what we have oh here it is i have my grid so one row is showing three columns from the large screen just go to this mobile screen the extra small responsive click on moto g4 aha good every door is showing a single column cool a single column in single project okay so let's add the data in our project component but before that let's say you can see the layout because this is slightly complicated okay so this is my single project card and if i click on this here is some other details right so this is again a div and it will be only shown if i click on this so i can create a state and if the state is true i'll show this div and then inside that parent div i'll have the smaller divs div image button paragraph whatever you want to create okay so let's do that just go to this project card remove this name okay so first create this one first this image and this paragraph paragraph or span whatever so image and by the way guys i'll be using the next image component in the next section let's just go step by step okay so the source is image path image path is image name oh sorry not image name project name i guess only name bro and the class name is what cursor pointer my ps4 is again very slow cool and then after that i'll have a paragraph which will show the name of the project name my icon type name code save this just add some class on this paragraph my two text center normal css cool and then i'll create the second div the second div is this one if i click on this this is the second div the whole div let's create this one so this div will also be a grid so div dot grid i'm just using m8 image syntax and from the medium screen it will be a grid of columns grid columns 2 save this okay so inside this let's create that left section inside this left section i'll have the image just copy this image oh see cool i don't need this cursor pointer here cool and then inside div i'll put the github link and the deploy link then anchor tag the http is github url cool i need to use an icon so the icon is ai fill github let's see my auto imports should do my job wow yeah it is auto imported i can see that yes look at this eifil github is imported from react icon slash ai cool and then after that just spam spam github tap this just copy this one again the second one is this deployed url the icon is ai fill project auto imported cool and the text is project nice save this as my left section is ready let's close this cool go for the right section content is the hardest part of web development okay so for the right side let's create another div and this will hold my project name page to name my description h3 description and then all the key takes right so look at this key takes so this key text this is an array so i just need to map what this and render this key take key take the key text dot map get every data as tick and just enter a span of my image is not working again cool inside this pan the value is tick cool just use the key key is what you can use the index if your list is not getting modified you can use the index as the key but i can just use the take as a key cool save this that's it for the second div just close this and then after the second div i create an icon to close this div this icon look at this this cross icon so this is a button button i'll be using an icon so md close come on out import good job the size is 30. so let's see our layout go to local 3000 refresh okay so now basically i need to hide the second div and i'll be only showing this if i click on this image or the project if i click on this project i'll show the second div for that let's create a state so you state new state the state is so detailed the name of the state the setter is set so detail use test should be imported nice and initial state this is false cool save this nice and then let's show the second dip conditionally so if the slow detail is true i'll show the second dip so just wrap the second dip with this condition put this end brace here is it okay nope here cool save this nice so if i click on this image this first image so just use an on click so on click i set the so detail to true cool and just copy this on click and then just go to this button this button is inside this div by the way inside the second div okay if i click on this button i'll make this false okay let's test this go to local 3000 nice so secondary is hidden if i click on this image i have my secondary which is the details if i click on this icon the close icon nice this is closed aha test this cool click on this dev talks beautiful and now i need to show the second div above this image component look at this so obviously this is the position of absolute so let's do that go to second div and set the class name absolute this is from top 0 and left 0 set the g index to 10 20 999 99999 set the height to auto and the width to full means with 100 and just add a gap of x 12 so the gap between the grids cool save this and as this is absolute i need to make the parent relative disparate no not this parent let's go to his project dot tsx and center apart div the dip which holds all our projects component and set this dip to relative cool save this and now let's see uh-huh close this nice click on this beautiful this is not looking good because i have not used any background color let's use the background color go to the project card go to the second div so text is black the background color is bg gray 100 cool and for the dark variant the text color is white of course and the background color is bg gray sorry bg dark 100 save this and let's see click on this project nice and by the way guys i have told you that i need to change this blue color because this blue color is looking odd and the reason is i made a typo so just go to stallion.config.js and then just go to dark this is 0a0b0e save this cool nice so that's all the hard part is done of this layout now i can use some you know basic css so let's go to this process card project card not projects card i can see the button so let's design this add class name this is absolute from top three and write three cool this is rounded so rounded full without padding at all side one unit remove the outline on focus so focus outline none tap this so the background color is bg gray 200 and for the dark variant this is bg ops dark 200 save this just open this div the first div which holds our links let's quickly design this div class name clicks justify center margin on top and bottom four space between the items around three unit cool target this anchor tag actually target both the anchor tag because this has the same styles okay so class name flicks item center horizontally centered px4 unit padding at top and bottom around 2 unit space between the items around 3 unit increase the font size so takes large and the background color so bg gray 200 just be consistent for the dark variant this is bg dark 200 again done with this div close this open the second div okay name description and key tech let's just see how it is looking nice yeah quite cool i need to add some padding at the parent div i'll do that later just target this name [Music] class name margin and bottom three unit text extra large font weight medium because this is the name it we need to give some weight okay from the medium screen i want the text to be excel so i do excel target this description there is three tag class name mp3 unit font weight medium cool target the div which holds our key takes class name flex flex wrap so that it creates a new row and then margin at top 5 unit space x around 2 unit take size small and add some data spacing so dragging wider cool and then target the span add class name and by the way guys if it seems boring that yellow in css part you will get the source code in the description box you can just copy the styles okay start padding x to unit padding y one unit margin y one unit bg gray two hundred save this uh-huh looks better since the background color for the dark variant this is bg dark 200 and just make this round it not fully rounded but rounded small keep this uh-huh cool let's add some padding at the parent div it's preventive at padding two unit at all side cool nice and now just go to its project.tsx and target this div the single div and add some background color so bg grade 200 i don't want to skip this ui designing part guys because this is one of the most important part of this project so i just don't want to skip that okay so for the dark variant this is bg dark 200 and just give it a rounded border and i love tailwind save this let's see uh i need to give some space right and left okay we'll fix that and let's add some padding at this parent div so for that just go to this projects.tsx and just target this parent div parent a grandfather div tag with this class name this is px5 and py2 so padding at top and bottom to unit i want to give this a fixed height so just use inline css style height around 65 viewport height you can experiment with your layout and give this a good height and i want this overflow white scroll to overflow cool save this should look better nice click on this copy trigger yeah it looks nice now i need to design this number this cute number i will cover this never in a separate section because there are some functionalities i need to add on this number okay so that's it see you in the next video bye hey guys welcome back i'm from backbench korea so in the last video we have created this project page the only part is left is this project snapbar in this section we are going to create this project number so let me just go to the final version there it is so this is my project number it looks simple but i need to add some functionalities here so let's start by creating the ui so just go to the component the projects component project.tsx here is my nav bar but i am going to create a separate component for this project number so just go to components folder and create project number the name of the component the tsx cool refc there it is nice and it will return all the nav items but i am also going to create a separate component for this nav item because i need to add some functionalities on this nav item here this react express django separate nav item so let's create separate component i'll be creating that component inside this file let's name this nav item to underscore rfc again rfc only okay projects this is what uh-huh nav item let me just zoom in cool close the sidebar nice so it will just return a list item not deep least cool it will also get the value as the property so just use typescript so this snapbar is a functional component at this point you are familiar with this okay just use generic inside an object just you know define the property define the type of the property not property so value string but no it's not string it will be actually a category because we have also defined the type category remember just go to types.ts are all the separate category react node express django right so we are going to specify the type as the category so this is not string this is category cool let me just import this but input did not work cool but remember we are also using this all as the nav item is all and this all is not defined inside this category type inside this category type right so we need to use or it can be all so small all and then just grab this value and just destructure this cool and just return this value inside this list item could save this and now we can use this component since this project number inside the div i can pass nav item aha nav item command is sudo let's pass the value our first one is all now look at this if i just misspell this like a triple l it will give me an error like a triple l is not assignable to type react node express django all so that's the beauty of typescript okay fine let's copy this copy this copy just copy just copy this just change this to react and this is then this is django anything else node i remove this all cool save this nice so just go to project.tsx and import this project snapbar remove this nav we don't need that [Music] save this let's see go to local 3000 and here is my navbar or react mongodjango node let's add some sexy tailwind go to this project snapper or is deep the wrapper div add class name first of all i'll make this flex give some space between the items so space x around 3 unit padding x three unit padding y two unit and list decoration none so list none nice and controlled overflows overflow x scroll cool it's flex actually cool save this and now just go to our nav item target this list at class name cursor pointer of course and on hover i'll make the text green so hover text green cool and i'll also make the first letter capitalize so for that i'll be using the class name capitalize cool save this let's see here it is oh i don't want the scroll bar ah [Music] this is workflow x oh it should be auto make this scrollable only if it's needed okay save this and now it should look beautiful now on how about the text is green and my scroll bar is gone nice and let's talk about the functionalities okay so the idea is we need to create a state in our projects component that will hold all our projects and then if i click on any of these items for example react it will just filter out all the projects made using react and then reset the state and if i click all the state will be reset with all the projects simple let's do that let's create a state go to projects.tsx or parent component uh-huh use it up the name of the state is what projects and this is set projects called import dive date and the initial state this will be an array and the array is this projects the data you have imported because by default this will be all and all will contain all the projects and this is showing red that is because this has the same name so i just need to rename this so here is a trick in vs code just use fn and f2 and rename this so project data and replace this project with this project data cool save this and then we are also mapping over this projects which is our state so we don't need to change that cool so created our first date and let's create the handler so const handle filter category the name of the function arrow function cool so i'll trigger this function every time a nav item is clicked so if i click react i'll pass the react if i click i'll pass the if i click all i'll pass the all right so let's handle this so the data is coming as category the type is not string but category or all it can be all category i need to import that so control and space imported and by the way guys notice that inside this project number i've also imported this category so it's simple but yeah just import that cool okay so if this is all if the category is all in that case i need to handle this in a different way so basically if this is all i set the projects with the project's data again and i'll also make the active item as all so for that i also need to create another state so this is a new state the name of the state is active which will hold our active item so this is all cool save this save the category is all i'll make the set active item as all again or set active not active item all ops sorry or just category whatever you want you can make this all you can make this category and then just return cool else if this is not all in that case i'll grab this project's data and just filter out all the projects so grab every project and check if the project dot category the category field if the category field includes indeed i don't want any hint if the category includes the category the category coming as the argument has written that project to save this so basically inside this category field let me just go to data.ts if you press react it will just grab all these projects go over every project and check this category field if this category field includes the react it will store that and at the end it will return the new array so i just need to grab this array go to project.tsx okay grab this let's name this new array because we can't directly mutate the state so set the projects with this new array new air cooled also make the seat active with the category nice and now i just need to pass this handle filter category function to the navbar so here is my number here it is and repeater category is handled reader category it is showing red because i need to accept this property just go to project snapbar actually i need to pass this prop to this nav item right so just grab this as props and we can just follow this props select every nav item and just follow the props so inside the brace dot dot dot props nice and then inside this nav item you can just grab this value so the property name is handle filter category which is a function cool let's structure this handle filter category nice and trigger this function if this list item is clicked so on click a nice arrow function handle filter category cool and just pass the value nice really nice save this this is showing and warning and if you want to get rid of this warning you can again use some typescript so function component inside this generic you can just use you know handle filter category is a function that's it save this the warning is gone that's it should work nice okay so you don't have any style for the active item but let's try to click on react oh it works so these are all the projects made using react click on this is only project made using mongodb and here is the django and here is my node nice okay now let's handle this active item if the item is active in that case i need to show the active item in green color just go to nav item here is my nav item here is my nav item actually you can use the conditional class inside this class name but but it will be messy so what i'm gonna do i'm gonna cut this class name and at the top i'm gonna create a new variable name this not bar let class name and paste this here nice and if the active item is same as this value i'm gonna add a new class so for that i need to get access to the active state and how can i get access to the active state i need to pass the state i want it simple property drilling in sort so here is my active item right yeah so i'm gonna pass this active that's my number here it is active is active cool uh yeah this is showing red because i need to accept this property go to project snapbar um here i'm getting all the props that is fine but inside this generic let's get the active and this is string you can make this category but that is fine okay and you are just forwarding this and grab this category here get over here string cool the structure the active notch active active bro cool and now i can compare this so if the active is same as value in that case the class name is class name class equal to that's my tab nine eibs auto completion text screen remember to put a space before this text screen here is this space because these are gonna concatenate right and now just pass this class name here inside this brace pass the class name nice and here is my all which is active go to react react is active go to node node is active again click on all the states should be reset here it is so with this i think i am done with the projects page i need to refactor the style i guess yes but we are going to do that in the last part of this project so hold on we are not finished here with the tailwind css and i also need to change the square verse color that is not a big deal you can just use scroll bar thumb and just change the color so that's it see you in the next video bye hey guys welcome back i'm swift from backbench kodai so in this video we are going to talk about one of the coolest features of next chess which is next year's image component so basically we are going to replace all these images using the next image component so for that let me just go to next image documentation here it is this next image component is nothing but a wrapper of the normal html image stack but the wrapper does a lot of cool stuffs but hey wait why do you need the next image component what's the problem with the normal html image tag well to answer that first i'll show you a lighthouse comparison between two websites one is using the next image component and the other one is using the normal html image stack to render the images so let me just open the incognito mode for some good stuffs so first i'll open my ongoing project which is running on local 3000 and this is also the production build guys look at this this is run using the npm run start and i've also built a project using npm run build and the second one is my final project which is this url just copy this go to incognito mode paste this here open the website cool so let me just go to my ongoing project which is not using the nexus image component you can also see here this is not using the nexus image component just using the normal html image tag okay so let me just go to projects tab and just open the chrome dev tools ctrl shift j it's a shortcut go to lighthouse just check the performance and the device's desktop that is fine and general report look at this the performance is 87 and where can i improve i can improve on the images look at this the opportunity properly size images so we can improve that and then the images elements do not have the explicit width and height my dog is barking okay so this one is the project which is not using the nexus image component and now just go to my final project go to the projects tab let's open the dev tools and go to lighthouse and generate report for the performance and the device is desktop okay so this website is rendering all these images using the nexus image component except this image the sidebar image this one this image is not using the nexus image component because i was lazy okay that's the only reason and now click on generate report and the performance is 100 like seriously i did not expect that i expected something like you know 97 98 but we can still improve this look at this the image elements do not have explicitly width and height and that is because i told you this image the sidebar image i am not using the next image component so that's how you can improve that okay so that's just a normal compression i wanted to show you so this is 87 versus 100 okay so that's a big reason you should use nexus image component now we are only using eight or nine images in this website but for ecommerce website there are thousands of images in a product page so you can get an idea how images affect your website right okay so now let's talk about all the features this nexus image component provides so for that i'm on this website which is using the nexus image component which has 100 performance okay so the first one is it automatically search the images in modern image format like webp which is around 30 smaller than jpeg so to show that i'll go to network click on image just refresh this now you can't see all these images because it loads the images lazily my dog is still working okay so go to responsive look at this as you scroll it will load all these images but the point is look at the type of the image this is wave p and this web is around 30 smaller than jpeg and you can also notice that the image which is not using the nexus image component has a type of jpeg so just click on this image click on the preview yeah here it is look at the type it is image slash fp okay so that's one feature of nexus image component the next one is it automatically optimize the images on demand so if you just open this website in a mobile screen let me show you just just click on this responsive drop down and click on moto g4 refresh the page and click on an image look at the width of the image this is go to header sorry go to headers and the width of the image is 1200 right and now just go to you know something like iphone ipad pro refresh the page and then click on an image look at the width of the image this is 2048 so next just automatically optimize the images based on the screen size the third feature is it lets you load the images so what i mean by that is it loads the images only when a certain threshold is released so let me show you i've already shown that by the way and look at this in this viewport i have only these images which is not using the nexus image component so let me just scroll down to let me just scroll and look at this i have these two images right so just refresh the page you can see i have only two images and as you scroll as it comes into our viewport it will load all these images cool so that's a much needed feature we want you can also vary the quality of the images so you can see that click on an image go to headers and look at this queue means quality and the default quality is 75 you can also see in your documentation here inside this documentation you can see the quality here is the quality the quality of the optimized image and integer between 100 100 is the best and the default is 75 so i am going to play with all of this but the question is how does the nexus image component optimize the images so basically behind the scene it uses the source set click on an image click on the image nice click go to elements and look at the source set it loads around eight or nine variants of the images this is the source set one two three four five six seven eight nine look at the width of the images so which one is perfect it will shift the images to the source that's it behind the scene it uses an xjs version cdn but you can definitely change the cdn you can use the cloudiness cdn or whatever cdn you want to use i love nexus by the way so enough theory now just go to practical okay so just open your code editor and go to projects card which is using the image so first i replace this image with the next image so for that we need to import an exist image component to import image from next class image cool save this that's it now just go to this image you can just keep a copy of this for the reference just let me duplicate that and comment this out cool just replace this image using the image with the capital image okay so it is source volt is all that is same because i told you that this is only a wrapper of the normal html image tag so this will just forward all these properties okay you can also set a class that is fine on click set so detail that is fine but here you need to set a width and height so it is around 300 pixel and the height is around 150 save this and just refresh the page go to local 3000 refresh the page and look at this this is using the nexus image component i can prove that go to depth tools red red red where this is red why this is red what i am using width and height just give it a refresh yeah cool go to network look at this the type of the image is fp it means it is using the nexus image component that is great now let's talk about the layout so just go to nexus image documentation here you can pass four layouts which are here it is fixed intrinsic responsive and feel by default this is intrinsic intrinsic means the image will scale the dimension down for the smaller viewports but maintain the original dimension for the larger viewport what i mean by that is look at this this is for the mobile screen right so let me just click on the responsive there it is look at the size of the image so for the larger screen it will not maintain the height and the weight but for the smaller screen it will maintain aspect ratio look at this but to solve that we can use the responsiveness so inside this layout you can pass the responsive here it is so let's pass that and pass responsive great save this i guess i am done with the incognito mode so just close this incognito mode uh glocalis 3000 now let's check the responsiveness of the image look at this it will maintain the height and the weight great now you might ask that what is the point of using the width and the height when you are using the responsive well nexus says that you need to provide that because setting the size of the image component helps nexus to determine the initial size of the internal responsive container so that's how you need to pass the width and height cool and then we can pass fix which is just fixed does not give a about the responsiveness look at this check the responsiveness look at this this is fixed it does not care and then the fourth one is we can pass fill fill now this field will maintain the size of the parent container so for this field you don't need to pass the width and the height just pass the layout as fill and this will make this image position absolute so just save this so it will take the height and the width of the relative parent and what is my relative friend for that let me just go to projects page i think inside the projects page i have id which has a relative position and here it is look at this inside this div have this class name which is relative so that image will take the height of this div okay let's see height and the width i should say look at this you can see only one image and that is because it has the absolute position and just go to the chrome dev tools click on image just see the position this is the styles look at the position this is absolute so it means if i just remove the relative from this div it will take the height of the full body where is my relative here it is remove this save this and now it should take the full screen let it load here it is this is great huh let me also show you the quality you can also vary the quality so just go to the image process cut.tsx you can pass a parameter which is quality and by default this is 75 let me just make this 100 and refresh the website and here it is look at this i just make this quality one it will be something like 144 pixels yeah look at this it is still quite good so it means for a smaller screen it will look really nice but let's go back to quality 75 or just remove this quality okay nice so what i want i want the layout responsive and the height is back to 300 now 300 150 and the width is 300 that's the perfect size for our image and now just copy this image tag and replace the second image which is here it is comment this out paste this here image path image path cursor pointer i don't need this on click i also don't need this class name [Music] uh-huh that's it save this and just go to projects.tsx and let's make this relative again refresh the website great click on image nice yeah quite good now let's replace this image the sidebar image so for that just copy the image tag go to project.ta6 i don't need to copy let's go to sidebar.tsx aha just import the image from next image so import image from next class image school make this capital image capital image okay search is same i am going to get an error for the source i want to show you that class name with 32 height 32 that is fine actually that is not fine i need to set the height and the width explicitly so the height is 128 pixel right so height is 128 pixel which is you can you don't need to pass the pixel but i want to pass that i don't know why and then the layout is in this case intrinsic is better because i don't really want this to be responsive and by default this is intrinsic so it doesn't really matter we don't hide i don't need that type this and let's see an error refresh the page here it is so the error is invalid source property it says that to enable image optimization for images hosted on an external website you need to include the domain in next config file with that file nexus will know that which domains are allowed to be optimized so in this case we need to specify the submit or nullify dot app domain so let's do it here is an example of nexus config file so just click on this link here it is so just copy this go to your root and inside your root create a new file which is called next.config.js config.js and paste this here nice so you need to include the domain for that just remove these assets assets.example.com so just put your external domains here that's it that's what you need to do so just restart the server oh this is not next this is next my bad i'm a god of typo cool i found a change in xjs.config file you need to restart the server okay no problem control c npm run df that's it refresh this nice the image is loaded this is using the quality 75 so just increase the quality go to sidebar quality 100 save this so guys that's it for this section if you have any doubt you can just put a comment that's it see you in the next video bye hey guys welcome back i'm sick from back bench code so this is the second last part of this series and in this section we are going to animate our portfolio using framer motion okay now before i explain what is framer motion and all these stuffs let me show you what we are going to make in this video okay so this is my final product and let's go to this ongoing project which is running on local 3000 so basically we don't have any animation click on this resume no animation click on the about click on the projects not at all now just go to the final product and then click on resume here it is click on projects nice tagger animation click on about and here it is again click on projects click on a project nice minimalistic but quite impressive okay so what is framer motion okay so premier machine is an open source react animation library using which you can make production ready animation you can build gesture animation variants keyframe drag motion values exit animation and much more using its simple syntax so here is a syntax this is actually a nice playground to play with the framer motion animation you can just find that in the official website okay so yeah this is quite cool it may seem a crazy syntax but believe me it is quite simple okay so here is the documentation i put the link in the description box so you can just check that out and here is the npm package so you can install that using npm iframer motion so let it install go to your code editor open your terminal actually split your terminal and npmi framework motion that's it okay so the installation is done and let's start the coding part so what we are going to animate okay so first of all we are going to animate this bar the skill bar so what is the animation what about click on resume again here it is so basically we are going to animate the width so initially the width is around 10 pixel and at the end it will take the original width that's it let's see it again go to about go to resume nice but what is the syntax how can we animate that yeah here it is let's see the syntax again okay so first of all you can see this motion dot what is this motion dot if you want to animate a html element you need to convert that element to a motion element and how can you convert this to motion element using this motion dot by using this motion dot it can access the motion api and then you can just pass the animate as the property or the best option is you can create an object and inside that object you need to create two nested objects one object contains the value about the initial state for example here is the hidden object i mean the name of the object is hidden it contains the value of the initial state which is opposite zero now let me just zoom in and then the other object will contain the value about the ending of the animation which is here in this case visible so at the end it will have opacity of one that's it that's how easy this is to animate in framer motion okay enough talk let's do it so we are going to animate the word right so just go to the bot.tsx go to your components go to bar dot tsx close the sidebar i guess i need to zoom in great okay so let's create the object first so let's name this variance and then inside that object i'll create one object for the initial state initial you can name this hidden or whatever you want so the initial state the width is around zero that's it and then create a second object let's name this animate whatever you want to name okay at the end of the animation it should take the exact width which is the bar width this variable that's it now you can also pass some transition and you need to pass the transition inside this animate property so transition which is again a separate object i missed a comma i'll set a duration of around 0.4 second that's it and now we need to pass this property so we need to animate this div and to animate we need to convert this dip to a motion div and how can we convert to motion div we need to import the motion from phenomena first of all so input motion from framer motion great and now just add motion at first motion dot deep that's it and notice that you also need to put the motion dot at the closing tag okay so save this and now we can pass the property so first of all we need to pass the variance which we have just created nice and then you need to pass another two property which is initial and animate to initial now what is the value of the initial the value of the initial is the name of this object here in this case the name of the object is initial so you need to pass the name of the object as string again i repeat you need to pass the name of the object as string so just pass the name of the object as string so initial and then the second property which is animate is again the name of the object which is animate name of the object now the object name of the object a string as string as string okay save this and that's it it should animate let's see click on resume oh it did animate but we can still improve that yeah how let's see if you just noticed animation you can see a spring effect spring effect spring yeah look at this it's kind of spring effect so you can add that effect in the transition let's see the documentation yeah got it so you can pass a type of transition here in this case this is a type of spring now some transition properties are only available for a particular transition for example the stiffness and this damping are only available for the spring so let's add the spring animation go to variants inside this transition property add a type and the type is spring oops i can type spring i'll also pass a value which is damping which is around 10 this is basically the value of the bounce and then a stiffness the stiffness of a spring which is hundred now again i repeat these properties are only available for the type of stream now there are some other types of animation available in premiere motion and all those have some specific properties which is only valid for that particular animation just some famer motion thing now let's see this again good local 3000 should refresh let's click on resume and here is the string effect nice okay so that's how it is done and now let's animate this top part let's see the animation first okay just click on about go to about again and look at the top animation this is basically sliding up with a fading effect let's see this again click on resume click on resume sliding off with a fading effect let's do it so for that we need to go to regimen.tsx we are done with this dot tsx we don't need that close this close this close this open the resume.tsx i guess the name of the page here it is use this zoom out nice okay so basically we need to animate these two separate part this diff and this div haha we can do that so let's create the variant first const variance not variate so the initial state this is what opposite is 0 and position this 2i60 unit it means 60 pixel because we want the sliding up effect and then for the animate part let's copy this object let's change the name oh i misspelled that it should be any cl not in ital any cell initial animate so opacity i want this back to 1 and y back to 0 nice so that's our variance ready and now we need to convert this div to a motion div and how can we convert that we need to input motion from framer motion motion from really easy to animate guys so let's animate this div so for that let's convert this to motion deep using motion dot and notice that at a closing tag it is also attached the motion dot and now we need to pass the variant which is this variant and then initial property which is the string the name of the object is initial which holds our initial properties of my initial and again guys by this initial i am referring to this object this initial object that's how the syntax of primary motion works so the second property is animate which is again the string which is animate that's it save this and just copy this objects and put this for the second div which is this one nice this is not valid until you convert this dip to motion deep so let's convert this motion dot beautiful let's see this go to projects and then go back to resume and here is my effect fading up fading up that's a nice name okay so now what i'm gonna do i'm going to put this object this variance object in a separate file so that we can reuse this variance just cut this from here go to your root create a separate file let's name this animation animation animations or animation animations dot ts put it here the name of the variant is something like fading off which is the effect of the animation fair enough and just export this out export const great and now just go to regimen.tsx and here you just need to import this fade in a variant so let's import that import fading up from dot dot slash animation that's it and now we just need to pass this fading up instead of this variance fair enough and the second one is fading up it should work fine let's just double check this go to projects go to resume beautiful nice next animate the service card so just go to about let's animate the service card let's see the animation again go to about you can see the animation is quite same the fading up so here's my service card.tsx now look at this you can just pass the female motion properties to this div that's perfectly valid it will animate your div but if you want to put stagger animation which is in this case we want to delete a children animation look at this go to about it has some delay for each child component so to put stagger animation you need to go to the parent div so just go to index.tsx index.tsx oh yeah yeah this is index.tsx and this is also a reason i had to wrap this using this div so that i can put the female motion property first of all you need to convert this deep to motion div which is just motion dot and my autoimport should do my job let's see at the top motion is imported from framer motion great and now we need to pass the variance so variance is what fading up again so we need to import that my autoimport should do my job creating up from animation or to import it i can see that so fading up is imported from animation and now we need to pass the other properties which is initial the name is initial again as string and then the animate which is again animate that's it we should see some animation let's see go to projects and go back to about and here it is the fading of effect but you want to delete a children for that we need to create the staggered animation so let's create a variant first again the process is same guys we need to convert the dip to mos and div here in this case we need to convert this parent dip to motion div and pass the variants very simple go to animation.ts copy an object the name of the variant is dagger cool i don't want anything at the initial nothing for the animate but we want to put the transition so transition is an object and here you just need to pass the staggered children property everything is available in the documentation guys just please look at that so style children is around 0.1 so 0.1 second delay for every child and now just go to index.tsx target the parent div which is this one pass the variance which is staggered would be auto imported and then the initial property which is initial okay and the second property is animate which is animate great and let's convert this dip to motion div beautiful and now here is the thing if you animate a child which has a stagger effect we are animating this div using the stagger effect so for that you need to remove this initial and animate for the child element now don't worry it will just take the initial and animate property from the parent that's it so it will just take the initial and animate from this tip okay so just save this and let's see uh-huh go to projects how you can already see that just again go to projects go to about nice hey guys i just faced an error regarding the framer motion which was quite unexpected so the error is something like this this is because of the latest premier motion update so if you face this error just downgrade the package for that you just need to go to a terminal and install the version 3.10.3 so npm i fema motion address 3.10.3 i've already installed that you can also see in my package.json ops well this error took around one hour of my time i'll also mention that at the starting of the video during the editing part so just chill okay now continue building animation so let me just close this go to your index.tsx and here i guess you have imported motion and then convert this dip to framer motion add stagger effect to the parent div then pass the initial property and animate property and then for the child product you convert this dip to framer motion and just pass the variance to fading up that's it save this my server is running on local 3000 just go to the locals 3000 refresh the page and here is my stagger effect cool let's go to projects and then go back to about nice okay let's do the project section so let's see what is the animation let's go to final product let's click on projects yeah it has the same animations so you can just fade in up for the child and then just wrap this with a stagger animation yeah we can do that so just go to the projects.tsx okay first i need to import the motion but my auto import can do that so this is my periodic write we need to add the stagger effect on this parent div so add motion dot deep let's try to auto input this control and space auto imported nice and then just copy all the properties from the index.tsx here this is variance initial animate copy these three go to project.tsx pass this import the stagger would be auto imported from animations nice and then for the child leave also add the motion so that it can access the motion api nice and now just pass the variance so the variance it's not staggered but fading up oh my fair enough yeah or imported or imported come on not import you can do that nice and i'll also pass the key here not inside this project's card let's cut this pass the key here again just a reaction okay nice so it should add the animation let's see nothing happened why refresh the page yeah cool again go to about go to projects nice and now just click on a project i should animate this inner project card right so just go to the final version click on a project so again it has a staggered effect with a fading up that's how easy to do animation in premiere motion you just create the variance first and then just reuse that okay so let's do that go to inner project card so for that i need to go to project card.tsx [Music] i need to animate this part this so detail part right okay cool oh by the way guys you will get all the code in the description box if anything goes wrong in your code you can just check that out okay so just target this div disparate div and adapt stagger animation motion dot div also import the motion from framer motion nice at the properties ops let's copy this from index.tsx this one stagger initial animate go to project card put it here import the stagger cool okay nice and now i need to animate this children so to animate this image i wrap this image with a div so div wrap this nice save this i'll convert this dip to motion div and pass the fading of effect so just copy these variants or don't need to copy why to copy okay so that's all for this image and then target the second div convert this to motion div and pass the animation which is variance is fair enough copy this pass this here that's it save this i'm done with the left side done let's test this out click on a card oh it's a final product bro click on a card nice click on a card nice okay i need to add some padding but i'll do that in the refractory part and now let's add the animation for the right section so again i need to add the staggered effect for the right right parent copy these properties actually close this this is my second div put the properties convert the dip to more send div nice and now you need to convert each child to motion element so age one let's convert this to motion element using motion dot first of all let's add all the motion first all right let's target this div atmos and dot that's it i guess and that's it and now just add the variance which is fed enough so just using a multi-cursor i can do that yup so variance is fading up great save this and let's see tomorrow is my exam and i'm recording a video anyway just click on a card nice click on another card beautiful so with this all the animation inside the page is done right so we have animated the project section we have animated about section and we have also animated a resume section and now we need to animate the routes and let me show you how this works let's go to final product okay just click on this about look at this it looks like it just fades out and then fades in click on projects look at this nice yeah let's do that so for that you just need to go to underscore app.tsx which is our special file where our component lives underscribed.tsx so basically we need to animate which part this component part because this is ultimately the page right okay just remove this let's move this about we don't need that what kind of comment is that never is number nice comment so to animator out you need to wrap this component with animate presence so just import this animate presence from female motion import from creamer motion the name of the component is animate presence oh my animate presence yeah here it is and then just wrap this component oops many net presence aha wrap this cool but it will not work until you specify a key so just pass the key to this component this is important because using this key frame motion will identify which page to animate so the key is router dotted out and from where this router is coming we can get the router using the property so restructure this router save this and it should be fine so this is the first step we need to do to animate the route and now let's define animation so for that let's go to animations.ts again the process is same guys you need to create a variance and then pass this to that motion component just copy a variant basically duplicate that let's name this word route animation route animation cool or out fade in whatever okay at the initial stage what i want i want the opacity to be 0 opposite 0 cool and at the animate state what i want i want the opacity back to one cool and then just remove the stagger animation inside this transition part i'll add a delay of 0.1 second and duration is around 0.1 second cool save this and now just go to index.tsx okay this is my page we need to pass this variant to the wrapper dbright just convert this to moscent div motion dot and just pass the properties so variance is what route should got imported route animation or something like that you have out animation cool and in the initial which is initial i just missed the tab 9 yeah animate is animate cool save this let's see go to about something happened click on resume yeah so some kind of animation happen but that is very silly but we can do better so let's do that let's add the animation to the other pages i don't body guys will improve the animation okay so just copy this variance initial and animate go to project.tsx convert that apart dip to motion div motion dot cool let's pass the properties nice just import that my router animation should be imported from animation nice and now just go to word about no not about this resume.tsx okay just target the wrapper dip convert this dip to motion div i love frame awesome by the way i love everything man okay so just convert this dip to motion div and pass the properties nice import route animation from animation cool and let's see click on resume about something happening but that's not what we want so basically what's happening is we are animating this when the page did mount but we are not animating this when the page is exiting okay so for that we can pass another property which is called exit so just go to animation just go to this download animation after this animate i can pass another property which is exit so opacity again i want back to one and then you can also pass transition so delay is 0.1 and any easy effect this is easy now which is built in in framer motion okay and now i have the exit property right so just go to every page and just pass this exit property exit to exit remember you need to pass this as string so just copy this go to project.tsx pass this let's go to resume.tsx pass this save this let's see refresh the page just go to resume there is something wrong in this animation but before that you can see this distortion something is wrong but before that you can see the distortion of pages we can fix that so for that you need to pass a property which is called exit before enter just go to underscore app.tsx and pass exit before enter that's it so it will just wait for the current animation to be finished and then only it will start the next animation so save this let's see click on about click on projects about yeah there is the animation but something is wrong we can do better what's the problem we are wrapping the component we are also passing the key wrapping this with animatronics and then just pass the exit animation as exit first problem oh i know why opacity not one is opposite it should be zero bro sorry sorry sorry sorry the device is back to 0.1 let's click on resume yeah great click on about nice click on projects let it load nice click on resume projects beautiful click on about go to projects click on a card nice so that's it guys that's all for the firmware motion part i hope you have enjoyed this course i really enjoyed this film amazon library so that's it see you in the next video hey guys welcome back i'm sick from back bench coding so we have completed our project and this video is all about refactoring our project in the next section we are gonna deploy our portfolio okay so i've seen a major bug let's start with that let's go to project i don't know if you have noticed that or not somebody mentioned that in the comments and that's why i love this community okay so the bug is if you just click on a project it will just show the store detail that is perfectly fine but if you don't close that and then if you open another project cart let's say this twitter clone now this is opened this is totally fine and now if you just close this twitter clone look at this the previous project is still active right so it's a bar we need to solve this let's see the current logic what is happening okay so every component has its own state which is so detailed and if the store detail is true you are showing the details inside this condition if the sodium is true we are showing this div which contains our details and how are you controlling the state if you click on this image you are setting the state as true and then if you open another card the new card state is true now and as it has the absolute position it is showing above all the previously open posit card now how can we fix that we can simply solve the problem if we can control the other project's car state from any project card component and how can we do that simply by lifting the state to the parent component and then after lifting the state we can just again wrap this block with the condition such as if the active state is this project then only will show this and if the state is null then no project is active so that's the idea let's do it okay so first of all to identify which project is currently active i'll assign unique id to each project so just go to the data.ts here inside this data.ts i need to assign id close this service close these languages close these tools okay so for every project card i'll create another property which is id and the id is one you can just put unique number okay let me just quickly copy that id3 id4 and id8 cool and it is showing red that is because in the type dot ts i need to assign this id where is my types of tas what is my typo t here it is okay so inside this project it's the id which is a number cool save this okay so inside this data dot ts i have just assign id to every project okay from id one to eight cool and now just go to project dot tsx let's cut this state we need to leave the state to the parent component go to project.tsx which is the parent and then inside this let's close this underneath that okay put a state which is so detailed and the setter is set so detail now this will not contain boolean value instead it will contain number so let me just specify the types set contents either number or null see this is null that means there is no project active okay that is cool and at the initial state this is null cool and now i'll pass this show detail to the project card component so here is my project card put so detail which is the so detail state and then say so detail which is the set so detail setter copy this this is showing red because of the type script just go to project.tsx and just mention the types of the properties which are coming how types of the properties which are coming so here we need to define the so detail which is either null or number and then the set so detail which is a function so the argument name is id let's say and it has a type either null or number and it returns nothing void cool save this the structure these properties uh-huh after this project so detail and set so detail cool fine and now whenever i click on a project i'll not make this true instead i'll set the id of this project have i restructured the id so just destructure the id from the project cool and i'm setting the id that is fine and then inside this condition i'll check if the so detail is equal to equal to equal to current id then only i'll show this project and the last thing i need to do whenever i click on this close button i'll make this null not false but null save this and let's see refresh the page nice click on a project that is fine click on another project cool close the project beautiful so every time you open a new project that projects id is assigned to the so detailed state so this condition automatically breaks for the previous project this condition this detail is equal to equal to id because the so detail is now changed so that's why this is forcefully closed and the next project is showing okay so the first bug is done and then the next thing i need to do which is to improve the scroll word this is really simple we are going to use the normal vanilla css so just go to global.css here just use a fit scroll bar thumb so colon webkit culver thumb yup it has a background image and the background image will be gradient the linear gradient to right bottom and then i need to assign the colors so the colors are the green and the blue right so i can get the green from i don't know let's get this from taylor config yup this green my cute green go to global.css that is by the plugin available to change the scroll bars color but just to change the scorebox colors i don't want to insert a plugin and then the blue color what is the blue color let's assign a blue color which is zero five seven for now you can just change that five e6 cool i'll also change the width and the height of the scroll bar because this is really big so this is webkit crawler which is around eight pixel and the height is zero oops oh right is zero cool save this let's see it should change the scoreboard's color refresh the page cool this is my new scroller this looks great okay next what i'm gonna do i just add some padding on this project card basically on the show details part so let's do that this is really simple using tailwind just go to project card dot here it is so currently i have the padding p2 but from the medium screen i want padding around 10. let's see refresh the page click on a project nice quite good let's make this rounded apparent div and also add some border on this image let's quickly do that inside this project card dot tsx add rounded large rounded large on the parent div okay and then just target the image i wrap this image with a div so this is really easy to add border so just add class name border 4 unit and the border color is i don't know gray 100 save this let's see cool looks nice close this cool and now let's handle this download resume so if you click on this link it should download your resume so for that just go to sidebar.tsx sideburn.tsx here just go to this link this one this resume just target this anchor tag and add this properties which is download and href so basically this is the file which is submit the resume.pdf which is located inside this assets folder and notice that i have created this assets folder inside this public oh actually i have not created the access folder yet you know what i don't have the pdf so let me show you with an image you can just change this with a pdf this is this is exactly the same okay so let me just show you the image let's say this blink.jpg so just remove this pdf and assets the name of the folder is images and the file name is blink dot jpg please put the correct file name and then look at this sumiti resume dot pdf this is the name of the file so just say you know what blink.jpg the name of the image that's it what you need to do you just need to change this file with your pdf with your resume i should say okay so just save this and let's see go to sidebar.tsx click on this download resume and here's my blink.jpg it is downloaded let's open this image yeah this is the image okay so just close this hello so i guess that's it if you have noticed any problem you can just comment this out i'll definitely fix that because i always wanted to have a community so please comment down what's your thought on this project okay so that's it guys in the next video we are gonna deploy our project till then bye and we did it if you have enjoyed this project please hit the like button at least for the algorithm of the youtube please okay i'll see you in the next video bye hey guys welcome back i'm swim from back bench coder so we have almost finished our project only the last part is left which is the deployment and that's what we are gonna do in this section okay so we'll host our project inversely which is also the creator of the nexus and hey it's free okay so let's prepare the file for the deployment so just go to your code editor okay so first of all you need to manage all the environment variables although you don't have any environment variables in this project but i want to show you how environment variables works in next days okay so for that just go to indies.tsx and then inside this gate server set props although we have commented this out but in your big project you might need this okay so inside this gate server set props look at this url this is the absolute url what i mean by that is you need to pass the base endpoint so in this case this is http local 3000 but if you deploy this project that does not exist this low cost 3000 right so you need to get this variable from the environment and how can you do that for that you just need to go to your root folder and create a new file which is dot enb dot local local so oh not not a folder bro dot enb dot local cool and here you can just create a variable like api endpoint or something like that but but but there is a specific variable which is called vertical url so just go to documentation here's the documentation i'll put the link of the description oh i'll put the link of the document in the description box although i'm sure you are not going to check this okay but the point is look at this vertical url yeah here i have this vertical url and look at the description this is the url of the deployment now the point is as this is a system variable as this is under a system variable virtual will automatically populate this variable during the deployment so you don't need to externally configure this okay okay so what is the url in my development stage this is localhost 3000 so just get this put this here and we can get this value using process dot enb dot virtual url so just remove this use a template string then dollar curly brace this is process dot enb dot vertical url now okay cool close the sidebar you need to restart the server because you have just configured the environment variable so npm run dev cool now i want to prove this that this actually populate the virtual url uh so just get this process dot emp.versal url and inside this props just send something like you know the name of the provider is what endpoint just for testing i want to send the endpoint to the client so that i can just log this out and now i can access this endpoint so inside this next page why i am using typescript here i don't need to use that okay so just get the property which is endpoint and just log this out log point so during the development stage it should so local 3000 right okay so just go to the client refresh the page ctrl shift j go to the console and by the way guys yesterday next is 10.1 person was released so and that is quite nice because that has a less refresh rate and all these stuffs uh we have an error only the absolute values are supported what's the problem bro i have the virtual url log this out this is undefined why oh wow i've created this.nb.local inside this pages just create this file inside the root folder guys okay you need to restart the server again sorry my bad restart the server go to a client refresh the page go to console look at this this is local 3000 right but after a deployment you will see something else i'll show you okay so that's how you manage the environment variable nice yeah really nice i don't need this data let's comment this out i don't need this console log in the server just comment this out cool yeah seriously cool and now let's talk about the next build just go to package.json okay here you can see the script which is next build so what next build does is next build builds the production application in the dot next folder so after running this next build actually let me just run this next build so just close the current process and run npm run build okay so after building next start starts a node.js server that serves both the statically generated and server-side rendered pages but you don't need to do this let me show you i'm doing this just to show you manually how the things are done make sure there is no typescript related error else it will not compile uh-huh done and now just look at this file explorer and you should see a dot next folder okay so this folder contains all the products and ready code okay close this nice you can run the production ready server using npm run start but you don't need to do that this is super fast by the way okay cool and now just go to whatsapp so just go to virtual.com create an account i would recommend you to continue with github i already have an account so just click on this continue with github because after all you are going to connect this project with the github so i recommend you to login with github and hey by the way guys i am guessing you have a github repository and you are pushing that code to a github repository come on i can guess that okay click on this new project and here you just need to import your repository mine is this one next portfolio youtube and look at this this is listening to the main branch so every time you post a code to a main branch it will deploy the project my dog is barking wow so just go to a terminal git add get commit prepared for the deployment cool get post when you are happy with your piece of work you make a comment so get puss mine is desumit wow ah cool now just go to varsa again just click on the select the personal account now just give this project a name and then this is framework next days root directory slash click on this build and output settings which is npm run build that is perfectly fine and then look at this environment variable now in this case we don't have an environment variable we have only one that is a system variable and remember what i have told you about the system variable this will be automatically populated by vertical look at this parcel provides a set of environment variables that are automatically populated by the system okay but if you have a variable something like mongodb url or you know jw token in that case you need to externally configure that so in that case it will do something like url or mongodb uri and then you will put this uri here as simple as that okay we don't have any so click on this deploy that's it wow so my project has been deployed click on this visit and here is my project click on this toggle theme cool this is my coolest portfolio okay but remember the virtual url let's go to console look at the virtual url this is automatically populated by herself which is the base endpoint but hey this is next portfolio ytmi blah blah blah but my original endpoint is next portfolio yt what's going on there's nothing wrong in this because virtual deploy your project in multiple url so for that just click on this virtual and just click on your project in this case this is my next portfolio yt and then you should see the domains here so under this domain just hover over this plus two and you can see all the domains so this is the same project so if you click on this url and just copy this it's the next portfolio yt sumit go here this is showing oh that is because my direct mode extension is on close this look at this toggle theme nice okay so that's it for the deployment guys but the last thing i want to show you a lighthouse test so just get the url okay just go to incognito mode for some good stuff again whenever i talk about incognito what i remember some names which are hmm control cj okay so just go to lighthouse let's check mark this performance best practice accessibility and seo okay click on generate report we are going to improve this okay don't worry first time you might see a low score but we are going to improve this okay so performance is 100 best fact is 100 accessibility is 83 and seo is 80. okay so we need to improve the seo how can you improve the seo first of all let's see the seo and then we'll check the accessibility okay so document does not have a title element yeah we know that and then document does not have any meta description okay cool so just go to your underscore document and here inside this head i am going to put a meta tag so let me just copy this this is a simple meta tag about the description and the keyword okay so description is minus track developer looking for a job no i'm not looking for a job and then keywords is full stack developer freelancer command developer and all so just some normal seo things so inside this underscore document just put this meta tag and then for the individual page we'll put individual title and how can you do that for that just go to index.tsx and import our head tag [Music] we don't need the service from type so so import it from next head hey here is the point guys there is two head component in next days one is this head from the next head and the second one is head from the next document we are going to import the head from the next head okay inside this index.tsx else it will throw an error and you will be confused what's going on okay so inside this div just put the head and then we can put the title we can put the meta tag all of this stuff inside the head tag okay so the title is web developer i don't know and then portfolio cool or sumit just put whatever comes in your mind my dog is still working bro and then just go to project.tsx close the sidebar let me zoom out it's looking odd okay so inside this deep let's put this header here copy this cool i need to import the head so control and space look at this this is suggesting me to import the head from the document but hey we are going to import the head from the next head so import it from next up head cool this is web developer portfolio sumit day or you know what this is not portfolio of this project just copy this head tag just go to resume or about what resume cool here inside this div you can put this inside any div inside any element okay okay you need to import the head again so import let me just copy this oh i believe in copy paste okay so if developer this is not project this is resume so that's it that's everything for the seo let's look at the accessibility uh-huh inside this accessibility this is suggesting me to change the background and the foreground color but here we are not going to change the color sorry you may change that but we are not going to change that okay anything else bro aha yeah document does not have a title element we have just improved that and then links do not have a name and that is because i need to pass a area label so just go to the sidebar which is not sidebar sidebar tsx this is complaining about this anchor tag so just target all the anchor tag and pass something called area level okay so for the first one this is youtube in my case this is youtube and by the way guys please hit the subscribe button please please at least like the video you can do that and then this is linkedin and then the third one is github cool and then heading elements are not in a sequentially descending order oh okay so this is complaining about this page so this paragraph this i am currently parsing blah blah blah and then for every service card right okay so the idea is what i am going to do i am going to make this h6h5 the second h6 so just go to the service card inside the service card this is not h6 this is h5 in telling this does not really matter okay cool and i think that's all that's all i can improve anything else nope so now what i'm going to do i'm just going to push this go to the main branch so git add git commit again the same commit message ah get push again password pro jesuit cool done done done just go to versal and you should see something like hey deployment is going on something like that refresh the page i've also given the same comment message so i can't check this out actually just go to next portfolio yt click on this deployment yeah this is building cool look at this this is duration 41 seconds let it build click on inspect deployment and you can see the deployment done with packages on download package json ah ready ready ready okay cool let's go to a link refresh the page nice you can see the title this web developer portfolio and now just again check the lighthouse now let's go to incognito or incognito refresh the page okay uh close this lighthouse check and generate report again this will see better su around 100 i'm expecting that's why you are using server side rendering you know wow look at this seo 100 best fact is 100 performance 99 accessibility 95 you can improve the accessibility if you want to change the color it will be 100 but this is quite fine yeah last time it was 100 bro what happened uh image elements element rendering blocking issues refresh the page then i report again just for fun i want 300 oh okay so i don't know what going on let me render blocking the one person lagging because of the google font anyway so that's it for this video that's it for this project if you have enjoyed this please let me know please do me a favor hit the like button hit the subscribe button okay see you in the next video bye

Channel: Backbench Coder

Views: 53,594

Keywords: next js tutorial, next.js, react tutorial, next 10, next js for beginners, next with typescript, Developer Portfolio using next, next js with tailwind, Make a developer portfolio using react ', next js api, react for beginners, modern react tutorial, react js, react tutorial for beginners, next js tutorial hindi, next js project, next js typescript, next js beginners, javascript, next js, next js react, next js vs react, next js dark mode, next js beginners project, nextjs

Id: atebfXxl9B4

Length: 230min 44sec (13844 seconds)

Published: Sun Apr 11 2021