Next Level ReactJs Portfolio Website (NEW 2023) ✅ | Responsive Portfolio | ReactJs Beginner Project

hi everyone I hope that all of you are doing really great so in today's video what we are going to say is we will be building this awesome portfolio website through this website uh you can showcase your skills about yourselves and all the stuff so let's go through this one how the portfolio will be looking that we are going to build today so if you click on the bow section it's this one like uh it's about your name and all the details we have a resume button we can click on it and we can view our resume and there are skills section so there are different skills like it will be showing like this then we have experience like the experience and work experience that you are having it will be shown here right so this is really awesome so after that we have the project section so in the project there are different project listed and you can also make them uh tab wise like you can change them and we can filter the projects also after that our education section comes where our education schools and colleges are listed and at the last there is a contact Section and there's a photo section so also there is a GitHub profile button you can visit the GitHub also you can see my GitHub right so uh we are going to build this awesome website today and it's a portfolio website so yeah let's get started with this one right so first of all uh I have opened the folder where I am going to create my react app so I will open the terminal and so create to create react app uh you can simply do npx create react app and let's name it portfolio so it will take some time so it's creating so let's wait till it finishes okay so as you can see that it has finished installing all the packages and it has created a template for us that you call to react template so now let's uh open this one right so as you can see let me show you here the portfolio folder has been created for our react app so now what we are going to do is uh we will first go inside the directory and after that we will open our vs code right so like code Dot and it will open the vs code for us right so you can see the all the default things that the react app contains it's present so first of all let's start and let's check whether it's working or not so we will write in game start yeah so this is the default react application right so let's get started with our coding stuff so first of all what we have to do is we have to install ability um dependencies that we are having so I am facing the dependency means I will give the dependency list so one thing that you can do is you can come in the package.json and replace all this dependency with the one that I will be giving you okay so these are all the dependencies that are required right so I will give you all this one so you can paste it and once you have done with this thing so simply type here in the terminal npmi or npm install so if you install all the dependencies that are required and that we have provided so let's wait till it installs okay so as you can see that it has installed all the dependencies that we have provided so uh we can close this terminal and we can still see that it's running right so we have we are going to use uh let me show you okay so we are using uh style components for styling our uh that means for the CSS purpose we are using file components and material UI Ubi reason and motion JS right so let's start with this one so our package.json is done so next thing that we have to do is we have to clear this stuffs that are not required foreign so this means that our app is now uh perfect we can start working with it and all the things and stuff we have set up right so the next thing that comes out here is uh first of all uh in the app.js in the app.css we I will be writing some CSS Styles so let me I will give you the CSS and you can just copy and paste that so first delete this one and uh use this so what I have done here is I have used a font family copies right so uh we are going to use the Poppins font so I have used that one I've imported it and I have made some CSS here and scroll behavior and some body CSS everyone right so I will provide you with this so now you can see the font has changed right two Poppins okay so let's start first of all in indexes it's correct in app.just we will start working so the next thing I have something like we have to create our data right so in the in this one what you can see is there is a bio details like my image the things I have written and this all this stuff so I will be making it dynamic because you can change it anytime because it's a portfolio and every time it changes like according to your experience and the works you do so I don't I won't be making it hard coded I will be making a dynamic so that it will be easier for us to use so first thing that uh let's come here so first thing I will create a folder so I will give the name utils so inside this utils what we will have is we will be having a theme so we will be giving a theme to our project so let's Skip themes.js and now I have the default colors and all the themes so you can just simply copy and paste that so I will be providing this one we have different colors and all the stuffs right so there's a dark thing like thing if you want I have not made that one but if you want different switch also between these things right so which one you like okay so after that the themes folder is done so the next thing what I need is data right so the data that I said that it will be dynamic so in the SRC I will again create a new folder and I will give a name data so inside data what I will do is I will create some data file means I will create some constant values so let's give it constant okay so now in this constant I have all the data that are in my portfolio right so I'm pasting that stuff so now let's uh let's walk through this one so that it will be easier for you to understand right so first uh constant variable that I have is bio and I have exported it okay so the first thing is why I have the name the roles means the skill set and the roles that I perform uh means that I know I have given it here full set developer Android developer programmer right then I have a description where I have given a description about me right so after that so all this stuff that you can see this one this is the title this is the description all this stuff so there right so let's start I have placed the constants and then there are skills and the skills that I have I have separated so once I start this uh working on this part you will understand automatically that how we are using this one so you can just simply uh modify you can upgrade your data to here right so let's close the constant on themes right so we have we are done with this one constant and themes now we will be creating another folder that is components that we will create different components that we are going to use so I will create a folder components okay so the next thing that comes out here is first let's set up our default app.js file so here we have app.js right so first thing uh what we will be doing is I will be doing some CSS so let's first uh import style components I will import style components from style components right so now the next thing uh we will be doing we are going to do is I will create the components so I will write const body equal to so I am creating a container body so inside that uh I will give a background color so the background color will be coming from the themes actually so I will be importing the themes also so don't worry about that so here I will give the theme so body is there so first thing is I have my if you see my themes so for the background I have BG right so I will give it BG so the next thing that I will give is it's with i1 bits with 100 and I want its overflow X to be hidden right so these are the CSS that I have so now let us add this one so first thing that we are going to do is I will add a theme provider uh that is for the custom theme that we are providing right so that is a clean provider and after that I have body and then I will close the body type something provider right so this is the thing and the Dark theme I have to implement so for Dark theme I will be importing it no worries import so here's the theme provided I have to import this also provider right so yeah so we are in we have done this one okay so now I guess uh we are having the theme provider so using this we can Implement our theme that we are having so the next thing that I would be using is we need a uh we can have routers but I don't think we will be needing it so let's start uh if I type here something portfolio let's check so if I see now so yes you can see the portfolio is coming right yeah it has a black background of the body and all the stuffs up there right so let's come to here so now let's do one thing I will give its height also 100 so now yeah okay so done so the next thing that uh we are going to use is uh I will be creating uh different components first of all right so for creating the components let's come here uh yes so first sample that we are going to have is our nav bar so for nav let's start doing with uh creating a folder I will index.js okay so I will create a default react component uh let's name it navbar so network is done after an Empire we will be creating other components as well so let's do that one first so after never we will be having our hero section so let's give it a hero name hero section we will be having a folder here section inside that we will be having the same thing the index.js the index.js folder next component that we are going to have is after hero I think there is a skills section so let's uh skills same thing index.js and we are going to create skills now foreign so first thing that I am going to do is so uh if you can see uh the portfolio we are having a background color for the snap bar and uh the hero section and for the skills we have a different background and I click path right so first make this one so for that thing to do that one what we are going to do is so I will write nav bar right because we have a default background color given lamp part uh so inside after nav bar uh we will do one thing we will take out the nav for outside okay and uh you have network will be outside and then we have the body and inside body what we are going to have is a hero section and after that uh there are I will wrap it and then we are having a skill section so let's do that thing so so first of all skills uh you can see that for skills and experience we have a gradient color here right this one I will be implementing so so for that thing let's do one thing I am creating component separately promised so I will give it name it record and then let's give it a linear background in the background I have given the background it's a linear gradient after that we will give it 100 and the clip path I have to give right so for that I will give clip path sorry so that I will do the clip part and the clip part that we have not this one I have a clip but yeah so this is the wrapper I have so I will wrap this skills so I will give it a wrapper and inside that I will put the skills and let's create another component that is education and let's make index.js okay and education and let's import it here education right so let's start with this thing and after that we will have a different section projects and all this stuff so first let's see what's uh coming here yes so you can see that we are having a linear gradient first of all then we are having navbar then we are having hero and all this stuff right so the next thing that we can start is we can start with hour and a half by first of all so for an F word what we can do is let's start let's close all these things okay so we are having our themes and in the nav bar we have our index file right the first thing what I will do is I will import the uh style components okay so I have imported the style components uh the next thing that we are going to do is first of all we will be returning a yeah we are using nav price so we will be having a nav and we will close it first of all then the next thing that comes out here is we will be having a style component that is nav container so it will be a container where we will be having our nav logo right so yeah we will be having a nav logo then what we can do is we will be having a mobile icon like uh when we will be making it responsive we need a mobile icon so for that I will be using a mobile icon so that will be also a container and after this mobile icon we will be having for items that we are that we have actually so we will be having a nav items okay so I am giving currently only one so let's change it to enabling leveling yes it's done and after that what we are having is a GitHub button I guess so I will be making a button container so I will make a button container and inside that I will have a GitHub button okay so and I will write it GitHub profile okay so now the next thing that comes out here is uh first of all we will be having all the stuffs so let's enclose it and now let's start making the stuff so first of all we have to import uh nav also the nav is already should be there in the DOTA Dom yeah and let's make this container style components right so I will start making them one by one so the first thing that we have is we have an average so first uh let's make an app not from here we will make it a new component okay so I will write cons to nav equals Style okay and inside that I will style it so the first thing I will give a background color I will give the background uh background color I have my themes so I will be implementing the theme okay so I have on my theme I have plot light a little bit of card light background color then I will give it a height of 80 pixels display Flex align item Center just like under Center align item Center font size one point one size uh I will give it one okay and after that position it will be sticky top Z index I'm giving it 10 and I will make it responsive so I will give a media query so in 960 pixel it will have only a transition right okay so done so I'll have uh the main nav is done so the next thing I will make an app container right so first thing you have display flex and the next link will be just regular space between then height uh I will give it a height of 60 pixels then I will be having a z index after that I will be giving a width then padding then I will do the maximum width that it can have so I will give it 1200 pixels of Maximum width so next this thing is done next I will have an app logo so it's uh with I need 80 percent with will be 80 percent and the rest of the things whatever there are uh it will be having a padding of zero pixels and on 6 pixels the next thing that I can give is display Flex then I'll justify it I will be justifying it as per click Start then I will give it across a pointer then I will give a text decoration I will be making it uh yeah I will making it playing so I will do next operation none and uh what else I can give adding this way under here so I will give its align item Center yeah and in media file I will be giving so at maximum width the padding will be uh zero pixel so let's update this one with zero and uh I will be giving it 640 right that one and uh this one will not be a sign layer so I will be making it a link component because if you click on that it will take us to the home page so I will give it a link card so link R is like this one we have to import it link as Link Card okay so now it's gone yeah so we are having an app logo also then we have a mobile icon uh then for the mobile icon uh let's do the side it's the div so its display will be normally none then uh in media screen it will have a display block position is really absolute it will be having a top zero right zero transformation it will come font size cursor pointer and the color we are having right so with sun it will be text primary okay so the next thing after this mobile I have done is nav items so in the nav items what we can have is so let's make the nav item Style you can have items so nav items is a link because if you click on that it should take us to the sections separately so I will give a width uh 100 first of all then after that having the width what I will be giving display Flex just by content space align item center cap I will use a cap of list available on text line I don't need I need a media query I will be hiding it on small screen view and we are closing it now let's change something uh Gap I'll just give it 32 pixels uh justify content uh let us give it Center okay I guess that's pretty much good for this one after that what we have is nav links right so this nav link is uh not the one we are going to import because we are not having our router so we won't be implementing this we will be making our custom labeling CSS file and it will be a simple anchor tag so remove this link I will make it a uh dot a yes that's what so the next thing that I will be having is text primary then I will give a font weight Bond weight 500 it's called cursor pointer I will close your pointer next decoration none uh transition is given and in Hoover its color should be text inverse the color should be primary the next thing that comes out here is uh active I don't need active actually so yeah it's pretty much done font size I guess it's not required okay so the next thing that comes out after the naval in case uh the button container so the button container of course let's have a okay so we are having a redirect button container we have to make else we can't see that so button container we will be making a display Flex then with alignment and Center this way content Center then with let's give it 80 percent of L so the next thing is uh with 80 version height it will take the full height 500 then we have a media query and uh it's within its display will be none in GitHub button Library won't show it okay so 800 percent this one this one done let's give a paddy okay and uh I want to justify content to be at the end block Center yeah it's pretty much done I guess now the only thing is left is GitHub button so I will make another Psy component let's give it a um so background color I don't want I need a border radius border border let's give it one pixel solid primary let's give it 1.8 pixel logo primary after that what we're having is border radius 20 pixels would be good uh then what we can give its justify content Center align item Center Height it's padding let's give it 20 pixel spading sorry yeah it's fighting is 20 pixel this one would be zero or other things it's one size font size and the font weight cursor pointer and and I have given display of Telex I don't think this reflex and let's give it a height seventy percent yeah that's pretty much good and uh I am giving a hover option also that we will be having so if we do a hover uh Android's color a little bit X slide and it's let's give it a um yeah that's font size should be decreased okay so now let's have a look uh how it's coming actually in front of us so it's having error I guess okay so let's see the error so in console we can see base name okay so we are having a type error so let's see what Sarah is I guess I have to implement here router and inside the router let's have all the stuffs let's import it yes sir okay so we are having some error in the router part so what's the router let's see where there is coming from we are having router Router as a browse router okay so let's import it in different way there's a browse router we must have a router as browser together now it's coming good so we are having a logo home and GitHub profile button so add one more thing in this one so in the button what we can do is its background we don't want anything background color we will be having its transparent yeah that's look good and we have to add color also so let's add color yeah the GitHub button is looking good on Hover we need to add a color so on Hoover what color we can give here is primary and then we can give it White I have the white collages yeah it's not good okay so you can hover this snap links also so logo and all this stuff right so the next thing that we are going to do is first of all let's add uh other nav links right so we can see them so I have all the nav link items that we are having so I'm simply pasting them so we have a h Ram because it's anchor tag we are having href and I have given all the IDS and then we have all these things so now you can see about skills experience projects education and if you click on this it will be uh taking us to that section okay so the next thing after that this comes here is uh the logo section so for the logo section what we have to do is uh we are having a logo so in the nav logo it's enabling so I will give it this one we can have anchor tag I have given some inline CSS to this anchor tag and there is a icon Okay so this icon is coming from uh react icons actually so I am pasting it so you can import it so we can import the icon that is this one this one has this resistance so now if you see there is a span tag I have to add some span also so let's add the uh span one so let's open the code then we are having a span so let's add a span here first of all what we have is a simple span and I'm copy pasting it to the CSS is simple it's a normal padding font weight and font size now we can see we can check that our icon has also came okay then there are different nav links and there is a icon button okay now these things are not functional right now so let's make it functional uh and if you inspect it so you can see that these things are coming in a different manner so we will be also implementing that one the icon menu icon so let's do it so first of all what we can do here is we will be creating a uh we will be getting used it for open and close okay so by default it's false and uh well the next thing that we require here is in the mobile icon what we have nothing so let's Implement a icon that's known as uh f a bar and uh that is coming from again from uh react icons so let's import that one yeah fa bars and now what we are doing is set open so we are doing this one open zero right and on clicking on this one we will be opening and not opening that stuff and now we will be creating a separate section on which on our Mobile screen it will be shown so I will write here the condition that whether it's open then we will show that one okay so what we are going to show here is I will make a component mobile menu okay so first of all let's make the style for that one mobile menu it will be styled here [Music] and after the thing what we are going to have here is in normal case we are having I am giving a condition whether it's open or not okay so I'm passing the variable here okay through the props and uh for mobile menu let's see what's the style we will be providing so let's start surfacing is its display it will Flex next thing is flex direction will be column justify content Center then I will give the gap of 16 pixels then I think position it will be absolute top 850 left not left and it is right zero then a weight of 100 percent then I need a padding why we need to give a custom padding as I have made it before so I am giving it like that what I have done 14 pixels 40 pixel 24 pixels and again 40 pixels after that we are having a background uh that's card light I am adding some more lightness to that one then we have a transition then we can add a transform okay so it will on when it's open it will make a transformation and it will look like animation okay so for that we are adding a transformation then I will give a border radius border radius I have given border radius and after that stop I will give a box shadow box Shadow then we are having the opacity right the opacity when it's open it will be 100 or else it won't come and uh I will give a z index when it's open it will come in front or else not so mobile menu I have given okay so inside the mobile menu now we will be having menu items so let's first create the style component for that uh const mobile menu links means items that we are having so again it will be a anchor tag or we can give it also like this the Link Card okay and after that what we are having here is we are giving a color we are giving a font weight we are giving cursor pointer next decoration we don't need and uh what else transition and in Hover what we are giving here is a color of next primary as we have and yeah that's pretty much good I guess so now what I will be doing is I will be simply pasting the menu items that I have okay so here the theme is coming so first of all let's do one thing uh this I will make it open set open and is open I don't have I will make it open then then we will be having our theme fonts name equals to use name yes so that error has also gone mobile link mobile link uh mobile link oh my CSS that I have is mobile link right so for mobile link um [Music] mobile what I have mobile menu links right Mobile Windows and the next uh there is I have a GitHub button also so let's give it a GitHub button button okay so forget a button what I can do is um I already have I guess the gator button so I will be using that only so I have this GitHub button I will be using that only yeah and it's one so you can see uh now if I minimize and close so now here is a icon and if you click on it it is coming right so for that I that reason I made it okay so this is done the next thing that we are gonna going to build here is nav link is done so next is the hero section so for the hero section what we are going to do here is let's start so now for it's done next is zero section I've opened the index file so let's first import the style component I have imported the style component so now let's start with the hero section so first of all in the hero section what we are going to need is uh we will be making a container so first Let's Make a Deal uh and inside this tip I will first of all give it ID because uh we are having the ID of it about because whenever we click on the nav link we should open this section so after having this we will be having a fun trainer I will name it hero container yo container so inside the zero container we will be having our hero background so now if we see our uh portfolio that we have is we will be having a hero background that is this one the things that are moving I have a background of this one so first I will be making this so I will be giving a hero BG yeah hero BG and inside the hero busy there will be the stuff I am not writing it and then the hero container will come hero inner container hero inner container and in the hero inner container there will be if you see there will be two sections uh this one is the left section this one is the right section right so let's make the two section first of all so I will be having hero left and right so now in the hero container we will be having two sections the left and right so let's make a hero left container inside that we will be having our stuffs and hero right container and inside this we will be having our right section right so first of all let's make the style components or else we can't see it so first that is zero container so for the hero container I will be giving a background of card light then we will be having a height uh I won't give it a height first of all let's make it display Flex Square Flex justify content Center line item Center icon to give then I will give a position relative height I want to give then I need a paddle adding eight padding I will give me 80 30. that would make a good fit then what I have here is why we make it responsive so let's make it preparing so for this media screen I need 960. the media SP 960 pixel what I will be giving here is a padding of 66 pixels and with 16 pixels and of course 640 was 640 pixel I will give it a padding of 32 by 16 pixel 22 pixel by 16 pixel and it's Z index would be one and I have a clip path so if you come into the design you will see there is this design right so it is because of a clip path so I am copying the clip path I already have it so I will provide you or you can see it from here also it's a clip path right it's a polygon so it's done the next thing that I have is hero BG its Position will be absolute display Flex justify content it will be at the end because it's at the background of the image so its display will be end and I will give it a top zero write zero then I will give it's a bottom 0 also and uh top right bottom and left zero and overflow will be hidden and other things that we can give here is with an height with hundred percent five hundred percent then we can give you a padding uh zero pixel by 30 pixel what we call and I will do one thing top let's give it 50 percent and uh top 50 and left I will do the 50 percent yes and then I will give a transformation because you can copy right and we are having a and let's give us the make it responsive so 960 pixel it's uh padding would be zero pixel by zero pixel and justify content will be Center okay so I think now the hero which is done so the next container that we are having is inner container such display will be obviously Flex then just to buy content space between alignment and center with with I will get with 100 then let's give it a Max width of yeah if this one one zero zero and uh Z index I don't need I need the media query and I will change the flex direction to color yeah and that's pretty much good for the hero inner container so now let's make the left and right containers so first of all I will give it to width 100 then order uh I will give it one because we have to change the image to the top when it's uh in the smaller screen so in order I will change in media query then 640 also order will be true and other things that I will be adding here is margin bottom 32 pixel and uh display will be flex and justify content align item Center align item Center and make it to flex Direction column right and here also the same things margin bottom let's give it a 32 pixel display flex line atom Center Line selection column that's pretty much good for the left hand trainer then we will go for the right container same thing with 100 in order to Media Square 9 order will be one and after that but we will have it displayed like a line item Center selection column itself for 640 pixel we will be having order one this is Direction column yeah it's got pretty much okay so one more thing uh in here I will give it a display clicks display clicks and it's uh justify content will be end and I need a gap also 12 pixels okay so the next thing that we can do is it's margin bottom here I don't need this I need a margin bottom margin bottom I need 80 pixels and uh I need to justify content Center here Center and uh align items and here only I need margin bottom I will give it a margin bottom of 30 pixels okay so this is done right so if we see now our react application we are having the clip path as you can see I don't know whether it's visible or not but we are having a clip path and that thing so now let's uh add the stuffs so inside the hero left container what we are going to have here is uh the text right so first of all is the writer so title the name title of the component and then we have then I will write here simple text I I am then we will give the BR tag and I will take it from our bio so let's take it from a bio we have it might have to import it I guess so let's import the bio first of all so I will import bio it's in the data and constants done so bio.name and I don't think I have anything then we are having after the title what we are having here is a I will be creating a loop text Loop right so if you see there there is a text Loop that is always running so let's make it so and limit text low inside the text loop I will write I am a and after that I will give a span make a components fan and there I need typewriter type writer uh so let's import the typewriter so if you can see here I will go to the typewriter and there are different options for the typewriter I am giving it so in the typewriter what we are having is the strings that will be coming out from buy order rules if you see the data here so in my bio there are different roles that I have so I am implementing the idea of that one here so typewriter is done the next thing that comes here is now for the loop uh that's the subtitle or you can see the description so I'm giving a name of subtitle so here it will be coming from bio dot description and there will be resume button right I guess so I will resume button container pressing a button yes so uh it's href is by dot resume means its link will be coming from this one right so we have given that so now let's make these things first of all uh here was error I guess okay okay we will give you a button resume okay so this is done let's create the styles for them so the first thing that we have here is cons title so the title would be a simple deal sorry it would be simple there then it's font size uh 50 pixels font size 50 pixels then we will have a pond weight 700 then we will have a color then we will have a line height line height let's give it 68 pixels then we will be having what else nothing else I can make it responsive for 960 pixel I will make it extra line to be Center font size let it be like that and media has been 640 it's one size should be 40 pixels it would be good then line 848 pixels and margin bottom let's give it 8 pixels okay so now here one thing that we will be adding here is 960 uh this one line 968 pixels 50 pixels it will be text primary anyway yeah so the next thing after the title that comes out here is a text loop I guess const text flow font size uh text Loop lets its font size be a little bit small 32 pixels then Pawn to it let it be 600 pixels then color then line height it will be related with 68 pixels same as the previous I need a gap display Flex okay and uh and the media quad means for making it responsive for 960 pixel X line will be Center and for 640 pixels it's one size will be 24 line i32 and margin bottom will be 48 and this will be 16. and this one is going to go 32 668 12x and this will be text primary itself then after that the thing that we're having here is writing span so for the span we don't have such thing we will make it primary okay and uh we will be giving it a cursor pointer so let's uh the next thing that is subtitle so in the subtitle let's give a font size 20 pixel font uh wait I have given 400 x color should be no I am giving line a 32 pixel money modem 32 pixel and I don't need anything then media query text align Center and Max with 460 I will do the font size of 16 pixel line height and I guess nothing more so let's fix this this will be 42 pixel margin bottom and sorry to 200 I don't need the phone because it's 400 by default okay this one will be text primary and I will make a little fade so I will give it 95 plus 95 the brightness opacity conduction Center 16 pixel and it's line 9 let it be 32 pixels yeah that seems pretty good and what we are left is raising the button so for resume button uh it's a a obviously anchor tank so I will give a so for the resume button it's uh pretty much big the CSS to save your time I am simply uh making it and you can copy it from here so you can see that it's the original button so I have make it a button appearance and all the things are like button type and this thing so you can see the code and you can make it it's time saving so if you see now if you reload the page so here you can see we don't have the image but the rest of the things are just exact same like this right it's exactly same I am issues and all the steps are coming if you click on this button also it's functional so to make it functional uh the button is not a functional so to make it functional a resume button instead of Bio dot resume and Target is blank so make it anything and now if you click on uh okay so let me see this button is not working yet but I will make it working so the next thing that comes out here is the image that we have right so for that uh let's do one thing let's create a separate folder so in the SRC I will create a separate folder image images and inside the image wow I will copy my hero image so here is my image that I had in my portfolio so after doing that I have to import it so let's import it here I will go to the hero image and in the right container I will simply I will simply keep the image image SRC hero and all that I'm living here so I have to make the hero image component so to make the image component what are the required things so image I will give it a bit hundred percent then its Position will be relative border radius 50 percent 50 then I need maximum height maximum height or objective cover Center then media query Max height side so now I have the media quality will be a little bit changed and so now it's gone and uh we will have a height of 100 and uh Max width I have given I guess Max height Max width yeah now it's good and we will have a border we will give a single border radius of two pixels so if you know from here we can see that our images here but the animation that we had here is not present right so let us give the animation so for the animation I have a separate file so you can uh I will be giving the file okay so here's the file I will be giving you the file just uh come in the SRC and the components just paste it here okay here PG animation so we have this animation so and here you can see the hero which animation right so for hero busy animation so inside this hero BG what we will be doing is we will be simply importing the component that I have given there by the hero VG animation is present so let's import that one import Hero by the animation from the video animation and now there is error I guess so it will be like this okay so if I reload you can see uh this thing is coming right so we have to make it a little bit uh we can make it a little bit uh changes in our code so that it will be in the center so for hero BG I am giving it a width of 90 let's see okay yeah it's now it's good I guess sorry for the disturbance yeah so let's give it a 85. a little bit 82 now I guess it would work 82 so it's looking exactly the same we are having this cut also so if you see the portfolio that I have it has the same thing okay it's not looking good okay so the next thing that we are going to do here is uh this is done right so our hero section is done we have made all the stuffs and in our next video what we are going to do is we will be making the rest of the sections so it's pretty much long video for this one so uh wait for the next video Until then have a great day learn from this video and I will see you in the next video bye

Channel: Rishav Chanda

Views: 131,226

Keywords: awesome github profile readme, github readme profile, react tutorial, react js, react, reactjs setup tutorial, reactjs setup windows, vscode react setup, react js projects tutorial, react js portfolio web app, next js portfolio website, react js 3d portfolio, three js portfolio, responsive portfolio, react native portfolio, how to make react js portfolio website, next level portfolio, html css js portfolio tutorial, react portfolio, react portfolio website tutorial

Id: ICs29OcEcwQ

Length: 50min 38sec (3038 seconds)

Published: Sun Jul 30 2023