How to React JS Portfolio Website Using Tailwind CSS | Step by Step Tutorial

hello everyone I will explain you how to create your own portfolio website with react and Tailwind reactjs for structuring our components and Tailwind CSS for styling it's important to point out that we are not doing any JavaScript functions in this project at least I can't think of any if yes maybe really small one and I will try to keep it as simple as possible I will try to explain everything let's dive right into it also let's download these extensions first one is this es7 and the second one and the main one is intellisense and it's this one tailin CSS intellisense these two extensions are really important so let's download them let's click on the navigation there in vs code then on Terminal and then on new terminal and there we will now use some commands to start our project and I will leave them in the description so you can just take them and execute it in order I did first we will use this one to create a react app now we can see hacking of course that's what we will do then we will use this one npm install Tailwind CSS then we will use npx Tailwind CSS and initialize we got this file and that is important because next thing what we will do in this content we will put HTML JS and js6 that means basically this js6 we will create a components that we will later use in our on our page and now the last command for starting our page is npm start let's press it it will open a server for us and it will open the page but there is still nothing because we need to go to this source and we need to actually write there something on our page but before we do that we need to delete the unnecessary files and that will be fcss this one let's just say we will leave there app.js index. CSS and index.js like this and then you can see now on our page we have there multiple errors what we will do is that uh we will need to get rid of them and how to get rid of them so for now because we don't want to use this code that is there we will just delete it and that will solve the errors for us but we also need to leave something on our page so there we will just put hello and we will also need to delete this logo and app. CSS we will go to index.js delete it there it is and we can see two errors there so that is this logo implementation we deleted it so we can delete it also there and also it's this app. CSS from this app.js file and there now we can see our hello then also what we need to do is to copy these fre things into index. CSS tailand base components and utilities if you check the tailand page itself it's also there what you exactly need to do how to start your project and this is one of the things also what we will do is that we will import the font there then for the wall body I will set this background color I will set font weight to 800 and I will use the font family of my font and also a backup font in case this font won't be loadable sunet now for every span teag and also for CSS class primary color I will Define this linear gradient text color I'm using their background image of linear gradient but also with this webkit background clip and with this color transparent it will make not a background but the text of linear gradient color then I will Define background primary color and there won't be any web kit or so so this will be really for a background and we will use it for example for a button or so now we will create their new folder and that will be asset we will create another folder and that will be components and in this assets folder I will be putting images and then I will use these images on my page in this components folder we will be putting all the components and then we will be using them in this app.js so let's start with the first component and that will be a Navar js6 there in this nav bar you will use this keyword aay fce you will hit enter and it will prepare this template for you now when you will save it and go back to abjs there you can start typing navbar with the TCH of course then you will click on it or enter and it will automatically import this component to this abjs for you then let's just do a slash and finish this tag and then whatever I will write in this knf bar so let's write there something we can actually see on the page let's give it a text white now we can see it on our page let's start with the Navar first we will need to import and we will import this reactant use state from react this use state is a hook that we will use for our navigation we will change the button with it and open the navigation on mobile phones then we will import two icons from react icons SL aai we need to import them or install them so let's again open the terminal and there we now need to use the command and install these react icons so then we can use them there we are using the use State hook to create the state variable called Na and its corresponding Setter function set enough and we are initializing this value to to false with this UST State false so inside this div we will continue with writing another text and we will start with this diff and this diff is basically the hamburger menu icon what is it saying there is that on a smaller screen because Tailwind everything you define in tailin CSS is taken from the mobile design basically it's mobile first when we Define their block that means on the smallest screen or the mobile it will be shown and then when when we increase the screen size bigger than 768 pixels we'll get this menu or hamburger menu hidden and inside these blocks we are using a Turner operator that means if this navigation if this variable is true AI outline close we imported it from there and in case it's false so it's not clicked so it's this default state that we use there it will be shown as this this AI outline menu and I started with this explain now I will show you how to define the onclick function that will be handling the clicks so if we will click on this icon it will set the navigation variable we will name this handle enough so every time we will click on this it will call this function and in this function we Define dare and it will be setting this navigation to another value so it will be started as false so on smaller screen we will have there this outline menu because it's in the ternary operator on the right side of this column and that is false and if it gets clicked it will be true and Inter ternary operator that's the first position so this close and it will be changing because of this function when whenever we will click on that let's start with our desktop navigation bar and I will move the window there down there so you can see it and uh with H1 Tech we can think of it as some logo in our case will be John Doe and then un ordered list with the menu items inside in order to see what we are actually doing there we can use their background white and save it to see how our na bar is positioned we will use the flexbox layout uh now we can do the justify between that means we will do spacing between this H1 and between this unordered list then we will continue with items to Center that means we will align them vertically and then we will use max WID of 1240 pixels and there you can see how it won't get any bigger than this value what we will do then is use MX Auto and that means horizontal line and it's set to Auto so if you will save it you can see how we got our navigation bar in the middle because the margin from left and right got there automatically then we will set he to 24 and that is for the height of the navigation bar then we set P to four so ping from left and right will be to one ram and then we will set text L that means we will increase the text size in our navigation bar in our logo we don't even need this width to full and there we are increasing the text size again with text to 3 Excel so this now applies mainly to these list items we are also for our logo setting the font to Bol so we are increasing the font weight then we are using this primary color which we Define there in index. CSS there primary color so you can see how it's linear gradient right now and then we are using margin to left of four so it's around one R this is how the mobile version looks like and you can see that we defined there to hide this unordered list and on a small screen it's hidden but when it get past this medium it again gets to display Flex so let's pass it and there you see we have there our unordered list and when we click this you can see that this uh handle nav function is working in case it's true or false this gets change to the outline close now we will copy what we created from there and put it there into new div and that diff so it's this one will have a class name and in this class name we will put these curly brackets and inside we will again use this turn on operator we will put there the variable name which is enough and in case well then the question mark then the column and on the first position is something that will execute in case this variable is true and on the second position is something that will execute if the variable is false in case it's false this navigation will get out of the screen it will get left minus 100% so now as it's false the navigation is somewhere where over there let's say minus 100% on left but when we all click it we need to Define how this will look like so there into this single quotes we will now Define the style what should happen when we will click it let's now put there for example background white save it and you can see when I click it it it gets the background white but of course something that we don't want as this will be a bit longer let's put this on the second line somewhere there first we want to set text to gray gray 300 that means it will be gray like this the higher value for example we put there 900 the more great text we will have so let's stick with the 300 then we will use position fixed also we will set height to full so 100% that means it will take the full height of our viewport height then we will set left and top to zero that means it will be in this left corner every time then we will set width to 60% then we will use border on the right side there and set its color to gray 900 we will use a background for this navigation bar I will use this color and then we will use e and out that means if we will click it it will slide in like this and for this also we need to set the duration so I said there 500 and these texts are copied only thing that is changed is for the logo there it's not margin left so ml it's just m so the margin so it's also from the top and we have their margin to one ram now let's remove the background color of white save it and uh what else we need setting text to gray what about 300 maybe 500 yeah that looks better so now our navigation bar is there and will look like this and we can move to next component new component new file hero. jsx inside we will use this word enter save go to fjs there we will start typing hero enter it close it now we have it there imported that is important and we can start writing a code there but before we do let's add some assets and into this assets I will add these images I will put them on GitHub so you can take it and you can replicate what I'm doing this profile picture I will be using I download it on pixels.com and then in canva I added these elements behind it and download it as a transparent background first what we will do in our hero. jsx component we will import these three things first will be the profile picture there is the name of it from assets there is the path then the icons I will use again this is what we already installed react icons and then we will also use this type animation that will make our text on the hero page moving and typing all over again and we have there an error on our page as you can see what we need to do is to again install this react type animation library then in terminal we will use this command and it will download the things for us we will create the div first and inside this div we will create two another divs and one will be with text we'll Define after I explained this and second one will be with image so the bigger diff that is containing these two we can set background to White so we can see on the page how big is it actually we will Define first the max width we will again use 1200 pixels then we will Define the height we will use 80 viewport height then we will use margin X to Auto that means without this it won't be centered then we will use the flexbox layout and we'll use flex column reverse and this means that we cannot see this now because we are then using this SM so small screen and setting there Flex row so it's actually displaying next to each other let me take a smaller screen there and there you can see that this Flex call reverse is applied because this image should otherwise be below you can see there is the second diff not the first one and we want this because yeah probably better to see the image first and then the text then we will use justify Center so we Center it horizontally and align Center to center it vertically without this you will see it's not centered at all then we are getting to first if with text this is just a placeholder and uh the second one that will actually stay is again using margin Auto to the vertical position and uh in image itself we are using there this variable profile image or profile picture that is the thing we imported uh we are setting their alt that means if this image won't be loadable what will be shown it's needed so let's use their something like profile picture and then we are setting the width of the picture to 300 pixels that is actually withd for the small screen because and I will be repeating myself probably more often so you really understand it on the small screen on the mobile screen it's what Tailwind takes first so first will be taken 300 pixels and then from smaller screen it will be increased to 500 pixels go there and we will increase it you can see the picture is now being 500 pixels we will put margin to horizontal to Auto we will use height to also Auto so this picture won't get shrinked or anything like that because its height will be automatic to its width and we actually won't use this rounded full that will be it for the picture now I will explain you this wall diff I edit let's start there I will add there this background blue so you know what I'm talking about first I will use flex to column so all these text Texs will be below each other then I will Center it vertically and horizontally with this margin ipsilon and margin X next one is a PC with hi I'm John do and this one we will set to text Excel so the font size will be something about one ram then we use Font bolt and text color will be gray 200 and on small screen we will increase this text size and on medium screen we will increase it even more so now you can see how the text size is increasing this is a small screen and this is a medium screen so I hope it's clear and we can move to H1 Tech that is actually using our type animation there again similar like in this PC we are starting with text for Excel and also on the medium screen we want to increase the vertical pedding by six that means when we get to medium screen you can see how the pedding of this type animation increased on top and bottom then we are using this type animation we imported there and there we need to use this values sequence there we will put the values we want to be written like there on the animation so first will be frontend def then web designer then consultant and that is the value of how long it should take to have this written then we have repper span which is a repper for this type animation the speed and the repeat to Infinity so if you will have this page open it will be doing this in a infinite Loop cycle that is for the H1 Tech with this typing animation we can continue to another diff with flexbox layout I'm centering it horizontally and vertically also inside it I have a ptag and again same thing that I used before starting with text Excel and then increasing the text size on each screen and also I set there some color of the text and font bolt and there I have the with of five plus years experience then I'm continuing to another diff with the icons we are using this LinkedIn GitHub and Instagram icon that we imported from this Library react icons and last diff in this text section is this diff with a button and this first diff Insite is the glowing functionality around the button and the second is button itself for this diff we have it position relative so it's relative for this absolute positioning of this diff then we have the there for the inline display and also we are using there the group and that means we are grouping this diff with this Tech and also vertical margin to three let's first go onto this button we will leave the hrf like this the link to this CV download maybe if it's some drive or something up to you we set there width and height then we will set there again the relative positioning and in line Flex we will Center this button text to center with items and justify Center pedding to left and right will be set to eight and pedding to top and bottom will be set to four we will use a large text setting font bolt and text color to white then we will set transition and duration to 200 then background primary color that we defined there in this index. CSS then we will use rounded. ccel that means the Border radius will be set to something around almost one ram and then we have there the focus things so when we will focus it we will set outline To None ring to two that means the shadow if you will hover over it you can see it there then we will change the color of the focus and also width of the focus we are using absolute there so we can position it to this relative element transition all so it's applied to all elements for some transitions we are definitely want to use for this then duration and opacity setting then this class inser PX it offsets the element from all sides by minus one pixel then we have the colors there rounded Excel border radius and we are then setting the blur and then we are using to group hover again for the elements to set different opacity inser duration and then the last class we actually don't need because that's from another library and that's it for the button now let's go B up and delete this background to White that we used also delete this background to Blue on our page you can see that the menu button is not working and as we clicked it we now can think that it's probably because this image is overflowing to the navigation bar and they this button is behind it how we can fix it we have two ways and we will probably use both first one is go to our nav bar and set there a z index uh for example 10 because we want this n Bar to always be on top and then if we go back to our hero component we will set their vertical margin to seven and that will be for the smallest screen and then when the screen is increased to your small size we will set again this margin to zero because now you can see how it works because this picture gets to the right side so we don't need it anymore let's increase the spacing there in our navigation bar we will put there something like I don't know five maybe let's try and by the way yeah one thing actually did wrong if you hold out and click on all these lines then you can write there at the one time even Tailwind recommends it to do so yeah it definitely saves you a lot of time let's use five and I think it looks so much better now let's see how on the small screen it looks like also fine okay now we can move forward let's create there new file it will be about section let's use the word there save it go there to our application about it got imported there that is important uh let's go back to our component and we can start writing there first we will import our image from the assets it will be about image we will first set vertical padding to 10 then text to White then different background then in the first section let's set this he to Auto and let's do the same thing in our hero section so there on the first diff where is defined some class we will set hate to Auto that means the content won't be overflowing into another section actually now I edit this diff inside and then two diffs into it I will explain them in a minute first let's go to this one and I needed to add these two diffs now for explaining to you because I'm using their Flex colum reverse from the smallest screen or from the mobile device it's in Reverse now you can see that first should be image but instead of it is first the text and then when I expand this page so after small screen it gets to the left and then it stays like that I'm also using their gap between these two diffs we have there I'm also using their Max width and horizontal margin to AO so it's centered in the middle then for the image we are setting just WID and Heights but uh maybe interesting thing there is the filter that we are setting because this image was too bright and I set there a filter gray scale and decrease the brightness to 50 so it makes the image like this more gray and it more fits to our page design in another diff I have the lpsum text and then I will add there more diffs again nothing so much interesting setting the text colors padding margin and for the span I don't actually need to use this class because I defined it in a span that even the only the span tag will have this gradient color I will make there spacing so we have the space between about and me now I opened this div that is holding this lpsum and inside it I put this one and inside this diff I put another one that is holding this 11 plus projects thing we are using Flex margin to top and also we are centering the items vertically we are using a gap of seven between them for each of these boxes we will set a bit different background and then sl40 means that we will lower the opacity then it creates this card Effect also we will set there a rounded large change the Border radius and inside we will put heading three with the pte and for the heading we will add again text size on medium screen we will increase the text size then we can add font weight text to White and for the plus sign there we can use the spanch that means again I don't need this class I defined it later so that's why I still have it there and we don't need also this and that means this Plus or this sign we will have there will get color of our primary color and then we have the P there I will have there project and again we use the lower text and we are increasing the text with the screen size then we will copy this div two more times and we will change it to another values and I just changed the text to five plus years experience and then 30 plus epic clients and that's it let's create a new component over there new file work. jsx let's use the word save it in abjs let's edit like this it gets imported and we can start there in our new component we will first import the project pictures from our assets then we will start with the first div we will add vertical pedding to six we will set there a Max width of 1200 pixels that means after we increase the screen even more the section will still have the max width and also we will set there the horizontal margin to Auto so we have our section centered in next div again we are centering it with margin X2 Auto then we are also sting horizontal pedding to four and on medium screen we are increasing this horizontal pedding to eight then we have there two diffs and the second one will be actually holder for our project images but the first one is for this text that you can see there with the my projects and so on we are setting there merging to button we are using flexbox layout for aligning items vertically and also justify between so we have some spacing between them we actually don't need this Gap over there and then we will continue with next div there we are again using flexbox layout because we want to have these below each other if we didn't put their Flex column and there will be Flex row you can see how it's next to each other so we want there the column we will set there some Gap if this again won't be here there won't be any space and then we will continue we have there H2 Tech and P teag in H2 Tech again we are playing only with text color and uh text size again using the spent that already has pretty fine CSS the gradiant color and then paragraph TCH using only some more grayish color putting that description for this section let's go to this more interesting diff that is holding our project images there we are using the grid layout and from the smallest screen we are defining there two columns that means if you will have there some pictures there will be always two pictures shown next to each other we can also set there or totally delete this one and when we will add the pictures it will be only one column and then you can see as we increase it to small screen it will be three columns now we can choose maybe we can stay with one or maybe we can also do there the grid columns to two save it and we'll have there it like this maybe I will leave it like this uh probably yes and now we can move to pictures itself we'll use anchor Tex because maybe these links should or these picture should redirect you you to a live demo and all these four anchor Texs are almost the same only thing that is different there is that on the large screen or maybe even medium screen these two projects or images are taking more columns because you can see how the layout looks right let's go I will first explain this first image and then I will explain you only the differences in the other images and we will wrap this page up I had a page over this class I'm sorry for that uh we have there the GD and using the grd columns on the smallest screen like there then we have there the Gap set and from a small screen it's getting to Great columns three but why there are actually basically only two pictures next to each other and that is the difference what is happening there is that on this second I'm using from The Medium screen column span 2 and that means it's taking the WID of two columns that means there are still grid columns three but these two projects are taking two of them and that creates this layout that is the only difference U then all these things are just copied but of course the source is changed and I will explain only this first project because it applies to all the other ones with only the difference in this medium column span two for these two there we are grouping the elements and we are using overflow hidden so we make sure this image is not getting uh in any weight out of this card and also we are using there this border radius around it Shadow around our card and when screen gets past medium we are changing the height to 80 and we are starting of course there with 48 then for the image itself we are setting its height and to width to full we are setting object cover that means the image is sized to this to our wall card and also object Center so we see the center of the image and we are setting there transition and duration because we are using their group hover with this scale and that means when we will hover over our image it creates this effect and that will be it for this work component let's move to another one and that will be experience let's create there new component experience use the word save it there we will start typing it it will get imported now let's go back and start nothing needs to get imported there and again there will be only let's say two diffs and then we will copy them and that will make our section complete we are setting vertical padding to 10 and also a background color then with H2 we are using the spantex you can see there for the experience so it gets highlighted I will increase it uh and move it down then we are using margin to bottom to eight text size text color and text to Center otherwise if we want to use text to center it will be on the start and then to the diffs for this one I'm using fixed margin to bottom to 20 pixels I'm also setting there text color we actually don't need the relative positioning there and we are setting for this experience for this card some background and this sl20 means we are setting opacity to2 then we are using border radius and Max width if we don't use this Max width look what happens yeah it will be all over the page and we are using this uh horizontal margin to Auto otherwise it won't be centered then there are the paragraphs and I'm using their different gray colors first one is 400 second one is 500 continuing to another diff that is the connector between our experience cards I'm using there fixed height of 50 pixels width of only two pixels as it's just a thin connector then I'm using their background of some grayish color and also I'm using their vertical margin from top and bottom to one and I'm centering it again if I don't do this it's somewhere on the page and what we will do now we will just copy this let's do it and one time so we'll do there first second third and fourth company of course you don't need the last diff because you don't need to connect it anywhere then it will be like this and we can just change the names to Second company and so on but it's not that important for us right now let's check how the page will look like on a smaller screen on a mobile screen and with this really simple section we can move to another one actually let's just set max width to maybe 300 so then it looks like this but uh let's do there a small screen and keep there the what was there previously 600 so let's just take this put it like this so on our large screen it's still the same now we have it like this and when we will increase it it's still the same of course now we need to copy this for all the cards there there and there we are almost at the end this will be a contact Section let's use the word let's import it there we have it for contact form we don't need to import anything and we will start there with these diffs the first diff will be with flx where we will justify content horizontally on Center then we will use vertical margin to five on a mobile screen we will set height to 100% so it will take the full viewport height and on smaller screen and then on the larger and larger screen we will take only 70 of viewport height and also we will align items vertically on our next div we will set set the mix width of 1200 pixels and we will Center the content that will be in our contact form horizontally then we will use empty div and inside we will put another one and that will be a GD layout and in this grid layout we will start on the mobile screen again it will have only one column and on medium and larger screens we will use two columns actually we don't need that empty diff let's delete it and let's continue first with our contact me card so we will add some padding margin to right we will set some background we will make border radius to almost one ram then we will use display Flex because we want to flex these headings and PEX under themselves and justify around that means we will have even spacing around each element we will start with this heading one there will be again some text size and text Color Me will be in the spantex then we'll have the paragraph there can only text sizes and color no need to have font medium there then I will use there the brake line so it's on another line and then I will have there the icon and diff with the name that will be next to Icon and for the name there we don't need this semiot but this tracking white we will just increase the letter space a bit now let's move to form itself we are using their method post so when we will edit their an action later we will actually post the data and class we will use some pedding Flex so we can do the flex colum that means all these inputs will be below each other then we are horizontally centering these and we are setting Max WD of 700 pixels there for each input again it will be almost the same we are just setting these type and name and IDs will be name email message and then there is the button but we will get to it and we are setting there the placeholders which is of course for the name email and message kind of obvious and the class we are setting there some width margin to top vertical pedding horizontal pedding so we can actually do this then we are setting the Border radius background and the Border itself and that's the same for all the inputs for the button of type submit there is less classes we have there the weight from medium screen set to 32 actually now seeing the UI maybe we can delete it and then again the same things pedding margin to top border radi videos and text color and now let's make this form work let's go to this page ab. getet form. i/ login then we will sign up click on create there put there some name and put there the time zone copy this endpoint put it in this form action put our values for our contact form and submit it will draw us on this page we will click back to this page and the email is there that will be it for the contact form and now we can move to footer and that is our last section let's create the footer. js6 use the word there save go to app write it there click close save we are set and now first first we will import these two icons from react icons fa and on our div we will put their merging to top for 12 we will set some mix width we will set border top and its color and we will put text to Center inside we will put paragraph tag with vertical margin to five and text grade to 500 we'll also put their Brak tag between these values so it's on another line and then the next div we have inline Flex so all these icons are next to each other in a row and text grade to 500 again some gap between them and also we will increase the font size so we will increase the icons and that will be it even for this footer if every section would go like this it will be absolutely great but unfortunately it just takes some time now let's do the final updates in a na bar now we know the sections we need to add anchor text to our list items and then put the thing inside so first first will be home then will be about then will be work then will be experience and then will be contact we have D anorex and it will have hashtag and every time it will have name of that section but we didn't put the IDS to our sections yet so let's do it now in about we put their ID about in contact ID contact in experience ID experience and then of course for the homepage ID home and last one is work ID work now in the naar we go there we will save it we will also use the same thing for the uh for the mobile navigation maybe what will be the fastest way is to copy this put it there then with uh the alt button select it like this and put there back the two I will Mark all the list items and I will hit tap and it will again style it as it was before now I will save it and we can test if it works and yes the navigation seems to work work experience and contact also I see there is the issue with this button so the thing that we will do is to go to our V code at Z index then to this mobile navigation in our Navar file and if we go back then it will be fixed and now the mobile navigation will be on top of it 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 in the comments or give it a thumbs up so I have some feedback and I hope I will see you in the next one thank you cheers

Channel: c0d1n0

Views: 8,172

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: ui4QG1SkGuE

Length: 45min 46sec (2746 seconds)

Published: Thu Feb 15 2024