Next.js 13 FullStack Portfolio Website with Admin panel | Tailwind CSS, Framer Motion , MongoDB 2023

hey everyone welcome back to the channnel so in this particular video we are going to create this awesome full stack Nexes portfolio website from scratch we are going to use Nexus mongodb and twiin CSS now the first thing and very very important thing is that this is not a static website now this is a fully functional full step we are going to have a particular separate back and you can see that and this is basically admin view now this admin view because this is a individual portfolio website so you are the only only person that can access this particular admin view right and whatever data you are having here all of this data is customizable all right now this website can be very very useful if you are currently in college let's say in second year third year or fourth year or let's say you want to basically switch a job from one company to another company and in that case this project can be very very useful so let's see how it will look and first let's go to our admin view so obviously you will have a usern name and password and let's first log in here so I'll give my credential suum 1 2 3 and here I'll give suum 2023 if I log in here so it will basically go to the tab View and here we'll be having different sections so we having home about experience education project contact and log out now you can see that we are having this head heading text and the carer summary now whatever you are seeing here based on that this data will automatically change now let's if I try to change this one from development to design and let's add this info all right now this will be automatically saved you can see that if I now refresh this so this data will be automatically reflected here now this can be extremely useful because you don't have to change your data every time you can see that now this is getting changed to design and this is basically the carrier summary that you can add here let's go to our about section here we'll be having about me your like whatever you are currently working the number of projects you worked what is the number of experience CL clients and your skills so now let's go to this about section so you can see that we are having this client projects and this experience if I try to change this one from 5 to 10 let's add this so this is updated if I now try to refresh this you can see that we'll be having here uh this updated data which will be 10 so you can see that now this is updated here here you'll be having this image and then on the right side we'll be having all of these skills here let's say try to delete some of the skills uh let's say try to remove this nodejs if I go here and remove this node J from here let's add this and if I now refresh this and you can see that we will be basically having the updated data so you can see that we don't have no if I try to add it back let's I'll add here Python and let's add this let's go here and refresh this and you can see that now we will be basically having this uh python all right so this is how it look now next we're having experience section so here we'll be having this PO company that you are currently working duration location and job profile and if I go here you can see that we are having this timeline component where on the left side we'll be having my experience and on the right side we'll be having my education so the same will go for this education section all right so will'll be having that degree year and the college name all right now let's try to add a new experience here so I'll go to Ed experience View and let's add here like manager software manager all right I'll give here Amazon duration any data I'll give based on that later you can change I'll give your USA and this will be software manager if I try to add this info so this will be automatically added so this is added here if I try to refresh it here so you can see that you will be basically getting the updated data here all right so you can see that you are getting updated data here now next let's go to our project section so here we'll be having project so the project that you have worked project name what are the technologes that you used for that particular project website and the link to the GitHub and this is how it will look so you can see that we'll be having this slider kind of things so if I scroll this one you can see that this will basically show the progress if I try to add a new project sorry so I'll add here project five technology I worked reactj let's say and I'll give the same link here so I'll paste it here here and I'll give Here YouTube let's make this one as YouTube clone all right now let's try to add this one so this will be now added if I now refresh this you can see that that new project will be added automatically here so we are having a five and if I scroll this one so you can see that we are having YouTube clone and at the end we are having very interesting section and that is the contact me now here you will think that okay now this is a dummy form but this this is not so what will happen whenever some person will visit this website they will type name message and email here and they will send this message now because you already have admin panel you are having this contact Section you can see that now whatever person already contacted you will be having all the information let's say I try to contact you so I'll give my name here uh what we can give we can give here mik I'll give Mike [e-mail] and I'll give a message like I'm hi there this is Mike I am very much impressed by your profile I would like [Music] to talk about one of the projects that I am currently working if I now send this message here you'll see that this message will be sent you're getting this here if I go here now once you log to your admin dashboard if you refresh this you will be getting this updated so if I now go to this contact Section now you can see that you are getting data on this mic so hi this is mik I'm very much impressed and all the message and everything so this is what exactly we are going to build and for this one we are also going to uh Implement framar motion I'm pretty sure that you'll learn a lot of things if you like this particular video give a like comment down and please subscribe to my channel let's get started so the first thing what we are going to do we will be start working on this particular backend app and also another thing I'll add the GitHub uh code in the description so you guys can download or basically Fork whatever you like and also please give a star if you like this particular project so let's get started and good luck hey everyone and welcome so the first thing what we are going to do we will be starting with the admin view so you can see that I already created one project here so the first thing we are going to install all the packages that we need so the first thing is is that we need the material UI we also need this bcrypt JS frer motion mongos react slick and react scroll so now let's copy all of these and let's open another terminal here and here I'm going to install all of these now you can see that we also going to use mongodb so I created a mongodb uh database here so the first thing we are going to connect this mongodb so let's click on this connect and let's click on this mongodb for vs code now here you are going to get this URL let's copy this let's go to our code and we'll start with first creating this database connection so we'll create one folder here not here we have to create inside this source and we'll create here database and this will be index.js let me minimize this all right so first thing we are going to import from mongus now let's create our uh database connections will do export default function connect to DB all right and this will be a sync function all right so here we are going to do try this will be AIT mongus doc connect and we are going to pass this URL that we are having so let me just copy this and here I'm going to use my password so I'll remove this and we paste it here so this is my password uh let me format this we also have to take a catch block here so we do catch and we are going to just log this error Here Also let's log something like console.log database connected successfully all right so this is all about the database connection that we need now as I already showed you in the demo so because this is a full stack portfolio app so in the admin s you are the only person that should have access so any other person can't access the admin dashboard all right everyone so now the next thing what we're going to do we will be first start working with the admin view so in the admin view we will be having the tabs here and then each every tab is basically Associated to a particular section also after completing this functionality we have to uh integrate the login functionality because from the admin side because this is a personal portfolio project so you will be the only super admin that should have access to this admin dashboard so that part we are going to do later so the first thing we'll start with creating our folder here so let's go to inside app and I'll create another folder and let's give this on name as admin and here I'm going to create page.js so we'll make this one as use client and here we'll do export default function admin view all right so here uh let's return div also we are uh having this menu items here all right so menu items is basically we have to create the tab view so let me just create the menu items so here we'll start with the ID so the first ID will be home then we will be having a label of home for each and every tab view we have to create a component for now this is fine let's copy this and we'll paste it so this will be about and this will be about now another thing for the admin view we are not going to use much styling so this one will be experience this will be experience next we are having education and this will be education after that we will be having a projects so we do project this will be project and at the end we will be having contact so this will be contact all right now we are going to basically map these menu items and based on that we going to render so we having this D here so for this one let's take a class name so we'll do border B we'll do border gray 200 now inside this we're going to take a naar so here we'll take a class name so we'll do minus MB 0.5 do Flex justify Center and we'll do space X of 6 all right now here we are also going to use a role and this will be TBL list let's format this now inside this we are going to render this menu items do map this will be item and here we are going to return a button so the first thing we are going to use a key here and this will be item. ID all right then we'll do a type as button we'll do a class name so for this one we are going to use some uh simple class name for example let's take this one as a padding of four we'll do font bold and we'll do text Excel I think this will be fine and we'll do text black that's it all right now next thing we have to basically render this item do level here all right so after this we are going to take a div let's take a class name here and we'll give a margin top of 10 let's save this and let's see what we are getting so we go back let's go to our admin view so we getting this one this is fine this part we have to remove from the global CSS so let me just remove all of this from here okay now next thing uh for each and every section we will be having a separate component so we'll go to source and we'll create a folder and let's give this one name as components and here we'll be having another folder let's give this one name as admin so this is admin view or let's make this one as admin sorry let me just delete this so here here I'll create a admin View and another one will be client view so here we are going to create some folder so the first one will be our home then we will be having about so this is basically each and every section here then next we are having education then let's create experience then we will be have having contact and also you'll be having project so I'm quickly create all of this so we do index.js so let's make this one as a client component so this will be export default function admin home view so we going to return admin home View let's save this and now I'll copy this and I'll paste it in each and every folder okay now let's change all the names so this will be admin about view let's keep this content for now this is fine we are going to change all of this this will be admin contact view this will be admin education View this will be admin experience view all right and this will be admin project view awesome so now we go back and then we'll go to our page.js let's close everything else and here I'm going to pass another component property and this will be our admin home view I hope you're getting so you're passing this component here so this will be admin about view next we are having admin experience view next we are having admin education view next we are having admin project View and also then we're having admin contact view all right so here now we'll do a margin top of 10 we'll do a padding of 10 Here and Now what we can do basically we'll do a menu items do map this will give me item and now here we are going to check if this item. ID is equal to equal to current selected tab so this one will be a state that we're going to create if the current selected tab is equal to ad me so we going to render the item. component so let's create this one so we go to the top and we'll create State here so this will be current selected tab Set current selected Tab and for the first time always this will select the home view all right so now we'll copy this and we are having this button here so we do on click and here we are going to make this Set current selected tab is item. ID all right so now let's go to our this about view for example and let's make this one as about okay copy this paste it here let's go to experience copy this paste it here we'll go to projects we'll copy this paste it here and we are having also contact so we'll copy this and we'll paste it here if I now go back so we having admin home view admin about view experience education project and contact so this is fine now I think the main structure is done so now what we are going to do we will be basically have having the form for each and every section and then we have to start working on each and every section one by one so first start with this homepage all right so the first thing what we are going to do is go to this admin View and here we going to create another folder and let's give this one name as form controls let's create index.js so this will be a client component here I'll do export default function let's make this one as form controls all right now this will return return here we are going to get some of the props from the parent component so the first thing we'll get the controls we'll also get the form data and also we going to receive the set form data all right and here what we are going to do do controls. map this will be control item let's return a div here let's give a class name so we'll give a class name of margin bottom of four and here we are going to use a label and we are going to render control item. label let's give a class name for this one so we'll do a block we'll do text Gray 700 we'll do text ASM we'll do font bold and MB of to after this we are going to take a input here and let's take a class name for this one so we'll do a sadow all right we'll do border we'll do rounded wi as full py of 2 PX of 3 text Gray 700 we'll do Leading Light sorry not Leading Light we are going to do tracking we'll do normal or let's make this one wide for Focus we're going to make the outline as none and focus we'll do Shadow outline all right now after this we are going to use a placeholder here and this placeholder will be this control item do placeholder will be having a type which will be control item. type all right we also will be having a name which will be control item. name we also be having ID which will be control item dot um this will be also name we are going to having a value which will be uh form data of this control item do name all right and at the end we are going to having a on change which will give us a event and here we're going to use the set form data this will destructure the already form data and this will be uh we are going to do item sorry control item. name which will be equal to event. Target do value that's it so for each and every section we are going to pass some controls and these controls will map and automatically it will uh generate this input so the first thing we are going to start with this uh home component so let's go to our home component and here the first uh in the home component we will be basically having the following things so the first one will be here we'll be having the main heading text we also will be having the summary so that you will be able to basically modify so let's see how that will work so first thing I'm going to create the controls here now I will create only for this home for others I'll just copy from I already have in the readme file because or or else it will be like very time consuming all right so here what are the things you have to pass you to pass a name which will be a heading then you'll be having a placeholder which will be uh enter your enter heading text all right we'll be having a type which will be text and also we'll be having a label and this will be enter heading text so now let's copy this and paste it again here this will be summary and here this will be enter carrier summary and this will be same for this one also and type will be text all right now here what we going to do remove this we'll use a class name here so for this one we going to do with as full and then inside this we'll take another div here we'll do a class name we'll do BG white uh we are going to use the hex code only we'll do white we'll do sadow MD we'll do rounded we'll do PX of 8 PT of 6 PB of 8 and MB of four all right now inside this what we going to call this uh form sorry form controls and we going to pass this controls here so let me just check what is the name we are passing sorry I think I have imported from a different thing not here we have to import it form controls from this form controls so here we have to take the controls which will be these controls we also have to pass the form form data all right now this form data we are going to manage from the uh parent component which will be basically this admin component so here what I'm going to do so in the admin component we will be having different different state for all the others uh all the others um tab form data so what I'm trying to say is basically let's say currently you can see that we are having here six tabs so we are having this home about something like that so for each and every tab we will be having a form data that we we will be managing from this parent component so here we are going to take a state here and let's make this one as uh what we can do do something like home view form data so this will be basically related to this home view I hope you're getting and this will be set home view form data all right this will be US state of we'll create some initial State here so we create something like const initial home form data and here we are going to pass the heading as empty and we'll do summary as empty also so this will be our initial form data and this we are going to pass it here now in this home view we are going to now pass this as a prop so we'll pass this form data as this and set form data as this set home view form data I hope you're getting so this one will be receiving in this component and at the end this we will be passing in this form control so this will be form data which will be form data same we receive this set form data so receive set form data and this one we going to pass it here and this is done now let's save it let's save it so now what we are going to do basically in this component uh so let's go to our admin home view all right so after this we're going to take a button and let's uh make this one as ADD info and here we are going to use a class name we'll do border we'll do border uh what we can do do green 600 we'll do a padding of four we'll do font as bold we'll do text as we'll make this one a 16 PX and I think for now this will be fine also let's give a margin top of uh how much 10 PX let's save it let's see what we getting awesome so now you can see that we getting enter heading text heading uh sorry carrier summary and this is the button if I now go to different view so this is different so here whatever you will be entering the same will be reflected in our main client view if you see here if I now log this form data you see this will be automatically handled so I'll do copy this and let's go to our console now let's see here what we're getting so you can see that this is the object so I'll type something here you can see we are getting the value I'll type something here we are getting the value here this is fine so now the same thing we have to do it for about experience education project and the the this contact Section is different so this I already discuss in the uh demo section for all of this we have to now create these form controls all right the form controls I basically mean this one so what I'm going to do I'll just quickly create this form controls for all of this I I will obviously add this uh code in the GitHub so you can basically directly Fork it if I now write it manually it will obviously take a lot of time so let me just copy all of these form controls for each and every section and then we'll be start working on the API route section all right so let me just quickly add those all right so as you can see that I just added all of these controls so for about we are having about to me number number of projects years of experience number of client skills similarly for educations we will be having degree name year and the college name then same for experience and also the same for will be the project project name technologies that you work for that particular project website and the GitHub now what we are going to do we go to home and we have to basically follow the exact same structure so we'll copy this and we'll paste it for each and every section so we'll paste it here in this about here we have to just import it and also we are going to receive this from the parent component so we'll copy this and we pass it here so let me just do it for Education also then we have to do it for experience and also you have to do it for project all right so now let's go to about section so let's copy this part from here and and we'll paste it here in the education section we have to import this form controls here instead of controls let me make this one as controls same let's go to uh experience we'll paste it here you have to import from controls and we are going to make this one as controls uh let's go to Project same we'll paste it here let's import form controls and also this one we are already having controls now let's save it so now what we need to do we have to go to this uh main page uh. JS file and here we are going to create now we only have created the state for this homepage we have to create for all the other pages so let's paste it here so this will be about experience education and projects so we are going to make this one as sorry this will be about and this will be about then this one will be experience and this will be experience then we are having education then this one will be also education all right same this will be project and this will be projects sorry project now let's also create the initial state for each and every section so this will be about experience education projects so this will be initial about form data now let's go to our about page now for about what are the things that we are having we are having about me so this will be empty then we are having number of projects that we worked so this will paste here now obviously based on your convenience you can change these controls all right this will be a of experience this will be empty then what we are having we are having number of clients that we worked till now then we having skills so let's copy this and let's pass it here then we have to create for experience so this will be experience then this one will be education and this one will be project all right so now let's go to our experience section so we'll go to experience page here we'll be having po uh so this will be poon then we'll be having company that you worked then also we are having the duration that you worked all right next we are having the location you worked and next we are having the job profile all right all right so now next we'll be having for education so for Education we'll be having degree then we are having the year and at the end we are having the college all right now at the end we'll be having the project now for project we'll be having the name so this will be the project name then we are having website and then we are having that technologies that we worked all right and at the end we'll be having the GitHub link all right now let's pass it here so this will be our initial experience form data this will be initial education form data and this will be initial project form data now all of this now we have to pass it here so now let's uh copy sorry let's take it from here so form data will be now uh this will be about view form data set form data will be set about view form data here form data will be experience view form data set form data will be set experience view form data then we having for education so here form data will be education view form data and set form data will be set education view form data next we are having the project so for project we'll be having uh this will be project form data and set form data will be set project view form data for contact Section we no need to pass any uh straight here because we are not managing any form so let's now go back and let's see what we are getting we are getting some error GitHub is not defined all right so here we have to give it this so here now let's go to about we are having about page experience then education project and here we don't have anything for now and everything is working fine all right so now next thing what we are going to do we will be start working on the models or basically the back end so here inside source I'll create another folder let's give this on name as models first we'll start with the home so you're having home.js then we will be having for about. JS then we'll be having for education. JS then we will be having for experience do JS then we will be having for project. JS and also will be having for user or basically the login so we'll create for now user.js all right so now let's start with the home now in the home section we will be basically having the uh two things let me just close everything else first we're going to import mongus from mongus and here we're going to do const home schema if you already follow my content you already know that I already created some more projects on XJ so by this time you will be able to create this schema very easily so this will be new mongus do schema and here for this we are having heading which will be a string all right also we'll be having a summary so this will be also a string here we are going to pass a time stamp as true this is all about the schema that we need now next to this one is home this will be mongus do models. home or mongus do model of home and here to pass the home schema that's it now I'll do export default this will be home now the same exact thing we have to do it for all the other places so here we'll paste it same we do it for experience same do it for education then we'll be having for projects now for about for each and every section definitely we'll be having different uh schema keys so how we are going to take it so you can easily take it from here so let's copy it from here and let's paste it here so this will be about so we going to make this one as about schema sorry this will be about and here we are going to pass it here so this all will be string this will be string string this will be string this is also will be string and skills will be comma separated string values that we are going to discuss I'll pass it here and this will be about about about this will be about that's it now let's go to our experience we'll copy this from here we'll go to experience paste it here again this all will be string only let's copy this this all right here now this will be experience and we're going to pass it here sorry sorry we have to do it experience schema and this will be experience that's it next we are having for education so education we have only three so we paste it here again this all will be string this will be string and this also will be string this we going to make this one as education schema all right this will do education and this two also will be education exact thing at the end we are having projects so we'll copy this we'll go to Project section we'll paste it here this will be also string all will be string and this will be project okay here this will be project and done all right now for user so for user what we are going to do for now we don't have any function but I'll show you what exactly you need to do so for this one this will be user schema because we only will be having one super admin that is my credential all right well this is a portfolio application so this will be user this will be user user user and here we'll be having username which will be a string and also be having a password which will be a string that's it all right so now we have created all the models now let's start working on the API part now for API uh basically let me just create the folder so we create API folder here now for each and every section we will be basically having two apis one is to add the info and second one will be to get the info now I'm not created any update API for now for some of the sections because that will obviously take some more time and if you want you can definitely add those functionalities but I I believe that for now adding and getting the data will be more than enough all right because definitely this is a portfolio application and you are not going to change the uh basically the data most of the times you will probably change like once or twice in a year all right so here we going to create all of these folder so we'll create a home next we'll create a about next we'll create experience we are also having uh sorry we having project and we are having education also we'll be having for login all right and at the end we'll be having for contact also but for now we'll not do anything for now uh we have to first start with this home section so here again we'll be having two folder one will be to add and second one will be to get all right because for home about education experience and project for all five section this add and get will be exactly same so what we are going to do we will be creating in one place and the rest of the place we are going to basically copy paste the same structure only the schema or only basically the model part we have to change so let's see how how we are going to basically do that so let's start with this home sections so let's create our route do JS here all right now here the first thing what we going to do is look import connect to DB and also you're going to import next response from next SL server and here we are going to import the Dynamic Property which will be Force Dynamic now here for each and every add section will be a post request because you have to save this uh data into our database so we do export as sync function let's make this one as post here we'll get the request and we'll do a try block and catch block so here we'll do log error and we're going to return next response. Json we'll do success as false and we'll do a m message which will be something goes wrong please try again all right so now here first thing we have to do AIT connect to DB and then we are going to extract the data so we do extract data and this will be AIT request dojon all right now here we are going to do const save data and this will be a it so you have to import home because this is for the home section so we import from model so you can see that we imported from model so this will Store The Heading and the summary and we have to do create and here we have to basically pass this extract data and here we'll do if save data if this is true so that means data is saved successfully so we return next response dot Jon and here we are going to make the success as true and here we'll show some something message like the same message will show like data saved successfully as simple as that else will do the same message that we are showing here that something goes wrong please try again now if you noticed here these logic whatever we are doing here this will be exactly same for all the other section for experience education doesn't matter for each and every section we have to first extract the data only this part this model will be changed so for home it will be about experience and education all right I hope you're getting now next we'll do one thing we'll copy this add part from here and we start with this about sections we'll paste it here now I'll go to Route instead of this home we just have to make this one about see as simple as that now let's remove this home section now let's copy this ad from here and we'll paste it experience in the education and also in the project now here instead of about we just have to make this one project we remove the about let's go to experience here we have to make this one as experience and here we have to make this one as education so we'll do education that's it so this will basically do uh this will basically complete the functionality for the add now same thing what we are going to do same will be for gate now for gate what we are going to do this gate will be like much more simpler so here inside get i'll create only one rest I'll just copy so I'll do route. J now here again we are going to import connect to DB here and now we'll do export const Dynamic this will be force uh Dynamic and here we'll do export Asing function this will be get request and here we'll get the request and here what we're going to do to a it connect to DV or let's make a try block here also so do try we'll do catch we log the error and we're going to return next response. Jason we'll do success as false and we'll do message something went wrong please try again here we're going to do AIT connect to DB and we'll do const extract data and this will be AIT for home it will be home from model doind and we are going to basically find all the data that we are having that's it and if extract data is true so we going to return next response. Json we are going to do success as true and we're going to pass data as this extract data else that means something went wrong so we'll just copy this and we'll use the same all right now if you noticed here again for the gate also only this part will change rest everything will be same so I'll copy this and I'll paste it in all the folders so I'll paste it here paste it uh sorry to let me just copy again we'll paste it here same we'll paste it for about also so for about this will be about all right for Education okay let's go to this gate uh this will be for experience we having experience and next we are having for project I don't know why this is not taking let me just check okay now it's taking so here this will be project and also we'll be having for experience we have done and this is for Education that's it this is done so now what is the next step what we are going to do so we'll be creating common services now in the services file basically we'll be having uh we can basically create one Services file so let's create a folder here so we create services and here we'll create one index.js now here we'll do export as sync function and this will be add data all right now here what we are going to receive we are going to receive the current tab so current tab is basically if we are in the about we are going to pass about experience education project contact home based on that and also you're going to pass the form data all right so here we'll do a try we'll do catch we'll just log the error here simply and here we are going to basically do const response this will be AIT and here we'll do fet so this will go to/ API SL and here we going to pass this current tab sorry this will be current tab so if you see here current tab is basically this name about contact education experience and home and then we are going to go to the add folder I hope you're getting and here we're passing method as post also be having a headers so we'll do here content type as application SL Json all right and also you're going to pass the body and this will be Json do stringify this will be form data now here we will do const result AIT race do Json and we're going to return the result so this is about the add data that we need now next we have to basically create another one and that will be for the G data so export as sync function this will be get data and here only we need the current tab again we're going to do try we'll do catch here we'll just log the error and here we are going to do const response AIT f it will go to SL API slash current tab SLG here we're going to pass the method which will be get then we'll get the const result this will be AIT response. Json sorry this will be result and at the end we're going to return the result sorry that's it so this is all about the services that we need so we completed a lot of things we've created all the routes that we need so now in the client side we have to basically save all of this uh data now you noticed here for this home section and about section because uh for if you noticed here for experience we'll be having multiple experiences for Education we'll be having multiple education for projects we'll be having multiple projects but for about and home section we'll be having only these two part which is fixed so in this case Also let's say I want to update this header text so I will be have to create an update uh part also all right so that we are going to create but for this education section uh if you want you can definitely add a update API route but for now I will be only creating the add one but if if I like if I think like I can also add the delete so that we going to check later but first let's see what is happening if I try to save all of these all right so now let's close everything else let's go to our admin and this page view now we have to basically start working on the uh adding this particular so now what we are going to do basically uh we'll create another uh method here so let's create another method uh we'll go here let me just minimize this so we'll create a method here so this will be as sync function this will be handle uh save data all right so now here we are going to create a data map and this data map will be for each and every section there will be a data map so we having home so for home we are having this home view form data for about we having about view form data same for experience education and project so this will be home view form data then we having about this will be about view form data then we are having education education will be education view form data then we are having experience this will be experience view form data then we are having project this will be project view form data all right now what we going to do you have to pass this handle save data uh in each and every menu items so we'll pass it here so this will be handle save data for each and every section all right so pass it here we'll pass it here same for project now what we're going to do we'll go to each and every section now so let's start with this let me just close this API go to components we'll go to admin view then we'll start with this about so this about will now receive this handle save data as a prop and in this button what we going to do do a on click and we have to basically pass this handle save data and we have to pass the current tab so if it is about view so the current tab will be about I hope you're getting next go to education section so here also receive this handle save data and I we pass this on click and this will be handle save data and this will be education next go to experience so this will also receive handle save data and here we are having on click so this will be handle save data off this will be experience all right next we are having home so in this home also you're going to to pass this and then we having on click so this will be home next we're having project so here we are having this project section so we do on click we'll pass it and this will be project all right so now everything is done so we'll save this now what we're going to do we will be basically able to get the current tab because we are already having this state here you can see that we are having this current selected tab so now here what we are going to do we do const response this will be AIT add data so you can see that this this will have imported from services and here we have to pass the current tab now current tab will be this current selected Tab and here what will be the data so now data will be this current uh this data map of this current selected tab So currently if this is home so this will be data map. home which will be this value if this this is about data map do about this this value this is education then data map. education so this value so now what we going to do do data map of current selected tab okay and now here what we going to do let me just log here this response and let's see what we are getting so let's save it now we'll go back here and let's paste it here and we'll do that hi this is a dummy heading text okay this is my carrier summary let's try to add it and let's see what we are getting so this is still pending let's let's wait for some time all right so this is now 200 and here we're getting something went wrong so let's see what is the error here now all we are getting some mongod let me just uh rerun this Let me refresh this all right so let's add it again so the issue was basically I have given wrong password in my mongodb so that is the reason it was not connecting it was giving Au error so now I just change the password so let me just give this is a uh dummy sorry this will be dummy heading text and this is my carrier summary now let's try to add now and let's see what is happening all right so you can see that now data is saved successfully if I now refresh this page and here we should basically get the data now so we getting homes so we having this is a dummy heading text and this is my carrier summary let's go to now about and here I'll give some dummy data for now later I already have this data in my rmy so I'll just replace it while working with the client side for now I'll just give some dummy data here projects I'll give 10 uh number of experience five number of clients 30 skills I'll give now reactj and here we're going to give in comma about it next JS mongodb then we having CSS and we do tellin CSS now let's add this let's see so we getting data saved successfully let's refresh this so we getting home then we having abouts and here we are having this uh data now now let's check for experience section also so we'll give some dummy data for now here dummy po then your company will give Google duration 2020 to 2023 location India job profile software developer let's add this data sa successfully let's refresh this so we are having experience and here we having the data now all right so now same will be for Education projects let's add some let's say Netflix clone this is reactjs some dummy website for now we'll keep it like uh let's take some Netflix website so we copy this and we'll use the same here let's add it so now data saved successfully let's refresh this so you're getting now projects also all right now same will be for uh education so we go here give btech 2013 to 2017 college name ABC College of Engineering and let's add this and you can see that now data saved successfully I think I have saved two times and I think uh if I now go to education now you can see that we are getting two data so it's working fine all right so the most of the things are done now there are some things we need to do so once this data sa is successful you have to reset all of these forms so let's do one thing let's go to our main page and here I'll create another function and this will be reset form uh datas so here what we going to do is start with first so set home view data will be initial home view form data then set about view data will be ini IAL about form data then set experience form data will be initial experience form data then set education view data will be initial education view data and then set project view data will be initial project view data so here we are going to do if response do success is true so we are going to call this reset form datas also on Tab change we have to do the same so here also we going to call reset form datas now we also have to get the list of datas on page load so we have to create another method here so I'm going to create Asing function extract all datas all right now here what we are going to do on each and every tab change we are going to get the current uh data for that particular tab so this will be const uh data will be AIT and this will be get data and here we have to pass the current tab now current tab will be this current selected tab all right now here what we are going to do we have to basically check and uh let me just show you another thing so for this one first I'll take another uh state so I'll do here const all data and set all data and this will be used state of null now once this we are we will be basically getting the data so that means data dot success will be true so we'll do set all data will be uh so let's make this one as empty object so we'll do all data and then we are going to basically pass this data here or else what we can do so basically each and every time we'll change the tab we have to basically set the data of that current tab I hope you're getting so instead of doing like this what we can do you can simply do like this current selected tab will be that means the current selected if it is about so this will about home experience education something like that and this will be data and then data. data all right so this is one thing now every time we'll save this data in the database so data saved will be successful so have to get the data uh extract the datas so this is another thing also you have to get the data on page load so we'll do use effect and we'll pass this current selected tab as a dependency and here we'll pass this extract all datas all right now if you notice one more thing for this home and about because as I already told you we don't have multiple uh home section and about section because this will be always fixed for this about section if I go to about you can see that this will be always fixed so in this case what we have to do on page load if the data is already present you have to pre-render the data here I hope you're getting so you can see the data is already present so what we can do basically for this home and about section we can do something like this so you can check if this current selected tab is equal to equal to home and we can basically check if data and and data do data and then data do data. length uh sorry this will be length if this is true so what we can do we can basically do set home view form data will be this race sorry this will be data and then data. data of zero because we have to take the first element same we have to do it for about view also so if this is about so this will be set about view data of zero and now if I now save this and let's see what is happening all right so I don't think we are getting anything let me just check what is happening here so let me just log here so we'll do all data and also we'll do home view form data and we'll see what we are getting let's let's save it so I think we are getting the data here but something is wrong let me just check what is happening here so we doing current selected is home and data and and oh sorry we have to do it response that's right so we have to do response same will be here also here and here all right and let me just check oh sorry I think we have done in the wrong place so that is the reason we have to do it inside that extract uh view table let me just cut it from here we don't have to do it here we have to do it here so here this will be data only that's the reason or let's make this one as a response and we'll change this one as response all right if I now save this let's see all right so now you can see that we getting the data here so if you now want to update this we will be able to update if I now go to about see now we getting the data here on on page load and if you change this one uh so let's go to experience so now let's see see now we are getting based on experience we are getting the data here if I now go to education and we getting data based on education so we getting education to data if I now go to project and you can see that now we'll be getting based on Project awesome so now only for home and about we have to basically update because these all can be array of objects because we can have multiple experience multiple education multiple projects currently we will not Implement any update for now so let's say only one time you can add one experience if you want you can definitely add update but for this home and about section we have to add the update Route all right so let's create our uh update Route here so we'll do update for this about let's create our route. JS all right now here first thing we are going to import connect to DB then we'll do export const Dynamic equal to force Dynamic this will be export as sync function put we're going to uh receive the request we'll do try catch and now here first thing we are going to AIT connect to DB and we'll do const now we to do extract data and this will be a uh request do uh sorry request. Json and here uh what we need to do basically we have to update the specific things that we want to update for this particular section we'll do const and we can basically extract the ID So based on ID we need to update and this will be about me we have number of projects then we are having year of experience all right next we are having number of clients next we are having skills so this we are going to get it from extract data and then we are going to do const update uh record or something like that or let's make this one as update data now this will be AIT about Dot and this will be find one and update and here we are going to pass this ID as this ID that we are having all right next we are going to pass all of this and here we'll do new equal to true and what are the things we have to pass you have to pass this and we'll pass it here all right now here after this we'll do basically if this update data is true so we are going to basically return next uh response do Json so we'll do success as true and we'll do a message of updated successfully all right else we are going to return so we'll copy this so this will be false and this will be something went wrong something went wrong please try again so same thing we are going to basically return here all right and let's log this error also all right now let's save this so now same thing we have to do it for this uh about home SE SE also so copy this one from here let's go to home section and let's paste it now instead of all of this we only having heading here and we are having summary these two things and these two things we are going to update here rest everything will be same only difference will be this will be instead of about this will be home and this is done now what we can do we can go to our services and let's create another one so I'll copy this and we'll paste it here and this will be update data all right and each and everything will be same so we have to pass the current data and the form data and instead of update add this will go to update now let's save this so this is done now we'll go to our page.js and here we are going to take another state and this will be const update set update so this will be US state of false now when this will be true if this data is already present here if I now go here you can see that this data is already present so that means this is in the update phase so what we can do we are already doing here this set data we can make this set update as true all right and same thing we can do it here set update as true so now what will happen when the update will be true instead of add data we have to call the update data API in point so we can check if this update is true so we do AIT and this will be update data or else this will be add data and here we have to pass the same thing so we'll pass it here that's it so now let's save this and now on page on Tab change you have to make this set update data as false again all right and I think this is done so now let's see what will happen if I now let's say try to change this on to damit updated text data updated and if I now try to add this so we getting one error let's see what is the error now so we getting API SL home/ update this method is not allowed Let's see we are having API SL home/ update I think this is fine let's see what is happening in the services sorry this will be put all right all right now let's see so we'll make this one as update updated let's try to add this see now this is updated let's go to about so we make this number projects from 10 to 20 and if I try to add this one and you can see that now this is updated if I now refresh this uh we are getting updated data if I go to about we are getting updated data here so so this is fine so now what are the next thing we need to do here uh because this is this can be multiple so what we can do we can simply render the uh record here we don't have to do anything else here all right if you want you can render or else that is also fine so now what we can do basically we can go to our main page and then we are already saving this all data here so now what we can do we can go to this menu items and in this one we can pass the data as this all data uh do experience all right let's copy this and this will be for all data do education and this will be for all data do project okay so now if I now go to each and every section so let's start with this uh experience I'll close everything else so now this will receive this data here all right now let's do one thing so after this we'll take a div here we'll take a class name we'll give margin bottom of 10 or let's make it inside this and here what we are going to do we'll do data and and data do length if this is true or this will be null so we going to render data. map we'll do item and we'll return D here all right and here we we'll simply uh render something like let's say what are the things we are having for experience let's see so we are having here uh item do poison so we'll take some paragraph so we'll do item do po then we'll do item dot company three 3 4 5 we'll do item. duration location and job profile duration location and job job profile let's make this one as class name we'll do Flex Flex column and gap of four also we'll do border padding of four and we'll do oh let's make this one as uh border green 700 let's save it let's see what is happening so you can see that we are getting the result here and this I hope I think this is fine for the admin few just to check the same thing we can basically copy this and then we can go to our education section and we can render it here so this will also receive the data and now instead of uh this one we have to do degree here and college so this will be degree college and this will be year and if I now save this so now let's go to education so we getting uh data here uh this is fine now next thing what we can do we can copy the same thing again all right and here uh uh we can do the same thing for project section also so we'll go to project and we'll paste it here and this will be data so this will be the name of the project what else we having I think we having the Technologies website and GitHub Technologies website and uh this will be GitHub now for this one what we have to do if this item. Technologies uh and or I think for now this is fine because this is the admin view I think this will be enough let's go to our project let's see what is happening so you can see that we are having reust Netflix only if I try to add another one let's say Amazon clone We'll add some same thing we'll add reactjs We'll add this one and let add this one if I try to add this one here we are getting the updated data here all right so I think this is all about the admin view we need so we having about then experience education and the project section so now we need to start working on the login authentication so because as I already told you for this one we will only having only one user so what we can do let me just refresh this one here and then here I'm going to create uh let's create something like we create create here collection and let's make this one as uh user all right and let's create here so you can see that we are having this user so this user is basically this user that we are having here all right so now let's insert something here so I'll do your username and let's mag this this one is suum 1 2 3 let's add another one and we'll do password and we'll make this one as suum 2023 so this is the only one user and password this will be for yours that you can basically manage and if I do insert here so now this will be you can see that this is inserted here now based on this user we have to basically handle here now what we are going to do in this admin view one very important thing we need to do and the first thing is that now I now close everything and we have to take another state here and this will be Au user set o user and this will be equal to use state of uh false all right so now what will happen we'll go to our component section let's go to admin view I'll create another folder here and let's make this one as login this will be index.js we'll do use client and this will be export default function login and we're going to return here login let's save this what will happen if the user is not authenticated so they will not be able to uh access this admin view so we do here if this Au user is false that means we are going to return this login here I now save this let's see what is happening you can see that we are having login here so now for this login we are going to create some controls so let's go to our uh homepage and we're going to use the same structure that we are having so I'll copy this I'll paste it here and here I'm going to import this form controls now this form data we will be receiving from the parent component this will be set form data and we have to also create the controls so we do controls and here let me just copy it from here only so paste it here so this will be username enter username and this will be password all right now this will be type of password that's it let's save this we getting username undefined so that we need to manage so we go to our main page and here we'll create another state so we'll go here and let's create here const login form data set login form data this will be US state of initial login form data so you'll copy this and we'll do const initial login form data will be username will be empty and password will be empty all right now this form data we are going to pass as a prop here so we are having this login form data so we pass this uh form data as this one and set form data as set login form data let's save it all right so now you can see that we are getting enter use n and enter password so that means what we need to do now because this is only a super admin is present because this is your personal website what we need to do you have to enter this username and password now obviously we have to has this password and based on that you have to check if the current the user is currently accessing the admin view whether the user actually knows the credential or not so that means you are the only person will be able to access this so let's see how we are going to do that so for this one I will go to API and I think we are already having this login and here I'll create a route. JS now here uh this will be a post request so let me just copy it from somewhere so you use the same thing from here and we'll use uh let's go to Route we'll paste it here now obviously we have to change some of the things the first thing what we need to do we have to extract so we'll do extract uh let's directly extract from here so we extract username and password from this request. Json and now here what we need to do basically we have to basically check the current user so what we going to do we do const check user and this will be AIT user do find one and here we have to pass this username all right this username that we are passing here and if this user doesn't exist so we have to return something so if this user is false so here what we going to do we copy this and we'll return that uh this is false and we'll show something like username is not exist username is not uh present please try again now next we have to Hash the password so look has password and this will be AIT we have to basically import has and then you have to basically pass this check user do password comma 12 now this check user. password is basically this password here all right so we are hasing the password now we will do const check password if the user is entering the correct password or not so we do have it we'll do compare and here we'll pass the password and the has password all right and if this is false if this check password is false that means you are entering a wrong password so return that wrong password please try again all right if nothing else then only we are going to Simply return that uh login successful so we remove this we don't need need this one so we return this is true and we'll show login successful that's it and I think this is done all right so now what we need to do we have to go to our services so let's go to our services and we'll create another here so I'll copy this and I'll paste it here so this will be login now here we only need the form data and this will basically go to API SL login this will be post Jon uh stringify form data this is fine and I think this is done so now what we need to do we have to basically handle this and um this login so we'll go to here and we'll pass a method here so handle login this will be handle login so here I'm going to create this so this will be a sync function handle login and here we have to go to this page to pass it as a handle login and here instead of this you have to pass this on as handle login now what we'll do we'll do const rate this will be AIT login and here to pass the login form data all right and let's see what we are getting in this response so this will be login let's go back now let's go to our console so I'll give login here so you can see that I'll give suum 1 2 3 and suum 2023 so we give suum 2 3 and suum 2023 if I try to add this one here let's see what is happening so username is not present we getting so there is some issue let's see so we go back to our here route and let's see what we doing so every the problem was actually in the names we have to make this one is users not user all right so I just modify this one from user to users and use the same credal here so if you see now because everything is actually correct here we don't have to make any change so let's see if I now refresh this page and uh let me give here suum 123 and we'll give suum 2023 let's add here so you can see we're getting login successful but let's see if I give something like 1 2 3 6 if I try to add this one username is not present and if I try to give a wrong password here so you can see that we getting wrong password place try again so this is working fine so now what we can do we can basically check here if this race do success is true so we going to make set o user as true and also you're going to store this one in session storage so we'll do o uh sorry we'll do Au user and this will be json. stringify and what we can do make this one is true and now every time when the page will load we have to basically get this one from the S Storage and you have to set in the state so we'll take use effect here and we'll basically take empty dependency and we will basically do here set o uh user will be uh this will be json. Parts sess storage dog item and we'll make this one as this Au user all right now save this let's see what is happening so now I ref is this page I will give here suum 23 and suum 2023 and let's make this one uh also let's make this one as add in sorry login not add info so make this one as login so now if I try to add this one here let's see what is happening see now you're going to this page and if I now refresh this uh we will be navigating to this particular section so you're getting all the data let's add this log out also here so now we'll go to our main here and we'll add another menu here log out something like that so we can add here only basically so we'll do here uh or not we don't want to make here let's do one thing uh what we can do I think we are having this naap section here we already having Flex so after this we'll take another button here and we'll do this one as log out let's see how this is coming so getting log out here this is fine and use the same class name now on click what we are going to do so on CLI to do two things we'll make set Au user as false and we'll do S Storage do remove item we do Au user we remove it from the session storage now let's save this so now let's see if I try to log out it's going here if you now try to access it will be in this page only I now suum 1 2 3 suum 2023 let's log in now it's going to here you will be able to update so now let's try to update this one to 30 let's add here so you're getting 30 we go to experience education project we are getting data here let's log out it's going to this admin view if I refresh this it will be in this page only and everything is done so admin view is completed so now we have all the data so we'll be start working on the client view we have to basically fetch this data from and then based on that you have to render in our client view now see how easy that is you don't have to change every time in your code you just have to log in in your admin View and based on that you'll be able to change the data and the same will be reflected in your client view so let's start working on the client view all right everyone so we have completed the admin view so now let's start working on the client view so you can see that I'm in the homepage so now let remove all of these so I'll just take a div here let me remove this one also so you can see that in the components view we are already having this client view now the first thing what we are going to create we will create a common layout page here so we do common layout and inside this I'll create index.js and this will be another client component so we'll do export default function this will be common layout and here this will receive the children component as a prop so we'll do children now what this will basically return return so here we are going to return this so the first thing is that we have to basically check the path name and the reason is because we'll do here use path name so let me just import it so do import something from uh this will be uh next SL navigation and this will be use path name all right and here uh inside this client view we're going to create another folder and let's give this one as nabar and let's create index.js so we'll do this one as use client and this will be export default function nabar and for now we going to return here div and this will be naar all right so here what we need to basically check if the path name is equal to equal to or let's take something like this is not equal to equal to/ admin so for admin view we don't want to render this nabar because we are having a different View for the admin view so in that case we are going to basically render this nabar component that we are having or else will render nothing and then after this we are just going to uh render this children here now this common layout page we are going to render in our main layout. JS file so here I'm going to cut it from here the reason why I created this one because this napb will be common for all the time although we can definitely pass it here also but I think that is also fine here so now here what we are going to do sorry we will take this common layout and then we are going to pass this children if I now save this now let's go to our main layout here so uh we are having this page.js so here we are having the let's say homepage if I now save this and let's go back we're having napar and the homepage now similarly because we are having this admin view we are having all this section home section about same for you have to create it for all the client view so I'll quickly create all of these component so first thing we have to do home then we are having the about then we are having the uh we are having experience then we have to create the project section and at the end we are having the contact Section all right now here let me quickly create all of these components we'll start with this home so we'll create here index.js and here I'll do use client and this will be export default function this will be uh client home view something like that and here we are going to return div and we'll do client home view let's save this now what I'm going to do I'll copy this and I'll paste it in all the places so I'll paste it here for experience for about and also for project now let me just change this one so this will be client project view this also will be uh sorry copy this this will be client project view next we having experience so this will be client experience view now although we are having this both experience and the education at the same part so what we can do uh we can basically change this one to experience education or this will be also fine so we can basically give a client experience and education something like that view so copy this and we'll pass it here next we having contact so this will be client Conta t view so we pass it here and also we are having the about so this will be client about view so copy this and we'll pass it here now now I'll go to our main page.js I'll close everything else and here we are going to pass all of these so first we'll pass client we'll pass client home view then we are having client about view then we are having client experience and education view then we having client I think we have to also make this one for project so this will be okay we already having so this will be client project View and at the end we having client uh contact view if I now save this so you're having client home view about view experience education view project View and contact view awesome all right so now we have to basically get the data here now let's make this one as it uh we'll make this one as a server component all right and here we are going to call the uh API although we are having different Services file but I think here also we can directly do so we do this one as a as sync function extract all datas and here we'll do const response this will be AET we'll do direct fet and now here what we can do for each and every section you have to get the data so here we have to get it for home about experience education project for all the sections so here what we can do we can basically go to SL uh we have to also make this one as a local host because we are calling from the server end so we pass it here SL API and then SL here we have to pass the current section so this will be current section all right and this will be SLG and here we're going to pass this one as a method this will be G and also we going to pass Cass as uh we'll do no store now here we'll do const data equal to AIT race. Json and we are going to return the uh data that's it now what we are going to do so here we'll do this one as a const home section data this will be AIT get uh what is the name we have to do extract all data so we'll do extract all datas and this will be home then same we have to do it for all the sections so 2 3 4 5 so we have about then we are having experience then we are having here education and here we are having the project so we make this one as about this one will be experience then we having education and then we are having project all right so now what we are going to do basically here uh or let's do one here we are going to return data and data do data I think this will be better so now for each and every section we are going to pass the data so we'll pass your data which will be our home section data for this one I hope you're getting then we'll copy this we'll pass it here same for here here and here now for this one because we are having two section one is experience education so we make this one as experience data and then another one we do Education data so this one will be uh about section data this will be education sex and data this will be experience sex data now this is Project SE data and I think for contact we don't have to pass anything and I think this is fine so now uh we will go to each and every section and we'll receive the data as a Prof here so receive here uh same for experience now for experience we having two things we're having X Education data and also you have to get the experience data all right next we having project so project also we having data and then we having home for home also we having data so this data is basically this uh all data we are passing here now let me save all of this uh save all and now we are getting some error here current section is not defined okay we have to get it here so now let's go to any any section so let's go to home section and we're going to log this data so this is our data client home View and let's see what we getting so we'll go here and now uh let's go to our console see we are now getting the data here so this is the data we need right so now what will happen for each and every section we'll be getting the data here so we just have to render the data so the first thing what we are going to do we start working on this napar component so this is the main common component we need so we'll start with this one so let's go to our napar component first and let's start working on that so we'll go to our nabar and I'll close everything else here now here the first thing what we are going to do we'll be having a menu items here definitely so you'll create the menu items so you do menu items and here this will be ID as home label as home and we'll copy this so we'll paste it 1 2 3 4 5 so this will be about and this will be about this will be X experience this will be experience then this will be project this will be projects this will be contact and this will be contact all right now here what we are going to do basically we are going to create the menus here so I'll create a helper component here so this will be create menus all right now here what we are going to do before that let's create the main structure so I remove everything from here and here what I'm going to do I'll take a header component all right now for this one inside this we're going to take a naar and here let's take a class name so we'll do Max W screen Excel we're going to do PX of 6 we'll do SM PX of 8 then we'll do large exx of 16 we'll do MX of Auto we'll make this one as grid grid flow column we'll do py of 3 and SM py of 4 also we have to basically set the current active link that the current one that we will be clicking so for this one I'll take another uh I think we are getting some error here here okay we have to give close this so we'll take some State here so we do this one as active uh active link set active link and this will be US state of we make this one as home for the first time all right also we are going to do this one as another will take this will be our scroll active set scroll active and this will be use state of false here we are going to take use effect all right and now we'll do window do add event listener we'll do scroll here we'll take a call back and we'll do set scroll active will be true when window. scroll y will be greater than 20 all right now here in this header we're going to take a class name so we'll do class name sorry we'll do class name here and we're going to make this one as fixed we'll do top as zero we'll do W full do Z as 30 we'll do BG white uh I think BG white is fine now before that another thing we need to do I forgot sorry about that so I already created some ta in CSS config so that I'll just quickly copy from there and I'll paste it now I'll obviously not write all of this line by line so I already created those I'll just paste it and those custom classes we are going to use throughout this client section all right so as you can see that I just copied some of the classes that we are going to use so mainly we are going to use this BG green main class most of the times and we have some other classes also so now I'm going to use the same here so this will be BG white and this will be the custom Class 500 all right we'll do Transition all and also here we are going to basically check if this scroll active is true so here we are going to use this sadow MD we'll do pt of zero all right or else we'll do uh sorry we'll just remove this or else we'll do pt of four awesome now next inside this nav what we are going to do we'll take another div here now we are going to take a class name we'll do call start one we do call end 2 then we'll do flex and we'll do item Center all right now inside this we'll take another div here we'll take a class name we'll do cursor as pointer we'll do Flex gap of two we'll do font bold we'll do item Center we'll do text as 20px and we'll do text green main so this is the class that we are going to use most of the times all right now inside this I'm going to take another div all right now here we are going to take a class name so we'll do with as 40px height is 40 PX we'll do Flex justify Center we'll do item Center we'll do padding of three we'll do rounded h PX we'll do border green Main and we'll do BG green main all right now inside this we'll take a span here and we'll just take a capital P now inside this we'll take a class name uh here we'll do text as white and we'll take text as 25 X and we do font as bold all right after this span all right and this div we are going to take this portfolio all right let's save it let's see what we are getting so let me just refresh this and you can see that we are getting this uh style here so all the custom uh style is now applying so this is the basically the header text we are having awesome so now what we are going to do so after this we are going to take a UL we'll take a class name here sorry I'm going to take class name here make this one as hidden for large we going to make this one as Flex all right we'll do column start 4 we'll do column end 8 we'll do text as black and we'll do item center now here we are going to use this uh create menus that we we have create means we'll be creating so this will be create menus and here sorry we are going to pass this set active link as set active link we'll pass this active link and also you're going to pass the menu items so this will be uh get menu items which will be basically this menu items all right so now all of this we are going to receive there now obviously we're going to create this one in a minute so after this let's take a div here we'll take a class name so we'll take a class name here and uh for this one we'll do column start 10 we'll do column end 12 we'll do font medium we'll do Flex justify Center and item Center inside this we're going to take a button and this will be something like contact me all right now here we are going to take a class name we'll do py of three we PX of 6 we'll do border of 2 PX all right and we're going to do BG of white we'll do border green main then we're going to do text of black we'll do font same semi bold we'll do rounded large we'll do text I think text we have already taken let me check sorry uh we haven't taken text Excel we'll do tracking Wiest then for this one we are going to take a hover so we'll do hover we'll do sadow green MD we'll do Transition all and we're going to do outline as none so many classes so this is all about the uh button classes that we need now after this you have to also handle for the uh Mobile screen so you'll take another nav here so that is the reason we have done this one as uh if you see hidden for smaller devices so we are having this nav here so we'll take a class and we'll make this one as fixed we'll do large Hidden so for this one we're going to make this one hidden for bottom we'll do zero we'll do left zero we'll do right zero we'll do Z index as 20 we'll do PX of four SM PX as 8 and we'll do sadow T that's it now inside this we'll take a div we'll take a class name so for this one we'll do BG white 500 we'll do ASM PX of 3 inside this we're going to take a e and here take a class name we'll make this one as Flex W full we'll do justify between we'll do item Center and we'll do text as black now here again we are going to use the same so copy this and we'll pass it here all right so now I think everything is done so the thing what we need to do to start working on this create menus so go here so this will definitely receive this uh what are the things we passing we passing active link gate menus okay so receive active link gate menu items and set active link I think okay so now here what we'll do we'll return get menu items do map so this will be item now here we are going to return this link scroll so this we have to return return from uh sorry import from react scroll so let me just do it so we do import something from react scroll and we are going to import this link as link scroll all right so now here we'll do link scroll all right now here what we are going to do here we are going to basically render this item okay and now we have to use some properties here so the first thing we'll do active class here we have to use here and this active class will be active here we'll do two two will be this uh this item do ID then we'll do spy as true sorry we'll do smooth as true all right we'll do duration we'll do this one as uh let's make this one 1,000 and we'll do on set I think something onset active yeah so here we'll take a method and here what we are going to do do set active link as item. ID also you have to take some class name so we do class name here now here let's take template literals we do PX of 4 py of 2 MX of 2 we'll do cursor pointer we'll do [Music] animation over then we'll do inline block then we are going to do relative sorry this will be relative and then here we are going to basically check if this active link is equal to equal to item. ID so in that case we are going to pass the sorry that is true we are going to pass the following so we'll do text green main we do animation active now these classes I'm going to add it in the global CSS and we'll do Shadow uh shadow green main or else uh this will be text black we'll do font bold and we'll do hover uh for this one we'll do text green Main let's format all of these now let's save it and let's see what is happening all right so we getting error that object are not valid is if you want to render use an array instead okay so I think the issue is uh create menus okay sorry I think we have to render item do label not the object let's see now awesome so now you can see that we are getting all of these now here we are using some custom class name so you can see that we having animation hover or something like that so for this one I am going to use the global CSS that I have already WR so I'll just copy this and I'll use the same in this global. CSS file and I'm going to explain that what are the classes that we are going to use throughout this particular application all right so as you can see that I'm using this uh Global CSS and here I have already added all of these uh classes here all right so the same thing you can basically use now there are some of the classes that we are going to basically use in throughout this particular application for different uh sections so I think that's all about this naar section now let's uh start working on the homepage so you can see that this over and everything is looking very nice if I go for this smaller device so let me just go to the right so you can see that we are getting on the below here all right so mobile view I think this is looking fine but okay so there some issue with this content this is going out so let's do one thing uh let's go to our mobile section and here we are going to give this uh overflow uh overflow X Auto let's see okay now this is fine and if I go for the larger device and this is looking fine all right so now naar is done so let's start working on the home section all right all right so let's start working on the homepage so before that you can see that I created a folder here asset and I added two image here all right now here if you uh see here so this is one of the image and this is the AI image that I created now funny thing is that this is basically my image so there is a website I just found so what I've done I just converted this one to uh this AI image if I just show you so this is the image of mine so you can see that so this image basically I'm using here all right now obviously you can change or whatever you like you can add your own image here it's up to you so now we'll go to this uh client View and I'll create a folder here and this will be a animation rapper and this rapper we are going to use in most of the places so I'll create here quickly animation rapper and here we'll do index. uh JS so here we'll do use uh [Music] client and we'll do export default function we'll do animation wrapper now this will definitely receive something so the first thing it will receive the children it will also receive some class name and also it will receive the props all right now here uh we are going to return so first I'll import from framer motion so this will be motion so it will return uh motion do div all right and here I'm going to pass the children now here we'll pass some properties so the first thing we'll pass the initial so we'll do initial as off screen all right we'll do while in view this one we will do on screen then we'll do viewport so here we are going to make ones as true we'll also have to use the amount we'll do this on 0.8 we'll do the class name which will be the class name that we'll be receiving all right also if there are any props we're going to just D structure here that's it now let's go to our home component so we'll go to client view then homepage now we'll start working on this particular so let's quickly create the homepage so I remove this one from here don't need and here I'm going to take a div and we are going to use a class name here so we'll do Max W screen Excel we'll do Mt of 24 we'll do PX of 8 we'll do excel PX of 16 we'll do MX of Auto and we'll use the ID of home now here we are going to pass this animation wrapper all right now here we are going to pass a class name so we'll do this one as grid we'll do grid flow row sorry do we'll do grid grid flow row we'll do as grid flow column all right we'll do grid rows two for MD we'll do grid rows one we'll do as GD calls of two do gap of 8 do py of six and for SM we're going to do py of 16 all right now here uh inside this we are going to take another motion so you have to import it let me just import it from here so we copy this and then we're going to use this motion. div now here we have to pass some variants now here I'm going to create a set variants and this one also we going to use in most of the places Now to create a set variance you have to basically create some config or basically the variance so here what we can do we can create a function here and let's make this one as variance now you have to pass some property so we are going to return here so the first thing we're going to return off screen and here we are going to pass a y which will be 150 and we'll do opacity as zero and also have to create the on screen all right now here we are going to take a d we're going to take this one as two all right now here we are going to take this one as and we have to return something so the first thing we are going to make the Y is zero opposite we are going to make basically we are changing the opposite from 0 to one here and also we are going to pass a transition sorry I think this is wrong we have to do Transition and here we going to pass a type so we're going to use a spring type of transition and now we are going to pass this duration here that's it this will create the variants now here to set the variance we can basically take your const set variant we'll take use memo here and now here what we're going to do basically uh call this variance and we pass it empty dependency there should not be any dependency all right and let's do one thing let's use the class name here instead of this animation paper in this div all right now inside this div what we're going to do we'll take another div here we'll use a class name so for this do Flex we'll do Flex column we'll do justify Center we'll do iton start we'll do row start two and as we'll do row uh row start one all right now inside this we are going to take a H1 now here we are already receiving this data here correct now let's do another thing I'll go back here I'll just log in so we'll do suum 1 2 3 suum 2023 I just login and instead of this I'll change this on the I have creative uh let's make this one Creative Design creative development uh experience all right now let's uh save the let's make this one small only let's add this all right so now here what we are going to do we are going to basically get this data here so this will be data dot this is the heading I hope you remember now what we're going to do we do split here and we'll split with space and then we'll do map we'll take here item comma index now what we are going to return we return a span here now we are going to basically take a class name for this span and the class name will be taking so we'll take this one so here we are going to check if this index is equal to equal to 2 or index is equal to equal to 3 so we going to for this one we are going to use it different class name or else we'll use a different so for this one we'll do a uh let's do text we'll do green main all right what else we'll do uh text we'll do black that's it now here uh we are going to pass this item all right for this H1 we're going to take some class name so we'll do a MB of four we'll do text uh 3 XEL for large we're going to do text 4 XEL all right for Excel we're going to do text uh six Excel we'll do item uh start no sorry I think we don't need we'll do font medium and we'll do uh leading uh normal that's it so now let's save this let's see what is happening here we are getting can read property of split of undefined all right so now here what we can do we can simply check here if this uh data oh sorry I I know what what is the reason so because this is coming as a array so what we can do we can basically check here if this data and then data do length if this is true or else we're going to render something like null here now here what we have to do to do data of zero now let's save this let's see all right so you can see that now we are getting this one here now here uh what we can do uh let's use some space here okay so I have creative development experience so this is coming from the database all right so this is one thing now next what we are going to do so after H1 we are going to take another paragraph here all right and here we are going to do the same thing what you have done here so we take this if data. data length is true or else uh this will be null so we'll do data of zero dot uh we'll do dot summary and let's use the same here let's see what we getting this is my carrier summary all right so now here let's use some class name so we'll do class name here uh what we can do we can do text as uh black we'll do Mt of four we'll do MB of 8 and we'll do font Bol awesome all right so now next thing what we are going to do so after this we'll take another uh motion. div and here uh we are going to basically render some of the class name so let me just uh open this react icons uh website uh let me just search for Facebook so we are having this one or which one to take this I think this is fine f from font or something I think let me just take it so we do import something from this will be react icons I think we haven't install on let me just install install this one npm install react icons all right so we'll do react icons slf so we import this one then we have I think fa uh [Music] LinkedIn then we have fa Instagram I think also fa Twitter I this for will be fine all right now here what we are going to do inside this uh we are going to render all of this and let's use also some class name for this one so we'll do this this one as fleak we'll do uh fleak and then what else we'll do gap of three and now let's render f Facebook we'll do fa Twitter we'll do fa LinkedIn and we'll do fa Instagram now here uh we have to use some class names we do whe of seven height of seven and we'll do a BG green m so let's use all of this here here and here let's see what we getting first okay so I think we are getting here but this is fine let me just do one thing we'll copy this from here and I think we have to pass this color here so we'll pass it here and this will be uh one and have to do rgba so copy all of these and we don't need this BG I think this is a mistake so let me just remove this let's see what so now this is fine uh let's do it like 9 let's see how this is looking we do some AR uh we'll do some custom value 40 and then if you do 40 PX let's see yeah I think this is fine so we use the same for all of these awesome so now this is done all right now next thing we have to work on this uh I think we can also use some uh sty sorry some animation Here Also let's do that so we'll do here initial and for this one we'll do a scale we'll do this one as zero let's make a animate so for this one we'll do a rotate of 360 and we'll do scale as 1 all right we'll do a transition so for transition we're going to do a type we'll do spring all right and we'll do a damping uh we'll make this on as 20 then we'll do a stiffness we'll make this one as 80 and let's make a D we make this one as four this is fine next what else we'll do while over so for this one we'll do a scale we'll do 1.2 and we'll do a rotate of 360 all right and also you can do a while tap now another thing I just have to check so let me first check how this is coming based on that we can change it I think this will change all of this at once because this is we are doing in the rapper level we'll do a rotate here so we'll do minus 360 and we'll do a border radius we'll do this one as 100% let me just format and save this see this is fine but if you want you can definitely do it like each and every time on click I think that will work but I think this is also looking very nice so so you can see one click this is coming all right and also let's do one thing let's give a cursor pointer all right and let me just check how this is looking if I do single each and every time so I'll do it only for this Facebook and let's see so I'll cut it from here uh sorry and we paste it here and now I'll copy or sorry I'll all of this and I'll paste it for this Facebook div so in that case I think this should occur only for this Facebook yeah I think this is looking nice all right so what we can do right for this one uh let's create a config here so we do const soal icon so we don't have to do multiple times and here we are going to make this one as uh what we can do we'll do this one let me just think okay so we'll do something like this we'll do a ID here and this will be Facebook and we'll do icon here and this will be fa Facebook F okay and now let's copy this and I'll paste it four times so we'll do this one as Twitter so this will be AA Twitter then we'll do Instagram no sorry we'll do LinkedIn so this will be fa LinkedIn and then we having fa Instagram so this will be Instagram now for all of this I'm going to use the same property here so I'll paste it here same for this one this one and this one so now what I'm going to do right I'll just map this so we'll do social icons do map so this will be item now what will happen see this will return this uh this will return this motion. div for each and everything okay and we'll paste it here instead of this fa we are going to only render this uh item do icon I think what we are using let me do it icon so we'll do item Dot icon all right I hope you're getting Also let's use a key here key will be item. ID that's it so now we don't have to do it multiple times same thing so we can just remove all of these from here and this is done so now if I know format and save this let's see see okay so now this is done all right so after this uh what we're going to do we take another motion. div now inside this uh we will take another motion. div now here uh let's use a class name so for this one we'll do a width of 400 PX height of uh 400 PX all right and we'll do this one as a relative and we'll do BG green Main awesome now inside this we'll take another div here and we'll make this one as class name we'll do absolute we'll do same thing here withd and height 400 and then what else uh we are going to use a top as uh 40 PX then we'll do left as Min - 30 PX and we'll do rounded large and we'll do uh we'll do a border of uh let's do a border of 6 PX all right and we'll do a border uh black uh we're going to use black here so let's format this and let's save it let's see what we are getting all right so you can see that we are getting this one here but I think there is some problem so I to give here okay all right so you can see that we getting this one this is fine now next thing uh what we are going to do uh so in this div we are going to take a class name we'll do this one as Flex we'll do W full and we'll do justify end all right and then so let me so okay so this is fine so now inside this sorry after this diff we are going to import image from next image and we're going to use the source so let me just import it uh we'll go here we'll do import uh AI image from so we'll go to asset and we'll do uh AI image all right so now here we going to use the source as this uh AI image all right we'll do alt so this will be profile pick or picture then we're going to use a layout as responsive all right we'll do a quality uh as 100 uh we'll do a height as 300 width as 300 we'll do class name we'll do absolute and we'll do a top of um Min -5 PX we'll do minus5 PX let's save it let's see what we getting all right so you can see that this is fine all right so this is fine now and this is looking very nice another thing let's try once uh let's see if this is working or not so what we are going to do right we'll take a uh ra here so let's take const uh container R and we'll do use ref of sorry we'll do use ref of null all right now here what we are going to do basically scroll down and then I think we are having this div so for this div we're going to use a RI as this container RI and for this div we're going to use a drag property and we'll do drag constants and this will be this container uh ref all right all now let's save this and let's see what is happening so if I now go back uh let's awesome so you can see that this is working fine so you'll be able to basically move this image here awesome job so this is working fine so I think with this uh this homepage is basically done and everything is done so now let's start working on this about page component all right everyone so let's start working on the about view so for this one what we are going to do the first thing is that I lck this uh value here because we are already getting the data from the API so instead of passing like this what we can do we can basically check here if this about section data do length is true or this will be empty so we're going to do about section data of zero so only the first object we are going to pass so now let's see what we getting so if I now just go to inspect and go to console and let's refresh this so we getting this object here you can see that we have to now render all of this so let's start working on the uh J exper so remove from here and let's take a div and we'll give a class name we'll do Max W screen Xcel uh we are going to do Mt of 24 MB of 6 ASM Mt of 14 SM MB of 14 PX of 6 we'll do SM SM PX of 8 and for large we're going to do PX of 16 and we'll do MX Auto all right now here we are going to import the animation wrapper and for this one we're going to take some class name so we'll do this one as rounded sorry we'll do rounded large we'll do W full we'll do grid flow row we'll do display as grid all right we'll do grid uh sorry G columns one then we're going to do for as we do greed calls 3 all right we'll do py of 9 we'll do divide Y2 all right for as we are going to do divide Y 2 or let's make this one as zero and what else we are going to do for SM we are going to do divide X of two for this divide we are going to use this color uh so let's use this one so we do has 0 D B7 60 all right and now here we are going to do BG white 500 and we'll do J index of 10 now here also I think we can directly use our this class sorry let's make this one as divide green main all right and this is fine now what we going to do we have to render this list of projects and those things so for this one we'll create a data here so let's create a array here so we do about data info something like that and here I'll take a name so name or let's make this one as label so we'll do clients and the number or value will do value will be basically this data of this number of clients that we are having or else this will be zero now let's paste it two more times so we'll do this one as projects and this will be number of projects and at the end we are having experience so this will be year of experience so this will give me the uh this about data info that we'll be getting from the API so now what we're going to do we basically map it so we'll do about data info. map this is info item and here what we are going to do uh let's return motion. div sorry and we have to import motion also so let me just import it so do import something from frameart motion and this will be motion all right now here what we are going to do use a class name so let's use a class name and for this one uh we'll take template literals we'll do Flex item Center and justify start and Here Also let's take index so we are going to give some uh based on some index property we are going to give some different styles so the first thing we are going to check if this index is zero so in this case uh what we're going to do we do as we'll do justify start all right or else here we're going to do if index is equal to equal to one so for this one we'll do SM justify Center all right or else what we can do we'll just to SM justify end so one will be on the first the middle one will be in the middle and the last one will be at the end so that is the reason we are doing this calculation all right and after this uh we are going to take some more Styles we'll do py of 4 we'll do SM py of 6 we'll do W 8/ by 12 we'll do PX of 4 smw Auto we'll do MX of Auto and we'll do SM MX of zero all right here we are going to pass some other properties so let's pass a key which will be our index and also we going to pass a custom property here now this custom property will be basically the duration that we'll be creating sorry not duration so this is a duration property we can give which will be 2 plus this index that we can pass that's it and now we have to basically create the variants now for variance I think we have already created in our home so let's use the same so we can go here and copy this variant from here and we'll paste it here you if you want you can also create a common function for this and at the end what we are going to do you have to basically use this have to set the variance we'll pass it here and we have to import use memo now what we are going to do we going to pass these variants as this set variance now here inside this what we are going to do we will take a div here and let's take a class name so for this one we'll do Flex M of 0 W of 40 and smw auto now here we'll take another div we'll do a class name of flex Flex column and here we'll take a paragraph and we are going to render uh this info item and this will be dot Value Plus and here going to pass a class name so let's use a text of 50px and we're going to do text green main also we do font bold let's format this and after this uh we'll take another paragraph and here we are going to render this is uh info item do LEL and for this one also we are going to use a class name we'll do text as 25 PX and we'll do font as bold let's write it and also you're going to do a text of black awesome so now let's save it let's see what we getting all right so this is fine now you can see that we are getting the data here so you're having 30 plus client 30 plus project and FL five plus years of experience and this is looking nice so now what we are going to do basically we have already I think I have already used this image here that we are having about me image so this one we are going to basically render all right so now what we can do so after this we have to take another de let's do one thing I'll just divide these two parts I'll take another div here and for this one we'll take a class name and here I'll make this one as W as full and we'll do flex and I'll just paste it inside this so now I'll save it all right so now this is fine so now what we can do we can now go here and after this div uh we can take another animation rapper and here we'll take a class name so we'll do p T of six all right now here we'll take a div we'll take a class name we'll do Flex Flex column then we'll do justify Center we'll do item Center we'll do row start two and we'll do ASM row start one all right now here we'll take a H1 and here we are going to basically render The Heading of this particular section so that will be basically the heading text that whatever you want to add so for this one I'll take a heading text here so let's say take const heading text and this will be something like let's give y hire me for your next project something like that so now what I'm going to do I'll basically map it and based on that we'll give certain uh Styles so we'll take a class name we'll do leading 70px we'll do MB of 4 text 3XL large text 4 XEL and Excel text 5 XEL also we going to do font as medium all right now here I'm going to do heading Tex text do split I'm going to split it with uh space and then we'll map it so we'll take item comma we'll take index and here I'm going to basically return a span all right and here I'm going to just uh return this item here and let's take some space all right now here uh for this span we take a class name so for this one we'll take a template literals so now here what we're going to do will basically check if this index is equal to equal to let's see here so 0 1 2 3 4 5 6 something like that now these all all the things whatever I'm doing what like based on your convenience you can basically change change all of these Styles so here I'm going to do text uh let's make this one as green main or else this will be we do text as white uh or sorry black and I think this is fine and now after this what I'm going to do I'll take another paragraph and I'm going to basically render this about me so you're having data dot I think we are having about me for this one we're going to use a class name we'll do text as black also you're going to do margin top of four margin bottom of eight and and we'll do font as B let's save it let's see what we getting all right so you can see that we are having this dummy data updated and we are getting this color here on the last one all right now next we have to basically render those two uh image and on the right side you have to render the skills so for this one I'll take another div here after this so we'll take a div and let's take a class name uh so this will be grid uh we'll do GD flow row we'll do ASM GED flow column we'll do greed calls one for as we're going to do sorry we'll do greed calls of two and gap of eight all right now inside this we'll take animation reper we'll use a class name so we'll do class name is equal to we'll do Flex W full and after this uh we are going to take motion. div we'll use the same variant that we have done so this will be set variants and also for this one we'll take a class name so we do height of full width of full and padding of for now inside this we are going to take a image so let me just import this uh about me image so you're having import about me image from uh we have to go to assets and then this will be about image.png so we are going to use this as a source that's it all right so after this we're going to use the alt so this will be about me and then we'll do layout as responsive uh we'll do a height 414 with 58 and we'll do quality as 100 that's it all right so this is done now after this we're going to take another animation rapper here for this one we'll make this one as class Flex we do sorry we'll do Flex item Center we'll do W full and P of4 now here again we'll take a motion. div we'll set the variance as set variance all right and then we're going to use a class name so this is for uh to render all the skills so we'll do G gap of four G calls of three we'll do height of full Max height we do 200 and we'll do W of full all right so now here what we going to do we'll basically take the data and we're going to map the skills that we are having but before that we have to split it because we'll be getting in a comma separated value so this will be map this is skill now here I'm going to return m.de all right now here for this this one uh we have to create a variant so we'll pass a variant and this will be skill item variant so this we are going to create before that let's give a class name so for this one we'll do W full we'll do Flex we'll do justify Center and item Center all right and inside this what we're going to do we take a button so let's render this skill and here we are going to take a class name so for this one we'll do uh what we can do we can do py let's take a py of three width as 160 PX we'll do PX of 6 we'll do border of 2 PX then we are having border green men all right then we are going to take a BG sorry to take here BG of white all right now inside this we going to take a text uh text will be black we're going to take font semi bold we'll do rounded large all right we'll do text as Excel we'll do tracking widest for this one we'll do hover and we'll do Shadow uh green Main all right we'll do Transition all uh and also you're going to do outline as none that's it now let's go here and I think everything looks good the only thing is that we have to create this variant so now let's copy this and now here what we are going to do let's go outside of this and we can create here so we'll do basically create a const skill item and for this one we'll do a HD hidden property and hidden will do y of 20 and opacity as zero all right and then we'll do visible property so for Visible we're going to make the Y as zero and we'll do opacity as one and we have to remove this all right so now I think everything is done so now let's save it and let's see what we are getting all right so this is fine uh let me just refresh this all right I think there is some problem this part we need to check sorry I think we have to split it with comma now let's see all right uh and also we can do another thing so let's give some ellips is here and also I think there is some problem with the image so that part also you have to check but before that let's do here and we'll do white space no WP we'll do text ellipses and let's make a overflow as hidden let's save it let's see all right so now this is fine and also I think let's see okay we have to give this one as Source awesome so now you can see that we are getting the data here so this is the SK if you try to add a new one so let's say I try to add here so I'm in the admin view let me just log in so Lum 1 2 3 and the password is suum 2023 so let's go to about section all right so let's add a new skill here so I'll add here Java let's add it now let's go and refresh so I refresh here let's see awesome so you can see that Java is getting uh applied here so now this is done so this homepage and the about page is now completed another thing I think we need to do here and that is we have to give your ID so we do ID here so I will give this one as about all right so this is fine so this part we have to check so now this is going to home and if I click here this is going to about view so now next what we are going to do will be start working on this experience section so experience section will be basically both experience and education will be showing as a timeline view so that part we going to do in the next video all right so let's start working on the educ sorry experience view so let's go to our experience component so we are having client View and then inside we having experience here let's open this now the first thing what we are going to do first we'll check whether we are passing the correct data or not so we having Education data and the experience data here and let's log here and let's see what we are receiving so we having Education data and and the experience data so we log it here let's go to console so we getting array of two and one so we getting the data here so now what we are going to do first thing is that we have to render this header and this header component will be mostly same with this about me component so no need to rewrite again so first let's remove this from here and here let's go to rot component and then we going to copy this wrapper here and paste it uh then we have to close this instead of about this will be experience all right now inside this what we can do uh let's let me just close this here and we can basically take or let's write it here we'll take a div here let's take a class name so we'll do grid grid flow row we'll do as grid flow column we'll do greed calls of one we'll do SM greed calls of two and gap of eight now inside this we're going to take a class name we'll do a uh sorry div and then class name of let's make this one as Flex Flex column and we'll do gap of five and here we're going to take the animation rapper let's take a class name so for this one we'll do py of six smpy of 16 and here I'm going to take a div inside this we take a class name so we'll do Flex Flex column we'll do justify Center item Center we'll do row start of two and SM will do row start of one all right now here what we can do we can basically take the same H1 that we are using uh here also so I'll copy from here and we'll paste it here so the only difference will be instead of header text we going to make this one as my experience all right or let's do and education something like that and here we are going to make this on if item index is one or index is equal to equal to uh three and I think this is fine now here uh what we are going to do we'll be rendering the item and I think this is fine let's save it let's see what we getting so we getting this one here so this is fine but we have to bring this one in the uh middle okay I think this structure is fine let's do one thing instead of doing like this what we can do you will only show my experience here and here we'll show my education instead of showing all at once so what we can do right we remove this my and education part from here and only we are going to check if this index is equal toal to one so on the left side will will only show my experience right side will show basically this my ucation so I think for now this is fine now let's go here and after this what we going to we'll take another animation depper now here I'm going to take a div we'll take a class name we'll do flex and we'll do W as uh full all right now here uh what we'll do we'll take a motion. d so let me just import it first so we do import from framer motion and this will be motion all right and here we'll take motion do div and we'll take a class name here we'll do container now here what we going to do we import timeline component so we do timeline from mui lab that we have already used this one and this will take a property so for this one we are going to pass a PO which will be right all right now inside this what we are going to basically do we have to map the data that we'll be receiving so receiving this X experience data so what we'll do we'll do basically this experience data and then experience data do length if this is true or else this will be null something like that and here what we going to map basically so first thing we'll start with uh do experience data. map this will be experience item and here I'm going to start with timeline uh item so this is the first one so having time line item now after this we have to take timeline separator all right and inside this we have to take timeline uh I think it is dot timeline dot all right now here what we're going to do use a class name so we'll do BG green main all right and here also we are going to use a timeline connector so we'll do timeline connector so for this one also we're going to use a class name and we'll make this one also as BG green main all right so this is fine now once the separator is done we have to create the content so to create the content we have to use this timeline content all right and inside this we have to create the content so we'll take a div here and here we'll take a class name we'll do border as 2 PX all right P of four we'll do rounded as seven let's make this one as 8 p X okay and then we'll do border green Min and we'll do empty of 14 PX and mL of margin left off soor you to take outside mL of 16 PX all right now inside this what we are going to do we'll take a p now here we are going to take a class name so we'll make this one as font bold and we're going to render this experience item dot duration let's take another H3 here and here I'm going to render uh we'll render this experience item. company all right and here I'll give a comma let's take a space here and after this we're going to take experience item dot location for this H3 Also let's take a class name we'll do font extra bold and we'll do empty of two now after this H three we are going to take another paragraph here and I'm going to render experience item do po here we'll take a class name so for this class name again we'll use the same here so we copy this and we paste it here that's it and at the end we'll take another p and we'll do experience item Dot job profile and here what we can do we'll give a class name we'll do font extra light and we'll do margin top of two and I think this is done so now let's format it and now let's save it let's see what we getting all right so you can see that we getting the result here and the same logic or basically same structure we have to follow for this education raer also all right so now what we are going to do so after this uh let's do one thing let's copy this all whole structure and we're going to paste it here now we have to change couple of things only so this will be my education instead of experience and rest everything will be same this will be Education data and then Education data and this will be education item instead of experience item and here what we are going to render so the first thing we're going to render Education data do Year all right and then we going to render College this will be an item sorry and we're going to remove this and at the end we are going to render the degree so this will be education item dot degree and we don't need this all right and for this one I think everything is fine let's save it let's see awesome so you can see that we are having two education so you're getting the data now uh let's try to add a new experience here so go to experience add a new let's say software or web developer we'll give company as let's say Amazon DE will give 2023 to present let's give a location here India and job profile I'll give the same here so let's copy this and I'll add this info all right so now we are getting this data here so now let's refresh this and let's see what we are getting so you can see that we are getting now two data now let's try to add another one so we'll add uh software senior or let's make this one software developer we give company as meta duration will give anything like uh 2023 to present location will give USA and job profile software developer and let's try to add this info this is added let's go to our education let's try to add another one so you'll give here MSC see anything based on your convenience you just change this data Year I'll give like 2019 to 2021 College I'll give dumi College all right let's try to add this info so it's added here let's refresh this so you're getting the data here and this is working fine all right so now three section is done home is done about is done experience is done next we'll be working on Project and next at the end you have to start working on the account section so let's start working on this project section in the next video all right so let's start working on the project uh view so let's go to our project uh component I'll close this one from here so we are having project here all right so I remove this one we already getting the data from our main page.js file and here let's use the same class that we are using here so I'll copy this main rapper class we'll paste it here all right now here inside this uh what we're going to do we take our animation rapper let's take a class name so we do Pui of six smpy of 16 all right now inside this uh what we can do let me just check I think we can use the same that we are having so this part from here so we'll copy this and we'll paste it here now instead of heading text we are going to do this one as my projects and if the index is equal to equal to one we are going to show a uh green color and also we don't need this one let's say wait let's see all right so we having my projects here so now what we going to do basically uh here we will be basically showing some kind of Animation that because because you can have multiple projects so whenever user will scroll on the x-axis we'll be having some kind of circle so we'll basically show the progress that how much you have actually scrolled something like that how we are going to do that so for this one after this we're going to take a SVG here and for this one we're going to pass ID so ID will be progress we'll do with as 100 100 height is 100 and we'll do a view box so we'll do 0a 0a 100 comma 100 all right inside this we're going to take a circle and for this one we're going to use a CX as 50 we'll do Cy as 50 uh let's make this one then what we'll do we'll do a r of uh 30 we'll do a path length as one and at the end we'll do a class name so for this class name we're going to use a stroke and we'll do this one as black so normally this will be black now let's copy this circle again all right and now here what I'm going to do okay let me just first import this motion so we import motion from framar motion and here after this we're going to take a motion do Circle uh let's s close this one now here I'll copy the same thing from here all right let's paste it here now instead of this stroke we are going to use stroke as green main all right and also we're going to use a style here so for this style we're going to pass a path length now this path length will be how much we are uh progressing so this will be scroll X progress so for this one what we going to do we'll take a refi here so go top so const ref this will be equal to use ref of null all right and Here Also let's uh use the variance that we are using in all the other places so let me just copy this variants from here so we'll paste it here and also use this same logic that we are using so let me just copy this and we'll paste it here that's it now here what we're going to do we will basically import something and this is called use scroll so this is a hook now here you have to pass a container property this container will basically this will this will track this container based on this ref that we be passing let's make this one ref or uh let's make this one container ref so this will be container ref and here we'll be getting this SC X progress all right you can see that let's format this now next thing what we are going to do so let's go here so after this we're going to take another animation rapper and here we are going to take a UL let's take a class name so for class name I already created a class here in our style I'll use the same here so this is Project wrapper I can use the same using here but I already and that's why if you want you can convert this one to tnd and then you can directly use here so I think this is fine project refer and also you'll do a here also you have to pass a ra as this ra so this will Target this particular container I hope you're getting now inside this what we're going to do we are already getting the data here so this is the data this is the project data so we can basically check if this data and and data do length if this is true or else this will be null so now here what I going to do we'll do data do map will be item and here uh we'll also get the index and we're going to return return AI we'll give key as index and here let's use a class name so we are going to do W full Flex item stretch and we'll do cursor as pointer all right all right so now inside this we are going to take a div here let's use a class name so for this one I'll do border S2 we'll do W full so after this we're going to use a relative we'll do border green main we'll do a transition all we'll do rounded large Flex and flex column now after this what we're going to do we'll take another D here inside this all right now here let's take a class name so we'll do Flex we'll do p of four Flex column we do Xcel Flex row all right we'll do W as full we'll do item stretch and we'll do excel item Center all right now here we'll take another div let's take a class name so for this one we'll do Flex we'll do order of two for Excel we'll do order of one all right now here we'll take another div we'll use a class name we'll do Flex Flex column here we'll take A3 and we'll render the project name so this will be item. name and here we are going to use a class name so for this one we'll do text 3 XEL we do text black 600 we'll do capitalize and we'll do font extra bold that's it now after this we are going to take a paragraph here and we're going to render this item that what time you have created so this will be item. create at do split and here we going to split with t and we're going to take the first uh item here and for this one also before that let's take a class name also so we'll do text ASM empty of two we'll do text black 500 we'll do capitalize and we'll do font as bold that's it now after this we are going to take another div here all right and we'll take a class name so we'll make this one as G gap of two we'll do margin top of five GED calls three height of full we'll do Max height as 200 and at the end we're going to do W full now here what I'm going to do basically render the technologies that that I used for this particular project so this will be item dot uh this will be item. Technologies do split so you have to make this one as split so we going to split with comma this will be dot map this will be item soorry we'll give this one as take item and here uh what we going to do we'll take a div here all right and here I'm going to take a class name so for this one what we going to do we'll do a w of full we'll do Flex we'll do justify Center and we'll do item center now for this one what I'm going to do I'm going to use the same structure that I've used for this skills so we can go here and you can copy this uh button component that we have created and we can paste it here that's it all right now here what are the things we need to basically change here uh let's see for now I think we can remove this width and instead of this skill we have to render this take item and I think this is fine now what else we need to basically do so now what we are going to do we have to also first let's check what we getting let's save it we are getting use memo all right so we have to import this use memo here let's see all right ref is not defined sorry we have to use uh we are using R here so let's we have to use container r all right let's go to our about project and we are having this uh Amazon clone here and this one let's make this one as width as 160 only so we do if I do width as 160 how this is looking right let's see here I think we have given let's give wi here 160 PX yeah I think this is fine also let's make it how much we can do uh I think this is fine let's go here uh let's remove it uh how much let's see we'll do 100 PX this is fine and what else we can do 100 let's see if I do little bit we'll do 80px and here let's make this one as 80px only now the only change what we are going to do here we are going to make this one as t next EXs let's see if I now save this all right this is fine now if I now increase it 120 yeah I think this is fine let's make this one as 120 only 120 and here I'm going to make this one as G calls of two instead of three and I think this is fine okay also here it is coming uh between I think we have to make this one as Flex start yeah so I think we are using item Center here let's see we'll do item justify start okay now I think this is fine all right every so now what we are going to do we already having this uh format here so we need some button here below so let's do one thing uh let's take another div here so we'll take another div and let's give a class name we'll give this one as absolute all right and let's give W full bottom we're going to give zero we'll do justify Center and we'll do flex and we'll do gap of two all right now inside this uh we are going to use button so the first one will be our website link that we will be using and then uh at the end uh we'll be having another button and this will be our GitHub button all right now for this one uh let's use the following class name so we'll do class name we'll do padding of two we'll do text white 500 we'll do font semibold we'll do here text as 14 PX all right after this we'll use tracking wides uh widest and then uh what else we'll do BG green main we'll do Transition all and we'll do outline none all right the same class we are going to use for this button Also let's format this and let's save all of this let's see what we are getting all right so this is fine let me just check so I think text is not getting all right so now this is fine so now what we are going to do uh basically on click of that it will go to that particular uh uh link so for this one let me just log this data and let's see what we are getting and also I don't think we need this set variant in this so you can remove this part so now let's log here this data let's see all right so now if I now remove this think we are getting this one so we are having this GitHub and the uh website so what we can do we can basically take const router is equal to use router and then here we can basically do something like this so we'll give one click and this will go to router dopus and it will go to this item do GitHub now same for this one sorry this will be website not GitHub and for this one this will be uh GitHub let's save it so now let's see what is happening if I now close this and let's say try to click here so you can see that it's going to this uh netflix.com and if I try to click on this GitHub I think for GitHub also you have given the wrong uh item do all right so I think we have given same link for both so basically based on your convenience you can change this and I think this is fine now let's check another thing because currently we have only two projects so let's try to modify here so what I'm going to do this is for some testing purpose so I'll create another um so this is only for testing so I'll create another variable here so this will be let updated data and this will be I'll just destructure this data multiple times so let's do it four five times so copy this 3 4 five and then I'm going to use this data here and let's paste it here let's save it and let's see what we are getting now now if you see if I scroll down if you see this is happening so if I go to at the end so this circle will be full uh full and then based on that this progress it will show and this is looking very nice all right so now I think this is done and now based on your convenience you will be able to change it so let's say I'll add a new something here so that will be automatically reflected here correct so let's check that one whether that is working so I'll go here uh add a project uh three and Technology I'll do react JS comma nextjs website I'll use the same that I'm using here and GitHub Also let's try to add this so now this is added if I now refresh this although we are just copying all of this but we will be able to see the updated data here so you can see we are getting project 3 and the data is now updated and this progress and everything is working fine all right another thing we need to do we'll go to the top and then this one we have to give this one as project all right so this is another thing we need to do and I think almost everything is done and let's go to experience I think we have given this one as projects let's save this so now if I try to go to projects think this is not working let me just check what we have given in this SAR or else we have to fix this so we given projects here okay there is some issue so if I click here it's not going so the this part we are going to fix in the next video but for now the main structure is actually completed for the projects so now at the end only one part is left and that is contact so that we are going to do in the next video so what basically we are going to do if you think that okay so how if some person is visiting this particular website or portfolio of mine how they will contact me so generally we usually have some kind of email service and based on that they will be able to send email but here I'm going to do a very interesting thing you can see that we are having this contact here right so what will happen in this contact we'll be having a form whenever user any user or any H or let's say try to contact you so they will give their info and once they'll submit we'll call a backend service and then that info you're going to store here because this is admin website and you are the only person uh that will be having access for this part it will be very very easy for you to track down that how many person basically reach you so you'll be able to see all the information here and from here you'll be able to take the Gmail of that particular H or basically the person try to contact you and based on that you will be able to contact that particular person all right so let's see how we are going to do in the next video all right so almost everything is done so before that this issue we need to fix so the reason is because in the na we have given this one as capital project so let's make this one a small so this will be project and here we are going to make this one as project and now this should work so now if I go to try to go to project so it's going to the projects so here we are having some issu so this part we are going to check this is because of some spacing but let's start working on the contact page first so the first thing is that what we going to do we'll be creating a models so here you will be creating another file here so let's give this one as contact. JS so I'm going to import mongus from mongus and then we are going to do const contct schema this will be new mongus do schema and what are the things we need we need a name which will be a string we also need email which will be a string and also you need the message that the person is sending so this will be also a string and here what I'm going to do I'm going to pass the timestamp as true all right now here we'll do const Conta this will be mongus do models do cont or this will be mongos do model of Contex conts let's make this one contexts comma we are going to pass this contact schema then we going to do export default contact awesome so now next go to our API and here we're going to create two folder one will be add and second one will be get so for add let's create the route. JS so for this one it will be exactly same so you can basically copy from somewhere so let's copy from here and here I'll paste it now the only difference will be instead of contact uh this will be sorry instead about this will be contct all right this is done uh next we are having gate so for gate also this will be exactly same so you'll copy this and we'll create a new file so this will be route. JS and we'll paste it here instead of about this will be find the all the content and this is done all right so now this is done now next thing what we going to do we start working on the front end part so let's go to our uh components then we having contact now I'll just close everything else here all right now here let's do one thing the first thing is that we'll use the same wrapper class that we are using so we'll copy this from here and we'll paste it here and we give a IDE of uh here uh this error is coming all ID is already present so we make this one as contact awesome so now next thing we'll go here and let's do one thing let's copy this part from here or let's go to our project section yeah I think we can copy the same thing copy this one from here paste it here and it will take another div instead of um my projects we'll make this one as contact me something like that let's format it and save this and let's see what we getting all we're getting internal server error so you have to run this all right so you're getting contact me so now what we going to do we create the uh form controls so we go here and let's create our controls we create controls here so here the first thing we need a name so this will be name then we are uh having a placeholder this will be enter your name all right and next we having a type type will be text and we having a label label will be name let's copy this and we paste it two more times so name will be email enter your email type will be email and label will be email and this will be message enter your message type will be text and level will be message all right next uh we'll go here and then uh what we can do uh let's do one thing let's take also animation refer here so we do animation rapper and we are going to cut it and let's use a class name for this one so we use a py of six now after this uh we are going to take a div let's take a class name for this one we'll do text Gray uh 500 we'll do here relative that's it now after this we'll take another div we use a class name we'll do this one as container and we'll do PX of five now we'll take another div here we'll give a class name we'll do this one as W full all right now here we have to Now map these controls that we have created so this will be fak WP and we'll do minus M of2 so now we'll do controls do map this will be control item now here what we going to basically check if this control item dot name if this is equal to equal to message so in this case what we going to do be rendering a text area or else will we will be basically rendering uh we'll be rendering a uh input here all right so what we can do basically we can take another div here and then inside this we'll take a class name we'll do padding of to W of full then we'll take another class name here and here we'll do class name we'll do this one as relative all right now here we are going to take a label inside this we are going to render this control item do lbel all right and for this one let's take a class name we'll do text ASM and we'll do text Gray uh 500 or let's make this one as a black all right after this level we are going to take a text here all right now here we are going to take ID which will be control sorry this will be control item do name then we'll be having a name which will be control item. name all right then we'll be having a value so for Value we are going to take a state here so let's take a state so do const data or let's make this one as form data set form data and this will be US state sorry this will be UST state of initial form data so here we are going to do const initial form data this will be equal to name which will be empty email this will be empty and also you're going to do a message which will be also empty so now here we'll go and then we'll pass this will be form data of this control item. te this will be value also have to take one change so you do take the event and this will be set from data sorry this will be set form data which will be the form data D structure and here we are going to basically do what we going do we can do control item. name this will be equal to e. Target do value that's it also let's take class name so for this one we're going to take a class name we'll do W as full we'll do border green main we'll do border as 2 PX we'll do BG as white all right we'll do rounded we'll do border I think border we have already taken what else we can do we'll take a height height of 32 we'll do text base all right we'll do outline as none and we'll do text as uh let's make this one as black all right we'll do py of 1 PX of 3 we'll do resize none we'll do a leading of six all right and we'll do I think for now this will be fine I think this is enough now next thing what we are going to do we copy the same structure so let me check here so where is that okay so here we have to take so here we'll copy the same structure and we'll paste it okay now instead of this text area this will be input I think we can s close this one now here we don't need this uh resize none this is not required and rest everything will be same all right now let's save it let's see what we are getting all right this is fine the only difference is that okay I think we need to remove the height from this input s we remove this one let's save it let's see awesome okay so now this is done so the only thing is left is basically we have to take a button here so now let's go here so after this we'll take another div we'll take a class name and we'll do p of2 w as full and here we are going to take a button so we'll do a button and this will be send message and now for this one uh I think we are using button in some other places right which one to use I think we'll use the same or let's write the class name better so we'll do here py of three large we'll do py of 4 we'll do PX of 12 large PX of 16 we'll do text white 500 we'll do font semi bold we'll do rounded large all right then we'll do text uh 2 XEL we'll do tracking widest we'll do BG green main all right and we'll do outline as none let's save it awesome so now we are getting send message so now I think everything is done uh so the only difference is that sorry we only thing is left is is basically we have to send this message and that message we have to get it in our contact so what we can do simply uh here uh we'll take another state all right so this will be const so success message and we'll do set so success message this will be used state of false we do now here we'll go to this button will take one click and we'll do handle send message all right now here we are going to create this function so this will be asking function handle send message and here this will be const response a it now here what we going to do will be basically using this add data and here we have to pass contact and then we have to pass this data which is basically this form data all right and also we can do another thing so we can basically check const uh uh we'll do like is valid form so this valid form will basically check that return return this form data and then form data do name not empty and form data dot email not equal toal to empty and form data dot uh message notal to empty if this is not that means this will be true or else this will be false so now let's see what we are getting if I now log this is valid [Music] form let's see what we are getting open console so this is false now all right so I'll give some value here so this is not true so now what we can do we can basically check here we do disabled so disabled will be uh if this is false so is valid if this is false and here what we are going to do we do disabled and we'll do oppacity as 50 let's say it let's see if I now refresh this so you can see that now this is disabled all right so now what we can do we can basically already calling this now let's see what we are getting in this log response contact response so now let's go here and now let's go to our console so this will be contact response all right I'll give my name here let's say suum this is suum at abc.com and I'll message here I am very impressed by your portfolio I want to discuss more more on one of I want to discuss on one of the projects that I'm working something like that now let's click on S message let's see what we are getting see we are getting data saved successfully so if data saved successfully means we have to reset this form and we'll show some kind of message here that your message is successfully sent to the uh to suum or something like that successfully send you can so so you can basically do here something like if race is and then race do success is true we'll do set form data as initial form data and set so success message will be true but we have to S it for let's say 1 second or 2 second so what we can do we can do something like we'll take use effect and we'll take this uh so success message as a dependency so we'll check here if this is true then uh what we can do we'll take a set timeout and then after let's say 1.5 second we'll make this one false again so we'll do set so this one as false and then after this what we can do we can basically come here and we can check if this s success message is true so we show some kind of message like your message is successfully delived okay and here we'll use a class name let's use a text of 14 PX we do font as bold and we'll do margin of margin what we going to do we'll do margin top of uh 8px let's see what is happening now I'll try to send another message John John gmail.com hey there now let's send message see this is delivered now we are not getting anything this is fine so now this is done so only thing what we need to do we have to basically render this messages here so that whenever you log in your admin console you'll be able to see that which are the uh like the persons that basically try to contact with you what we can do we can go to our uh admin View and here I think we can basically call this data on page load so let's do one thing let's take another uh State here so we'll do const contexts set contexts this will be US state of empty and then uh what we going to do here we'll do uh what we can do I think we are already having this extract all datas I think we are using somewhere yes so here uh we are already saving this data I think somewhere here so I think we don't have to do anything else so I think then we don't need this one also let's see what we are getting in this uh let me just check we are having some State here set all data so we having this all data let's see what we are getting in this all data if I log here all data and let's save it let's see all right let's go to education let's try to refresh this all right so we are getting home now if I try to go to contact let's see see now we are getting contact and here you are getting these two information so suum is actually try to contact with you I'm very impressed by your portfolio you can see that we are getting the email so these data we can basically render here so what we can do we can go to our tab View and here we are going to pass the data so here we'll do data which will be this all data and then all data dot I think this is contact right so this is the contact so now we'll be receiving the data and we can go to our admin view let's go to our Conta and here we'll be receiving the data here so this will be our data so now what we can do we can simply map this data so this will be data and then data. length if this is true or else this will be null and here we can basically do data. map item we return a d here and we'll keep it simple so we'll use a class name here we do Flex Flex column gap of five and for the this D we're going to padding of five we'll do a border that's it and now here what we are going to render so we'll take three par P here and we're going to render the item. name and we'll do item dot uh email and then we are having item do message that's it if I now format this this let's save it let's see what we getting see now these are the person actually um contact you so we are getting the data here let's go and let's add another one so let's say I'll add James so this will be James the gmail.com hey there this is James I want to uh I want to talk about one opportunity I think spelling is wrong that I have something like that now let's send this message now let's go here let's go to projects if I go to contact again and you're getting the cont all the contact awesome if you can do one thing you can also add a button here contact and on click of that you will be able to open a mail something like that and you will be able to contact this person see how we have done so now this also you'll be able to manage because we are the only admin so I think almost everything is done all right and also on click of that we have to navigate to this particular contact Section so that part also we need to do so let's do this one in the next part all right so the thing that we have to do basically on click of this you have to navigate to the contact sex and so what we going to do let's go to this react scroll official Doc and I think here we'll get this scroller do scroll to right let's copy this now let's go to our napar and here we are having these buttons we'll take on click then we'll paste it here now we can remove this part from here and here we can give this one as contact we also have to import this from react scrolled let's format and save this let's go back if I now click here so it's going to the contact page and I think everything else is done so by that I think we have completed our uh section and uh sorry our project so also you can do another thing you can give link to each of these particular icons for corresponding your uh like social media uh addresses so what you need to do just give that router. post method and then pass the link that you want to give for each and every section here so I think that's all for this particular video video I'll add the source code in the description if you like this particular video give a like comment down and please subscribe to my channel I will see you in my next video till then good luck and peace

Channel: Sangam Mukherjee

Views: 8,210

Keywords: next js portfolio, react js portfolio website, next js 13, next js projects, nextjs portfolio website, nextjs portfolio tailwind, nextjs portfolio 2023, nextjs personal portfolio, portfolio website, reactjs portfolio website, reactjs portfolio, reactjs portfolio tailwind, portfolio website react js, portfolio website using react, portfolio website nextjs, portfolio website nextjs tailwind, portfolio website using nextjs

Id: gLe4MSXM7No

Length: 214min 20sec (12860 seconds)

Published: Sat Sep 09 2023