Dynamic Portfolio Website : Website Built with ReactJS || Part One

hello everyone in our today's video we're gonna create a portfolio now here in this portfolio in the never you can see the particular tab is here whenever you click any of the tab it will take you to that particular section and we are maintaining it by using react scroll now we are having our Banner our name and little bit typing going on then our description and then how people can find us our best skill on whatever we have and then one image then we have the features here we are showing what kind of work we can do and also you can see hover effect is happening over here too in the project section we are showing our recent project and also yeah we can highlight that project and then we can connect that project to our GitHub repo or in our website and after that in the resume section we have our educational qualification and also we can show the professional skill and that animation is happening with our framework motion and then experience achievements everything you can show as well and also you can see hover effect here to highlight that portion and now in our testimonial section you can see school is happening like uh testimonial slider is moving and you can see the testimonial as well and also you can see that the scroll is happening and now in the contact field we have a contact field and whenever you click to send message the validation is going on like if I put my name and I click it need to validate again every single field is need to be validated and after you putting everything properly only then it will send the message when you send it's coming with a success message also and then we have our footer and the footer also you can see the animation uh like effect hover effect is happening and that's all so let us create all of that project from the beginning and one more thing whenever you go in a particular section you can see the active tab is showing we go to feature section feature is showing you go to resume the resume is being highlighted so to create that project I already created an empty project here you can see and it's running over here in localhost 3000 and to create any react application what you just need to do a simple thing you can just simply open that folder in uh in your code or in your terminal and then you just type that simple npx create react app and then the app name app or website name whatever you choose you can give that and the app will start spinning so we have our project but this project I want to make little bit cleanup because I'm going to use totally in CSS as well so whatever things may not require I'll delete from here and also in the app.js my portfolio and those things is a notary curve right now now our app is clean so now it's time to take the talvin CSS let install that one and also here you can see I already add all of my images in my asset folder whatever images I'm gonna use over all of the images never in the projects those all images I keep it here and as I always like one more thing to create and new file and that call it as index.js and inside that file uh just let us check if the wind is working I think it's already installed and after installing that one we need also to put past that command which will create and uh tell win config file in our project that's the file and let's copy and paste that one within that we are giving talwin the access to go in our source file you can see those all things now app index uh here is everything is in the source file so it will go in the source file and whatever the file name we are creating I think there's only yeah we are in the wrong place because once you go uh yeah we need to go to the firmware guide because it's a different framework and different thing can work so you can see in the source folder just let us put that one here yeah so it will go to the source folder and inside the source folder it will uh look up in every directory and then jsjsx or TX TSX it will look up that file and it will particularly use redirecting the Talon CSS on that particular file so it's as simple as it is and then we need to do one more thing is that go to the index.css and just paste that one and it's time to test is our talvin CSS is working or not we go to app.js and paste it so whenever you finish that you will spin it it will and it may not be work because we use the talwin config file so we need to restart our browser start so let it be start now here in the assets what we are doing we created one indexed index.js I think I'll look it here only and in that index.js what I'm gonna do I'm gonna import all of the photos I have in the image I have logo Banner image everything I I'm gonna import from there and then just simply what I will do from that particular file I will just export from here all the file I I have been taking images I'm gonna export from it here now I can easily access the file only from here I don't need to go any of the directory to look for the file or the images because I already declare from it from here so it's very easy and convenient so yeah our project is running our Tailwind is okay so also I'm gonna do a little bit more thing because I will also Define uh the particular CSS uh particular CSS properties like we have some font family and others that phone family we're gonna give a two fun family one will be body fan font one will be title font so in here in the extent I will just pop it up now in the body font we will have the Poppins or sensorif and the title font it will be monster red and sensory now it's a very easy you just go to Google and search for those phones and then you can just connect it here and then redirect it here also I will use two different properties one is for the colors I have the body color light text color and also the Box BG color and then the design color we have one and the Box Shadow we are also declaring here those all are the things also I'm gonna use it here so you just go through it because this you can customize is as the way you want so I did in that way you can do whatever way you want so let's close it and now let's begin to create our project so to create the project let's see what we are we are inside the project let's go to our source directory and inside the source directory I'll create a similar folders and let's create components and then and tsconstr constants so let's create this two now I have the components I have the constants so in the constant file a folder I will also create another index.js and in here what I'm gonna do I'm gonna just create just see here what I used in here we have some text here right we have the never list item so in the constant file I will just make export const ATA and I will pass an array inside that array I will pass the object so what is we are passing we are giving an ID and then we're giving the title and also we are giving the link wherever it will go so like that way we are giving the six item sixth title and six link so our constant is ready we're closing the asset so first thing first we need to create our never so let's go to components now I'm gonna go to a folder structure okay for every single component I will create a folder and why I'm creating you're gonna find it right once you're diving through it so in the Never component name should be uh in capital letter now the folder name I'm just I prefer to be keep it in a it's a small letter you just keep as way as the way as you want so let's rafce functional component we created our never and that never we will connect to our app let's go to our application this is yeah we got our number now you can see there is a single color is happening which we declared as a body color so what we will do we will go to our app got that one and give away the full height will be Auto and BG will be body color so if you change that you can see so body color and text will be by default it will be light text for every single text and then we will put the customization so by default it will be that one so now in our never here you can see that nav is not in full deep right it's have some Max weed is happening over here so instead like if you look all over the page that Max is happening everywhere right so we can particularly do the things to every single pages okay so now what we'll do in that app we take one particular div which will take the full weight and then we're gonna declare another dip and let's give screen Excel MX Auto now you can see this here happening that uh what about 2XL no I think Excel is fine um I think if we do that one I'll give that one to on the point so we have that width now let's go create our Network so what we have in the network we have two site one is left one is right in the in the left we have the images let's get our images from the index file and we keep a name as a logo and it will be from index so now you see our neighbor is here now in the never what you are going to have the image and that our particular text so inside the nav bar there will be two div and first div will contain our image okay so that is our image the logo see our logo is here so now for this one you will give this a bunch of property names so it will be class name with I'll give the full width and height I think for the height I will give it a 20. just to make it sure yeah height of 20 it's now okay so this is our first tip and we keep the justify between an item Center because there will be another dip which will be a Justified between and the items need to be keep in the center so as you remember in the constant file we created our nablings data we need to import that nablings data in our file so now import nav link data and now here what we're gonna do we're gonna create an URL and then we also create the you are not not the evil eye first because that nav links data as you might may see is create is also a happening with an array so we can map through that array and give the every single area as a list item right so what you're gonna do uh nav links data I think I type something wrong nav link we are returning the item so you cannot keep the curly braces so now here nav link Dot title so this that title will fetch the name from there so you can see all of the things is happening here so in that particular Uli that uh particular unordered list we will give and give some class name and you can see is capturing the padding and gapping everything is so smoothly so now one more thing just inspect and go to the console you can see we are getting an error that each child in the list should have a unique key prop and we also give unique keep up should better to give the particular ID if you see we give an ID so now in that Ally if we give the key as a enabling dot ID and now you refresh that it's gone so without typing every time the nav link what we can do see whatever the things we have we have here ID title and Link so we can de-structurized our nav link data right so here we're gonna destructurize that one and instead of typing that every time the nav link we can directly type the item and also if you see it's working much better okay so now there is you can see little bit uh Hoover effect is happening so we need to create that Hoover effect also and to create that Hoover effect what are you gonna do in the LI we will give some particular class name and that class name will contain the text based and normal font will be there and then the gray tracking white cursor pointer and whenever you are going to Uber it will give the text design color and the duration will be 300 milliseconds so see it's working it's smooth and Ice uh almost the same as it is right I think the font also need to be a little bit different see that font and that phone is particularly different so what we gonna do in the never in all all over the network we're gonna give font title font so now it's change so our neighbor is done it's very easy so before we go much further we will create all of that components beforehand so then we're gonna start our school uh smooth scrolling okay so first let's go back here in our application and in the components we're gonna create another folder which will be contain the banner and in that Banner we'll create banner.js or fce we created the banner and another folder an after Banner what we have after Banner we have the features so let's create another folder called features and inside that one features.js features so as long I now keep it 2 because I will show you something very tricky that could really work out in a way so let's go to our Banner we are going to not take as a dip we're gonna take as a section and we're gonna give it a bunch of class name here now here what we're gonna do we're gonna give a height of 800 pixel for just for temporarily okay just see what's gonna happen and we need to import our Banner in our application also let's keep the banner and you see the banner is here so if you just remove some of the club some of the class because we keep the item Center so it's going in the center just remove that one you can see the banner okay so the same way we will keep as a section and we'll also go to our features in our features if we keep it and go to our app.js and also import the features now we have the banner we have the features right so we need to whenever we click it will go to the particular section okay so let's create that clickable items variation okay then we're gonna go to create all over the items first we'll create that clicking functionality to create that what you need to do we need to install react scroll in our application just install that one and after installing let's go to the never we need to import that link from the react scroll and that link see the title so what's that link gonna work we're gonna just link paste the title and then we're gonna pass some properties over here and that property is gonna contain the active class name and where that link gonna go because see we particularly mention where it will go and it will be smooth and then the offset will be minus 70 and the duration will be 500. so if we go to our application click the feature I think still is my not my work oh yeah now still is not working I think something we missed foreign from react scroll oh yeah we missed one thing because whenever we are using this scroll we need to give a particular ID to every single page like in the banner we give a section we need to give an ID for that and that ID will be the same name we keep it here in the constant see we keep the like it's not the banner I think the banner name will be home because we are keeping the first one as you see the ID first one as home so that Banner particularly if you go back to Banner we need to keep as home ID should be home and in the feature also we will give the ID and that one will be you either you can type or you can just copy that link whatever you give from here for from there just paste it now previously showing the target element not found now if I click home see it's moved a little bit if we click in the feature is taking here so that animation is happening okay animation is happening so now let's create our Banner okay these things will not find right right now in a takeaway because we are not creating that one right now so it's time to create our Banner first okay create the banner in the banner section now what all are the things we have in the banner if we may see we have a banner left and banner light all right in the left we have our little bit title and everything and then in the banner write only one single properties that gonna be image so first create the Banner left so inside that Banner we're gonna create two div that will be the first tip and that another will be the second day so inside the first tip okay inside the first step we need to create another dip which will contain that portion and the second tip will contain that portion so first create that div and that dip will contain that text which uh just give H4 and hello in my world so for that particular element will give the text large font will be the normal if you can see uh I think I think we are amassing that in some other places so let's go from here it will not be here I think we are in the features yeah we need to go to our banner yes now here so if we see that things is happening right now so for that particular Banner element I'm gonna give some a bunch of class name that one I will just just I will modify that one a bit so see this uh and also we need to remove that text it's not required anymore so welcome to my world and after that what we have we have a little bit H1 tag and then uh some other things also happening so let's first create one H1 tag and where first it will be just a single thing which will contain I am hi I am and then we need to create another particular span inside that H1 element and that is span gonna be responsible to create something unique okay so if we go to our here now we need to I'm gonna just uh give a bunch of class name for that H1 tag the text will be 6xl font will be bold and the text will be white okay now see and also for that particular tab inside of it what I'm gonna do I'm gonna give all of that particular field uh like not by here because everything I'm Gonna Keep as a title font font because you know by default it's always be the body font so the title font now I think here I didn't fix that one there need to be a gap so it's very simple to give that Gap you can just uh put in empty braces and it the Gap will be there see the gap the gaps happening so after that Gap in here there will be another h2 tag okay so first after that let's place an H2 tag and inside that h2 tag there will be a okay because that a we need to show and then all other things we're gonna keep in any span okay so that a is here so now we'll create a span and inside that span just put lorem to lorem and that is pen for right now what are you gonna do that h2 tag we're gonna give a bunch of class name and see hi I am John Doe and Lauren so this things is working now we need to create that one okay what you need to create we need to create the react uh like a typewriter we'll create that typewriter before creating that typewriter let's go to the upper div because it's a as you may say it's a little bit all mixed up together just here is everything is here right so let's go to class name give it a flex you see that everything is messed up so give Flex call and GAP three little bit uh I think it's uh I think it will work and also this div contain the full weight because there's a two particular dip and that deep what you're gonna do class name weight will be one by two the half weight will be that deep and another one the one will contain in the bottom also keep the half of the tip so now after that Dave before creating that uh creating that uh typewriter also we have that much text over here so let's go down of that H2 and I paste uh that text and you can see the text is here so I think Gap if we put the Gap little bit more let's give a five yeah this looks perfect so now before I move further to that uh yeah before move that down let's create that typewriter so what we're gonna do let's go to search uh it will uh it will be react simple typewriter let's uninstall that one and after installing what you need to do typewriter we need to get the typewriter and then use tip typewriter the cursor so you can go through each each every one of the properties to understand it better but I'm if I going to explain everything from the Gap it will takes much more time also in for the Talon says the class name everything I'm gonna go a little bit quick so you can go to go to the documentation and read as much as you require okay so first of all I'm gonna import as a bunch of thing in that file first what I need to import is that use typewriter cursor from react simple typewriter I think is already installed here react a simple typewriter as you can see it's a version 5. let's create the delete whatever is not required so after importing that what I'm gonna do I'm gonna do some simple thing okay first I need to declare the text okay because I told you to go to documentation here you can have a explanation about it how to create the text item and how to deploy the text item the hook properties everything it will show see the text helper you can see it here so for right now just to make it a much more quicker what I'm gonna do I'm just taking a text and I'm using the used typewriter and in the word I'm giving the professional coder fully stack developer UI designer and the loop it will be true it will always looping around and the type speed will be 20 milliseconds the latest speed will be 10 millisecond and the delay speed because uh if you go here you can see after uh passing the air it's waiting two seconds to delete the 2000 millisecond is waiting then installating that item so I'm gonna also passing those properties here and then what I need to do that text which I declared here you see I think on my yeah in that span I'm gonna just pass that text so after passing the text if I go to my file see a professional coder all the props all the valid validated items will come here and now here you can see one cursor also here and that cursor also coming up from one of the properties from that so after that span inside that H2 I'm gonna declare that properties now you can see the cursor is moving okay so now uh finish I think that part is uh much done and you can see uh there is little bit one uh I think it's a border because that Boulder is uh giving us the idea that how much is uh going that one so let's go to our never and give a border so I will give a border B which will be one pixel height and Border B will be Gray 600. if we go see a little bit border is happening and after giving the boulder it's little bit squash so instead of giving it 20 I think it's better if we give a height of 24 yeah it's now much better so we can differentiate whatever we are having here so now that is one div okay there is another deep down here and I think the padding uh if we go to our Banner like if we give a padding in y-axis 20 I think we'll give it uh oh no sorry I I mean again I'm in the wrong place so pass from the Never padding bottom and instead of giving padding bottom I'll give the padding in a y axis I think it's uh batting top 10. b y yeah now it's working much fine I think yeah it's working much better so now we need to create that to div another two dip it's usually find me and the icons for the icons we are going to use the react icons and it's a very simple to use just install that react icons to your project and it's ready to use don't need to worry about any CSS now that is the dip containing our all the properties so inside that div I'm gonna create another deep and on that deep uh let's just create H1 and let's see what is find me in now it should be little bit Gap over here from this axis uh p y axis so now this one is one deep and that one is one deep and both together is particularly staying on this tip so this one if we give the flex I think yeah it's going a next question and give the flex call yeah and now the Gap will be 10. so see it's almost the same Gap as the other one and instead of giving the gap of 10 I think we give a gap of 20 to see each and much better down here it's a gap of 20. now we need to use a bunch of icons so instead of going one by one I'm gonna just drag all the icons and keep it here okay and for the icon there is one simple thing just to realize you see this icon is coming in a very unique way it's making the flex so we need to keep all the icons inside the D okay so let's go to Banner and Define mean in here we're creating uh we are creating a div inside of it and inside the Deep we are keeping all the icons at the span now here you see there is I give a property the class name as a banner icon if I save it here you can see it's here uh I think it should be here yeah but there is uh nothing is happening because why for that icon the class name which I put the banner icon it's not created now that also want things to learn how we can create a customization customize a customized class name in talwin for creating that one I'm going to my index.css and inside that index.css in the layer and it will be inside all of the components I'm gonna create one Banner icon class and that class I'm gonna apply a bunch of properties okay so let's apply again I'm saying I predefined that class names beforehand because if you do it manually it must take a lot of time so you may go through all of it and you if you want to change anything you can change in particular way okay so now see I'm giving a width here like you can see with height and RBG and BG opacity I'm keeping in that way and I put the text Gray of 200 text excel in line Flex this is the sponge of CSS properties if you're just going through it you will understand it better so find me in is okay so after the find me in Now You See there is a two dip one is find me in one is the best skill on because of the 2D this both of that we need to create uh keep inside one div and then we need to declare our another dip so after that dip what we're gonna do now we did I think if that stop it here let's click one dip here and paste it so as you may see we have that one and by by do and it's also because it's happening from there because uh you can see that deep I think I keep it as a yeah okay let's uh give a class name BG red 400 you can see that is our dip so both of these if we keep it Flex it will give in the same side I'll just keep justify between so now see that's almost same as it is so we got our first part and now and we need to make our second part so this first part contains all of those things okay so this is the one dip which contain everything and then this is the another dip so why I create that folder structure what we can do we can make it like left Banner dot jsrfce so inside that left Banner we can drag all of that copy and then simply paste and of course we need to take all of things with with us otherwise it will start crying and also we need to give that one there now instead of that one let's just uh comment it and you see is still working same as the same thing is happening so we no need this one okay so now inside the banner we have our left Banner we can easily see now if you want to change anything in the left Banner go to Left banner and change everything whatever you like it's very simple so now we need to create our right part okay so for the right part we have one Banner image and that image actually we give a name of that image also those things is not triggered here yeah and also this one not rigor here any changes no changes for that Banner image let's go to bring back our Banner IMG I think yeah Banner image from assets index and inside here we need to take one image stack and then we're gonna just paste the banner image you can see the banner images here we got the banner image but what we're gonna do for the banner image we will give little bit a bunch of class name because it's taking a much more uh speech space so we'll give a widow 500 pixel and the height of 680 and the Z index of 10. so now see the banner image is here now Y is together so that we will adjust sort it out for the banner image also because that this thing is right because the banner image is freak out why is freak out I will just show you if we make the VG rate of that component you can see that components is capturing this area but image is only one side so what we will do will make it Flex and we will just justify all the items Center and the items will be not start should be in Center save it now the image in the center and the background is not Rico anymore now I think there is little bits uh Shadow is over here this is a background here for that we need to create one div here and that particular div will be absolute so we need to make that deep as relative so for that deep let's paste that dip we give a dip which will be weight of 500 and height 500 we give you a little bunch of a great uh background with a gradient color and the shadow will be the shadow one the shadow one remember we uh already declare from here the shadow one that shadow will be there and then the flex justify Center and all the items will be centered if we go there we see that is here right now so if you come here that's almost the same not almost the same is the same okay so in that way we finish our Banner pretty much smoothly so now you can see their Gap is little bit uh less but here is more and it's happening because if we give the padding and top exist uh I think it will be 10 and padding bottom in 20 you can see the height is compromising okay so now our Banner is done we need to create our feature now here just just see one thing that items is very less okay you can keep it here or in the banner we can create another one uh like write banner.js and inside the right Banner you can just simply cut all of those things because we know what is gonna happen and also we need to take that images save it and here will just import the right Banner clean a bit and if you may see that's the same so this is structuralizing it's creating in a very smooth way so if we go to feature is taking the feature oh our header like our network is not sticky so we need to make it stick because whenever you scroll is going but here is not going so we need to make it in a sticky position let's go to our Network again and here you will give the properties sticky and top will be zero save you can see but it's going with the top of the things which will be maintained by Z index give effective index I think it will yeah Z index is working but we need to give a background so PG body color now you pull up see it's very Sleek go to feature go to home there it will not take it because we didn't create those components yet so we have our home which contain that part and we have our features now you may see where is because whenever we click a little bit active class is happening because we give a active class right so now Telvin CSS is a very convenient on that sector you can also declare your Global CSS down here wherever you want we take active plus so that active class will be white see the feature is white we go to home home is white and when you will create the other component it will also capture so after that Banner it's time to create our feature close the banner and never here is the feature now in the feature items what we have okay but before going to feature I want to also show one more thing that features and what I do that is capturing all the properties like visit my portfolio my projects so this title it's happening everywhere right so what if we do to give a title over here instead of like we can write those items uh simply okay so just uh give me a sec like here if we put one H3 element and it will be what will be the our first one features right features and then will be H1 Tech what I do so I think our features inside the feature yeah the the text is appearing so for H3 we're gonna give bunch of properties and also for the H1 we're gonna give some properties now you can see that is sticking together so this two things what are you gonna do we're gonna take inside one dip because see it's squashing all together so that tip we will just uh in that div we gonna do Flex and whenever we click Flex it's the same because we need to keep it as if Flex in column now see it's turning in very good way and then we'll get a gap of four and also for the font we will give the title font for it okay so what I do is already the feature item and also that one I think we will give a padding in one y axis is 20 yeah in that way it's gonna be right okay now that features what I say the title title is almost same in everywhere so we will do one more thing is that in the component create another folder we will create a folder called name layouts so whatever the layouts you're gonna create the unique layouts and there we're gonna create an function which will be title JS and that title JS we're gonna capture all of those items from there just copy it or cut it paste it here that feature item is here now if we save we may not see anything but if we take the uh sorry it will not be the feature it will be title if we take the title that is here now in our every section the title will be different right the feature and what I do and here it's different so what we gonna do in the title uh in here in the banner we will pass two properties okay so the first one you'll keep the name as a title and the title will be features okay and also we're gonna give another one description and in the description we're gonna write what I do so that things we are giving but if we come over here in the title because we are this is the parent component and we are passing this title and description as a props so whenever we go to title we can de-structurize or we can take as a props then we can find it but we'll just destructurize and we'll take the title and description so let's save it now delete both of them just to show you what's happening there delete both of them nothing is here right so now here whenever I put the title and also description that's appearing now we can customize that one in every single component without manually writing those things we can just get the title and we can get whatever the way we related that one okay so we got our title now what we have after the title we have a bunch of components which contain whatever the things we have right so on that after having the title what I'm gonna do I'm gonna take another div and inside the Deep I'm gonna create everything I needed so like uh for that deep like if I give a class name I give a widow full and then I think I will give a high height of 80 okay and just give a background red 200 just to see what is happening here now you can see that div is happening here right and for that particular dip Y is taking the flex uh I think or maybe we give something and flex we'll just remove that Flex we don't need the flex here so it's you can see it's from bottom and down so now here we can do one thing is that on the title because see that Gap is same for every single component right that's a simple same Gap is happening so we will go back to our title and we'll just create margin bottom of 14. now we may see the Gap is here okay so this this taking is uh like full weight is taking so go back to features uh like uh will give off width of one by three let's see yeah so it's almost the same of that so we'll just create first one item then I will show how you can create a different bunch of item from the single item okay now inside here first we need to create that entire div okay so first I will just uh go with some bunch of properties I will not gonna give it full one by two so if we see I think we are having a car see that thing is happening okay so we just need a simple a bit of card items here then let's run we're gonna customize it so before uh I think better if we do one more thing is that um that one okay just keep it that way that is the card we we got so we can create another uh not in the layout in the features you can create a card .js now inside that from that features what you're gonna do are you gonna cut that class name from there give it here and here are you gonna take the card you can see that one also happening here now instead of like how many card we have we have six card right so let's just go to one two four five six six card we have the six card now that's div We're not gonna give you the flux Flex let's give it the grid and uh grid calls will be three it's getting freaked out because it need to you need to give the full weight we are already dividing in a three portion and also we don't one thing and that is we we will give a gap of some portional Gap so we can see what is happening there so after giving the grid Gap up 20. now you see we are having our card and we gave some uh Heights now it's not required now you see we got the card so we now we need to turn that card into those items okay so let's go to our card now in our card I'm gonna just go a little bit quick because as you see here we have the title we have a title and then we are having some items okay so that items and also we are having one icon okay so that things we're gonna create for the first tip and for all of the dips we will create that icon and other things so let's go to our first dip first tip that that icon will will do it manually will create our icon then other also you will create item icons simultaneously so for all of the cars nice go over here and paste so now this all of the card we have how many cards six card so now those icons because I am passing some icons as props I need to have those icons so I'm gonna just grab those icon and once you paste it it's working fine so I am passing those icons and passing those title and data in a particular card right so whenever and now I need to go to card because now I have the I have the data and that data contains whatever things is contained contain the title description and icon so I can destructuralize that one here and like I can get title description icon so if I remove that one hide this okay and I put the title you must see I can find the title in every single part right and for that particular card I'm gonna just go and give bunch of properties I think I may misplaced something okay so this icon I'm giving you a full weight and uh padding will be an xx6 and 12 and height 80 depending y will be in 10 and round it will be LG so it's a just go through that properties and you can find that card is ready for you okay so we got the card our effect now we need to create all of those effects and properties so first is first just remember we don't have any icon here right that one we're gonna create manually okay so first uh first we'll just uh take an icon for the beginning and that one will be is a bar so [Music] I think we'll take a fibers and it's from the far later on I will show you how you can create that icon from the scratch fibers okay we are having our div here so inside that div we will take another dip and that tip will contains a bunch of things let's uh okay first we need to put the icon in the top okay so let's create a div for the icon in that deep we're gonna keep the icon you see the icon is here so first of all we will remove something from this icon here for that icon because we cannot keep that icon in that way we need to use a span for the icon it's not good to uh let's keep the icon here and you can see we're having our icon okay so we have the icon and now we need to have our title and our description so let's go back to our here we will take another dip and inside that tip in an H2 tag we are just keeping an uh text into Excel phone title phone a phone bold and just bunch of properties and you can see that is uh okay it's good but these things is not right because see this we need to keep all of those things inside another div so now what we gonna do we're gonna see now it's going up and down so if we come over here give a class name and make it Flex it will go yeah now make a flex call and column and gap of eight see it's almost the same Gap whatever we have here there I think eight is more let's give a gap of six so the Gap and now we need to have our description and for the description wherever we pass the title title under of title will pass the description like oh sorry not the title yeah we'll pass the description here now you may see our description is working so for that description what are we gonna do we're going to give also some class name for the description I think title description icon right yeah for the description just give a class name text base and that one here um again Flex Flex call and I will give gap of six so call Gap of six now after giving I think that one little bit more Gap better gap of eight so now we have the icon we have our title our description but whenever we are hoovering here we are getting one icon to see it will not be seen at the beforehand but whenever we will hover we can see the icon so first of all let's take that icon from our reacts icons and it will be an icon of Arrow right and then inside of that div we're gonna keep that icon now you see you may see the icon is here right so now icon is here we need to make it disappear right first of all let's go back here and now that one um let's get BG blue of 300 let's see that is the part where that icon is there so we gonna give a height of 72. um it's a big height um okay so we're gonna give virus now inside that deep MSC that is our div contains everything we will take another tip so if we go through it I think we remove the better the color of course that will be freaked out uh because that one is taking so we here just mentioned the height of full if we go here that is we can see that so now this one we gonna make one single properties that we're gonna make translate from y-axis and it will be how much we can give just like uh give a 10. see it's it's going little bit down right but here you may see if we give a VG of red did you see that the icon is down but that deep that icon is now uh let's put little bit more down like what about 14. see it's totally down right so now here just remove that we make our flow in y hidden now you can see we can no more see the icon right now what we can do to make that icons appear now that Translate Y we need to remove whenever we are hovering on that particular property so all of the properties is here so that one we can give a name of uh like yeah anywhere you put so that contains everything so that one we're gonna give a name of group okay so if you want to know much more about group go to Italian CSS documentation and learn about the group so this is here coming Translate Y by default we are giving so in the group whenever we are going to Hoover in the group Translate uh Translate Y will be zero now see it's happening but it's very fast so what are you gonna do uh we're gonna create it then transition in the opacity and we're gonna give a duration of 500. uh Still Still faster I think the not the opacity oh sorry that's my mistake transition will be transform yeah so whenever we see here oh it's very Sleek right now here you see the four icon is here but here you can see there's only three so now go back here that is our icon right so now what we can do instead of this icon I'm just gonna get that icon properties it's it's just I'm gonna create that icons in this pen okay so it's very easy uh oh sorry it's uh because this deep class name which will be 10. so if we go here uh I think I'm gonna just get some of the class name for that particular dip now if I paste here you can see we get the icon but in that every everywhere that icon is containing but I want that icon in just uh okay now our okay I think it's little bit uh what about py of six okay that will be fine so 10 . 14 16 little bit oh no 20. 20 Flex call I think the Gap what about you give a gap of 10 okay so now I think it's gonna be smooth yeah okay so we need to change that icon properties so how we gonna do that so in the icon now we are getting an icon this one is not containing the icon right so now here we need to create an uh condition like if we have the icon if we have the icon okay then if we have the icon then we will take a span tag and we will have our icon and suppose in uh some of the components if we don't have the icon we're gonna pass this icon so now you see we are getting the icon but uh this icon properties we need to give because we create in this pan tag right so for that one we need to give that which we give before the same things right now if you save it oh yeah now you can see we have our icon uh some some ways yeah we have our icon but from where we are getting that icon because remember for just to be sure we give an icon in fibers we remove the icon you see our icon is appearing so also we need to remove that icon from here just like whenever you it doesn't have the icon you can create your own icon okay it's very easy to create so I create now here a little bit uh is down you can just go through it you can customize it and you can make it as the way you want so now we have our features now after the features we have our project section so let's go in our component and create projects and in the project also first we're gonna get our title and for the title are you gonna give uh our title title and then the description and also remember I think feature we give section also that one you can keep a div or make a section and then our ID will be projects and also for that we're gonna create some of the bunch of class name let's go and we need to import it our um projects so save it and if we come over here click our project is here now if you see the project is in the middle but here the project is the center so how we can make it in the middle go to projects wherever we get the title we will creep inside one deep and that div we will make it Flex okay and now justify Center I think it will come in the center and also you can see it's not uh items distributed squish it will be items also in the Center once you save it I think item Center and then I think texts will be also Center yeah so now we got our projects and after that we are also having another project card right see there is a six card should become and that project card will contain our images and our contains our data so first of all let's go to our projects and inside that projects let's create another like project card now come to the projects after that deep let's create another dip and should be the project card so now you can see the project card is here so how many project card we have we have six project card so let's go two three four five six if you get the sixth project card and the same way the way we give before we will make that deep as a grid and will make the great call of uh three and also will give a gap of 14. once this shape now we are having our grid is here it will not be it whenever we give the items it will be okay now you can we can have our sixth grade okay so it's time to go to our project card so inside the project card we're gonna make other things so first of all in the project curve it's the same way before we need to pass our title right and we need to pass our image source and also uh yeah title Title Here description and then our image source because that icons will be same so we will just create that items in that component only so for that we need to go through all of the project without manually typing it I'm just gonna make it appearing here okay and also for the image all of the image let's go import I think prg city project one that image it will become from um yeah SS and then from that index so we have our three images one is Project one and then 2 and 3. oh we make a different name here I just copy paste from those particular items so make S projects card and S project skirt and in the projects if we save here yeah so now let's go to our projects card we're gonna create our own card that card will contain one area will be there and also hiding wheat will be there and the card items will be there so inside the project curve you will create our every single things whatever is required for the project curved first of all inside the project curve again I'm gonna give some bunch of CSS properties you can go through that properties and can find out what is happening on that properties so now you can see our effect is happening and other things also going on so first one thing uh we need to create a dip which will give a particular height because that is a limited height for every single component right so let's go to our div and the project card will create another dip and that div that they will contain the image right so first of all that image we are getting from our title uh sorry our project card title description and Source right so we need to destructurize those all over the things and also we need to get it inside our project cars we're getting our title our description and our image source so like if we put here like SRC let's go to here and you can see our images is here now all images is looks different different sizes is here so we need to maintain the image size so for that in that deep we will give some bunch of class name we will be full and we will give little bit because we'll keep too deep 1D will be that one another D will be that one so that deep and that D will contain overall structure so first of all on that dip uh we will give off with a full just uh with a full and a height of 80 percent height will become from there it's uh this uh you can see I think height we keep it Auto um okay just just give 80 percent because the images will contain on that way so we gave a hide and sees get around it and now in the image okay what you gonna do like sometimes the source will be available and If the source is not there that we can put a condition but uh for right now I'm not gonna do that because um yeah the image I'm gonna give some class name for the image and the feed will be full height will be 60. if we save see height is all same object will be cover okay and whenever we are hoovering here see whenever you're hoovering thus giving us some in any portion so we can give a group over here I think I give it beforehand yeah as I copy paste so whenever we are hovering on that group we're gonna give a skill on it okay so if we go over here see a skill on it and then because we are giving height of 80 percent the Overflow is hidden from that div so it's not giving any overflow so let's go back there on that after that deep we need to create another dip and inside that dip we will give one H3 tag and we're gonna put the title so if you go there and we can see our title is available here so first of all that type that that particular div also contain the full width okay but it will be from the margin it's a little bit down right to a margin top of five so inside that day we need to create another C there is two things is getting uh and simultaneously in the same side so we need to create that two two particular items in one single d right so that title and that other item will title and icon will be inside one deep so let's create a dip which will contain first the title and then another div which will contain the icons so we have a two icons that uh get me capture those icon for you yeah one for the GitHub and one for the globe which will be for websites now I think in here we can create another deep yeah um yes another dip and inside that div inside this pen tag I'm gonna pop up my icons and icons also some effect as you may see also having some effect over in the icon to change the color so that image also effect also happening here so what I'm gonna do now these things everything is inside that icon so I'm gonna inside that div I'm gonna give the div as a flex and whenever it's Flex EI is coming side by side and then also I'm gonna give item Center and also oh I'm out of the tip and I'm gonna give justify between LC and that one Flex gap of 4. gap of four is more I think I will give just Gap up two so now see yeah pretty much fine so after having that deep now down over here or we can keep it here we can give our description see our description is just smooth for the tough dip create at uh as flex and also Flex call and now we're gonna give gap of six oh now he's having the gap and for our particular P tag also there will be a little bit a bunch of class name for the our last P tag yes I think it's here that one we need to keep inside the p-tech and for that B Tech what are you gonna give a bunch of class name now we see yeah it's working so whenever you're hoovering on it is giving us something uh I think I made something that one it will be the icon uh the title color and also the Gap is more so I'm gonna yeah let me see this one is here we're keeping it inside of that tip oh I made a mistake because that deep will get little bit top here yeah so now as I am here let me see which tip you are using yeah Flex Flex call that is the div here that is the div here what is that dip too much Diva I'm taking what if without that team okay let's just uh remove it let's just see that let's first I change the color of my H3 portion so let's go to H3 I didn't give it any make the text base uppercase and text will be design color and font should be the normal so that is our text and yeah that thing is working now we need to pop up that our title over here so for do to doing to do that so inside that div we have everything right inside the div we have our title and other thing so what I'm gonna do I'm gonna cut it I'm gonna keep that inside another dip and as you may see his things is running and then let's cut that one so this is deep is ending here I'm Gonna Keep it here okay now it's very slick so as you compare that one it's almost the same yes so I think in within that our project our feature is here our home is here our project is here right so that things is uh after the projects um I think we need to do one more thing in some way it's not the height is matching yeah it's matching okay so after having that dip what we have we have our another section which called the resume okay so it's time to create our resume another folder and it will be resume and in that particular folder .js resume and also again I need to import that one in our app resume so once you go back here we can see our resume so that particular resume also will contain bunch of thing we're gonna just uh give that ID and the class name so good to resume oh sorry it will be another section and ID will be resume and for that also we're gonna take our title and for the resume also title will be in the center so we need to keep uh Center also with creating the same div let's go back to resume paste it here now what we have we have seven plus years of experience at the title paste it and then also we have my resume written okay title is not defined let's import that import the title go back to resume so our resume is here so in the resume what we have whenever we are refreshing that one we have our education we have our professional skill whenever we are pressing it and then our experience then our achievements first is happening our education that will be by default okay and to create it let's uh begin with something first we need to create that one right we need to create that header uh create that portion where we will like this tab will be there so I'm gonna keep that Tab in a list item first of all I'm gonna create a div and then I'm gonna create a list and then ul and in the evil first it will be educations if we go back there you can see education is here and let's create four more there and then it's create the professional skill just copy paste experience also experience achievements you save it you can see the four skill is here right so now for that UL what I'm gonna do I'm gonna also going to give some class name for it I will just create in a grid portion now see the grid is here is working pretty much fine now that's Li I'm gonna create a separate properties for that Ally like if I like if I give the class name as you may see I'm gonna just pop up a bunch of class name for that to let it work for one now see that one is working much better okay so now what I'm gonna do this all of the properties I'm not gonna keep it here it will be looks uh much more uh problematic what I'm gonna do I'm gonna create One Properties here after the banner icon I'm gonna create a resume icon resume Ally icon okay okay so after Hoover the PG opacity will change the copy that and I paste it here okay now it's there copy that properties okay so after having that now you can see there is a border but here first of all there is no border right so what we're gonna do we're gonna go here and Hoover text I think border um we give border none after giving that properties I think there will be no border so say that so whenever we are popping up Escape after having that active we are getting the border right so that thinks we're gonna activate later on for right now let's uh go create that education that properties we're gonna create so first of all we are having that education then we need to create something which will contain the Education data right we need to create that data first see how we are gonna make it okay now here that title will be the same for all of it right the same like before the title is the same but the content will be different for the three card the content will be same there will be six card for only one professional skill there will be one uh like uh it will uh give us that chart list whatever things how many percentage we have so first of all let's create that title okay which will contain the educational like data design skills or development skills whatever is that so for that one let's close it um we are in the resume okay inside the tourism of course we after that deep we're gonna create that one okay so after the dip we're gonna take another dip and inside the Deep we're gonna take uh two properties first one it will be like uh I think the first one is that one that the year and then educational qualification the quality and after that now these two things we need to uh keep it separately because that one also will contain two separate d right because see we need to create that site first then the same side will be another way but the things will be different right so we are going to create that side first okay so for that also we can do one more thing is that what about we give a class name here and after giving the class name if we give the padding from Y axis 12 yeah it's going little bit down okay and all the font will keep as a title formed and the Gap will be 4. now Gap will not be four Gap will be 20 not now whenever we're gonna create that card yeah so now it's time to create that card okay so let's go back to our I think in the resume we're gonna create one resume card.js now here after that deep we're gonna take another div and inside the div we're gonna pop up the resume card okay now if you go back here our resume card is there right so how many card we have we have a three card right so let's go we get two three we're going to pop up three card now that card is the same way we create that card that card also contain a bunch of properties one is title and then the subtitle then the results and then the description so the same things we're gonna do for that card also let's just copy from my source and then inside that card we will open it up I think we make some mistake maybe yeah inside that card ooh la la oh yeah I I take one div while I'm copying that so let's paste it again I will get the simple three card over here and now that card there is some restriction of uh like width and height so let's go and I'm gonna take a bunch of properties for that card inside the dip because I want to make it the width full and from a margin top which we give for okay I think uh just wait I think I squish all together so now what we gonna do we're gonna create first of all we need to create that side that row okay that row will be contained with everything okay so in that row I think uh if we remove the padding top uh I think yeah py if we remove is it working no is it not working um okay so this one give a class name with a full okay and then height let's give a thousand pixel just for sure and Boulder will be one pixel border block now see that border is taking all together and the weed is coming uh I think the weed is not before it will be one by two because there will be another side and then border it will not be from all the Border it will be from the right on the border oh sorry On the Border left not in the right it will be in the left and Border lift it will not be one pixel uh I think it's little bit uh bigger so it will be six pixel so after getting the Border uh then we're gonna get the card right so we gave the Border and now while having that boner I will do one more thing I'm gonna go grab my properties for right now I'm gonna just pull up one by two let's see yes so it's taking the height and it's taking the beat so now in my resume card now here that one is done because I got the border so everything I need to work in the card now so in there I need to have three cars so this particular card will contain that three portion of height right so like if I go back there go back inside my car card and in the class name if I give a widow full height of 1 by 3 and then BG blue of 400 and I can see the card is here right see and if I just give a gap of 10 that Gap will not come from here I need to go to resume I need to give a gap here Flex Flex call 10 but why yeah now see the Gap is here so I got the Curve now what I need to do whenever I am having that card inside that card I have two properties one and two one will contain a little bit a different shade and then another will contain the other thing so first inside that card I need to create two div one and then two okay and in the first tip first tip I'm gonna give a bunch of class name and that class name will contain the width will be texting height 6 BGA background will be opacity color and margin tape will uh will be 16 and what is gonna do just you can see here uh I think yeah it should be that one um yeah because we didn't uh this one we didn't give any background like if we give the opacity okay at the same BG color like if we keep a span tag pan tag and that is pen tag I'm gonna give some bunch of class name because first we are creating that portion okay that portion see this one is capturing from that deep so what is going to do like if we if we make the BG rates only then you can see so that contains that all of the item that much deep I'm taking that will be one deep and there will be another dip this one deep containing with that and that is the another deep containing the card so I'm creating that two portions now so now go to my previous color video opacity color so inside that I'm keeping it as an absolute with five height five and containing that one here right so now after not after that span inside that span I'm gonna take another portion um another portion I think it will be another span and also will give a class name a width of three height of three because I'm going to create that small icon right so that one let's go create it okay so that icon is ready now whenever I'm hovering in the group in that particular card that will be the that color right so it's the same way I can uh do it uh with that here if I create the group now you can see yeah I'm going that card that card is happening so now I need to create that one and then the card items okay foreign getting I think that color uh BG opacity color oh because I didn't there is a color which I created is a custom scholar I didn't paste it in there that's why the color is not capturing it will be that color I think my PDR is broken so it's not taking it properly just you arrange it the way you want so now see that color is now capturing so after creating that portion now I need to create my card okay all of the card items will be here now in the card what I will have first of all curved I will give you I will take the width and height okay and then I need to give a color of that of course so first let's get a deep okay we created a div already and that deep uh I'm again going to pop up some of the class name you just feel free to go through each and every class name because I want to finish it within one video so it will otherwise it will be very much big so I created that one shadow shadow one I don't know why it's not getting that [Music] um okay because there is uh nothing inside the dip that's why so if I inside the H3 tag remember we already giving some title subtitle result and description we need to capture all of those title subtitle result description so if we keep the title over here yeah you can see the card is appearing and the title is little bit of freak out because there is another things this one we need to make it Flex and then Flex so now he's giving the actual properties so we got the now we got the our title so for that title see the title and subtitle then again there is the result so we need to keep that title inside 1D right this title what we're gonna do inside that div we will take another dip and inside that one will keep our title and first one will be title and then in a P tag it will be subtitle so if we see here we can see our title and subtitle is appearing and for the title I'm going to get some bunch of class name and also for the subtitle I'm gonna give another class name if we see see our yeah whenever you're hoverboarding in the group is uh changing the color and taking the Heat so now beside that we need to keep that one in the right side now how this is coming in the middle because we are giving in flex and we create the justifying Center so don't be freak out go to the class name and you will find out why this thing is coming in the center okay so now after that now we are having this one inside that div so after that we're gonna create uh this tip we take okay so if we take this step H1 H3 okay what are you gonna do you're gonna take another deep and then uh in a P tag I think inside the PTEC voucher yeah we're gonna keep our results so as you see the result is here I'm going to remove that uh I think this one will be inside that put this tip here and good because we are taking everything in the parent dip that's the way it's uh not giving the result now we're having the result we are wishing for so that one will give a class name Flex justify between and the items of sancha now you see now we need to create uh that properties and that pop for that properties I'm just go through drag some class name for our result tag and we place it you can see yeah that is fine so we are having our title subtitle result and now the P tag need to appear and that will be appear at the bottom so outside of the D we'll just give the P tag and we will keep the description and you will see description is appeared so for that description it will not be a much more class name whenever you're hovering getting a little bit of color of pleth is here so let's go to the P tag give the class name and go over here and you can see this thing is working much better so it's almost same we have one side done now we need to create the other side okay one side is done we need to create the other side and for the other side remember we took everything that resume card right so now go back to resume what we have here after that title so from the title onwards we need to keep everything in a separate copy in other site so let's go back to our evil uh yeah that day so that is our title so this everything what we gonna do are you gonna take we will create inside another dip let's keep it here and it's still working fine so down of that deep we will get something else so let's create another dip and paste it here so now see that is uh two two six three three six is here so now we need to capture that deep like not this one that is our title this one contains everything okay so you need to capture that thing that dip if we make it Flex you can see is coming but it's squishing everything together uh there is a something which we need to give just five between let's see if it's no I think we made a mistake of capturing the uh capturing those deep setup how many is three three is here okay so whenever we have that tree okay after having that tree I think it should work this is our dim right okay BG we just give a class name BG blue 400 let's find out our div so this oh this is all together our deep Ah that's why so this tip is finishing over here now this is the actual dip so if I put that deep now I give a class number of white one by two okay and here in the resume card I think yeah there is one dip okay go back here let's create another class name and we're gonna keep this inside here one deep and now in that deep and we're gonna take another copy of that tip so now we're gonna how many we are going to have six so all of the things items is happening here so that deep We're Gonna Give You full weight and then we'll make it Flex yeah so Flex is happening now it's time to get yeah here you can see we take the width which will be full okay and that side also we are taking half of the width we will give the width of full and now we are having the flex on running now we need to give a gap of 20. as you may see the Gap is happening so this is almost the same as we did so now what we need to do we need to change the bunch of properties because it's gonna create it's gonna capture our job experiences and everything so I'm just gonna give that properties to it so this will be changes and with that I think it's changed yeah job experience and in the card we need to uh yeah we need to uh we need to pass the other properties now the same properties as the education quality so in the resume card I'm gonna pass the other properties is required so now we have that properties is running so now we are having our education now we need to create our that uh professional skills experience and achievements so what I'm gonna do I'm gonna inside here inside because it's already it's all are in that same file so this all things because their things will be education right so inside the resume I'm gonna create another file which will contain the education.jsrfce and inside that education I'm gonna move out everything okay so that is our resume card not the card I'm gonna move out those entire items and the items will contained from I think yeah from here that particular dip I'm gonna take out from here go to education and paste it now I need to import the resume card resume card save it come back here comment it and see comment the items will go nothing is here so now we will pass the education and the item is back so now we just remove those things our education and by the same way we will create another four properties same like the professional skill will be their experience achievements okay so I'm gonna create it you just look around so for that go another and that will be not professionally skilled just keep a simple name which will be skills oh and a scale.js and inside that skill remember education whatever we keep we'll just take all of the things let's grab it put it here just to make sure about the skills so if we uh because skills it will be different for time being we'll just keeping it the design skill if we'll just go and uh change the properties just to see if it's working or not it will be features the title will be features and for the second items again it will be features and the title will be development skill okay now in the resume just close the education if we put the skills you may see oh the resume card didn't import here I think it should work import resume card so now see the feature design skill development skill so it's working pretty much fine so now if we come to the education uh sorry the resume and put it that one education the education is working so now what we need to do we need to create our experience and achievements so I'm just going to take that uh achievements that's our achievements will be motion still we are not yet adding right now so we're gonna edit later resume and also uh the last thing is I think that one is achievements also I'm gonna yeah I take the achievements achievements education uh skills now we need to have our experience I think experience also we're gonna use the motion letter for right now you don't need that because I'm just importing from my existing file otherwise it will takes a hella a lot of the time for it um so so now you see we our we have the achievement education experience and the skills skills will modify later so first of all just to check if it's uh really available or not remove that projects no need go to resume copy that a comment in that one and now go I think it should be C um achievements why is the achievements is not coming the resume card in the achievement now see the achievement is there now after the achievement also we need to try another one and that one will contained I think our experience experience import experience from experience you can see the experience also available here there's the same pattern of education so you can go and create I just copy paste from my existing file now we have our full of the four of the items is available for us what we need to do now we need to create a state okay which will manipulate those whenever we click the education education will appear professionally skilled skill will appear experience will appear achievements will appear so first of all let's go and declare that state in the resume file we're gonna declare that state like const Education data use effects oh sorry not the use effect we're gonna use the use instead and first whenever it will come for the items first the Education data will stay remember whenever anyone refresh it gonna be on the Education data then after clicking it will take the professional or others so first let's go and copy that all of those state I'm gonna get the educational data skill that I experience data and achievement data so all of the data other will be false but only that Education data will be true okay so now just create an uh function over here like Education data if available and and if there is an education data then our education will appear now you can see if we go our education property is available as you see our Education data is available so what if here we make it false no data available right so our state is working so we create the Education data now we need to click the clickable function on each and every single tab so how we gonna do it first of all we took this now whenever we click on that particular tab like we click in education tab right so let's go I will try to create every function in a single line so whenever we on click okay first of all it will uh keep the set education data it will keep it as true I think yeah set Education data Maybe in the mistake of that true it is true but whenever we will click it will make it true because like whenever you come here you click in education education is true whenever you click professional education will be false so whenever you click education it will be true and now if we come over here like on click in the professional skills what it gonna do whenever it will go to the professional that click it will make the set Education data false so once we go here we click the Education data is gone and after that What's it gonna do it also do another thing it will make the Set uh what we keep the name set skill data true yeah skill data will be true but why there is no data because we need to also keep in the function like skill data if there is skill data we need to get the skill portion now we make it a flash Education data available you click Education data available you click in profession see the exchange scale data is change and that change is we cannot see it in a particular way because we need to create our uh what you call that we need to create our framework motion to see that we will not see that right now because whenever you click there there there will be a little bit see it's going to be in opacity in a and in a few variants of reason right so in not directly it will come so that will create later on so let's go back to our here and like just and try to understand the condition is in the achievement also wherever we click whenever we click in education other three properties is gonna make false right only the clickable properties it's gonna make true right like once we go to our first condition like whenever I think yeah we need to get I will copy the full on click function whenever you will click our set Education data will be true then skill data if available it will be false experience is available it will be false and achievement it will be false here I will click another I will just create a skill data and achievement data if there is achievement data it will give me the achievement component and after that if there is the experience that is available it will give me the component of experience experience so if those data is available it gonna give so first thing first whenever I click in our first our first component in education education data will be true and other data will be false right so now the same way whenever we're gonna click in our uh in our personal skill all over the properties it will be False only the skill whatever we have it will be true right and again in our another step The Experience data whenever we click our experience will be true and others all data will be false and for the last one like achievements only achievement will be true others all data will be false now if we come here just make a refresh you click see it's changing that is changing right that is changing very much properly so we need to create one simple thing to see how is changing for that we need to go and like go to that and install the framework motion because after happening the motion effect you can see it in proper way otherwise it will be different and difficult to understand that how is changing we need to give little bit properties and first of all let's go to education and what we need to do we need to import the motion from Famer motion let's Import in top level and oh I think I am in a wrong place again because it's in the resume data so we need to go to our Education data that's our education all data is there so now let's import motion from frame or motion and that motion you can go to the motion documentation and and try to read everything again I'm gonna just go to in a shortcut way if you want me to make a different components for it just let me know in the comments below and I'm gonna make it am I getting some bag or something no okay motion div is here now what I'm gonna do first of all in the initial state in the initial state I'm gonna make a opacity of zero and whenever it will uh animate whenever I want the animation will come it will give you opacity of one and again I'm gonna create another properties of not the transform I think transition and the transition will be I'll give a duration of [Music] um duration of 0.5 okay that's the motion will start let's see yeah when you come see professional skills is not happening when you come the education that motion is happening right so in the same way let's copy all of that motion much let's go to our achievements and also here I will import motion and let's make a motion deep save let's go back to our skills make it as a motion dip and then paste it and at the end I think I have maybe experience yeah so also here oh sorry to from frame or motion motion tip so if we go to just uh yeah now you see is transitioning in a very different way you can see it's changing a very smoothly okay so now you can see whenever is active it's giving us some kind of properties right so we need to create that we need we will create it in Li okay in the list item in that item whenever is active it needs to get that border right so let's go to our let's delay cut that all in the resume we need to keep that in the LI okay so now we will keep that later on first let's uh create some conditional CSS so whatever the CSS condition it will create like if there is Education data because that portion is coming active is happening when the Education data is available right so if there is Education data is available then it will give a property and if not available then we'll give you property but by default it will create the like the same class name it's happening here it will create the same but only whenever that thing is true what you gonna do it gonna make a border and Border will be decent color right and will be rounded will be LG and if it's not then what it gonna do let's just create we're gonna see later on what's going to happen the Border will not come because if we go and see the Border Ally in the resume what do we resume like what we give that border should be none so by default the Border will not capture now see border is capturing for every single items right but whenever we are putting we want the other border will not be available right it will be transparent like border transparent if it's not active say the border is transparent so we need to keep the same properties for others also I'm gonna just save a little bit time for the professional skills if the skill that are available only then and for the experience one um like the experience and let's give the class name and then I think at the end is our achievement for the achievement Also let's keep the bunch of class name so let's hit the save go to our project see wow so we know which one is active right now and from where we are seeing all of the data so now Education data is okay professionally skilled data need to be changed skill data we need to create that scale data so let's go to create that skill so it will be very simple to create just trust me first of all let's go to our scales okay now we have the resume card right so those all are the resume card with actually we know we no longer require That We're Not Gonna use the resume card just delete it after deleting that you see these two is here but it's uh very delicate we need to remove that also uh so let's go and um I think height and weights uh yeah there will be no hide actually mt4 with full okay also again I don't know from where he's taking ah okay we killed one side it should be removed from both sides okay so now you can see we have to okay so in that too we have design skill and then we have development skill so let's go I have one we have two okay okay close them one by two okay class them that one contain half and also wait one by two that one will contain hub so now what you need to do we need to create those items okay that items how we gonna do it let's just having some ideas okay that will be very much fun so first of all uh that deep we are not gonna touch that deep right now keep it a little bit down inside the div we're gonna take another dip and that we will take a P tag and inside that PTEC first one is like let's go to photoshop just type it after typing we're having our photoshoot here right and that photoshop that P tag it will contain as some bunch of properties the class name which will exchange a little bit design pattern it will be text uh SM uppercase and font will be medium so that is okay and now we need to create that portion okay first of all inside here what you're gonna do we're gonna take a span tag okay and in the Indie span tag first of all we're gonna give a video full of the disband tag and we will give a height of two and first one it will be BJ of a city remember we give a create a video opacity here that one that big opacity we will give it here so if we come over here as is Spam tag it will not come until it you make it inline block or Flex I'll make it in then Flex see that one is appearing here and then it will be a rounded of md-rounded from the side and from the top it will be I think margin top two so see it's around it and margin top two now we need to create other one which will contain the other things and it will be inside that spam we're gonna take another span and that is pen we're gonna give a class name of that span it will be with a fool and the height of full with full height full and then the bridge will be gradient too right okay from left to right and it will start from a blue 600 and it will give a medium color of via from Pink 500. 2 red um I think I will also keep the right-handed uh also yeah if we come over here we can see now it will be rounded SM I think we give it MD so this much more round happening but what we need to do we need to take this one that hundred portion right so inside that span we're gonna take another span and that we're gonna give hundred percent if you save gonna look hunky so that portion the one which we create right now what we're gonna do we're gonna make it as relative relative and that is pen or you're gonna make it absolute after making it absolute let's see if we make uh top two it's going top but we will make top minus two we need a little bit more top -7 say it's in the top and we'll just keep from right side is 10. now see it's uh pretty good so now whenever now photoshoot is there we need to create some other let's say it's that one is that deep so just we gonna make it another copy we have another dim right and the Gap is not looks good first of all we will just take our second skill is a figma and with our skill have a 90 percent and here if you see the height need to be 90 percent not the hundred percent not the full so that one will be the height uh sorry uh that one will be the width of 90. persons and you can see it's a 90 percent weight so that things we need to sort it out uh okay agent of four if we give a flex coming together Flex call getting outside yeah and the gap of six wow so we have the figma now how are we gonna do it because whenever we come here see as you may see notice here and oh it's giving a very good motion right so for that because it's only that one is running like in the that that is pen is happening the motion so you will create the motion here also and for that we're gonna give a little bit a bunch of properties here as you may see I'll just make it appear here for the initial it will be minus 10 per 100 so it will be uh like outside of that like if you see when it's coming it's from outside it's uh just uh appearing inside right from from it will be minus hundred percent then the opacity also will be zero then the animation will come and the delay and duration will appear so if we come over here if we see no it's not happening because he didn't save it let's go and you see and you see that that's happening so now we can see see that uh when it's coming we can see it that one we can do just one simple trick it's like we give a class name and that class name we will make the overflowing XXX will make it hidden so now once we come over here you see that okay so now that is working so I'm gonna go and take all other properties for that particular item so let's go grab those and I have here many two so let's dump it here okay location okay now it's working how many is here uh five also here is five and that is for one dip and remember we will just make in a simple way we need to just do everything here also so first of all let's see where we are making through development skills after that skills we're gonna have those all other items that deep we're gonna create those items there's some other items which is that the same way it will be done the same setup so you can just go feel free and go through and make yourself easy to learn see whenever we are going to experience is changing professional skills is changing education is coming so it's pretty slick see so now if we go to Project we can see our project our feature is ready our home is also working we have our everything whatever is required and if we scroll you can see the title and active button is also changing so after that what we have the balance is the testimonial which will be created by the slider and then our contact page and the footer so I think that could be also done I will just remove uh that from this video because it's a lot of things to digest on you just go through each one of it and let me know how you learn and how you are doing it because I'm gonna come up with that in next video also I think some of the mistake you see the features and design skills we our properties is uh not working fine so what I'm gonna do let's go to achievements and here in the achievements tracking this one I think that will be okay okay okay I I got it I got it because whenever kills yeah in the skills ah because only in these skills is coming the letter otherwise it's coming at a date so what I'm gonna do for features I'm gonna make uppercase and then you can see uh now is coming in uppercase yes and that one uh also I think Flex Flex call Gap of four if we give yeah the Gap is working pretty fine so we will just grab those items in our other properties also so if we come over here let's give it that and that one we're gonna make uppercase now if you see that is uppercase and uh yeah we need to go to our achievements we'll give that one and also that should work actually we give the Gap beforehand oh yeah so where is not working it's not working in education ah okay in the education we didn't give that property CS is here so if we give it here and also if we give it here yeah the Gap is coming so that things is working fine so in our next video we're gonna create uh our that testimonial site and also we're gonna create our contact page and footer and then we're gonna deploy it in reversal and also after that in another video we will show it I'm gonna show you how you're gonna make it responsive so pretty much that much all so try to finish until that and then we're gonna come up every other things in our next video we'll see you soon bye

Channel: Noor Mohammad

Views: 39,224

Keywords: create a portfolio website, dynamic portfolio website, dynamic portfolio website tutorial, personal portfolio, portfolio website design, reactjs portfolio website responsive, portfolio reactjs, portfolio website, portfolio, dynamic portfolio website react js, portfolio website react, reactjs portfolio website, reactjs portfolio, reactjs portfolio website tutorial, responsive portfolio website reactjs

Id: lJ2EBYN0C70

Length: 145min 29sec (8729 seconds)

Published: Thu Jan 12 2023