Code and Deploy A React Portfolio - React Personal Portfolio Website

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be showing you guys how to build a full react application which is basically going to serve as a personal portfolio for anyone who wants to have a portfolio displaying like your projects your experience and everything that you've done so far and i think this video will serve more for um kind of teaching the basics of react and teaching how to actually start creating websites in react but if you are interested in using the code that i used in this video um you can use it as your portfolio i don't care um all the code will be in the description so you can just check it out so here is a little demo of what we're gonna be building and in the video i'm not actually going to show myself i'm writing any of the css um because i don't feel like that will be the most valuable use of my time in this video i feel like if i were to spend all this time teaching this i should focus on the actual react aspect of it css is something that most of the time a react developer don't really have to do it on their own there's many libraries out there so if you want to check it out you can just use the css i have already created but i'm not going to show myself writing the css so basically you can see the website looks like this we have a homepage over here a bunch of links you can click on them um it has a little title a little description of yourself you can add more if you want to it's totally customizable but as you go down you see the little skill session um here you could put all the different skills you want i would recommend writing keywords just like this because um it is compatible with um like whenever someone is looking for a specific skill set um they don't want to spend a lot of time so when they see immediately you know react or angle or whatever then they'll know immediately that like they won't have to spend a lot of time searching exactly which skills you have they can just see everything laid out over here so you can see we also have a footer which will be present in every page we can then click on projects and here is where you display all your personal projects obviously um this are just fake projects but you can just you can change it to whatever you want um and you can add how many projects you want as well but if you click on one of the projects you'll see it will open an individual page for that specific project where it will include the skills in which you use to create this project will include the picture um you can put links over here for example a link to the github repository or a link to a live demo of it but as you can see um each page when you click on it it will open a specific page for that specific project um then we have the experience tab which shows all the different experiences and education you had you can change this depending on what um like makes more sense for you you can add certifications here whatever you want um but as you can see we can add some high school information university um jobs whatever you want and you can add how many you want as well i really like this kind of format um which is kind of like a vertical timeline um i've used it in the past in a portfolio which helped me get a job so um that's something that i i know it's overused but it's also really cool um that's basically it for the website right it's not that over complicated but it teaches you a lot about how to build simple projects and simple websites in react now all of this will also be responsive although i won't be doing the css i made sure it is responsive because um you shouldn't be doing websites that are not responsive um if you click over here you'll see i'm on an iphone and this is kind of how it looks on an iphone it might not look perfect but it does look responsive you see there's now the the navbar disappeared and now there's a button if i click on it um i can move pages right i can the links appear over here so let me go for example to the projects page and now the projects are all perfectly displayed if i go to the um let me see the experience page you'll see all the experience will be displayed as well so you can see the website is fully responsive and um it which means that it will work in every kind of device we're also going to be deploying this application at the end of this video so stick around to see that because we're going to see this application completely live and um you will be able to do the exact same thing if you're interested so with that in mind let's get into the tutorial okay everyone so the first thing we really want to do is actually set up all the hosting for this project um because like i mentioned we're going to be deploying all of this at the end and if you want to have a portfolio you really want people to see it so you want a version of it being displayed live on the internet um probably with some sort of domain so you would want to use a hosting platform to do this and the the platform that i'm going to be using in this video is one of the my favorite ones it is hostinger and the reason why i really like hostinger is because um first of all it is um not expensive at all they also with one of their plans they actually give you a completely free domain which if you don't know you have to pay for domains usually um but you can get one completely for free here um so if you want to deploy this website with your i don't know your name and then a dot com at the end you can just get that for free if it is available by using the platform also um the whole process is really easy so after you deployed this first version of your website and you want to make any changes it will be very easy for you to update it i'll show you guys exactly how you do it at the end of the video but the whole process is very simple and fast they have like 24 hour support so i've had issues in the past while deploying projects and um if i was in a situation where i really needed um some sort of immediate response on how to solve some sort of issue it would have been nice if i had this 24-hour support which is something that hostinger has so i feel like it's valuable to always take that into account finally if you actually want to um get your money back they'll give it completely for free you can see over here it says 30 day money back guarantee um so if you have any issues and you want um you want to stop using the service you can just get your money back and that should be all fine so i'm going to start out by showing you guys um how to set up your your your account on hostinger and how to start the deployment service obviously we're not going to deploy until the end of the video because we don't have the code yet but if you come down here you'll see that they have three different plans right um this this amount over here is all in usd for me um so take that into account you'll see they have like insane amounts of discounts right now and if you use the link in my description and you use my discount code you will get seven percent off on top of all of the discounts that are already here so the one i'm gonna choose is the premium shared hosting because um as you can see it provides me with a completely free domain and domains like i said they are expensive sometimes you have to pay way more than this per month most times actually way more than this per month just to have it so by getting it for free you're definitely getting your money back so i'm going to select this over here and you can choose how you're going to pay it obviously if you pay for two years in advance it's going to be way cheaper so i would definitely choose this one because if you're creating a portfolio you probably want it for a long time even if you want to make changes to your portfolio you can maintain the domain and maintain the hosting in the same platform so i would choose this one over here then you would create your account by either putting an email or signing up with any of these accounts over here you would obviously have to choose whichever way you want to pay for this they accept so many different ways um as you can see over here and then one important thing is you see we're already getting like an insane discount its original price would be 575 for two years which honestly um with all of the features that are added up this kind of makes sense for a for a hosting platform but with all the discounts especially because you're paying all in advance and you get a 75 discount um it's it only comes up to 143 which is pretty cheap for two years of hosting and also a domain you can also add my coupon code over here by just saying patreotec and this will go on top of that so you'll see it will become even cheaper which is amazing and it will also help support the channel if you use the discount code so it would be pretty nice then you'll just put all of your information over here related to your credit card i won't do that i already done that um i already have stuff set up over here and when you're finished you'll just click on submit secure payment and after you set up all of that up i'll see you guys on the dashboard okay so as you can see this is how your dashboard should look um and if you set up the the premium hosting account like i mentioned the premiere shed hosting you can actually claim a free domain a completely free domain which is exactly what we're going to be doing so if i wanted for example to and you can you can choose which kind of extension which is pretty nice because some of the extensions are are kind of expensive so by being able to choose it um and all of it being free it's pretty nice for example if i wanted to choose something like um i don't know pedro technologies dot com um we could just click on check availability and if it is available which it isn't um you would just have to choose something else you can obviously just change this over here you'll see that.net should be available as you can see and it is completely free right so if i were to choose this one um i would just click on claim domain like this and you'll see that it will start claiming my domain you can just choose whatever country you want to set this up right or your primary details i'm going to put canada because it is where i'm from um then i'm going to choose personal click on next step and it will start asking for a bunch of information i'm just going to put here my name my last name then you just choose over here where is your state i'm going to fill all of this up but you put all the information related to you and when you're finished just click on finish registration as you can see it is saying that pedrotechnologies.net is being registered and um when this is finished we should yeah it says you're almost there my information is under review and for now it should be fine we we claimed our domain but it is pending verification to actually verify this um we'll get a verification email and you just have to follow the instructions there so that you actually set up your domain fully so now that we have our domain claimed we can actually start you see it appears over here and we can actually start writing the code for the project so let's start doing that okay everyone so let's get into the tutorial so we opened up over here a little project um it is a completely empty folder inside of vs code and we're going to start it directly from here so what we want to do first is we want to open up our terminal and i want to run the command yarn create react app to generate a react application but if you are using npm the command is npx create react tab so i'm going to press enter over here and it's going to start generating my react application when it's done i'll come back okay as you can see um it finished generating our application and before we start digging into the code i want to install some of the packages we're going to be using inside of this project so in order to add the packages i'm just going to run write yarn add and then here are the following libraries that we're going to be using so first of all we're going to be using material ui for icons inside of our application so those icons like the github icon the email icon whatever icon we need we're going to be using material y it's just the simplest way in my view then we're going to be using react router dom as you can see over here rector rectordom for those who knows it's basically a library which allows you to have routes in your application and it's really important it's what makes us be able to navigate our website and finally we're going to be using react vertical timeline component this is the one um that allows us to very easily implement that um little timeline of experience that we had in the experience page um and it's gonna be really helpful for our project so now that i installed everything i'm gonna run yarn start and it should generate um or start our application over here so as you can see um now we are inside of our new react project it's empty but we're gonna start out by deleting some of the initial files that come with the project so first of all i'm going to delete the logo the index.css and the test files so this one's over here the reason why i'm deleting them is because they are unnecessary at least for the the project that we're going to be building and it just makes our code our our project look a little bit cleaner or easier to look at so that's the reason why i'm doing that i'm also going to delete all of this stuff because we want to start directly from scratch you can see that it is empty right now meaning that um it is how our website looks right now so we have our app component over here and i like to use the app component as a component that will help us generate and define our routes so in order to define routes inside of a react application what we're going to be doing is we're going to be using the react router dom library um like i mentioned and in order to use it we're going to just come over here and say we want to import from react or dom and we want to import a couple stuff first we're going to import the browser router component and we're going to call it just router so it's easier then we're also going to import the routes component over here and the route component i know they all kind of sound the same but they're very different um if you want to in-depth explanation of what each of them does individually um i have a full tutorial on react order dom version 6 which is the most updated version so i would definitely recommend checking that out because i'm just going to be using it in this video i won't be going too much in depth but as you can see over here in order to define our routes we're going to just use the router component then we're going to define the routes component over here and finally in order to define each of the routes we can just use something like this a single route component we add a path which is just the the url we want to or the path that we want to use in order to render this component and then we pass an element tag over here and we pass the exp the specific component that should be rendered if we go to this path now what do i mean by this well basically we're going to have different pages in our application and to define a new page we have to define it this way for example we're going to have our home page we're going to have our projects page so in order to go to the projects page we probably want to go to the projects route and we're going to probably try to render a component called projects or something like this and if we want to go to the experience page which is the other page we have we're going to need to go to the experience route and we're probably going gonna render some component called experience now obviously um we had we don't have this three components yet right so basically what's happening right now is it's not doing anything if we go over here it will just say that it doesn't work because those components don't exist but in order to make this work we're just going to create a little folder inside of our application we'll call it pages and inside of here is where we're going to create all the different components that are going to represent a specific page so for example we're going to create the home component we're going to create the projects component and we're going to create the experience component like this now each of these files will basically just contain a simple react component like this and i'm using a snippet to generate this um it is the i've mentioned it in a couple videos basically it is this snippet over here the es7 plus react redux um all this stuff if you want to download the snippet just go and download basically all it does is whenever i write rfce it will generate a simple functional component for me with the name of the file so we've generated a component for each of this um specific pages right and since we are importing them over here or we're calling them over here we also need to import them individually so to import the home component from the home file what we have to do is we'll just say import home from dot slash pages slash home and we'll do the exact same thing for all of the other components we only have three so i'm just going to say projects over here and i'm going to say experience over here and we're going to obviously have to change this to projects and this to experience now we're going to save this and you'll see that it doesn't um it's not actually erroring anymore it's actually just showing whichever component you're in so we are in the empty slash which means we're in the home page but if i go to the projects page it should say projects because this is what we rendered over here in the project component it's just a div same projects same thing happens if we go to the to the experience page right it will just say experience so we just checked and saw that it is working so what exactly do we want to do now well we'll start out by building our um our navbar the reason why we're going to do this is because um in every page should there should be a little number on the top over here and a footer right at the bottom so we're going to start out by that by making that so let's start by creating a folder over here in our project called something like components i'm also going to zoom in a little bit so it becomes clearer for you guys the reason why we created a different folder called components is because pages we should only include files that define a single page now components um will be just different components that we might reuse in our application that isn't a page so for example a network will be an individual component that is not a page it's just something that exists inside of our inside of a page right so i'm going to create this navbar component and i'm going to run rfce so we generated over here our nav bar and what we want to do is we want to start out by defining the structure of our navbar so our nav bar will be just a single like stretch right a single div which is kind of a rectangle um so we're going to set a class name to this div of navbar i mentioned in the beginning of the video that i won't be using i won't be showing me writing css however if you're interested in using the css styles that i create um you you'll have to use the same class names as i am because the files will be using those class names so if you're interested just check it out then what i want to do is i want to create another div inside of here and this div will be basically for the button that appears when your screen is smaller so this is how we're going to actually implement this so i'm going to call this toggle button like this um and inside of here i'm just going to add a little button which um for now like it won't for now let's just let's not even add anything inside of here let's just create the button but this is the button that you're going to use to click um to expand the nav bar whenever it is like you're in a smaller screen um then what i want to do is i want to create another div down over here and this div will be the div that contains the links so i'm going to put class name over here and this class name will be links then over inside of this div we want to define each link that will exist in our navbar now in order to create a link you could obviously use the a tag which is common in html but in react router dom we actually have another tag called the the link component and the link component you import it directly from react router dom now this link component is really important because this is how you should actually create links inside of your application if you're using react or dom you just call the component over here like this you put the text inside of it so for example the link will go to the home page so i'm just gonna write home and then you write you pass a prop to it called two and whatever string you put over here is the actual path that you want this link to link towards right so the home link should go to the home page and the projects link if we do it like this should go to the projects route and the experience link should go to the experience route so we're just going to say experience like this now obviously the navbar doesn't look like anything now but let's actually import it real quick inside of our app.js now the reason why we're gonna import this navbar over here and not inside of a specific page is because um the knife bar will exist inside of every single component so what we're doing over here is we have three pages right but the only thing that should be changing in our screen is everything in between the navbar and the footer right the navbar is the top of your website and it should maintain the same no matter what page you're in and the footer should be the bottom of the website and it should be the same no matter the page you're in so we actually put the nav bar on top of all of the routes but we don't put it inside of the routes thing because this routes component basically just means that all you should put inside of here are actual routes we actually put this in between the routes and the router and we'll just say navbar over here the reason why we do this is because now the navbar component can is inside of a routed project meaning it can use stuff from react router dom like for example the link component but at the same time it is not a route it is just a component that exists in every single page and whatever is below it is the thing that is changing so if we actually take a look over here we'll see that now our website i know it kind of kind of looks empty but it basically has a very simple navbar and it is changing everything below it is changing depending on the routes so if i go to the projects route it will change the project to projects over here if i go to the experience one it will say experience and i can just keep tagging along and the links will work perfectly now in order to actually continue implementing our navbar i want to add some css because um it will in order for you guys to understand what we're going to do next you have to kind of have a visual representation of it so what i'm going to do is i'm going to implement over here a folder inside of our project called styles and this folder will contain the individuals css files for each component that we want to add styles to so for example we want styles in our navbar so i'm just going to create a navbar.css component and inside of here i'll add all the css related to our navbar component now how do you import the css file inside of this component well you just say import and put the path towards the css file so i'm going to say styles slash navbar.css and um like i mentioned i won't be showing the css so i'm going to copy the css that i already wrote and i'm going to paste it and just show it to you guys okay everyone so as you can see i just pasted the css again if you want to check it out just check take a look at the code in the description but if we come over here you can see that it looks really nice right it looks exactly how i showed you guys in the beginning now i also added another thing which is a style to our app.css file i deleted everything that was already here and i just added this small thing over here this will just remove any margin and padding inside of your application so i will i would recommend you doing this in every project you actually um start building now we have this thing over here and the reason why i wanted to show you this is because um what i want to do is i want to be able to change my my screen size like this and go for example to uh like open this website inside of a iphone or or something like that and be able to see everything looking perfectly now the styles that i edit from css a css point of view it's kind of doing that it will as you can see over here it will basically um change like make the links disappear if it becomes too small for them to exist because if we kept going and the links continued here they would get cluttered and it wouldn't make a lot of sense so with responsive websites you you should have a plan depending on the screen size right so what i create what i want to do now is i want to implement some react logic that will make it so that whenever we get to a smaller size for example um if we get when the links disappear i want a little button to appear over here where when you click on it it will actually open the navbar in a vertical way instead of horizontally the reason why we do this is so that mobile users can actually use your website and i would recommend because a lot of actual people look at your portfolio in their phone so i would make the website responsive for sure now the way we're going to implement this is first of all i want to create the button which we're going to be able to click so i'm going to be using an icon from um material ui which will represent the little icon you saw in the beginning of the video for the button now that icon is called a reorder icon and i'm just gonna call i'm just gonna import a component over here called reorder icon from um at material ui icons slash reorder like this and when we import this i'm just gonna copy this and i'm just gonna use it as a component inside of this button so this is it's how it is this simple um the way you can actually um import this icons using material ui if you want to use another library feel free to do so too but what this means is that now if we go below the the the the width necessary for the links to disappear a button should appear right and obviously um the css is doing this is that the css that i added is doing all this work for it to disappear depending on on the screen size however it doesn't mean that we don't have to write react logic because we do in order for whenever you click this button to open up the navbar so what we want to do is we want to create a state in our application which is going to determine whether or not we expanded the navbar or not so i'm going to say expand navbar as the name of the state and a function to uh to change the value of the state will be called x set expand nef bar and this will be a boolean we're going to say use state like this and inside of here we're just going to initialize it as false but what we want to do is whenever we click on this on this button we'll just say on click we want to basically just toggle between the values of true or false so we're going to create a little function inside of this that whenever you click the button all it's going to do is it's going to set the expend navbar state to be whatever its previous value was not so we can just say prev not prev and it will basically if it was true it will become false if it was false it will become true if you're not familiar with states i would recommend taking a look at it i do have videos on on the user state hook um it is extremely important and we're going to be using um not that much inside of this video but i would still recommend taking a look at it because it is extremely basic and really important for react um so basically now that we set this over here we can use this state to determine if the navbar has expanded or not now we want to do all of that logic in the css and i actually already did we actually have um two elements inside of our css inside of our style over here we have one called open and we have one called close now we want the element over here the the actual navbar to have an id of open if um if the expended navbar is on or is true and we want it to be fall to be closed if the expand navbar is false so what this means is we can just come over here and say if expand navbar is true then the id for the navbar div will be open if not it will be close now we can just do magic with our css over here or just if you can take a look at the file and see what i'm doing but basically what this means is whenever we come over here and it becomes small enough for the button to appear now if we click on it basically the id for this navbar if i even open this over here it's open but if i click on it again it will become close you can see it's changing the id inside of our html depending on the state of our application and we're doing all of this using the use state hook so now our navbar it's basically done um one thing i want to point out is the fact that if i actually open this up and i go to the mobile view you can see that if i go to another page like projects i am in the projects page now but it still maintains open right you're navigating but it's not closing depending on which page you're in what we want is whenever you switch a page or you go to another route we want this little thing to close right immediately so a simple way we can do this is take use of the react router dom location api and this is really simple but also a bit complicated if you if you don't understand react router dom a lot basically just know that there's a hook in react or dom called use location and inside of here we can just grab the location by saying const location equal to use location now this location state or variable over here is is just a a variable that can be used to get information related to where in your website you're in right which route you're in so what we want to do is we're going to create a use effect which is basically just a function which can can run a infinite amount of times but we all we only want this function to run if this location variable changes right and the reason why we want to do this is because if the location changes we'll set the expanded navbar to false so by putting the location variable inside of this array over here inside of the use effect we're just saying run this use effect whenever the location changes and whenever the location changes set the navbar expand navbar variable to false which means it will close the navbar so if we look over here if we try that again we are in the home page and i go to the projects page now you see that the location changed so this was called again and the expand network state was set to false if this logic is complicated don't worry you don't even need to implement this i just think it is a really nice thing to have in your website um because it is good for user experience but it will teach you a little bit about use effect and about how hooks works um again if you want to learn more about this just do some research about the use effect and any and all of the kind of stuff because it is extremely important in every react application now what we're going to do is we want to implement a footer to our project now the footer i won't spend a lot of time in it because it is not that important but it is basically a component that will exist kind of at the bottom of your website and it will be served the same purpose of a navbar but it isn't meant for navigation it's just meant to be there right so for the footer we're going to import over here just like the navbar we're going to say import footer and we're going to put it right below the routes so right over here and the footer all it's going to include is um a couple links um to like your instagram your twitter your your facebook whatever your github whatever links you want to put over there um and also a little tag saying that this website is owned by you so to do this um what i want to do is i'm just going to obviously add some class names to the div because it is needed for the css then i'm going to use another div over here which will include all the different icons we want to include and finally i'm going to add a p tag which i'm going to use a unicode symbol by implementing this this copy like unicode over here basically it will generate the little ad which is which appears usually in footers and websites and then i'm going to put the date today and i'm going to put something like your website url this is very common in every website and it's usually done like this then over here we just want to put some icons that are going to look that are going to link to to our social medias right so for example this are a couple icons that you might want to use so in order to use them i would just put them like this and um do and they will should appear in the screen now obviously you might not want to use um or show your instagram your twitter just show whatever you want you don't have to show something you don't i would recommend also putting some sort of email over here as many links as possible to where it shows you've done your work or where they can contact you in order to talk about some sort of job or some sort of position i put all four of those but you don't have to right we also want to create a css file for this um like i mentioned um i don't i already have the file for this um so i'm just going to copy and paste but i'm going to put over here i'm going to import the css file inside of this component i'm going to go twice back and then i'm going to go to styles slash footer dot css i'm going to paste the css and i'll come back in a second okay so as you can see i just pasted the the css over here we're also going to add a class name to this div which is going to be the social media class name and now if we come over here you should see that this is how our footer looks right obviously it's not at the bottom of the website because there's nothing in the middle but our footer looks kind ok right it has all the links and they look pretty nice we also have this little thing at the bottom which is what i was talking about and i kind of like it it's it's it's it just shows um which website domain you own um and which ear it is now we want to start writing the code for our actual pages so i'm going to come over here and we're going to start with our home page because it makes sense it is the home page it is what we want to start with so in our homepage over here i want to go step by step but i'm going to be adding the class names so so in our home page i will start out by just adding our class name over here for our div and the class name will be home then we're going to create a div over here which is going to be a div for kind of the about section which is that little your name a little sentence about you and your social media information that i had in the demo and this will have a class name of about however right at the bottom we're gonna have a div called the skills div we're gonna add the skills that you have in the field right over here so now that we have the kind of the structure for for how our homepage will look let's start writing um everything that will go inside of this so first of all in our about page or about section we're going to add an h2 tag which will just say something like hi my name is pedro or you put whatever your name is i'm also going to capitalize some of the letters but basically this is the little text that appears right at the center of the screen then we're going to add a div which is going to be kind of like the the information or i'm going to call it the prompt it's just like a sentence about you right like i'm a software engineer who loves coding or whatever you want to write over there so i'm just going to put over here a p tag which is going to say a software developer with a passion for learning and creating something like this um then what i want to add is a couple links inside of our project because what i want to do is i want to have the icons for for example the linkedin the email and and some other social media icon so the main icons we want to have is actually linkedin email and github so i'm going to import each one of them over here inside of our component as you can see i just imported all of them and i'm going to be using each one of them inside of here i'm going to say the linkedin icon the what else the email icon and the github icon like this email icon and the github icon now i'm going to save this and they should be in our screen if we take a look we actually we aren't seeing anything um and the reason for this is because we're actually not in the home page but let's go to the home page and you should see that this is how it looks now obviously the css hasn't been added yet but let's start writing the skills section of our home page first and then we're going to add the css and you'll see how it will look now for the skills what i want to do is i want to come over here and i want to add a little h1 tag that is going to say skills like this and then we're just going to add in a cup like an ordered list right over here which is going to represent um each skill that we want to um to display right so i'm going to add a class name to this um list it's going to be called something like list um and then we're gonna add a an item so l i and it's gonna have a class name of item and then i'm gonna save this and inside of here we're gonna add an h2 tag which is going to be kind of our like the each section of skills we want to display so first we're going to say front end and we'll put over here a span which is going to display all of the frontend skills we have then we're going to if we want to add a backend one we'll just copy all of this and just change this to backhand and just put all of the backend skills inside of this pen we'll do a final one which is going to be all the languages we know so like um programming languages i mean so i'm just going to put over here languages and we can put all the languages inside of this pen now obviously um it is you can put whatever you want over here i'm just going to copy paste a bunch of random stuff and i'll be back in a second okay as you can see i just pasted a bunch of random skills that you might want to know for front end a bunch of skills you might want to know for back end and a bunch of skills you might want to know for not not skills just languages right but fill this in with whatever you know um it also doesn't have to be front and back and in languages if you are just a frontend just put fronted information if you're just back in just put back information um and don't worry um if like just put just be truthful in this part put whatever you know and it should be fine so now you'll see that if we come over here you can see this is how the structure of our page kind of looks like with the css it will look very different but even like this it's already kind of cool you can see all the skills you have you can see a little introduction and it looks pretty good now i'm going to add the css to this by creating the file for this page so i'm just going to say home.css and we're going to import this file over here by saying import double slash styles slash home.css now i'm going to paste all the css and i'll be back in a second okay as you can see i just pasted all of the css i'll close this and now let's come over here and you'll see that the home page looks a lot different the css definitely gives a better touch to it it has all of the styling all of the colors everything and it looks pretty good now you can edit the css to however you want it doesn't have to look like this but um feel free to use the same styles as i am as well now we basically just finished our homepage but the homepage actually isn't the hardest page we are going to create inside of this project the hardest page in my opinion is probably going to be either the experience or the projects page now i'm going to actually leave the projects for last and the reason for that is because it is a little bit it takes a little bit more time so i'm going to go directly to experience where we actually have that little timeline displaying the experience we have in our um work like work experience and educational experience so let's do that right now so in our experience page what we want to do is we actually want to display the little vertical timeline and we've already installed the vertical timeline library so all we have to do is we're going to create a or come to our experience file inside of our project we're just going to import over here at the top the vertical like vertical timeline component from react vertical timeline component the name of the library is kind of funny but basically we're going to import this component and we also need to import another component called vertical timeline element now it's super easy to use this library they do everything for you even the css but if you want to use their css you actually need to import their css file inside of here so i'm going to say import react vertical timeline component like this react vertical timer component slash and then we put style dot min dot css this is how we're going to import their css file now if we want to use the components all we have to do is we're going to grab this component over here we're going to go down inside of our file and we're just going to add a vertical timeline inside of our application now i'm going to add a class name to this which is going to be experience just so the css that we write matches what the page should look like and when we create this vertical timeline you'll see that um nothing is displayed in our screen because we don't have elements in it yet but if we add an element by coming over here and saying vertical timeline element you'll see that now it should be displaying something and it does but it it looks completely white because we haven't added any um styling or anything related to that so let's start doing that first of all i'm going to set the line color of this timeline to be the color that we've been using throughout this application it is this dark blue that we have over here now i remember the actual hexadecimal so i'm just going to write over here but try to make it match whatever colors you're using this is the color that i want because it matches my website then what we want to do is we want to add a couple class names uh or a couple styling stuff to this element and subsequently the the other elements we also have um the actual class name i'm going to be using is a class name that is used for already in the css file that they created so this class name is vertical timeline element double dash education so this means that if you're going to use something from them use the same class name as this one over here and the styling should be applied then we want to set a date and a date in this component is just a date between like um of when this thing happened right so for example um if this is the for example my first high school um i can just put that it was between 2010 to 14. mine actually wasn't i'm not that old but let's just pretend it is this is the date where the person for this website went to high school then we also want to put in icon style and an icon style is just a little circle and we can determine some css styles over here that will match that actual um circle so i'm going to add a background and the background i'm going to add the same color as i edit over here as you can see over here we can also add a color tag over here for the text and it will just be three f's and you can see that this is how the style now looks right um it's looking pretty okay in my opinion then we want to add an icon to this timeline so the icon will be um what is displayed inside of the circle so this is a school let's let's say that this element will be a school right because we put education over here so it is my high school experience this is what i'm trying to show the employers so there's actually um a school icon from material ui so i'm going to say from at material ui icons like this slash school and if i put this over here and call this component you'll see that this is what we see we see a little scroll icon over here now obviously it's it's black and we want um it's not visible but don't worry about the css as we go it will start getting better now what we want to do is we want to add all the stuff that goes um over here right we just have the date but we want to get information about the school and like which school you went where it was all the kind of stuff so what we do is inside of this two tags over here we actually design how it will look so for example for the the high school name and where it was i can say something like my random high school and put the actual place right so it was at a random place at a random state but obviously put your correct information over here we're also going to add a class name to this which is going to match a class name from the library this class name will be vertical timeline element title like this and just keep in mind that you should be using this if you're using the same styles as the library then what i want to do is i want to add a p tag over here and say that this was uh i got a high school diploma out of this so this p tag over here will kind of be where we we specify what kind of degree or what we got out of this experience so now if i save this you'll see that it shows over here that this is how um this was my experience now before we move any further i want to just add the css real quick before we actually continue which is a bit different from what i've been doing with the other components because i feel like this one is very visual so being able to see everything already done as we go is pretty nice so i'm going to create a experience css file inside of our styles experience.css and we're going to import it over here at the top as well now one thing i really want to do right now is just add some styling to the background of this which i forgot to add in the beginning this style will actually go inside of our app.css um it's just styling that i've done and i forgot to add but basically this is how our app.css should look like um i changed a little bit the background um so you can see it looks a little bit better especially contrasting with the white out of this box but it just makes it look a little bit better even at the home page i feel like it does give a better look to it so sorry i didn't add this in the beginning but i'm just editing it right now and i feel like it looks good another thing i wanted to point out is the fact that there's animations inside of this component whenever we move to the experience tab you'll see the thing has a little animation which is pretty cool in my opinion also i realized that i actually um forgot to add an r to this color thing over here that's why the icon is not being white but that's how it should look um i apologize for that but it's just a miss type um this should be same color but the important thing is that now you can see how we're generating the each part of the timeline so what i'm going to do is i'm going to add all of the other parts of this timeline not back in a second because it will be just me repeating everything and you really don't want to see that do this part on your own try to add everything that is related to your timeline so that looks more like yours so what i'm going to do is i'm just going to copy and paste and i'll be back in a second okay everyone i just pasted everything and this is how the website actually looks so we'll see we have um two school educations that's what i decided to add one for high school one for university and then one first job experience and one um the job experience until the present ignore all of the information i put over here it's obviously not accurate i'm just putting random information but put it correctly in your case so some of the changes i made was i just copy and pasted a new vertical timeline element for each of the new um like new events that i wanted to add now you see a couple of them are different because this is i like to differentiate the education ones from the work ones so what i did to differentiate is for the work ones um which which starts over here um i just changed the color of the background to another color this color is different from the the blue one this is the yellow and i also added a work icon instead of the school icon and to import the work icon i just grabbed it directly from material ui just like this and we have our experience thing looking perfect so that's pretty good now we kind of have this page almost done actually it's completely done um we only have to do the projects page inside of our application but this is the most complicated technically the most time consuming page because it is more than one page right we're going to display all the different projects we have inside that we've created and we want to be able to click on the project and go to an individual page that shows information just about that project so let's do that right now so in order to create our projects um page over here we're gonna come inside of our projects file and um what we wanna do is we wanna first of all create create this div and give it a class name of projects like this then we're going to have a project title if we want to it's going to be an h1 tag saying my personal projects something like this then i want to have a div which is going to be a div where we display all of our projects right i'm going to give it a class a class name of projects project list and one thing i want to point out is that each project will be very similar right it will be kind of like a a square with a picture in the name of the project so what we can do is we can actually create a component called project item or project yeah just project item which is going to be a component representing a project each project will be almost exactly the same so we can do something like this so that we don't keep rewriting code so a project item will basically just be a div with a class name that we can just edit right here the class name will be project item and inside of this div what we can add is another div which this div will basically include the background image for our project and we'll also have an h1 tag with the name of the project now how are we going to get that information from different projects and display them differently but having the same component well we're going to be passing props so we're going to have each project item should keep in mind two things an image and the name of the project right and those two things will be useful the name will just display it over here now the image if we want to display the image as kind of like the background image to a div like we had in the demo i'll have to give a style over here and just put background image and we'll just pass over here a url and the url to the image is just basically um we'll put the template like this and just basically pass the image inside of here we'll also add a class name to this which will be used for my styling but the class name will be bg image like this just just just this name so that i can access it in the css now this looks okay but in order to actually see this working we would have to come over here and try to create some um project items so i'm going to create a couple like this i'm going to write two just for now just so you guys can see we're reusing all of this code by just calling this component right over here now we have to pass the props right and we also have to import this component so i'm going to say import project item and it will automatically import for me but also i want to import some sort of image that we're going to pass inside of this prop over here because if you recall um this project item component should have a name which for now let's just pass a name a fake name like social media website and it should have a picture right the image like this and the thing is we don't have an image yet so i'm gonna paste i'm gonna create a folder over here instead of the source folder called assets and this is a folder that is gonna be used inside of a project for adding stuff like images videos files anything that is an asset to the project it's not actual files is or pieces of code it's just visual stuff or stuff that can be like deemed an asset so i have a couple pictures i have six pictures of like fake projects that i'm gonna be putting but here's where you put the pictures to your specific project so i'm gonna put all the pictures for mine inside of here and i'll be back in a second okay i just pasted all of the images also keep in mind that some of them have different extensions this is why i did it this way um they have different extensions which is something you should take into account whenever you import images right but you can see that the images are just like images of fake projects that i will be using inside of my application so i'm going to close this over here and i'm going to show you guys how to import an image in react so if i want to import for example this first one over here which is proj 1 jpg i'll just come over here and say proj 1 or whatever name you want to call it and say from and you put the path towards that image so i'm going to go to the assets folder and then go to proj 1 dot jpg now i can add this inside of the image tag over here and it should be working i'll do the exact same thing for another project item and let's test it out i'll call this something like spotify clone and i'll add the spotify clone picture that i actually got from from from the internet so this one over here it's project 3 dot web p so i'm going to import that picture and we'll just pass it over here like this now if i save this and i put project 3 over here you'll see that it doesn't actually work the reason why it doesn't actually work is because in order to display this image over here i actually need to add some important css so i'm going to be adding similar to the experience component i'm going to be adding the css in the beginning um so that we can keep seeing the changes as it goes um but keep in mind that if you want to check out the css just go in the description so i'm gonna come here paste the css and be back in a second okay so i just pasted the css and we have to import the css file over here by saying import and we go to the styles folder slash projects dot css now one thing i want to point out is um i added the the actual styling oh i call this project.css not projects so let me change this and call this projects but one thing i want to point out is i put the styling for both this component and the project article item component inside of the same css file now does that mean that i need to import this one over here as well no it doesn't mean that because what happens is if i import inside of this file over here the projects this component is above the project item component because it is calling the project item component so what this means is that whatever style i import over here can be accessed for every component below this one including the project item so i don't need to import it twice but now that we imported it we can check it out and you'll see that the styling actually works the components are being displayed now one thing i want to tell you guys is by adding them individually like this it's kind of annoying it is not efficient in a developer sense in react we can do much more than this especially by the way that the react works so what i like to do is i actually like to create an external file that is going to contain information about each of the projects we want to create and then um just loop through a list and display each project item individually now if that doesn't make sense you'll see what i mean in a second this is actually something really cool that i always do in my react projects so i'm going to create a folder over here and i'm going to call it helpers helpers basically just means um this is just a file it's just whatever files i need that is going to help my application in any way and that doesn't isn't a component i'll just put it over here so what i want to create is a list of projects so i'm going to call this project lists like this project list dot gs and inside of here all i want to do is i just want to export a project list which is a list of projects but the format of this list or this array is going to be of objects right so we're going to have our first project over here and we can structure the project in this following way we can give a name for example like um the name for the first project we want to create is is just that it is an algorithm um visualizer so i'm just going to put this and then we can put for example an image and the image would be something like proj1 which is the the project that we the image of the first project so i could just put it over here now why are we doing it this way because now we can create a list of objects like this and it will be much easier and much quicker than just copy and pasting each component individually now what i want to do is i want to paste all of all the different projects that we're going to have we're going to have six projects and i'll be back in a second when i finish populating this list okay so as you can see i finished populating the list we have six projects um each of them with a different picture and each of them are represented by an object containing two pieces of information a name for the project and an image for the project what exactly does this mean it means that now if i come to our projects folder over here and i just import this list by saying import from two dot slash helpers slash project list and i import the the actual array we can actually instead of copy and pasting each project item individually i can just say project list dot map and the map is a is a function in in javascript which basically it will loop through each element in the list and we'll just return a project item like this and how do we pass the correct props well when you map through each element you can grab the individual elements by passing an argument to this function and now if i pass the name for example if i want to access the name i can just say project dot name and for the image i can do the exact same thing i can say project dot image you'll see that it will continue working but not but now it will loop through all the elements and will display all the images without actually calling the the project item or writing the project item more than once we only write it once and do the array and make the array do all the work so this is a cool way of doing this um it is honestly the way that i would always do it because it just makes more sense and we can maintain an organized list of projects by writing the data like this now i also realized i accidentally wrote project list instead of project list if i save this the correct css styles will be applied and our styling should look like this which is very similar to what it was looking in the beginning of the video which is really cool now we're not able to click on each of the items which is exactly what we want to do so how would we do something like this well in order to be able to click on each of those items we obviously have to create a new page that will represent um like each individual item right each individual project so we have six projects over here doesn't mean that we'll have to manually create six different routes well no because there's a very efficient way of doing this and i'm gonna show you right now what we can do is we can come over here to our route definition which is our app.js and we can actually create a route which is going to have a path of slash project instead of projects but then we can put what is known as a param this param we're going to pass the id as a param but basically what it says that whenever you access the project route whatever you put after the slash will dictate what page will be displayed so we're going to have one component but that component will show in from like different pieces of information depending on what we pass in our url so this is really common in react and everywhere else and it's really interesting so i'm going to actually create a new page over here instead of our pages folder this page will be called project display it's just a page for each project being displayed so i'm going to just create the component and i'm going to pass it right over here like this project display and then close this so what we have right now is we have this component called project display which depending on what id we pass over here um it will display something different but how do we access what id we pass on the params well in react router dom we have this thing this hook called the use params hook so i'm just going to say use param over here and i'm just going to say const and then i'm going to open and close curly braces to the structure and object and pass equal to use params so i can just destructure the id from the parameter and i can just display it in our screen now you might be confused right now what all of this means but i had to do this so i could explain to you better basically what happens now is we have this route in our application called projects and depending on what we put after this sl the second slash like whatever number we put over here or it can be anything this is what is going to be displayed in our screen right we're grabbing this piece of information um from our url by using the use params um hook and the reason why we put id is because whatever you define as the name over here is what you should put or this structure over here now why do we want an id for this right how is this going to help to help us right well because if you recall each project over here in our file they are an object inside of an array so if we know for example where in the array this object is we could technically access the information so this is exactly what we're going to be doing i'm going to come over here inside of our div and i'm just going to say const project equal to project list so i'm gonna import the project list from from our helpers like this import from dot slash helpers slash project list i'm to import the array with the projects and depending on the id this is where we're going to access our list or our project so what happens now is if the id over here is zero for example oh i forgot to save this if the id over here is zero then it should be displaying the first project if the id is one it should be displaying the first project because this is the position of the project in our project list right so what we do now is we start building our component based on this project so i'm going to give a class name to this div obviously it's going to be called project then it's going to maintain very simple we're just going to have an h1 which is going to display the name of the actual um project then we're going to have obviously the image of the project within a source and the source will be equal to the project image and we also want to add a couple more stuff we want to add a github icon so i'm going to import the github our github icon from at material ui icons slash github and i'm just gonna display it down here and we also want to display a couple lists of skills that were used while building this project you can see that right now it is working we are in project two or since arrays work i'm starting from zero we are in the index one which is the second project but if we go to zero we'll see the first project and if we go to three we'll see the second project it is displaying the information based on which id is over here now what i want to do is i want to be able to display some skills obviously we don't have um the skills we didn't put anything related to skills on each project so i'm going to add a new field to each of these objects called skills and it's just going to be a string with all the different skills that were used to create this project since i've already done this i just pasted all the skills for each of the projects um you can do this however you want but basically just added some random skills um or technologies or whatever um to each of the projects and now if i want to display it in our screen i can just come over here and say something like i'll just add a a p tag and i'll add like uh i'll write skills and i'll put um projects dot skills you'll see that now it should be display the skills over here right i also want to make the skills this thing over here be bold so i'm going to put a b tag over here and you'll see that now it looks bold while the skills don't it's just a nice touch in my opinion now obviously we want to add the css to this so i'm going to create a file called project display dot css and this file i'll just paste the css and i'll be back in a second so i pasted the css and in order to make it effective we need to import this file over here like always i'm just going to import by doing this project display.css and now you'll see that this is how the page should look if we go to the first one this is how it looks um it has all the skills and everything it looks pretty good um and it's displaying the correct information now the thing is it still doesn't work right because we we have to manually put the route over here and we don't we're not clicking on this and going directly to the page so how would we make it so that when we click on each of these this individual items we go to their specific individual pages well to do that it's not even that hard all we have to do is we have to go to our project item component which is each individual project being displayed in the projects page and over here i want to make it so that when you click on this div you are able to navigate to another page so if you if you hear the word navigate it is important because um there's actually a hook in react rotor dom called the use navigate hook so i'm going to import from react router dom the use navigate hook now this used navigate hook is really is really cool because i'll just i can just define a function called navigate set it equal to use navigate and now this function over here whenever i call it for example i'll put navigate over here and i pass a string over here with some sort of route uh whenever this is called it will navigate your page to that route right it will act like a a redirect right so what we want to do it for example i'm just going to point out as an example if i want to go to the home page every time i click on this button obviously this is not what we want but just to show you guys whenever i click on one of this it will bring me to the home page right but there's no home page with the slash home that's why it didn't show anything but you can see it works for each of them because we're applying it directly inside of the project item component which all of these things over here are made out of so what i want to do actually is i want to navigate to their specific pages the way we're going to do this is i'm going to put that i want to navigate towards the project route the individual project route and i want to navigate towards their specific ids but how do i know which id we're clicking at well we we know because we're looping through each of the projects right if we go to the projects component over here we're looping through a list so we can grab the index of each we can call it index over here like this from each element and we can just pass it as props um to the project item component right and we just create a prop called id and pass the index from the element over here and now if i just grab id as a prop it should be passing the correct one and when i click on the on the item it should navigate me to the correct page we can test this out by click on the first one and it should navigate me towards project zero which is exactly what happens and if i go in the second one it goes to the correct one i can keep going and it will keep going navigating me to the correct one because that's how we implemented the actual code so we can see that our project is basically done right we have all of our pages over here and it looks pretty nice we have our experience we have our projects we can go to each individual project we can go to our home page we have our footer our skills everything is completely done so we went over a lot of stuff in this tutorial while writing this code however we are not done because we still have to deploy this application and in order to deploy this application we're going to be using an amazing service called hostinger and this service will allow us to deploy this project in a very easy way everyone now that we're done with the code let's start the deployment process into deploying this into hostinger so as you can see since the code is completely done we basically don't have to do anything else but we do have to run a command over here which is going to be a command that is going to create a build version of our application this build version is just um all of our code bundled into a single folder and this folder is the one that we're going to be using to deploy inside of hostinger so to create this build version we can use yarn build if you're using yarn or if you're using npm you just run npm run build right i'm using yarn so i'm just going to run yarn build and when i press enter it will start generating a build folder inside of our project this version will be optimized and will include all of the stuff related to our project as you can see over here so now that we have that we're going to open up our our hostinger panel by going to hpanel.hostinger.com and then we're going to click on our um domain right this one over here we can click on manage and then we need to come over here to hosting where is where we're going to actually start hosting our project we're going to click over here on premium shared hosting and click on setup and it will ask us over here help us provide a perfect experience by answering a few questions so we're going to click on start now it will ask us who am i creating this project for or this website for i'm going to click myself then it's going to ask what kind of project is this obviously for us it is a portfolio and i'm going to click on that then it's going to ask what kind of experience you have um if you're a beginner and this is your first website click on this if you have a bit of experience let's click on this but i'm going to click on um a professional website creator or whatever that means but basically it will then ask you to select a platform since we're building the project from scratch we're just going to click on skip and say i will start from scratch and when we click on this it will ask us to name our website and we can choose to use an existing domain that we purchased outside of hostinger but like i mentioned since hostinger gives us for free we already set up our domain in the beginning of the video over here so i'm going to choose that one and i'm going to click select then you'll see that we can choose which server location our project will be deployed in the location is really important um in the sense that obviously the connection will be way close way better if the person is is accessing the website close to this location but um it doesn't really matter after all wholesaler has a location everywhere around the world as you can see and it doesn't mean the person won't be able to access it it's just faster if they're closer so i'm going to choose the united states one because this is where i'm closer to and then i'm going to click on finish setup now you can see that our website is technically ready we can click on view website but this will basically not do anything because our website hasn't been deployed yet so um technically it'll say our account has been created but we haven't deployed anything so we're going to click on manage website and it's going to bring us to our dashboard over here and we have a couple things that we have to do in order to deploy our website fully so we're going to go down over here and we're going to choose the option which is file manager so this one over here is where we want to put our build folder so we created the build version of our project which if we open our project inside of our folder manager over here we'll see the build folder is right over here so what we want to do is we're going to click on the public.html thing over here on the left side and we're going to see that there is a default.php file over here obviously this isn't what we want inside of our website so we need to delete this i'm going to click on delete this file and what we want to do is we want to add all the files inside of this build folder inside over here so i'm just going to copy everything from here i'm just going to drag and drop inside of the website you'll see these are all the folders or all the files we want to upload and i'm just going to click on upload so when it finishes uploading each file we should have our website being displayed in our um inside of the link right so i'll come back in a second when it's all done you'll see that now it finished um putting all the files inside of here which means that if i refresh over here and i go to the link which we were before and i refresh the page now it should be showing our website completely deployed as you can see over here you can navigate throughout the project and all the images will be displayed everything that we created is now deployed online and you can actually go in this website and see it for yourself now it says not secure over here and the reason why it's not secure is because we haven't set up an ssl certificate so if we actually look at what this domain is this domain isn't actually an https domain it is an http as you can see over here and as you might know https is more secure because it has an ssl certificate so how exactly are we going to put an ssl certificate here well it's super simple with um with hostinger all you have to do is go to ssl over here and if you purchase the premium hosting account um it will already have bought the certificate which by the way many times you have to pay extra to get it we just click on setup and then it's going to say install sss certificate you select which website you want to to install it in so we chose this one and you click on install ssl it will install the certificate inside of your domain and what that means is that um right now it's installing and when this status finishes saying that it is installing so when it says it's done we should be able to see our certificate now if we go over here to our home we'll see that we have over here this domain and this project over here so if we go into main domain we should now be seeing our domain being used correctly instead of the preview domain that we had before not only that but it still says it's not secure but i'll be back in a second when the ssl finishes just to show you guys that it actually works and as you can see it says it is active meaning that our ssl certificate should be set up so if i refresh the page it should now not say it is not secure it just says that we have a connection that is secure um and it will show our certificate right certificate is valid meaning that anyone can come inside of this website and i would definitely recommend making your portfolio have an asset certificate because um people looking on your website they really don't want to go into a website that says that it's not secure so having one will definitely not deter people from going into your your portfolio but as you can see our project is fully deployed um it looks really nice we can go and click on everything that we built and see our portfolio being displayed for everyone so this is basically it for the video if you want to check out the code um the code will be all in the description if you want to check out hostinger my link will be in the description as well i would recommend checking them out they were really good and they helped produce this video so be really happy if you could help support the channel and check out their awesome platform so with that in mind i hope you guys enjoyed this video and i see you guys next time [Music] [Applause] you

Channel: PedroTech

Views: 118,533

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react website, react personal website, react personal portfolio, react personal portfolio website, react website tutorial, react responsive website, react navbar responsive

Id: x7mwVn2z3Sk

Length: 83min 29sec (5009 seconds)

Published: Thu Jun 02 2022