Next JS Portfolio Website - Begginer Next JS Tutorial - Build and Deploy

hello engineers and welcome to my channel i am yash and in this video i'll show you how to build this amazing portfolio website using next.js and tailwind css and once we are done building the project i'll show you how to deploy your own portfolio website on versailles now versailles is just like netlify and hostinger they allow you to deploy your websites right now warsaw team is behind the development of next years so they are the guys guys they are the guys guys so before we get into why next year is why tailwind let me quickly show you what we will be building today so and as you can see this is not on localhost so it's already deployed right this test project is already deployed on versailles server okay so we have hero section we have responsiveness bar on the top uh if i click here we have this amazing blue color responsive nav bar for mobile devices guys look at that now if you see there's a subtle difference if i hover over here in my desktop version we can see the scale effect right and guys we do everything all these effects using tailwind okay you can see the scale effect but when you hover over here you don't see any fix now why the reason is if you really think about it this mobile version will be used on mobile right right now we are testing that's different story but on mobile devices there is no hover we tap right so we cannot hover using our fingers so there is no need for you to add hover effects for mobile mobile menu right so that's why okay and for this button now this button is amazing guys if i hover over here it will do this cool little animation right look at that this is super cool right hit the smash that like button for this animation guys it took me a while to figure it out but it's pretty cool now i'll show you another thing right so let me click over here it will take you to about me section now look at this if you click if you hover over my portfolio it will hover up because my portfolios are on top now here we are okay let's let's do it again now one more thing when i scroll our navigation bar becomes black and like it animates right it's not like black it it like fades in right like it's amazing guys and text becomes white so super cool stuff right there now i'll click on portfolio it will smooth scroll to portfolio guys now if you have watched my previous build like where i built portfolio website using react you know for smooth scroll we need another library which is called react smooth scroll but with next years it's all built in guys super amazing right and in fact the only dependency which we need is for icons so that's it guys only one dependency to get this amazing portfolio website okay so portfolio and if you hover over here you can see like they are clickable i'll show you guys in a minute let's just walk over the homepage first now i'll take you to experience now here this is amazing part guys uh i'll scroll here you can see mobile version portfolio it's like single column amazing stuff but look at the experience this the whole flex is in row but it becomes column for mobile devices super amazing stuff guys super amazing more amazing thing is the blue and red shadow now you must be thinking what i have done is i have given like individual elements their shadow effect but no that's not how i have done it for this to achieve this i have used odd and even like there is this thing i think they call it uh so this is tailwind documentation and they call it pseudo classes yup here right here odd even pseudo classes we will use this so if you notice here uh this is even right because uh indexing starts from zero guys so first is even so for every even so this is zero one two every even has blue shadow and every odd has rose shadow right they so tailwind calls this color rose so let's call it rose okay and here we have about me section with this amazing blue shadow again and one more cool thing guys if you click on this resume it will open up your resume like i i thought instead of downloading let's just open it up so that they can like so your potential employer your putting your friends not potential friends but potential employer your friends can open up like quickly open up and just see right what's going on and i actually never tested on a mobile device let's do it right now what happens let's see i think it should hopefully open up look at that look at that guys it does open up our pdf actually it's browser it's still browser uh but that's fine that's fine uh you can it's already live and i'll show you how to deploy on virtual server so you can share it with your friends and share it with whoever you like okay and just impress them show them who you are you are a software developer which is super cool okay after you are done with that uh we have this contact section at the bottom like the last section of the home page we have this picture here and some social icons with hover effects right here and on mobile version it becomes a column as you can see and this form guys it's completely operational i'll i'll show you uh so to get this form working we will be using get form dot io right here now let's do it so i'll fill out my form i'll just say yosh and just put in throw in some number and just do your gmail.com now that's not my actual gmail guys it's really hard to get yes gmail.com actually so hello uh how are how are you that's it uh let's not waste time on this and just hit send and just wait for it guys just wait for a second or two and bam look at that you got the form submission in getform.io right here right and look at the ui it's super cool if you're actually implementing this it's really easy for you to just log in once in a while and check did someone contact you or something right super cool stuff and they also offer some automation stuff yeah you can play with it i'll show you how to just hook up the form and do your thing guys so okay now let me let's go back let's go back to the side and let's talk about next yes right so if you click here let's click on all projects uh look at the url guys okay right now hash means it's on the same page but if i click here once again cool little animation smash the like button for this animations guys it's really funny okay if i click on all projects look at that we have a different route now with next js you don't need to use react router dom it's everything is built inside next years the only thing you need to do this the only thing you need to do in order to achieve this is just create a folder a folder and a file so next yes behind the scenes parses the folder structure and creates the routes okay super amazing stuff guys i'm telling you right now so i mean of course right now i have four projects in my home page and four on portfolio page but if you have let's say 10 pages and you just want to pick like three or four good ones put it on home page and you can have like uh same button like show all projects and you can have rest of them right here okay super amazing now let's click on it and it will open up in and look at the speed guys even the page even the image just loaded super quickly because i i tested it earlier let's do something i did not test but look at that look at the speed because uh image like we will use image stack provided by nextes which optimizes our images and it also offers us lazy loading okay and guys everything done with tailwind css next yes now of course next year's under the hood uses react so there is not bigger uh of a learning curve so it's pretty simple once we start you will get hold of it guys okay and uh both next years and tailwind have amazing documentation guys uh if you ask me i personally i personally have learned a lot from reading tailwind's documentation like it's super simple let's say if you want to color your text red you know what you can do is just do text red and it will bring all this stuff here you know okay actually you what you want to search is text color right text color because you want to give color to the text look at this you just need to use this to make your text gray right you don't need to remember hash codes and they have these amazing colors guys let me show you tailwind colors okay tailwind colors and it's super fun to use tailwind guys and look at this they have all these amazing colors built in guys the only thing you need to remember is 500 600 if the lower the number lighter it gets that uh bigger the number darker it gets okay so let's stop talking and let's get started right personally i am super excited about this project and did i tell you about this navigation bar which becomes which changes colors right like if you scroll down it becomes black same thing over here if you scroll down it becomes black if you scroll up and the home the hero section is there it becomes white to match the whole theme okay guys so without a further ado that's how they say it right okay so let's get started right i'll open up my terminal i so i have already created the project and let's start by doing npx create next app and i'll just do period because i have already named my folder but if you want to name something else just put it right here and just hit enter okay and it's started doing its thing okay now the project is ready to go so what i'll do is i'll just do code period and it will open up my vs code and first we will start i'll just make it like full screen and let's start by just cleaning some stuff so we don't need home dot module so just delete it and inside public folder inside pages we don't want api folder so delete it and inside index.js just remove everything right here and just add a div and i'll also do h1 and just say hello world and just save it for now let's go back to terminal we also need to install react icons so i'll just quickly do that and just make sure we are in the same directory and i'll do npm npm install react icons now if you're using yarn you know what to do so i'll just do npm i react icons and it installs the dependency let's go back to vs code open up packet.json and right here we have react icons awesome stuff now let's quickly go ahead and install tailwind so that we can use it now in my browser let's put it side by side and i'll put my uh let's do terminal side by side and let's clear all this stuff and open up chrome so click on get started uh we need framework guide because we are using next as i'll click on next as and we already did this part because we created the app now the thing we need to do is install this this dependencies uh okay it's installing and once it's done we will do this so what this will do is it will create tailwind dot config file for us uh and paste that one and hit enter okay it's done so we don't need the terminal for now so i'll go back to vs code put it side by side now we need to copy this part like so what i like to do is i copy this whole thing right here go to tailwind.config and instead of this content just paste it right here and save it okay awesome stuff guys and after that scroll down on the website and copy all this all this from uh tailwind website and here just go to global.css and we don't need anything right here so remove it and paste it right here and just save it now uh we are good to go so what we can do is let's run our server so i'll run my server in terminal so because like i i personally prefer to use a terminal instead of using terminal inside vs code uh okay so i'll do npm run div and this will be just sitting right here so we won't be like jumping in or something okay uh server looks like it's going on so i'll go to localhost 3000 right here as you can see we are here but we have some imports going on so i'll go to uh okay let's go to our uh index.js and let's remove all this we don't need this and if you save it and it's okay uh what we need to do is just uh close the server again and run it again because we uh made changes to the imports so probably this will work just fine awesome guys look at that hello world awesome now let me quickly show you how tailwind works you'll be impressed okay uh no command z command b just put the sidebar right there so let's let's make hello world uh bold and color red now if it's custom css you need to name this guy h1 something go to create a file and add some css right but with tailwind you do everything in line i personally like inline okay so what i'll do is font bold so font bold and bam did you see that i just saved it and it become bold let's increase the size so what you do is text phi xl right so the way we have five xl we have seven excel we have small as well so 7xl and if you want to make it red so what we'll do is text red and this will be some color so it takes rate 500 save it and it becomes red guys super amazing right okay along with this we also need to add custom fonts so i'll go back to our google chrome i'll open this and let's bump this up and here search for railway so r-a-l-v-e-a uh this one and here once it opens up just select all these styles and select uh just we have to do it guys just do it so that we can style it better and i i personally really like this phone i think in my react video i use this font as well so i don't remember okay awesome just this should have select all options i say that every time i'll just bring it here because my picture will be on the bottom corner so what i'll do is you what you need to do is copy this copy this uh go to vs code and go to global css and open this up and on the first line so put davin at the bottom and just paste it on the top okay let's move google chrome back here we will keep this so that we can see what's happening and here we'll add some stuff so it's going to be layer at layer base and here we will do html and html will have font family so how you can get this what you can do is once again let me bring this here so that you can see uh if you scroll here you can see this right so what just copy this right copy that uh go to vs code and paste it right here okay and we need one more thing guys so i'll just create a new line and what we'll do is we'll do scroll behavior so b e h a v i o r behavior this is going to be smooth okay now this is what makes allows your next yes app to have smooth scroll so we can commend this out right now and when we face the issue we'll come back and uncomment it so that you can see what's happening right okay awesome so uh we did not see oh yeah font did change okay let's let's see the difference i'll comment this save again you see the font is different like see the w w is really amazing in railway look at that that's that's amazing w okay awesome okay we are done with this and the only thing we need to do is drag and drop assets now this project will be completely available on github so you can go there and use my assets or you can prepare your own assets but what i'll do is i'll drag and drop my assets so right here and we will drag and drop a set inside our public folder so i'll just quickly open it up and drag and drop what we need is assets and resume so that we can use them and inside public folder okay that's it guys we are done with the whole uh uh boilerplate part and now we will start to code okay so let's start by creating components folder uh right here so i'll just do new folder components and hit enter and inside components folder we will have a file which is going to be navbar.jsx and here i'll just do rafce enter now let me tell you a couple of amazing extensions which you must have first one is tailwind which will give you intellisense so autocomplete and all that cool stuff so this one uh tailwind css and it's by tailwind labs so make sure you get that one as you see it's already installed for me and next one is es7 snippets now this snippets is what allows you to do raf ce like get this one as well amazing by des zed in a jd er okay thank you for the plug-in okay go back so once again you can do this because of that plug-in okay snippets plug-in that's how you do it so let's do it again our afce hit enter save it now navbar is the only thing which we will import we will put it right here in app.js now this is where everything starts so i'll select this you know what let's just create a fragment right here so fragment is just empty html tag put it right here go back here and before that like before even component we want to have navbar right here why why we are doing it here instead of doing it in in index.js because we will have different pages and we want to show navbar on every page right because if you remember if you click on portfolio it will take you to its own page right we still want the network to be there so that's why we will put it right here and let's go back to google chrome and we can see navbar right here on the top okay awesome stuff guys let's put it side by side so that we can work easily now uh let's go back to index.js and remove this hello world we don't need anything right here just keep the div for now and let's go to network and okay so uh let's remove this nav bar right here and let's start by adding some classes two over there let's so this is the outermost div and i'll just do class name and here we will have width of four so it will take the full width height of 20 so if you read here this you will get with tailwind intellisense as you can see it's 5 ram 80 pixels right and hit enter and it also gives you autocomplete so and we will have z of let's just do z 10 10 is fine and it will be fixed so we wanted we want our number to stay there uh even if we scroll so that's how you get that effect right and we will have background of white text of black and this is initially but once we scroll we will add that logic later on right and we will have duration of 300 to get that like nice fade in effect and we will have ease in so that's it and we will come back here and add the logic uh later on okay so if i save nothing shows up the reason is we still need to add uh other part here like i think if we do h1 hello here uh we can see the stuff we still don't see the oh okay because the background is white right that's why that's why uh this is the homepage uh hero part right that's why okay no problem we will add another div with class classes of flex justify between so basically this is our menu we will have like a title right there and uh all the links right here right so justify between items center item center width of full height of full and max width screen of excel so this is basically max width of 1280 pixels right you can read it right at the bottom max width of xl and mx auto so that everything like snugs in in the center and padding of 4 all around and if i save it nothing still happens because we still need to add some stuff so first here this is going to be link now make sure you click here and make sure that it imports on the top now the link tag is responsible for all the linking right like it's like anchor tag so uh okay link will have href uh the only attribute link has is atrif and this will be so what you would normally do with react is you would do a hash home or something like this right but what we want is slash home okay and just close this and inside this we will have our title so no there will be no classes for link tag so here we will do h1 and h so let's do h1 and this will have just a yosh so that's my name now let's put it right there let's add classes so that it pops out so we will have text of 3 xl and we will for for larger screens text will be for excel and we will do font bold uppercase so uppercase will make it uppercase font bold will make it fontable and underline underline will give you that underline and we will have underline offset of 2 so that it just goes a little lower and we will have tracking wider so tracking wider is just a letter spacing right letter spacing of 0.05 ram and when i hit enter and save it you can see like it they they have like a little more letter spacing and also we will add cursor pointer so if i hover right now there is no cursor pointer because i want it to look like it's clickable because when you click on that it takes you to the home page right so cursor pointer and just hit enter and now we see the cursor pointer right and now we see the bar right now let's work on the menu icons so after our link what we need is another div and inside that there we will have ul unordered list and here we will have a bunch of list items right but we will wrap those list items with link tag because we want them to be clickable right so what i'll do is i'll just do link and href and for now what we can do is let's do hash home and just close it so that's that and inside that why doesn't it take me here it should take me here right okay right here in li will have a bunch of classes but for now let's just have some placeholder so let's just have home right here and let's start by adding classes to our li tag now li will have classes of margin left of 10 it will be text of small so small not xm it's going to be sm so text of small upper case and cursor pointer so that of course we want them to be clickable so cursor pointer duration of 200 because we need that nice hover effect and ease out and on hover we wanted to scale to uh scale 105 right and tracking wider tracking wider and this autocomplete is autocomplete is just amazing with tailwind right so basically you are auto completing css now we see home right here and it does have that hover effect right there right so what we can what you would normally do is you would just copy this and have multiple of this right here right uh like this is what you would do now you know what let's still have it uh we'll come come back to that later but let's add classes to our ul tag so here this is going to be so this will be hidden for mobile devices so by default tailwind is mobile first so whatever you do first is for mobile and then you add media queries for other screens right so it's going to be hidden for mobile devices and for screens larger than medium and i'll tell you what dimension medium is so if you hover here it's medium is media query of min width of 768 pixels okay so anything above 768 pixels will give you display of flex otherwise it's going to be hidden right so what you do is if you make this guy smaller do you see that the uh the links just disappeared awesome so i was saying what you would do for links is generally like copy paste but we i have a better solution for this what we will do is we will create an array of all the links and loop over it so so that like all the css is right there you let's say if you want to remove hover effect now you need to go go and remove hover effect from each and every links right we don't want that so what i'll do is counts links array and each array will have an object and each object will have id and next property is going to be link and link is just going to be the names right so this is going to be id1 link home let's just copy this like i think five times two three four and five so right here and this is going to be 2 this is going to be portfolio this guy over here is going to be 3 and this here is experience and this guy over here is going to be 4 this is going to be me and this guy over here is phi and this will be contact okay that's it that's it so i'll just save it and make this smaller and come back here let's add some spaces right so right here after the ul tag right here let's add some spaces what i'll do is i'll loop over our links array so links dot map and so each one will have link and what we will return is a jsx so what you would do here is just copy this or you can cut it if you want so i'll just cut it paste it right here and make the necessary changes now if you know link has id and link right so what you can do is so id is for this one so whenever you loop over jsx elements uh the way react right so beneath next yes there is react so the way react knows which element to update in a list of jsx elements is using this key key attribute right and this is like a optimization technique guys so what you do is link dot id right and here what you do is once again this is going to be linked dot link uh link that's it and if i save it oh bam do you see that we see all these links right here but let's remove this for a while and what we can do here is we can use destructuring right so i'll select that link i'll add brackets to it and i'll do id comma link and now we don't need this link link dot stuff and i'll remove it from both of that but we still need to make changes to this link right so where it goes matters so what we'll do is open this at this guy put hashtag and we just need to add this right here and this is going to be linked right here so it knows where to scroll to right if you hover right now uh okay that's it so that's we are done with the desktop part right see it looks pretty amazing guys look at that amazing menu guys amazing menu so now let's work on our mobile version so we will do stuff after this div probably yes okay let's okay we we still need one more thing guys we need the hamburger icon right so let's quickly go ahead and add that icon so after our ul tag so what uh we need to import it first so what i'll do is i'll quickly import everything we also need some social icons so i'll do imp this is going to be react icons and fa this all are going to be font awesome icons guys so fa bars f8 times and then we will have fa facebook we will have fa github uh fa we have twitter and we have fa of what are we missing linkedin yep linkedin right there and save it that's all we need save it something's wrong right here because here so what i'll do is fa bars right here and just save it and everything should be just fine okay awesome we see this icon right here we still need to style it so i'll what i'll do is i'll create a div so we need to wrap this icon around the div so i'll do this and i'll move it inside there and let's give it some basic classes so this will have so class name and class name of md hidden so what this will do is it will hide it on screens larger than medium right so medium was 768 pixels now if you make this smaller bam look at that you see the icon right there right now the only thing we need to do is fa bars will have size because it looks pretty small right there let's do a size of 30 right and it bumps up awesome awesome stuff guys awesome so let's keep it like this so that we can see what's happening and i'll just increase this guy over here okay uh now after this div so this one is this one so just before one uh this div what we'll do is create the mobile menu right so i'll add a div here and this they will have classes classes of left of zero and again this is going to be fixed right so i'll just do fixed left 0 top 0 with a full and height of full as well and next is going to be a gradient so bg gradient the nice blue color right which you saw earlier and bg gradient to right so it will start from left and go towards the right and from blue color from blue 600 to cyan 600 okay and text of white and we will have padding of 10 and ease in because we are going to add that slider animation and we will have duration of let's do 500 okay awesome stuff guys oh nice look at that we see that we see the whole whole thing right okay let's add more uh stuff to it so what i'll do is create another div so the thing we missed is we missed a div right here so we need a div covering this div so i'll just do div right here copy this copy this cut this and paste it right here and this div will have classes of so for medium this is going to be hidden right and fixed uh left of zero top of zero with full height of full as well and bg black so this is that a backdrop right i'll show you what i mean and this is going to buy 70 so that's you can control the opacity as you can see at the bottom uh the intellisense is telling you what's going to happen and backdrop is going to be blur so backdrop of blur and hit enter and save now the problem is we don't see the backdrop because it's behind so the to fix this we will mix this one the div inside one a four by four now this just decrease the height we need to make the width 4x4 so what we can do is just uh let's just make this full and go to our width and make this 4x5 and now you see that it's just animating because we have duration and ease in but it won't happen while uh we are running the app so this is just because of testing okay so inside the div inside two divs we will have a lot of divs okay okay let's have another there and that div will have another there now this div will have our uh my title right so you know we can open up my website so this one right here so i can show you right okay bam this is deployed right feels amazing okay this so we are working on this part so yash and the cross okay so right here this is our app and so for the div outer there will have no classes in inner they will have class of flex with a full items center and justify between oops justify between and that's it and inside that we will have link tag which we already imported so i'll do link oops my bad it's just the brackets so link and this will have href of home right so what i'll do is slash home right here and close this guy so close the link tag and inside the link tag we will have a h2 so h2 will have just just type my name right here first of all and now we will add some classes so that we can see what's going on so class name and this will have class name of text 3xl and for larger it's going to be text you know what we don't need this because uh on larger screens we don't have this mobile icon uh mobile responsive uh design right we don't have a hamburger menu for larger screens so it's pointless so font fontbold and uppercase just like before underline and underline offset of 2 and we will do tracking wider and you guys see i don't put hyphen because it just auto completes so cursor let's pointer awesome and now bam look at that amazing we also get the cursor pointer awesome after the link tag we will have another div tag this is just responsible for closing our our menu okay so this will have classes of last name and this has class of p3 padding of three cursor pointer and inside that div what we will have is just the icon so f8 times a size of 30 and just close this and bam look at that we have the icon now the the the the it's not working right the icon is not working so let's add state to our app so what i'll do is i'll use u-state for that so i'll do const navigation and this is going to be set navigation and we'll say you state and i'll just click here uh so sometimes it doesn't work like the autocomplete in vs code just make sure you have this used it right here importing from react okay just to be double sure and it will have a default state of false because like uh the only time you flip it is when you click it right and here so we will have a on click handler for this div so this is the bar icon so what we will do is uh let's do on click so on click what we'll say is so we'll have a function which will say set nav set navigation to true so it will show the menu and this whole thing so what we need to do is if so if so if navigation is hidden right then only we want to show the icon so we will do this and then and we'll move this whole thing right inside so once i do this and save it you will see that this icon will like disappear or something right oh the whole thing disappears because uh nav is not defined so basically it's supposed to be navigation uh i did not auto complete and as you can see it's right here but it still falls we need to make the whole loop complete so if i click this it will become false so we will come back here so this is going to be our cross icon and this will have on click handler so on when you click this we will set it back to false right set navigation back to false hit save click on this nothing works refresh and click on this still nothing works something is wrong right here so we have on click right here so what we need to do here is set navigation to false oh okay we need to hide it right like this whole whole thing is shown so what we will do is if so this whole thing let's add brackets right here and if navigation is there we want to show this part but if it's not there we just want it to be empty and when you save it okay look at that it went away and once again it's supposed to be navigation i forget to hit enter for auto complete and now when i save it okay the the blur is gone but we still need to fix this guy so this one needs to have the same properties so actually we need the effect so what we will do is put the brackets and i'll once again do navigation question mark so if navigation is on it will show this but if it's not there we will have other css right so it's going to be fixed and this will have top of zero and left of uh minus hundred percent let's do because it just pushes it on the left side and it's not visible right and make sure to put the closing bracket inside the string and we will do padding of 10 and height of full now ease in duration 500 okay and save it awesome look at that it works guys now if i click it we see it animate and the the hamburger icon just disappears right and the re we are not getting cursor pointer here so we need that so let's fix that after md hidden just a cursor pointer and hit enter save it and now if you hover here we see the cursor pointer right awesome click it you see the subtle animation awesome stuff guys so we so we are done with that part now we will work on the links right so now let's just scroll down and after fa times so that's our cross icon and after three divs what we need to do is create another theme now this is going to be for the links right if you if we come back here and we see we will create all these links and we'll also work on the social icons right so let's move back here and inside here we will create another this will have no classes uh actually it will have some classes so that's uh this will have classes of margin top of 24 flex flex column and height will be fit and gap of 20 okay hit enter come inside the div and here we will have unordered list an unordered list will have class name of uppercase so if you remember we have all the links in uppercase and here inside unordered list we will have man every time i get this fragment i don't know why okay it's it's just me typing so guys i know like never are always the most complicated part of the project but once we are done with the neighbor everything is just a breeze so let's bring back the energy right uh so link and so we don't need the key right now we will loop over eventually but let's for now let's just have some placeholders so this will be let's just do slash and inside the link we will have li tag and li let's just say home and if you save it you see home right but if you remember we will loop over just like the desktop version right so right here so we use we looked here we will do the same thing here so let's not let's not waste time by just experimenting let's start by looping over so i'll do links dot map and link inside and once again you know vd structure so i'll just do it right away and we'll do this and return a jsx now this whole thing right here is going to be the jsx move it right on the top and so key is going to be the id same stuff guys and here what we'll do is uh same thing again we will have backticks the the key below your escape keys and i'll have a slash and dollar sign and what i'll do here is it's going to be linked right here and like this is going to be link as well and if i save it we see all this right the only thing we need to do is we need to style it so our li tags will have their own stylings and this will have padding y of 4 so y is y axis so like top and bottom and x will be left and right right and text will be 2xl tracking wider and cursor pointer just hit enter save it and you see this amazing uh menu right looks really sick really nice really nice guys okay we are done with the links part after ul what we need to do is we need to add social links right so here after you will tag what you need to do is create another div and inside the div this div will have no classes so yep this was that div guys and they've inside there a lot of so class name this will be grid grid calls 2 and mx auto so it just fits automatically it snugs right in the center because it looks pretty cool so width of 4x5 so with four by five i think it's eighty percent right and we will have gap of ten so gap ten hit enter and inside here what you want to do is so this is going to be our icons and let's work on the classes later let me just quickly add one icon so i'll just do fa linkedin save and we see this icon right now let's go ahead and start it and this will have size of 25 as well just save it so it's just a little bit bigger let's start by adding the classes so i'll just do class name and here this will have classes of flex items center uh justify center rounded full and we will have shadow medium and shadow white and padding of three so that it looks snug otherwise it will look snug right and if i save it awesome we get the same effect right here if you see here it's the same effect guys awesome awesome uh okay the only thing we need to do is i mean if you want you can create a component for this like separate component for this but for now i'll just just to speed things up i'll just copy this and i don't like to do this but for now let's just do it and what here we will just do let's do f8 twitter twitter and this guy over here is going to be fa facebook and let's just do this one which one we forget is fake github and github and now if you save it we see all the icons and we don't need efficient so i'll remove it and save again and look at that awesome guys so we are done with the narrow bar guys we are done with the narrower now what we will be working on is the home section right so let's start off uh completely fine guys on bigger screen it looks so we have this desktop menu which is not uh which has this amazing hover effect and you can click here to go to the home and on smaller screens so if we make this smaller right sorry let's make this smaller and now if we look at this we have this amazing responsive menu bar uh hamburger menu with a slide animation right now let's go back to vs code now we can have equal screens right because we will be working on the home part and what happened where did my vs code go right here magic okay so just close this guy close this we don't need this come here and inside component let's create a new file let's call it home dot jsx and just save it let's do r a f c e and enter now somehow because of this next js running in the background my macbook has just become slow like if some of if any one of you has a solution i don't know why it's happening but do let me know in the comment section below uh yep so that's that and now we have the home section we will go to index.jsx and we will import it right here so i'll just do home and if we click here oops my bad command z and home why do i not see the autocomplete i'll just come on z again okay let's do it let's try it again and home if we click this this is the wrong home and just save it what we need to do is oh okay it renamed this to our home oh come on z couple of times so what we want to do is why this is home damn okay uh let's we can rename this to home page you know so i'll just go here and rename it to home page i'll just do that and we'll change this let's just rename everything to home page save it again go back to index.jsx and inside this div yeah that was the problem right that is strange home page and hit enter now you will get auto complete close this and okay we should see home page but actually it's behind the nail bar now uh okay this is wrong we it should be on the top just give some space save it and we still don't see it but we can see this uh actually it's hiding behind the nail bar so if i comment this out and save it okay here now we can see home page right so what we need to do is let's just uh bring it back we want the nav bar right let's go back to index and just go to home page and we will remove this and inside our div actually we need couple of imports so i'll start off by importing uh my image right my uh my hero image so it's actually my picture so i you should put your own picture yeah so it's inside a set so it's going to be a set slash hero image dot png and if and we also should name it so let's just call it hero image and we also need one icon so i'll just say import and this is going to be react icons and this is going to be from md i think md is material design this is expand expand more right here awesome so that's it with the imports we don't need any other import now let's start off by giving this some classes now this outermost they'll need some need one id this is how smooth scroll knows where to go right so it's going to be home and class name this is going to be height of screen with a full and text center that's it save it and inside that div we will have another div and this there will have class name of max with screen uh max with screen excel just like before max with screen xl mx auto with a full height of full and so padding top of 24 uh so this padding is because of the navbar our navbar is like 20 at 20 20 pixel so we have pd of 20. it's not actually pixels so whatever but it's 20 so this is going to be 24 right so pd24 with a padding of 4 like all around and flex flex column so that everything just fits completely fine in a column and justify around and item center so this will bring everything in the center and save it now we will see the effect once we start adding stuff so let's start off by adding a div inside this is going to be the image so this is the image i was talking about this image component is provided by next to us as you can see it's imported from next slash image we want that one and close it and source is going to be our hero image and now if i save it we it requires alt tag so i'll just say alt and me and just save it oh damn look at that we got the picture awesome awesome uh looks great guys let's give it some classes so width of 64 height of 64 and mx auto so it will bring it like in the center and overflow will be hidden and we also unrounded excel so that we get like that round effect right look at that awesome okay so we have our image now uh we need to add some text now this uh home part is like pretty simple we are almost done guys so h1 this is going to be full stack uh developer now don't worry we will capitalize it right here inside classes so this is going to be uppercase not capitalize font of bold and text gray of 700 okay and we will have text of 7xl and save it and bam look at that so what happens like i actually said capitalize so what you can do is if you like capitalize you can do capitalize right this looks good too but i prefer upper case so i'll just switch it back after that h1 i'll have another p tag now this p tag will have class name of text gray 600 and text of excel and max width of small and mx auto so that it comes in center and let's add some text you know what i can just copy the text from here but you can make your own text or right now feel free to copy this from github or just have lorem ipsum right and i'll just save it and if we save it we see this right there awesome right looks amazing guys and after this p tag we will have that link right which will take you down to no more this will take you to about me section so let's create this button guys so after this p tag right after the p tag yep after the p tag we will have a link tag and link tag will take you to uh let's say hash me so this is going to be the me part like i'm not calling it about so you can call it about if you want but for now let's just me uh i'll do me i'll stick with the me okay that's two too many mimi's okay they will have no more inside so no more and this will have the icon and icon will be wrapped inside a span and let's do md expand more and let's do size of 30 let's do 25 and save it and we see it okay something is wrong link is here href is right here reference link is not defined oh we did oh okay we we we need to import it right so what i'll do is i'll do control uh i'll do alt space and just hit enter right here and this is how we import link so now we can see this link but we need to add some classes right we need some css guys to make it look good so let's start with the outermost div so this will have group now group is that i think uh the pseudo class right i think we will use that so when you hover on this div our icon will animate right so i'll show you later so item center justify uh center margin y of 8 and background blue of 500 and text of white px of 6 and py of three font bold and uppercase because it's going to be like all uppercase and rounded excel rounded uh let's do medium and tracking wider that's it and save it and we see this awesome look at that okay great great guys the so the only thing we need to do is we need to add classes to this guy for the animation to work so i'll just do class name and hit enter uh if we hover right now you see there is no animation right so let's add some animation so by default it will be rotate at 90 so negative 90 and duration 100 and ease in and on group hover so i'll do group so group g r o u p hover so on group hover what we want to do is we want to rotate it to zero and now if you save it look at that and now if i hover over this uh our our button look at that look at the animation amazing guys amazing stuff so it's that simple to do animation using tailwind css guys look at this like tailwind makes it so accessible right if you if if it was custom css i would be bored already you know but tailwind is much more fun okay so we are done with the home page part next we need to work on pro on portfolio section cool stuff coming in guys cool stuff okay so i'll just close this go to index.js okay uh i'll go ahead and create a new file here in sighting components and it's going to be portfolio portfolio.jsx and let's do our afce enter let's just close the site menu and save it i'll go to index.js and let's just import it so portfolio that's it and if we save it and scroll vec portfolio right here okay now close the index.js and go to portfolio and let's start off by importing some so we need one icon and we need a lot of pictures so what i'll do is i'll import the icon which is going to come from md material design and i think it's the same one we used before which is md expand more that's it and we need a lot of pictures so for pictures i'll do imp and it's going to be inside public inside assets and inside portfolio and here we have install node i'll just do install node right here oh you don't need brackets so i'll just remove that install uh node and let's just copy this and duplicate it uh three more times so one two three and so another one is react parallax so react parallax and another one is you state and this guy over here is going to be react weather okay that's it and we are done with the imports so what we are trying to do here is we are trying to build this part right here okay so pretty cool stuff guys uh and this will lead to an actual page which will work on it later but let's try to make this right here okay okay so let's start by adding some classes to our div so first they will have id of portfolio once again this is for smooth scroll and class name is going to be with full and right here we will have another div and this they will have class name of max with screen uh excel okay and we will have mx auto and let's do px of 8 and py of 16 right there and text text center that's it and we'll do md text left so for devices larger than md which is minimum width of 768 pixels text will be on the left side okay so right here if we scroll down we don't see anything because we don't have anything inside there yet uh so let's start by adding a p tag and i'll do p tag right here and let's just add portfolio uh inside this portfolio uh oops my bad portfolio and just save it nvc portfolio right here but we do need to style it and instead of p tag what we need here is h2 tag and we will have a p tag right here and p tag will have just random data okay so i'll just go ahead and generate dummy data so it's going to be 25 length and this is just a plug-in guys so if you go to extension what you can search for is dummy i think it's uh yeah right here dummy text generator and i'll just bump this up i'll get this and you can use it just like that okay i'll close this and put it right here okay so we have our dummy text let's uh add styling to this guys over right here right so this will have text of phi excel uh on mobile devices and on larger devices this will be 7xl and tracking wider wider and we will have it uppercase text blue of 500 and we will have font bold that's it save it and we see it right there awesome guys awesome let's work on the text part which is p tag and this is pretty straightforward it's going to be padding on y axis of 4 and max width of large that's it okay looking great okay so what we'll do now is so we are done with this part we will work on this grid system right so uh instead of like just uh putting and repeating what we can do is we can create an array once again just like we did it for uh navigation links on the top right so let's start by creating an array right here not we need it inside right inside this inside portfolio uh and what we need is an array right so i'll just say const oops my bad so it's going to be const portfolio a portfolio is equal to an array so i forgot the brackets right here and we need an object inside that id is going to be one once again we need the id this is going to be title so this is going to react weather app and this is going to be url so we can so first is going to be image source and we can just say react weather uh and just a second i'll explain what that is and this is going to be react weather right there okay so title is this guy this part right here that's title okay when you click where it takes you it's the url part so you will be able to see it in the in the url bar right here and id is just for id and image is just this the image we imported so just add copy this like copy this three more times one two three and let's just make the necessary changes this is going to be second and this title will be installed node right there and image is going to be installed node let's make changes to this guy over here so install node right there and this is going to be number three and let's just call it ustate explained and let's change the image here to use state and what we need here is you state hook and this is the last one i'll just before do this copy and let's just say react parallax scroll and uh guys don't worry about capitalizing it we will capitalize using tailwind super cool right and this is going to react parallax and this will be parallax again and awesome guys okay looking great so what we need to do is so after this p tag i think we need a div okay so after this p tag what we need is a div so i'll create a div this div will have class of max with phi xl and mx auto again and we'll say grid so by default when you just say grid it assumes to be of one column and as i said earlier tailwind is mobile first css utility class so whatever you do it adapts to mobile and then you give constraints for higher devices right so by default it will be one column so for bigger devices what we need it's going to be md grid calls to so that means two columns and gap of it that will be the spacing okay now inside this inside this we want to loop over our portfolios portfolios.map portfolio and actually we should have restructured it right there so what you know what we do right so this is going to be id title image source and url awesome okay the only thing we need to do is add the jsx right first it's going to be the link make sure you import it so it's going to be next link and let's start with key key is id right there and href where do you want to go this will be this and uh forward slash and do we need a hash no not this time but we do need portfolio and this is a separate route for all the portfolios right so in future if you want to create pages for something else you can do it you know uh and just pass an url right there and i'll close this and now inside this what you want to do is create a div and this div will have class name oops not right here inside this so class will be cursor pointer and group shadow medium and we'll say shadow gray 600 and overflow hidden and rounded md and okay that's it okay so this div is for our image right and you will see just in a second because i'll add image right now so i'll do image make sure to click this one so next image you are importing from next and guys if you don't have the imports right here it won't work so make sure you have these imports right here okay link and image both so for image we need source so image will need a source and source is going to be emit source right here uh this guys everything comes from the array right uh if you see what i'm saying here this is the image source which we are restructuring right here and using it right here okay so simple and alt tag is just going to be our title and we need something else we do need to add some classes so class name this is going to be rounded md rounded medium okay i think it's expecting the closing tag and we can add now so duration of 200 and on however we want to scale 105 okay that's it so we have the image if we go back here we should see our images look at this guys amazing amazing so the only thing we need to do is we need to add the title for our portfolios right i mean if you hover we see the the cursor and all that stuff right so let's work on the title title is pretty straightforward guys so after this image tag what we need is h2 and h2 will have class name classes of text center text base and capitalize margin y of 4 so it's going to be top and bottom and font light and we will have duration of 200 for our animation for our hover animation and we will say group hover group hover and this is going to be underline and we will have underline offset four that's it and inside this h2 tag we'll just say uh title not h2 okay my bad so it's going to be title now this title we get from this these structuring which comes from this array okay so just make sure you add that and after this div so basically after this brackets this there what we need to create is we need to add this button right you see this button with this animation we should add this so that we will add after this there right here so let's go ahead and add that actually we can get it from home just create the div first so i'll just say class name right here and this is going to be flex item center and justify center as well and let's just copy it from home page so i'll just say home page scroll down and here this is what we want so i'll just copy this completely go back to portfolio and just paste it right here and instead of hash me what you want here is portfolio and you want to and instead of no more what you want is all projects and uh so when you hover over it instead of rotating it what we need to do is we will move it on x axis so we'll say translate x phi that's it and this should work so i'll just start my server so this server is making my computer really slow so i need to turn it off once we run it so so that i can work on the project right so for now let's just start it and see how it looks and now if i refresh the page uh we scroll down check it out you can hover over it and we have this cool little animation okay uh looks great guys looks great so what we need to do now is we we should work on the experience part we are almost done guys experience this is going to be amazing so this is mobile version uh this looks great actually and uh check this out like it even looks great this is the version which we are working on so it's localhost and look at this the portfolio part amazing is amazing next we will work on the experience this part okay so what i'll do is let's bring this back up so i'll just make the size larger i'll stop my server so that we can work faster and open up my vs code close this files and close this as well create a new file inside components and let's call it experience experience dot jsx and let's just do r a f c e save and go to index.js close this and make sure you import experience right here so experience and add the slash right and make sure you have all these imports right there okay so now we will close this index.js and uh start working on the experience.jsx right okay so let's start by importing this assets so we basically need to import the icons which we have it in public assets under experience so i have this images all are pngs so let's start by importing them i'll close the site menu and what i'll do is just imp right here and i'll do dot public assets and this is going to be experience my bad and right here let's start with html dot png and i'll just do this and we don't need the brackets so i'll just say p ah let's do html and what i'll do is i'll just save this and let's quickly copy them like three four one two three four and i'll just quickly rename them and this is going to be css this guy here is javascript javascript right there okay awesome and this is going to be react now the file name is react but what we can do is like at least with react projects it did not allow me to do it just to be safe let's just change it to react image so i change this to react image make sure you do that too and this is going to be next as right there and next one is tailwind tailwind and this guy over here is graphql and hopefully we are writing right correct spellings right there okay uh looks like it's working just fine and our server is running pretty good and we have experience right there so let's start so that's all with the import part so what we'll do is we'll start by working on the divs guys this one is really simple as well so we will be done like uh very fast and this will have div experience so e x p e r i e and c e experience right class name is going to be width of full and inside this div we will have another div and this div will have class of max with screen xl and we'll do mx auto just like before px of 8 and py of 16 right there and we want to do text center and for md it's going to be text left just like before and right here we will have a h2 tag and h2 tag will say experience right there and let's give it some classes so text phi excel and you know what we can do is just to uh make this quick we can just let's go back to portfolio and we can just copy this part like why are we typing right so let's just copy this part i think it's it's it's same uh so just copy this so go to portfolio and copy this from p tag to right here the div and go back and what i'll do is so we need this closing div i'll cut i'll remove this and paste it right here and now if i save it we see portfolio awesome guys look at that but we just need to change this to experience awesome xp re-ends right there okay awesome and this is just placeholder uh make sure you add your own uh own text but for placeholder it's just fine let's just leave it to that and after that p tag we will have another there and this they will be grid and for larger so by default it's one column uh you know that and this for larger devices it's going to be grid calls of four so basically four columns and gap of eight for all of uh for all the devices and inside this once again we will loop over the array so let me go ahead and quickly create the array and this is going to be experience array and so xp regions is right there and array and here id is going to be one title is html uh make sure you can give title whatever you want so basically what title is is this guy here so uh you can feel free to change it if you wish to and source is the image source okay and here i'll just so what i'll do is let me just copy it from my notes right here and what uh so that we can just speed things up and i'll i'll show you guys so that if you guys want to copy you can just pause the video and just copy it from here right okay let me quickly go over this so one two three four five and we have six seven eight so it's all same thing and the source is the image source which we just imported at the top and title is just a text so basically it can be anything you like and id id is just incrementing okay so let's work on the loop right here so what i'll do is inside this div we will loop over our experiences right so experiences dot map and what we will do is once again we can just start by destructuring we need id title and source and we will do this and return a jsx and inside this jsx we will have a div and whoa what's wrong with the div okay let's use this one and classes will be flex and flex call and one thing we forget to give the key so let's just do it before it yells it yells at us and i'll just go here and flex call large it's going to be flex row so flex row so uh for larger devices it's going to be an in row and here so this is the i think this is the mobile version yep this is the mobile version and mobile version is column and for larger devices it's it's okay this is still uh column this is row okay looking great guys and let me bring back here okay nice so uh let's come back here and gap is going to be 10 and we will have a lot for larger devices gap is going to be zero and items center justify between and padding of six right there so i'll just do p6 and auto complete shadow large and we will have rounded excel so that we get that rounded effect and on however we wanted to scale 105 right there and ease in and we have duration of 300 awesome and now if i save it what we need to do is we still need to add the image tag uh but we will work on the shadow part later so that i can show you what we are doing uh the odd and even thing which we talked about and this is going to be image and i hopefully we imported image oh it did not import from uh next image so let's just let me quickly try again and we want this image right there so that uh just make sure there is this import statement okay that's important uh because we need it right that's the image we are working with and image will have source width of let's do uh 64 pixels and height of 64 pixels as well so i'll just do 64 px and alt will be let's just change it to title right there and close this and we also need h3 right there and this will have classes of font lite and this will be just title and okay let's just do this and save it if we go back over here bam look at that we see this but the only thing we need to do is add the shadow now let me show you how easy that is okay so what for getting the shadow what we need to do is inside this div we will say odd so for odd we will have uh let's do whatever works right shadow uh let's do red we have rows here so let's just stick to that and even is going to shadow blue i think it's blue 400 so shadow blue 400 and now if i save it look at that looks so cool right guys look at that so i'll just show you again and let's increase the screen size and you can see it amazing how easy that is right so odd and even guys make sure you remember this one smash that like button for odd and even uh okay uh awesome so we are done with the experience part guys uh let me quickly check the old one okay looks great so now we will work on this me part so which is about me okay so let's start by creating a new file inside of our component we will just say we can say me dot jsx but capital m so me dot jsx in ref c save it and we'll go to index.js and after experience i will import me enter and slash and if i scroll down we see me right there okay so i'll close index.jsx i'll close the sidebar and inside this me we will start to work right okay so uh before we start working on this about me part uh let's try to click on these buttons like because they should work right if you click on these buttons they do take you to that specific specific section but it's not smooth scrolling right so uh if you remember when we started building the project i asked you to comment this out now if you uncomment uh uncomment it out what we can do is now if you click on portfolio it will smooth scroll right amazing guys amazing right look at that and uh so for smaller devices does it work uh and if i click on portfolio it does work the problem with it is we are not closing the mobile menu so what we can do is right here if we try again click home it it does scroll up but we are not closing the mobile menu let's do that first okay so let's uh go to uh navbar network.jsx and what we need to do is when we select so this is our mobile menu looks like this one so we need to add an on click handler let's add it to our li and this will have on click and what we'll do is we'll just say create a function oops my bad and this will have arrow and we will call call set navigation and change it to false right if you remember this is our state right here guys so that will just change it to false okay so looking great and while we are here we can fix that part but let's just take this and portfolio bam look at that amazing guys amazing let's fix this uh this this link part and let's do the same thing with h1tech so you must be thinking we should do this to the link but if you do this to link it doesn't work somehow it's not working so we can try right now hopefully it works but let's do set navigation and change it to false what i'll do is i'll copy this and let's try to move it to link right let's see what happens i'll just save it and now if i click this look at that it's it's not working right now if i click here it does scroll but it's not uh canceling our navigation uh like our navigation side menu right so i'll put it to h1 and save it and now if you do yash uh it should work so come here and click on yash oops doesn't work still doesn't work so what's the problem uh okay h1 right there on click set navigation is false and is this okay oh this is the wrong one oh not not this one guys this one is different h1 so that is this one uh the this one okay so don't bother we need to find this one so it will be above our this this guy here it should be above our mobile menu okay here is our mobile menu because we have on click right there so we will let's try adding it to this link okay maybe this works i think i did try when i was working on this tester project and now see it's not working so what i'll do is command z command z and put it in h2 tag and paste it and now if we click on the link right there and look at that awesome guys awesome right so what we need to do next is uh okay smooth scroll is working fine but we so if you notice in our uh tester project when i scroll down our navigation bar becomes black right when you scroll down but if you scroll down in our app it's still white so let's fix that so the way to fix that is after this let's create a new state and this is going to be page scroll this will be set page scroll and we will just say you state uh you state and this will be false initially and after that we will use use effect hook and we will type a tie to window a window listener uh scroll right so this is this guy here is a function and we want to trigger it when we uh mount this uh component right when we mount nearby component and i'll just say so this is going to be sub main subscriber and this is going to be window dot add event listener this guy here is crawl this is going to be a function where we will just to set page scroll and we will just check for window dot scroll y and if that's greater than uh that if that's greater than equal to 90 so it will just because it's it's it's a conditional so true or false and our state is conditional so we just throw it right there in so we don't need to do like if window dot scroll why i do this just put it right there uh a good technique right and this is arrow function so super sleek and the only thing we need to do is return sub so when the component unmounts uh it will like remove the event listener right so actually we should do the reverse i think anyways let's just stick to this for now and here what we will do is change the background color and text color based on page scroll so i'll just copy this remove this this quotes right there open parentheses right here paste it back and what i'll do is uh dollar and page scroll and and and we will pass in bg of black and text is going now this is going to be computed property guys so when you put square bracket with this you can do this with bg as well you can add any hash code you like the reason i'm not doing text white is somehow it's not working maybe i think that's the problem with that something to do with tailwind or maybe i have already declared this we can use question mark instead of this if you want to do that feel free to do that but for now i'll just stick with this and now if we scroll look at that this is our project guys look at that it's localhost awesome so what we can do is now we can work on our me about me section so we are done with the navbar okay never is looking great look on desktop it just looks amazing great right i i really like black amazing amazing guys so let's close this and we are using custom fonts right yep we are i'll close this guy as well and let's go to me and let's start let's remove this and the only thing we need is one icon and that's going to be from react icons and same thing that guy is md and this is going to be md expand more uh yep it's that one and i'll save it and inside this div we will have another div now let's start by adding the classes uh you know what let's just make it quick so basically if you see here uh this is the project i worked on and uh here this experience part is pretty similar to the me part right the only thing we don't need is the p tag so what i'll do is uh let's bump this up so that we can compare i'll open up my split window and i'll open up experience right there and what we will do is i'll just copy this all this stuff right here we don't want p tag so i'll just copy this and make sure this is all we want okay so i'll just uh and this one so we need two closing tags and i'll just make sure that's the same thing we want and this is just going to become me and this will be me as well okay so just uh carefully and you guys can type if you like uh so max width looking great guys the only thing we don't need here is we don't need this oh do we do we need this uh yeah we can keep it i think it should probably work and if i come back here and do this and let's close this close this and come back here and if you see we should see me right here okay looks great and we have it right here okay looking great okay so perfect right so the only thing we need to do is we should work on this part and that should be fairly straightforward uh we are just creating a box right and probably after our h2 tag what you want to do is create another div and this div will have class of shadow excel so that's the blue shadow around and color will be shadow blue 300 and we will do m uh my of 8 so margin on top and bottom and we will have px of it so basically padding on left and right and inside this we will have a p tag and p tag will have class of padding y of four and we will have max width to excel and we will do mx auto right and inside this we will just generate some text so i'll just to generate text and let's do 50 this time and this is going to be the raven and what you want to do is just copy this p tag and copy it like two more times and if you save it now look at that we see it guys awesome so the only thing we need to do now is add these buttons right okay so before we bring them in let's just create the there for them so after this div so this div is the one surrounding all these p tags so what you can do is sometimes you can close this and you can see right so after this div so this div with shadow blue has all our our uh paragraphs right all of our writings after that what you want to do is here we'll create another div and this they will have class of flex items center justify center and gap of 10 okay and inside this div what we want is should we copy you know let's just type it out because it's a little different right here so this is going to be link and hopefully we imported okay it did import and this is going to be ahref and now i'll just do resume.pdf now guys this uh if you don't know we added this resume.pdf file inside public assets right no it's not inside a set it's it's just inside public folder okay so make sure and if it's inside a set uh you want parts like assets resume.pdf okay so that's where our file is so basically when we deploy the app the website the resume will be uploaded along with the whole project okay so make sure you have that right there and download will be true so that it opens actually it should open anyways but still let's just stick with this and uh inside that there what we want is a button hopefully and i'll just do there for now and this is going to have class name of group flex item center i think this is similar to the buttons so what we can do is go to home page okay and from this let's just copy all this stuff and we can copy this whole div actually so i'll just copy this guy here and take it right there and this whole div we will just place place it right here should be pretty similar so now if i save it and we see no more okay awesome it's pretty good the only thing we need to change here is just say resume awesome this one guys i just copied this from our uh homepage okay because they are same buttons and this one once again this one guys i'll just highlight it for you this is what we copied okay and now let's try to click here and if i click here look at that we have our resume guys boom awesome stuff right the so we only need one more button right here and that guy here so after that link we will have another link and now this link is going to have href of let's do a hash portfolio and close this link and hit enter and we can do the same thing uh this is you we can copy this and just paste it right here and now this will be portfolio my portfolio and save it and the only thing we need to do is change the direction of this arrow so initially it's going to be minus 90 and after we hover we will make it minus rotate 180 and now if we save it and hover you can see it points upward okay looks amazing guys bam look at that you can click on resume but the only problem here is they are not cursor pointer so what we can do is it doesn't say cursor pointer no so we should add cursor pointer guys to both of them so i'll just do cursor pointer and do the same thing for this guy and inside the div let's just make a cursor pointer and now if i save it and now if you hover we see the pointer right cursor pointer awesome stuff guys do we see cursor pointer here in other ones oh no oh we should fix them so this one is for portfolio and this one is for home right so let's quickly like just let me just copy this cursor pointer thing and i'll go to home page i have home page right here i'll just paste it inside my home page and i'll just remove this extra space and next thing what i want to do is i'll go to portfolio part how did we copy it from right there but anyways what we need to do is where is our link this is our link and inside the div tag i'll just paste it right here cursor pointer and now if i save it and now if you hover we have cursor pointer looking great guys okay that's it so the only thing we need to work now on is contact me part a contact part and we will be done with the home page guys then we will then i'll show you how to create multi uh pages right create new routes okay so let's start by creating new file for contact so i'll go here and inside component what you want to do is create new file and i'll just say contact.jsx and here i'll just do r a f c e and what i'll close this and make sure you save this and go to index.js and here you just want to import contact contact and hit enter and save it and now if we go here and scroll okay it's looking great okay let's close this close this close this as well close this and this is going to be our final section guys okay so what i'll do is uh in order to style the contact part like like this so i'll just go to portfolio section and we will copy this part like uh from h2 gets completed like the closing tag of h2 just copy that bring it to contact.jsx and paste it right here and what i'll do is close the tags so one more and save it and now if we scroll we see portfolio the only thing we need to do is change the id to contact and this guy over here to contact as well and now if you save amazing so we have contact right now in the demo part i have this some details right here but i don't think it makes sense to have like a paragraph right here so i'll just leave it but if you still want the paragraph what you can do is you can copy this as well so you will get the paragraph and you can type whatever you like okay so next we will work on the the grid so it's actually a flex so uh i'll show you so what we will do is we will just say div and this div will be this they will have class of flex flex call and for md it's going to be flex row and we will say gap of 8 and shadow excel shadow blue 300 and bg white okay and just save it and we see anything uh not yet because we still need to add some stuff right here so first first we will work on the left part okay so that's going to be the thing with the picture and social icons so what i'll do is create another div right here and this will have class of uh i think let's so for mobile devices width will be full and from md what we'll do is we will split it by two so this is going to be fifty percent right so that's it and the only thing we need to do is height of full and rounded excel and we want padding of four that's it and now if i save we still we see this like it's it's still small but it's pretty good and what we can do is we can just copy this again and just move it here and this is going to be our form so i'll just say form stuff and just comment it out so that we can come back here later and inside this what we will do is we will start off with an image so first there is going to be a div with class of height full and okay that is really strange height of full and we already have height of 4 what we can do is we can just add more padding to this if we want to you know what let's just skip this div for for a while uh we can have one div should we you know let's let's just do image [Music] and for source we need we should import image from next image and for source we are going to do contact us image so we need the image and that's going to be imp and this is going to be dot dot uh public assets and this is going to be contact let's let me just double check and i think that picture is inside assets and we have contact slash so contact slash us dot jpg and this guy here will just say contact us okay so i'm just importing the image guys i'll just come on see okay contact us looking great and the only thing we need to do is just put it right here and this is going to be contact us and alt is going to be man with a laptop and for classes this will have rounded excel uh hover on however uh do we want to scale this one i think let's just leave it if you wanted to scale on however you can go ahead and add it but i'll just stick with this so i'll just do ease in and we don't need that actually because we are not hovering so i'll just close this and now if i save look at that we have that icon right here guys now what we should do is we should add some more padding to both of them so what we can do is add maybe let's add some margin over here um [Music] what we can do is uh yeah let's let's just add some margin so what we can do here is here what i'll just say is empty of four and save it okay this looks pretty good and after the image what we will do is have a p tag and this p tag will have all the stuff so i'll just copy it from here this is actual stuff not placeholder so you can copy it from here if you like and this is my text right here and let's style the p tag and this will have pt of 2 and pb of 8 that's it and save and after that p tag what we have here is another div this is still that div okay looking great and have another div right here and this they will have class name of you know what we can do is we already created social icons so they are in navbar.jsx you can go to navbar.jsx and we will copy this whole thing with grid in it the whole div and it has all the icons so i'll just copy it and remove this add some spaces and paste it right here now for me i have like this auto import plugin which gave me all this auto import so you can go here and just search for auto import so that whenever you copy and paste it just automatically imports and i think it's this one right here auto import by sergey kurunuk i hope i say that right but whatever great plugin okay so you can get that and i'll just close this for now and uh we are here and now if i save it hopefully it should work it did work the only problem we have is the shadow is white let's change it to blue 300 and let's just save it and it's still subtle what we can do is change it to 500 and now if i save it okay this looks pretty neat and uh what we can do is we can also add hover on however we want to scale it 105 and duration of let's do 300 we can do 200 and that's it and if you save it and go back here and now if you hover we have this amazing little effect and if i go back okay they look pretty similar now you will get this height when we have this form because it's uh it's it's it's taller so don't worry about that but so we are done with the left side now we need to work on the right side right the form part okay let's go ahead and do that so for form part i'll just quickly go here and what we can do is we can actually close this so we have this one and if i close this okay it has everything right there i'll close this one okay pretty good so we will do in this form stuff okay let's start with a div do i need a div okay uh actually yep we do need a div and i'll just say div right here and this will have class of p4 padding of four on all uh all around so top uh left right and bottom and text on left and here we will start a form so form and action just leave it blank we will get back to this later when we integrate with uh getform.io okay so that's going to be pretty straightforward guys don't you worry and here we will have another div and this will have class name of grid and what we will do is md grid calls 2 and gap of 4 and with a full and padding y of two uh right there and just save awesome and inside that div we will have a label and this label will have uh just remove html4 and we will have classes so capitalize and text small uh py of two and let's do text slate of 600 and font lite okay and now if i save it and let's just say name here and save it and go back here and we see this right here okay awesome so the thing we need here is input so i'll just input and input will have type of text of course and make sure you add name here because by using this name getform is able to like assign each key value right so name is going to be x email is going to be this and uh something like that okay this will be name and this will have classes of border two a rounded large rounded large and let's do padding of three all around flex and on focus what we want to do is outline none that's it and border blue 200 and awesome and now if i save it do we see it why don't we see it if i save it okay right there we have our input field guys it's right there okay okay uh i think we have a problem here so i misspelled grid so i'll just change it to grid and if you did it right you should see something like this now this is a problem again so the way we fix it is we need another div and i'll just have a class and this is going to be flex flex flex column and inside this div we will copy all this part the uh even the input and just move it right here and now if you save it now it looks pretty good what now so uh if you remember for name and phone number they are side by side so what we will do is just copy this whole thing actually we can copy this four times so i'll just do two three and four let's save it uh now we will fix them one at a time so first let's work on the second one this is going to be phone and just save now that's the wrong one i'll just say phone right here phone and name is going to be phone and what else we should do that's fine okay that's good now this is going to be email so do we have type of phone i don't know is is it have phone as a type or number okay let's just stick to text for now uh i know for sure there is type email but i'm not sure about phone so i'll just do phone but for this one we will have call call span of two and now if you do it will occupy the full space okay the only thing we need to change is this is going to be email and this is going to be email as well so let's save it and this one is going to be cool span 2 as well so call span two and save and we see it right there now this guy here i think this is supposed to be a text area so what we will do is keep the label so i'll just say message right here but instead of input we will have a text area probably with same classes so i'll just copy the classes uh just i'm not sure text area and we don't need name we oh we do need name and name is going to be message and we don't need the id we also don't need calls i think we don't need columns do we need columns we need rows but we don't need columns i'll remove them let's just add classes right here and now if i save okay looks pretty great awesome so the only thing we need now is the button right so after this two div tags and make sure we are inside form so just before the form closes we will have a div and this will be flex items center and justify center as well justify center and save and inside this div what we can do is add our button and this is going to be a straightforward button guys so all why it's i think it's it's lagging because it's loading something so let's just try again okay it's going to be button hit enter and this will have class of group so that we can do hover effect and group m8 bg blue uh 500 actually we do not have any hover effect if i go back here and if i hover here there is no hover effect but we can add one but for that we don't need group and i'll just remove that and let's just say send message save it and if we go here we do have this but we still need to style it so bg blue text of white my bad it needs hyphen something is wrong my intelligence is really slow right now so text of white and we'll do px of six p by of three font bold and uppercase and rounded medium so now if i save it look at that awesome and we will also have tracking wider and now if you say we have track uh more letter spacing and cursor cursor just okay why it just becomes super slow and cursor pointer okay uh that's it but we should have some hover effect and we can just say scale one zero five and save and now if you hover uh it does scale but it it looks a little choppy right so whenever your animations your css animations they look like little choppy what you can do is just add duration duration of 200 and now it should be just fine now it looks pretty good right now let's go to getform.io and you know uh so probably i'm like in the right bottom corner so i'll put it here so that you can see so this is our form and now if i bump it up looks great guys so now let's hook it up to get form dot io let's uh let's go to get form dot io hopefully i can log in in safari uh because i have my password saved in google chrome okay we are here so what i'll do is i'll remove this one because i think they only allow you to have one endpoint so i'll just remove this and i'll create a new one so create and this is going to be youtube next to one portfolio and my time zone is indian standard time so i'll just select that and hit create so now this you can read it but this is place this url in action attribute of your form also make sure to add method post and finally ensure that each input has a name attribute that we already did and we will do this as well for now just copy this go back to your form and if you scroll about and inside the action just paste it right there and after this let me bump it up so that it's easier to see we will have method and this will be post and now if you save it let's open up our form sorry i'll refresh the page just to be sure now we have our contact form here i'll bring my getform.io on the right side and what we can do is i think it's waiting for first submission so what we can do is let's fill out quickly so i'll just say yash and put some random numbers yash gmail.com and hello how are you and just hit send and now wait for a second and it's saying error occurred form not found uh okay uh go back here oh this one is actually if you go back here see it's it's the one which is deployed so it's the wrong form and it did not work because we deleted it so come back here to our form and let's do let's try again let's refresh as i said and we will go to contact and here i'll just quickly fill out some random numbers yash gmail.com and hello how are you and guys look at that railway font is everywhere and this w just looks amazing right just stand here and one two three and bam look at that it's so fast and you can see the submission in the back end as well so super cool okay so we are uh so let me close this and so we need to do only two things now first uh of course eventually we will deploy the project that's one of the thing we need to do but for now what we need to do is we need to hook up this all projects so that when you go to all projects you see stuff here right and we will use uh like server rendering i'll show you how to do it so i'll just quickly put this right here and we can go back and how that happens is let me show you uh let's create the file right so there are two ways of creating new routes so in so we don't need components for now i'll close this close this close this so we are done with the home page just making sure uh looking pretty great uh the way you create new routes is inside this pages you just say new file and what i'll do is portfolio dot js and i'll just save it and refc okay my bad ref c enter and save it and now if i click here look what happens now if i click here i can see it actually it's hidden behind this so how can we do that what we can do is we can actually let's you know just add some classes right here so we'll do flex item center justify center and hit save and about to perform a full refresh don't worry about that just click and reload and we still don't see it because is it because of the text is supposed to be text black and we still don't see it portfolio dot js portfolio portfolio okay we are right there uh probably oh damn we are missing width and height so right what we can do is with a full height of full and hit save and it should be there damn what's wrong and uh i am messing up something uh okay are we on the correct route we are and see the one way to confirm is we don't see the error right there is no error so it's there but we are not seeing the text somehow what am i missing flex item center justify center with a full height of screen this will work awesome okay a lot of struggle but eventually it worked so okay that's it so that's how you create a route so if you create a new file here it will become a route but there is another way that we will use because uh if you remember if we go back to portfolio and if you click on this file right here uh sorry click again it will take you to portfolio slash react weather so how do you do this yep it's pretty simple you just create a folder right so we will create a new folder so just call it portfolio and hit enter now just remove this because we don't need that and inside portfolio what we will do is create a new file this will be index.js right because when you do search projects right uh all projects it will just go to portfolio so what we need to do is here inside rafsi and just hit enter now if you save the error is gone so that's how create how you can create like uh only forward slash but if you have like forward forward slash like x y z i'll show you how to work with that okay so let's close this first uh what we can do is so basically this is going to display all your portfolios right and we can actually rename this to let's say one portfolio portfolio and that's fine that's that's okay to do that and uh what you would do is so if you remember we already have portfolios right here so what we can do is first of all copy the data so i'll just copy this and hopefully my images will be imported automatically so i'll just paste it right here and okay you see my images just got like automatically imported because of that plug-in but if it doesn't happen for you what you can do is just copy them from right here okay but make sure you have them uh accessible and we can actually copy the whole structure from here like the whole whole thing so i'll just copy it and if we go back to this index.jsx and uh instead of this return statement just paste it right here and now if i save it and refresh the page we see it awesome so we have it here guys what uh some things what we need to do is first let's remove this all projects right we don't need the link so i'll just find it's right here so i'll just remove this we don't need the button and let's add some padding on the top so i'll come here and we also don't need the description for now let's just remove them just say portfolio and what i'll do here is so even for this let's just do some padding bottom of uh we can let's say 16 and we will remove this pxp by 16 and instead we will do p padding top of 24 and padding 4 all around and now if you save it we see right here so ok let's go back and click on all projects and look at the route see we have a working new route so slash portfolio is our new route awesome stuff guys but this is not a proper way of getting the data right right now it's hard coded but in re in real scenario what you have is you are getting data from an api right so right way of doing this is using a method so that's going to be export const get static props now this is a special function so what happens is when you build the project next js will run this function before uh creating your page okay so what it will do is it will actually call the api and get your data and place it in your html okay but for now what we will do is just copy this whole portfolios and we will just like simulate the scenario right and i'll just close this and after that what you need to do is the way you return is you do return props and inside this you will just say portfolios okay awesome but the way to access this you can do uh so if you know uh we get props here right so this is going to be props but what we can do is we can just destruct portfolios now so this will give us the portfolios via props so this is where we will get the portfolios and this is where we map through it so basically now if i save our route should work okay portfolios dot map so we have a spelling problem portfolios dot map undefined is not an object portfolios okay something uh wait a second let's go back and let's give it some what happens if i click now okay look at that awesome if you refresh it works again so that's that's the right way of getting the data from the uh from api or database and placing it inside your using it inside your component right so that's it one more thing we need to work on is this so when you click on this we want a dynamic route okay so how do you do that the way you do that the way to make something dynamic so inside portfolio we will create a new file this is going to be id.js okay and actually we should have named this portfolios uh let's just say portfolios route something like that you can come up with whatever name you like but the problem is one portfolio is named for single portfolios so that's why i just changed it and click here go here okay something is wrong okay we have the file here refse and enter and let's rename it to one portfolio and save it and now if you reload the page look at that we got the page now let me show you how we can identify our url right so what we will do here is so for this we will use let me show you what we can do so there is a so we will say use router that's the hook we need and just say router right here and if you save it let's just console log it and we'll just say router and we won't be able to see it here so i will open up my chrome uh i'll just just say chrome and a new tab we already have new tab just say localhost and put it on the side and open up my console right uh right here and i'll just go here and do portfolios scroll down all projects and we can select one project and see this is our router and if you click here and look at this data right but the thing we are interested in is query object okay now what we can do is what we can do so instead of router let's just do query here so query dot id and now if i save it look at that this is the route right so basically let's just go back and how can we clean this go back here go back and let's select something else and here you see install node so that's how we will get the url and according to the url we will present the data okay so i'll just close this for a while and remove this we don't need this and save it i close this okay so let's start by bringing in the data so i'll go back to our index file which is inside our portfolio folder right here and i'll just grab this data so i'll just copy this go to id and paste it on the top now when you paste it you should get automatic import for your images but if you don't you can do the same thing go back here and copy this and put a place it in the imports above right next let's just close this we don't need to see the data we need three icons so first one is going to be from fa font awesome which is fa github and next one is going to be react icons and this is going to be ai and this is going to be ai outline carrot right and next one is going to be react icons and this is going to be bi and this is going to be a chevron left okay so that's that next uh let's start by we don't need this router anymore uh so let's create the structure of the html so here this is what we what we will be creating and if i go back here and let's just uh refresh the page this is where it should be displayed so we can see what's happening let's start by div so i'll just remove this create a new div and this will have a class name of h fit with a full and text center and inside this div we will have another div and this they will have class of max with screen large xl a not large xl mx auto with full height full padding top of 24 and padding 8 off all around and flex flex flex call that's it and inside that div we will have another div so this is going to be class name of flex and inside this there we will have a link so i'll just say link oops my badge bracket and just say link and this one this is the one we want and close this and href is going to be slash portfolio so this is just going back to all portfolios guys because this is a single portfolio and you want to go back to all portfolios right and here inside this i will add another div this div will have a lot of classes it's going to be group flex uh do we need group we actually don't need group so remove group flex uh items center justify center margin y of 8 text indigo 500 500 and font bold capitalize and rounded md do we need rounded md no we don't capitalize is fine we do any tracking wider and cursor pointer that's it i think this should be fine for this div and this they will just contain uh a bi chevron left and size of 25 close this and just say back now when you save it we see this back icon if you click it will take you to all portfolios right looking great guys awesome great work and after this div so the one below link after that div what we want to do is we will have one h1 and h1 will have class of so let's add the h1 uh let's for now we can just call it uh let's just say blah and so that we can see stuff and this will have class of capitalize text for excel takes 4 xl a margin top of 2 and margin bottom of 8 text left font bold and text blue of 500 tracking wider and now if you save it we see it right here but i think on smaller devices it will make sense to put them in center so what we will do is we will say text center and after let's say medium we will say text left okay so for smaller devices it will stay in center and let's see my chrome and i'll just bump it up and you can see it's on the left okay looking great and eventually we'll make it dynamic guys so this is the only page we will be creating all all the portfolios will automatically take shape of this so even if you have like 15 portfolios it will just automatically fit right here okay so that's what we are trying to achieve here guys after the h1 we will have another div and this will have class of relative width of 96 and height of 56 uh pretty weird mx auto and overflow hidden and we will have margin y of 8 and save so this is that there for our image so i'll just quickly add image and for source i'll just resource i think we need to import image and make sure it's from next image and for source we will let's just pick any react weather now this is a image from here so you can use whichever you like eventually we will make it dynamic but for now so that we can see it and all tag is going to be let's just say blah again and uh so we will have layout of fill and object fit of cover that's it and slash and we see the image awesome guys awesome we are almost done let's bring back the energy guys we are almost done so h2 will have class name of uh so let's do same thing text center and with creator screen it's going to be text left margin y of 4 text 2 xl text to excel and font bold and hit save and this is just going to say description description and it's it's just a text so don't worry about that and here what i'll do is create another p tag and this will have just some data so i'll just quickly generate data let's just say 100 and raven and hit enter and if you say we see the data that's it we are not going to style this p tag guys the only thing we need to do now is add the remaining two buttons you see here but for them if you remember on the home page we have two buttons right here so uh from me we can copy this okay so let's quickly go to me section and here we have our images guys so just copy this whole whole thing so i need to figure out which div is the closing one so this one right here and just copy this go here and after the p tag just paste it right here and hopefully we can see it so let's pick one of the image and save the file and okay we see it so what we need to do is first of all let's change the name so first one is going to be demo and we will change the icon icon is going to be ai outline carrot right and if you save it now we don't need the rotate part so what i'll just do is let's just say duration is in so i'll just remove all this just say duration of we can do 200 and ease in and save it and we see it right here guys i think the size is way too much so let's change uh both the sizes so both the sizes let's make it 18 and save it okay they are a little more smaller and both of this uh icons they do have classes so i'll just say margin left of two so equal to margin left of two and save and now if we see we get this good margin between them and this one is going to be github fa github and if you save it once again we don't need all this it's just going to be duration 200 and ease in and save okay looking great uh what we can do is so this one remove download we don't need download part right here and for this one let's just put slash and this one is we can just say github right like let's just do https uh github.com and this is my profile so yash what the ash patel and save and now if you click it will take you right there so uh so we are done with the structure let's just see one thing so for smaller screens like it it does look pretty good so i think it just works fine so now let's work on making it dynamic right so if you if you notice if we click this we still see this so how do we make it dynamic so there's a lot of stuff uh first let's create a helper function so that we can get our portfolio when we have the url right so i'll just say cons get portfolio from uh and url is going to be here so from url that's how you read it and this is just going to be arrow function and what we'll do is portfolios dot filter and this is going to be p let's do p dot u r l equal equal equal to url and after the filter we will pick the first one because it will return you an array right next so there are two things uh if you remember we did get static props we do need this but we also need so what next years we'll do is first we will we'll tell next years all the links that are possible so basically that will be all your portfolios right and what next years will do is it will get all the urls give it to static props one at a time and generate each page for you right so whenever user ask for this page it's just ready to go right and it's everything happens during build time so let's so the first function which we will work on is so after this function first function is export async function function this is going to be get static paths and make sure you spell it completely like accurate because this is how nextgs knows right what to do and what this is pretty straightforward we just need to fetch urls from all of them okay and i'll show you how you structure them so what we will do is const patch so we call it patch we'll do portfolios dot map and let's do p again so p is portfolio in our scenario and let's do this and what we will do is so we will be returning this object right and object will be params and this make sure you spell params exactly inside you can have whatever you like uh but let me tell you one thing so it's going to be portfolio uh no it's it's just going to be p dot u r l now this is to be similar to your file name so if you have slug right here you want it to be slug okay so make sure i have id so i have id here so make sure you uh keep that in mind right and what i'll just do is return and return will have patch and what we'll do is fall back so we will just do patch and fall back is going to be false so by fallback what we mean is if there is a url which we did not provide it will show 404 okay so now if we save it and probably if we refresh the page uh okay get static path was added without a get static props so let's go ahead and add get static props right so export async function get static props and do this here what happened i think it did import something we don't need this import uh it doesn't make sense and we also run this and we also don't need use router so save it again uh because we don't need unnecessary stuff so inside imagine so this path the the path the urls which we get from get static pads are passed down here and they are provided as uh params right because we have params right here so it will get one object one object at a time so what we will do here is so we will say cons portfolio portfolio and we will say get portfolio from uh we will use this helper function and what we will do is just say paragrams dot id because this is the id right here okay so it will fetch that portfolio and pass in all the data and here we will just do return once again this is going to be props and portfolio and this we we will get it right here so that we can feed the data inside our structure so i will just go ahead and just use destructuring and we'll just say portfolio now i'll fetch this guy here and we just need title and image source okay so you can add description to your array and the best thing to do is fetch the data from headless cmi right so for now let's just change our title to title and title and image source will be emit source so i'll just say image source and now if you save it hopefully it should work completely fine look at that guys bam amazing this is next year's guys look at that super cool we get this title and look at the pictures right so this uh so this array can have everything this can have url to this demo my portfolio so that it it just picks up right you want it to be dynamic so whenever you add new portfolios you don't need to do you don't need to worry about anything right you'd need a picture you need some description and just throw it inside the array because if you're keeping it static but if you have a back end you just need to make an entry to a database and it will just magically work right so guys we are done with the build the only thing we need to do is deploy this to versailles server right so i'll click here it works click here it does work click on one of the portfolios it will take you to its own page look at that portfolio you state hook you can share it with anyone you like so let's assume you copied this and you paste it here it will directly take you to that page right amazing stuff guys everything built using nextgs and tailwind css okay we have experience right here with amazing shadows right so let's start so in order for you to deploy to versailles what we need to do is go to github so i'll just say github and select my profile and once it opens up i'll create a new repository right here so create new repository and i'll just say yt next one portfolio and okay it's available and just hit create repository and you will get all this stuff so just keep it right here so i'll just put it on the left side and i will open up my terminal and let's just close this so i'll just do git status and as you can see i need to commit all this stuff uh so if you are not using git don't mind the train like it's it's just way too much too loud right so okay let's get back uh if you uh i've been using git throughout the recording but if you did not use it you will have a lot of stuff right here so all you need to do is get add period and it will add everything now it will become green right so kit status it's all green next what you need to do is it's it's just okay i will just to commit and just say done uh i'll just say youtube done okay and just hit done and we are good to go next just copy this part so this three lines and paste it right here and hit enter what it will do is it will push everything to github and now if i refresh the page bam look at that we have our uh the whole project is right here next what we need to do is go to versailles so i'll just go to versacell.com man not this i'll just say versailles.com and hopefully it should take me to the right versailles that's fine and i'll just do login and i'll just say continue with email and this is going to be my email so i'll just quickly log in continue with email okay do so i'll i'll do this process and come back with my home page okay guys so hopefully you are seeing what i am saying you may not see this because this is my tester project what we will do is create a new project and here i have already logged in with my github but you will see github here so just click on it and follow the process and you will see all these projects now this is the one which [Music] just pushed right to github so just to import and bam just click deploy and we are golden guys this should deploy our project like live just wait for a few seconds and it should be it hopefully we did everything right and it should be fine okay our fingers crossed and guys this is continuous uh deployment okay so once i'll show you if you make changes to your app and push it to github it will automatically pick up and uh put it on the server right on your website and it will be live so it's continuous flow you don't need to go here do drag and drop or anything it just works i think it's fine okay look at that congratulations and if you click here it will take you to the url look at that amazing stuff guys we have our website you know what let's we should test our form so i'll open up getphone.io because i did not do that previously with my tester project so i'm just curious i just want to know it works so we have our endpoint right here okay let's add foo here so i'll just say foo and add some random numbers and let's say foo at bar.com and hello uh i am fu and send the message and hopefully it works okay look at that it works on live site guys and this is your data this can be anyone your friends family your potential employer right amazing stuff guys so okay we are done with this part but let me show you how to make the changes let's say instead of full stack developer i want to make it back in developer right so what i'll do is this will be my flow okay uh so i'll open up that is probably home page and home page come back here full stack i'll just remove this and make it back in now uh if you're making bigger changes of course you want to see it but i know like how it will look so now this is the change if you do get status now there will be a change right if you get diff components home page and you can see the difference right so what we will do is git add git commit and i'll just say miner refactor and we are good just clear again get status and just get push and now okay it's completely pushed go back to worst cell now if we go to dashboard look at that this should be building already it's building right now and you can read the commit message which is minor refactor now let's wait for it to deploy should take like uh like 10 seconds or something this is pretty fast i mean one of the reason is our project is small if you're building something big it should take some more time but uh that's good i really like warcell guides uh initially like when i used to use react i used to love netlify but versailles is great too so our changes are reflected now if i refresh look at that guys back-end developer and it's live looks great on mobile devices as well look at that amazing stuff guys okay so we are done with this build if you guys have any questions feel free to post them in the comment section below and if you want me to build something uh you can give me a suggestion or idea and i'll see you guys in the next one thank you

Channel: Yash Patel

Views: 5,787

Keywords: programming with yash, next js portfolio, next js portfolio website, next js portfolio tutorial, next js portfolio site, next js tailwind portfolio tutorial, next js tailwind website, nextjs website, nextjs website tutorial, nextjs personal website, create next js website, next js build and deploy, next js responsive website

Id: zokKTsRx7QA

Length: 150min 10sec (9010 seconds)

Published: Thu Jun 16 2022