Build and Deploy a Custom React Portfolio - Vite.js & Tailwind CSS

what is up you guys Clint here welcome back to the channel code Commerce and in this video I'm going to show you how you can create your very own portfolio website using VJs styled with Tailwind CSS stay tuned because at the end of this video I'm going to show you how you can publish your portfolio website that we're about to build with the sponsor of today's video hostinger that way you can showcase your work and your skills and Market yourself to potential employers now I've secured an exclusive 10 off discount code for you that's going to give you 10 off all of their current and ongoing sales that hostinger is offering also their new year sale is still active you guys so for anyone who purchases 48 months of web hosting we'll get an additional three months of Hosting completely free and you're gonna get a completely free domain and guys let's be real you have to have a good domain name if you're going to apply for jobs so without further Ado let's build this thing all right you guys so here's a quick preview of what we're building our portfolio website we have some nice buttons on the side to scroll down we have our timeline here content creator Google Amazon Facebook yes the most prestigious work history then we have our projects here awesome awesome and these aren't going to go anywhere if you want to make take it upon yourself to to create some routes then feel free to do so and then we finally have a contact form you guys this contact form is completely operational you can actually submit um a form and it's going to go directly to your email where we're using type form for that service there and it is completely free you guys and again I'm going to show you how to set all this up and of course it is 100 mobile responsive everything displays just beautifully okay so without further ado let's get started here so I'm already in vs code okay so let's just go ahead and I'm going to open up the terminal here using the back tick button so I'm just gonna there we go control backtick now what we want to do first is create our Veet application okay so what I'm going to say is I'm going to say npm create Veet at latest just like so now what it wants to do is name our project so I'm just going to name this I'll say portfolio hosting it just like that that we're going to be hosting on go ahead and hit enter now it's running a framework we are going to be using we're going to be using react there now we're going to hit JavaScript and that's it now what it wants us to do is actually change the directory into our the what we just created so I'm going to say CD portfolio Dash hostinger then it wants us to go ahead and install our dependencies so we're going to say npmi what that's going to do is just install our all of our dependencies necessary for V to run and then what we can do is type npm run Dev and what that's going to do is just start up our development server here so that's where we're going right there I'm just going to copy that over and we'll paste it right in here so here it is that is what we just created okay so let's go ahead and let's go ahead and get started here so just a quick rundown you guys of our hostinger like I said this video is sponsored by hostinger and you can get 279 a month plus three month freeze you guys up to a hundred websites 100 gigabytes of SSD storage 25 000 visits monthly a free email so you can actually have a professional looking email you know you don't want to use a Yahoo or a Gmail account whenever you're contacting potential employers okay it just doesn't look professional you want a real email address to really stand out okay free Security Site lock has a page builder which we're not going to use because we're writing our own custom react code and then of course a 99.9 guaranteed uptime you guys so this is awesome really really awesome service I have used hostinger in the past so let's go ahead and get started with our build okay so what I want to do first we're going to be creating a side nav bar okay so our side nav let's go ahead and do that so I'm going to toggle our side menu here so oh we first we need to actually see open our folder here that's what we need right there okay so now that we're in here what we want to do inside of our source folder okay inside of our source folder I'm going to create a another folder I'm going to call this folder components just like so now inside of our components folder here I'm going to create another file by the name of side nav.jsx and RAF CE is just going to generate kind of like our functional component outline there now we're going to be using react icon so now would probably probably be a good time to go ahead and let's install react icons a nice little package when you use npmi react Dash icons Dash save and go ahead and hit enter and we should see that in our package.json there we go perfect now let's go ahead and again since we're writing this complete website with Tailwind CSS let's go ahead and install Tailwind while we're at it so let's go to tailwindcss.com I love Tailwind it's going to be incredibly fast uh the way we write CSS so let's go ahead and click get started and we're using a framework guide and we should be able to find Veet here it is right there now first it wants us to do is just create our RV application which we've already done that so next we can just follow this command here so I'm going to copy that and paste it in there like so next we have to run this MPX Tailwind CSS init Dash p so let's go ahead and paste that in there and what that did right there is create this tailwind.config file along with a couple other files but this one specifically is important because our next step here it wants us to copy these inside of our content array there so the dot slash index.html is within some quotes and then also this right here let's just go ahead and paste that in there like so perfect and then our final step here to get Tailwind up and running let's copy this into our index.css file so we actually don't need all this we're just going to delete that um because we're gonna we're gonna get rid of all that boilerplate code in there and that is all we need to do you guys okay so let's just go ahead and we can close that we can close that for now now if we once we run our server we'll say npm run Dev we just deleted a lot of CSS so it's going to look kind of jacked up here so as you can see it's not looking like it did but that's okay let's go ahead and clean all this up um so we can get rid of all that boilerplate code inside of the app.jsx and we can get rid of this state here um and let's get rid of this react logo and that's going to be good for now okay so okay so that's it for now so inside of our app.js or inside of our components rather for our side nav let's go ahead and start writing some react code in here okay so I'm going to shrink that down just a bit here so what we're going to do let's go ahead and let's go ahead and we're going to use our react icons okay so I'm going to use AI outline menu just like so and we're actually going to have to import this so what we're going to say is import AI outline menu there it is from react Dash icons slash AI make sure you add that AI is very very important and we can't see this yet but that's because we need to actually import this into our app.js so let's go into our app.jsx and we'll say import sidenab that's the name of our file from and it's going to be inside of our components folder slash sidenav oops side nav just like that all right so let's just add our component in here there we go and as you can see we already have our we already have our our icon right there perfect looking good so far you guys all right so are there any Styles added to this yeah so let's go into our app.css let's just go ahead and delete this you guys because I don't want any of these Baseline styles to be applied basically we want to add all of our own Styles so it looks like we're getting an error it's probably trying to import something that we didn't delete so this app.css let's just go ahead and get rid of that and as you can see Zero Baseline Styles right now okay so let's go back into our side nav here and let's start writing some let's start writing some code here so what we're going to have so we're going to have a mobile we're going to have a mobile nav here I'm going to have a have I'm going to bring over our um I'm gonna close this down real quick basically I want to be able to have uh some to reference what we're building here so we're going to have a nice little mobile nav here that we can click it disappears as well okay so let's go ahead and build that first okay so we're going to build out our mobile navigation first so let's go ahead in here and we're going to be using their use State hook so I'm just going to go ahead and import that at the top you state just like so now let's say let's go ahead and add our our state here so I'm going to say const nav okay we actually need to put this into brackets we'll say nav and set nav just like so we'll let this equal to U State and we're going to set the default value to false now we're also going to have a function basically like a handle nav function to to change the state of our navbar so we'll say const handle nav okay and it's just going to be a narrow function here then what we want this to do is basically just set our nav to the opposite of its current value so we're not going to set it to true or to false we're just going to set it to the opposite of of its current value so go ahead and get saved that's going to get nice and formatted for us okay so now what we want to do is let's go ahead and I'm going to give some styles to this here so I'm going to say call back we need class name and in here what we're going to say and this is how we write Tailwind you guys we used to write it in line in our class name here so absolute top Dash four it's going to put it right at the top of the page I'm going to say write-4 and it's positioning this way since we redisplate his position is absolute I'm going to give it a z index of 99. so as you can see it's up here at the top that is exactly where we want it and then to add a media queries very very simple basically anything above the medium break point I'm going to say hidden so that's going to display none whenever we pass this break point and as you can see that's our break point right there perfect so that is what we want right there you guys and let's go ahead and add I'm going to add our function here so on click we want to run our function that we just created our handle nav function and what that's going to do is just toggle our state back and forth in fact if we do inspect and we look at the console down here whenever we run that we can say console.log and we'll just say changed so whenever we click this we should see in our console state has changed every time we click this okay so that is how our state Works in react and go ahead and close that back down so next let's go ahead and create our mobile navigation okay and we're going to use a ternary operator for this okay so we'll just add this in right here and basically what we want to say here is if our state if our nav state is true then what we're going to do is display some HTML on the screen else if it's not true then we're going to display some different HTML on the screen here okay so what we want to say in here and don't worry that we're getting this um we're getting these uh these errors we're going to change that as soon as we add in some divs in here and I'm just going to copy that down and paste that in there that should take away all the errors we see there so what this is just a ternary operator basically saying if our nav state is true then we're going to show this code which is going to be our our nav bar our our um our nav bar just like this and if it's not true then it's not going to show anything or in fact it's going to show what it's going to look like um just like this off to the side there okay so I hope that makes sense there so let's go back here and what we're going to say if the nav is true so like I said we're doing our our nav bar first here then let's give a a link here we're going to have an anchor tag and we're going to give this we'll just say to to the main right now which we haven't identified that yet but we will and then inside here I'm going to have an AI outline menu all right sorry outline home just like that and we can actually give some size properties to react icons just like so and I'm going to say size of 20. and then just below this I'm going to give this a span span just like that and inside here I'm just going to say home just like so now inside here this class this span I'm going to give this a class name and this spans class is going to be padding left of four just like so perfect now for this div I'm going to go ahead and let's go ahead and give this a class name here and this is going to be our basically our container that we see right here so our full full width full height screen here so what I'm going to say in here is I'm going to say it's going to be a position of fixed width full height of screen which is 100 viewport Heights the background I'm going to say background white and that we actually give some opacity to it just like doing that by 90 if we hover over this you can kind of see what it is right there basically it's a white with an opacity of 0.9 we want to display Flex column and then I want to say justify Center and then we'll say item Center and then we're going to use z20 for our Z index so we can't actually see anything yet here but let's go ahead and let's go ahead and let me refresh that let's go ahead and add some more um some more styling in here so we have our home in here okay so next what we want to do is let's do our so outline home so next let's add a another icon it's going to be a projects icon or let's let's style this anchor tag first so for this anchor tag for the main we'll say class name now for our class name what we're going to say is a width of I'm going to say 75 percent and these brackets are actually a way for that we can add some custom values in until when so I'm going to say justify justify Center okay and I want to be able to see this on the screen so if we go ahead and click that nav where is it so if nav is true we should show everything and be able to see looks like we're getting an error already so let's see AI outlines not defined oh that's because we need to import it up here AI outline home just like that and all these can be imported on the same line if they have that same little pretext there so if we just go ahead and refresh as you can see now our state is true and we can kind of start to seize our our elements on the screen okay so now what we're going to say is so we'll say justify Center here what we're also going to want to do for this anchor tag is we're going to say items Center there we go I'm going to say rounded full this is just like adding a border radius I'm going to say shadow large this is how easy it is you don't have to mess around with all this box Shadow and all these custom values you just say Shadow Dash large and your element has a shadow around it so I'm going to say BG gray 100 Shadow we can actually change the shadow color I'm going to say shadow gray 400 I'm going to say m-2 for the margin of um it's going to be 8 pixels and then p-4 is a padding of 16 pixels when the cursor to be pointer there we go and then whenever we hover this is how we add a hover selector hover colon I'll say scale uh we'll say scale 110. then we can say ease in and then just give it a duration of we'll say 200 just like so so go ahead and save that should get nice and formatted so whenever we hover over that you see a nice little scale all right so now we have our C fixed h of screen that looks good so what I want to do next is let's go ahead and I'm going to add a or what we should do is probably just copy this down so we can add in our other add in our other links here so we have that one's home we're also going to have a work projects and resume so I'm just going to select this anchor tag I'm going to copy it down whoops I'm going to copy it down so we're going to have a see a work projects resume and then a contact so after home next one's going to be work we'll say work and then this one is going to be projects and we'll say resume just like that okay perfect so and then I hope we need a contact as well so this one's going to be contact there we go perfect and we see we can toggle that it's not looking quite right yet but that's okay so next what we want to do is oh this should be displaying in the middle and it's not so if we look up here um we're here at the outer diff here I said with a full which is saying with 100 this is actually supposed to say H dash screen which is a 100 viewport Heights is what that means so as you can see we fixed that and now it's starting to look a little bit better so perfect and we have our nice uh hover effect now let's go ahead and um I'm going to change up some icons okay so we we have the first one as a outline home the next one is going to be we'll say GR projects just like that now we actually need to import this so let's go ahead and import this and it actually has to be on a different line just like so since it's from react icons but not AI it's going to be from G gr just like so and that should be what we need there so react Dash icons gr and looks like we're getting gr projects let's see it's not liking something here I'm going to go ahead and refresh now there it is not sure what that was about so yeah there there's our projects there and now next we're going to want to do we have an AI outline project so I'm just going to go ahead and import these AI outline project and then we're also going to use something called BS Dash person so let's just go ahead and import that we'll say import BS person and that one's going to be from react Dash icons slash BS and we're also going to have an AI outline mail so we'll just add this one in on the same line AI outline mail just like so so let's go ahead and save that and we'll come down here so we have the AI outline project see a gr projects next one is going to be AI outline project should be right here perfect and then for our resume we're saying BS person and then for our contact it's going to be AI outline mail all right perfect so there you have it guys everything is looking clean there very very nice let's go ahead and save so that's basically it for our mobile nav and look at that you guys that's how easy it is to mobile nav and react using some State and some some react icons and Tailwind CSS I'm gonna go ahead and refresh against that that those errors off the screen so let's go back to our react code here and we're using this ternary operator like I said so if nav is true then we're going to be showing this code right here and we're using the parentheses whenever we're displaying rendering out elements onto the page and react so if nav is true we're going to show this else if it's not true what we can show is actually don't even need to show a div we can just add in an empty empty um empty string there okay and then what we're going to want to have here okay so if we just go ahead and refresh what we're going to code now are our side buttons here which you can't see them on smaller devices but they're going to be these right there okay and I'm going to go ahead and leave the screen at that width so we can see so we can see them there so this is what we're going to be coding right here nice little hover effect as well so let's go back here and again we can't see our our side menu our button there because I shrunk down to a smaller to a smaller screen so next let's add our code and our code is going to go right below these little brackets there is where our code is going to go and what we're going to say here so we're going to have a div then inside here we're going to have a another div and then we're going to have our anchor tag and this one is going to be I'll just say main just like that there and we'll come back and change all these other ones here all the where they go to so inside of our anchor tag they're going to have an AI outline home just like so and basically we're going to have all the everything that we did up above so let's go ahead and let's go ahead and do that but you know what I'm going to go ahead and add a class name first so I'm gonna go ahead and style this that way whenever we copy it down it's going to be nice and neat so let's go ahead and I'm going to give this some class name as well okay so class name so what we want to say is anything above the medium breakpoint we're going to display as block else and Tailwind is a mobile first approach so all the Styles we add are going to be at A Min width approach and then we have to add media queries to specify anything else so anything above the medium break board and that's how we add a breakpoint and Tailwind if we hover you can see anything above medium minimum width 768 it's going to display block otherwise it's going to be hidden okay so right now you can see that home button if we shrink down past our break point here you can set the top right at our break point there it disappears so hope that helps you understand the Tailwind here so what we want to say is I'm going to say fixed top and then I'm going to use our brackets and the brackets again like whenever we use brackets we can add custom values and Tailwind so that's where we want it right there kind of about the medium part of the page there and then and here I'm going to give this a class name and we're going to actually have multiple icons in here of course so I'm just going I want these displays flex and I'm going to say Flex columns so they're kind of down here in a column on the left side of the page now for our anchor tag here let's go ahead and say I'm going to say rounded Dash fulls give a nice border radius Shadow Dash LG first out of large and well if I can spell that Shadow Dash large okay and then what we'll say is uh BG gray 100 and we'll say shadow Gray 400 I'm going to say margin of 2 which is actually going to be 4 or sorry eight pixels there it goes by multiples of of eight or four so four would be eight pixels um eight would be um margin dash eight would be uh 16 or sorry 32 pixels so then we have let's say a padding of four which is going to be one ram say cursor cursor pointer and then anything on Hover the scale 110. ease in and then duration we'll say duration 300. so there it is pretty nice right there a nice little scale there perfect now let's go ahead and I'm going to give this a size property here of 20. so it's just a little bit bigger perfect now what we want to do is actually copy this down and um so we can have some some more um copy all these down so we can have all our other icons so I'm just going to copy these down a handful of times so this one is going to be gr projects and then we're going to have see AI outline project and then this one's going to be BS person we've already imported all these and then the last one is going to be our our contact which is the AI outline mail there we go we've already imported all these remember so we don't have to mess around with any of that so there we have you guys awesome that's looking good so um we have these I let's go ahead and add in these IDs we have to come back and do this later so um for projects we'll say will say work or sorry let's say work for this one and then this one's going to be projects and then we'll say Maine's fine because that's not actually going to go anywhere and this one will say contact just like so and let's go do these up here um we'll say this one's going to be contact and then that one's not going to go anywhere because person we can just say Maine's fine and then for this one we can say projects and then we'll have work [Music] and we'll leave the top one at Main this is looking good so there we have it you guys now it's not gonna go anywhere because we don't have any other components but let's open this up make sure everything is responsive correct now we get below this medium break point and they should disappear and then we have this we can toggle our menu so there you have you guys awesome everything is looking good so far you guys smash the like button if you feel like you're getting some value out of this and let's go ahead and move on to our move on to our next our next component which is going to be our background image right there okay so that's going to be a new component okay so I'm going to command B to toggle our sidebar and I'm going to create a new file say main dot jsx our afce is going to get our functional component in here and we're using this awesome react typed package I'm going to show you how to incorporate so really really awesome kind of levels up your portfolio there and you don't actually have to write any custom JavaScript or anything like that so they make it so simple for us okay so for our main component what we're going to do is let's go ahead and give this an ID of Main and that way we can kind of scroll to it that we added our scrolling to now let's have an image now I don't actually have um the image I'm going to use is not going to be a local image it's just going to be an endpoint here that I can link to so what I'm going to say here is we'll say Eminence just like so and I'm just going to paste in the endpoint basically it's just an image from unsplash feel free to use uh what other whatever image you'd like to use okay and then let's go ahead and I'm going to give this a class name here and we can't see anything yet because we haven't imported yet so let's go ahead and go to our app.js and we'll import main there we go and we can just copy that down we'll change this Main and now we should at least see our image on the screen perfect and we refresh that we get rid of all that errors there so yeah that's looking good so far you guys now let's go ahead and style this thing um I'm going to add some space in there so for our class name what do we how do we want this to be displayed so what I'm going to say is with a full h of screen we want it to take up the complete width and height of the screen now it's kind of distorted so we can say object cover and that way it's not going to be like distorted in any way and I actually want to flip this so we'll say object object left there we go and um so that just moved it over let's let's flip it we can say scale X and we'll just say minus one that should flip it entirely so that looks good right there you guys awesome now I want to have a uh an overlay on this thing so let's go ahead and create another div here it's going to be a white overlay I'm going to give this a class name so again with full H screen it's going to take the the entire width and height of that uh image component and it's going to say absolute we'll say top zero left zero then BG white okay and that's all we need to do but I actually want to be able to see through it so I'm just going to give it an opacity of a 50 there so that's looking good right there you guys awesome looking good so far don't worry about that error if we just refresh they go away so I wish all the errors were that easy so next let's go ahead and we're going to have kind of a container here for our text just like that so what we'll say here is let's see here so we're going to have a div and then we're going to have an H1 I'm just going to say I'm John you can say whatever name you want and then under the H1 we're going to have an H2 and this is going to say I'm a and then we're going to leave this in here sorry and we don't need an a tag and here is we're going to have our react typed package so if we just look for let's see react typed uh package let's see what comes up this is it right here at that first one react Dash typed no this is actually not it so let's go back see rack typed animation all right there it is okay this is it right here you guys so let's come down here and we're going to copy that right there we need to stop our server there we go and we'll just make sure that that did install react type animation perfect that's what we needed right there you guys okay and this is really really awesome has some really awesome tools so I'm gonna say npm run Dev I was trying to not run and there we go okay so npm run Dev now what we're going to do is we need to import type animation so let's go ahead and say shut down our sidebar there import and what we're going to say is type animation just like that from it's going to be react type Dash animation just like that there and what we can actually do just to make this easy we can actually just copy some of this so so we already imported that there so next what I'm going to do is I'm just gonna select that component in there and I'm going to paste it in right over here on the left so let's go ahead and save that and I just pasted it in right underneath my text is actually still inside our H2 okay section c it's actually typing right there so that's just kind of like the boilerplate code that comes with it so I'm going to change a few things so this font size style I'm going to change that to 1em and then let's add let's say padding left I'm just going to say five pixels there now this repeat Infinity yes cursor true yes wrapper div that's fine um we don't need um this uh this Arrow function or anything like that so we can actually delete that we don't need it to as you can see it was kind of just console.logging whenever it was running the function so what we're going to type in here is our different cases here so what we're going to say is developer just like that and we'll say coder and then we can let's add another here we'll say Tech enthusiast just like that and we'll add another time out there so as you can see let's go ahead and refresh this as easy I'm a developer I'm a coder Enthusiast and you can change this right now it said to two seconds or this one's at one second let's just change them all to two you can change a three to four it doesn't really matter so perfect that's what we want right there you guys now let's go ahead and I'm going to add in some um a couple more things here let's do our icons next so we're gonna do that just below our H2 okay so let's create another div and um inside this div what we're going to have is our icons so we're going to have f a Twitter just like that and then we're gonna have an f a Facebook F just like so that we're having f a Instagram just like so perfect and then let's also have F A linked LinkedIn and I believe is what it needs to be and we actually need to import all these as well so let's say import fa Twitter and actually these need to be in curly brackets f a Twitter just like that f a Facebook FFA Instagram and F A LinkedIn then these can be from react Dash icons slash fa so there we have it you have our icons down there so let's go ahead and add that's all of our um code essentially for now um real quick I'm just going to add a size property so I'm holding down the option button right now if you're on a Mac so we can just type on multiple lines I'm just going to give this a a sizing attribute of 20. and then I'm going to give this a class name as well that's going to say cursor cursor pointer so that way whenever we hover you have a little cursor okay and you can if you want to set some links to go up to your Twitter your Facebook Instagram LinkedIn obviously that would be a good idea because you guys this remember this video or this uh this build is going to be live by the end of this build it's going to be completely live so you can start applying for jobs and actually sending them a professional portfolio Okay so we have our width full screen that's perfect now on here okay we're gonna set this up right here so we don't actually we're going to add just a little container here so let's give this a class name and what we're going to say is Max width of again here come our custom values with our brackets for Tailwinds 700 pixels I'm going to say margin Auto I'm going to say height full I'm gonna say whoop a full width full wind display Flex Flex column we'll say justify Center then anything above large I'm going to say items start and then item Center over here okay so there we have it okay that's what we want right there and if we shrink down perfect they're perfectly centered everything's looking good okay so next let's move on here and what we're going to have next so for our H1 let's give this some some styling here so class name I'm going to say anything above small um text 5xl otherwise it's going to be text 4XL there we go perfect font bold and we'll say text Gray 800. so on the number here you can go down to I believe 100 up to eight or nine hundred um the smaller the number it has to be 100 it can't be like 99 or 72 has to be 100 or 200 um the lighter you go the darker it is that's how Tailwind works so 800 is the darkest of this gray now for this H2 so since we have our animation here so I'm going to say class name what I want to say is flex okay so I should line it up in a line there you have our our text in a line there so text and I'm going to say now what I'm going to say it's anything above small will some text 3XL otherwise text 2XL padding up top a four and then we'll say text Gray 800 just like so okay perfect so that is looking good look at that you guys everything is starting to look pretty good so far is looking professional you're going to be having a job in no time okay so let's go down here to this div this is a basically a container for all of our icons I'm going to give this a class name here so I'm going to display Flex justify between padding top of six I'm going to say a Max width of and then again here come our custom values 200 pixels we'll say width full so that should spread everything out perfect that looks good that looks good right there okay so let's go ahead and save gets nice and formatted that is it you guys um make sure we don't have any errors perfect if we shrink this down everything is completely responsive awesome so you guys next what I want to do is our timeline we can close that package next what I want to do is our timeline right here okay very professional looking timeline notice that displays just perfectly with our icons whenever we shrink down it takes up the whole width of the screen so everything is kind of moved over so everything is looking good all right so let's toggle our sidebar here and we can close that main for now and what we want to go into um create next is going to be let's say our let's do our we're going to do our timeline of course so we'll say I'm just going to create the component in here work.jsx r-a-f-c-e and we're actually going to have two components to kind of just keep things uh keep things clean so what we're going to have is this is going to be one component right here this work then each individual work item we can say is going to be an additional component you don't have to do it that way it's just for the sake of the video and keeping them clean we're just going to do it that way and you know that's why we have react so we can have individual components to make things uh easier to work with so for our work.jsx what we're going to have here is so we actually need some data to pass in here um and you can you can obviously you're going to want to use your own data but what we're going to do is just type this in here so inside of our let's go ahead and import our work item first so we'll say import work item from just.slash work item just like that so for our data we're going to paste our data in here so I'm going to say const data and it's just going to be an array it's going to be an array of objects so basically I paste it in just four different things here and each one is um is going to have a year which is this right there it's going to have a title it's going to have a duration it's like how long we worked at that um at that employer and then it's going to have a details and this is just our details section okay so and this is again this is stored just an uh an array of objects in there okay and so let's go into our down here into our our component here we're returning some actual jsx on the screen and we need to go ahead and let's import this so we'll say work whoops just like that so import work from components such work just like that okay perfect there we have it you can see I work down there there it is now this is going to be pretty easy here so let's go ahead and we want to give this an ID of work because remember that's what we're scrolling to when we're using our smooth scrolling so I'm going to give this a Max width of let's say 10 40 pixels just like that I'm going to say margin auto anything above medium I'm going to say padding left of 20 then we'll say p-4 and then py so padding on the on the y axis up and down is going to be 16. so now we have that little nice little padding in there so then we're going to have an H1 and uh let's see here so we're gonna say work and let's go ahead and give this some styling I could have just made this some Global styling as well I probably should have so we can do that to kind of prevent us some rewriting code so I'm gonna give this a color so text we could say red 500 or whatever we want to say again Tailwind I'm going to use a custom value a custom hex code so we'll say zero zero one B five e and again if we're in these brackets that means we can use our custom our custom values okay so there you have it okay so next what we want to do is so what we're going to do is actually map through our work item here so for work what we're going to do how we're going to map through this and react let's open up some curly brackets and we stored this array of objects by the name of data so what we can say is data dot map and then this is just going to be an arrow function and since we're rendering out elements on the screen we're going to use we're going to use parentheses in here instead of curly brackets and so what we're going to say I'm just going to say item and then we're to give it an ID and you say idx doesn't really matter what id you give it so inside here we're gonna we're using mapping through each one's going to be item and then we're going to have a work item just like so and again we should have just imported this at the top is this going to be our work item component and we're going to pass through some properties in here okay so we're going to have a key reacts like likes us to have keys we're going to say idx and then we're going to have again we're going to have the year to pass through the title we're going to pass through the duration and of course the details so we're going to say here here is equal to item dot year and that's where we're getting an item that one right there and then we're going to have let's see title equal to item dot title and then we're going to have the duration equal to item dot duration and spell this right there we go item.ederation and then the details is equal to item dot details so let's go ahead and save that that's perfect and that's actually all we need to do for this component okay so as you can see it's rendering through um each uh each object in our array here which we have four objects and it's it's iterating through each one there so it's just displaying a work item on the screen because that's that's all that's in there but what we're going to do is go in here and actually pass through uh and grab the the data dynamically okay so what we're going to say here I'm just going to leave that for now let's go ahead and add in some some code here so I actually want this to be an an ordered list okay and I'm going to give this a class name and I'm going to say Flex on display is flex column anything above medium I want to display as a row then we'll say relative I'm going to say border left and then border is going to be a stone color 200 so if you hover over this you guys you actually see the color um there we go so you can actually see our little RGB color okay so we can't really see anything yet and that's okay so inside here we're actually going to have a list item we can go ahead and get rid of that now a list item then we're going to have a div here and this is actually just going to be we can make this a self-closing div just like so because this is actually just going to be a little that div is going to be that little circle that you see right there that's what that div is that we just created and then underneath that we're going to have a P tag and we're going to have a a span and inside here we're going to have the year and let's just go ahead and copy this down a couple of times so we have the year title duration and then this one is going to be a details but this one actually let's let's get rid of that because we're actually going to make this another P tag right below there so we'll say details okay so we're actually not gonna be able to see anything on the screen because we're not taking in um any of our of our children here so what we're going to say here is we're just kind of destructuring we could just say item you know then say item.year but to kind of Destruction and keep things a little more clear and stay a little more modern we're going to say year title duration and details and again we're passing these through right here so through our year item.ear and all that all that there so if we scroll down as you can see we're actually getting all of our data that's in our our parent component from our our data array of objects so our 2020 content creator three years 2017 I worked at Google 2015 I worked at Amazon 2012 I worked at Facebook um I hope you don't believe all that I did not really work at any of those places so okay so for our list item let's go ahead and start styling this stuff here so we're saying margin bottom 10 okay then we'll say margin left four there we go and as you can see there's our little line there and again you guys these numbers they're not actually 10 pixels or four like I said Tailwind counts by force so if we hover over that you can see that four is one Rim which is also 16 pixels so for this div let's give this our little our little circle there so we'll say absolute I'm going to say width of three height of three subtitle Circle there BG Stone 200 want to be rounded full empty 1.5 how about that so six pixels and we'll say um minus left 1.5 and then border border white right there so there you go there's our little circles perfect everything's looking good so next for our P tag let's give this a class name so I want this to display Flex I want it to wrap so we'll say Flex wrap a gap of four Flex row item Center justify start text SM uh sorry XS where's the extra small there we go then anything above medium I'll say text text small so there you have it everything's looking good if we shrink down should take up the full width of screen perfect and all right everything is looking good all right you guys smash like button if you feel like you're getting somebody out of this I'm so pumped to uh be hosting this thing at the end of the video make sure you stay tuned for that if you want to get a job and get this thing posted for everybody to see make sure you stay tuned so px2 py of one I'm gonna say font Sydney bold there text white and let's give this a background um we'll say this is going to be zero zero one B five E kind of like a dark navy blue there perfect and let's just give it a little rounded medium there you go all right perfect now next uh for this span here for the title I'm going to give that class name for our title and say text LG for text large font is going to be semi-bold and then text is say zero zero one again B5 e same color perfect that is looking good so far you guys then let's do this span here so class name for the our duration margin on the y-axis of one I want to say text small font is going to be normal leading none that's going to even it out a little bit and then we'll say text Stone 400 perfect now let's do our details and for our details for our details my two get a little margin text base font normal text Stone 500. all right so let's give that a save all right you guys this should clear up no errors there perfect look at that look at that let's have a look on smaller devices everything is displaying beautifully you guys and we do have this hooked up now so we click on uh work oh our menu didn't close we're going to come back and fix that also this we need to fix this as well I just noticed that so we're going to come back and fix that here in in a little bit okay so um what do we need to do so next what we need to do is let's see here and I want to we still have our side nav open um so let's go ahead and let's go ahead and close the side nav and then let's close our see what is next here let me scroll back out so next we have our projects in here okay so let's yeah let's work on our projects right now you guys let's do that so for our projects let's create a new component in here say projects.jsx okay our afce is going to get our functional component now inside of our assets folder okay inside of our assets folder I'm actually going to just pull through um I'm going to pull through all of the images that I'm going to be that I'm going to be using so let's just pull these in here um let's see yes sorry pull these from another file so this crypto this Netflix so they're just other bills I I've I've done in the past so nice little little image there that we have perfect so and these are the images that we're going to be displaying on our screen here so and I don't know if we're going to use that we probably won't use that other picture but um yeah there we have our images right there so let's go ahead and get those let's go ahead and get those on the screen with our projects file here so let's go into our app um right here we're going to say projects okay and let's go ahead and bring that down projects projects there we go perfect now for our projects let's see here for our projects we're actually going to have a um we're kind of like what we did before we're going to have a projects with our with our work and our work item so we're gonna have kind of like two components to kind of make things a little bit easier and kind of clean up some of the code here so let's go ahead and just do that while we're at it I have a project item.jsx as well so get our functional component in there already no class based components you guys we're not using none of that stuff okay so let's let's do this first let's import our images so I'm going to import um I'm gonna say project item first from project item so now we imported our our component there okay so next let's let's get our images so I'm going to import I'm gonna say property image using some Camel case here from we'll say dot dot we have these in assets assets there we go slash property is that property dot jpg there we go now I'm going to copy this down a handful of times this one is going to be crypto IMG it's from crypto there we go and this one's going to be Netflix IMG from Netflix and then the final one was a twitch build there we go and we'll say twitch oh forgot to add IMG there we go okay so now we have imported our images Okay so let's go ahead and for our projects here let's go ahead and give this an ID of projects so remember we can grab something for our smooth scrolling so we're going to give this a class name and we need a Max width of uh we'll say 1040 pixels to keep it all consistent margin of Auto so it sits in the middle of the page anything above medium break point we actually want the which is where our our when our icons start to show we want to say padding left of 20 and that's going to like kind of push everything over just like we did there so it's not um we don't want it to be hiding behind our icons padding four then py of 16 just adds some padding on the X X and Y axes here so for our H1 we're going to say projects here and then we'll have a P tag I want to say Lauren we'll say Lauren 30. let's go ahead and say if that looks good there perfect and if that's too much we can we can drop that down a little bit so for our class name I should add out of these some Global Styles but that's okay text 4XL font bold say text Center there it is tech center and then that text is going to be zero zero one B five e so that blue color perfect and for this one here say class name text Center and then we'll say py8 to give it some padding on the y-axis there now next inside of our projects here let's create another div and we're going to have our grid or sorry project item in here and there we go perfect and let's go ahead and let's go ahead and give this a class name so we we can't really see anything we set grabbing that project item but I'm going to display this as grid then anything above small we're going to say grid columns 2 then a gap of 12. there we go and I guess I should have just copied this down we're gonna have four so this is what we're doing with our our grid so anything if we if we go up it's just going to display two if we get down smaller it should just display one there we go perfect and um that is basically it we need to add a couple more things in here um let's go ahead and give this some properties so for our image we're going to give it an image and then of course a title um for the title I'm going to say crypto app for the first one then this next one I'm going to say proper property app then it's going to Netflix and then we'll say twitch there we go now in here this is the toe image and this one's the property so we'll say property image next one's Netflix we'll say Netflix IMG and then of course uh twitch IMG perfect so let's go ahead and save that so we haven't really done much inside of our project item so it's just displaying all this just this project item right there so let's go ahead and um let's go ahead and do this one next so what we're going to have here is our image um and for our image we're going to be passing through whoops we're going to be passing through IMG so kind of destructuring here let's go and take that in we'll take in the title as well so now we should see at least an image so yeah everything's displaying properly so that's good that's good and I'm just going to leave this as a little slash in there if you want to pass in through the title you could do that as well and that'd be that'd be fine so next we're going to have another div and inside here we're gonna have our H3 so let's go ahead and say title so we're probably not going to be able to see it yeah there it is perfect so we actually want this to display uh whenever we hover we're gonna have that nice styled effect okay so let's go ahead and style this outline there's out outermost one first so we want to display as relative uh position relative display Flex items Center we're going to justify not start but Center height is going to be Auto width it's going to be 100 shadow LG that's an Excel there you go perfect perfect and now we'll say shadow gray I can't spell that shadow gray 400 rounded it's going to be XL I want to say group okay so we're using group to kind of we're going to whenever we hover on something it's going to be attached to this outermost div so all you have to do is add a group in there and I'll show you where we add that elsewhere so on the hover effect we're going to say BG we use a gradient two right so 2R okay then we just say from Gray 200 2 and this is our our blue that we've been using it is see zero zero one B five E could have made this a global variable variable I guess would have made sense but as you can see as we hover you can kind of see it poking through um on the back there so we actually need to give this uh image here a class name and for our image we'll say rounded XL and then here ways we're grabbing our group so group hover opacity 10 just like that so if we hover over here and as you can see that looks pretty good right there all right so everything is looking good you guys so um still a few more things to do but that's looking good so far so for this div here let's say we'll give this a class name and this one's going to say hidden and then we'll say group Dash hover we're going to display his block the absolute we'll say top 50 percent left using our custom values here fifty percent and we'll say translate X whoops we'll say negative 50 and Translate Y negative 50 smash like button you guys if you're liking Tailwind if this is the first time you use Tailwind isn't it awesome how fast are we riding this CSS and once you get you know real good at it you build a couple projects you're going to start remembering this stuff it just you can just fly through it so font bold will say text white I will say tracking wider than text Center let's see how that is perfect that's looking good so far you guys looking good so below this H3 let's add some more information we'll say react Js again and so this was built in react or next I'm just going to leave them all right now we're not going to make that Dynamic so we're not going to pass through any props it's just gonna it's just gonna say what it says so below that P tag we're gonna have an anchor tag we'll get a little slash there and then we'll say um more info and again this isn't going to go anywhere if you want to add take it upon yourself to add some extra stuff then feel free so say pb-4 petting bottom four padding top we'll say two text white text Center and then for this anchor tag the anchor tag itself if you need to get any class named but this P tag will and it's going to say tech center p-3 for some padding round and large we'll say BG white text Gray 700 and we'll say font bold and then we'll say cursor pointer we'll say text uh text large so let's go and give it a hover perfect that is looking good you guys I'm going to add a border radius to our button here um so let's say that doesn't look right yeah let's just add let's say rounded oh yeah I did add it just didn't I just typed it wrong ah perfect there you go looking good now if we shrink down past the break point everything displays properly takes up the whole width of the screen if we go down all the way perfect that is looking good you guys looking good looking good I still we need to fix this I know but as you can see I want to make sure oh well let's add real quick so let's go into our index.css and what I'm going to say here I actually want to add like the scroll Behavior so we can just kind of apply to apply to all and we're just going to say scroll Behavior smooth so let's see how that works hey there we go all right nice very very nice smash like button you guys again I hope you're getting value out of this next we're going to do our contact form you guys this is gonna I'm zooming in a bit there this is going to actually submit to a back end here so say Clint uh we'll say one two three my email at gmail my subject and then my message I'm going to show you how this how this connects okay send message thank you and this is going to be done through getform dot IO getform.io account now as you can see let's see here pretty sure this is what I'm registered through [Music] um I think I'm registered through a different one that's okay I'm going to show you how it works and it's gonna we're gonna have it working perfectly by the end of the video okay so let's go back here and let's actually work on our I'm not sure if this is the right account or not but that's okay so what we're going to do let's finish up and actually build out uh build out that that contact form okay so I'm gonna shrink that down a bit and let's go in here into our components I'm going to create the contact dot jsx RAF c e it's going to generate our functional component in here okay I'm gonna minimize that so for our for our contact what we're going to do here let's go ahead and we can go and do it with this skip form yeah we'll use this one so we'll set it up so for this div here I'm going to give it an ID of contact and then a class name let's go and give a class name and say Max width 1040 pixels margin auto anything above medium so again Pang left 20 then we'll say p-4 then p y 16. and let's bring this into we can close the work and work item project project item and let's bring this in here so contact just like so oops and we'll say contact so let's see should have our contact down here somewhere get a refresh all right so what we're going to add it here where's our contact oh we don't have anything in there no so let's add our H1 contact just make sure it's in there yeah there it is cool so for H1 let's give this a class whoops give this a class name and we'll say py for padding text for Excel font bold I'm gonna say text sooner than text let's use our hex code here zero zero one B five e we gotta change it to a little blue there perfect now we're going to have our form here okay we're going to have our form so let's say form action we're going to come back in here and add an action our get form.o action as we're going to paste in here and that's what's going to hook up our form to make it work and we have to set the method to post and then we're going to have an ink type here of multi-part slash form Dash data just like that okay so let's go ahead and save that perfect and again we're going to come back and set up an action for that very very important we do that so for our div and then we're going to have another div and then this is going to be our label we're going to have a label in there and we don't need this HTML for we don't need any of that there for now we'll just say name and copy this down instead of name we're going to have a phone number there we go and let's add an input type of text is fine and we'll say placeholder we'll say um or do we need an input we all need we'll need a placeholder because we're going to have a label so that's fine and then um type text is fine and we do need to add a name attribute so this way whenever we submit our form uh in our gitform.io we're actually going to see um everything's going to be labeled nice and neat for us so we know where to what all the data is so we have our input there so this one here I'm going to input and this one's going to be type we can say phones or sorry text and then we'll say name is phone just like that cool so below that div there and below this one but still within the form we're going to create another div and this one's going to be our email so we'll say label let me get rid of that there enable email and then input and email there we go I'm going to type email and the name we can set that to email we don't need an ID and let's copy this down was below our email we're also going to need a subject so we'll say subject and then we're also going to need a message so subject and then this one's going to be a message and then for our message we're actually going to have instead of an input this is going to be text area there we go perfect so um for this type we're going to say we don't need actually a type we're going to say rows we'll say 10. name will be message and let's see so we have our name and our phone number so next our email type email is going to be fine name we'll change that to email this can just be type of text and we'll change this to a subject okay perfect let's go ahead and see there we go we have it and this is the beauty of Tailwind you guys add these Baseline Styles so that's why you can't see any of the outlined uh text box or anything like that okay so let's go ahead and style this um so for our we'll do our form here um for Action we're gonna leave that blank for now for this dish here we're going to display this as grid so we're gonna say grid anything above medium breakpoint will say grid columns two we're gonna give this a gap of four width full p y of of two there perfect that looks good so far and for this div here we actually want to display this as flex and then Flex column now for our label here I'm going to actually just um add this to all the labels all the labels are going to be spanning so for all the labels we'll say class name I think I left one out we'll say uppercase text small py to let's just go ahead and copy that there we go oops okay let's go ahead and refresh make sure there's no errors in there perfect so that is looking good so far so we have that now for our input this is for our input for our uh uh just text message here for this input for our text for our name is for a name here so what we're going to say here is we'll say border Dash 2 rounded Dash LG p dash three flex and we'll say border Gray 300 and I'm just going to go ahead and copy that and we're going to paste it in here perfect and then what else we gonna do looks like I let's see border to [Music] um border two we're gonna add that to let's see here we also want to do it to our four number and and what about our emails let's look at our email it's going to be the same so we'll do this for our email class name oh forgot whoa there we go and paste that in there as well so class name for for our email is going to be bordered to rounded large p-3 Flex there perfect and then border gray 300. so that's looking good there let's get a bit of refresh now for our that's for our email for our phone something's looking a little bit off that's okay why is our phone looking off there phone number border of border two rounded large p-3 Flex that is what we want okay that's fine we'll come back and look at that let's do our let's do our email let's do our subject next or you know what we didn't we left something out here so we can actually so for our phone number this flex and flex column here I think that's why it's looking funny there we go perfect let's add that in now let's see for our email let's go ahead and add that in as well so we're done looking funny so we'll say Flex Flex column and we're going to say py2 to add a little bit of padding in there perfect now we already have the class for our email so next what we're going to do is for our subject and let's just paste that we'll copy for our subject we're going to paste that in there perfect now for our subject that is looking good now for the input for the subject what we do we need to add here so we're going to do the same basically the same thing we'll say class name we'll say uppercase I'm sorry that's for the label for our we need a border to say rounded large P3 flex and then we'll give it a border color say border Gray 300 perfect and that's for the subject now for our message here let's give a class name Flex Flex column and then py2 just like the others and for our message let's style that next we're going to style so we already have rows 10. let's give this a class name and what we're going to say here is border to rounded large p-3 and we'll say border Gray 300. ah perfect now um we actually need to be able to submit this so we should probably add a button so let's go ahead and add our our button here that says send message let's give this a class name BG and we'll say whoops zero zero one B five one B five e okay and we'll say text Gray 100 margin top of one ram and we want this display width of 100 so w Dash full then P four nice let's give rounded LG perfect that is looking good all right let's let's uh let's change a couple of things here though um I'm just gonna get rid of that phone number just say phone and let's actually hook this form up okay so if we go to get form uh getform.io create an account it is free um so I think you can only have up to one endpoint here for free if you want to pay for more that's fine but I already created one um it's called applicants here so um I can use that one here so yeah let's just open this up a bit so what we're going to do here is go to settings and I'm just going to leave all this time zone stuff to the same and see here setup and what I'm going to do is just basically copy this endpoint right there okay or this action so just copying in that action and I'm going to paste it over here where's our contact I'm sorry our form there it is pasting that action in there go ahead and save that and that should be all we need to do okay we make sure you have the method set to post otherwise it will not work properly so and guys don't use mine here don't just uh I'm gonna put the link to the GitHub below but don't don't use mine because um I'm going to close this account so it's not going to work so let's go ahead and give this a test refresh so let's see here my name's Jimmy Clan and we'll say that's a phone number not really mine my email at email.com this is a subject this is my message okay so let's submit this form and everything should be working properly so if we submit let's go into our git form here as you can see we already have that red dot here is this is my message phone number how awesome is that you guys employers are going to be able to contact you with this form in real time and it's going to be live because we're about to host this thing right now okay real quick before I forget though there's a few things here um let's just go back here I'm gonna refresh so I think we're having some issues with our nav so yeah so at Scrolls we want this nav bar to close whenever we click uh whenever we click on on a link there that just makes sense so let's close this contact we're done with that let's go into our um our side nav here okay and we're gonna put this let's see we're gonna go to our basically we'll put this we just want to run a function to close um whenever we click on a link here so on our a tag here let's see we'll put it in basically all of our a tags so um and only the ones on the on this top um on the mobile menu there so there we go I think that's that's all of them there so what we'll say here is on click and basically we're just going to run the function that we created earlier handle nav so and again this is the the handle nav function so we're not necessarily setting it to true or to false but basically the opposite of it of its current value there so let's just go ahead and refresh and so whenever we click on um projects for example boom it zaps us down to projects okay so perfect all right so you guys let's go ahead and let's go ahead and deploy this thing to our own domain on hostinger okay so go ahead and click the link below hostinger.com code Commerce if you use my discount code you guys you're going to get like I said when you pick up the 48 month plan you're gonna get three months free plus a free domain you guys you get free email all that okay so let's just open this up go ahead and click on claim deal now we have several different packages here um I like this one in the middle 279 you're gonna get a hundred websites okay 100 gigabytes SSD storage gonna be blazing fast tons of visits like I said free email in here unlimited bandwidth databases free SSL certificate okay we're not using Wordpress or website builder since we're coders okay then you get a 30 day money back guarantee 24 7 Live support you guys and my favorite here a 99.9 uptime guarantee your site is going to be up all the time okay so go ahead and click add to cart again I like this middle one here um if you only if you want to grab the bigger package that's fine too or the smaller one just keep in mind for 80 cents you can have up to a hundred websites okay for only 80 cents more so let's scroll down here then yes we're going to be using our coupon code code Commerce there we go and look at this savings here you guys you get nice savings here let's go ahead and enter in your information click submit now here we are you guys now I've already claimed my domain so make sure you go ahead and claim yours just go to domains here and just click on get a new domain find your domain again I've already got mine so once you have your domain we're going to go back to websites here this is mine mycodecommerce.com sorry hosting here what we're going to do you're going to find your domain in here okay we're going to click on manage and then once you're here on manage this is for your domain what you're going to click on and this is your hpanel you guys this is where you can you have all your email order accounts domains website files and this is where we're going to upload our react our RV project okay so we're going to click on is file manager here now let's go back into let's go back into our code editor here and what we're going to do okay I'm actually going to close uh close stop our server with Ctrl C and um whoops let me close that there what we're going to write is I'm going to open up my side panel here but what we want to do is create a build folder so what we're going to type is npm run build and what that's going to do is create our build folder off to the left here so as you can see this dist folder and there now what we're going to do let's go ahead and reveal in finder pull that down here and that's what it's called for a Mac just open it up so you can see this disk folder here okay and what we're going to do this public HTML we're going to go into that there and we actually don't need this default.php so let's just go ahead and delete that now this in here the assets index.html let's just drag and drop that into here and that is all we need to do you guys so we already hooked up our we already hooked up our domain now it should take probably just a few minutes it might take about five or ten minutes let's go ahead and check out my domain which is mycodecommerce.com Boom there you have it you guys look at this beautiful website we just created and it's now hosted at mycodecommerce.com yours is going to have your own unique domain and again make sure you list how to use a professional sounding domain okay don't use something sounding really whack and it's just not going to look good to a business to potential employers okay our our form submits flawlessly everything is looking good you guys smash the like button I hope you got some value out of this you have a now professional looking portfolio live on the web thank you to hostinger for sponsoring the video and ultimately helping you put yourself out there to potential employers so thanks for watching guys smash the like button and I'll see you on the next

Channel: Code Commerce

Views: 46,745

Keywords: react, web development, vite, tailwind, css, web developer, front-end developer, developer resume, website, hostinger, host a portfolio website, javascript, portfolio

Id: 22CxRxryQFE

Length: 84min 38sec (5078 seconds)

Published: Thu Jan 12 2023