Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial

in this video I'm going to teach you how to build and deploy a responsive portfolio website using react the website we're going to build has a nav bar for easy navigation it has an animated hero section an about section with hover animations on the different sections a fully customizable skills and experience section a project section with neatly presented data as well as links to your demos and the source for all of your projects as well as a contact Section with your email LinkedIn and GitHub and the best part is that everything is responsive in this tutorial we'll be learning how to set up a react project completely from scratch we're going to learn how to take a design and translate it into code using figma we'll learn react best practices such as file structures react Hooks and CSS modules we learn Advanced CSS techniques such as animations and responsive design we'll learn how to use Json to make editing the data in our website easy and then lastly we learn how to deploy the site for free on a custom domain by the end you'll be able to share the portfolio website with friends and potential employers and even add it to your resume as a project so without further Ado let's get started so to get started we'll just open up vs code to an empty project and we need to create the boilerplate for a react project and to do that we either use create react app or beat and since wheat is a lot lighter we're going to go with that one so we need to open up the terminal and we type npm create Veet at latest for the project we'll just name it react portfolio but you can name it whatever you want we'll go with the react option and for this project we're just going to do it in JavaScript now it gives us some instructions which we have to run so we're going to see a CD react Dash portfolio and we run npm install so the npm install command basically installs some dependencies which we need to run our react project and we see that Veet has also created some boilerplate code for the react project for us now before we get started we also need to install two fonts and to do that we go into the terminal and we write down npm install at font Source slash Roboto and add font Source slash outfit and we just run that once we're done with that we can write npm run Dev to run our project locally and then we can copy this address and paste it in our browser and it shows us the react project which has been created by wheat now the next thing we want to do is take the two fonts that we installed and introduce it into our project so the way we do that is we go into main.jsx and we just write down import at font Source slash output and import at font Source slash Roboto so basically whenever we want to use these fonts they'll be available for us to use in the CSS files now so we go ahead and save that now you'll see that there's loads of files created by wheat for us but we don't need most of them so we'll just go ahead and go ahead and delete them so we'll delete this V Dot SVG we will delete the assets folder over here in app.css there's a lot of styling which we don't require so we'll go ahead and delete that in app.jsx there's also a lot of code which we don't need so we'll remove the use State over here all the logos we will remove this div inside here and just write down hello world we'll go into index.css and remove most of the stuff here as well and then in index.html instead of having the title of our website we beat plus react we'll just name it my portfolio and we can see that it's updated on the top over here another thing we want to use in this project is called CSS modules so what usually happens with CSS is that if two CSS files have the same style with the same name they usually overwrite each other but CSS modules allows us to have multiple CSS files using the same class names but the Styles won't overwrite each other as long as they're imported into separate react files so to do that first we want to go into week.confect.js we basically want to add another parameter over here which says CSS modules locals convention and camera case this lets us use camel case in all of our CSS modules Styles which you'll see later but for now it's not too important and another thing we want to do is we want to rename the app.css over here to app.module.css and this is basically how you use CSS modules in any project while we're on the topic of CSS we also want to use something called CSS variables so let's go ahead and create a file called vars.css now variables basically help us Define certain properties such as fonts and colors in a single place and then just import these variables in multiple other places this makes it a lot easier to edit these values later on without having to change it around the entire project so the way to define variables in CSS is that you want to say colon root and then first we'll Define the colors and the first one will be called color text and this will be just by a white so hash FFF next will be the primary color so Color dash primary this will be hash 5 7 6 CBC next will be hash color secondary this will be hash 193 760 next we have Color dash dark hash 0 would be 2 4 4 7. we have Color dash BG for the background that'll be hash zero four one five two B and then we're done with the colors uh let's just add some variables for the fonts as well we'll just say font Dash Roboto so we're done with the variables next we want to add some styling to the entire website so we do that in index.css there are some stylings which we want to apply to every single element in our web page and to Target every element in our web page we use the asterisk and we say box sizing of every element should be part of box this basically means that the border is considered when calculating the width and the height of the object every element we want a margin of zero and we want a padding of 0 as well and for the font family as a default we want to use outfit but that's not available use Ariel um otherwise use helvetica and then as a default just use any sand seller font that's there um so that's it for our index.css next we want to add some styling to our app which can be seen over here so we'll first create a div and now we see that it's failed to resolve the import of app.css and that's because we need renamed it to app.module.css so the way to import CSS modules is to say import styles from dot slash app dot module dot CSS and go ahead and save that and the way to apply any styling is to say class name instead of passing in a string we pass in a variable to do that we use curly braces and we say Styles dot app now the dot app is the actual floss name which we have to Define inside our CSS file so we go into app.module.css and we say dot app we give it a background color of dash dash Color dash BG we say that the width should be a hundred percent of the width of the of the page that is on the height should be 100 as well of the page that it's on and then since we're using a variable we have to import it from the vars.css file so we do that by saying add import dot slash vars.css and we end that the semicolon then save that another thing we have to do is to add the assets we'll be using such as images and icons so we'll just create a folder called assets and I've just gone ahead and dropped in a few images which you can go ahead and find in the GitHub repo Linked In the description down below or you can get it from figma which is also linked in the descriptions um and we'll be going over that as well and along with these images I've also added a favicol inside the public folder and what that does is it basically renders out the icon on the tab over here that you usually see and to use it we go into index.html and you see this line which has link icon we replace image slash SVG plus XML with image slash PNG and we replace V Dot SVG with Slash gravicon dot Ico and it won't show up right now because of the cache in your browser but we'll see it later the second last thing we want to do is to create a utility function which can actually use the images inside the assets folder so we'll go ahead and inside SRC we will create a file called utils.js and we want to create a function and we want to export it so we'll say export const and we call it get image URL and what this will do is we'll it'll basically take a path which we will pass to it and this path will be relative and what this function will do is it will construct an absolute path of whatever image is there so we'll return a new URL and we want the path to be assets slash and we're using string interpolation here so we'll pass in the path which we have passed in and we want this relative path to be appended to import dot meta dot URL and then we want to get the edge around from this and return that back and essentially again what this is doing is that it's taking a relative path which we pass to it it's taking the base URL of our website appending this relative path onto it and then passing us back whatever this URL is and this will basically make it easier for us to dynamically import images into our different components and the last thing you want to do is that you want to go into the description down below and you want to find the link for the designs in figma and you want to open that up in most tech companies figma is used to design the websites and components and then these designs are given to Engineers to convert into code this is great because it gives you details about the different dimensions font sizes and colors of the different components on the website and for this project we have two designs one for the standard View and one for the responsive mobile view which we'll be using to create our web pages so now that we're done with the setup let's get started with the actual coding so the first component we'll be looking at is the nav bar and to get started we should look at the design in figma so when you open up the design you see that the navbar is at the top over here on the left hand side it just says portfolio you could rename it to anything you want and on the right hand side we have the different sections in our page like about experience projects and contact and by the way when you open up figma there's two different modes one is for design and one is for developers and this makes it a lot easier to understand what's going on especially if you are trying to code a next an existing design um so if you hover over a particular element you can go ahead and click on it and you can find out certain different things about it like the color the font the font size the font weight and everything else and then if you have an element selected and you hover over another element you can find out the space in between it so over here we can see that the spacing between the portfolio and the about is 429 pixels and this is important because if we have multiple elements laid out like this and we want to see the gap between each of them we can see it's 47 pixels over here um so we have a good idea about what it looks like in the standard View and in the narrow view we see that instead of being horizontal all the elements are vertical and we also have hamburger menu element over here and across icon over here and in the design if you see any images or icons and you want to download them you can go ahead and click on them and the bottom over here there'll be an export window or Tab and you can just click on PNG or jpeg or whatever and click on export image 17 or whatever it says I would recommend using pngs since they have transparency using the background so now that we understand what the design looks like we can go ahead and get started on actually creating the code for it so we'll go back into the development webpage we'll go ahead and close all of these tabs over here and then inside the SRC folder we'll create a folder called components and this is where all of our components will lie and then the first component by building is the navbar so let's create a folder for that and then we'll create the jsx file for this by the way if you're using beat don't create dot JS files use.jsx because that is what Veet accepts so we'll say nav bar Dot jsx and we'll also go ahead and create the CSS file so we'll say navbar dot module dot CSS because remember we're using CSS modules now we'll go into navbar.jsx and I have an extension in vs code which basically lets me write down rafc and create some boilerplate code for us and then what we want to do is we want to import it into our app.jsx so we'll go into app.jsx and we'll delete this hello world over here and we'll open up the bracket and write down nav bar and vs code should automatically import the component for you and we'll go ahead and close it and we save it and on the right hand side you can't see it right now because the text is in black but the text has been updated to Now power so to see a bit better we'll temporarily go into app.module.css and add a styling of color white so we can actually see the text now we'll go back into navbar.jsx and add in the actual markup which is the HTML for this component and we'll add the CSS later so we'll remove the div that we created and we will be using a semantic HTML tag a semantic HTML tag is basically a tag which behaves just like a div but it has a special name which lets the browser know what what its function is so in this this case we'll be using the nav HTML tag and then inside that we want an ETA and we want the hrf to be slash which basically takes us back to the home page which is basically to the top of the page so that whenever we click on the text which says portfolio it'll take us to the top of the page so if we click on that it reloads the page and it takes us to the talk so now that we have the a tag we actually want to create um the separate links that we had on the right hand side so we'll create a div and inside that we'll create an unordered list and each unordered list element will be one of the links that we had so we'll create a list element and the list element will have an a tag and the first one will be about and we want the hrf to be hash about and this hash about basically lets us navigate to that particular section in the page once this about is clicked we'll see how that works later on but we'll go ahead and copy this a few times so the next section is experience foreign the next section is projects and the last section is contact so we have all of the elements that we need over here on our web page but of course they don't look really nice and we want to lay them out horizontally and we want them to look nice and of course for that we have to use CSS so let's get started by adding some class names so to the nav over here we want to add a class name of Styles dot lab bar styles um and I think we should be we should also import the styles from our style style sheet so we'll say import styles from dot slash narba dot module Dot CSS the a tag should have a class name of styles dot title this div over here should have a class name of styles dot menu this unordered list over here for now we'll give it a class name of Styles dot menu items and that's about it for the class names for now so we're going to navbar Dot module.css and begin adding the styles so of course we begin by importing the variables which we created so we say import.vars.css since that's where it's located first we'll add styling to the navbot itself so we'll say navbar and of course we have to add a semicolon over here we'll position it relative we'll give it a display of flex and align items to center of the row and we'll see justify content space between because we basically want to space out the portfolio text to the left and the elements to the right we'll give it a padding on the top of 61 pixels and again if I'm using something and it doesn't make sense you should go into the figma if we click on the portfolio element and we hover to the top of the page we will see that it's 61 pixels of margin between that text and the top of the page we'll also give the Z index of two that's because we'll be adding some floating elements later on and we want this to show up above those elements and then we'll give it a margin we'll give it a vertical margin of zero percent and a horizontal margin of 10 on either side so it's a bit most based out horizontally for the title itself we want the font size to be 30 pixels we want the font weight to be 600. we want to remove all the text decorations such as the underlines so we say text decoration none and we say the text color we use the variable keyword which is why we Define the variables in vars.css and then we can basically use this dash dash Color dash text variable name so we copy that over and we have the portfolio text over here um and the great thing about this dash dash Color dash text variable is you can rename this anything later on if you want to design early redesign your website and it makes it a lot easier so now that we're done with that let's add some styling to our DOT menu we'll just say display Flex for now and again this dot menu div isn't important right now but will be important when we add a responsiveness to this component so just hold on for that for the dot menu items we'll say display Flex each of these elements should have a gap of 47 pixels between them and then you see these bullet points over here we want we don't want those so we'll say list Dash style none and we see that it's laid out in a row now and we don't have the bullet points anymore now for each of the elements inside um the list over here we can Target that by saying dot menu items a and that targets the anchor tags inside the menu items you want to say font size of 25 pixels color to VAR dash dash Color dash text and then you'll see text decoration of none so we can remove the underlines over here again text declaration and we can go back into app Dot module.css and remove the colors over here and I know right now it seems very scrunched up together but that'll improved once we make it responsive because anyways at this point it should become into a hamburger menu so now that we're done with the standard sizing let's make it responsive kind of just make it responsive we have to add the hamburger menu icon and some js functionality to it so we'll go back into navbar.jsx and to begin with we need to import a few things so we'll import use State because we need to keep track of whether the hamburger menu is open or not and we also import the function we made for for the images called get image URL from slash dot slash Newtons and we'll go ahead and save that and by getting this error basically because we had asset slash path but it should be slash assets slash God so we'll go ahead and save that and refresh and it's okay as normal back into navbar Dot jsx inside this menu we want to add an image we'll give it a class name of Styles dot menu vtn and then the source tells HTML which image to render and for now we'll just render one image but later on it should be based on the state of whether it's open or not so we'll say get image URL and we'll see nav slash menu icon dot PNG and we got this value because inside the assets folder we have a nav folder and that has the menu icon.png and we can see that it's rendered out over here we also need to add an ALT property so we'll say alt menu dash button and go ahead and close that and save now what we want to do is we want to render out this list on our right hand side differently when the width is below a certain amount of pixels so we'll go into navbar Dot module.css and basically how we make websites responsive is using media queries which basically means we give different styles to our classes based on the width of the page so we say at media we apply it to the screen you can use other devices here but we'll just use screen for now and we'll say and Max width 8-30 pixels which is saying that apply the Styles inside this only up to a width of 830 pixels now for the dot navbar which we defined on the top we'll we'll keep most of these properties and whatever is defined inside will be added on top of it so we'll say Flex Direction and instead of being row we wanted to be column now and we want the Align items to flex Dash start and then for DOT menu we barely had any styles for it here but we'll add a lot over here so we'll say position absolute since the menu That's shown is above everything else we'll say it should be zero pixels from the right of the page we'll give the margin right of 10 of the page will give the flex direction of column we'll get align items of flex Dash end for each element they'll have a vertical gap of 11 pixels and then the Z index should be 3. we'll go to dot menu dtl we'll say display should be block and the cursor should be a pointer whenever we go over it and obviously that the cursor turns into a pointer when we're above this image now for the menu items themselves we'll say menu items display none by default Flex direction to be column align items to Center gap of 13 pixels and just so you can see the different elements while by adding we will remove this display none for now and app.jsx sorry app dot module.css we'll give it a height of 100 of the viewport height so now you can see the text that was there it was there it's just that it was white so you couldn't see it uh we'll go back to navbar.module.css we'll give it a border radius of 10 pixels we'll give it a background of RGB 25 55109 and this is just a fallback because next we're going to give it a linear gradient and if the browser doesn't support that it'll go back onto this solid value so we'll say background again and we'll say linear gradient and we'll say 0 degrees which basically means vertical rgba which is the starting value so 25 55 109 0.2 and 0 percent and then the final value of this gradient should be RGB a 25 55109 and a opacity of 1. and at a hundred percent of the gradient we go ahead and save the NBC we have a nice gradient going on over here we give it a padding since it's all a bit too close together of 24 pixels by 33 pixels and it's a lot more spaced out now and we'll give it a shadow of zero horizontal and vertical four pixels of blur rgba 0 comma zero comma zero comma 0.25 and go ahead and save that um so now it's visible even though we don't want it to be visible so we'll go back and as we had we will say display none and we'd also go ahead and remove the temporary styling we added to app.module.css so now that we're done with the styling of it we want to add the functionality of it being able to be opened and closed so we'll go back into navbar.jsx and we'll use U state to create a stateful variable so we'll say const menu open and set menu open and we'll say use state of false by default because we want the nav bar to be closed by default and then in this image over here we originally just passed in the menu icon but we want this to be based on whether the menu is open or not so we'll say is menu open question mark if it is open we wanted to show the close icon and if it's not we wanted to show the menu icon so we'll say get image URL nav close icon and if it's not open then show the menu icon now of course we want to click on this image and it should change the value inside the menu open so we'll say on the image on click create an arrow function and this should say set menu open and it should be the opposite of whatever the current value is so we'll say not of menu open so that when it's false it will turn into true and when it's true it will turn it into false and we'll go ahead and save that and now we see that clicking on it changes the icon now we also want this clicking to open up the nav bar and close it based on the value so over here remember we gave a class name to this unordered list of menu items well we want to keep this menu items but we also wanted to have a style of menu open um but based on whether the menu is open or not so to do that we wrap this in tildos and we basically do string interpolation so this is essentially the same as it was before but what this allows us to do is it allows us to add another class name and that will depend on the menu open variable so we'll add an and and this basically means if menu open is false then the style after this add-on isn't applied but if it's true the style will be applied then we want to give it a style of menu open now of course we haven't defined this style yet so we'll go back into navbar.mountable.css and we'll say that if dot menu open then we want the display to turn from none to Flex and we'll give it a z index of one so it's above everything else and now once we click on the icon we see that the menu is presented and we can close it another thing is that if we click on an element inside the nav bar we want to close the menu again because it will scroll to the bottom of the page and a good user experience is that it should close by itself so we'll go back into navbar.jsx and say that whenever the unordered list is clicked by on click Arrow function and do set menu open to false and now we have a menu which opens and closes and once you click on it it closes as well and you'll see that once we click on an element the URL also changes which will play a part in going to the separate sections whenever we click on an element of an app bar so the next section we'll be taking a look at is the hero section and as always we should first take a look at the designs to see what we have to make and the hero section is this area over here with the image and this text and this button over here so we see that we have a title text over here a description a button which takes you to contact me and an image over here what the design doesn't show is that this image is slightly animated but we'll add that once by coding the website and then for um the narrow view over here in the mobile view we see that instead of being horizontal everything is vertical but essentially the same the image is just a bit smaller and it's supposed to be below the nav part and again if you want any details about the font size the font color and the gaps or anything um you can go into the figma and see it over here so without further Ado let's get started creating this component so we'll go ahead into the components folder and create a new folder for the hero section and we'll call it hero we'll create hero.jsx and hero dot module dot CSS inside hero.jsx we'll run rafc to create the boilerplate code go into app.jsx import the hero component and then in hero.jsx we will delete this hero over here as well as these two divs and we'll start by another semantic HTML tag called section which basically denotes that this is a section um inside this we'll put a div this div will contain all the text on the left hand side of the page this will have an H1 the H1 will say hi I'm ETA of course you can replace it and replace this with whatever name you have then we'll have a paragraph and we'll just say I'm a full start developer with five years of experience using react and node.js reach out if you'd like to learn more and we just save that and then lastly we had a button if you remember in our case we'll just use and use an a tag in the href instead of pointing to a website we'd say mail to and it will say my email at email.com but you replace this with whatever email you have and what this does is that it once some somebody clicks on this link they'll be taken to their own email client and it will automatically fill in the two section with your email over here and then for the text we just say contact me alongside this div we have the image which we saw for the SRC we'll say get image URL automatically import that and the path will pass into it is hero slash hero image dot PNG we'll give it an ALT of hero image of me and we'll give the class name later and we'll go ahead and save that and we see we have the image over here and then lastly if you would have noticed this inside the figma design we see that there are two highlights on the on the background of the page and to do that we'll have to create two divs over here so we'll say div and we'll give it a class name of styles dot dot blur and we don't need a closing track for that we can just automatically close that and then we'll create another div called bottom blur and we'll just save that and of course this error is out because we haven't imported Styles so we'll say import styles from dot slash hero Dot module.css and Save so now that we're done with the HTML let's go ahead by creating the Styles so for the section over here it will have a class name of Styles dot container this div will have a class name of Styles dot content for the H1 class name Styles dot title the P has the class name of styles dot description and then the a tag has a class name of styles dot contact lydian the image give that class name of Styles dot hero IMG and go ahead and close that and that should be all the class names we have to add so now we can go and Define the CSS Styles so of course we'll first import data slash data slash bars.css semicolon oh sorry one more dot dot dash and save that first we'll add The Styling for the container so dot container we'll give it a position of relative display Flex align items to the center justify content to be space in between so that the space between the text and the image margin on the talk of 49 pixels Z index of one again because we have the highlights in the background and we want this to be above that margin left of 10 percent margin right of 10 percent next we go on to the content so we'll say display Flex Flex Direction column align items Flex start color we use a variable Color dash text and we'll give it a z index of one as per the title we give it a font size of 72 pixels font weight of 900 so it's a bit more bold we'll give it a margin at the bottom of 33 pixels so it's a bit more spaced out from the description font family if you notice in the design it's actually Roboto not the default so we'll say VAR dash dash font Dash Roboto and the font hasn't changed because in advance.css we did not add a bottle and now you see that it's changed but the background we want to give it a linear gradient because if you see in the designs it's not fully white it's a sort of gradient as it goes to the right so we'll say background linear Dash gradient 90 degrees which basically means horizontal the first value is rgba 255 255 255 one at 70 into the element and then the second value is rgba 255 255 255 0 and that is 120 into the element which is outside it and I know it looks weird right now but to fix this we add dash webkit dash text Dash fill color and we give it a value of transparent and then Dash webkit background clip only give that a value of text and we see now that it looks a lot better and has a gradient next we have the styling for the description so dot description we say font size should be 30 pixels on family again rubato and then we give it a margin at the bottom of 52 pixels and I'm just realizing that there should be dot content save that and now we see that the text is actually White now let's add The Styling for the contact button so dot contact vtn we do not remove any text decoration like underline so we'll say text decoration none background color should be bar slash Color dash primary the color of the text should be bar hash Dash Color dash text you want to give it a border radius of 100 pixels we want the font size should be 30 pixels Bond weight should be 600. and the padding should be 17 pixels and 26 pixels and the lastly we want to add a box shadow so you say box Dash shadow zero zero four pixels zero RGB a zero comma zero comma zero comma 0.25 go ahead and save that and then I know it looks weird right now but anyways it at this point it should be vertical instead of horizontal so we'll take a look into responsive design in a bit um first we want to add some animation to the hero image so we say dot hero IMG if you say the width should always be 50 of the page so now it looks a lot better and we want the Z index again to be one so it's above the highlights in the background and now let's add the animation so to do this we need to First Define an animation name which we'll be using so we'll say animation Dash name and we can use anything we'll just call it floating the duration of the animation so we'll say this animation should run for three seconds animation iteration count which basically defines how many times the this should run so we'll say infinite because we want this image to keep going up and down and the animation timing function this basically defines what the movement looks like is in out basically means that whenever we reach a keyframe the movement into it and out of it should be eased if that makes any sense anyways now we have the animation defined but of course it won't do anything because we haven't defined the translation of the position of the element so over here we use at keyframes and then we use the name that we used over here which is floating so by essentially defining the keyframes for the floating animation so at zero percent of the animation we want the transform of the element to translate 0 and 0 pixels at 50 percent we want the transform to translate 0 and positive 10 pixels and they're at 100 percent we want the transform to translate 0 and minus 10 pixels if we save that we now see that the image is hovering up and down and my bad this should not be minus 10 this should be minus 0. and now we see that the image is properly hovering up and down so now that we're done with the animation let's add the gradients in the background those highlights that we saw so dot dot blur you say position absolute width 50 percent of the viewport width height 50 of Newport width the Min width should be 350 pixels the Min height should also be 350 pixels the dock should be minus 128 pixels which means it's slightly outside the page and then similarly the left should be -10 viewport width the Border radius should be 764 pixels background should be RGB a 25 55 109 and 0.7 opacity we want to put a filter on it because right now it just looks like a box I'm gonna put a filter on it that's blur 100 pixels and we see that it's like a nice uh highlight right now and we put a z index of 0 on that the bottom blur will have similar properties so we'll just copy this then we'll say bottom blur position is absolute width should be 70 pixels um height is 50 70 of the viewport but height is fine as it is the Min width should be 250 pixels the top should be 246 pixels and the left should be minus 10 from the top one my bad and they're right for the bottom one should be minus 25 viewport width the Border radius should be 764 pixels and sorry for the top one as well this should be border radius over here the rgba value should be the same the blur is the same and the Z index is the same as well and now we see we have two highlights behind the hero image which look really beautiful so now that we're done with the standard CSS meaning to make it responsive because right now if you make it very narrow it doesn't look that good we want it to be vertical instead of horizontal so we'll use media queries again at media screen and Max Dash width to be 8 30 pixels for the dot container the flex Direction was column all the flex reaction was row my bad now we just want to be column but in reverse because if we put column right now the image will be at the bottom so this is a column reverse and now it's at the top and then for the dot content which is the text and the button we just say align items Center and there we have our hero section and if we open a nav bar we see that it's above the hero section as well so everything is going great now the next section will be taking a look at is the about section so as always let's take a look at the design we see that we have a black box over here to demarcate the section we have the title an image on the left three different sections on the right hand side and we can see that once you hover over it it has a sort of background gradient um and then there's an icon some text here and for the responsive section we see that the image is completely gone and we don't have the black background and we just have these cards over here and like before when you hover over them we have the linear gradient background so before we carry on I actually want you to try to develop this section by yourself before you carry on with this video and take a look at um how we implement it of course um I don't expect you to be able to do the animation of the background when once you hover over it but I want you to try it out and then come back to the video inside the components folder as always we'll create a new folder and I'm just realizing that there's a mistake in the folder structure so we'll go ahead and move this hero folder from inside navbar into the compass folder I'm going to say okay and all the Imports seem okay let's just refresh and see if everything works and then we need to go into app.jsx instead of saying navbar slash hero we just say dot slash components slash Euro and then inside hero.jsx the import of utils should only have two dots and similarly for vars.css uh two dot dots so now that we fix that we'll go ahead and close these folders and inside the confidence folder we also want to rename it because the spelling is wrong and then all of that is fixed and then finally we can go back and inside the components folder we can create another folder called about Dot jsx and about Dot module.css and in about.jsx we say rafc then create the arrow function and then back into app.jsx we put it below the hero so about component is auto imported and we see there's some about text at the bottom of the page so now we go back into about.jsx and as always the first thing we want to do is add some content into the page so we'll delete this about and there's a div and we'll also make this into a section and what we'll do is that we'll add an H2 first of all and this will say about so this is the title of this section then we'll have a div which will have the content of this page um so the first thing inside this should be an image which is on the left hand side the SRC will use the util function that we have so get image URL and we'll say um about Slash about image dot Eng and then for the alt we'll just say me setting with a laptop and go ahead and save that and we see that we have the image over here um next we want to have an unordered list which shows up on the right hand side of the image we'll say UL um each of these will have an Li and the LI will have an image to go along with it the SRC will again use the get image URL and it will say about Slash cursor icon dot PNG and the alt will just say cursor icon and save that and we see that the cursor I call is in rendering because we need to ring if I don't question I call and now it's being rendered over there and then next to the image we have a bunch of text so we put that inside a div and then inside that we'll have an H3 which will say front-end developer as well as a P tag which will say I'm a front-end developer with experience in building responsive and optimized sites and save that and then we have one of our cards created so we'll do the same thing um a few more times we'll copy this Li the next li should show or should show a server icon and then we'll change the alt to server icon we'll say to backend developer and then write down I have experience developing past and optimized backend systems and apis save that we'll see that's rendered as well and then after that the last one should be UI desire and again you can add any content you want over here depending on the skill sets that you have so I have designed multiple landing pages and have created Design Systems as well and go ahead and say that so it's a pretty uh simple component over here we just have this markup no interactivity or nothing being rendered dynamically um so what we can do next is ADD The Styling for it and to do that of course we first import the styles from the CSS so we'll say import styles from dot slash about Dot module.css this section will have a class name of Styles dot container this H2 will have a class need of styles.title this will be Styles dot content to this image We'll add a class name of styles dot about image this unordered list will have a class name of styles dot about items for each of these list elements we'll give it a class name of styles dot about item and we'll go ahead and copy this into the other Li tags as well and then I forgot over here we want to change the alt for this cursor icon to UI icon and then for the divs over here we want them to have a class name of styles dot about item text and we'll just copy this and apply it to the other ones as well so there's a div and let's go we'll go ahead and save that and now we can begin adding the Styles so we'll go into about.module.css we'll import our variables so at Import Auto CSS so for DOT container we want the position to be relative we want the background color to be rgba 12 12 and 0.6 and we want the semicolon over here and we say that we want the Border radius to be 15 pixels if you wanted padding to be 73 pixels the margin on the top should be 129 pixels the Z index should be one so it's above any of the background gradients that we have because as you'll see in the design the box is slightly above this gradient over here and this is also why we needed position relative then we give it a margin on the left of 10 of the page and margin right of 10 on the page and we will save that and we see that the box is created nicely the next thing we want to do is add the title so the color should be a variable and we will say dash dash Color dash text the font size should be 35 pixels the font weight should be 700. the letter spacing we want that to be 1.75 pixels and then we want the text transformed to be uppercase so no matter what the text is every letter will be uppercase as you see over here in the dot content all you want to do is make it display Flex Flex Direction row and align items to the center and then in the dot about image we set the width to be 35 of the page and it's not showing up in a row because over here there should be Styles dot content and now we see it's uh beside each other in dot about items we want the color to be our Color dash text and everything is in white text now you want the display to be Flex we want the flex direction to be column and we want a gap of 15 pixels between each item so it's a bit more spaced out now let's address each of the items so we'll say display should be Flex Flex direction should be row align items to the center border radius to 20 pixels we want to remove any list style that we have over here this bullet point so we say list style none we'll put a padding of 25 pixels on each of these items and then we want to add a background image which is the linear gradient so we'll say linear gradient 90 degrees so it's horizontal rgba so 165 21521232 [Music] and 0.42 opacity and that should start at zero percent into the element and then rgba 255 to 55 255 zero opacity and that should end at 100 of the element and we see we have the gradient and then we don't want this gradient to always be visible we only want it to be visible when we're hovering over it so right now we're going to set the background size to be zero and a hundred percent and now what we'll say is we want on about item whenever we hover over it using the hover pseudo selector we want the background size to be 100 and 100 and go ahead and save that now when we hover over it we see that as a visible now we also wanted to have a neat animation where it goes from the left hand side to the right hand side so we'll add two things over here we'll say that the background which repeat should be no repeat and then we'll say that the transition should be 0.4 seconds and this basically says that if any transition is happening it should take 0.4 seconds so we see now that we once we hover over it the background size changes over 0.4 seconds next let's add some styling to the elements inside the about item so dot about item and if you want to Target any H3 Insider we just write down H3 over here and we say that the font size should be 25 pixels and the font weight should be 600 and save that and we see that the titles look a lot better and then for the paragraph we say about item p and say the font size should be 25 pixels and of course right now it looks very big that's because it's not responsive yet but we're going to go ahead and add that right now so we saw that um we want some responsive elements so to do that we'll add the media query at media screen and Max Dash width of 8 30 pixels as always and we want to add a style to the container we want the background color to be transparent instead of white we want any padding to be removed so padding left zero and padding right also zero in the dot content we want the flex direction to go from row to column for the dot about image we don't want it to display at all so we'll say display none product about items we want the margin at the top to be 29 pixels and then for each about item we want the padding left hand padding right to be zero and we'll go ahead and save that and we see that in an arrow screen it looks a lot better now there is one more last thing we want to do before we can say that we're done with this section back in about.jsx we want to go to the section tag over here and give it an ID of about and basically what that enables us to do is we can open up the navbar and once we click on about we navigate all the way to the about section because the URL has changed to Hash about and this basically tells the browser to navigate to the either to the element with the ID of hash about now you saw that the scrolling Behavior wasn't very smooth and that's because we have to add a property to enable the smoothness so we'll go over here into index.css and you say HTML scroll Dash Behavior smooth and if we save that and go back let me click on about we see that we scroll down smoothly to that section so that's it for this about section next we'll be working on the experience section so again let's take a look at the design we see that on the left hand side we have a bunch of skills laid out in a grid pattern and on the right hand side we have some experience um laid out in a column over here and then the responsiveness is pretty simple instead of them being in a row next to each other they're instead in a column so as we can see um the component over here is pretty data intensive and a lot of this can change over time like the skills you know can change over time and your experience obviously can change and whenever that happens you don't want to be changing your JavaScript files um directly your react components and to make it easier for you to change the data as you gain more experience and skills we'll be using something called Json files so Json files are basically files in which you can write down any data which you want to store and they can easily be imported by a react JavaScript files and they can be rendered out programmatically so without further Ado let's get started with the component we'll go ahead and close all of these tabs over here inside the components folder we'll create a new folder called experience we'll create experience Dot jsx and experience Dot module.css in app.jsx as always we'll go ahead and import that so experience and first we need to actually run the rafc command to create the component experience go ahead and close that and it's there at the bottom of the page we go back into experience.jsx and we will go ahead and delete this but before that we need to create the Json files which will contain our data so as a sister to the components folder in the SRC folder we'll create another folder for the data which we have and we'll create two files we'll create skills.json and we'll create history dot Json now the data to enter into this obviously it depends on your history and your skills but if you want some dummy data you can go to the repo Linked In the description and you can go ahead and find this and by the way if you're following till now and you've liked the video please do like it and subscribe it really helps out and if you have any other ideas for other tutorials or videos please do leave them down in the comments below um but let's go ahead and just copy paste the data over here so the data has been pasted and you'll see that it's pretty similar to JavaScript syntax so when this Json file all we're doing is exporting an array and each of these array elements is an object with a field of title and an image source which will be rendered out by the react component and for history.json again it's an array of objects and it has a field such as role organization start date end date experiences which is also an array and image SRC which is a link to an image in our assets folder so we'll go ahead and go back into experience.jsx and we'll get started with a rendering rendering our data so we'll delete this div we'll create a section um and then we'll just go ahead and give it an ID of experience to begin with so we can scroll to it we'll give it an H2 and the H2 will be experience create a div and inside that div we'll create another div which will contain all of our skills and then the sister to that will be an unordered list which will contain our experiences so in the skills section what we want to do is we want to render out each of our skills in the data over here and to do that we first need to import this data into our component file so on the top we'll go over here and we'll say import skills from dot slash dot slash data slash scales.json and then now this is an array variable like anything else you would Define in JavaScript so what we can do is go inside this div add curly braces since we'll be using some JavaScript for rendering out the data and we'll use some array functions so we'll say skills.map so go through each element and map it to something else at each index we'll take in the skill that's there over in that position as well as the ID which is generated by the map function if you know about it um we'll use an arrow function and using parentheses we'll say that map each of these elements into a div and we need to return we need to wrap this with curly braces and say return um inside the div we want to give this an ID because whenever you're iterating through an array and programmatically creating elements in react you need to give each element an ID so we'll say key is equal to ID the first child inside this will be another div which will contain the image so we'll say image SRC and we'll say that the source of the image should be get image URL instead of hard coding the value you'll remember that in skills.json each of these has an image SRC field so we'll just say skill dot image SRC and the alt is decided by the title of each element so we'll just say the alt should be skill dot title and we'll save that and we see all of these images are rendered out and then next to the image we also want to render out the title of the skill so we'll just say P for a P tag title and it's being rendered out over here it's in Black so it's not really visible so we're done with the skills um and then in this unordered list over here we want to create um the experiences we have so we'll add curly braces again because we want to programmatically um generate this we'll say history dot map taken a history item and an ID curly braces we want to return a list element An Li and we want to give this the key to begin with and then an ID the first thing will be an image which will be the icon of the company that you worked at so we'll give this an SRC and we'll say get image URL and instead of hard coding again we'll go into history.json and just look at the fields over here we have image SRC so you'll see uh history item dot image SRC and of course that's not rendered because we didn't import the history so we go to the top and we say import history from dot slash dot slash data slash history.json and save that then we see that the three icons are rendered out over here and then we want an ALT as well so we'll just say string interpolation history item Dot organization and logo and then next to this image we want the details of what we did so we'll add another div um the first element in this will be in H3 and this will basically have the title of the company and the role that we had so curly braces because we want to use string interpolation tilders and we'll say history item dot goal and then comma history item dot organization so we say software engineer Google UI designer Microsoft below that we'll have a P tag and then this will have the dates which we were there at the company so we'll just go ahead and copy this over here instead of comma we have a dash between the two and instead of roll we'll say start date as your organization will be ended and then lastly we have another unordered list inside this and in that we want to add a curly brace and if you remember we had an array over here so we want to go through this and create a list item for each of them so we'll say history item dot experiences dot map take each experience and an ID Arrow function return an ally of course give it a key and then inside we just printed out the experience that we had and go ahead and save that and we see all the data is being printed out and if you want to ever change anything you just have to change it inside the Json and it'll automatically be changed so you can add more skills remove these and add more experience as well so now that we're done with rendering out the data let's add some styling so as always we'll import the Styles in our file over here so we'll say import styles from dot slash experience Dot module.css save that this section should have a class name Styles dot container for this H2 we'll give it a style name of title this div will be called content this div will be called skills each of these divs inside will be called a skill this div will be called skill image container and then we go down here to the unordered list and we'll call this style sort history each of these list items will have a class name of History item this div over here which contains the text will be called history item details and then that's pretty much it for the class name so let's get started with adding the Styles and experience.module.css so as always we'll import daughter slash.css the dot container we'll see that the color should be VAR Dash color Dash text and now it's all white the margin top should be 79 pixels the margin left should be 10 and same for margin right for the dot title we'll say the color should again be Color dash text and we want the font size to be 35 pixels for this we want the font weight to be 700. foreign spacing to be 1.75 pixels and as before we want the text transformed to be uppercase then for the content we want the display to be Flex direction to be Europe justify content to be space evenly and then a margin at the top of 14 pixels and now we see they're both side to side for DOT skills we want the width to be 45 percent we want the display to be Flex we want the flexor app to be wrapped this basically means that if it's going above outside the width it should wrap on to the next row and then we want a gap between each of the elements of 11 pixels and now it's neatly laid out into a grid pattern for each of these skills so dot skill we want the display to be Flex again we want the flex direction to be column and sorry this Gap should be 37 pixels we want the Align items to the center and we want a gap of 11 pixels and for the skill image container we want the background color to be VAR dash dash Color dash secondary we want the Border radius to be circular so 100 percent we want the display to be Flex we want the Align items to be Center justify content to be centered a width of 120 pixels and a height of 120 pixels you know it's neatly in a circle and we want to also Target the image inside this so we'll say dot scale image container IMG and we just want to give it a width of 75 pixels for the paragraph inside this we want to say dot skill p we want to say font size 25 pixels font family and we want this to be Euro bottle when you want the font weight of 500. Now we move on to the history so dot history we want the width to be 45 of the page on the display to be Flex Direction in column and we want a gap of 40 pixels between each item for each of the items a DOT history item display Flex Direction row align items to the center a gap of 17 pixels between each of the items we want to give it a background we'll say hash 1 9 3 7 6D and it should be a linear gradient this was just a temporary placeholder in case the linear gradient doesn't work on the on the browser so we'll say linear gradient 90 degrees so it's horizontal um this value again then rgb8 25 109 and 0 opacity and 100 percent and this should be at zero percent we see it's a nice linear gradient now we'll give it a broader radius 10 pixels and we'll give it a padding of 24 pixels and it looks a lot neater now so next what we want to do is we want to Target the image so in dot history item ing width and we'll say 50 pixels and then in the history item details we'll just say the font family should be Roboto and then we want to Target the H3 inside it so we'll say H3 font size 30 pixels font weight 500. and we want to Target the p as well so that has a font size of 20 pixels and a font weight of 300. and then for the unordered list we want to give it a margin on the clock of 6 pixels list style position to be inside because you see right now it's going outside of the of the column structure over here and now it's inside font size of 25 pixels list style type of disk so now it's Hollow and now it's a it's a disk that's full and then we want a margin on the left hand side so margin Dash left and we'll give that a value of 17 pixels and over here this should be P not H3 and that's basically it for the styling of this so let's go back into white mode and we see that it looks pretty nice over here um and now we want to make it responsive so let's get back into that as always we'll use media query so at media screen and Max Dash width of 8 30 pixels for the dot content you want to give the flex direction of column instead of row align items to the center and a gap of 34 pixels so we want the the scales on the top and experience at the bottom for DOT skills we want a width of a hundred percent Flex direction of a row and justify content of Center and then for the dot history we want a width of a hundred percent and we want a gap of 9 pixels between each item which looks a lot neater and now we have this section responsive as well so that's about it for the experience section and if you go to the lab bar and click on experience it doesn't scroll because there's a typo and now if we click on experience it Scrolls down to that section so the next section we'll take a look at is the project section so again we go into figma and look at the design and as we can see we have a project title and then we have multiple cards which have an image a title description some tags to the languages used and a link to the demo of the project and a link to the source code of the project now we can see that each of these cards is very detailed and what this basically tells us that we want to extract this project card into a separate component and then import it into the projects project section and render it over there so we'll take a look at that later on but first we'll also take a look at the responsive design so the only change is that instead of being in a row it's in a column over here so now that we know uh more about the design let's get started with the code so we'll go ahead and close all of these tabs over here and as always inside components create a folder for projects and then we'll create a file called projects.jsx and just run rafc and then we'll also create projects Dot module.css and then we'll go into app.jsx and import the projects component and render it out we can see that it's rendered out at the bottom over there so we'll first render out everything into this Project's component and then we'll move it out into a separate component for the card itself so what we want to do is firstly we want to go and we want to delete this div and projects and we also want to render out the data from a Json file because again if you have any projects it will involve a lot of data and it can be constantly changing so you want it to be easily editable so again you can get this data from the GitHub people Linked In the description but ideally you should be using your own data over here so we'll create another file called projects dot Json and let me go ahead and paste the data over here and you can see that each element inside this array has a title an image a description skills is an array and then a link to the demo and to the source so we'll go back into projects.jsx and we'll create a section tag over here inside that we want to add an H2 and just name it projects and then below that we'll create a div to contain the projects that we have and over here we want to map through the projects array that we have so first we'll import it so import projects from dot dot slash dot slash data stash projects.json and then we want to say projects dot Mac and like before we want to take the project at this ID as well as this index as well as the ID Arrow function return and what we want to do is we want to create a dip so we'll create a div we'll give it a key of ID and then we want to render inside it first of all the image that we had the SRC will be the project dot image SRC and the alt will be project Dot title and we can actually make it a bit nicer so we'll wrap this in filters and do some string interpolation and say image of and then the project.title so that's the image below that we want to have a title for this product so we'll say H3 and over here we'll just render out the project title below that we'll have a paragraph tag with the descriptions we'll say project dot in description below the P will have an unordered list which will contain the different skills that we used so we'll have another curly braces we'll say projects project Dot skills.map take a skill and the ID and we'll say create a list item give it a key of ID and then inside this just render the skill that we have and we see that it's being rendered out right now um so once we have the list item being rendered out below the unordered list we also want to render the demo and the source um part of this so we'll create another div which will contain these buttons uh the links we'll create an eight ad the href should say project dot demo and then the text will just say demo and then inside here we also want the source so we'll say hdfs project doc source and then this just says source and over here instead of just using project.image SRC in the source attribute we want to use the helper function that we have we'll say get image URL and we'll go ahead and say that now we see all the images and all the text is being rendered out so now that we've done that we can see that it's a lot of code in one file and it can be easily extracted out into another component so what we'll do is we'll go into projects the projects folder and create another um jsx file called project card.jsx and project card Dot module.css we will run rafc save that and then inside projects we want to take everything inside this return statement and cut it from here and return it inside the project card now we have to make some changes so first of all we'll remove the key from here instead of having that here we'll have it over here so let's import the project card we'll give it the key and ID and of course it's not being rendered out properly because we have a bunch of variables we're using here which we haven't defined yet so all of these values such as title description image all of that we'll be taking in as props so we could just say props over here or we could use something called restructuring in es6 and what that basically does is it extracts the value of the variable inside an object directly over here so instead of saying props we will say project and this is basically equal to saying cons project is equal to props dot project so instead of doing that we just extract it over here and we can take this further and instead of having to say project.mhsrc project.title we can do some more restructuring and say from this project variable take out the title image SRC description skills demo and source save that and then wherever we have project dot something we can just delete all of these and a trick in vs code is if you press Ctrl D or command D while you've highlighted something you can select everything else which is equal to that value and then you can just go ahead and delete it so we'll save that and of course it's not being rendered out still because we have to go back here and pass in the project property so we'll say project is equal to project instead of having the get image URL over here we'll cut this from here we'll go into project card and we'll import it over here and then we see that everything is being rendered out as it was before so now that we're done with that we can begin with the styling so first of all let's add some styling to the projects.css and then we can add some styling to the cards themselves so The Styling for this is fairly simple we want to import the variables as always we say dot container and we put the semicolon here and before we do this we have to actually add the class names over here so we give this a section A Class name of styles dot container and obviously we have to import the Styles as well so we'll go here and say import styles from dot slash projects or module Dot CSS save that so this is styles.container go ahead and copy that this is Styles dot title this is Styles Dot projects and that's about it for this file let's go ahead and do that for the project card as well so we'll import styles from dot slash project card dot module .css and then this div will be named styles.container this will be named Styles dot image this H3 let's give that Styles dot title this B let's give that Styles dot description this UL let's name that Styles Dot skills each list item we'll name that Styles dot skill for this div over here we'll just name it styles.links and then each of these will give us Styles dot link to them now just to point out the benefit of CSS modules you'll notice that both this component has a Styles dot container styles.title styles.description as well as projects.jsx just tiles or container title um and both of these have the same class names and if you weren't using CSS modules and you defined the classes in separate CSS files there might be some overwriting of styles and it would be very messy but with CSS modules you can import it into its own confidence and they don't overwrite each other as long as they're not imported into the same file so let's get back into the styling so we'll go into projects.ca module.css and for the container we'll say we'll give it a margin of talk so margin Dash top we'll give that a value of 76 pixels the color will use variables and say dash dash dash text say that and margin left of 10 and margin right of 10 okay so that's a bit better spaced out for the title we use the same styling we usually use so font size 35 pixels Bond weight and 700 letter spacing and 1.75 pixels and text transform is now as I said we're using this dot title class name in multiple places and we're redefining it as an exercise I want you to figure out by Googling and going on stack Overflow how we can define global Styles even if we're using um CSS modules and I want you to write down in the comments down below if you manage to figure it out so next we want to add The Styling for the dot projects we'll give it a margin Dash talk value of 37 pixels display Flex Flex direction we want it to be in a row Flex wrap we wanted to wrap around if it ever exceeds the width we want to align the items to Center we want to justify content to Center as well you want to give a gap of 15 pixels between each element and a width of 100 so that's the styles for the projects.module.css let's go into project card again import the variables import dot slash vars.css for the container we wanted to display Plex the flex direction should be column in this case I'm going to give it a border radius of 10 pixels we want the background to be a linear gradient 180 degrees we want the value to be hash 576 CBC and start at zero percent into the element and then the ending value should be hash 1 3 2 a 53 and then that goes into 100 into the and this should be a DOT and we'll say that we see we have a background for this card element now we want to add a box Shadow to it as well so we can say box shadow 0 16 14 pixels 0 and then hash of 0 for 1 5 2 3 then save that for the padding we want 18 pixels and 24 pixels and then the maximum width we want that to be 345 pixels for the image itself we say dot image we want to give it a margin at the bottom of 26 pixels and for the title we want the font size to be 25 pixels and the font weight to be 700. save that for the description you give it a margin top of 6 pixels font size of 25 pixels and a font weight of 400 okay that for the skills that we want to render out which actually aren't being rendered let's take a look at that from the project.project card uh it's because we missed a return statement over here so we'll say return and obviously that's being run around for DOT skills we say the width should be a hundred percent margin dock should be 14 pixels display of flex Direction in row Flex the wrap of wrap so if it ever exceeds the width it will wrap around to the next row a gap of six pixels between each element and a list style of none to remove lip electrons and we see that it's in a roll now and we want to make each of the skills look a bit better so dot skill font size 25 pixels pond weight 400 border radius 100 pixels background of variable Dash Color dash doc and a padding of two pixels and 22 pixels save that and we see that we've rendered out some tags now now next is the links so dot links the width of the links container will be a hundred percent a margin of the top should be there of 26 pixels the display should be reflex justify content to space around and now they're equally spaced apart and then to make it look a bit nicer dot link text decoration none so it's not underlined color variable that's just Color dash text to make it look white font size of 30 pixels font weight of 600. border radius of 100 pixels background of VAR dash dash Color dash primary and a padding of one pixel and 22 pixel and there we have it this is the project section and we notice that we don't really need to um add any media queries and make it responsive it's automatically like that and that's because um of the fact that we're using flexbox and by using um flexit app so it automatically converts into a column of cards um once the width is data I love and the width is larger we see that it goes into a rope and it automatically accommodates any width based on the flex in our property another thing you'll notice is that the width is slightly larger than the elements and you see this white space over here it's because if we go to the Top This highlight element goes outside of the app and that pushes the width larger to the logic to what the app is and it's a simple fix for that you just go into app.j app Dot module.css and inside dot app we just say overflow and if everything anything overflows it we just say hidden and the width is back to being normal we are now at our last section which is the contact Section which is fairly simple considering everything else we've done so looking at the design just have some text over here and then we have a bunch of links one for email and two for um websites that you can go to LinkedIn and GitHub of course you can add anything you want over here um and it's pretty much similar in the responsive layout it's just that instead of being a rule it's a column um so without further Ado let's get started with the coding of this so we'll go ahead and close all the tabs again and then create a new folder called contact and before we forget going to projects.jsx and for this section just remember to give it an ID of projects so that we can scroll to it later on and then inside the contact folder create contact Dot vsx and on that dot module.css incontact.jss jsx rdfc save going to app.jsx import the contact and save it go back into contact.jsx and as I said it's a pretty simple component so first of all we delete this to go to the bottom and we see the contact text is over there and we want to use another semantic HTML tag and this will be called footer and then we'll put a div over here which will contain the text on the left hand side we put an H2 which will say contact and below that will be a P tag which will say feel free to each out save that and then below this div we'll have an unordered list for each of that we have a list item which will be an image as well as an attack so save that the SRC of course we'll use the get image URL function that we have and this will say contact slash email icon.png and the alt will be email icon and we see the email icon at the bottom over here and for this href instead of being a link to a website will be male 2 as we did before my email at email.com and my email at email.com go ahead and copy this two more times and since instead of email icon over here there should be linked LinkedIn icon and they should say link in icon and the hdf for this should be whatever your LinkedIn profile is https colon forward slash forward slash www dot linkedin.com slash my name and the text should be linkedin.com slash my name and then for this it should be GitHub icon then we should say we'll get a purple and then the href should be your GitHub profile https over slash forward slash www dot github.com my name and the text again should be yourself.com slash my name and we see all of this rendered out at the bottom again fairly simple component now we'll add the styling so we'll go over here and import the Styles first so import styles from the slash contact dot module .css give the footer first an ID of contact and a class name of styles dot container copy this now for the first div we'll give it a classroom of styles.txt and then we'll go into the UL and give it a style of style dot links for each list item we'll just say Styles dot link copy that and paste it into each of the list items and go ahead and save that now let's begin adding the styles for this so we'll go into contact Dot module.css import the variables import order slash bars dot CSS dot container then we need to add a semicolon color should be based on the variable Color dash text margin top of 120 pixels background color should be variable the dash Color dash secondary display should be Flex Flex direction should be row justify content to space evenly the width should be 100 viewport width padding should be 58 pixels vertically and 10 horizontally and then a gap of 10 pixels between the two sections the text and the links inside dot text H2 we say the font size should be 80 pixels the font weight should be 700. and the letter spacing should be for Christmas so the title looks a lot better for the dot text the paragraph we say font size should be 40 pixels font weight should be 400 and later spacing should be two pixels save that for the links dot links display Flex has most things Flex direction to column align items Flex start because we want them to align to the left hand side of the column list style none so no bullet points and a gap of 26 pixels between each other right for each individual link again display s align items to the center and then a gap of 25 pixels in each element and then for the a tag inside the link color we will set that to White text declaration remove the underlying so text declaration none font size 13 pixels for the weight of 400 and later spacing of 1.5 pixels and then we go here and see that in a wide format it looks pretty nice but in narrow format it's a bit uh cramped so let's write the code for the narrow format we add a media query so at media screen and Max width of 830 pixels for the dot container instead of a row we want it to be a column so Flex Direction column and a gap of 23 pixels save that we want dot text to be uh display Flex Flex Direction column align items to the center and then for the dot links we want align items Center and we need to save that and we see that it's now a column instead of a row and let me make it wider so congratulations we're actually done with coding out the entire website but the issue now is that it's only available on your laptop and you can't really share it with anyone else um so to do that you actually need to deploy it and if you want you can add your own custom domain to it as well so to do that um we first need to come into vs code and one thing you need to know is that you can't publish react directly to the internet all that browsers accept is HTML CSS and JavaScript and right now we're dynamically compiling the react into HTML CSS in JavaScript so to do that we'll actually first need to stop the npm run Dev which we have and we'll need to run a command called npm run bills and what this will do is we'll take all of our react project and convert it into HTML CSS JavaScript and image files and you'll see it's created a dist folder over here and that basically has our index.html the fabric on and then all the assets which we bought such as the images and like a Javascript file and it looks like gibberish but it actually has all of the code which we just wrote down and to check if this works properly we can go into the terminal and run npm run preview and what this will do is it will use the dist folder to run our project and show it in the browser so if we go into localhost 4173 and paste that over here we see that the same thing is rendered out as it was before which means our build process succeeded and we can go ahead and publish this to the internet now there are a few ways of publishing your websites to the internet some are paid some are free um the main free way to publish your portfolio website is to use a service called netlify so you can go to netlifi.com and you can click on login or sign up and create an account and then once you're done you'll be directed over here to a dashboard similar to this and you might have something which says get started with a new project I'm gonna go down here and it says add new site I'm going to click on that and I'm going to click on deploy manually and this will show me this good UI where I can just basically drag and drop any files I want to publish to the internet so all I can all I have to do is go to the dist folder over here drag it and drop it into the browser and then it will upload all of the files and do some stuff in the backend to get our website ready and that was very quick we see that we have the URL for our website which we can open up by clicking on open production deploy and now you have your website hosted on Netflix and it's basically the same website which we made right now um but it's on the internet so you can take this link on the top over here you see it's like some random string and then it ends with dot netlify dot app and you can share it with anyone you want um if you don't like this string over here you can actually change it so you can go back into netlifier you can go into options deploy settings domain management and then you see the domain over here which is which you can share with everybody else you can click on options and edit site name and you can give it any name you want and as long as it's available and not used by anyone else you can use it so we can say code complete portfolio tutorial click react and save that and looks like that's available so we have our custom URL now um and we can go ahead and share that and it's all free um the issue is that we still have dot netlify dot app in the end um and if you actually want your own name in the in the website so like ada.com or something like that you'll actually have to buy the domain and for buying domains what I usually use myself and what I recommend as well is domain.com so it's a pretty popular service and you might have heard about it before and even used it and I highly recommend this one and if you go down to the description there's actually a link which you can use and clicking on that link would greatly help out the channel if you are intending on buying a domain we do get a certain commission if you do use the link and if you use the discount code in the description you get a 10 discount as well on the domain that you're buying so do check out the link in the description and use the discount code for a 10 discount but anyways all you have to do is type the domain that you want so let's try scooby.com and of course it's not available because it's a pretty common name but if it is available you can um click it we click on it over here and then say add a domain to continue and then you will be prompted to buy it using your credit or debit card and then you'll be redirected to um the control panel of domain.com and then if you go to the URL then go all the way to the left and replace summary with DNS this is where you'll have to make the main change in order to let netlify know that you want to use this URL so to do this you first go back into netlify and then on this page the domain management page you go down here and it will say add a domain so you click on that and you click you uh typed whatever domain you want to use which you just bought from domain.com so we say this one and we verify it and since we've already used Netflix with our domain it says that this URL is already on the netlify DNS um but for you that will not happen and it will instead show you five values which you have to go ahead and paste into domain.com so you'll go back into the domain.com control panel and you'll say add name server and you write down dns1 dot p05 dot ns1.net and copy that and then you need to do that again three times so dns2 dns3 and dns4 and notice how it says that it takes 48 hours to propagate that's because the internet is a vast web and the changes need to propagate from one machine to another before you can go to the domain and it will take you to the netlify website and then once you're done with that you go back in a network file and just um it'll say done and that'll basically be it it should automatically add an SSL certificate to your website so instead of doing HTTP you can also do https for your website but that's essentially how you deploy your website in netlify for free and then if you want you can add a custom domain as well so that's about it congratulations you learned how to build and deploy a fully responsive portfolio website and react with the best practices animations and easy to edit data uh I hope you liked it and if you did please subscribe like this video and comment below if you have suggestions for more tutorials and remember if you want to buy a new domain use the link in the description and the discount code but anyways until next time thanks for watching

Channel: Code Complete

Views: 134,190

Keywords: react, portfolio, tutorial, figma, design, css, html, js, coding, programming

Id: YQCDUJ6hhNY

Length: 120min 0sec (7200 seconds)

Published: Mon Aug 21 2023