Build a NEXT JS Portfolio Website With Tailwind CSS | Jr. Front-End Developer

hey what's up guys in this video i'm going to show you how to create your very own portfolio website and next js styled with tailwind css so a lot of you guys really liked my previous video on creating a portfolio so i just wanted to create it create an updated version for you guys to help you get a job as a junior front-end web developer so this is what we're building here you guys and when you see the code you might say hey this looks a lot like react.js yes you're correct because it is react next js is just a framework built on top of react which has some extra capabilities um not which we'll be using all of them today but just for a quick rundown it has server side rendering okay next js also lazy loading images which we're going to be using today and if you don't know what lazy loading images basically it means that your browser is only going to load uh whatever whatever is visible in the browser so if you have some images down in the footer or lower in the website it's not going to load that until it gets on screen which greatly greatly increases seo you guys google loves that so increased page load speeds so and then also it has um built-in client routing so all this browser router routes that we have to do in react forget about all that stuff we're not going to need it all you have to do is create a file and it's that easy to create your own route so this is what we're building here like i said styled all with tailwind css our banner here at the top our nice snap bar if we scroll down we get a little hover effect boom there we go and a nice little landing page here and look at this you guys we're gonna have a smooth scroll effect and there are no depends sorry one dependency is react icons for some of these icons that you see but that is it you guys um everything else we're doing completely uh custom code here so there's our nice about section screw scroll down to the skills there we have some skills firebase css javascript react looking nice let's check out the project here you guys and these are actually all projects that i have built uh i just released this netflix build probably about a week ago and if you want to see it i'll put a link in the description below so you can see that video and if you want to see any of these other projects i have a crypto based one that uses firebase also this uh zillow clone with google maps api and a zillow api so you can search up property listing so super super fun a lot of fun with this build so if you want to see any of these in the little twitch build here and then we have a nice uh contact section at the bottom here and guys this is all 100 mobile responsive if i string it down for you guys boom check that out let's check out our nav bar here at the top or like checked out that mobile menu guys how clean is that that looks good you guys i'm going to show you how to build all this you guys just tailwind css is all we're using here no custom css and one last thing i want to show you before we start is our our routing here so like i said browser router no none of that nexus handles all the routes for us so check this out this is going to take us to a new page here slash twitch boom look at that clean have the nice video or sorry image in the back with a clean overlay on it link to the code to the demo in our technologies here like i said everything is 100 mobile responsive shrinks down uses flex then we drop down using the grid box down here so how awesome is that you guys i hope you like this if you want to see how i built this i'm going to show you how to start this from the beginning we're going to create a blank next.js application import tailwind and style everything together so if you're ready to get started let's jump in all right you guys you ready to get started or what here we are in vs code just a blank code editor so i'm going to go ahead and press the control backtick button and i'm going to change the directory to my desktop that's where i'm going to create this file here and that's our first step we're going to create our next.js application so if you're using i'm going to use yarn for using npm that's fine too just interchange the two so i'm gonna say yarn create and then i'm gonna say next app and i'm gonna call this portfolio next js just like that go ahead and press enter this will be a quick quick quick build you guys and uh just real quick uh a lot of you guys are asking about the the logo as i did and i just did this one real quick in canva all this is a font um if you're gonna be working as a front end developer and you haven't used canva then i highly highly recommend you check that out canvanva.com so very very quick and easy so what i'm gonna do is just drag over the folder we just created okay and i'm gonna shut that down there and open up the terminal again here i'm gonna say yarn dev okay or npm dev a little bit different than the start we're not gonna say yarn start we're gonna say you're on dev because next.js just operates a little bit differently here and so on the left here you see it looks very similar to react but there are some differences for example we talked about the routing so basically whenever we create a page here or a file inside this pages folder that is going to be our route so you don't have to do this browser router we don't have to wrap anything these routes nothing like that all you have to do is create a file in the pages and that is your route how easy is that you guys awesome stuff so what i'm going to do this this little api folder here i'm going to delete that because we're not going to be using that so let's just go ahead and remove this and oh you see i whenever you start up your your development server here so it's not going to automatically start at least for me it doesn't so just go to localhost 3000 i'm going to be on 3001 because my demo is on the first it's on the logo is 3000. so this is what you get right here you guys this is the boilerplate code just a starter create next app right here this is what you see so we're going to be working inside this pages folder right here and in this public folder is where we can add in our images and i'm actually going to do that right now so i'm going to create a inside the public folder i'm going to create an assets assets folder and i'm just going to bring over what we're going to be using today and i'll show you real quick so what i brought over was just this logo right here this is what you see in our in our nav bar okay so i brought over that then i brought over two additional folders this skills and these just have the little png files that we're gonna use for our skills then also my project images i just have four project images so these are energy feel free to just use your own images uh when i'm done with this build i'm gonna put it on my github and i'll put a link in the description so if you want to just clone this feel free to do that then you can use all of my images or however you want to do it there so that's all we're going to use in this public folder here and then real quick the styles are global styles this is where we're going to use all our global styling um we're not going to have a lot since we're using tailwind which is kind of like inline class class names i'm going to show you how we do that and so you can just remove this home module yeah we can just ditch that right there so inside our pages folder here okay let's go into our app.js here this is kind of how it renders out all of our components and so in here what we're going to do is delete that there there we go and we're going to delete all of our boilerplate code just like that there we go styles is not defined that's okay it's looking for some styling and that's looking for our on our index.js right here is where it imported the home module so let's just get rid of that there and so this head right here and um so if you see in our title right here as my name and that's where you can kind of change that out so inside the head and this is imported you guys from next head so you can just add this little head component on any of your pages to get the the title that you want for your page or you can do some dynamic dynamic data in there too if you want so i'm just going to copy over this i'm just going to say clint it's my name here front and developer just like that and as you can see boom that changes the title of our page just like that super super awesome very powerful stuff you guys and how easy is this right super super easy so what we're going to want to do first is probably going to start off with our with our nav bar okay so we're going to create just similar to react.js we're going to create another folder here called components and this is where all of our components are going to live for our project okay so for our nav bar we're just going to open up in here in our components folder i'm going to create a new file called oh there we go new file and i'm going to call it nav bar dot jsx i'll go ahead and r-a-f-c-e and um so before we actually start building out our components here what we wanting what we want to do is install tailwind because we're using tailwind style this whole thing so let's open up a new tab here i'm just going to go to tailwind css.com there we go and here we go looking good there so let's just click on get started okay then just scroll down here click on framework guides since we're using next.js should be the first option here so we're going to click next js here and the first thing it wants to do is create our project okay we've already done this so next let's install tailwind right so just copy this line um if you're using npm i'm using yarn so i'm just going to copy this back half here i'm going to create another little terminal here so i'm going to say yarn add and then just paste that in there okay and this next step here let's just copy this line mpx tailwind css init dash p go ahead and paste that in and this is very important you can't skip any of these steps you guys and what we just did with that mpx command it just created this tailwind.config file okay and this is very important because what we want to do in this next step over here we just want to copy all this here into that content array okay so we're just going to paste it in there just like so save it in the prettier extension formats everything nice and neat for us and then down here okay this global css and it tells you what file it's going into right so it basically just says copy this into your global styles so remember global styles here in our styles folder and i'm just going to replace all of that with my global styling and that's all we need to do you guys so we're not going to see anything right now because we need to restart our server so i'm going to press ctrl c to close it down i'm going to say yarn dev to start this thing back up okay and i'm just going to refresh and that should be everything we need to do to configure our tailwind so what we're going to want to do first i'm going to add in some global styling and this is very very easy to add global styling and we add this in our global css okay so just a few things that i'm going to do here and how you add global styles and tailwind you just say at layer base okay then open up your your curly brackets then here we can just target um html elements that we want to style so what i'm going to look here for i'm going to say body okay body and open up our brackets then we say just the at sign then apply and then we can write out all our styles and what i'm using i'm going to use background right i'm going to change the color of the background so i'm going to say it's bg and you can say bg red 900 600. basically from 100 to 900 you can choose a color and the the greater the number the darker the color gets the lighter is going to look like a light pink but we don't want a background of red i want a custom color here so what you can do instead of typing out a color you can just open up some brackets right you can use brackets and tailwind for custom values whether it be a like a hex color code um pixels rim uh percentages viewport heights anything you want just open up the brackets and you use custom values and what i want to say here i'm going to be using this this kind of off-white cream color is e c f see 0 f 3 just like that boom there we go looks nice and for our text it's going to be like a grayish color so i'll say text dash okay and this is like saying text you could say text white text red and what i'm going to say in here is i'm going to open up my hex code 1f2937 and then i'm going to say tracking wide and what that it does is just kind of spread out the text for us so if you notice if i hover over here you can see a little um this is tailwind intellisense right there to plug in i highly highly recommend you get in fact go over to your plugins and if you don't have it tailwind intellisense right here you guys and what that does tailwind css intellisense you have to download guys if you're going to be using if you're gonna be using tail one css is a must-have it'll save you so much time especially especially if you're learning tailwind um because otherwise you have to go in here and kind of search i said hey how do i do background color something like that and you'd have to search and it gives you options but in here it kind of tells you what you're doing and gives you suggestions on what to use so i highly highly recommend you get that also if you're going to be using a prettier extension basically if you saw it auto formatted whenever we save it highly highly recommend the prettier extension and then we are going to be using the react redux es7 snippet right here just to create our functional components with just a few clicks so i highly recommend you get those components right there but back to our build you guys so in addition so basically what we did to our body of our web page we're stating that we want this to be our background color the text is going to be this kind of dark gray and then tracking wide but i want to do a few other things in here just to save some time in the long run here our h1 i'm going to say h2 h3 basically all of our h tags here and we're probably not going to use all these but just in case what i want to say is font bold i want them to be bold right so i'm going to say apply font bold and you may be saying if you're not used to tailwind why are you telling the h tags to be bold they're already bold well in tailwind what it does it applies what you call base style so basically an h1 would just look like a regular p tag okay but it still has the h1 uh tag on it so that way we can define our own um our the own size of our text if we wanted to be bold if you wanted to be thin so that is why we're adding that right there and real quick to the h1 only i just want to apply a sizing here so i'm going to say text for xl and then small this is a media query tailwind you guys is a mobile first approach which basically means whenever we we apply the styles it's going to apply to the minimum width and then basically whatever you specify above that it will be applied accordingly so what we're saying here i'm going to go and finish this out medium text 6xl and this is all you have to do for media queries you guys how easy is that that's awesome so what we're saying we're saying if we use an h1 on here we want it to be 4x and if you see if my intellisense if i hover over this you can see text 4xl is 2.25 ram at 36 pixels right but once we get past the the small break point which you can see earth defaults to 640 pixels once we once we get past a small break point we want to go up to 48 pixels and then once we get past the medium break point we want to go up to 60 pixels so that's how we're going to do media queries very very easy so let's go ahead and do the h2 i want to do that one as well and that should be about it here so this one must say text 3xl and then anything above small we'll do uh text for excel so i have my little cheat sheet here off to the side and then just a couple more here for our list items for our list items what i want to say i just want the apply cursor pointer there we go and then for our button i'm going to add some styles to to our button there we go and for our button let's apply this i want shadow dash xl and that is that's all you need to do to add a shadow you guys that is freaking awesome that's this tail one saves so much time and you're really going to see how much time we save when we really jump into the coding then shadow gray i want my shadow to be gray at 400 okay then we say rounded xl and the what round it means is the rounded quarters like a border radius is what it is uh rounded full would be a complete circle anything left is less than that would be um a rounded full i believe is like 50 or something like that so run it and then we want uppercase and then bg gradient and this is how we do gradients super easy you guys bg gradient to right there we go now what i have to say is from uh see our color here and you could just say blue or whatever you want to do but i'm gonna put in my custom color and it's five six five one e five just like that you guys and then we can say i'm gonna shrink this down a bit then it's okay from that two then open up my brackets again and i'm just gonna say i want this to be seven zero nine d f f just like that and i want the text to be text to be white just like that simple you guys that is it so and that's all the baseline styles that we're going to be using actually so from here we can actually go to our navbar component and let's go ahead and start creating our uh our navbar all right so i just used raf ce that's the react uh react redux cs7 snippets so we can create our functional component and let's go ahead and style this thing okay so we're gonna have um this build you're actually gonna use a whole lot of like really cool uh program context concepts that are gonna help you save a lot of time and that is my goal it's gonna help you save time and become a better developer here so what we're gonna say here um this next div we give this a class name on the outer div here on the outermost if we want this to be width of um let's say we want this to be fixed okay so we want to stay on top at all times i'm going to say width full and that's the same as saying width of 100 okay so i'm going to zoom in just a little bit there so width full okay and the height of 20 you see that's 80 pixels again if you wanted to specify your own height you can just open up the curly brackets and say 120 pixels however you want to do it but i'm going to say height of 20 just like there then a shadow xl okay and what we're going to do out here i think that is going to be it okay and let's just give this a z um 100 we'll have to put some brackets there z 100 so we want this to be um always on top no matter what okay so and for the next one here this next div here is we're gonna this be our container okay so i'm gonna say class name we want this to be flex justify between okay items whoops items center and this is how easy it is you don't have to say display flex justify content space between look this is all you have to do okay with full height full then px2 this is padding on the x-axis of two and it's not i'm going to string that down some it's not actually two pixels or two ram so basically tailwind goes for every multiple's of four so if you are to say px4 that would be one rim and so since this is two it says 0.5 ram or 8 pixels just like that and then what we're going to say see 2xl we want the pixels px to be 16 which is for rem and this is just a media query here you guys so above it goes sm for small it goes up to medium large extra large than 2xl so that is what we want right there you guys now for our um what we're going to do next is our actually our image so instead of just saying you know img like that what we can do to incorporate the lazy loading images all we have to do i'm going to go and let an alt there and all we have to do okay is just say image just like that and we need to import this from next dash or sorry next slash image and that way we can import and utilize our lazy loading images and also has a bunch of other features for image images as well kind of styling them and presenting them in the best aspect ratio possible all right so how are we going to get this file so we don't necessarily have to import it how we would in react import you know this name and so we don't have to do any of that in some cases we may be doing that but in here what we can do is just kind of go in and find our file and so let's say slash and we remember went to the public folder assets and then nav logo.png and we're going to get an error here i'll show you what we're going to get hey where's we need to import this first sorry guys so and where i'm going to import this is just going to be in our in our index folder okay so let's just put this right here nav bar and it's going to go ahead and auto import for us okay there like that so and here you have an image so must use width and height properties or layout fill so i don't really like using this layout fill um it doesn't ever seem to work at least in my experience how it i expect it to work after reading the documentation so what i'm going to do is just add in some sizes here and it's just sizing properties so all we have to say is width and for my width i'm going to be using 125 and then the height i'm going to be using 50 just like that and we're going to get one more error here and that's because it says um if using relative image it must start with a leading slash okay so all we have to do is just like that if you're using from a url you don't have to do that but it's gonna if you're using an external image you could have some other issues in fact if we just delete that if using absolute yeah you're gonna have to basically put this in your config file but we're not going to worry about that right now so here we have our logo here at the top next what we're going to do is add in our menu here okay so let's go ahead and i'm going to open this up i want to make sure that's at least 768 pixels here so let's just i'm going to go and save that okay get it formatted and right below the image we're going to create a div and this is going to be our unordered list okay and then in here we're going to be using a link tag so what we're going to use is actually a smooth scrolling not using a package for this just uh just some javascript here so i'm just going to say a link okay and this is how we do links in next.js so it prompts us to import from next slash link that's what we want to do instead of two like we use in react we say href okay and for now i'm going to say a slash there we're going to come back later and add a few things here once we set up our smooth scrolling whoop there we go just like that sir you know what let's put this into li okay so let's just say home just like that now i'm going to go ahead and style this li and what i want to say is i'm going to say margin left 10 okay text small upper case and then also i want to say give it a hover selector anytime we hover let's say border dash bottom so now but you can see it transition there there you go you can barely see that little border on the bottom there and let's go ahead and copy this down so i'm gonna hit ctrl alt there we go and for here i'm gonna say this one's going to be let's say about and then we'll have the skills and this one's going to be projects and then finally we're going to have the contact down there so we're going to come back and add in our tags here in a little bit let's style this right here on order list class name and like i said tailwind is mobile first what we want to do is actually hide it right so we're going to say hidden then anything above medium we'll just display it as flex so let's open this up a bit as i think we're below the break point boom right there yeah right on the edge there perfect so that's it you guys for our navbar on larger devices so let's do our mobile menu next okay so we're going to do is this mobile menu so react icon the only uh dependency we're gonna be adding this project are the icons right awesome we're gonna have a nice overlay here and then put in our logo here and our another list and some icons so let's go ahead and do that next so for i'm going to add a div here now for our icon let's go install that yarn add re act dash icons just like so now if you want to check out all these icons you can go to react icons.github.io and you can have all these uh icons you can use so i already know what i'm going to use though so i'm going to use the ai outline close and the way we can do that just say aid outline close just like that we'll close that off now let's go ahead and copy this we need to import it okay we're going to get an error so it's the same way we import and react we're going to put it in some curly braces and say from react icons and that's not all we need to add a little pretext so that ai somewhere f a fa ai all different ones there so that is how we're going to use our icon and what we're going to say in this div here anything above we'll say class name anything above medium we want it to be hidden and so i actually want ai outline menu so outline menu we're going to be using both so boom there we go we just need to import that one as well we can actually import this on the same line just like that okay perfect now it's a little bit small so let's bump it up a little bit a little bit we can use the react icon properties for that all we have to say is size and i'm going to bump this up to 25. that looks good right there you guys so now it should disappear and show our menu perfect that's what we want right there you guys so next what we want to do is go ahead and display our menu okay so i'm gonna drop this down um just outside of this div here should be good okay and in here this is we're gonna put our menu so let's create another div and for this div what we're going to say let me give it a class name say let's not display i want to be able to see what we're doing here so i'm going to say fixed left left 0 let's say top zero width full h and we'll say screen here and i'm gonna give this a bg black 70. and there we go this is our alpha opacity here so 70 if you say 10 be a lot lighter if you want to go 90 it'll be a lot darker so i'm gonna leave this at 70 and this is going to be our overlay right our background when we open this up this is going to be the overlay in the back so that looks nice right there so just below that next we want to do is give this div and this is going to be our actual menu okay i'm going to go and save that so it gets nice and formatted nice and neat so this is going to be our actual menu right the side drawer menu so this also is going to be fixed and what we're going to say it's left left 0 top 0 oops zero and then what i say is uh width i want this to be i'm going to open up our brackets right and i want this to be 75 okay on small devices 75 percent then anything above the small break point which is 640 pixels i'm going to say width of and i'm going to use 45 keep getting that wrong there then anything above medium i'm going to say width of 45 as well so excuse me i want this one to be 60 on the small and then 45 on the medium there perfect that's what we want right there and then just a few more things here i want the height to be screen and want this background to be i'm going to give this background color it is going to be the e c f 0 f 3 just like that perfect p10 is going to say padding of 10 right then ease ease in duration 500 okay so we have this we're going to add in our media queries here in a little bit but right now i just want this to display on the screen so we can actually see what we're doing so that's all we need to do right there and then our next we're going to have another div and what we're going to create is this kind of little top section right here okay and so let's create our div and inside this div we're gonna have another dip and this class name um so we're gonna have our image in here and sorry i'll just do the image real quick do our image and this is gonna be let's see our source here our source and what we want dang there we go let me give this alt tag too go ahead and close that off so for our source we want that same logo right so we're going to go into where there we go at public can't type here public assets and then we're looking for the nav logo.png and remember to add that slash so you don't get any errors there and we need to add in our width and height properties so i'm going to say width and for this width i want this to be 87 and then i'm going to give it a height of 35. boom so a little bit smaller that looks perfect right there and then next i'm going to have another diff just below this okay and this is going to be our ai outline close that we already imported right make sure you do that if you didn't already and this is going to hang out just over here off to the side there so let's go in and we want to give this this diff around this image some class names we want it to be flex right and we're going to justify between so i'm going to say flex then we're going to say with full items center justify spell this right justify between and that's going to place them far apart and i'm going to use this extension pesticide for chrome really really cool extension there so you kind of see the outline of your html elements just like that perfect so that's what we want right there you guys perfect that looks lined up nice and neat and so what we're going to do next for this outline we don't need to do anything there but for this div we want to give this that cool little hovering effect shadow effect now i've been on a like really cool that's why i did this whole build this way i've been on like kind of this hover effect uh kick there i think it looks really cool so that's what's going on there so let's go ahead and add that in and we're going to put this on the div the parent container of the icon right so let's just give it a class name this is super simple and and tailwind so what we're going to say here is to copy this down rounded full okay shadow shadow large and if you want you can say 2xl you can say medium but i'm going to say shadow large here then i want the shadow to be gray at 400 p3 okay then cursor nope not auto we want cursor to be pointer look at that you guys let's gonna refresh that so i can get rid of the pesticide there that is looking good right there you guys ah nice nice so next let's add in a keep that open a little div here perfect so let's just go right um we're going to put this below below that div okay and we'll add another div and this is going to be a p tag and in here what we want to say is i want to say let's type here i still have yet to get a boom for my microphone here so let's build um something legendary together dude if i can type here let's build something legendary together perfect that looks good right there so in this div um what we want to say we want to give this class name say border b okay so border bottom and this is how we color the border right so border gray and this one's going to be 300 i'm going to say m y for margin on the y axis right top and bottom so margin y of four so that is looking nice there perfect a little bit better there we can come back and add some more stuff in here i think we might need to add a little bit of margin elsewhere so but that is looking good right there you guys below this below this p tag um you know let's see if i want to drop this down i just want to make sure everything sizes correctly so and especially if you go to inspect we go to like a smaller device like an iphone for example okay i want to open this up a little bit more so the way we're going to do that we're going to get on this ptac here let's give it a class name and i'm going to say width of 85 percent let's see how that looks see if we can change this the medium medium will say width of 90 sorry percent and then anything we'll say py4 just a little bit extra padding that looks good there so let's just drop that down and this should go up perfect good look at that that's looking clean looking clean you guys all right so just below that div we're going to um kind of close this out right below here we want to create a another another div and this is going to be our menu right here okay so for this menu here i'm going to create another div here for this menu we're going to have owner list and then we're going to have our link with our list items and let's say link here boom there we go and list item there we go this will be home now for this link i'm going to say href okay remember and this would be home and then for this list item what i say here is give the class name p y for text small okay perfect just like that you guys and let's just copy this down like we did above this one's going to be about this one is going to be skills then projects and then the very bottom we're going to have contact there we go perfect now in this um unorder list here it's going to give it a class name we'll say uppercase okay so when all these to be uppercase boom there we go and then the parent diff just around the unordered list we're going to give this some class name as well and this is going to say py4 so we get the padding of one rim on the top and bottom there we go and flex and flex column just to make sure it displays properly there so underneath this div okay so just underneath this dip we want to create um or you know see flex flex column underneath in front side where we're going to put this little div down here we use our pesticide just like that boom so i can flex and flex between there okay so just below this unordered list okay but still within this div here just below this unordered list i'm going to create another another div just like that and give this some room you can see what we're doing and i'm going to give this a class name i'm say pt4 okay if you hover padding top 10 rim okay and what else we're going to say here for our p tag when i have a p tag and i say let's let's connect just like that and in here let's give this class name here i'm going to say is uppercase tracking we can actually say tracking widest and that's the furthest you can spread them out up there apart there and text let's say what's our hex code here we're going to say 5 6 5 1 e 5 just like that boom there we go nice so underneath underneath this p tag okay we're gonna create a div and inside here we're gonna have all of our icons so what icons we're gonna use fa linked linked in like that linkedin and is what it wants to be right there so let me copy that i'm going to make sure this is the correct one we're going to import these and since this one is fa we actually have to put this on a different line so i'm just going to paste that in there from react icons slash fa just like that okay so yeah there we go perfect that's what we want right there you guys now let's go ahead and add our other our other icons here before we add these other icons what we actually want to do is surround this in a div so let's just go and pump that up right there go and save and let's actually go and style this so we can just save some time with our code so on the div we just added the parent div of our of our icon what we're going to say is we're going to say rounded full we're going to give it that nice hover effect right the shadow lg for shadow large shadow gray 400 there we go p 3 so we have padding of 3 cursor pointer and then whenever we hover give it a little space there whenever we hover we're going to scale scale and we'll say dash 105 and we can even say we say ease ease in add in my spaces duration 300 just like that so go ahead and save that our predator extension should format it nice and neat for us that's what we want right there perfect now what we actually want to do is going to create some more let's just drop these down a little bit boom boom boom okay and for the next one what we're going to use let's go ahead and say class we're going to give this parent of a flex item center justif justify between my four and then width full and then we'll say anything above small we want a width of eighty percent just like that and i think i added an extra e perfect there we go so that is what we want rather you guys that looks good right there so let's change out these icons so for the next one we're going to be using fa github there you go go ahead and import that at the top and then this next one is going to be a i outline sorry ai outline male there we go and this one's going to be bs i'm sorry bs person fill person lines fill another fill in here i don't know why they make these icons so difficult to read bs fill person lines fill that's ridiculous okay so go ahead and copy that and let's add that we're actually going to have that i have to add that on a different line here this is different text there it's bs okay from we'll say react icons slash bs go ahead and save that and now there we have it we have all of our icons and that is displaying perfectly just like we want it but it has no functionality so let's go ahead and do uh that next we're going to add that with the use state hook so while we're at the top here let's just go ahead and import use state from react okay and we're going to put this inside our nav component here so we say const and let's say nav set nav okay and this is just going to be equal to you state and we're going to set a default value of false okay and then here we're going to say const and this is going to be our handle nav function and this is going to be the function it's going to be arrow function to handle our toggling our menu and whenever we run this function we just want to set the nav to true so how do we call this function let's go ahead and copy that so we're going to want to call this every time we click on the close button and this bars menu over there so let's find what comes first our menu here we're going to add that to the parent container and that's all we have to do we just have to put it in that we can put in that div you put on the icon i'm going to put on the div there then we need to do this exact same thing on this ai outline close i'm going to put it on the parent container so on click we run this handle nav function which changes our state to true so we still have a couple more steps and what we actually need to do is just change our styling here so i'm just going to select all of that there right and we're actually i think we're just going to cut this out okay so let's just cut all of that out and what we're going to say we're going to replace the quotes okay with um with our brackets here and we can just use javascript now so we're going to say if nav is true we're using ternary operator here if nav is true let's put this back in our quotes this is the styling we want to apply else i'm just going to leave an empty string here so else there's going to be no styles so there we go and as you can see here if we want to change this uh visual boolean value here the or operator there you go so or that's the not operator sorry so now now our our state would be true if it's false no background so we need to do the same thing for this menu right here so let's just copy that right there in fact i'm going to cut it okay open up our brackets scroll back here and the same thing if nav is true i'm going to paste that in else i'm going to paste that in as well go and save that and i'll show you what i'm doing here so i actually want this to be left instead of zero or sorry that is right but when it's not true okay we want this to be we'll say negative 100 so that way it's just way off of the screen there okay so and we'll add in a transition here we don't need any of this code okay don't need any of that we can get rid of all that i'm gonna in fact leave that p there oops jumping around on me there we go so let's see um see if it works hey there we go just like that you guys but we need to add handle nav so what we need to do instead of true sorry instead of true because that doesn't make any sense every time we click this it just sets it to true what we actually need to do is just use the um the not operator just like that okay so now it's just going to set every time we run this function it's just going to toggle it back and forth so there we go there we have it you guys that is looking clean that is our nav bar you guys look at that let's just take a minute to appreciate that right boom hey and this okay so this is an issue right here and somebody called me out on this for a previous project they're like hey how come my menu stays open right every time i scroll up the screen doesn't make any sense and yes you're right so quick easy fix to that let's go down here to our menu so what we can say here um we'll just say there it is um anything above medium i just wanted to hide there we go in fact actually we'll do the same thing actually let's just move that right there to the parent container just right there so that should fix it now let's just go ahead and make sure yeah there you go so boom and that's all you need to do there so fixed it there for you so that is our navbar and that is a good-looking nav bar by the way let's just make sure it looks good on mobile devices drop that down we'll have a look on uh on an iphone that is looking good you guys smash that like button if you feel like you're getting some value out of this our next um component here that we're going to be building i'm going to refresh that next component we're building is our main page right here so let's get on that right now all right you guys so next we're going to create our main component and the main component is just our basically our hero whatever you see right there when you hit our landing page so let's go ahead and create that component right here it's going to be in our components folder create file and this one's going to be main dot jsx dot js works fine too uh i use jsx so i can use my snippets there we go or sorry my uh emmet and html so rfce is going to generate our functional component here and basically we're going to have three divs here okay so there and then a div here and for our parent container okay i'm going to drop that down give this a class name i want to say width full h screen and h screen the same as saying a height of 100 viewport height just like that and i'm going to say text center just like there then this next div is going to be our container okay so i'm going to give this a max width of i'm going to use our curly brackets 1240 pixels now i want this to be width full height full and i'll say margin auto mx auto okay p dash two i want to be flex justify center and item center just like that okay now inside this div this div here is not going to have any class but what we want to have is a p tag right and what we're doing right here is this right there okay and let's go ahead and copy that while i'm here and what i'm going to say here copy that in save and for this class i'm going to give this class name here and this p tag and it's going to say uppercase and we haven't imported yet yet so we'll do that in just in a second here tracking we'll say tracking widest text gray 600 now let's go ahead and import if i press ctrl sorry command p right brings up this little search dialog here and i can just look for the index just like that and let's import main just like that oh sorry this is issue here we don't want um we don't want main from next document so if i go ahead and press the control space button that's what it defaults to but what we want is actually just to import it from our components so there we go and there you can see our beautiful text right there perfect perfect all right so next i'm going to select that there because i'm being lazy so we're going to put this in an h1 okay and i'm just going to paste that in hey i'm so-and-so hey i'm saying and what i'm going to say i'm actually going to put this we want that to be our special color right so i'm going to put that in a span so let's just go and do that i'm going to say span class name and for that class name is just going to be text what's our color code here be hex code 565 1e5 just like that and we have to close our span just like that oh what's going on here there we go perfect now go ahead and save and that's looking good right there um we are going to need to give this h1 some styling and what's going to be py4 and we'll say text gray 700 whoa 700 just like that perfect now i'm going to go ahead and copy that right so i'm going to do another one right under that h1 i'm going to paste that and we have to go ahead and close that h1 that we just created okay i'm going to save that and then in here this is what we're going to say here i'm going to say i'm click i'm a front end web developer so we can just paste that in here boom look at that you guys but instead of you i'm going to say py2 on this next one there and then next i'm going to give it a p tag and i'm just going to copy over this text here okay and i'm going to paste it in here we're going to give a little bit of styles okay so class name and what i'm gonna say is p y force to get padding on the y axis up and down right vertical axis of four which is one rim and then we'll say text gray i wanna say 600 so it's a little bit of a color change there just ever so slightly max width i want to say of 70 of the screen okay so max width of 70 of the screen margin auto boom let's go ahead and save that so our printer extension will format that nice and neat for us now next uh just below this p tag and we're still in our third div here okay so within here we're gonna create another div and um we're gonna hey we're gonna say flex okay this is going to be displayed flex and what this is going to be is just our our boxes down there okay so this is the container surrounding our uh icons right so i'm just going to say flex and we're going to get want to give this probably a max width okay so we'll say i'm going to say item center justify between and we'll say max width of 330 pixels okay margin auto then py4 for one ram on the top and bottom so we can't see anything yet but what we're going to want to do okay we're going to create our div here and this is going to be our icons and my first icon fa linked in in are we using that same one yeah same one here there we go go ahead and close that and let's go ahead and add our styling here so we have to type on multiple lines so for this style we're going to actually say the same thing so hey let's just copy search our navbar and that way we can just copy this stuff in here so where are we looking at so i'm just going to copy all of that right there copy go back to our main i'm just going to paste that in there just like that so that's what we want right there i'm gonna give it change up a few things instead of padding three p three i'm gonna say padding six okay and i think that should be about it boom there there we go um we can actually change this scale i'm going to say 110 instead of 105. so it looks just a little bit scales a little bit bigger just like that perfect and so let's just copy this down okay two three and four and so we're going to want to use our fa fa github okay make sure that imports and the next we're going to use ai outline mail there we go let's make sure that gets imported and then the bs fill person lines fill okay that is looking good right there you guys that is our home component let's drop this thing down make sure it displays properly on small devices i like to check as i go along iphone boom perfect and let's see our menu again man i love that menu guys smash the like button if you're liking the value you are getting here so what is our next component our next component is going to be the about section okay let's just scroll on down here who about there you go just like that perfect so um let's go ahead and knock that one out right now so i'm going to open this back up and we can just close our nav bar there and i think we're done with our main so let's go into our components folder new file this one's going to be about jsx okay r a f c e and that's going to get up our our functional component okay all right so let's go ahead and import this into our index.js okay so about go ahead and import that make sure imported it from the components folder okay let's drop down that side menu there so in our about section it's gonna be really easy i'm just gonna open this up it's gonna be um just a couple diffs here and it's gonna this first div is gonna span two thirds of the column and this one's gonna span the remaining one there so let's go ahead and put that in here so over here let's go ahead and we're gonna have a div this is gonna be our container okay and let's go we're gonna have two divs in here just like that okay so for this first one the outermost container we're going to say width full okay then anything above medium when it's a height of screen make sure that's on a medium break point to you guys otherwise it won't display properly on flex items nice and center okay and then p y p py of 16 okay now here this is going to be our our container here and what we want to say we want to give this a max width of 1200 1240 pixels now this is also going to be a grid and we'll say m auto first here and then anything above medium will display grid okay and we'll say grid columns we want three and we want a gap of eight okay grid gap of eight so for this first one this is going to be our text is going to be i'm going to give this class name i'm going to say column span 2 just like that there okay and let's go ahead and add in some var text so we're going to have a p tag here says about let's say about and then this one's going to say p tag who i am okay make that capitalized there we go and so this one's actually going to be an h2 okay then a ptac here and i'm just going to copy that in right here okay and this is just a little quick bio i wrote about myself so no i mean obviously you don't want to copy this in you want to create write your own perfect that's what we want there and we'll copy that in p tag there perfect so let's go and save that so the prettier extension formats that nice and neat for us and now let's open this up scroll down and there we have it and we have our image over here on the right let's just go ahead and throw our image in real quick okay and so and this is going to be our our final little span on the on the on the right there so we're going to use an image here okay and give this an alt tag and i'm actually not going to use the lazing loading images for this and that is because i'm going to use the uh unsplash url external url which you can still do for lazy loading but if you do you're going to have to edit the config file and i don't want to do that in here so um usually if you're going to put you're going to use make this like a little profile or picture you would likely want to uh just import it locally you know for in your in your public assets folder so that is what i'm gonna do right there and um so let's go back and style this thing because that's looking that's perfect that's what we want right there now we just need some styles so i'm going to drop that down right there and for our styling okay so we're going to come to our about right there okay and what we're going to do first is we're going to give this some a give it some padding okay so i'm going to say py4 and i also want this to be uh uppercase be uppercase like that okay and i want to say sorry i don't want the padding before i do want uppercase though uppercase there we go i want to say text text excel okay tracking i want to say widest so it gets nice and spaced out there there you go and i'll say text and then this is going to be our hex code which is 5 6 five one e five i believe perfect there we go now for this h2 tag we're just going to say p y force when you give the padding to that one there okay then this next one we're gonna say p y of two okay then text gray 600 and this is going to give just a little bit of contrast on on the color there so we can actually copy that because it's going to go down to these next ones as well so class name we'll paste that in there this next one as well and then this bottom this bottom one right in there and this one's also going to be a little link so we'll just say underline and then cursor pointer and we'll come back we're not going to make it a link right now we're going to come back for that so next we want to do is add this kind of like this it's hard to see on on smaller screens but we're going to add in this little hover box right so let's do that let's do that right now so we're just going to select that div there surrounding our image okay class name we're going to say width full height auto margin auto and then what we can say is a shadow excel and this is going to be a lot of the same the same uh css we're using throughout the throughout the build right we're gonna keep it nice and consistent rounded excel flex items center and then justify center and we're probably going to give a um a uh play ease in that nice little hover effect so we'll say p4 and then on hover on hover we want to scale we'll say 105 and we can ease in with a duration or duration 300. it's like oh boom hey there we go perfect perfect that's what we want right there um let's give we're gonna have to do a little bit of styling to our actual image tag here okay so class name and for our image here what we're going to do just a minimal styles here uh just rounded so we want that nice rounded edge on it right there okay so rounded excel keep it nice and consistent throughout the build so boom there you go that is our about section very very easy you guys so next let's move on to the skills section boom perfect just like that we're going to have a grid here using four columns here so let's do our skills next all right you guys doing our skills section next so let's go ahead and create our component file in the components folder and that's just going to be skills.jsx rafce get our functional component here and we want to add this back in here okay right so skills go ahead and import that perfect now for our skills basically we're gonna have the grid like i said grid system eight here with all of our skills and these are just the images that we've already imported into our into our public folder here with our assets so again make sure you include these get them from my github i'm going to put in the description below so let's get these on here right now so skills and what i can do perfect so i'm going to drop this down some so for our skills let's have our parent container here we give this class name and we want this to be width full okay then anything above large this time we'll say h screen and then p2 for the padding perfect now this next div is going to be our container okay so i'm going to say i want this to be a max width max width of 1240 pixels perfect we'll say mx auto okay flex flex column justify center and then h full right so height of a hundred percent then next we're going to have to throw in our we're going to do our p tag here so an rp tag is going to be what sorry skills the next is going to be what i can do okay so h2 is going to be what i can do perfect there we go and just below the h2 okay we're going to have a div and this is going to be our grid container okay so i'm going to say class name and this one is going to be grid then anything above medium and by doing this this is going to say grid is automatically going to be one column on small devices and then anything above what we specify which in in this case is the medium we want to say grid columns two and then we'll say anything above large we'll say grid columns four looks like that let's just give this a gap of eight perfect now before i go on i'm just going to style this here so on this p tag here i want to say text excel tracking whitis and this is all the same that we're using throughout the project so tracking widest just like their upper case then text we're going to use our our brackets here that's the hex code 5651e5 i believe so perfect and then this what i can do we can give a little bit of padding we'll say py4 perfect so next what we're going to build out is just our little box right there okay so and everything is going to be 100 responsive there so let's do that right here um so for this grid i'm gonna give it some space in here so we can see we're doing so we're gonna have a div here okay and let's say um class name would say p six right so padding is six which is one point five rim then we'll say shadow xl rounded rounded excel okay a lot of the same stuff here then hover scale 105 okay we'll say ease in and then also a duration of let's do 300 okay so next it's going to have another div here and we're going to have this going to be a grid as well and so grid grid columns 2. there we go gap 4 and then justify justify center and items center okay now inside here was we're going to use our uh image here we're going to put this in a div though div and it's going to be class name margin auto now for our image we're going to use the image tag these will be lazy loaded okay so make sure we import this from next slash image right so we use our image tag here and let's go ahead and add our alt there we'll just close it out now for our source okay for our source we're actually going to use our path here so remember we're going to add a slash right for importing locally so we're going into our public folder then we need to find whoa what happened public folder then we need to find the assets okay and then in here just to open this up so we can see we're going into the assets and then skills okay so skills just like that and then this one is going to be what we have first here it doesn't really matter but i'm going to keep it as html so html just like that dot png perfect and we need to give this a width and height that's what it's asking us for right there so i'm going to say width okay width of we'll say 64 pixels and i'm going to do a height of the same height 64 pixels okay so let's go ahead and save that and see how it's looking perfect that's what we want right there now after this image because we're using um or sorry after this uh dip here so we're using the grid so this is going to be one one section in our grid right so just after that we're going to have a another div here okay and inside here it's going to say we'll say h3 and we already know it's going to be bold right since we added those styles globally and in here what i'm going to say is i'm going to say flex actually that'll probably be fine there i was going to do a little bit extra i think that is going to be good yeah let's just add this in here i'm going to say flex flex column items center then justify center so we can scoot this over a bit i was going to add in some extra stuff right there it's kind of what i was doing when i originally built it but just a standard design work i decided to go against that so that is perfect that's what we want right there now let's go ahead and save this okay and for our let's kind of see here so right here okay this is what we want to be copying down and again i could just kind of kind of extract this and make this into individual components but and just pass down props but i don't really uh care to do that right now so we'll say two three four five six seven eight here and let's see have a look so we should have all eight of these perfect that's what we want right there and so for this next one we're gonna do like this we'll say c whoa okay css okay and this should be css so that which is that change perfect and then what we're gonna do javascript react tailwind okay so this next one we're gonna say javascript and this one i believe it's just javascript there we go and then we're going to do react react and then next one is going to be tailwind and you can interchange these if you know if you have mongodb or what you know whatever skills you have just please add those in and then we're going to say firebase github and shopify some shopify development all right so then we'll say um yeah we'll say uh let's say firebase there we go firebase github and shopify let's see how this is looking perfect that is what we want right there you guys make sure this is what we want yes that is looking good uh oh something's going on there uh looks like my shopify okay let's bring this down this is supposed to say shopify and this one was github right and it says i have the wrong thing sorry github one for some reason i put a one there so github one dot png so let's have a look at that perfect that's what we want right there next up you guys next up our projects nice hover effect uh using the grid here again we're gonna display four projects so let's do that one right now all right so for our projects let's go ahead and create a component here create a component called projects there we go dot jsx now r-a-f-c-e and let's go ahead and import this into our index file here now on our project okay projects on our projects i actually am going to have some individual components in here just to keep things a little bit easier it's a little bit easier to read and follow so but um we're going to get to that in just a second so let's go ahead and in here okay this will be our parent container for our projects so let's just say with a full and that's all we need to do there next we want to add a container okay and we'll say max width so max width of we'll say 1240 pixels there we go i'm going to say mx auto px2 and then py of 16 okay now and then we're going to have our p tag in here and this is going to say projects just like so and then we'll have our h2 that says what i've built there we go perfect and let's do our next div here and this is going to be the container for our actual um products projects itself so give this class name and this is going to say sorry it's going to be a grid here grid then anything above medium because again on small devices we just want to have one column then anything above medium we'll say grid columns 2 just like that with a gap of 8 okay so let's go ahead and save this here and let's style up these projects here and this is going to be the same what we've done in the past year so class name where we say um text we want text to be excel tracking widest okay and then we'll say uppercase and then text is going to be that five six it's a hex code here five six five one e5 perfect just like that now for our h2 let's say class name and let's just say py4 just like so perfect now um we've already imported this here and this is perfect this is what we want right here and what i'm going to do i'm just going to go ahead and build out the project i'm just going to call it a project item and then we'll kind of destructure it and kind of break it up into a smaller component here in just a minute so let's create our div right here and this is going to be the parent container right for our project item component and so what we want to say over here this is going to be a relative okay we want this light relative because ramp and overlay and hover functions and stuff like that so relative we're going to say flex flex items center okay justify sender and we'll say height auto with full shadow of xl shadow [Music] shadow gray 400 perfect just like that and then we're also going to want this to be rounded and we're going to do our um oh we're gonna say rounded and we want to have our a gradient again if you remember how we did that so rounded xl p p four perfect and then what we're gonna do uh we're actually gonna have a group okay let's just say group and i'll show you what we're going to do with that here in a minute then on hover we want the bg gradient to to right okay so right there we go from and this is just like we did on our buttons okay so in our global style sheet so from and we'll say f uh f sorry 5 6 5 1 e5 okay from two and then that's going to be our other hex code which is let's see 709 dff perfect let's go ahead and save that i know it's kind of jumping off the screen here so i'm just going to open this up if you guys need to see all of that oh it's kind of long there so relative flex item center justify center height of auto with full shadow xl shadow gray 400 this is our shadow color rounded xl so we have nice rounded edges okay group and i'll show you why we're going to do that padding 4 by the way then hover there's our bg dash gradient dash 2-r so it's from left to right so from this color here go into this color over here so hope that makes sense there let's kind of see where we're going at here so and in here what we're going to say after after this that parent container here this is going to be our image okay so image boom there we go import next image okay source there we go and we're actually going to import this image i'm going to show you how we do it that way alt this is going to be a self closing tag perfect so this is going to be our background image but we're going to pass through some props so for now i'm just going to say we're going to import this right import and we'll say proper t and img just say property img from we're going into our public folder here we go into the assets folder and this time we're going to go into our projects and i believe this is just called property.jpg and we'll plug this in here property image see if this is a there we go and you guys whenever we're importing like so we do not have to add the the height and width property so if you're wondering about that perfect there and um so whenever we hover we get this nice um this nice overlay however um that's not quite exactly what we want because we want it to we want that image to kind of be behind the overlay and we're going to use opacity for that and that is the reason why we use that group class name in there the group and that parent diff so for this image it's going to be really easy we're going to give it a class name we want the rounded xl first of all so we get those nice rounded corners that you see there and then what we're going to say we're going to use our group selector right so ungroup dash hover we're going to set this opacity and i'm just going to change that to a 10. so let's see how that works boom there you go so what this saying what the group is we can actually group html elements together so whenever we hover on this we can just say group hover opacity 10 and you can use that not just for hover but also other selectors as well so that is perfect what we want right there now we just want our text to display over that okay so let's do that next and this is why we use the relative in here as well so just below this image we're going to have another div here and what we're going to have inside this div is an h3 and this h3 is going to have a title which i would say property um i know you know what i call it probably property finder doesn't really matter property we'll say property finder there we go and then just below the h3 we'll have a p tag this is a racked js project here and we'll have a link because we're gonna have a link okay href and i'm just gonna leave that as a slash for now okay and we're gonna say p more info link is not defined we need to import that from next link okay because remember uh nexjs is handling all of our routing so perfect that's what we want right there let's go ahead and give this div some class so it displays properly so for this different say um basically you want to say hidden okay then group whenever we hover whenever we hover we're going to display block okay so this should still probably be off to the side boom there we go but that's what we want okay so next what we want to say is absolute okay one top fifty percent well top fifty percent left fifty percent and then we can say translate x negative negative 50 percent i want to say translate the same thing translate y negative 50 and all this is you guys right here is just how we're centering stuff uh an absolute element so that's how we center absolute elements with tailwind there we go so in here in our h3 let's give this a class name here boom there we go class name we want to say text 2xl um we already have the font bold right so let's say text white tracking wider there we go and text center just like so there we go perfect perfect now for our react js rp tag here we'll say class name and this is going to be uh padding bottom of 4 which is one rim padding top of 2.5 rim text y and then text center okay now for this p tag in here it's actually going to look kind of like a like style kind of similar to a button okay so we'll say text center p p3 okay rounded large bg bg white text gray 700 font bold text large okay then cursor pointer let's see how that looks you guys boom that is looking good right there let's open this up that is going to be perfect right there awesome so next um let's go ahead and just break this down a little bit i'm going to open this up so you can see a little bit better here so we have some more room so what i want to do is just break this down right and in here we're going to make this its very own component right so open up my side menu here so what i'm going to do is create another component in here and i'm going to call this project item dot jsx okay r-a-f-c-e now let's go back to our project and i'm just gonna cut this out right so i'm gonna give this some space so we can actually see where it's at just so there's soap just so there is no confusion right so we're gonna cut that and replace that project item import that just like so and in here we're just going to paste that right there okay so we're going to be passing through some images or so sorry image yes we're going to pass through some properties here so let's go ahead and save that and for this what we're going to say we're going to want to have a a title and probably a image so i'm going to say a title okay and for our title we're actually going to use that it's going to be a string property property finder just like that and also we're going to want to have a background and this is just naming properties right here that we're going to pass down so you can actually name these whatever you'd like it doesn't really matter and this is we're going to pass through our image so for this one is going to be property image right and then we're going to have a project u rl and here we're just going to say slash property and we're going to create this route here in a little bit so let's go in here i'm going to go and save that so formats nice and neat for us in fact let's just go ahead and copy this down a couple times so we get all our projects in here so this next one we what we want to have is uh i'm gonna say uh crypto app there we go and i'm gonna want to add in bring in our other links here right so let's import uh crypto img right from [Music] public then we're looking for the assets and then projects and toe.jpg and i'm actually going to copy that down a couple times here just to make it easy here and this one is going to be netflix img from netflix and this one's going to be twitch image there we go okay so now we should be able to pass these in here um property image and the next one is going to be the crypto crypto image this one's going to be the netflix image there we go and this one's going to be twitch image okay perfect so getting some errors there that's cool a property image is not fine so what we need to do is go in here and basically accept these as properties right so and i'm going to go ahead and destructure this that way we don't have to say you know props.this props.that so what we bring in is the title right background image then also the project url perfect now in here what we can say instead of just saying back um property image we just want the background background img like that and then where is our title so in here instead of property finder let's delete that we'll put this in curly brackets title bring just bring it in the title that we're going to pass it then we're going to bring in the uh we're they're all built in react.js so we'll just leave that like so um but on this p tag more info we're gonna surround this in a link here and right here instead of the uh instead of that link there um let's get rid of that and in here well i need one equals we'll just pass in the project url okay so that is perfect right there link is not defined let's go ahead and import that and this will actually be linking to another spot on the page or another route so import this as well next image there we go let's see if we have any more errors and let's see what we're doing here boom there we go oh let's open this up you guys boom there we go so make sure this is looking how we want it to look and don't worry about this we're going to fix that little overlay you guys so don't worry about that but check this out you guys boom have all our images this is going to route to um these are going to route to the specific pages that's what we're going to do here in a little bit but first we're going to finish this up looking good you guys smash the like button you're getting some value out of this next what we're going to do is our our contact section down here okay so if you're ready to get started let's move on to that one next all right guys next up is our content component right the last component of our home page before we move on to the routes okay so let's go into our components folder and let's create a new component here and i'm going to call this contact.jsx okay rfce is going to get our functional component and let's just go ahead and import this contact boom there we go and it's imported right there perfect so for our contact component here we're gonna have a class name this is gonna be width full right then anything above large we wanna do the h dash screen okay make sure you have the large um midi query selector on there as well okay so div here this is going to be our our uh like our container so we're gonna have a max width of we'll say 1240 pixels margin auto i want to say px py of 16 width width of full and that should be good right there now in here we're going to have a p tag okay and this is just going to say contact and then under here h2 and let's say get in touch perfect okay now let's style this this p tag okay this p tag is gonna be text excel tracking widest uppercase just like we've done on all the others and then text we'll use that kind of bluish purple color so that's going to be the 5 6 5 1 e5 perfect and this h2 will give the padding in there so class name and we'll just say py4 okay so let's go ahead and save that next we're going to have this div here is going to be defining our grid system right so grid and then what we're going to say here is anything above large when the grid calms to be a five and then a gap of eight okay and in here we're going to have a a left and then a right just going to make some notes here and then on this left side okay on this left side div what we're going to have here is a div this would be a class name okay we're going to do some media queries right have to buy it so call them span 3 and then anything above large we want to say call span 2 okay width full height full shadow xl shadow gray 400 and then rounded xl and p-4 okay perfect now in here we're going to have our another div and that div is going to be class name anything above large we want a p 4 and then also just a h h full for height 100 percent there we go now in here we're going to have another diff it's going to be in no class name it's going to be holding our image and we're not going to be using the lazy loading images um for this yet so let's go ahead and give this class name we just rounded uh x l and then we'll give it a see hover scale we'll say 105 and then ease in ease in and then the duration of 300 okay now i'm not using the lazy little image because i'm going to import this uh from unsplash so i'm going to paste in all i did was just paste in my string there so if you want to import this or uh use a local image you just upload it into your public assets folder that probably be the best way to go so but for the sake of this tutorial i'm just importing it from uh from unsplash there so we should see our image there with a nice hover effect and we have our um our padding container on the bottom so i want this actually be rounded though so so this is going to be our large full h full this is gonna say rounded i believe here so rounded xl let's see how that is oh sorry this one right here round it i just misspelled it round it there we go this is wrong spot so everything looks good perfect that's what's up right there let's open this up looking good smash the like button if you feel like you're getting value out of this it's looking good so let's add in the text below that okay so i'm just going to shrink that back down there we go you can see what we're doing over here and i know this is kind of overlapping a little bit don't worry about it we're going to come back and fix that after we finish up this contact section so just below that div there we're still staying just outside of the image container right this little image container here and what we're going to say we're going to have another diff and we're going to have in there and h2 okay and it's just going to say name here it's going to be your name right we'll give that a class name py2 okay and then just under there it's going to be front and developer okay and then we're going to have another p tag that says i am i'm just going to copy it so i have to type as much there we go perfect and let's just paste that in boom there we go looks nice and let's give that some styling here so class name py4 that is looking good so far you guys looking good so just below that div okay um whoops there we go sorry at the very bottom but still inside this this left side okay still remaining inside here what we want to do is create another div and in here let's go down some so we can see in here is where we're going to put this connect with me and then our social icons okay so in this diff we're going to have a ptag and it's going to say connect with me there we go uh actually we're just gonna leave that uppercase so doesn't really matter uppercase padding top eight perfect there we go now we want a div and this is going to hold all of our icons right so let's just go into our uh we'll search up our main here okay and i'm gonna just grab all this right here right there i'm just gonna grab that and then come back in here and paste it and then for this class name okay this is right here where i'm typing don't worry about these errors this is what i'm typing is like the container of the um of that hold on to the icons so flex items center justify between and then we'll say py4 let's see if we if that works so we have to import these icons here so fa linkedin let's go and bring these in import fa linkedin from rect icons fa perfect and then what else we're bringing in here this one should be able to auto import right and i just hit the control spacebar import that this one i don't think hey yeah we can perfect so let's just auto import all these perfect now let's see if we have any errors no come down to the bottom here and that's kind of what we want uh outside of our div here so that means probably just need to shift this up one so this right here make sure i click select the right ones let's just go up one tick hey there we go perfect that is what we want right there okay so let's knock out this right side of um the right side of our form we're actually where our form is okay so we're going to knock out this part right here that is looking clean too looking nice have a nice scroll to the top button there and we're gonna add in the react scroll or sorry the the scrolling here and react at the very end but not a package we're gonna do this uh really easily without that so let's look under here we're on our right side we'll go ahead and save it so it gets nice and formatted okay so on our right side what we're going to do bring this up to the top let's create our div here okay and this div class name we'll say call column span and this one we went to span three right width full height auto shadow xl shadow gray 400 and then rounded excel if we can spell that as rounded xl and then large anything a bunch of large let's say p four padding four right cool so another diff and this one's just gonna be class name that's not what we want p4 cool and then in here our form get a nice and format in here let's say form okay and don't worry about that action we're not not going to need any of that so in here form let's have a div and we'll give this a class name of c grid anything above medium okay we'll say grid grid columns two gap four and then width full p y two perfect perfect okay now in here within this diff we have another div it's going to be a class name it's going to be flex here flex column and in here we're going to have a label in our input okay so label and don't worry about this html4 we're not going to use any of that even if we do actually make this form functional so you can actually users could submit or potential employers could submit queries into our portfolio here so we're say label and in here we're going to say name and we'll say class name for the label it's going to say uppercase text small there we go then py2 perfect okay now for our input and this is going to be type text scroll down we can see i already passed it input text see if that works perfect no name no id don't need any of that there perfect we're going to use a placeholder though or sorry no placeholder but let's give it a class name and we'll do that at the beginning so class name for input let's say border dash two okay rounded lg p3 flex and then border gray 300. let's see how it's looking here yeah not bad yeah there we go perfect that looks good that looks good so that's what we want there you guys let's go ahead and save this and i'm just going to grab this right here okay this flex flex column i'm going to select that and just copy it down okay i think that's what we need to do there and and this is going to be the phone number phone number then everything else is going to stay stand on one line and we shrink this down you guys it's all going to be just going to go to one line but for the name and phone number it's going to be on separate lines for now so name this one's going to be number there we go we'll say phone number and this one i'm going to leave this type as text for now perfect that's what we want there now just below this phone number you guys there we go but it's still within the form okay still within the form what we're going to do next is our email div okay and then so let's create another div and this is just going to hold our label as well and you know let's just copy this because it's going to be the same same label but we're going to whoops there we go same label here but instead it's going to say email okay and we're going to have input and i'm just going to copy over our input as well and then we can just change type to email there we go perfect now we're going to change up um gingival flex here so for this div okay that's surrounding the email we want that to span the entire the entire width of the screen right so flex flex home let's say flex flex calm py too okay boom there we go looking nice okay so next after the email okay now the email we're gonna have subject and then also magic the message as well so let's just copy that right there just copy it down boom and this is going to be subject and we'll just change this type back to text okay then next what we're going to have is the actual message area okay so i'm going to just we'll just copy that down once more okay and then we'll say message and then instead of the input what we actually want to have is text area okay now let's delete the id and the name we're not going to need any of that and the columns and rows we're not going to need any of that as well but we are going to want to have a class name we'll say border border 2 rounded large p p 3 then border gray 300 okay now we end up let's add in um let's see we'll add in back in the the rows here so we'll say rows 10 there we go i think that will be good now let's see how this looks boom guys that is how quick you can style a form using tailwind css okay so look at that right there smash that like button if you feel like you're getting some value out of this guy smash the like button if you like you're getting some value let's add in our uh button right there okay so we need to add in our send message button nice hover effect okay so let's add in our button right now i'm gonna drop that down so for our button okay for our buttons go right at the bottom but still within our form okay so it needs to go within our form and we're just gonna say button um we'll say send message there we go and you guys whenever you use the button you should already have the base styles but we did our global styles you should already have that background radiant from left to right okay and you already have that text uppercase stuff like that so now all we have to say in here is just a few things with full okay then that's going to spread it across the screen p4 give a little bit of padding there you go and we'll just say text gray 100. there we go you guys that should be it right text grade 100 with four let's say matt margin top margin on top give it a little margin there we go perfect that's what we want right there so after this form okay we're going to go down within our container still and here we want to add a uh a link right so we're gonna have this scroll to top button so what we're gonna do is add just add another div okay then in here we're gonna have a link that's gonna have our href right and we're gonna have that like just like so for now okay then in here we're gonna have another div and then we're gonna have our icon and our icon is actually i'm gonna just copy it over here it's one we haven't used yet in this project hi outline chevron double up okay so let's go ahead and import from react icons do you know what this is going to be after slash okay hi there you go so we need to import the link okay so let's go ahead and do that perfect there we go let's see how it looks perfect so let's go ahead and install this thing so for the div just outside the links what we're going to install first okay so we'll say flex justify center then p y 12 so we get some nice little padding that should pop it right there in the middle and next what we're going to want to do is this div right here just surrounding this is going to be our we can actually probably just copy it from one of our last name let's just grab that whole thing right there and we may want to just bump that up a little bit make it a little bit bigger let's see yeah that looks good right there actually so perfect that's what we want but you know what let's drop this down because i'm going to make the size bigger on this icon so that's going to look a little bit smaller that's okay but we're going to do here come back in here we're going to use the size property okay this is a size property of react icons i'm going to say 30 and then let's give this thing a class as well so for a class name it's going to be let's see here margin auto probably don't even need that text let's just give it that text color actually so text and this is going to be 5651e5 boom there you go that is looking good you guys so next what i want to do is go ahead and i'm going to go ahead and get the the smooth scrolling set up okay so we're gonna do that next and then we're gonna come back and do our route so whenever we click on a um our link you see it takes us to the page but it says product this page cannot be found so let's go ahead and take care of that right now all right guys next up is our content component right the last component of our home page before we move on to the routes okay so let's go into our components folder and let's create a new component here and i'm going to call this contact.jsx okay rfc it's gonna get our functional component and let's just go ahead and import this contact boom there we go and it's imported right there perfect so for our contact component here we're gonna have a class name this is gonna be width full right then anything above large we want to do the h dash screen okay make sure you have the large um midi query selector on there as well okay so div here this is going to be our our uh like our container so we're going to have a max width of we'll say 1240 pixels margin auto i want to say px2 py of 16 width width of full and that should be good right there now in here we're gonna have a p tag okay and this is just gonna say contact and then under here h2 and let's say get in touch perfect okay now let's style this this p tag okay this p tag is gonna be text excel tracking widest um uppercase just like we've done on all the others and then text we'll use that kind of bluish purple color so that's gonna be the 5 6 5 1 e5 perfect and this h2 will give the padding in there so class name and we'll just say py 4 okay so let's go ahead and save that next we're going to have this div here is going to be defining our grid system right so grid and then what we're going to say here is anything above large when the grid comes to be a five and then a gap of eight okay and in here we're gonna have a left and then right just going to make some notes here and then on this left side okay on this left side div what we're going to have here is a div this would be a class name okay we're going to do some media queries we have to buy it so call them span 3 and then anything above large we want to say call span 2 okay width full height full shadow xl shadow gray 400 and then rounded xl and p-4 okay perfect now in here we're going to have our another div and that div is going to be class name anything above large one a p-4 and then also just uh h h full for height 100 there we go now in here we're gonna have another diff it's gonna be in no class name it's gonna be holding our image and we're not gonna be using the lazy loading images um for this yet so let's go ahead and give this class name just rounded uh x l and then we'll give it a see hover scale we'll say 105 and then ease in ease in and then the duration of 300 okay now i'm not using the lazy little image because i'm going to import this uh from unsplash so i'm going to paste in all i did was just paste in my string there so if you want to import this or use local image you just upload it into your public assets folder that'd probably be the best way to go so but for the sake of this tutorial i'm just importing it from from unsplash there so we should see our image there with a nice hover effect and we have our our padding container on the bottom so i want this to actually be rounded though so so this is going to be our um large full h4 this is going to say rounded i believe here so rounded xl let's see how that is oh sorry this one right here rounded i just misspelled it rounded there we go there's the wrong spot so everything looks good perfect that's what's up right there let's open this up looking good smash the like button if you feel like you're getting value out of this it's looking good so let's add in the text below that okay so i'm just going to shrink that back down there we go you can see what we're doing over here and i know this is kind of overlapping a little bit don't worry about it we're going to come back and fix that after we finish up this contact section so just below that div there we're still staying just outside of the image container right this little image container here and what we're going to say we're going to have another diff and we're going to have in there and h2 okay and this is going to say name here it's going to be your name right we'll give that a class name py2 okay and then just under there it's going to be front and developer okay and then we're gonna have another p tag that says i am i'm just gonna copy it so i have to type as much there we go perfect and let's just paste that in boom there we go looks nice and let's give that some styling here so class name py4 that is looking good so far you guys looking good so just below that div okay um whoops there we go sorry at the very bottom but still inside this this left side okay still remaining inside here what we want to do is create another div and in here let's go down so we can see in here is where we're going to put this connect with me and then our social icons okay so in this diff we're gonna have a p tag and it's gonna say connect with me there we go uh actually we're just gonna leave that uppercase so doesn't really matter uppercase padding top eight perfect there we go now we want a div and this is going to hold all of our icons right so let's just go into our uh we'll search up our main here okay and i'm gonna just grab all this right here right there i'm just going to grab that and then come back in here and paste it and then for this class name okay this is right here where i'm typing don't worry about these errors this is where i'm typing is like the container of the um of the hold on to the icons so flex items center justify between and then we'll say um py4 let's see if we if that works so that we have to import these icons here um so fa linkedin let's go and bring these in import fa linkedin from icons slash fa perfect and then what else we're bringing in here this one should be able to auto import right and i just hit the control spacebar import that this one i don't think hey yeah we can perfect so let's just auto import all these perfect now let's see if we have any errors no come down to the bottom here and that's kind of what we want outside of our div here so that means probably just need to shift this up one so this right here make sure i cl select the right ones let's just go up one tick hey there we go perfect that is what we want right there okay so let's knock out this right side of um the right side of our form we're actually where our form is okay so we're going to knock out this part right here that is looking clean too looking nice have a nice scroll to the top button there and we're going to add in the react scroll or sorry the the scrolling here and react at the very end but not a package we're going to do this uh really easily without that so let's look under here we're on our right side we'll go and save it so it gets nice and formatted okay so on our right side what we're gonna do bring this up to the top let's create our div here okay and this div class name we'll say call column span and this one we went to span three right width full height auto shadow xl shadow gray 400 and then rounded excel if i can spell that as rounded xl and then large anything a bunch of large let's say p4 padding 4 right cool so another diff and this one's just going to be class name that's not what we want p4 cool and then in here our form get it nice and formatted in here let's say form okay and don't worry about that action we're not going to need any of that so in here form let's have a div and we'll give this a class name of c grid anything above medium okay we'll say grid grid columns 2 gap four and then width full p y two perfect perfect okay now in here within this diff we have another diff it's gonna be a class name it's gonna be flex here flex calm and in here we're going to have a label in our input okay so label and don't worry about this html4 we're not going to use any of that even if we do actually make this form functional so you can actually users could submit or potential employers could submit queries into our portfolio here so we'll say label and in here we're going to say name and we'll say class name for the label it's going to say uppercase text small there we go then py2 perfect okay now for our input and this is going to be type text scroll down we can see i already passed it input text see if that works perfect no name no id don't need any of that there perfect we're going to use a placeholder though or sorry no placeholder but let's give it a class name and we'll do that at the beginning so class name for input let's say border dash 2 okay rounded lg p3 flex and then border gray 300 let's see how it's looking here yeah not bad yeah there we go perfect that looks good that looks good so that's what we want there you guys let's go ahead and save this um and i'm just gonna grab this right here okay this flex flex column i'm gonna select that and just copy it down okay i think that's what we need to do there and this is going to be the phone number phone number then everything else is going to stand on one line and we shrink this down you guys it's all going to be just going to go one line but for the name and phone number it's going to be on separate lines for now so name this one's going to be number there we go we'll say phone number and this one i'm going to leave this type as text for now perfect that's what we want there now just below this phone number you guys there we go but it's still within the form okay still within the form what we're going to do next is our email div okay and then so let's create another div and this is just going to hold our label as well and you know let's just copy this because it's going to be the same same label but we're going to whoops there we go same label here but instead it's going to say email okay and we're going to have input and i'm just going to copy over our input as well and then we can just change type to email there we go perfect now we're going to change up um gingerbread flex here so for this div okay that's surrounding the email we want that to span the entire the entire width of the screen right so flex flex home let's say flex flex calm py too okay boom there we go looking nice okay so next after the email okay next email we're gonna have subject and then also magic the message as well so let's just copy that right there just copy it down boom and this is going to be subject and we'll just change this type back to text okay then next what we're going to have is the actual message area okay so i'm gonna just we'll just copy that down once more okay and then we'll say message and then instead of the input what we actually want to have is text area okay now let's delete the id in the name we're not going to need any of that and the columns and rows we're not going to need any of that as well but we are going to want to have a class name we'll say border border to rounded large p p three then border gray three hundred okay now we end up let's add in um let's see we'll add in back in the the rows here so we'll say rows 10 there we go i think that will be good now let's see how this looks boom guys that is how quick you can style a form using tailwind css okay so look at that right there smash that like button if you feel like you're getting some value out of this guy smash that like button if you like you get into value let's add in our button right there okay so we need to add in our send message button nice hover effect okay so let's add in our button right now i'm gonna drop that down so for our button okay for our buttons go right at the bottom but still within our form okay so it needs to go within our form and we're just gonna say button um we'll say send message there we go and you guys when whenever you use a button you should already have the base styles when we did our global styles you should already have that background radiant from left to right okay and you already have that text upper case stuff like that so now all we have to say in here is just a few things with full okay then that's going to spread it across the screen p4 give a little bit of padding there you go and we'll just say text gray 100. there we go you guys that should be it right text grade 100 with four let's say margin top margin on top give it a little margin there we go perfect that's what we want right there so after this form okay we're gonna go down within our container still and here we want to add a uh a link right so we're gonna have this scroll to top button so what we're to do is add just add another div okay then in here we're going to have a link that's going to have our href right and we're going to have that like just like so for now okay then in here we're going to have another div and then we're going to have our icon and our icon is actually i'm going to just copy it over here it's one we haven't used yet in this project hi outline chevron double up okay so let's go ahead and import from react icons do you know what this is going to be after a slash okay hi there you go so we need to import the link okay so let's go ahead and do that perfect there we go let's see how it looks perfect so let's go ahead and install this thing so for the div just outside the links what we're going to install first okay so we'll say flex justify center then py12 so we get some nice little padding that should pop it right there in the middle and next what we're going to want to do is this div right here just surrounding this is going to be our we can actually probably just copy it from one of our last name let's just grab that whole thing right there and we may want to just bump that up a little bit make it a little bit bigger let's see yeah that looks good right there actually so perfect that's what we want but you know what let's drop this down because i'm going to make the size bigger um on this icon so that's going to look a little bit smaller that's okay but we're going to do here come back in here we're going to use the size property okay this is the size property of react icons i'm just going to say 30 and then let's give this thing a class as well so for our class name it's going to be let's see here margin auto i probably don't even need that text let's just give it that text color actually so text and this is going to be 5651e5 boom there you go that is looking good you guys are you guys so next up what i want to take care of is the smooth scrolling and i also want to take care of this shadow and the nav bar right so initially i do not want there to be a shadow i only want the shadow to appear whenever we scroll okay just like that so let's go back into our code editor okay and what i want to do is we're going to add some more state right for our shadow so i'm going to say const and i'll say shadow and set shadow just like that there we go and that's going to be equal to use state okay and i'm going to leave it to false by default value now next we're going to use the use effect hook okay so let's just go ahead and import that use effect just like that okay so what i'm going to say use effect okay this is going to take in an arrow function and actually only want this to run one time when the component mounts okay so we're going to pass in an empty array empty dependency array and in here we have a function i'm going to call it handle shadow call it whatever you like there handle shadow it's just going to be an arrow function okay now in here we're going to have some logic and basically if what we want to say is if window dot scroll y okay this means uppercase there window got scroll y is greater than or equal to 90 90 pixels right what we want to do is just set that shadow set shadow to true right here okay else if it's not right we'll just say set shadow set shadow false then just just down here just above our expensive right here what we want to have is a window.add event listener okay and we're looking for scroll and then whenever whenever we do this we want to run our handle shadow function there we go so that's all we need to do for for our logic right but now we need to just change up our uh our styling right so let's just go and select that okay i'm just going to cut it out and let's just replace this with some brackets so we can write our javascript right and so what we're looking for is our state right so if shadow is true which by default it's false right it's true we want to show our shadow else just using our ternary operator here but we need to put this in quotes and we'll just get rid of the shadow so let's see how that works we should have no shadow then once we scroll there goes our shadow perfect that's what we want right there and again don't worry about this background we're gonna come back and change that okay so don't worry about that and i'm leaving it like that intentionally sorry so i'm gonna show you what we're gonna do here next but uh next i would like to do the uh the smooth scrolling right okay so let's take care of this smooth scrolling here and react okay and what we need to do here let's just go into let's see our global css okay and what i want to say here we'll say this is only like one line of html we're actually going to write right so um we'll say scroll behavior change that smooth okay now what we want to do here is go into our components i'll just start here top down so for about we need to give this an id just like that and this is going to be about and our contact let's go into the top here give this an id what's going on there i just jack that one up okay id and this is contact right and then main okay id i'm just gonna say home on this one okay so we're gonna skip the navbar project item forget that one for projects we'll do this one okay so id projects and then our skills id skulls okay now let's go back into our nav bar now bar and i'm just going to close others okay so like to keep things nice and neat right so in here we'll say home right um [Music] for this one this about let's give this an about like there and i'm just gonna do this one be skills this one's going to be projects right of course and contact so let's see if this works we haven't done this on our mobile menu yet so skills boom there we go all right projects there we go contact looking good smash the like button you guys smash that like button if you feel like you're getting value out of this cool there we go and also i'm going to put this this link tag here our image i'm just going to surround this and a link href and i'm just going to say two oh there we go perfect there we go and we'll just bump this up okay i'm just going to hold the alt button option if you're on the back boom slide that up that is looking good right there you guys so next that is our smooth scrolling oh you know what we forgot our button here at the bottom oh hey there we go perfect we already set it up all right so next what i want to do is uh so we're going to add our routes okay so we talked about this in xjs we don't have to worry about the rack router dom or anything like that browser router none of that okay so what we're going to do what we're going to do is just to create our route right is just create a new file in our pages and that's all you need to do okay so what i want to do for this for this project i'm going to have four additional pages right so and that's gonna be my four projects so i'm gonna have the property page this crypto page netflix page and then also uh twitch page okay so let's go in here and to our uh pages folder right i'm going to create a new file and i'm going to call this property dot jsx okay just like that r-a-f-c-e okay it's going to generate our functional component and now what we're going to do here basically we're going to build out our just build out our page right and we're not going to be passing through properties or anything like that so it's going to be pretty easy right and so now let's go into our let's just go into our projects real quick right or sorry project uh projects yeah that's what i want to do and in here property okay and that's our project url so now that we created our property route in there we should be able we actually don't even need that to be open we should be able and real quick before i forget these aren't going to work properly right because we need to go back and add those in and we also want this bar to close but real quick i just want to show you once we click on this url we're already passing the property it should take us to a property page but we're going to get um there we go just an empty property right there okay that is all you need to do that's how easy it is to create a route in nextgs so but like i said before i forget uh let's look at our mobile menu here okay i'm gonna drop that down and on our mobile menu a couple problems i saw here uh when i click on projects done scroll down to projects nor contact nor does this does this drawer close so let's go ahead and take care of that we'll come back to that minute so in our navbar let's go down here and basically we're going to do the same thing for our mobile menu down here is our mobile menu okay and again let's just we'll wrap this as well link href put this our home page and we'll just throw our image in there again boom there we go all right perfect perfect okay no errors now for our home here we go so for our home we just want to say home we'll keep that like so now for about let's add in our about and we'll do our skills okay and projects and contacts so we'll make sure that works right okay and let's see boom there you go so you can see it's scrolling the back but our menu doesn't close that's kind of a pain right so let's go ahead and fix that and what we're going to do on this list item here we're just going to add a uh arrow function right so but what i'm going to do it's an on click event right i'm going to click on this alt button because i don't want to do this five times okay so that way what we could say unclick instead of passing in a function what i'm going to do is just pass in this arrow function right instead of calling a function up top we're going to pass in an arrow function okay and what all i want to say is set nav right and the nav where we're getting this right is our nav that we're this is what we're our state right for a nav set nav for toggle and navbar so all we want to do is set nav to false and we don't have to use a the logical um operator here all we have to do is set false because we never want to open this once it's already open right so let's click close let's see now this should scroll us up to the top and close the menu and there you go looking good you guys again smash the like button if you feel like you're getting value out of this okay so now that we have that fixed up that's just looking good okay all right now that we have that working you guys um and just real quick a real quick tip okay um so we're using this link tag right for uh for a routing if you want to use some external links you can just use the standard a tag just like that if you want to link this to link the icons to like your own linkedin or github or anything like that okay so all right now that we have that out of the way what are we doing next here our property our pages okay so for our pages here i'm just going to design this page and what we're doing here let's scroll down use our functionality here scroll down to our projects and this is what we're doing right here boom this is what we're going to be designing right now it's actually quite simple it's not going to be a whole lot of code and then we'll just basically copy and paste it for our other projects okay so in here i'm going to have a this day up here give it a class name it's gonna say width full okay and that's it there now this next div i'm gonna give this a class name and i'm gonna say width screen so 100 viewport widths okay and then we're going to say height for the height i'm going to say 30 vh okay 30 then anything above large one let's say width is now what might you say 40 vh perfect okay and then we want this to be relative okay and also i don't know if you noticed this but we don't have a background on our nav bar and back here we're going to actually set a background to our nav bar so right now it's still transparent which is going to work fine on our property page again if we go to property it's gonna look fine but we want to uh what's going on oh we don't have anything in here right now so that should be seeing there so that is what we're gonna do that is uh another little challenge that we're gonna face in here so i'm going to show you how to fix that so all right and in here what we want to have is our overlay okay so we'll say div and this one's going to be class name of absolute we want top 0 left left 0 width is going to be full left out the w there that width is going to be full now height right for height we want it to be a 30 if you pour height right then anything above large we want the the height to be 40 vh just like we did right here okay and let's give it the background bg black and then use our slash here so we can use the opacity of 80 and then z10 so we now should see that perfect and this can actually be a self-closing deal we don't need to to close out because we're not going to put anything in there since it's absolute right and uh we should see our nav bar here um the reason i think i put it in our index folder so let's go whoops we'll need to print that control p over here index there we go and so our navbar we can actually cut that out of here because we don't want this just on our home page right but on all our pages so let's go in here to our app.js and this is similar to the index.js and just plain react okay so what we want to do here instead of this returning that we're going to return fragment and in here we can return the or sorry we want the nav bar okay go ahead and import that and we want this to go just like so now go ahead and paste that that's what we want there make sure you have these uh the the parentheses around there so perfect there you go and we should have this sorry if we go back to homepage it should be there as well perfect already so let's go back to our property page right so projects we're just going to our property page perfect and we can close that we can close that index.js so inside here we're going to want our image right so image image there okay alt leave that in there and for our image i'm going to give this a source here and for this source we're actually going to bring in property image right property img like that so we need to bring this in at the top right so property image import i'm just going to call this property image from and where we go on our public folder and we're looking for our assets and then our projects okay and we're looking for the this one's property dot jpg okay perform full refresh should just be able to refresh that and image is not defined we're using the next image okay so make sure you import next image and we're gonna give to give this some class name but that is looking good right there you guys boom there you go let's just give it some class okay so class name right there and what we're gonna say is the ab salute and z-1 and what we're also going to say here is this is where we're going to use layout fill okay and then object fit sorry camel case here object fit and we want that to be cover that way it'll maintain our aspect ratio there you go perfect now it always maintains our aspect ratio except what is going on with that right there hmm so this right here i said width needs to be height there you go all right sorry about you guys and also so you can see our links there okay we want those to be white and again we don't want those to be white when we're on this page here so we're going to toggle that so don't worry about that right now you guys don't worry about that we're going to come back and fix that promise you okay so underneath this image right self-closing image there underneath that image what we want to do is create a div and inside this div so next what we're doing so we can see what we're doing here next what we're going to do is this roller here and have this position absolutely right on top of our image okay so div and let's just go ahead and say for this we wanna h2 okay and it's gonna say property finder and these are hard coded we're not passing any properties in here okay and then also h3 so we just have it nice and bold react js we'll say tailwind and firebase and if you want me to build this actual property finder you guys i'll show you how i built it um so if you want to see that just let me know in the in the comments so let's go ahead and position this right so we can so you can see we're let's go ahead and give this some styles so class name two or say py2 okay and then nothing on the bottom there so we're already bold and for this i'm going to give it the class name and we want absolute okay top what we want to say is top we'll say 70 percent okay max with and give a little container around it just like everything else so it matches and we'll say with full left whoa left 50 percent right 50 and then we'll say translate translate x negative 50 and then we'll say i'm going to shrink this down again there we go there we go okay then also we're going to say translate y this is going to be negative 50 okay so let's go to refresh that should be good there hey there you go look at that and when we get open it should hit there you go it stays within our container and the navbar we didn't place that inside a container okay so that's why it goes i want that display further out so that is what we want right there you guys looking good uh probably just add in a uh text white there you want that to be white hey oh we need to add a z index to that probably too um so it's poking out down a little bit low so uh let's say let's say z10 and get a little padding too and there we go look at that look man that looks good smash like about you guys i know you like it smash like button so next what we're going to do here uh so let's do get underneath here we're going to go um below this div right so this right here is our absolutely positioned div there so the next what we're going to do next div here and we're going to place this inside of our this can be like container div right so class name we'll say max with 1240 pixels there we go and we'll say mx auto p 2 grid medium we want to say grid call whoa grid columns five okay perfect gap of eight and padding top eight perfect there you go now for here div and we're gonna say column span four there we go now for our text i'm gonna save that for our text okay p tag and what we're doing here is this project then the overview okay so p tag here i want to say project okay project and then we have our h2 it's just going to say overview perfect and then our p tag just below that and i'm just going to copy in this just a little excerpt i wrote about this project so if you want to read it feel free it's kind of i think it's a good idea whenever you build a project it's good to kind of list out some things you can list out why you enjoy doing it why you chose that project what you learned in that project any obstacles you had to overcome like programming wise so very very good idea to add that in there in my opinion so next we're going to have below that div um we're gonna have our two buttons right so button and remember we already did a lot of this for our for our um already did a lot of this in our global styles right for our buttons so as you can see there so i'm gonna hold down all so we can type both places here and we'll say px8 okay and then py2 mt4 and then just on this top one here i'm gonna say margin right of eight and let's see that looks good perfect so let's add our little box over here that's looking good though perfect perfect so underneath there let's add our box right so it's gonna be one more div over here on the side div here and in here okay we're gonna give it a class name and it's gonna be calm span four then anything medium what we're gonna say is a call call span one okay then shadow of xl shadow gray 400 rounded xl p dash four okay perfect perfect and here div and this is going to be just a class name p2 okay well not one two okay and here we're going to have a p tag okay this is going to say technologies and let's go ahead and underneath the p tag what we're going to want to say is a div right div and then we're going to say this is going to be grid okay so let's say in here we're going to have a p tag and this is going to say [Music] react tailwind javascript oh i left out a uh an icon there oh there it is just couldn't see it this is on the small device cool cool so let's add that right there perfect so technologies inside here i'm going to have the ri radio fill restart radio button fill okay and i'm going to go ahead and close that off and if it's going to let me i'll go ahead and auto import it and it won't so let's just copy that okay go ahead and copy that and let's go in up here and we'll import let's paste that in from we're looking for react icons slash ri i'm sure you probably know that by now should be export and importing uh expert importing react icons okay so there we go and for this one i'm going to say i'm going to keep all the same here react okay react there we go perfect so boom there you go so let's add some some some styling here so let's do our technologies first okay so i'm saying class name text center font bold padding bottom two okay now for the div this is going to be surrounding or let's go let's go ahead and style these here so for the radial fill button i'm going to give class name text gray 600 py to flex and then we want the items to be centered that way these are just kind of side by side and um centered there um horizontally and vertically there perfect now for our div or for our icon it's class name and i'm just going to say uh padding right of one just so there's a little bit of a space there ah there we go perfect this makes it perfect and you could use margin right but i'm gonna use padding so that's what we want right there now in here i'm just gonna drop i'm gonna copy that there okay i'm gonna drop that down a few times you'll probably see it populate boom boom boom but i want to change this so react this next one is gonna be tailwind okay and this one is gonna be we'll say javascript and then firebase firebase oh there we go google api and let's just copy this down one more time and this one will say zillow api perfect just like that perfect now what we want to do uh it's not going to display properly all right there it goes perfect that's what we want yeah let's have a look i think that's all we need right there boom that goes back to the page projects scrolls down boom there we go make sure it displays properly looking good look at that you got oh this is the wrong one sorry all right you guys sorry about that projects and make sure this displays properly and notice okay you guys another thing i had real quick let me show you so a lot of people asked me on a previous video how we're doing how do you navigate to a page and then scroll down okay and if you notice we're on our property page right here so say hey we want to go back to our we want to go to the contact page right so if we go click on our menu you can't really see it we're going to change that though click on contact how do we make it not only go to the home page right but also scroll down and that's really simple boom and that is why we did if we look at our navbar why we did the slash and then the the number sign there okay right then we added the id so make sure you do slash first otherwise you won't be able to go down to the to the contact page or wherever you're trying to section up the document you're looking for so what we want to do is actually have that display just like that on mobile devices so let's go back into our property here now for this div right there okay for that div is real easy give class name i will say grid and then grid columns three there you go and then medium anything but for medium we'll say grid columns one so let's have a look refresh shouldn't get any errors that's perfect we scroll up past uh medium it should just be one column and shoots right there on the right perfect and we want to add a little back button right kind of how we did right there so we can add that in i'm going to just drop this down a little bit perfect just like that and where we want to add this back button is just at the very end so i'm just going to put this um right here okay and i'm going to say a link here and href okay href that looks good and just like that and this is just going to be back we'll say back there we go and i'll actually want to uh we'll put this in the p tag okay class name and underline cursor pointer okay link is not defined that's all right import it there we go now should choose back back there there we go but hey what if we wanted to have just real quick what if we wanted like you said to go down to the project section so if we're looking at this and we say back do we really want to go to the back of the home page or do we want to go back to the product section so let's just try that hey hey projects and this should be how we get back to get rid of that there we go should scroll us down to the projects section there you go hey smash that like button you guys if you like this and that is okay let's go back i want to finish a couple more things here let's go back and add our other pages right so what i'm going to do i'm just going to copy this entire page okay just copy the entire thing and um in our pages let's create our other pages so i'm going to have a uh crypto page crypto dot js x there we go and again interchangeable you see that index comes right out of the box from next.js.js so it doesn't really matter and so i'm just going to paste this over boom paste that over and a few changes here not property but crypto crypto okay and and here we want to take and see krypto img and we'll just have to change this here as well crypto imd just like that and we're looking for crypto boom there we go and where else we look in here project oh i i misspelled that other on this property it's going to bother me if i don't change that there we go and i'm just going to copy in um i'm just going to copy in my other ones here just because i don't want to type it all out so this is the crypto app right so crypto oops let's paste this in just like so perfect there we go okay go and save that it gets nice and formatted okay and what else we're replacing here i'm gonna leave all these the same perfect now let's go ahead and have a look and make sure we're on the right one projects okay so when we click on the crypto it should property finder it didn't take us right one and that's the list here on our let's go to our project so we probably just need to update that so okay remember we left everything at the property destination so this one is going to be crypto okay and this one we'll just say netflix this one twitch now we don't have a twitch or netflix yet that's okay don't worry about that so projects and crypto we'll see if we have any errors probably oh we need to export it so let's go down here export we want to export crypto because that is our functional component okay that's what we're exporting our functional component there and let's see if we have any errors now perfect and we just need to change that you can see our background is correct right background's looking right but let's go back to our project so we can actually pass through see that looks right okay and that's for our project item so we're done with that actually so in here we'll just change that to we'll say crypto app something like that and i actually built that with rack.js tillwin and firebase there's a back end to that crypto project so if you want to see that we do the sparklines everything i'm gonna do all that and i did that in react.js so if you want to see that let me know in the comments and i'll throw up a video of that so i'm not gonna connect these buttons i actually do have this hosted but i'm not gonna show it to you right now and then you can just put a link to your github like or something like that okay so now that we did that let's just i'm gonna copy this one more time and let's just do the same thing uh for our other pages let's create our netflix.jsx okay and we'll just paste that and in here we're gonna want the netflix img okay and netflix and the reason i say img for one i know it's an image and two um since this right here is actually called netflix you can't have an image that's imported the same thing right you're going to get some errors here so that's why you always want to kind of be a little bit more specific with the image on the background or on the back end just like that and we'll say netflix netflix app something like that okay cool and i'm just gonna go back to my netflix app netflix ui is what i said that's cool though so i'm just going to paste that in here what i typed in about that and technologies all that can stay the same and we want to import export netflix but we didn't use the i'm gonna get rid of that google what i use on these here what i say i just i left them all the same that's cool don't worry about that not the important part of this tutorial here so so that works for netflix and now let's do the same thing right for our last one let's do twitch.jsx so actually don't even bother with rfc let's go ahead and paste that let's control a just you know command a if you're on a mac uh copies everything at once so if you're wondering how to do that somebody asked if they mentioned that they like me mentioning these little shortcuts that i use so there you have it twitch perfect and we'll send this to twitch and this is going to be the twitch img twitch ui perfect perfect and i'm going to go ahead and add in my my little i don't really matter i'm going to leave it there and um let's say export we want to export as twitch because that is our function okay so let's see if this works let's go to our project so i'm just going to open it up so our property finder that's good correct image there crypto app we have our right image crypto app perfect that looks good and our oh probably finder we need to change that one and we change that as on our cg property projects right crypto app that this would be netflix ui or netflix app and this would be twitch i didn't catch that you guys probably roasted me in the comments already twitch ui perfect okay that's what we want right there you guys now let's go back and just double check property finder next that is our netflix app perfect let's go back and our twitch should be our twitch ah perfect that is looking good you guys looking good i hope you like it smash the like button if you get into value of this but we have do have one more thing to address and that is this uh our our uh nav bar here so on our home page i actually want this right now we don't have a background on our navbar right and i actually want our background to be the same color as our homepage however this poses an issue because when we go to our projects page we don't want that same background we actually want a transparent background right so let's go ahead and fix that right now you guys all right you guys so how are we going to fix that let's go into our navbar.jsx okay and we're actually going to add in some more state okay so what we're going to say here is a cons and we're going to have we'll say what's this nav background nav bg set nav bg just like that equal to use state and we're going to pass in it's going to be a string right but it's going to be a color code so hex code is going to be 1 c sorry e c f 0 f three okay just like that perfect and also we're gonna have a link color right so const we'll say link color and then set link set link color just like that okay equal to use state and this is going to be that black color which is 1 f 1 f 2 9 3 7 perfect okay and the next what we're going to do is actually import the use router from next router okay so import and just going to be use router from let's see next slash router okay that's what we want right there and we need to define that so we can use it so const we'll say router equal to use router okay and this is a method so let's add in some logic okay and we're going to wrap this into use effect so let's just put our use effect there it's going to take in an arrow function and instead of an empty dependency array if we want to just this just run one time whenever the component mounts which we don't want that what we want is actually run this every time the route changes so we'll just pass in router just like that and then next okay in here let's have our if statement okay so if i'm gonna give me myself some space there so if and we'll say router dot as path okay equal to we'll say slash property then we use our operator right or operator let's just copy this down a few times here we don't need that on the last one so and or this one is uh what's our next one crypto there we go or netflix or twitch so and these are the routes right these are the routes that we have in our pages right here okay so what we're saying what we're saying is if router s path is equal to property or crypto or netflix or twitch if all that what we want to say is set nav b g okay and what we want to set that to is let's see here we're going to set that to transparent right so whenever on any of these pages we want to set the nav bg to transparent and we're going to set the link color we're going to set this link color to um we'll say f8f8f8 which is pretty close to this right here okay so that looks good in fact let's just copy this out there we go okay um else what we're going to do is set nav bg okay to um to our uh this color okay yeah there we go and then we'll uh set link color set link color and we'll use this black color right there so just a little quick recap our use effect it's running one time whenever the route changes and what we're saying is if the route is um the property crypt or crypto or netflix or twitch set the background as transparent and the link as the white color right otherwise set in fpg as this cream color with the black uh text right so how do we implement this okay so let's go down here into our first div here okay this this div right here and this first div this is our nav bar right this is a parent container for our nav bar and we don't have a background in here so what we can just say style this is just inline styling for uh next.js or reacts is it's the same thing okay and we're actually gonna have two two curly brackets right to write our styles and what we'll say is a background okay it's just background just like that okay background color and this is going to be in back takes okay and we'll just say just like that nav bg just like that perfect nav bg okay and we're gonna do the same thing for our links for our unordered list right here okay so what we'll say here is style open this up and what we're going to say is uh color right and let's use our back ticks sorry there we go and template literal there so that's where we use our back text we can use our template literally pass in our values dynamic values and this will just say link color let's have a look so as we scroll down this should there you go so now you can see since we're not on and since we're not on either either one of these paths we now have a background right okay perfect so that's looking good now moment of truth here let's see if it works when we click on a property or any one of our projects it should be transparent let's cross your fingers and look at that transparent background and the links are showing so let's let's pop that open full screen here boom there you go all right you guys let's just do a quick rundown here we have our nav you have smooth scrolling right here nice hover effect on our icons there about page using skills we're using flexbox we're using grid in here projects lots of little little issues we run into i was able to work past these here so looking very good you guys i hoped you liked this project if you did make sure you smash that like button i'm going to be putting out some more some more content and react.js next js just like this this is the first nexjs project i released i'm going to be doing a couple more here if you want to see any of these projects i did the netflix build and i'm going to drop a link to that in description below but if you want to see this twitch build uh this crypto build with routes and all of these are using firebase for the back end so if you want to see i built any of these then please let me know in the comments below please smash that like button and subscribe to the channel you guys thanks for watching i'll see you on the next one

Channel: Code Commerce

Views: 141,760

Keywords:

Id: CMx51wpd7g4

Length: 152min 20sec (9140 seconds)

Published: Wed May 18 2022