React JS Portfolio Website Using Tailwind CSS - Build & Deploy

hello engineers and welcome to my channel i am yash and in this video we will learn how to build this amazing responsive portfolio website using react and tailwind now tailwind is a utility first css framework so we won't be doing custom css guys and tailwind is just just super awesome to learn right i personally have really enjoyed learning tailwind guys now let's go over what we'll be building today now on the left side as you can see i have the desktop version and on the right side we have the mobile version of the app as i said earlier it's responsive so on the top you can see we have the navigation bar with this amazing font and guys we will be building this whole project from scratch i'll show you i'll walk you through everything literally from npx create react app and taking it all the way to deploying it on netlify so yes we will be deploying this application on netlify so let's let's walk over the build right uh and in as you can see we have the links with amazing hover effect right here and in the center we have this bold font and some little description in my picture right here and if i hover over this icon you can see a cool little animation right there now on the left side as you can see i have some social links now let's try to click so if i click on linkedin it will open up a new tab and take me to linkedin if you click on github it will take you to github like this is my github right if you click on mail what it will do is it will open up the user's mail client and put your email id and user can just start typing so user don't need to like copy and paste the email right all that crazy stuff and the last link is the amazing guys it's the best so it's the resume link so what user can do is if so this is digital right if somebody wants to print your resume what they can do is click here download your resume and just print it out super simple right now let's go to about section i click here and did you guys did you see it's smooth scroll we'll be adding smooth scroll guys so we have this about section and i have some lauren lipson but of course you want to put your own about stuff right i would recommend putting your history right what brought you into programming uh why why why do you like programming right you might want to put it here next let's try to click on portfolio and you see this amazing grid and guys we do everything all this stuff in tailwind no custom css guys once you try tailwind you will just enjoy it like once you get hold of it it's super simple and fun right so we have this three columns uh three grids with three columns grid with three columns okay okay and as you can see this are all my youtube videos but what you want to do is have actual projects here like what you have built and have demo links and code links right here so what happens is if somebody clicks on demo it takes to the actual demo of that project and for code what you want to do is probably take them to github right so that's that let's click on experience guys now this are all the technologies that i have worked with and as you can see they all have this amazing hover effect and with the custom shadow guys did you see like literally html has orange because html icon is orange right super cool and guys this is completely extensible so if you want to add more technologies or remove some you can easily do it right and in the end we have this amazing contact form uh what happens and this is completely functional guys i'll show you how to make it functional so whenever somebody fills out the form you actually get the data right it's not just a a placeholder a form it does work i'll show you guys we'll be using getform.io for that and here on the mobile version we have this mobile site now biggest difference here guys is the links right for links we have this hamburger menu and now as you can see we have the same section but it's just in column now let's click on about it will scroll and take you to about if i scroll down it's the portfolio site with the same hover effect but now like on mobile version hover effect doesn't work because you tap on it but uh it's okay right and the same links right demo and code which user can click and visit your demo or go to your code and once we come back to the experience now let's open this up now did you see guys tailwind is mobile first so we will be building for mobile and then chain make changes according to the desktop version right as you can see on the desktop we have like three columns and with the mobile version we only have two which looks really elegant guys look at the design look at the spacing it's super awesome guys so as i told you we'll be building this whole project step by step from scratch so don't worry and next thing if you get stuck somewhere uh my source code will be in the description below go to github clone it and you can use it however you uh feel free right feel free to use it however you want you can make changes to my own source code and publish your own uh own portfolio right uh no problems my goal with this video is to help you build an awesome portfolio so that you can get your dream job right and another thing guys it's not just about getting a job like i personally believe you want to love what you are doing so i want you to fall in love with react and awesomeness of stalemate guys amazing stuff so let's go to our terminal and get let's get started right i am excited i hope you are excited too so i'll open up my terminal and what i want to do is i'm already there where i want to be and i'll just do npx create react app and i'll just name my project and this is going to be port folio one portfolio yeah awesome and i'll just hit enter guys okay okay okay it started installing all right guys uh now it's happy hacking so what you want to do is you want to cd so let's just add some spaces i'll do cd one portfolio so go to the project folder and i'll just do ls just to be sure now next i'll just do code dot so that it opens up my vs code now we are here now we'll just do some cleaning right like as we always do i'll remove this three files i don't need it i'll just delete it and delete this file as well go to index.js remove this we don't need that we don't need this and save we also don't need app.js so delete go to app.js i meant app.css.app.js so delete app.css remove this and we also don't need all this stuff just for testers i'll do div and create h1 and just say hello and what i want to do next is remove all this from index.css now let's go ahead and add tailwind and then we will run the project okay so i'll open up my safari and just go to tailwind right here and what i want to do is click here and uh just click on get started so in framework guide and here you want to uh select create react app because that's what we used to create our project and click here now we already did this part so the only thing we need to do is i mean we need to do a couple of things but it's pretty straightforward guys uh just installing some dependencies dependencies right so i'll just copy this i'll go back to my terminal and i'll just clear this and just paste it here and until it installs go back to safari copy this guy and what this will do is it will initialize tailwind for us and i'll show you the difference so this dependencies are already installed now as you can see this is the folder structure right now what will happen now is you paste it here and just hit enter now okay what this did is it created this file for us so it's all tailwind stuff just boilerplate stuff guys don't worry okay now let's go back here what we need to do next is copy this all this stuff go back to your vs code go back to tailwind.config file and just paste it here and just hit save go back and what you want to do is copy this three lines i'll just copy them go back to vs code and you will paste this lines inside index.css okay and just hit save and now we are good to go uh now i'll just go back to my terminal now i know guys i can open up my terminal in vs code but i like it in separate window as once the server is running we won't be stopping it that uh often so just don't worry i'll just run it right here so npm start and just hit enter okay and we should be fine so this is asking me to open up in another port because i already have my previous site running so let's keep it running so that we can reference it later and just uh hit save uh hit yes but for you it should just start running and okay as we can see hello right here i'll open up hello right here as well in our mobile version and so how the way we will do it is let's do this so i'll make this guy here and we will see the mobile version right like side by side but whenever we want to see the desktop version i'll open up both the uh file uh both the windows okay so we are done with tailwind now uh let's let's test out tailwind right so hopefully it's perfectly installed for you as well so i'll just do class name and let's do text uh bold uh text oh it's actually text for excel and we'll do font font bold and just hit save and as you can see our font is bold and you know what actually let's close this so we have more room okay tailwind is perfectly fine let's go ahead and add some more stuff we need react icons so i'll do npmi in new tab of course a new tab because our server is running right here so i'll do react icons let's just be sure we are installing the correct dependency we can go to safari come here and just copy this and guys all these links will be in the description below so don't worry about googling you can just click from the description come here and do what i'm doing so go back here and instead of this i have this it's it's the same thing just hit and it should be just fine okay perfect that's installed and next we will add custom phones you know let's just do that we need railway so railway in here click here and what you want to do here is start selecting all these fonts i know there's just a lot of fonts but we just need to select so that we can have like bold and italic and all that stuff so just click here click here click here click here one more i i really want them to have like select all button right that will be way better okay that's fine and we also want one more font can i do that okay no so let's just copy this make sure you don't copy style so go to add import and you will just copy things inside style because we will be pasting it inside index.css so i'll go back to my vs code open up index.css and paste it above tailwind stuff so i'll just copy paste it right there and we also need one more font okay before that let's just do this so here you will do at a layer and this is going to be base and here we'll do html and do this and here once again go back to your phone website and and so in the bottom right corner you will see css rules just copy the whole damn thing and just paste it here okay awesome so you know what we can see the difference so open up our chrome open vs code and instead of let's just comment this out and now if i save okay it's a different phone if i uncomment it out and you can see it's a different phone so awesome uh now what we need we need one more font and which is a great wipes so i'll just go back to home page and search for great wipes copy this now this one's really easy because it has only one uh one thing inside oh okay you can have other stuff okay i'll i'll just remove this and let's have great vibes like like as separate right and we'll do the same thing copy this at import statement go back here i'll go back to vs code and just paste it right here now for this how we are going to use it now we don't want to use this great wipes phone for everything we will be only using great wipes for this part which is the name section so uh the way we will use it is let me show we will go to tail with config file and we will extend it okay i i'll i'll explain you what i mean by this so for now just do this font family and right here what we will do is just say signature sign and now this you can name it whatever you like so i'll just stick with signature and just say great wipes now make sure you type this the way i typed it because it matters and if you're not sure just go to safari and copy it from here right you can just copy it from here go back to your vs code inside tailwind config and uh just paste it like this okay and the way to test out this the way we the way you use this is now with this part with this stuff the whole html is using this font but if you want to specifically use it for something uh let's say you want to use great wipes for this h1 what you will do is let's open up this window right here so that we can see side by side and i'll what i'll do is so as you remember we named it signature so what i'll do is i'll do family i think it's font signature right see this is the power of tailwind guys and if you're not seeing this intellisense like all this recommendations what you want to do is go to extensions and you want to get this extension which is tailwind css intellisense which is super amazing guys it will help you with everything now let me tell you if you are familiar with custom css and you want to understand what's going on right here what you want to do is hover over this text for excel and it will show you what what it's doing so it's it's telling me whenever you add text for excel it will add font size 2.25 ah sorry 2.25 rem and line height will be 2.5 ram right so and you can see in pixel as well so that's what that's what's happening behind the scene right and once i hit save because we are going to change the phone so i'll do font signature and save it and awesome do you see guys we have our custom font right okay now let me just open up my notes right here and just check did we go through all the stuff one more configuration i need to add is the asset folder so i'll drag and drop from a different screen right inside source okay now this folder will be available to you from my github page so just go there and download it and you can just drag and drop and use it okay the only thing i want you to do is uh instead of my hero image just pick your picture like any picture and just name heroimage.png okay just do that and you'll be just fine and replace the files okay delete this one and add your own file so that you can see your own picture right there cool okay uh looks completely fine and i think we are good to go next what i want to do is inside source i'll just create a new folder which is going to be components and i'll just hit enter and let's create uh let's remove all this part right now we don't need all this and let's start with navbar right what i'll do is i'll create a new file which is going to be now bar dot jsx and i'll just do rfce now this is again an extension which is snippets i'll show you again and you want to get that extension as well so that you can do what i did you want this one es7 plus let me bump it up esm plus react redux snippets uh super good guys once you get this you will be able to do this so r a f c e and just hit enter and it will fill up everything for you okay go back to app.js and inside div let's import navbar and just hit enter here and make sure you have this import statement uh auto importing guys okay so what i want to see is and that's perfectly fine that's the expected behavior guys all right now let's go to navbar and let's start by adding some icons so we'll do react icons and fa because we will be using font awesome so first one is going to be fa bars and next one is f8 times just hit enter and let's just test them out i'll just put this on the side and what i'll do here is this is going to be fa bars and just close it and as you can see we can see the icon right here so that's awesome and we don't really need it right now we will be using it later on so let's start by adding class to our div so this is going to be class name this is a flex justify between and we will have item center hit save next we will have width of full and height of 20 now as you can see height of 20 is 80 pixels and 5 ram in height and just save it and i'll just do text of white and save again and another thing we will add is fixed so what this will do is this will fix the navigation bar on top even if you scroll it just sticks on the top now if you don't if you wish to let the navigation bar scroll when you scroll just remove this property and it will just work just fine next is going to be div inside there we will have one h1 and i'll just add my name right here now i just saved it but we still don't see my name the reason is the text is white right so what we want is we want background of black because that's how it looks in the project right now you can see my name right there now we also forget to add some uh padding so what we'll do is we will do px of we'll add padding of four and just add hyphen right there so now you can see some padding now p x is padding on both the x uh x axis not both x's uh so p x is basically it's padding on left and putting on right okay and for padding top and bottom it will be p y right awesome now let's go ahead and add some uh styling to our h1 tag so what i'll do is i'll add class name first is going to be text or file excel and just save it you can see the text is bummed up but it still doesn't look something like this so yep you guessed it right we need to and add our font which is font signature and awesome right it just changed looks super cool and we will add margin left of 2 so it will just come a little bit inside okay pretty awesome uh so looks like we are done with the whole h1 thing now let's go ahead and add our ul so this will have all our list items and all our actually our navigation links right and this one will have class of flex just save it and let's have our first link right here and i'll just say home and we can actually see the link right here right awesome now uh instead of adding more links let's just add some classes and after that i'll show you a good trick of adding links so i'll just for now let's just add the classes so we will have you know we can have one more like it won't hurt uh okay so that we can see the changes right so let's do px of four so once again padding on x axis and once i hit save they just come apart next is going to be cursor pointer so once you hover over it it like it gets pointy right that's why we have cursor pointer then we'll capitalize so instead of having home let's say if you have lowercase what as you can see it's a lowercase right now we'll just to capitalize and it will capitalize right as you see and we will have font of medium and text gray 500 i will be using this text gray 500 a lot and we will do hover and however we will scale 105 percent now let's try to hover now as i hover you can see it does scale like if i zoom in closer it's just too much right but just to see the effect now it looks like choppy right we want it to take some time so we'll just say duration of 200 and save it and now when i hover it looks super smooth right amazing i'll just bring it back to uh to my standard zoom right okay duration 200 that's perfectly fine now instead of doing this right what you would generally do is you just copy this right like this i don't want to do this i'll show you a better way of doing it so what you want is you want an array on the top so this is going to be links array of links and inside that you will have an object the object will have two properties first is id and another one is link so id will be like increasing so one two three four uh i'll tell you why and another is link this will be home and just add comma i'll just copy it couple of times one two three four you want it four times because we have total of five links so this is going to be two and this is uh let's just get it from here so we have about i'll go here and this is going to be portfolio and oops my bad we want to change this to three and change this to four and this is going to be experience experience and here it's going to be 5 not equal to 5 just phi and this is going to be contact guys not okay something's wrong okay okay that's fine this is the array right increasing ids make sure you change the ids and what we will do is we will loop over the array so i'll go below my unordered list and let's just add some space so that you guys can see what i'll do is links.map right and here you will get a link and we will map it to this so just copy this i'll just cut okay just cut it and paste it right here and for first we will start by adding the key now why do we need this key whenever you are looping over an array and mapping it to some jsx element so what happens is when react when there are changes to the elements the way react knows like i need to change this uh element it's from the key right so key needs to be unique and it needs to be consistent like generally what have what happens is you get the data from database or api and it always has some id so but for now we just need to add it like this and what so right now what i'll end up doing is link dot id right because this is the link right i will get each and every link as the variable and i'll do link dot link now as you can see this looks really terrible right what we can use here is we can use d structuring so i'll click here and add curly braces and instead of doing link dot id i'll just say id dot link sorry id comma link now we don't need this it just works automatically so this feature came with es6 guys so pretty neat now we have this uh our our navigation bar is ready right now i hover it works we have proper spacing but the problem is this is still visible for mobile versions right so what we will do is we will hide this guy so what we want to do is we will use so we will so as i told you earlier tailwind is mobile first so if we say mobile first this has to be hidden like by default it needs to be hidden we will show it when so this is the media query i'll show you we will hover over it and see and do mdflex and now we see it and if you hover over md uh it says like it's media query of min with 768 pixels okay uh so you have like small medium and large and i think we'll be using small later on in the tutorial but now check this out if you uh make this guy smaller uh the the menu just disappears awesome stuff guys awesome stuff so next so we are done with this part now let's let's go ahead and implement a mobile menu right after this ul now is the time to use the icons right now we will need the bar icon so let's start by setting the bar icon up i'll just create a div and just add the icon right now and then we will add stylings and all that stuff i'll just close it and okay you see the icon but initially initial state is fa bars not fa times okay we see it first we will bump this up so size is going to be 30 okay awesome and we need to add some classes right here so classes are going to be cursor pointer because you want it to be pointer right so uh right now it's not saved and if i hover like it's still pointer it's the mouse but we once i save it i see this guy which looks like there is something clickable so cursor pointer padding right of four so it just comes a little bit inside and we will have z of 10 so that it's always on top right and we will have text gray of 500 and just save it and we can see this grey icon right but once you click nothing really happens so for now let's just uh you know what we can change it you know what let's do that let's add state right you need a state to in order to flip it so the way you add state is i'll just do cons and we'll be using use date for this so we will say let's do nav and we'll just say set nav and this is going to be used and just hit enter and now uh just make sure guys uh use date is imported on the top okay and otherwise it won't work by default our state will be false so here you pass the default state okay here what we will do is first of all on click we want to change the state right so on click on click what we want to do is we will change the state right so i'll just say set nav and this is going to be opposite of what the state was right so if it was true it will become false if it was uh false it will become true right and if uh and based on the state we want to render the element so what i'll do is i'll just cut this create uh the curly braces thing and we will check for nav like if uh if it's true right if the if the thing is opened up what we want is we want f a times right right we want fa times and size property will be 30 again so that we are consistent otherwise we will paste this and now if i save it we will be able to change the state awesome right awesome stuff guys now let's go ahead and add uh the the the list right the list for mobile version okay after this uh we are done with this part what we want to do is let's add one more ul tag so we will have ul and just close this and ul will have a lot of classes guys and this will have flex flex of column so this is basically flex direction of column justify center and you know what i can show you what's happening let's just add li uh we will just add like list item right now we'll just hard code it but eventually we will use that the same array so that i can show you guys what's happening right as you can see it's right here okay justify center and i will do item centers center as well so item center save it uh okay still nothing happening but hold on uh what we need to do next is item center absolute it's going to be absolute top of 0 left of 0 and width of full and height will be screen so it will take the whole screen and once i save it okay we still don't see it because i think it's the background okay now let's just do bg gradient pg gradient to bottom so this is going to be bg this gradient will go from top to bottom and now we will add the from color so what is the color at the top so from is going to be black and uh bottom one from and to gray 800 so we'll use 800 right here and as you can see right here awesome right awesome stuff guys next is going to be text gray of 500 and it will just change the text right there okay one thing we need to do is if i bump this up right right now this is bigger than the the thing right so what needs to happen is you know let's work let's come back to it later okay right now let's just fix uh let's finish this part so just stay here and so for now let's just do one li and right now here we'll just add some classes okay and this is going to be px4 cursor pointer right here and capitalize just like before and we will have p y of six because this time it's in column uh basically it's padding on y axis and we will bump up the text size because now we have the full screen right so i'll make it text for excel and save it and as you can see it's bigger but the problem here is we need other links right so what i'll do is i'll just copy this guy this thing we just will be doing the same thing the only difference is in the classes right so what i'll do is i'll just copy this classes cut cut this classes and go here and paste it right here and now we don't need this guy and just save it awesome guys awesome now this is perfectly fine but the problem is we don't see the icon like according right it's not flipping the state so it's pretty simple guys so what we will do is we will check for one thing oops my bad and i'll just okay this is not big enough i'll just make it big enough right here and what we will do is we'll add jsx element and we'll check if if nav if nav is on if it's true if it's true what we want actually what we can do is if nav is true then only so we we can use and n and just show this right because if it's if there's nothing if nav is false we don't want to show anything so it's just saved right now the nav is false and once i click bam it's right there now there was a problem right i i told you earlier if it's big if the screen is big we still see this icon right so my bad like they're they're going to my different screens right okay okay we are back right here so what we need to do is on bigger screens we need to hide this so what we will do is right go here to the icon part and at the end what you want to do is medium once it's medium you want to hide it so medium hidden and once i save it boom it just disappears awesome stuff guys so once i decrease the screen size we see the bar hamburger menu but if the screen is bigger we see the links right awesome stuff guys so right now we are done with the navbar part but eventually we will come back and add smooth scroll to our project right so what i'll do is i'll go back to app.js okay we need to create a new file so this is going to be home dot jsx and i'll just do r a f c e refse so r a f c e hit enter and just save it i'll close that thing and go to app.js and just load our home right so that we can see so i'll just do home and hit enter so that it automatically brings the import and i'll just save it i mean we still don't see the text right we don't see the home stuff but we will fix it guys because it's actually behind our nav bar if i hide the nare bar you will be able to see right so we will fix it we'll get there so right now let's uh first we will start by importing my hero image because if you see here this is the hero section and i have the image here so let's start by importing the image and we also need one icon so i'll just do inp this is going to be a set and this will be portfolio and no we assets and this is going to be hero oh why am i not getting auto complete because assets and that's hero image.png so i think i'll have to do it myself so it's dot png don't worry about that and i'll just name it let's just say hero image now let's save it and let's just try to see if it works i think it should work hero image save oh okay we see the image but right now don't worry about this i'll just remove it and next we need to get the icon for the arrow right you see here we need this arrow now let me show you how to find icons on react icons right i'm assuming you successfully installed react icons so go back go to the react icons page and you can search for any icon you want this is my previous search but we can do a fresh search so i'll just do arrow and it just finds automatically but we need arrow right so i'll just do arrow right and now you can choose any arrow you like okay i think uh previously i used i don't know i think it's hi so let me search for hi yeah this one i think it's hi error right but this time we can use something else so what you you can do is you can just click on this so let's use this i'll just click and it says it copied right it copied the name go back to your uh your code and i'll just open this up we'll do imp and here we'll do react icons and this was md right the initial two letters were md so you will do md here and here uh what we will do is open the brackets and paste it right here and just save it and if you go back here inside the div and use the icon uh and it's it's behind the uh navbar i'll just comment this out and we can see the icon right it's super small let me bump it up now okay you can see it right i'll just go back and we'll make the changes right so let's just undo the do this go back to the home and we don't need this right now let's start by structuring our divs right so there will be a div outside there will be another div inside inside that div we will have another div and that they will have one h2 tag and this tag will say i am a full oops my bad full stack developer okay that's fine and after that we will have a p tag now i don't want to waste my time typing so i'll just copy it from my notes and just save it let's just save this after that p tag after that p tag we will have another div so inside that div we will have a button so button and this button we uh this button is going to be that the arrow thing right so it will uh the button is going to say portfolio right because we are going to portfolio so portfolio and guys even this part is going to be smooth scroll right if i click here it will take me to portfolio so we will add smooth scroll to this part so it will be portfolio and it will also have i think the icon will be right here so we'll do md outline and just save it go back here oh see now we start to see all the stuff okay portfolio and i can and what we need to do is we need to surround the icon in a span so that we can do we can perform the animation right okay that's awesome now let's start by adding the styles so that we start seeing stuff so first the right here is going to have a name now this name is not required for react stuff but we need this name property name attribute for react smooth scroll right if you have done it if you have used react smooth scroll before you know what i'm doing so anyways i'll show you in the end when we add smooth scroll so right now just add the name so that we don't forget and next we will add some classes so it's going to be flex uh height of screen so i'll do it screen and okay we don't really need flex flex right here so we'll do eight screen and with a full bg gradient the same thing so gradient bottom so bg gradient to bottom and it's going to be from black and this is going to be two gray 800 awesome and now we can see amazing gradient guys okay now we will add more stuff and try to see i try to bring all this in the center right so i'll add another classes to that div and this will have max screen width of large max with screen large and once again guys you can hover hover here and as you can see it's maxed with as one zero two four pixels right and let's add more classes so mx auto and once i save it uh it we still need some more styling so just hold on and we'll do flex flex call so flex column and we will have item center and next we will have justify center and height of full now once i save this it will bring everything in the center right but we still need some padding and just save it and one thing to note is this so as you know this are going to be like side by side right what we need here is we need md of flex row so when okay i'll just save it once i increase this okay the thing is the the picture is missing right so what we can do is we can add the picture so let me just pick the div right which div okay we need picture after this div uh okay after this right after that there we need another div and this they will have image let's just do hero image right here so this is going to be hero image and let's just do uh my first my profile right if you if you put picture or logo or something it will yell right if you want to see i can actually show you so if you do picture here let's save it go back to our terminal and right now see it's going to yell right you cannot have image photo or picture inside alt and if you have this kind of compiler compiler warning it will be uh so when you deploy to netlify the build will fail so let's just stick to their their restrictions right and we don't want this ugly warnings now once i save it it's perfectly fine so that's why i'm just being a little picky now we also need class classes and this is going to be rounded to excel rounded to excel mx auto and we will have width of two thirds and md will be width or full so so basically when the screen size is greater than md uh width will be full otherwise once it becomes mobile it will be smaller right now what we need is if we see what happens right what happens see it becomes in column orientation right when it's in mobile version because of this if we remove this if we remove this but don't mind the train guys i live really close to the train tracks so it just sounds right and we are not able to see the text text because we need to make text white we can actually add it right here so let's just do text white and we can see the text right okay so let's move along what we will do is i'll just remove this we will add it to individual tags and let's bring back our md of flex row so that it comes back to row and now let's start by adding more classes to our other div right here and this div right here will have class of flex flex column and it will be justify center justify center and height of 4 and just save it and let's start adding classes to h2 i'll just look quickly have some water guys been talking a lot right okay this is going to be text of 4 xl and once so text or for excel for mobile and for bigger screens like desktop we will have bigger text as you can see it just bumped up and we will change font bold and text is going to be white and save it wow it pops up right amazing guys amazing and for p tag what we want to do is we we want to add more classes so this is going to be text ray of 500 and we will have padding on y axis of four and just save and we can see the difference and next thing we will have max width of medium so that it just you saw that right it just become a little smaller okay that's awesome if i bump it up looks pretty amazing right we still need to style our portfolio icon if i go here okay looks pretty similar i think we are missing out something if you see here like it it gets a lighter early on so i think we need to add one more property here and this property is going to be via so this is again for the gradient so the way you want to read is first a background gradient from top to bottom because it's from of course from top to bottom from color black so starting point is black the midpoint is black and then the last point is gray right so it's it's the points and if you go to tailwind uh documentation you can read more about it now we are done with this part now let's add styling to our button right because our button needs some styling and we will start with the button tag right here and i'll just say add some classes here so this will i'll show you that later so first let's start with text of white save it and we can see i can end the text and width is going to be fit with a fit px of 6 py of 3 and we need margin on y axis of 2 and i'll just save it we want flex items item center and we will have rounded medium and we will have we will again have gradient right now we can just save it and as you can see it just came together now we will add the gradient so bg gradient to right okay so gradient is going from left to right and from cyan 500 and this is going to be 2 blue to blue 500 and just select this and save and you see this amazing gradient right and we are missing out on one more thing so eventually we will make convert this button into link tag so that's why i mean of course button has a cursor pointer by default but eventually we will convert it to link tag and for that we need to add cursor pointer so i'll just add it so that we don't miss out uh in the later part now we just need to work on the animation right if i hover right now there is no animation so what we can do here is we will add classes to our our span containing the icon right so uh the so the way you do transition the way you do animation is you do on hover and put colon and what we want is rotate 90 so it will rotate 90 degrees right and once i save it if you hover here nothing happens right actually you need to hover here and you see the rotation right you see it rotates but the problem is let's do uh duration as well because it's really choppy so we will add duration of 300 and now if i let's let's just zoom it and now if i hover it does rotate and it's it's pretty smooth but the problem is we want it to rotate when we hover on the on the whole whole button right the way you the way you do in tailwind is you will add another class which is going to be group right so group class on the button and here instead of just saying hover you will just say group hyphen hover and save it and now when you scroll uh hover over here or here it it just rotates right and one thing i noticed the icon is really small so let's just try to make it a little bigger if i do 25 i think and let's go back to normal size i think now it looks pretty good okay i think i want to stick with 25 and let's also add some margin right so i'll do class and this is going to be left of one and just save it and okay pretty amazing guys awesome okay so if i bump this up uh our home section looks amazing and if i make it smaller for mobile devices devices it looks great as well right and one thing we are missing here we are still missing is the social icons right if you see here we will add the social icons you know what we can add it right now uh so let's do this let's go back uh to and the reason you don't see on the smaller medium is because if we have the icons the the text will be like pretty close right so what there is a breakpoint which we will be using and once the screen is bigger than this size you see the icons right so we will work on it let's add our icons first okay go here and we will create a new file so here let's do social links dot jsx and just save it i'll just do refsc and what i want to do is go back to app.js and after home we will add social icons uh social links and just save it and the reason i left space is we will add more stuff here let it be at the bottom and if we go back to social links and just bring this right here and right now uh oh okay this one is the wrong side this is the one which we are working on okay uh not 3000 we are on port 3001 okay right here you we see social links and this is three thousand right okay fine perfect okay let's start by styling this so i'll just do this social links guys uh okay what we need to do here is so import the icons let me close this so that we can see uh let's hit save and let's start by importing some icons right here so we'll do react icons and first is going to be from fa and from fa we need github and we also need linkedin so fa github and fa linkedin and we also need so if the folder changes so let me do this again and hi and come here hi outline mail so once the folder changes you want to do it in separate import basically right and let's do another one imp and this is going to be react icons and this is going to be bs so and this is going to be fill person lines fill okay pretty big name okay no problem that's that we are done with the import part now let's just start by adding some stuff right here so inside div we will have ul and ul will have li and li will have a tags and just that okay that's fine and let's start by we can just say so a tag will have uh another let's just do empty tag which is called react fragment and what we can do is we can do linkedin linkedin and we can uh add the logo right here so that we can start seeing stuff okay we need to add styles so that we can see what's what's happening right there okay so let's start with this div first and first is going to be flex call which is flex column and we will have top of now this is computed property guys so you can also do this now this will become top of 35 so basically 35 percent from top okay and left is going to be zero and this is going to be fixed as well so even if you scroll uh it still sticks right there okay and we also need to add flex right here so i'll do flex in the front and just save it now uh let's add some styling to our li tags so here it's going to be a lot of styles guys so flex justify between and we will have items center with a 40 height of 14 and we will have px of four basically uh once again padding on x-axis will have margin left uh let's just not do this right now and if we save this okay uh actually it's right here like if i add a background here uh can i so let's do bg white if i do bg white and we can see it right here right so next we need to add classes to our a tag and we will add flex justify send justify between and item center so item center and width of full and text is going to be white and if you save it of course it's going to be white so we can change this to black and if we save it we can see uh the the link and the icon stuff right but we still need to add some more styles to our li so in let's remove this for now what we need to do is we are missing out on something so flex with okay with of it i guess what we need to do is we need to increase the size of this guy over here so let's make this size of 30 and if you save it now looks pretty good if we go here and bump it up okay i think text size looks perfectly fine and i we we need some padding we need some padding somewhere so let's go back here and let we already have padding right here do we need padding in a tag uh not really okay uh we do we do have padding right here so i think we messed up the height so height was supposed to be 14 but we have height of one-fourth right if i bump it up this is supposed to be 14 guys not one by four so i'll just save again okay now it looks good if i change the background to gray or something okay we can see okay this is perfectly fine now let's work on the the animation part right so first what we want to do is we want to hide it so we will start here in the li tag and this is going to be ml and once again computed property guys and this is going to be negative 100 oops not o 100 pixels and save it and you see that it just went behind right and we also need background right let's just add background so that we can see stuff okay we have it right here and on hover we want to on hover we want rounded md so basically this this will add a border radius right rounded md is basically border radius if you hover it adds border radius of 6 pixels and we will also have duration of 300 so that it's not choppy and if i hover now okay something is wrong or we still need to add one more property which is on hover we want to decrease the margin left to let's make it minus 10 pixels and save it and now when you hover okay it's perfectly fine and you can see this amazing rounded corners right now as you know we had like four four uh four links right now instead of copying and pasting this let me show you amazing trick again now this is going to be super cool guys we also need uh href and stuff so super extensible so what we will do is we will do const and links again this will be an array which will of course have id of one we will have child uh child property and this will be a jsx element basically it will be this thing so i can just copy this copy this and paste it right here and it it's completely fine to do this okay now for this href we will have h ref so where you want to go right so basically this is going to be https uh colon colon link in dot com and another thing is so let me bump it up let me bump this up so that and don't worry about this guys we will hide this on smaller screens later on uh right now if you see the top one has corner radius already right but only on the top side so let's add that i'll go back uh bring make this smaller change it here now we will add because it it is specific style for the top row right the top link we will have a custom css for just the top row now of course the id1 is the top so i'll just do style and this will have rounded and tr of md now tr is top right right simple stuff guys okay now let's go ahead and add two three four so i'll just copy this copy and do comma paste comma paste comma and paste so this becomes four let's work on the second one so this is going to be number two and this will be github so github and this is going to be a f8 github and of course size of 30 now we don't need this style and href is going to be i think uh it's github.com slash i think the yash patel now this is uh this link takes me directly to my profile okay third one was email option so for email we will just say mail let's just do mail and this guy over here is hi out mail and this will have href now this will be different right this will not have https but instead we will have mail too right mail to will open up the user's email client okay so and i'll just do food or gmail gmail.com and of course this will not have style as well because it's in the center now this one will have bought a bottom uh bottom right radius right we'll work on it so let's do id of four and this is going to be a resume and let's just do bs fill person fill resume and this one will not have href this will have href now guys for this to work we need we actually need the resume so i'll open up my downloads folder which is right here and i'll open up this so inside public i'll just drag and drop the resume right make sure you drag and drop inside public folder guys okay so i just put it right here inside resume and i'll close the screen and close the resume we don't need to view it so instead of this so once again make sure it's id of four and this one will have href of resume.pdf okay and style is going to be bottom right and we also need one more thing guys this will have download down load to be true uh i'll i'll tell you why because it will allow us to download the file okay okay now what we want to do is we want to loop over our links array so links.map and this will destructure this is going to be linked and what we want to do is we want to return a jsx and this is going to be our jsx the whole li thing so i'll just copy this cut this actually and paste it right here so we need to add couple of stuff right here okay so first we need the key right so for key it's going to be and let's just destructure this guy as well so that we know what we want we want id we want a child we want href we want style and we want download okay so first is going to be id so just put it right there and for styles we will what we will do is grab this whole thing add brackets around them and after the end what we want is plus we will add empty space so basically okay let me bump this up so that you can see so plus empty space plus style so if you want to add some custom css just for one specific link you can do it like this and next we will have a trif and this is going to be href and next we have class don't worry about that and here you will just have child so child and another thing what we will have here for a tag is going to be download so download is going to be download and we will also have target of blank because uh with this with this target property what happens is it allows you to open the new tab okay and another thing we will have real let me show you why so if i just save this right now hopefully it should work just fine and okay amazing guys look at this look at this we have it right here okay let's try to click uh let's try to click on linkedin okay bam it opens up linkedin guys okay let's click on github opens up github awesome awesome and if i click on mail okay it did open my mail client i'll close this and if i click on resume it downloads the resume awesome stuff guys now let me take you to terminal and this is yelling right if using target blank without rel no referrer which implies once again we don't want this warnings so what we'll do is we'll just copy this rel refer node refer go back to the code and we will just add this inside our a tag and save it and bam the the the warning is gone okay because we don't want warnings now again like this is not good for tablet screens as you can see it's like uh it's colliding with our text which is it doesn't look good we want something like this right so what we will do is we will go back on the top and what we will do is by default it will be hidden and if the screen is larger right so large what is large large is a media query of one zero two four pixels right mid min width of one zero two four pixels and i'll just save it and it just disappears okay now if i bump this up we will see the icons right so this will be only visible on desktops amazing guys amazing okay now let's work on this about section right so what i'll do is i'll go back to vs code you know what we can just put it right here and go back to vs code i'll open up i'll create a new component and this is going to be about.jsx we'll do rafce and save it go back to app.js and here we will do about and just import and save it now if we go back to our site and we can see about right here okay now let's just close this and hop to about.jsx and let's start by adding html right so div will have another div and inside that there we will have another div and that div will have p tag and p tag will just say about and after the div we will have another p tag which will have norm of 50 and let's do line break so this will be br like just standard breakpoint and we will have another p tag with lorem of 50. okay hit enter and save and we can see bunch of text right here but we need to style all this stuff right so coming from the top sorry so what we'll do is i'll give it a name and name will be about and we will have class uh classes of with full height screen and bg gradient to bottom and this will be from gray 800 to black and we also want text white okay and save it and we can see that we got the background and the height is full screen right now okay we still need to add some more stuff and guys i'm telling you about section is the most easiest part of this whole build so anyways we'll be done like in a minute or something okay so this will be max with screen of large and we will have padding of four and we will do mx auto so that it just gets in the center flex flex column and next we will have justify center and we will have width of full and height of full okay save it okay looks like it's in the center we still need to add some more classes so this will be padding bottom of 8 and let's add some classes to our p tag and this is going to be text for excel and we will have font bold inline and we'll do border bottom of four and we will also have border gray of 500 okay that's it and if i say we see that this just bumped up right in size okay next we will add some class to this p tag and this will have text excel and a margin top of 20 so that it just like separates it still separates the text from the about right about section and we will have last we will add class to your text of excel that's it okay looks awesome so let's just compare okay perfect perfect so next we will work on the portfolio section so this one i think that's the best part here portfolio and experience amazing so i am super excited right now so let's do one thing i'll bring this up and let's just make sure this works completely fine on mobile devices looks pretty good okay amazing okay awesome what i'll do is let's close this about section i'll uh create a new file and this file is going to be portfolio port folio.jsx and just do our afce hit enter go to app.js and under about we will have portfolio and hit enter and save and now if we scroll we can see small portfolio right there okay now i'll hop over to portfolio and okay i'll quickly have some water and now i'll just close the sidebar and let's start by importing our images right so this images we will start importing them so that we can use them later on so what i'll do is i'll do import and uh first one is going to be array destruct and this is going to be from uh okay my band uh do this dot dot accepts and this will have portfolio and this will have already struck dot png what i'll do is i'll copy this six times uh five more times so one two three four five and just do this so i'll uh so the way you select the next one is using command d shortcut so i'll just change the name together so install node and i know for a fact that there exists a file like this so make sure you do have a file so now bar i intentionally name them so that we can do this and just save some time so react parallax and this will this guy here is going to be reacts uh smooth for smooth scroll and this guy over here is going to be react weather and if we save it okay we have some problem our problem is can't resolve install node.jpg yeah i think we messed up the name for install node and so let's just double check we will go to a sets portfolio install okay there are supposed to be two else so install node and now if we save everything's uh perfectly fine so if if it runs successfully it means that imports were successful right okay now let's add uh html first and what we will do is inside the div what we have you know we okay let's let's just add the structure so div will have another div and that they will have a p tag and this will be portfolio and i'll just okay and after that p tag we will have another p tag and this will be check check out some of my work right here okay and that's it aft uh so after the p tag and after this div we will have another div and that div will have another div and that they will have image and we will come back to this later and after the image we will have another div and that they will have button and it will have another button okay so that's how it's going to be now right now actually this part here like after this div so this is the structure for the whole card right so this guy this whole thing is structured for card okay so if i just do let's do uh demo and code here and eventually we will create an array and loop over them uh loop over it right so i'll just save it and if i scroll down here i see this right that's that's perfectly fine and let's try to add an image right here so that we can see what's happening and let's do react weather and i'll just save and we can see the picture right here okay now let's start by adding the styles right here so i'll start from the top so what we'll do is this we need to give it name for smooth scroll and this is going to be put for you and class class names are going to be bg gradient to bottom and this is going to be from black to gray 500 oh my bad to gray 800 and then we will have width of full and text of white okay and what we will do is for uh after medium so for larger screens what we will have is height of screen okay so that's it okay saved and next we will add uh styling to another div the the one below that and this is going to be max with screen of large large and hit enter uh padding of four mx auto and we will have flex flex call and justify center and we will do with full height full okay and save okay pretty good next we need to add style to this guy over here and this will just have pb of 8. if you notice it's pretty similar to what we did with about section and it's just trying to be consistent okay and we will add some classes to our p tag right here and this will have classes of text for excel font bold inline and it will have border bottom of four and it will also have border gray of 500 and just save it and we can see okay perfectly fine and let's let's work on the next p tag and this will just have padding y of six so on both directions uh uh on top and bottom as you can see it just separated okay next we will work on this part this div right here and this div here is going to have classes of grid and we will have so for small like uh this will have grid calls too and for medium it's going to have grid calls of three and gap of eight so gap is the gap between all the grids i'll show you what i'm talking about so uh and we will have padding on uh both left and right of 12 and for small devices we will have padding of zero right so basically uh okay my bad so padding of 12 on both left and right is for mobile devices and after mobile devices like devices with minimum width of 640 there will be no padding on uh either left and right so what so actually if you see there is no padding on left and right here but if i shrink this down to mobile size you can see there is a padding right that's why it looks really good right here so and so that's what we will be doing okay so that's that and for this div uh we will have class of shadow medium and we will have shadow gray of 600 and just save it and round it large and hit save again okay it's coming out okay it's getting there and we will have images we will add classes to images as well and this will have rounded md and duration of 200 this is for the hover animation so hover will be scale scale 105. okay awesome now if you hover on the picture you can see it like it uh it pops out right okay awesome awesome so next we will work on this there guys we are almost done i think probably halfway through the project so let's bring up the energy back right and we'll do item center and justify center and just right there and this we are adding uh classes to our buttons right here and so i think both of this will have similar uh yeah they both the buttons oops my bad what happened right there so both of this button have similar classes so what i'll do is i'll select both of them and how you uh the way you select is like command d right command d is the shortcut and what we will do is width of one by two uh oops my bad one two so yeah this is indeed width of half and half so basically take the full size px of six padding y of three and we will have a margin of four and duration of 200 and on hover we wanted to scale 105 and now when i save it awesome guys look at this so right now it's in two by uh two two uh two grid layout but if you bump it up it becomes three grid layout guys and if you make it smaller on mobile devices it just looks perfect guys right now what we'll do is now we will create the array right and this array is going to be super simple guys let me tell you so i'll do this and let's go ahead and add the array right now let's call it portfolios portfolios and i'll just do this open this ide one and this will have source of array destruct comma here and just copy this guy and we will have six so one two three four five yeah five five is good because we already had one so yep right here this is going to be 2 and this will be react parallax and this will be 3 and this is going to be now bar and this will be 4 and this is going to be react smooth and let's change this to 5 and install node and 6 is going to be react weather okay that's it now we will loop over this array what is this like id is similar to other ids which we gave right but this is just this right like we are just referencing it there so that we can loop over now where do we loop we loop right here so in between these two tags what we'll do is do this and portfolios dot map and here we will have a portfolio but we will destruct and let's see what all the we need id and we need source we'll do this and we will return a jsx and we will return this whole thing so i'll click this cut it and paste it right here and the only changes you guys need to make here is first we need to give this id so id is going to be uh oops my bad it's going to be key key is going to be id and here we will just say source and just save it now something is wrong here if we open this up okay this works completely fine something is wrong right here it works completely fine here so let me check it out let me see what's the problem probably something right here so small greed columns okay grid and single so after crit calls three okay let's try again let me just refresh the page okay something is wrong right here okay what we will do is i think we messed up the height somewhere so this is going to be height screen what is the height going to be okay hide of full here and we have text for excel you know what let me use pesticide and okay i think we are messing up the grid layout oh okay i see oh the problem is this guy over here is supposed to be outside and what we will do is put this you know what let's just uh uh i'll i'll just command z the whole copy thing so we can do it again so okay it's right here we don't need the whole thing we just need this so we will actually copy this guy and put it below this below the grid and now copy this so this whole thing i'll just cut it and paste it right here and now we can make the changes so we will give a key here and key is going to be id and here source will be just source and if i save it okay perfectly fine guys awesome awesome everyone makes mistakes okay now uh so let's say right now i'm not adding links to demo and code but what you can do is like maybe uh create on click handler right here on click and create a function on the top and ah so inside this array you can have links right your code link your demo link and inside the function using the index you can get a where the user clicked and you can fetch the links right and open the link in a new tab okay okay guys that's it for the portfolio next we will work on uh experience part so what i'll do is uh this part so we will be working on this part this is the best part guys fun part i i personally really like working with grid so let's do this let's go here and create a new file this is going to be experience dot jsx and do ref c again i'll just save it go to app.jsx and do experience right here add it save it and i'll if you scroll down here in our app you can see experience right here so what i'll do is i'll close this let's go to experience i'll remove this we don't need this okay now uh once again we will start by importing the images right so we need to import this images right here as you can see right those are actually image images and guys you will get all those images and even my uh thumbnails and you can use it like pull it from github and if you're just practicing right now with me you can just use those images but eventually when you are ready to deploy your own portfolio uh you want to create your own stuff right okay let's get started by importing our assets right so we'll do a sets and this is going to be html.png and this we'll call it html uh you want to capitalize it but for now because it's just easier to like change the name we'll just keep it like this and this is one two three four five six seven eight okay next one is going to be css and this one is going to be javascript and this guy over here is going to be react and uh so react uh might have problem with react uh like react itself so we'll just change uh react to react image and this one will be next js this guy over here is graphql save it and we'll do this this is going to be github git hub and last one guys this one is going to be tailwind and save it okay perfectly fine uh the project is working so that means our imports are successful now let's go ahead and add the html now for html there is going to be a div there will be another div and you know there is a faster way we can do this they will have another div and that they will have p and hit enter okay awesome and p will be experience and there will be another p guys which will just say this are the technologies i have worked on or worked with or whatever okay and after this div we will have another div and inside this div we will have another div with image and a p tag so right here and this p tag will be okay this p tag will be the title so for now we can add just one image so let's just say html so that we know what we are working on and let's add one image of html right there and save it and if you scroll down you will see the html part now we just need to style it as like previous uh stuff previous components we will name this as well for react smooth scroll guys experience experience class name this is going to be bg gradient to bottom and this will be from gray 800 uh to black and width of full and height of screen okay awesome and next div will have more classes this will be max with screen large and we will have mx auto hit save p4 padding of 4 all around flex flex column column and justify center and we will have width of 4 height of 4 and text of white okay and i'll just save it okay you can see we got the background and we still need to add some more css so i will go ahead and add the css right here uh so this div tag will have no css let's start by adding css to our p tag which is experience and this is going to be text for excel phone bold and border bottom of four and we will also have border gray 500 and enter and this will be this will have padding of two and in line if you really compare this css with other parts like about and stuff i think they are pretty similar they are indeed they are indeed similar so maybe you can create a custom component for that uh maybe later so for now let's just stick with this so and this guy over here is going to be py6 so that we can see what what's here right and now for this div we will have classes again this is going to be with a full grid and grid calls to so for mobile devices it will have two column grid and uh for devices greater than bigger than mobile it will have grid calls of three so basically three columns and mobile devices will have two columns and they will have gap of eight now we'll do text center and we'll do py of eight and px software and for smaller devices there will be no uh no padding on both left so so basically for smaller devices once again it's similar to portfolio part for smaller devices it will have padding of 12 on both left and right but for bigger devices there will be no padding okay for this div we will have class of shadow medium and hover on however you want to scale to 105 and duration of 500 py of 2 and rounded large and enter and just save it and awesome now we need to add classes to our image which is going to be super simple width of 20 and mx auto that's it awesome save it and just add some classes to p tag classes to p tag is going to be mt4 and save it okay right now it's pretty good so the thing is we need more of these right so what we will do is once again we will create the array right uh i i think that's the best way of doing this right so you do like later if you just copy and paste this multiple times first of all if you come back to your portfolio after like six seven months and you want to add another element it it gets really hard right because you need to scan the code and stuff or else like maybe after six months you want to change the design and then it becomes difficult as well because you need to make change to each and every like repeating is not good so that's why we will do this uh let's do cons and this will be cons i'll just name it tech for now text uh yeah whatever and it will have id of one and it will have source so source is going to be html and we will have title of html and now here this is the best part guys so we can have custom style for each element and here this will be shadow orange because i know for a fact html icon has orange uh so html is orange icon right so we'll do orange finder i'll just add a comma so that it's easier i'll just copy and just paste it bunch of times so two um let's just do this 3 4 5 6 7 8 okay and now let's start by making the changes so i'll come here for 2 i'll do 2 and this is going to be css and this is the title so we'll do css this will be blue and for number three javascript and this is going to be javascript and this will be yellow and now let's move on with number four four is going to be react image and this is going to be react and this has blue of 600 okay and uh for more guys okay this will be tailwind and this will be tail wind okay and this will be sky of 400 and number six is going to be okay uh we forgot next is so i'll just do next yes right here and this will be next js and next is has shadow white oops my bad and remove this and we'll just do white and this will be seven this will be graphql graph ql and here we'll just do pink pink of 400 and this will be eight this will be github and git hub and change this to gray right and i'll just remove this and make it gray 400 and just save it okay now we have the array the only thing we need to do is loop over it and add uh and add the stuff right there okay so where do we need to do that so that's going to be this div tag so this are the technologies i worked with we'll do it here because yeah the grid should be out there so just make sure you do it after grid okay now we will loop over text dot map and we will destructure right here we will need id we will also need source and we will need title and we will also need style and i'll just do this and oh okay so we need to do parentheses because we are going to return jsx and i'll just copy this and this just goes right here and let's just save it for now and we will see like eight uh what eight htmls html in line and this will have key of id and just save it uh i think it should still fit right so grid grid calls too by default and for larger screens it okay uh right here let's just keep it let's make the changes first so and for class names what we will do is i'll just click take this whole thing add a brackets curly braces i'll copy this actually put back text right here paste this right here and we'll do dollar and here we will add style and source is going to be source and this guy here is going to be the title okay and i save it and we just see it right here now we are missing out on something okay let's figure it out i'll open up this so basically what if we bump this up still doesn't work so we messed up with grid somewhere right uh okay we have grid here with a full grid grid calls tools okay damn this is the problem guys this is not supposed to be good it's grid so if you fix this everything is completely fine okay now if i make this smaller as you can see on mobile devices and i scroll at the bottom we see only two columns but for larger screens it will show you three columns awesome so we are done with home part we are done with the navbar we are done with the social icons we are done with about portfolio and experience the only thing we need to do right now is work on the context section so let's go ahead and do that i'll go here i'll close this saw sets we don't want to see that and let's create a new file this is going to be contact.jsx and let's just do the standard stuff wrap c save it and open app.js and let's just make sure we do our final import and i'll just close it and if i scroll down we see contact which is completely fine and we'll close the sidebar and uh okay uh come to contact and now so contact let's start uh we don't need to import anything for contact so let's uh start by laying out the structure for our html so inside this div we will have an alternative and they will have another div with a p tag and this is going to be contact and after that p tag we will have another p tag which submit the form below to get in touch with me yeah awesome that was fast okay uh it's it's really easy to like just uh uh copy stuff right uh maybe i should type rest sometime like on the video maybe someday i'll i'll try that that will be fun okay so after this p tag after this div the one covering the p tags we will have another div and this div will have form component okay and form we will get to the action part later so keep it don't remove it that's where we will put uh the details right so right now let's just structure our form so form will have input and input of type text and let's add name now name is required for get form to work okay so make sure you add name tag and placeholder will be enter your name and save we will have classes here as well but for now let's just copy this you know what we can add classes they both have same classes and then we can copy them so this will be p2 my bad so p2 padding of 2 bg transparent border 2 and rounded medium and we will have text of white and focus on focus we don't want the outline right the ugly blue outlines i really don't like them so i'll scroll down and we can see the inputs so right now i'll just copy this and paste it right below there and this is going to be email and this will just say email enter your email right and after that we will have a text area text area will have name of message and there will be no id and do we need columns we also don't need columns but we do need rows and this will have a class name as well class will be p2 i think it's same so bg transfer in border and rounded md text white and on focus we don't want outline so outline none and i'll just save it and we can see right all this stuff we need the only thing we need to do is style it and then we will get the form working we also need a button so button right here and button will have classes it will just say let's talk right here and let's just add button classes as well while we are here so text of white bg gradient to bottom bg grid to to bottom bg gradient to bottom from cyan 500 to blue 500 so this guy here and px of 6 py of 3 and we will have a margin on our top and bottom of 8 and we will do mx auto flex item center and we will do rounded medium right here and on hover we wanted to scale 110 and duration will be 300 just hit enter and we can go here and we should probably see our button button looks amazing okay now let's add styling to our form so i'll just go here uh go to the top and for form we will have class name so class name you know what let's start from uh top right right that makes sense so name is going to be context so contact and class name is going to be with full height screen bg gradient to bottom and from black to gray 500 uh oh we do 800. man i always forget uh okay and we will have padding of four and text of white okay awesome next we will add classes to this guy here so flex flex call padding of 4 and justify center max with screen large and we'll do mx auto and this will be height of 4 and save it and oh wow it's it's coming into the shape guys so this they will have only padding bottom of eight and hit enter let's add style to our p tag so this is the contact p tag it's going to be text of 4 excel font bold and inline border bottom of 4 and this guy here is going to be border gray of 500 awesome okay we have it here and another p tag will have class of just oops my bad uh class name and this will only have padding y of six and once i save it we see nothing because we are missing a hyphen and now we see it okay now let's style the form and once we are done you will see like it looks uh pretty amazing so it's going to have flex flex call and with a full and height of so width of full and for medium for me uh for devices greater than medium we will do one by two okay and save it and we see it here but it doesn't yet look good now once again we have a problem with the css so we have this and we are missing classes or uh for the div so this div is the div above form which we just missed and this will have flex and justify center and item center okay and save it and awesome now the form is looking pretty good so i think the only thing why they are stuck here i think we are missing out on margin oh okay so the only uh the the input with email will have margin y of four so it automatically pushes like a name and email uh name on the top and uh message at the bottom and message will have a placeholder so enter your message just save it okay amazing now we are able to type our type stuff here right now let's go to get form and make this work right so what i'll do is i'll go to get form get form dot io and uh looks like i need to sign in but uh so if you don't have an account here just click sign up and it's pretty simple you just need name email and password go to the email and verify the link and you are in okay so i think i have autofill anyways i'll just do it right now gmail.com and this is going to be my password and i'll just do login and it worked and let's just save it for future and what you'll do is you would probably see this and this is my previous project what i'll do is i'll delete this because they only allow one endpoint so i'll delete it let's create a new one i'll create here and let's name it one portfolio and my time zone is indian standard time and you can just click here and select your time zone i'll just hit create and now it gives you this link we will copy this and so this says place this url in the action attribute of your form also make sure to add method post finally ensure that each input has a name attribute that's why we added name attribute to each element right and let's go back inside our form action paste this link and we will have method of post okay method and this is going to be post and save it now let's go back and test our form okay now this is my previous project now that will not work because i deleted the part now let's do uh foo and foo gmail.com and hello i would like to work with you contact me thank you okay and a smiley and once i do let's talk it will redirect me and it will say uh form was submitted successfully awesome guys and if you head back to previous page it will take you back to my previous site and if you go to this uh getform.io you will see all the details right awesome so whenever some visitor comes to your website your portfolio website and leaves a message you will get this right awesome stuff guys awesome so looks like we are done with this project the only thing we we need to do now is deploy this amazing application which we built right and let's check the mobile version out so let's do this let's bump this up and what we we do need to add react scroll guys but uh let's still check you know what let's check it after react scroll right so let's do react scroll guys i'll open up navbar and we actually need to add the dependency so i'll open up terminal and what we need to add is i think it's react smooth scroll uh so i'll uh okay not this here i'll open up a new tab and i'll just do ls yep that's my project and what i'll do is npm uh install and this is react scroll and hit enter and this should install our react scroll library so that we can work with it and what we will do is we will go back to our code okay so what we need to do here is we need to import from react scroll we will import link so i'll just do link and just save and uh let's just open up our app right here on the site so that we can test it out and open the code and scroll down and inside this a loop inside the li tag remove this what you want to do is uh you can keep it so i'll just cut it and i'll just do link and close and paste it right here and link will have some attributes so it will have two attribute now this will be linked as well it will be smooth and we need duration now duration is something you can play around with for now i'm setting it to 500 you can definitely read the documentation to learn more about react smooth scroll and i personally do have a separate video on this so do watch it if you guys want to learn more about it so for this we are done if i save it uh click here so i'll go on top and click on about and it smoothly scrolls to about click on portfolio it scrolls to portfolio click on experience experience and contact experience boom guys awesome let me reload because we see the form and if you click on home it takes you to uh home right next let's uh so if you close this and click here nothing happens right because what we need to do is we need to we still need to copy the same thing scroll down and paste it right here and i'll just paste it and save now if we try let's do about it does scroll down to about but it is not closing the the navigation right the hamburger menu so what we can do is link has on click prop right so we can do on click and what we will do is we already have have this set narrow state right so we will set the state to false again so what we will do is we'll just do this set now to let's do opposite of now probably it's going to be false but uh we can just do that let's just keep it like this and now i just saved it and let's test it out so now if i click on about it takes me to about because we were already in about but if i click on home it takes me to home if i click on portfolio it takes me to my portfolio section and if i click on experience it takes me to experience if you click on contact and it takes you to to the contact form now the only thing we need to do is this this link still doesn't work so we will go back to our home that's where our link is and let's import this so we will import from react scroll we will import link so i'll just do link and click right there now here what we will do is instead of button just change it to link right just change it to say link and what we will do is we will add the attribute of 2 and 2 is going to be port folio and of course this will be smooth and duration of let's do 500 again and if i save it right now and click on portfolio it takes you smoothly to portfolio pam guys amazing look at the animation and if you click takes you to portfolio awesome now the app is completely ready and ready to deploy now we will work on the deployment so before we do that let's go back to terminal and make sure your your code is compiled successfully there should be no error right even this will not work right if you have something like this let's say we have some other icon so if we do this let's do md outline let's do md outdoor grill and if you save it this this is not good if you do this and try to deploy netlify it the build will fail so make sure you don't have any errors so i'll remove this and save it and we can see that it compiled successfully next step is to commit our changes now when you do npx create react app git repository is automatically initiated so what we can do is go back to our terminal i'll go back to my a new tab and i'll just do git status and you will get all this stuff right so for you there will be a lot of stuff because you were not committing i'm not sure if you're committing that's great i was personally committing just to keep track of stuff so what i'll do is i'll add this remaining stuff i'll get commit and i'll just say project done and hit enter and now if i do get status it's completely fine right now let's keep this on the side and open our chrome here i'll go to github uh and directly go to my profile and what i'll do is as you can see uh let's make this full screen i'll create a new repository uh click click on this plus icon right here and click on new repository and i'll just say yt and this is going to be uh reject one portfolio and as it says like uh the name is available okay one portfolio and just hit create repository now this is a necessary step guys and another thing we are going to do continuous deployment so whenever you make changes i'll show you and if you push the changes to github it will automatically deploy to your site amazing stuff right and it's like really automatic so just copy this whole thing uh make sure you copy these three lines uh not the upper one so i'll just copy this go back to my terminal and just paste and hit enter now it will push the code to github and i'll just hit refresh right here and okay we can see the code is right here right what we'll do is what we'll do next is we'll go to netlify netlify.com and just open it and i'll just use a login right here and hopefully i'm logged in okay it looks like i already had my details so if you don't have account with netlife just sign up it should be pretty straightforward and if you already have account just log in right what i'll do next is i'll do add new site right here import an existing project click on github you may need to go through the github login flow for me i'm currently logged in so i'll just oh it automatically picked up right and i'll just try to search for yt and let's just do react and hit enter now we have a couple of i have other repositories but i'll make sure i click the one with the the repository which we just created and click on this one and for everything else just keep a default and just say deploy site now this should take some time so until then what we can do is so this is going to build the uh build your project like do npm run build and at their back end and then deployed uh deployed for you nothing else right you are done now what we can do is let's make some small changes right uh you know what we should we wait for this to deploy it should take like couple of minutes what we can do is uh let's say instead of i'm a full stack developer you want to do a front-end developer right or let's just do i am a backend developer okay but our our website currently is going to reflect uh full stack developer right uh this is our local so don't worry about that but if i go to netlify it's still building let's just wait for a minute or two okay i'll just hit refresh and it's still processing okay and it says it's published so i'll bump this up and what i'll do is and here is my link and i'll just like come on click and it will open right here and look at this guys this is live you can share this with your friends family or give it to your potential employer and get a job or something right amazing stuff guys and this will work completely fine like magic on your mobile devices as well okay now as you see it says i am a full stack developer right what we'll do next is i'll keep uh netlify on the side and uh make sure you look here okay what i'll do is i'll open up my let's bring the terminal and if you do git status right now it will have changes because we changed it to back in developer right so let's do git add and get commit and it's going to be minor refactor and commit get status and get push now look at the magic guys it pushes my it pushes my code to github netlife picks up my push okay now if i refresh this page you will see that it's building right it's building guys amazing this is continuous deployment okay let's wait for us for a minute or two and this should be deployed soon okay our our our local looks amazing now if you end up using my portfolio or cloning it do let me know in the comment section below have you modified it or share or you can email me the link as well you can find find the email from the about page uh from youtube and do let me know what you do right i would love to see it okay and now as you see it's already published i go to the live site and now if i refresh we will see backend developer boom guys that's the whole portfolio website right using react and tailwind let me know in the comment section below what do you think about this build if you guys have any suggestion for me like uh anything right you if you get stuck with something do let me know in the comment section and i'll try to help you as best as i can and i guess we are done for this one i'll see you guys next time thank you

Channel: Programming With Yash

Views: 122,995

Keywords: programming with yash, react portfolio website tutorial, react js personal portfolio website tutorial, react portfolio website, react portfolio website from scratch, react portfolio page, react portfolio website build and deploy, responsive react js portfolio website, responsive react js portfolio websitefrom scratch, react tailwind portfolio, react tailwind portfolio website, react tailwind css portfolio, react js tailwind portfolio, react portfolio website tailwind

Id: LpZrAjU6Hhk

Length: 119min 26sec (7166 seconds)

Published: Tue Jun 07 2022