Step by Step Tutorial for React JS Portfolio Website Using Tailwind CSS

hello everyone I will explain you how to create your own portfolio website with reactjs for structuring our components and Tailwind CSS for styling we are not doing any JavaScript functions in this project except really small one for the navigation and also thank you for basically deleting the like button on the last portfolio if you enjoy this session don't forget to do it again and without further Ado let's dive right into it first let's make sure we have our extensions installed this t in CSS intellisense and we also need this es7 this one then we can start a new terminal and put there our first command this npm create react app you have all the commands in the description so feel free to use them second one is for installing the Tailwind third one is for initializing the Tailwind then we will go into this file and we will replace this line for this one save it and we will start our page NP M start I mean server and on This Server we will be checking our page then you can see how it's loading and it's because we also need to delete some files and update some we will leave there only app.js and index. CSS andj JS let's delete all the other files now in app.js we will delete these two Imports we will delete this html text so this we can write there something now let's go to index. CSS there we can also delete this we will Define there these three Tailwind directives we can also see this on their Tailwind page where is exactly set what we need to do to import it and now we will move to this index tojs and we will remove there the unnecessary things so these report web vital and also this one and that starts our page page now we can see our text there and we can start creating components before we do that let's create their new folder with assets there we will be putting the images and second folder with the components and the first one as you can Pro the guess will be the nav bar now we will use the rafc word there hit enter save it and in our app.js we'll be starting with importing it now we start typing it in a tag click on it it gets imported we will close it and let's move to the first component let's start with importing use state from react there that we will use for our navigation and also setting background color to Black and some height so we can actually see our navigation bar for the navigation bar we also need to import outline close and outline menu icons from react icons AI we will now open the terminal and we will use the command there we are declaring a state variable Na and it function set enough to update the navigation State and the initial value is false then we have there a function named handle NF and this function is responsible for toggling the value of our navigation variable and then we are using it there in this onclick function so when we actually click this icon it gets changed to true or false and then we are using their this turn operator that does the magic because inary operator we have first there the variable and then when the variable is true it executes the first position which in our case is outline close but because we are starting on false it will be executing this menu icon and after we click it it changes to this also we are using their block so this icon will be shown on the mobile screen and as this gets on medium screen this this icon gets hidden and in place comes our desktop navigation that is there also let's first set text color to gray 400 in our first div checking this one we actually don't need this div and there is the desktop navigation we are using logo in our H1 Tech and in unordered list we have some list items and they contain also the anorex where is actually our page sections first is about then is worked and is contact we have also some elements on the section where we actually don't need this navigation to go for example some skills section and so on because it's more like styling elements and we don't need a navigation there let's start putting Max width to these sections we will do because we will keep our page in mix with like 1200 pixels then we can Center it with horizontal margin to Auto then we will use flexbox layout justify between so we have nice space between these elements and also items to Center so we align it vertically now let's add the mobile navigation there in the first diff we are again using Turnal operator in case it's false and closed we will take this to left minus 100% that means it will be out of the screen and in case it's true we are putting it to position fixed and assigning it to left and top zero position so it will be in the left upper corner also we are setting their width of this to fixed 60% height to full vort height we are setting there a little bit different background and this e and Out means it will slide in like this when we will open it we could use some margin right to our navigation let's go there put that margin right to six now it looks better and it also works that is fine when we will continue There we can see it's not that much different from the things we explained there only thing I need to get rid of is this home section that I have still from different Project work and experience and that's about it now we can try how it works so on large screen it's centered we have there the navigation and on a mobile screen we have there this mobile navigation and it works some final updates or final touches to this navigation or page we will do at the end for now I think this looks fine I put there the assets you can find one my git in description we will create a new component there new file hero. jsx there we will use the word save it put it to our .js and we can start with writing this section let's again open the terminal and put there another command install react type animation and in our hero jsx component we will import our hero image from the assets and also we will import this react type animation we just installed there we will start with the first div and that will have the classes with grid for the mobile design we will be using just one column and for a smaller screen and above we will be using three columns then the image will be taking one column and the other text will be taking two columns we will have a gap between them we will keep the max width of this component to 1200 pixels we will also Center it with this MX Auto now let's uh set background to Black you can see there it's still it's still in the middle but let's actually put something into this component let's also set the height to 70 vort height that means it will take like 70% of the viewport height on our desktop even on the small screen design and then we will continue with these first two diffs we added there and that will be the first one that is holding our image and the second one that will be holding our text we will put our columns pan one that means it will take one of the three columns we have there on our screen and to the second Dave we put column span to that means it will take the rest of the two columns for the image we will put there also vertical and horizontal merge into automatic that means we don't maybe even need it now but on a mobile screen device this would be on the left side then inside this diff we'll put the div with the hero image and we will set there a WID actually we can even do this and we will set there a width of 300 pixels for a larger screen and above we will increase it to 400 pixels we will set it he to Auto so it will take the hated need and there in the image we will put a source image we imported it there we'll put put some all text there hero image in case it won't be loadable and that's it for the image now we can move for the text for the interesting part we will first need to add there a vertical margin we have there a heading One tech that is using only the text size setting text color and weight of the text then in the span tag we are using this primary color or applying this primary color we have there in index.css to our text IMA and then we are using this brake text so actually this type animation is on another line and there we are just setting front end def web designer consultant I can maybe do this we are setting there the speed and the Infinity Cycle and also the time how long it should be written and then we can just move to another tech that is the P te there we are holding the description who we are with experience we have and that is also only text color and text size moving on we have there the buttons two buttons for downloading the CV and for redirecting us to contact Section we can use there HF to contact and then we are using their this background to bottom right from Orange to Pink text white and also paddings on vertical and horizontal line full width also we are setting there the Border radius and margin to right we don't need it there actually and if it won't be there our buttons will be sticked to them like this let's now check how it looks on our Mobile screen there you can see it looks well it looks good but uh we need to change one thing and that is this height we need to change it from The Medium screen and it is working fine now we will create another section and that will be a skilles section there we will create a new file skills. js6 you'll use the word save it and take it to .js skills it gets imported it's there so we can start coding the skill section on purpose we are doing separate section to it because maybe when then you will work on some another project you can just reuse this component or we just don't mess up with the another section that will be below this one and that will be some about section first we will import there all the icons you can see from the assets I took it there and I named it well like they are named and then into div we will add heading and under heading we will start adding all these icons before that I will show you the classes that we have on the main diff of this section first we will set there this background blue to 300 so we know where AR section is how it looks like and so on then we will set text grade to 400 so it's a bit lighter than this 700 but it also will apply for all our icons or for our description text to our icons then we will continue with setting fixed height of 150 pixels for medium screens and above so on mobile screens this won't apply there won't be any fixed height set then we will continue with using this Max WID to 1200 pixels as we are used to centering this horizontally and we will actually use flex layout only on medium screen and above in this case we will use the justify between so we will have the spacings between the elements and also we will have this centered vertically but on Mobile screen design we will use a grid layout and we will use their grid column three so it will be in three columns also we'll use there this place item Center to Center the items for the heading two we have there The Brak text so every word is on another line then we are setting there the more dark gray color font size to 2 XL and on medium screen above to 4 XL we are changing the font weight also and we are setting there some margin now I edit these diffs and they are basically the same as the first one that we will explain let's also change the namings as it should be and then we can explain the first diff before that let's also change this background to black as we are using so now it looks better in every div we are using a flexbox layout so we can use flex direction to column so this image and paragraph text are below each other then we are centering this vertically we are adding some margin and from medium or small screen above we are setting vertical margin to zero and we are also using a weight of fixed 80 pixels but on medium screen above we will increase it a bit to 100 pixels this is how this would look like on a mobile screen design we will now need to update this skills element a bit so it stands out as it's some kind of styling element this will be the output and on Mobile screen in the end we will have it like this first we will change the width to fixed 40 pixels on all of our images then we will added there to the first div this border and we can set color to border gray 600 and as we lowered the width of the icons we can now set the grid columns to six that means we will have the six columns ready for our icons and I think that should be fine if you want to add more icons it will just create another line under the them and yeah you can play with it set there maybe only four grids or whatever fits you the most also I changed there the text size for this my text text only to text Excel and if you go to index.css I added their background color to Black for our body and we can move to another section it will be about section we will create our new file in components folder name it about use their the word save it there we will use it again it gets imported we save it we go there we start with importing our about image from the assets and then we will start with the first Tiff we'll start with setting text color to white mix withd as usual to 1200 pixels then Center it horizontally and for vertical margin we will put value 12 also we will now add there this ID and it will be ID of an about section so our navigation can take us there there from medium screen and above we will use our grid layout and we will use grid columns two or two grid columns and from smaller screen and above we'll use a vertical pading of value 16 you can see on our page the spacing we have there on top and bottom then we will have there the about text and also the image let's start with an about text we are having their margin from top and on medium screen and above we are getting rid of this margin then we are aligning text to left then we are using Flex layout this Flex column we don't even need anymore because we put this H2 and paragraph in a diff if there won't be the diff we want this to be below each other so we would use also Flex Direction column but now it's not an issue we also want need he to full and also we don't need this justifi start what we will again use is some padding to the vertical so top and bottom but looking on this we have it already there so that's something we also don't need by the way we updated also the mobile design so I will also just check there my browser with this Mobile screen and that looks about fine so we can continue and if you are asking why I'm sometimes deleting something long to explaining is because I already created this design and now I'm just creating it from scratch with you but I have the blueprint on my second second screen for the div that is holding our text we will add vertical margin and also some horizontal margin so we will Center it like this for the heading two you will just set some font sizes font weight margin to bottom so it's again divide it a bit from our paragraph text and a primary color that means it will have our gradient color and for paragraph text we will just set font size and on a larger screen and above we will increase this font size for the image we will need to center it then we will use some border radius again vertical pedding and on medium screen and above we will reset this medium pedding now our page looks like this with this about section and I think we can move to another section and it will be a work section let's create our the file work to jsx let's use there the w and you know this process already I would say pretty well so let's just do it again and we can continue we will start with importing all the project images we have there or images of our work in our main diff of this section we will set maximum width of 1200 pixels and also we will set horizontal margin to Auto then we will use pedding of five and also we will add there an ID that will be work for the navigation that will head us to this section inside this diff we will have two other main diffs first one will be this one with the text you can see there on the page work and check out some of my recent work and the second one that will be holding our work images there will be a total of six images in the first diff we will use some pedding to buttom then for the paragraphs we will set the font sizes font colors first will be primary color second one will be gray 400 also for the work paragraph We will set font weight to 700 and we will again set some margin to bottom then we can move to the second diff that will be holding our images as you can see we will use their grid layout and on the mobile screen we'll be using just one column on a small screen two columns and on a medium screen and above we'll be using three columns then then I will explain you the first image and then we will add more and more images first Dave that is holding the image and we have there the transform that means whenever we will hover over this image it will have this effect and there will be the anchor tag when we will click it it will redirect us to the live page of course I don't have these Pages set on live yet but if you have then you can just copy there the link to the HF and whenever you click it it will direct you to the link of your live page demo and then when we will hover over it it will increase the scale that you can see there this scale we will set overflow hidden so nothing runs out of our diff card we can set some Shadow there in case you have a lighter background then we don't need to container but group I will show you so you understand better if we delete this group and I go onto that page I won't have there the live demo because it's not group so the hover effect is not applying or the transform from also effect then we are setting border radius also Flex so we have this centered then the flex box layout so we can Center everything then we don't need this margin Auto also this content diff we are setting some he there to fix 200 pixels background to cover so it covers the wall card and also position relative because this diff is in position absolute if you don't want this effect with the live button you can just delete this W diff and have it just like this then basically copy this six times add there this pictures to the source and you are done but let's leave it there next line is only about the image we actually don't need this object F to cover and layout fill because we are setting it there and then in this diff we are setting there some opacity you can see there when we are hovering over it how it changed the opacity and also shows the anchor Tech and so on this/ 70 means setting the opacity to. 7 there is the absolute positioning instead of zero if we delete it you can see how the opacity around our button is only like this then we are using again flexbox layout to be in Flex direction to column and we are also centering it into the spanch we can add some text of description of the project I will put there for now just the project and there we are setting font size font weight font color and tracking wider that means it increases a bit letter spacing also we have there the diff that is holding the anchor tag this one has text in Center some ping to top and also holds the anchor tag where we currently don't have any hre because we don't have any life to show there and it's holding the button that is again centered rounded have some padding margin background color text color text weight and text size nothing much to explain or interesting let's see how it looks currently it's like this so I think we can now copy this and edit five more times then just change this to project 6 project 5 4 three and two save it this is how it would look like on a mobile screen device and if you increase the size we get to three columns and on small screen it will get to two columns like this and that will be it for this section and we can move to another one in our components we'll create a new file contact. jsx we'll use the word do the same thing we are doing all again in our contact Section we will start with maximum width of 1200 pixels centering it horizontally background to Black and also from smaller screen and above we will set vertical pedding to 20 and otherwise all pedding will be set to five we also set id id to the SE section to work again for the navigation button actually not work what am I saying it's contact then we will continue with two diffs inside this main diff and the first one will be for text just will be just for text contact me we will set this class to text Center and in heading to class we will just Define the text size text weight also the line height and the primary color that we have there this gradient orange to Pink in the second diff we will set a Max width of 800 pixels because that should be enough for our contact form we will Center it again and we are centering it there because if we want inside our diff it will be on the left side so we want to center it also there then we will continue to next diff and that is this Gray colored diff we will add add this gray color that somehow fits into our web design we added there border radius margin to top and inside we will add another div that will hold our contact form and we will add our padding to 10 now we can add the contact form and that will look like this there is the wall form and I will now move the screen a bit so you can see the wall code first in this form we will have their method of post and we will add their action soon and that will make our email work and to anybody who will fill out our form he can send email to our endpoint or to us this form will hold a diff and we will use grid layout and on the mobile screen we will have grid column one and as we will get into small screen and above these two columns will split to two there is some Gap to vertical and also horizontal then the first D holds the first input and this class is used by all these dat so we will explain it just there and there it is just copied first there is a background same one as there then we have the set width to full if we want do this you will actually see on the mobile design how this is not taking the full width then we have there this pading set to four we have there text Gray to 400 also the color of the placeholder is set to 400 then we have there border border color border radius and when we will focus this the color will be set to Pink 600 so let's focus this message and you can see this is the message focus and if we will write something you can see also the color is the same there is the placeholder set we are using for name email and message and I believe we don't need this relative there now we get to button there we also set the button type of submit and also you will set there background primary color this won't work because we don't have it defined yet or you don't have it defined yet and how you do it I will show you right now let's copy this class I will do it to you again and add there background primary color now save it and what we need to do is to delete this text transparent and background clip text save it and your back background primary color is Al you can also use it for some cards if you will maybe add some sections to this page and this background just apply it to them and then you will reach the same background as we have there on our page for the sent button now we need to set there for the inputs its name and its name will be of course name for the first one email for the second one and message for the third input then to action we'll put end point from this page and I will show you the tutorial how I did it from the previous video because I have already said it so now you can see it again let's go to this page app.get for.i /login then we will sign up click on create there put there some name and put there the time zone copy this endpoint you will put there this input save it and now we can go and test it put this value send it and it will be sent and we will receive this email in our get form. login finally let's head to footer section we'll create a new file there footer. jsx use the word save it in application again import it we have it there and let's keep footer really really simple we will set the mix withd of 1200 pixels from smaller screens and above you'll set fixed height of 150 pixels then pedding to 12 we will also use justify between Xbox layout and Center it horizontally with margin mix to Auto then we'll have there a span that will be holding our name or logo and we used to it primary color and for our paragraph tag we will use text grade to 600 and we will have there Break Tag and again I don't know some styling thing so there is just not a plain email but you can put there whatever you like this is how the footer will look like on mobile device and to fix the issue with the Z index there so this type animation can be seen even though the mobile navigation is opened we will just go to navbar and there to this class in this first position of our Turner operator we will put Z to 10 and now this won't happen again and also we can take this B we have added skill section and put it into our nav bar there and that's it for the wall page finally let's check how it looks like and I also guess you are about to leave so if you enjoy this session write me comments or give it a thumbs up and I hope I will see you in the next one thank you cheers

Channel: c0d1n0

Views: 5,797

Keywords: html, css, portfolio, portfolio tutorial, how to portfolio with html css only, how to portfolio in html css, html css tutorial, how to html css, html css portfolio guide, html css portfolio walkthrough, html css website tutorial, website with html css only tutorial, bento grid, bento grid tutorial, bento style portfolio, react, tailwind, react tailwind portfolio, react js tailwind css portfolio, react js tutorial, tailwind css tutorial, tailwind css website tutorial

Id: 7V2W-lHWMEs

Length: 31min 1sec (1861 seconds)

Published: Thu Feb 22 2024