🔥 Build a REACT JS Portfolio Website Using Tailwind CSS - Get Hired!

hey what's up guys clint here back with another video and in today's video i'm gonna show you how i built this react js portfolio web application using tailwind css it's gonna be great you guys gonna be awesome check this out i've had a lot of people asking me how to build a portfolio website or just giving them some examples and i can show you this you don't have to be a great designer to put together a portfolio they'll get you a job in tech so feel free to use this help yourself get a job if you want to add stuff to stuff to it that's awesome too throw down the comments what you add i'd love to see it so check this out this wouldn't be building we're going to be using like i said react.js and tailwind css we'll also be using a couple dependencies react icons and react smooth scroll so here is our kind of home section here got a custom logo i'm going to show you how to do all this we have a nice little uh some icons on the left as we hover over it kind of slide out from the side looking nice very nice then we have a little button transition here using tailwind css and then we also using like i said react smooth scroll so this is our home section when i click the about we're going to get a nice scroll down to our about section using our grid system then we click on experience it's going to bring us down here we have some nice custom icons i designed in canva and as you hover over these get a nice little scale effect boom and i'm going to throw all these into github so you have access to all the files here then we click on uh work here boom nice little transition this is down to our portfolio section of our website so as we hover we get a nice little tailwind transition the react.js application a little bit information about the project and then uh two buttons here a link to demo our application then also a button to view the code that we're gonna host on github here so this is what we're doing here and then down on the contact for boom now this contact form but very very powerful stuff awesome stuff you guys we're using getform.io this form right here is 100 functional we can uh send this submission a name email message whatever you like and then we can even set up some automation so the sender gets some information back get the automatic email back to them very very powerful stuff this is a great portfolio website like i said feel free to use it so you can get a job in tech if you want to add some stuff that's cool too i'd love to see it so this is also 100 fully responsive let's take it down to a mobile size here boom there we go everything is looking nice there you go responsive navbar here we can scroll down everything is just looking beautiful so i know my image is down there kind of covering it so apologies for that but i'm going to show you how to build this from scratch we're going to start off in a vs code just a blank editor here and i'm going to show you how to do everything from the beginning so like i said feel free to use this in your own as your own portfolio and let me know if it helps you out so without further ado let's get started alright so here we are in vs code i have a blank code editor open what i'm going to do is just press the control back tick button to open up our little terminal down here and then i'm going to change the directory to my desktop here and then once i'm in there let's go ahead and create a react app you can use npm or yarn i'm going to be using yarn for this tutorial so i'm going to write yarn create and then react dash app and then let's call this portfolio react app now go ahead and press enter this will only take a moment you guys all right it says happy hacking that means we are ready to go what i'm going to do is just drag over the the folder we just created this is our create react application here i did mine in yarn so let's just have a look i'm going to press the control back tick button get our little terminal here and i'm just going to type yarn start type npm start if you uh created it with npm so this will start up our development server here yes there we go it should open it up on port 3000 maybe 3001 for me since i already have the original build open here so there we go just like that now let's go into our source folder here we're just going to be working out of our source folder so don't worry about the public or anything else so what i'm going to do first is kind of just clean up a few a few files that we're not going to be using here so i'm going to click this setup test the report web vitals the logo.svg the app.test and also the app.css what i'm going to do is just delete all of those just to get those out the way there we go we're going to get some errors that's okay let's go into our index.js so we can address these errors here so the report web vitals let's get rid of that and that should be enough for our index.js now our app.css we can remove all this boilerplate code because we're not going to be using that we're actually going to be using tailwind and then up here we can just remove all of that there so everything should be working properly now just a blank page here now first things what we want to do is install um we want to install tailwind so we left this index.css file open so let's leave that now let's go to tailwind i'm going to show you how to install tailwind css let's go to tailwindcss.com go ahead and click the get started tab here then under framework guides we're going to be using the create react app framework here so we've already installed our our react application here so what we need to do just go down here and just copy this npm install i'm using yarn so i'm going to copy this if it doesn't work if you copy this 100 sometimes you leave out that development dependency there it works a little bit better so we can go ahead and close our server and i'm just going to add yarn add and then tailwind there we go and then after that we're going to want to type in npx tailwind init close that down there so npx tailwind css init p and this is going to create our tailwind.config file here there it is right here boom perfect so almost done back over here and tell us tailwind website it wants us to copy this end right here so there we go i'm just going to copy that you should already have this little content array in here so i'm just going to paste it inside there and that should be it there so oh we forgot you got to copy these three files and we're going to put them in our index.css file there we go and we can actually just delete all that because we're not going to need any of that there so now tailwind should be configured properly i'm going to drag this back down there we go so let's check back to our application here app.js and i'm going to get a h1 here hello now this should be just normal text size let's have a look let's refresh oh forgot to start up my server yarn start or npm start for using there we go yes so using tailwind it kind of does a lot of default styles so our h1 is not going to be some huge bold text here should be just small text right there so and then we can add a class name if we want to make it large we can do text excel sorry xl or even uh text 2xl you know it's a little bit bigger and we can make it bold with font bold boom perfect just like that so this is tailwind css and notice we can hover over this make sure you get this application if you're this extension here if you're using tailwind css make sure boom this right here tailwind css intellisense highly highly recommend it it allows us to use uh some snippets for uh tailwind so very very powerful and very very helpful save you a lot of time if you're just learning tailwind so in here we have our react react application here we can close all these other files for now now i'm going to go ahead and set up the structure of our application here we have an assets folder and also a components folder so this is going to be a real small application so it's not going to be very difficult to manage here so source you have our assets and also components folder here so what i'm going to do now i already have all my icons that we're using here and all my images i'm just going to pull those over into my assets folder here boom there we go now feel free to add your own if you want i'm going to put a link to the github down in the description below so feel free to just clone this or go in and download all these files and you can use all of those so boom there we have all of our assets in here now so yep there they are now let's go into our component uh our component folder here and what we're gonna do is first let's create our let's create our navbar component so what i'm going to do sorry not a folder but we're going to create a file navbar.jsx and inside our navbar folder or navbar file here i'm going to type rafce to generate a functional component this is direct es7 react redux snippets here so highly recommend you get that as well where is it at just so you can see what it looks like this is it right here highly highly recommend you get this will save you a bunch of time while you're coding so here we have our navbar and what we're going to want to do is um let's go ahead and import some react icons while we're out of here so let's create another little terminal here so i'm going to use yarn add react dash icons now we're going to have access to all of our icons here there we go and i'm going to close that and let's check our package.json just to make sure yep there it's at right there so in our navbar let's go ahead and start throwing this thing together so in a class name and i want this to be fixed i don't want it to to move whenever we scroll i always wanted to be fixed at the top so i'm going to give it a fixed uh class name there and then i'm going to say the width is full and that's saying the width is 100 then we're going to say height of 80 pixels and instead of saying 1 2 3 4 it's going to count by rim you can actually just throw up some some brackets here and you can define your own dimensions so inside these brackets i'm just going to say 80 pixels and this works for percentages ram pixels anything you'd like to use so there we have that now we want to have a flex and let's do a justify between that's going to be the space between there and then we'll do items center here and let's do padding x which is padding on the the x-axis is going to be 2-4 which is one rim and then for our background so i'm actually going to use a custom background color and see that this is how we add colors and tailwind but if you want to add your own custom color we're going to do background and then open up our curly brackets here or sorry not a curly brackets just our brackets here and let's add in our hex code and it is going to be 0a192f get a nice little blue here and let's go ahead and import this so we can see what we're doing so this is going to be our navbar we can auto import that there we go so this is our background right here looking nice i'm going to go and open this up a bit so we can see a little better so after we have that let's go in our text here and for our text let's just do a color here let's do gray gray 300 for now now let's add in some some information here so we're going to create another div and inside this div is going to be our logo so let's go and import our logo here so this is how we import images in react.js here so in our assets we're looking for logo.png is my initials here and there we go if you want to create your own that's fine too i use canva to design this logo very very easy so in here i'm going to call this logo from sa assets and then logo.png there we go and while we're at it let's go and import our react icons as well so let's import let's throw these in some curly brackets we're going to use the fa bars then also the fa times we had to import these from react icons slash fa if you're going to react to icons website you see all the icons there if you're going to be importing them make sure on the instead of just saying react icons you add this little pretext for the the icon you're using otherwise you will get an error so hope you can save some time there now in here this is going to be where our logo is we're going to have an image instead of these quotes here we're going to have some curly brackets let's say logo and just to give an alt that we react will not throw the air at us boom there we go now that looks uh horrible because it's huge so we can add some styling i'm just going to add some inline styling just like this because it's super easy and i'm going to say width of i have to put that in quote 50 pixels this is how we do inline styling and react js there so boom there we go looking nice and our other div here although div is going to be an unordered list and then have some allies in here this would be a list item and let's have a home here and there we go and i'm going to go and copy this down a few times because we're going to have a an about section and then we're going to have see an experience and then or we could even say skills experience let's do to make this skills there we go and then we'll have uh see work and let's copy this down one more time for a contact here there we go perfect perfect now outside of this div here we want to have we'll see let's drop this down here i'm going to make a couple notes here so this is menu and then just underneath here we'll have a um we'll say hamburger and add our div here boom and then we'll also have mobile menu and then also in our navbar we're actually going to set up our uh social icons as well so we'll have a div down there for that one now this hamburger menu here let's go ahead and add in our icon here react icon so the way we use that we're gonna open up our um our tag here and we say fa bars boom there it is go ahead and close that so we should have it right there and then on this mobile menu we want to have instead of a div let's just use an unordered list for this here boom there we go and for our unordered list i'm actually just going to copy this in for now i'm going to save that so prettier takes care of that nice little extension boom so what we want to do actually is let's hide this let's give it the class name of hidden then also class name of hidden on the bars as well boom there we go so let's go ahead and style this menu here so for this menu this ul right here what we want to do is give it a class name we want this to display as flex boom there we go now in these list items instead of styling each list item what we can do in a tailwind is actually apply compile styling to all elements here so i'm going to close this and let's go into our index.css here and what i'm going to say in this index file here so also i'm going to bring in i'm going to bring in uh some my sorry my font what i'm going to be using here i'm going to be using the railway font it's a google font here so i'm just going to copy that in boom there we go i assume you kind of know how to do that if not it's pretty easy here just go to google and you can just add in some fonts so what we need to do here is to reuse or apply styling to all in tailwind we can say that symbol then layer base there we go now let's open up some curly brackets here and what we can do here is actually say um apply to so what i'm going to do is is apply this font to the body here so i'm going to say body here then open up our tag and we can say apply and then what we want to say is the the styling here so i can say font then um railways on it here but if we open up our curly brackets we now have access to it and we can say railway just like so and then also that's it for body now for our list items just the same way we're going to open that up and say apply and then what i want to say is p sorry px4 padding on the x-axis of one rim and then also we want to do you have to do apply even for multiple styling here cursor and we're going to use cursor pointer so that should be looking good there and index everything is displaying properly let's pull this open widescreen so what it happened is actually our div here let's give it a class name of hidden boom there we go now everything should be looking as it should on desktop devices that is perfect that's what we want now let's hide this thing because we won't want our our main menu here to show so what i'm going to say give this a class name of i actually want to say hidden and the way tailwind css works is a minimum width first so it's a it's a mobile first uh design approach here so what we can say here is um is we want this display as as flex here boom there we go but we only it's giving us an error but you cannot have two positioning or two display properties on the same line unless you're using a media query so what i want to say is anything above anything above medium there which i believe is 768 pixels on the breakpoint anything above medium it should display here so i can actually just copy this down here you can use it on this on order list i'll just say medium flex hidden there we go so and we can actually just kind of we can probably just get rid of this dude i don't even think we need that div there or we can just use that as so so let's open this thing up it's we're under 768 pixels so nothing is displaying then once we break that boom there we go now moving on to our our bars here what we want to have there is to display um basically we want it to display as um on we want this display on all things so we just keep this hidden and what we can just say is anything over medium it'll hide so at our in the same break point for our flex so as soon as this hamburger goes away we should see our menu that's what we want right there now for our for our mobile menu here what we actually want to do here is we're going to add some styling and what we're going to do we want to position this this mobile menu here we actually don't want it to be hidden for now we wanted to position it as absolute so we're going to see what it's going to look like as we style here so if it's absolute we're going to define this positioning here so top 0 left 0 we want the width to be full and the height to be 100 viewport height so it's h green for 100 viewport heights we're starting to see some stuff over here now let's give this a a background what i'm going to use is actually this one up here i'm just going to copy that down there we go boom that's what we want now we also want to display this as flex or the flex column justify center and then also we'll say items center so these kind of sit right in the middle of the page there so i'm going to press ctrl b to kind of collapse that down so we have some more room so and for this one i am going to add some styling in here i don't want to go in and do the um kind of overload our index.css file just yet so what i want to do is i'm going to press this alt button so i can type in multiple cursors here at once neat little trick there just hold down your alt tab there show your alt button so now we can type on all lines uh simultaneously here so i'm going to give this a class name of p y 6 and that is i think 1.5 rim on the y axis top and bottom here and then let's also make this text pretty big here let's say 4x 4xl boom that's what we want right there so notice our hamburger button is not showing that's okay we can add a z-index to that switch type z10 that's going to change the z index to 10 and now we can see that there so that's what we want there now we don't want this to show all the time of course we want to be able to click our our menu to toggle that so what i'm going to say right now i'm going to add it hidden just so we can hide that for now now let's add some state here so we can actually toggle our our nav bar so i already added state here so what you can do here yours is probably going to look like this right here so when you scroll up to the top we're going to import the use state here boom you state there we go and then just under the snap bars we're going to keep our state so it's going to say const we're going to open up our brackets going to take two values you can call it whatever you want i'm going to say nav and common convention is to say set nav or set whatever value the first one was there we're going to say equal to use state and i'm going to give this a default value as false for now then we also need to use um i have a click function here so i'm going to define our arrow function this is what i'm going to make it there and i'm going to call it handle click another common convention here like i said arrow function here and we don't have to use any curly brackets because i'm just going to point to one thing here and it's going to be set the value of nav to the opposite of its current value right there so if it's true it's going to set it to false if it's false it's going to set it to true so that is what we want right there now let's go down to our bars here and what we want to give this we want to give this an on click we want to run our function handle click there we go perfect perfect now for our mobile menu down here what we're going to do is actually i'm going to copy this let's remove that hidden for now and i'm just going to copy this from absolute all the way down to the item center i'm going to cut the whole thing out now let's replace replace these quotes with some curly brackets and we're going to use a ternary operator so what we want to check check the value of nav right so we're going to say the opposite of if the opposite of nav is false or is true right we want to set this style to hidden a little colon here otherwise i'm just i'm going to paste in the rest of my styling here so let's go ahead and click this and see if it works it should be working correctly boom there we go that is what we want right there guys everything is functional however we want the the a little x to show up there instead of our bars so let's go into our hamburger here we can actually just uh cut that out and we're gonna do the same thing in terinary operator which works great for react if it's only uh true or false only works for true false here so what we want to say here is um basically same thing opposite of now if it is true we want to show the bars here so fa bars boom there we go else we want to show fa times and we already imported them at the top there boom there we go so as we click that everything looks as it should let's open this thing up that's what we want right there perfect all right you guys so that is our navbar everything's looking nice that looks clean you guys follow along here i hope this helps you in your journey to get a job in tech here so let's have a look let's do our uh home section first or next here so i'm going to press ctrl b to open this back up and i'm just going to copy this color here just so i have it saved here because we're about to use it now for our components i'm going to create another component and i'm just going to call it home.jsx you can call it hero.jsx main doesn't matter in here let's generate another functional component with r-a-f-c-e boom there we go now for our home we're gonna just add in here for our home what we're gonna use we're gonna use um let's go ahead and bring in an icon that we're gonna be using here boom there we go so let's import and the icon we're gonna be using is hi arrow narrow right from and then like i said earlier we're importing it from react icons instead of slash fa this one's hi so there we go perfect now we have access to that there and you know what i just forgot you guys we forgot to add um our social icons here i'm gonna borrow this open we forgot to add our social icons there and i keep that in my navbar component here so let's go ahead and go back to our navbar real quick so we can add those in at the bottom here so we even made a little section for it there we go nav bar hidden boom so i'm going to take away that hidden for now and inside here this is going to be kind of our um what we'll say this will say uh say flex and with this to be positioned as fixed flex column and then top we're gonna open up our brackets here so we can use 35 percent close that out there we go and we want this display left zero here so let's actually throw in some icons and we're going to make this an unordered list here on our list an li boom there we go and inside of our li here i'm going to use my um let's use an a tag here boom and then inside of our a-tag finally i'm going to say linked in linkedin there we go and then i'm going to use my icon here i have not imported yet let's go ahead and import our icons so we have access to all of those so along with this fa we're also using being fa github and we're going to be using fa linked in there we go and then the other two we're going to be using is say import open up our curly brackets hi outline mail from react icons slash hi and then we're also going to do one more and it's going to be whoops it is going to be bs fill person lines fill and from we'll say react icons and this one you know it's going to be yes there we go looks like we have a little issue down here okay i just didn't finish that so the first one using is uh facebook so say fa facebook there we go perfect all right so that's how i was looking right now we don't have any you can kind of see it back there so we don't be styling yet let's go ahead and go to our home here and in this let's just add a background so we can see everything so go ahead and paste what you had in that bg dash open the curly bracket 0a 192f there we go now i'm going to add in this as well here import our home and i'm just doing this so we can have a color on our background so we can actually see what we're doing there it looks like it didn't import it if you press ctrl spacebar usually i'll pop that up boom so we can auto import it just like that save you a little bit of time there we go so for our home let's give this we're going to need to define some width full h screen that should be good enough there perfect okay so back to our navbar we have our our uh we have our logo in here our our facebook there what we're going to do let's make this a little bit bigger so what we can do actually can use we have access to properties and react icons and we can just use size it's just one of their properties and i'm going to make it 30 there we go that's a good size right there now for this list item here what i want to add is what i want to list for this for this list item let's give this a class name and we're going to do this for one and then we're going to copy them all down just to save some time here so width and then i'm going to open this up this bracket here and i'm going to define 160 pixels as the width and the same for the height i'm going to make it 60 pixels for the height now let's do flex uh justify between so it kind of spreads them out there boom and that should kind of push them apart and we actually have to define some some more sizing here let's do items whoops items center here boom there we go um oh you know what we should be adding this to our uh we need to add this to our a tag as well so let's just in here gonna give us class name on our a tag we'll do flex uh flex see justify justify between and then items center with full which is a hundred percent and let's do text gray 300 for a nice little off-white there that is what we want i'm using pesticide here so we can kind of see boom that's what we want there looking pretty good so far um there we go now it should spread apart there boom that's what we want okay perfect so i'm gonna refresh those lines go away that's looking good now let's hide this thing off the screen here so i'm gonna say margin left and i'm gonna move this back over 100 pixels boom there we go now on hover i want to say margin left to we'll say negative 10 pixels and this should kind of slide everything out boom there we go and now let's give a nice little duration of 300 which is 300 milliseconds so boom there we go slide out perfect just like that let's give this a background color so we'll say bg blue 500 or we'll try 600 here we'll see how that looks let's open this up some make sure we get it pretty similar so i said facebook i think we do linkedin let's add this this one has a linkedin here and there it is okay perfect that's what we want right there you guys perfect that's what we want looking nice looking nice now all our styling is done for this now now we get the easy part here but press control p to close that down our list item here what we can do is just copy that down and we're going to have three more there so let's just copy that down and this next one is going to be what's the order we're doing we're doing linkedin then github email and resume so now it's all linked in the next one like i said github boom and then let's just change this to fa github and then we're going to do the email and what was our email hi outline mail there we go and then last one bs let's copy that down there we go and we can just say resume like so let's have a look perfect so that's what we're right there let's change up these colors though so for the uh for the github where's our github boom in there let's just say i'm going to open up the curly brackets here and delete that instead and like a nice little black gray color there now for the next one next one here i'm going to add in a little custom color you can use whatever you like what i'm using here is going to be 6 f c 2 b 0 that should look good there boom there we go now for our last one here it's going to be kind of like an off gray again here and i'm going to define it myself and it is going to be 5 6 5 f 6 9. there we go now of course we only want these to only want these all here to display over on large here because they kind of get in the way so let's go to our container here for our social icons and what we'll say is we want them to be hidden and then anything over the large break point we want them to displace flex so away they go let's open this thing up i believe 10 24 is the break point for large and boom there they are everything is looking nice so we have those wrapped inside of our navbar component here so that's where those are living done with the nav bar so for our home here we have our background that we have already set so that's all we need to do there and what i'm going to do is i'm going to add a name property in this here so name then i'm just going to call this home and what this is we're going to be using this for react smooth scroll so i'll show you here in a little bit but just add a name there and we'll fix the rest later now the next thing i'm going to do is kind of add a cointainer a container here i just like to make little notes whenever i'm coding here just to kind of keep some kind of keep it organized a little bit so this is going to be our container let's do a max so class name of a max width now we can define this ourself i'm going to say just a thousand pixels here and then mx auto just saying margin auto and then padding here is going to be 8 flex flex column and then justify justify center boom there we go then height full so we can use our flex now in here is going to be all of our contents so first what we're doing here is a p tag and this is gonna say hi my my name is boom there we go then after that we're gonna have an h1 i'm gonna say my name click clint briley there we go and then after the h1 tag we're gonna have an h2 tag it's gonna say i'm a full stack developer there we go and then under that there i'm just gonna copy in some stuff here um there you go smash that like button you guys if you're liking the video subscribe to the channel trying to build this thing up boom there we go so after we can see everything is displaying right there as it should now we just need to add some styling in it to make it look like that let's go ahead and add our button down here too so inside this container div i'm going to add another diff with a button boom and we'll say view work and then let's add in our react icon here which is the arrow so it is h i arrow boom we already imported that and there we go so we should be able to see it there boom there it goes so let's go ahead and add some more styling to this here so for this first one for this first p tag my name hi my name is what we want to say is let's give this a color text pink we're going to be using 600 boom there it is same color as my logo here at the top i am not a designer i just know how to make things kind of simplistic and clean and i think that is the best choice i can never go wrong doing it that way so for this h1 tag let's open this up let's give this a text for xl and then anything above a small let's bump this up to a text 7 xl there we go we'll do font bold and then text let's do this i'm going to give this a style here it's going to be c c d 6 f 6. close that down there we go looking good and this should shoot up in size boom there it goes right after that small break point so that is what we want right there so for this next h2 class name and let's do the same thing text for xl and then anything above the 640 we'll do 7 xl font bold there we go now for this text is going to be slightly different color a little bit darker gray let's do eight eight nine two b zero that is looking good right there perfect perfect now make sure that it's looking pretty good okay now for this text here our little text let's do text and then we're going to use that same color there that we just used 889 2b0 there we go perfect and we'll do padding on the top and bottom of four which is one rim let's do a max width because i don't like how far that text takes up right now looks okay on mobile devices but as we get a little wider i don't want this to go across the full width of the screen so i'm just going to say a max width of 700 pixels boom that's good there i think i think i like that then we close down to mobile it's still going to use the full width of the screen there so that's tailwind minimum with um mobile first approach right there really love that stuff you guys now for here for our button let's go ahead and give a class some class to our button here some styling and what we want to say class name when the text to be a white here and then border 2 this will give us a little thick border around it there there we go now let's give a some padding we're gonna do a px6 make a little wide then py we'll do three and margin top and bottom two to bump it up a little bit there so that is looking good now we also want to say flex and then items center to kind of level everything out there boom there we go and let's do some hover here so we want this to hover so we'll say on hover we're going to use that pink there so we'll say bg pink 600 there we go let's have a look there we go and let's have the border change as well so we'll say hover whoop border pink 600 there we go sorry about that pop-up there you guys boom there we go now let's give a little margin to our arrow here so let's just give a class name to our icon and we'll say margin left uh two which is point five rim i think it looks good maybe four ah let's meet in the middle there so there we go now what we want to say is for this here on hover what we're going to want to do on that button whenever we hover let's actually put a span let's go i'm gonna take this away here this hover and i'm gonna put in i'm gonna drop that down so we have a little room here so you can see let's do a span and we're just gonna put this this here is what we want it's going to cut that and just put it inside a bar span there so for our span let's give this a class name of let's see hover rotate 90. there we go and then duration we'll do 300. so let's have a look boom there we go now the arrow moves down but we want this to happen only when we hover over the icon we want this to happen when we scroll over the button so for tailwind we have to put this in a group so the way we do that here i'm going to save this so it kind of makes it pretty there so our our group here our outer div is the button so in here i'm going to throw it right here i'm going to define as group now in our span what i can just say is group colon hover rotate now when we hover over the button uh-oh still not happening there so let's have a look so group sorry not a colon here is a dash my apologies so now when we hover boom the arrow rotates downward that's what we want right there perfect so let's have a look that's our full thing right there let's open it up to widescreen and that is our component right there so as you can oh so right as it hides there you can play with the the dimensions here you guys i just want to show you how you can build a react.js application here a portfolio they can get you a job here in tech so that is my goal so after the home component the next one we're going to be doing let's do the about component here so i'm going to create a new file called well i'm going to create a new file i'm going to call it about dot jsx here so raf ce that is going to generate our our functional component and then now what we're looking for here in the about section we're not going to be using any any icons or anything like that so what we can do next we can actually delete that this is going to be let's give the name so we use this for react scroll name i'm going to name that about well sorry not a class name just a normal name here there we go i didn't want it to pick that up now let's give it a class name and we're going to do width wool and h screen which is a hundred viewpoint heights there and then for our background let's just copy this down again never remember that color there so let's just go ahead and paste that and then for our text let's do gray 300 that should be good now in here this is going to be let's do a div and for this let's do a class name a flex flex column and then justify center there we go and we do item center width full h full now in here now we can kind of do star div this is going to be container div here so inside our container we're going to have another div with a p tag and with our p tag want to say about there we go and what we're doing here after this div here we're going to add a div this is going to be empty and what i'm going to hear i'm going to hide this let's bring this in let's import about boom auto import at the top there we go boom so right now this is going to be on a grid right now it's not but we want to set this on a grid system here so i'm just going to leave this pesticide going so we can see our lines now for our about this is going to be our parent div so let's do this we want to give this class name a um we'll do max width and let's do the 1000 so 1000 pixels again and we'll say with 100 x 4 dx 4 there we go and then grid and grid calls to two and then we'll say a gap of eight there we go so that's what we want right there now we want to align this about so right now we're on mobile's first here but we want to align that to the right there so for this class name here what we want to say is anything above small we want to do the text right get here you can see so otherwise it's going to stay there on the left so anything above small it's going to jump over to the right that's what we want right there perfect and let's do padding bottom of 8 which is two rim then padding to the left uh one rim there and let's blow this thing up a little bit let's do text for xl there we go font bold inline let's do border bottom four and then for our border color let's do let's do [Music] pink 600 there we go perfect perfect perfect so that is what we want you guys well you know what let's just take away this uh there we go that looks good right there now underneath this div this is going to be just an empty dips here so after this right here this grid template column what we're going to do is essentially this same thing here so i'm just going to copy that or let's just we'll type it again here so for this class name like i said max with we're basically just repeating this here we open up our curly brackets so just repeating that width full grid grid calls 2 and then gap to 2 ram there all right now inside here we're going to have a div with a p tag and it's going to say hi i'm clint nice to meet you please take a look around there we go and then after this div here let's save this we can kind of format this thing so that's one div and then on the other side looks like we're kind of stuck in here so the way we can fix that add one of these up there we'll delete one here that's what we want so now our div on the other side i'm gonna just copy some text in here tag and it should come in right over here so perfect now of course we don't want this display so let's add let's add some styling here so on this p tag on mine i'm going to give it text for xl font bold that's what we're going to want there and let's align this so anything above small will do text damn it sorry about that there we go there we go so that's what we want right there that is looking great you guys i'm gonna just remove these lines there from peticide so that's perfect that is exactly what we want for our about component um we still need to do a little styling because when we drop this thing down we only want it to display one column over here and we need some padding here so let's add this on this div we'll do pang left you know what on this whole thing px4 that'll give us a little bit of room boom there we go and we actually want this to just drop down uh one columns here so for grid what we can say anything above small there we go so tailwind automatically um puts it at when you define grid it automatically puts it to one here so we can just define if we wanted anything over one we can define that here with our media query so that is what we want right there let's have a look perfect there we go and so now what we want to do that's it for our about section everything displays nicely boom there we go and we can change up some sizing here if we'd like but i'm going to go on to the next component and after that after that component is what we're doing is let's see here we are doing the skills i think we're going to say so skills.jsx let's go ahead and generate our functional component there with rafce now for our skills we're going to bring in all our images here boom there we go so for the images i'm only going to bring in i have quite a few images in here so i initially was going to have um going back here initially see i have eight here and i did have ten i think it is a wise decision to maybe add a little bit kind of declutter a little bit you don't want to give your potential employer a list of skills um like too long of a list you kind of in my opinion it's why it's going to hone down on just a narrow few and uh even eight i think is maybe too many i would probably realistically just drop it down to six just so you know and you want to make sure you know these you guys so don't just copy this because it's what i'm putting in there make sure you know these if not it's going to be a tough time in your interview and it probably it's not going to go very well so for our skills here i'm going to go ahead and import a few things i'm going to be using here um i'm going to go ahead and actually just copy that over just to save some time here so what i'm doing we're just importing images um just like we did with the logo i'm just going to call in my name here boom and then this is the file path so and again these are all in my github i put a link down in the description below so feel free to download all of those and and use all those images here i created all of them and in canva really really great tool so for this let's give this a name of skills there we go perfect perfect now inside this we're going to have another div it's going to be our container here so i'm just going to get make this a little note container and whoop and inside of our container save that inside of our container i'm gonna have another div and this is a p tag it's gonna be experience there we go and then underneath the experience we're gonna have another p tag and it is gonna say these are the technologies i've worked with or whatever you think sounds good i think that works for now and then outside of this div we're gonna have another div here and inside this div is going to be an image tag and for this first one i'm going to use html say html icon go and then just underneath this that's what we want right there so let's import this kind of see how it's looking here sorry my knees are starting to give me a little problems here so let's do skills there we go and what we want to do next yeah okay so got our skills here it's not defined let's import it at the top here so i'm just press ctrl spacebar gives me the option to auto import it there it is so let's scroll down boom that's what we want right there it's uh sized a bit funny so we're going to take care of that um let's go ahead and just grab this here because we are going to be using that as our background on our skills here let's give that a class name whoops there you go perfect perfect now i'm going to drop that down and let's go ahead and i'm going to change the sizing of this icon that's way way too big and definitely don't need it that big so i'm just going to give this a class name and say width of 20 which i believe is five rams about 80 pixels there and then we'll also say um mx auto to kind of throw it in the middle that's what we want right there okay so the way we're going to do this now we can copy all of these down when we go back but how we want to do this for our container let's do a max excuse me max width of 1000 pixels the way i like to design things you guys is in i like to fill out all of my html first and then i come back and style it so that's what i do with custom styling when now when i'm using tailwind it's a little bit more difficult for me to do that i'm still kind of finding my groove so i'm loving tailwind though it's really really powerful you do a lot of really cool things in it and ultimately ultimately i think i think you save quite a bit of time when you're coding so i'm really loving it so far i'm gonna continue using it for now and i really think it kind of helped my skills as a developer kind of really helped me fine-tune some things here so that is our container here now for this top part here boom i'm going to do a class on this dude actually i don't think we even need anything on here but for this p tag we for sure will let's give a text of 4 xl there we go now let's use the uh text gray 300 there and we'll give one ram padding on the top and bottom boom that's what we want now um for this let's do also i'm gonna i try and group this together too so it makes the most sense in line i'll say border or border bottom four and then we'll say border [Music] pink 600 okay now i'm actually going to take away that gradient let's see if let's remove that so for this text gray what i'm going to do this text i'm going to delete this padding and for this text gray instead of repeating it let's go ahead and copy it and i'm just going to cut it out and then i'm going to put it here at the top so it applies to all the text here in this in this um container here in this element there we go so that way we don't have to style each individual little element down here because we're going to be using a lot of these elements so it's going to save some time and make your make your project look a little bit cleaner here so for this text here we already have this text good color um let's add some padding here so py4 so one rim padding on this here that's what we want now for this div down here now what we're going to be using let's give this tag here we want to give this a class name and this is going to be the container for all of our icons here so the container for all of our icons what we can say is width full and uh grid now grid columns two and then anything above small we're gonna use the grid calls three or let's do four there we go gap four text center and we'll do py8 padding top and bottom eight there we go so right now it is set to two and then it goes up a little bit from there so play around with it you guys if you're gonna use all eight then i'd keep it this way if you're gonna use six i would do something like just two then three and maybe six something like that or just two and six would be just fine so let's keep going here on this next div i'm gonna give this and this div here is actually the little container itself for for our little icon including our icon and our text there so let's give this a class name let's give it a little shadow a medium and then shadow for our color here let's use let's use let's see zero four zero c one six we can go ahead and close it off then hover let's scale dash one we'll say one ten sorry about that you guys i need to turn that off duration uh we'll do 500. so let's see how this looks there have a little that's looking nice perfect so and all this is looking good let's give this here my four that is perfect right there let's open this up now what we can do is just copy this down so now that everything is looking good i'm going to take this div here i'm gonna copy down this two three four five six seven and eight boom perfect so we have eight now if we scroll this down deck back down to two that's what we want right there now let's change up these icons here so we'll do for this next one i'm going to see what we called it css so this is what we called it up here so this next one will have css and this is going to be css and then let's do javascript java javascript i want everything to be capitalized here boom then the next one we can do [Music] react image is what we called it react perfect and then let's do these other ones github i'm saying github the next one is node we'll say node node.js and one of the last two mongodb and aws so we'll say db this one's called and then aws now like i said this might be too many you know if you and i'm not going to change this alt tag feel free to go in there and change the alt tags but a good idea i'm going to leave it as is for now so this is kind of in my opinion a lot of um of experience or technologies to list on a portfolio i would probably cut this down by two um may take away like for me personally i would probably take away github and aws i'm not fluent in aws i don't feel super comfortable in it i did get certified just a um cloud practitioner so good information there highly recommend course it's really really cool cool good information so that is looking good right there now um need to add in some more styling because that's not quite how we want that so we want that display kind of in the middle of our page here because if we use our pesticide here good good good that is not what we want right there so this should take up the full height of the screen so let's go in here kind of towards the top so we didn't finish adding in all our skills our styling up here so what i'm going to say here is width full and then i'll say h screen that believe that might be it there that's looking good i'm gonna get rid of those lines there now let's open this up perfect that's what we want right there you guys looking nice looking nice so for our next one let's do our exp set experience i want to change that to skills but then we're going to do our work so i'm just going to change this from experience to skills i think that looks a little bit cleaner there we go perfect perfect so now let's go in and before we forget i'm just going to copy that down and let's create another component and i'm going to call this work dot jsx now for our work this is going to be a fun one really really cool animation in here you guys so rafce to generate our functional component now let's go ahead and import this this is going to be our work auto import that one you guys now make sure you smash that like button like the video you guys hook me up with a like and uh consider subscribing i'm going to be putting out some more react content just like this here so let's bump that down let's go ahead and enter in that background here there we go now we can kind of see what we're doing it's down here you can't really see it yet but let's give this one a name for our react smooth scroll i'm just going to call it work there we go now in here let's do width full now what i want this to be so this is going to take up a lot of room here you guys so but only on mobile devices so what i want to say is um anything above uh medium here the medium break point we want it to display h screen so and then otherwise it's going to take up however much space the the elements require here so and then let's do our text color here just apply to everything in this box we'll do text gray 300 there we go now the next one is going to be our container here so let's do that our container then in here we're going to have a div with a p tag here and our p tag is going to say a work then just under that it's going to say check out some of my recent work there we go now inside below that dip but still inside of our container this is going to be the can what we're going to style right now is the container for all of our work here so bring this up what we're styling is a container for all of our projects so for that here let's go ahead and do a div here and then we're going to have a div for uh the specific card item itself grid item so in the card item we're gonna have a div here and then we're gonna have another div inside here um and this is gonna have a span and then another div and inside here whoa my span i'm going to close this up span there we go and we have this div and in here we'll have an a tag i'm going to send that to home for now and then here a button and we copy this down because we're going to have two buttons there we go and that should be good right there now let's style some things here we said check out our work let's put it so we can actually see that stuff there so we've already imported it looking good so for our container here let's do the max width of 1000 pixels there we go mx auto we'll do padding of four which is one ram we need flex flex column justify to center width full and h there we go so for the div kind of surrounding our um our work here we're gonna give it a padding padding bottom of eight which is two rim and what we're gonna say with a work here so get a class name and we'll say text for excel there we go make sure we can see it there it is i'm going to drop this down so work is for xl now we're also going to want font bold inline border bottom of four then text gray 300 and then for our border color we're going to pink 600 and we can add all of these if we put them in h tags we could apply them to our global styling but this is how we're doing it here in this video here so for this one here all our text colors in there looking good now let's just add a py6 for a little bit of padding here on the top and bottom for our p tag there we go now for our grid container this is our grid container right here so let's define this as grid and like i said we want the minimum to be one here so it takes up the full width of the screen but anything over small which is 640 pixels like we said anything over small let's just change this to grid calls two just like so there we go and then anything over medium let's bump this up to grid column three and let's give it a gap of four on all of them here so that's what we want right there now for our card item this is the card container for our card item here and this one's going to be the most tricky ones not even hard just a little tedious little extra code here to add that little effect where we hover and we get that nice effect here so what we want to do for the card item itself is um so what we want to do is actually add in a the background here so i'm going to add in this the styling here so we're going to use shadow large so we can have a nice little shadow effect here then after our shadow large let's give it a color here and the shadow color is going to be we're going to define it zero four zero c one six there we go perfect now again we have to group these just like we did before so make sure you add the group style there and then can container so we can define our widths here and we want to do rounded md blacks justify center items center and then we'll do mx auto for margin auto and then i'm going to add my own styling this is the only custom cs we're going to be using for this project i'm just going to call it content div so go ahead and add that or add whatever you'd like here now for our div here this is going to be our hover effects here i'll add a little note hover effects because our image is actually we're going to pull in here our image and the way we're going to do that we're going to add our styling in here so let's grab in some images that we're going to be using so i want to import i'm going to say work img from and then let's go into our assets and it's called work img. jpeg i believe again these are in the in my github profile so i threw them down in a link in the description below feel free to grab those use all of them so for these um whether or not you get hired is is you know you have to have a really clean portfolio but what you really need to have is some really really nice projects on there so i'm just throwing in some random projects i've done very very small um i think if you're going to get a job in tech you probably need some larger projects than this but i'm just kind of showing you how to build this tutorial this portfolio out so for our image then also let's import also there we go also we're going to want to import another one i'm going to call it real estate and these are actually just some past videos i've done so feel free to check those out too work image dot jpg perfect now oh i was looking for something it's saying real estate oh it didn't auto complete all right that's what we want there no errors looking good let me drink there you guys so for um for our our card item here this is our little card item what i'm going to do i'm going to put this on the next line here so this is the only style we're going to be using and what i'm going to say is style open up some curly brackets here and i'm just going to import our background image so the way we're going to do that is a background background image we have to use camelcase we're using css in react and we have to put this in quotes but i'm actually going to use backticks because i'm going to use a template literal here so what we're going to say is url then open up our our um parentheses here and then we're just going to say dollar sign then a quote we can grab the work work img there we go let's scroll down boom there we go we're starting to see it so we need to find some dimensions in here that's why we can't see anything and i'm going to go ahead and do this inside of our index dot dot css file here and this is the only css we're going to be using only custom css we're going to be using here so what we're going to say remember we gave that a class name of content div this is our custom styling here so what we're going to say we're at importing the background image so instead of saying background imager here we're doing that dynamically then in here we can just say background repeat and we want no repeat then we're going to want background size to cover and then we want the background position to center and let's give this a height of 250 pixels there we go that's what we want right there that's perfect now let's go ahead and add this next one here it's going to be our hover effect so content div hover now stick with me here guys we want to do the back background image here and what we're using is the linear gradient here um two right and then we're gonna be doing rgba let's open this up one one two one five seven two five five five and then let's give it an alpha 0.8 now i'm just going to use the next one whoops is going to be hsla this is going to be 242 74 61 and then 0.8 for the alpha there and that should be all the uh css we're going to be needing there all the custom css we're going to be needing for now i'm going to go ahead and just close this back down and for our work let's finish this up here we're not getting anything yet we still need to add some more styling here so for our hover effect here do our hover effect in our in our works right here so for our hover effect we want to add an opaque opacity here so let's do opacity opacity we wanted to show as zero then on hover and this is the group hover you guys remember we added that group hover then we want to change the opacity um this damn thing sorry um ah sorry all right opacity it's not 80. we want this to be 100. um where are we messing up here uh just jack something up okay there we go sorry thing pops up and screws everything up there so that's what we want the opacity 100 we added the group right there so on this span here what we're going to want to do is say for the span let's give it a class name text 2xl font bold and we'll say text white and then tracking wider and that's going to give just a little bit of letter spacing there now for our span we'll say react js app location there we go then for this next div here let's give this a class name and we'll say padding top 8 is going to push it down a little bit and then push everything into the center and in this button we're gonna have a demo here demo and then this one is going to be code so there we go as you can see if we get a little hover effect on there we have our buttons we still need to finish styling this thing so let's go in and finish so for this we want to do um for the button i'm gonna go and press this alt button so we kind of put some type in two places at once there save some time so for the button let's do a text class name text center uh let's do rounded large and px for py-three margin 2 and then bg white we'll do text gray 700 font bold and then we'll do text large to bring that up just a bit that's what we want right there however we're not getting any background here let's have a look at that so we have our div style here we're passing through our image uh dynamically there we go and then for all the other styling we're throwing it in here we're using the background repeat no repeat background size cover and our position to center that looks great everything is looking good there then this content div hover i want to make sure everything is working correctly here so let's have a look the content div hover background image perfect linear gradient to the right and then this is looking kind of funky here we need to add a comma here i think that is the reason um that might be the reason why it was not working rgba we need to add an important actually so let's make that important hmm let's do not liking something here we need a comma in there there we go that's the issue so let's have a look that's what we want perfect and we can still see through there that's perfect that's exactly what we want right there so the reason we had to add the important tag here on our hover is because we're using this passing the this style through right here and what react was doing was just checking for the style right here and it was completely neglecting our uh our style in here and on our index.css file so that's what's going on there and i think that should just about wrap it up for our little component here and if we open this up to widescreen there we go so something's not acting right we need to finish this up here so it looks like we i may have left something out here so let's have a look we have our hover effects here perfect i'm going to go ahead and save this so it kind of cleans it up a bit get where i'm at again so i'm going to put some space in here so i can see what we're doing so after our hover effects looking good now for our grid shadow large and then our our grid this is our uh card container where's our card container so what we want to do actually i put this on the on the uh this is the whole container of all the all our projects here what i want to do is actually cut that and put it in here let's go ahead and save that now when we open this thing up that's what we want right there that's perfect that's a little better perfect perfect now what we can do let's go ahead and let's do this so we have this copied down so what we can do next let's find our little card item here boom right here so this i'm just making a little note here boom container and then this is grid item so for this item here what i'm going to do see the bottom of it is right here um what i'm going to do is copy that down one time and now for this one instead of work image we call that i think real estate real estate there we go so let's have a look perfect that's what we want right there now for all of these boom what i'm going to do is copy this right there that grid item and i'm going to paste this down twice and what that's going to do is going to give me six total projects here boom that's what we want now i'm just reusing these obviously you'd want to have six or uh or less or more projects here not the same ones i'm just using this for the sake of the tutorial here and when we hover boom we have an application here and now for this we want to do this is a link here now um it just goes back to our home page but what we want to do is add in that link demo for each one here you're going to want to put this to a link to your demo of your application make sure potential employers can demo your app otherwise there's not much point of even putting on there at all so make sure they can demo it and then also for their button here i would just make this link back to the github portfolio for that project if you can so make sure you do that there so that is looking nice so we have one down here on our smallest devices here as we scroll up past the 640 breakpoint we're gonna go to two boom and then above medium we're gonna do three and it kind of stays there so everything is looking nice everything is really coming together so let's do our contact form next so let's drop this back down and i'm gonna open up my sidebar again here let's go ahead before we forget here i'm going to copy down my background here and we can go ahead and close that as well so now what we're doing is the contact form here so let's go ahead and add our component here s contact.jsx there we go r a f c e to generate our functional component here and let's go ahead and give this a class name i must say width full h screen and then copy down our background color there we go now let's go in here and import contact go ahead and hit control space auto import make sure you type it at the top if it's not importing and down here is our contact section we can't see anything because we haven't put anything in there yet now for our contact we're not using any icons we don't have to import anything but what we want to do here is uh this is our outer parent container here let's not forget to give our name of contact here for our uh react smooth scroll and then down here we want to say flex uh justify center and then we're gonna do item center and let's do padding a four so one rim now for our form let's go and generate a form now for action we want to leave this blank for now we're gonna use that when we use the getpost.io but for now we're gonna leave that blank now inside our form i'm going to have a div here at the top and this is going to have a p tag that says contact there we go there's hard contact form right there now for our form let's go ahead and do some styling for our form so for our classmate class name on the form let's do flex flex column max width let's do 600 pixels on the max width there and we'll do with bull there we go looking good there now for our div here at the top this is going to be our contact here so for this div let's just give it a class name of padding bottom of eight that's all we need there now for our contact basically same styling we're doing on all the others here so let's do text for xl font bold inline border bottom four and then we'll do the border color here of pink dash 600 there nice little pink color there boom that's what we want now let's do our text here we forgot to do that so i'm just going to add it in the top of our um let's just add it to this one here because i think we might get a little tricky on the on the form so let's do text gray 300 boom there you go so the higher the number the darker it gets so if we were to do a 700 i think it goes up to 900 so as you can see a little bit darker and then one would be uh basically almost white so we're going to be using the text gray 300 there now underneath this p tag we're gonna have another text here and say submit the form below or uh we'll say shoot me an email and we'll say my email my email gmail.com boom there we go now for this let's give this a class name and we'll make this the text gray 300 and then let's also do uh padding uh four there now underneath this um this is p tag we have this div here underneath there let's do an input now for input text is fine i want to have a placeholder placeholder of name and then we need to add the name property here make sure you have the name property of name this is very very important for git form.io to work so if you don't put the name property it won't uh work properly so make sure you enter that name and let's just do a class name as well of m y um actually we don't even need a class name on this one so let's copy this one down and then we'll change this one to email we'll change the placeholder the email then also the name here we'll change that to email and this one we are going to give a class name of just my four there we go and we'll do p two to give it some padding and let's do i'm gonna give this a background of let's see here open this up cc d 6 f 6. let's close that and i'm going to give this uh padding we'll do this on this class name here as well whoops there we go and then the last one is going to be a text area boom text area we'll give this name of message we don't need any id in there and we actually i don't think we're going to need any just we'll say rows 10 we don't need to use this we're displaying this as flex and we do want to give this class name so we get our background in there perfect and let's give this a place holder of message there we go perfect now let's add we need our padding here so p 2 so we have a little padding in our form as well so that's perfect up our name here needs our padding perfect that's what we want right there you guys everything's looking good so name message looks good looks good now just underneath here but still within our form what we want to say is we want to have our button here that says let's collaborate and i know you might not be able to see it here i'm going to open this up i know my image is down there so looks good right there so we have our button can't really see it whoops there we go you can't really see it try to highlight it so let's add some styling to this thing here uh and for the styling for our button what we want to say let's give it a class name we'll say text text white we'll do a border of two and then we'll say let's do our for our hover we're gonna do bg pink 600 and then also for that was the background so hover border pink 600 and we'll also want to do um let's do px 4 py 3 and again buttons is a great thing to add in your global global styling here so margin y eight now let's do mx auto flex and then items center let's see how that looks there perfect now if we hover on this thing that is perfect that's what we want right there looking clean you guys i hope you like that now uh that is looking good so let's go ahead and bring this thing up and see what we've done so far looking nice there we go cool so let's go ahead and work on the get form to i o so head on over to get form dot io and go ahead and sign up it is a free 100 free i already have an account here so i'm just going to sign up here and in here see you can't remember my password that's okay all right passwords don't match what's up with that all right there you go sorry about that now you can only have one endpoint or folder here so this is once you are logged in everything is free like i said we can create submissions we can set up automation really really powerful this is really really great highly recommend you use something like this on your portfolio to kind of take it to the next level here so what we want to do here is let's hit create boom there we go and we can call this whatever you like i'm just going to call it portfolio because this is the project we're using here and like i said you can only have one here at a time so just keep that in mind so first i'm just going to do central time here doesn't really matter now create so what we want to do is we added in the name here so what we're going to do is just copy this and we also make sure to add method post to your form so let's go back to our form here and we're just going to paste that sorry not the name but in the action there so let's go ahead and paste that into the action that is your code there so don't use this one it's not going to work i'm going to close this account after i do the video so make sure you get your own code so it works for you now let's do method equal to post there we go now everything should work so let's go ahead and leave this open let's go back to our application here now what i'm going to type in is clint and my email test and then say this is my message let's go ahead and submit this and see if it works hey there you go so this is the what you get with git formula io it sends you this page here you can completely customize everything so let me go ahead and go back to the previous page now let's go into git form and see if it has my submission there it is my name my email and say this is my message just from only one moment ago so this is how we use git form that's all you need to do feel free play around with the the automation and everything you can do a lot of really really cool things in here so that's all i'm going to do for this tutorial maybe i'll set up another tutorial explaining all the automation capabilities of git form but that is it for now so let's go back in here let's set up our react smooth scroll so we can click this and just have a nice transition up to the top of the page here so let's type in react uh scroll here we'll see what we can find this is it right here guys go ahead and click that so we need to install it first npm i react uh scroll or if you're using yarn i'm gonna go ahead and create a new one here so i'm just gonna type yarn add react dash scroll that's going to install our react scroll dependency here so let's have a look i just like to check check and make sure things are installed properly so we have our react scroll right there looks good so this will save you a lot of time debugging potentially so what we need to do is import right there so you can copy that or you can just type it in because we actually don't need all of these for this tutorial so in our and we're going to need this on on certain forms here so we're going to need this on our nav bar and we're also going to use this on our home page here as well on our like hero component so for our nav bar let's go into the top here and we're going to import and it needs to go inside the curly brackets there sorry not logo but link there we go from if i can type here i'm like i said i'm still using two um from react scroll i'm still using two keyboards you guys i'm on my laptop while i'm at work and when i'm on home i just use some shitty lenovo ibm keyboard here so sorry about the language i want to get a new keyboard but i just haven't pulled the trigger yet so okay so in here we have imported link at the top from react scroll now let's go back here that looks good see boom there we go now let's scroll down and see what we need to do this is what we want to copy right here this link tag here so i'm just going to copy that over and in here in this li so this is our menu right on our nav bar i'm going to drop this down just a little bit so just we have some more room here for our main our on our list item i'm going to leave the list item there and just for our home i'm going to add a little space there and then boom i'm just going to paste that now i'm not going to be using the active class for this tutorial we are going to be using the test we're not using the spy um i think we need that smooth in there we don't need this offset though it is good to have so um but we are not going to be using it in here and then we can just delete that because we're not using any of that so in the text that's displaying is test one so if we open this up you see it's gonna be it's gonna say uh test one instead of home so let's just go ahead and fix that to home boom and this is the why we use the naming property here so instead of just test one we're going to say home and that's how we point to certain certain sections of our react application so so it says two let's go into our home boom that is our home right there so that's what we want right there perfect i'm gonna go ahead and save this so it gets nice and pretty so let's copy that and i'm gonna do the same for the about whoa that kind of jacks everything up so for our about and i'm going to change this to about and then we're going to point it to the about as well and then the same thing with skills we're going to point that to skills there we go and we'll change that to skills and then kind of tedious i know we'll do that for work point to work there we go and then finally let's do the contact there we go and we'll point that point that to contact and we'll send that there so let's go ahead and save that there sorry it puts in these little spaces there excuse me there i was going to do this initially as i was going to live stream this and do it live with you guys so we have access to the chat but i don't really have that many subscribers yet so um that's why i didn't do that so there we go boom everything is working properly assuming that you put in the name property on your elements there so about skills work and then contact boom that's what we want now scroll this thing down we're going to need to copy this down because right now it's not going to work on on our mobile menu because that was just the one section we did so notice we click here nothing nothing happens so let's go down here and for this list item here like i said we're going to keep the list item like so and in here what we probably want to do is just wrap everything inside of uh inside of the the list item here so let's do that let's wrap everything um inside of the list item here so what we can do here home same thing we just did and i'm just going to copy this one here so home and then we're doing the about boom there we go and then let's do the skills there we go and skills the next one is going to be work copying that let's paste it over our work there and then let's well jumping around here let's go to our contact and finally we'll copy that one over that'll be the last one boom now let's save this so it gets formatted nice and pretty boom so you can see the the sidebar is scrolling however whenever we click our menu stays open this is a problem so let's go into our state up here nav set nav what we can do since we already have this set to the opposite of what its current value is what we're going to say down here let's add it to our mobile menu only let's have an on click event and just run the handle click function so in here just on this a link here or the li we can just say let's see we'll say on click we want to run the sorry curly brackets we want to run the handle click function so let's see if this works we'll scroll down here boom so it's not working and the reason that's not working is i put this on the i tag the li tag so this actually has to be on the link tag here so now everything should work properly we're down here at the bottom of the page let's click home boom it scrolls up to the page and closes the icon how cool is that you guys so let's just copy this in on all of these here boom there we go and we're going to run this function on every icon here or on every list item so let's look and make sure everything works we know the homeworks let's check the about boom looking nice let's check the skills that's what's up you guys that is awesome smash the like button i hope you like what you're seeing here i hope it's useful and uh like i said you're going to be not reusing the same project on your portfolio put your own projects in there make sure they're badass projects with a lot of really cool features and make sure they look pleasing you guys so you know i'm not the best designed person and you don't have to be use a you know a framework like bootstrap or or material material css or or you know copy or get some inspiration off some other sites here just kind of make things look nice okay you guys it's really really important it doesn't have to be you know designed by it by a designer or anything just make sure it looks presentable you guys because these these companies will be looking at that and you want to make sure you stand out guys they're getting so many portfolios and resumes you want to make sure you stand out so that was my goals this video you guys i wanted to that really wraps it up my goal in this video was to kind of show you a portfolio you could use to hopefully help you get a job in tech programming whatever it may be use this for anything you want so everything is looking nice as we can see boom thanks for watching you guys i'm going to post this down i'm going to put it in my github right now and i'm going to put a link in the description below so like i said feel free to clone this change it up make it your own or use it as is i don't care i hope it helps you get a job but thanks for watching you guys smash the like button and uh subscribe to the channel i'm going to be putting out some more react react content just like this in the near future thanks for watching you guys we'll see you on the next one

Channel: Code Commerce

Views: 176,009

Keywords:

Id: 2kg0z1qNrkw

Length: 98min 30sec (5910 seconds)

Published: Thu Mar 10 2022