React Portfolio Website Tutorial | Build And Deploy React JS Portfolio Website | Intellipaat

[Music] hello and welcome to this video this is R makani from intellipath and today in this tutorial we are going to create this amazing react portfolio from scratch and the best part about this is you don't require any prior knowledge of react or telin css to create this amazing project so let's begin first of all on the screen you can see that we have our amazing moving background and whenever you will hold your cursor the particles will move move away and whenever you take the cursor back it will link back after that on the right hand side we have one floating image and on the left hand side we have our short introduction and one button on click of this button you can download your resume on top of that you have your navigation bar and when you move over the links of this navigation bar the text color will change after our introduction we have our overview section inside that we have mentioned all the services we provide and whenever you move over to this service it will tilt and it will give you this beautiful looking glare effect right below that we have our tool section and on tools also whenever you will move your mouse over it will give you this beautiful Shadow after the tools we have a project section I have took only three projects over here and this project box is also having this tilt effect and a beautiful Shadow effect inside this box we have took our project description and the source code link and the deployed link of our particular project moving on we have our contact page inside contact page we have this fill to provide all the details the place to mention your email address and whatever the message you want to send then on the right hand side we have this beautiful image at the end we have our footer and inside our footer we have mentioned all the contact information we have I have took LinkedIn mail address phone number and getup if you have any other contact information you can add that as well so without further Ado let's get started and create this beautiful project Now to create this project first of all we will be needing is nodejs so if you don't have nodejs inside your system you can just go to your Chrome browser and type nodejs download and you can see over here you can download the node version according according to your system configuration here I'm using 64bit Windows installer the another thing we will be requiring is vs code so if you don't have vs code inside your system just write VSS code download and click on the first link now again according to your system configuration you can download the vs code so I'll be using VSS code as my ID throughout this video now let's quickly move to the steps to create our react application so when very first step to create this project is to create a react application so how can you create a react application first of all you have to create one folder and inside that you have to launch one terminal so let's do that so I have created one folder where I want to create my react application I'll just quickly open this folder inside my terminal Now to create react app you have to write a command as npx create react app and name of your application so we are creating portfolio so I'm using portfolio and hit enter it will take a while but it will download all the node modules and create a react application for you and one more thing you have to keep in mind is while running this command you will be needing internet connection so make sure you have your stable internet connection and it has created a react project for now let's move to the project it has just created for us so just write CD and name of your project so we have used portfolio as a name so write CD portfolio and hit enter now you are in that particular folder I want to open this folder inside my vs code so to do that I'll write code space Dot and this will open your particular project inside your vs code so you can see it has launched vs code for me I'll just maximize the screen over here you can see it has downloaded a note modules for me and then we have our public folder and inside the public folder you can see there is ficon index.html logo and everything but we are not going to do much inside our public folder we are just going to edit our SRC folder inside SRC you can see app. CSS app.js and so on okay so we are going to change all of this file but before we start creating a project one extension I need you all to download if you just move to our extension and search for es7 you can see we have this es7 react Redux native Snippets so we are going to make use of this extension a lot in this particular video so I highly recommend you all to download this particular extension okay now let's move to our second step so our next step is to create a folder structure for a react so whenever we are dealing with the re project it is very recommended to create separate folders for separate kind of file so so let's say we have some component so we will be keeping all the components inside one folder and whenever you want to edit anything you can just take that file from that particular folder and edit that particular file and same way we have used lots of images while creating this project so we will keep all the images inside a separate folder so let's move to our vs code and start creating our folder structure so here I am inside my vs code so we will create first component folder inside my SRC so so let's say component components and hit enter Then other folder we will be having is our assets folder which will contain all the images and Graphics assets the other folder we will be having is for our utils and the last folder we will create is for our constant so this constant folder will hold all our constant value let's say you have some particular number of projects and that particular project details and everything we will be storing that inside our constant folder and inside our utils folder we will be storing whatever the changes we are making inside our tent or you can say whatever the things we want to apply to our whole project we will be keeping all of those things inside our utils folder now let's start by creating all the components first of all we will create our NV bar so nvb bar. JS then we will create our main.js so main.js will contain our background then we will have our overview section overview. JS then we have our about. JS then we have project. Js s then we have contact. Js and at the end we have our footer so I guess we have created all the components we will be needing to create this particular project now let's move ahead and start coding the project now after creating folder structure we have to download our telin CSS so so we are going to use CSS for The Styling purposes so let's move ahead and download our telin CSS so to download telin CSS what we have to do is we have to move to our telin documentary so let's do that so to open a telin documentary for reactjs what we will do we'll just write tent CSS for react so if I'll just hit enter you can see over here it is showing that install telin CSS with create react app okay okay so we have already performed this operations we have already created the project right now what we have to do we just have to install the telin CSS inst our project so to set up the telin CSS what we will do first we will copy this part this says npm installed minus D telin CSS npx CSS in it okay so we will go to our vs code open Terminal over here and just paste this and hit enter so after doing this you can see over here it has created a telin doc config.js for us so we will move back to our Chrome and here they have given some paths for our telin config so we have to edit inside our telin config.js okay so we'll copy this we will move to that telin config.js and over here I'll just paste whatever they have given inside our browser then what we have to do is we have to make changes inside our index. CSS so we will copy this again we will go to our index.css and we will paste this code at the last okay so our telin is now set up so if you want to check how our twiin is working let's just copy this part and uh move to our app.js so if you will move to our app.js you will notice one thing there are already code written over here okay but we don't want this code first of all if I'll just show you what this code does is let's say npm Run start and hit enter this will open your project inside your browser so whatever the browser you are using for default it will launch your project over there it will take few seconds to load now here you can see we have our react project working just fine but this is already prebuild components of our react project we don't want this right so we have to remove all of this so we will move back to our vs code and delete all of this okay okay if you look at the screen now it's just a blank react application what we have to do is we have to check whether our telin is working or not so I have copied the code from our website and I'll just paste it over here now it's rendered again and here you can see it is giving you hello world with underline that means our telin is working because we have said over here text 3XL font ball and underline so that means our telin is working just fine here you can see there is one warning message says logo is defined but never use so we don't want this file so we will remove this okay now that warning message is gone so our react project is working just fine okay now let's move ahead now after downloading telin CSS what we have to do is we have to create a main.js so what was inside our main.js so inside our main.js we had our background with TS particles okay so what is this TS particle TS particle is basically library of a reactjs so I'll just quickly move to my browser and I'll show you what actually your TS particles are if you will just uh write TS particle inside your browser you can see there are few TS particle links we will go to this npmjs TS particles okay so this will give you the installation plus all the prerequisite codes okay so here you can see they have given us a command to install a TS particle and over here you can see there are so many uh TS particle types okay you can use this code directly to create the TS particle but we will make some changes inside it okay so first of all let's start by installing this TS particles so I'll just copy this code and I'll again go back to my vs code I'll exit this terminal over here and I'll just paste it give it a few second and it will install TS particle inside your system okay so TS particle is now installed uh now let's move to our main.js so first of all I'll just close all of this and I'll open my app.js again and my main.js again okay so here inside my main.js it's not actually a react file right now we have to make it as a react file so what we will do we have already installed es7 extension so what that extension will do it will give you a start a template of function or you can say component okay so let's say RFC and hit enter so it will give you the import of react statement it will create a function for you it will return that function and it will give you one div okay and it also export this function so we have exported this function over here we have to import this function inside our app.js so app.js is basically a parent class okay and these all are the child class so we don't actually have to import it but we will just use it so if I'll just go over here I'll just remove this H1 tag because we know that our telin is actually working so we don't need this anymore I'll just remove this okay and here I'll just go and write main.js and I'll hit enter and you can see on the top it has already imported my main from components okay and here I have my main now we will move back to our main.js first of all we have to create that particle image right so to create that background of TS particles we will move to our react particle website and if you will just scroll down uh bit inside that particular website you will see over here it is return Java support object so we will copy this code so first of all I'll be copying all of this imports from here and I'll be pasting it inside my import section so over here I'll just paste whatever I have copied and uh so here we have few functions over here so I'll just copy this part and I'll just quickly paste it over here like this now we have to copy our particles okay so I'll copy whatever inside this my return statement and we have our particle till over here I'll copy this and I'll paste it over here inside my disc okay now let's try to run this once okay so here you can see it does not have react particles inside it okay so we have to import react particles as well so we have make use of our react particles but we have installed our react TS particles right so what we will do over here is I'll just write TS over here after changing from react particles to react TS particles you can see my project is running just fine if I'll show you on the browser you can see over here we have our particles okay so here we have our background as blue color and this particles are of white color which is looking very awkward and one more thing if you will just click it will keep adding the particles but there will be one point where your screen don't have a space to store other particles okay so it will just become whole white screen and which will look very bad so I don't want that with my project and I don't want my browser to get that much load okay so what I'll do I'll just stop this on click to add this particles I'll also change the background of this particles I'll change change the speed of this particle let's just modify our code okay so I'll move back to my vs code I'll uh move little down I don't want this comments over here okay so so over here first of all what I'll do is I'll go to this div section and I'll give this a class let's say class name and uh I want my maximum height as screen okay and uh now inside my ts particles here you can see there is a background color value over here I want a white background for white we have 6 time F okay now let's move back to our code you can see this is the white screen complete wise screen because our particle colors are also white so let's change that first here you can see there is one function as on click okay so what this function will do this will generate more particles on click okay so I don't want that so I'll make this as false uh we want uh animation on H so we'll keep it as it is then I want the quantity to be same but I want my color to be different because I want to see this right so I have figured out some basic color template so right now I'm using EA 58 0 C so this is a color code for orangish color okay and similar color I'm using for my links so this is for the particle the dots you see and this is for the links or you can see a lines okay so here now let's once move back to our output so here you can see this is our output right now which has a white background and orange colors of particles in link but we don't want that again we want our particles to be little less and little bit slow okay so we will change the speed to three because this is very distracting this so much motion is very distracting then I'm changing the shape from Circle to squares okay so there are so many options here I'm using squares for this project and uh okay let's keep other stuff as it is and let's see what is the output we are getting so I guess this much motion is quite okay right and the size is also a little reduced okay I guess this looks fine now let's move ahead so before moving ahead with creating another page let's first add some defined CSS part okay so our next step is to add Styles inside our UIL folder so let's move back to our vs code and add some Styles inside inside my utils folder so here back I'm inside my vs code and I'll open my utils folder and inside this I'll create one style. JS okay inside this I'll create one constant styling for all of my text okay so let's say constant so that my margins and paddings will won't budge Okay so so I want all the hero text to be of single font size I want all my subtext to be of same size okay so I'll do that so I have created one constant variable and I'll also export the same variable so let's export stes now I can use this created variable anywhere inside my project and this is a variable so I have to export it like this now let's start by writing some Styles I have already you know defined some of my Styles but we will add few CSS whenever we are writing that particular line of code okay so first of all we have our hero head text head text inside this there are some few basic requirements let's say the color of my text will be Violet text Violet and I want it 800 uh if my screen is large in that case my text will be of 80 pixel then if my screen will be of small size in that case my Tex will be of 60 pixel we have to Define all of this styling according to our screen sizes because we want our application to corresponsive right so let's say text 40 pixel then generally I want my text to be 40 pixel then LG lending is equal to 98 pixel so this are some of the Styles which work with just for me you can change little bit here and there okay according to your requirements after hero text we have hero subtext inside this again we have my text as wallet and 700 and have f of medium LG is equal to text 30 pixel SM for a small screen my text will be of 26 pixel then for ex small screens my text will be of 20 pixel and normally my text will be of 16 pixel so above one was main heading this is subtext of that particular heading okay LG what pixel now after hero subtext we have section head text and uh over here again we have our text as Violet 600 so I have used orange and purplish theme for my project you can change colors accordingly okay and now we will give our padding as eight then MD for the medium screen text will be of 60 pixel for small screen my text size will be of 50 pixel then our exess screen will have text as 40 pixel then text usually will be of my 30 pixel next we have section subtext you can apply this CSS whenever you are writing your code as well like you can directly write your class name and start giving this code but I don't want to write this code again and again see let's say you are adding some CSS whenever you are writing writing your code okay but this is all the part you are going to use again and again so that's why I'm creating this style. JS sheet and inside this I maintaining all of my codes okay next inside my section subtext we have text for small screen will be 18 pixel and I want it for wallet color wallet 600 then usually my text size will be of 14 pixel and leading will be of 30 pixel and Max width will be of 3XL then I wanted repeat then I wanted an uppercase case and I want my attracting to be wider now finally last we have section text okay we will start by giving it margin top as four heading left as8 text color will be of orange and my text size will be of 17 pixel let's say 17 would work I guess then my leading will be of 30 pixel and Max width will be of 3x so I guess this is what we are going to write guess this is it now let's move move back to our PP now after writing styles what we have to do we have to create our about JS section which was on top of our main J section okay so we have to create one section which is top of another section so to do that we basically use display is relative okay so let's try to create this first we will try to create this about JS page and then we will try to put that page on top of our main JS page okay so let's do that before creating my about JS page I have taken some assets and images and put it inside my assets folder okay and uh here one more thing I have one resume PDF over here which I have put inside my assets folder so whenever we will be creating our button to download a resume this resume will get downloaded okay so this is some dummy resume you can put your actual resume inside this folder okay now let's move back to our vs code so we are inside our about GS section let's start creating first of all let's start by importing few of the important things we need to create our about section okay so first of all let's import our image import profile so here I'm importing the image that was floating okay so let's say from and you will have to give location over here so that is inside my assets folder slash and I yes the name was profile.png so I'll just quickly find it and import it after that let's import our styles from util styles from our util section just we have created and uh one more thing we will be needing resume to download and resume is also inside my assets fold folder PDF now we have imported all the important things we needed now let's start with creating our main about page Okay so first of all let's write some Telvin over here let's say class name I want my display to be Flex Flex wrap Flex wrap to make it responsive okay Flex wrap justify Center item Center empty 10 and I will give ID is equal to to home for my Navar okay after doing this SM I'll be creating one more div inside this div now inside this div I'll write class name Flex Flex one py four this is pedding from the Y AIS okay inside this we had our text okay so I'll create one span over here inside this pen we had high comma I am this is the text you saw on the screen okay and inside this we had another span with the class name and something like this over here the text for that particular section was text orange 600 and name that was drawn so you can give drawn over here you can give your name anything okay and inside this pen we will give it as Styles dot styles do our hero head text okay so now you can see why we have created our Styles inside our UIL folder okay now over here I want one space so for that I'll write PR BR is basically brake line okay and over here I'll give now after this pen I I want one break line so let's say br/ and here we had our what we are so that was a Monte developer so we will write that so let's say class name I have created one Spen over here and inside this I'm giving it some properties that was styles. hero subtext and uh inside this pen we will write I am a mon stack developer and we will also give one more and over here one brake line again and we will write web [Music] designer web designer okay so let's try to check the output so to to check the output we also have to import this inside our app.js so I'm just using my about over here okay it got imported now let's move to our now let's move to our Chrome and check the output I have commented my main section so that I can see my about section so here you can see it's looking very beautiful and this is what I actually wanted okay now what we have to do is we have have to create one button over here and on the other side we have to attach a image okay so let's do that let's move back to our vs code so inside my about section now what we have to do we have to create one button and we have to put image on the other side okay so after this span tag what I'll be doing I'll be just giving one brick statement so that I can get that gap between okay now to create button I'm using one Dev over here and uh let's give this Dev some width let's say class name which will be of 14m now inside this div what we want we want an anchor tag because we want our PDF to get downloaded okay so for that we have to use one link so let's say anchor and inside this anchor tag we will start by giving our href and hrf will be my [Music] resume then we want it to get download so name of our downloads will be resume resume then over here I want my target to be blank and real is equal to nor ref so we basically use this uh real to no refer because whenever we are hosting this website if this has so many links inside it this won't get you know rank on our Google so that's why we don't want any refer inside it so we'll just write real nor refer okay inside this I want one text saying that it's a resume and one download icon okay so let's do that let's say div I'm creating div over here inside this div I'll be writing some classes so let's say class name and first let's start by giving a pedding some margin top W isal to 13 RM this is the width of my button okay and uh then I want my button to be a little bit rounded rounded axle text orange 500 then I want want it to be Flex justify Center I want my text in the center border let's say border of two pixel then I want my Border Orange orange 500 I guess 500 will do then on Hover I want border of violet color violet 500 okay let's check for 500 okay and on H I also want some sh so Shadow and uh color of my shadow will be pink 500 inside this I want resume as my text resume okay so let's move to our Chrome and check for the output so here you can see it's my button and it's looking good but one more thing I want over here is I want one little download icon over here so for that I'll be using react icons so let's move back to my vs code and first of all we will download a react icons Library so to do that write npm I react icons icons and head enter so if you will just move to your browser and open react icons you will find lots of react icons over here if you will just open this you can see there are so many examples given over here but if you will just move to this GitHub react icons page you can see there are so so many icons over here and so many types of icons you can find colorful icons as well you can find material icon as well so you can find every kind of icons over here okay so this icons I'll be using for my whole project so for this one I want one download Arrow so name of my icon is TI arrow down outline outline and this is from my react icons di okay now where we want this re icon we want it before our resume okay so we will add it over there so so here I'll be just using my di down arrow icon okay like this let's move back to our Chrome and look for the output so here you can see you cannot see that icon over here right it's not visible completely so let's make it visible first so I'll be writing some classes over here I'll be giving some tent to it and over here let's say text is equal to LG margin right is equal to 3 margin top is equal to 1 and text as orange orange 500 we have used right so orange 500 and here I want okay let's go back so let's try to reload this okay now you can see there is is some tiny icon over here and it's looking good right now the last part what we have to do is we have to put one image over here okay so let's do that let's just make it in a single screen okay so I want this after this dip so this is inside my main division okay so inside this division okay so I'll just go down over here and I'll create one more Dev over here inside this I'll be giving some class name Flex flex and inside this I'm putting my image image has SRC and the name of my image is profile profile and altern it for my image will be profile now let's give some classes to this it's a class name and I want the element and object contain and P4 let's move back to grro and see what we got over here so here you can see we have an image and it is completely aligned and everything is looking perfect but we had one more thing over here we had our image was moving right so we have to create that animation so to create that animation we will write some vanila CSS inside it okay so let's move back to our vs code and uh now I have created already created this element name class okay so I'll be creating my my CSS inside my app. CSS okay so we have already have our app. CSS I have removed all the code from my app. CSS over here we will start by writing the name of my class which was elements so let's say elements element and uh name of my animation animation name name is float we have to create a floating animation over here then then we have duration which was 2 seconds then we have timing function that is infinite animation so to use this animation we have to import our app. CSS as well so let's move to our about. JS and import our app. CSS so let's import do do back SL app. CSS okay so here this is app.js we want app. CSS canot see app. CSS over here so I'll just write it app. CSS now let's go to Chrome and check for the output so over here here you can see this image is not moving okay let's make it move okay so let's quickly write our element once again so let's say animation and name of my animation is float so let's say float then duration of my animation will be of 2 seconds then animation iteration count iteration count will be infinite then my timing function will be of EAS and out okay now let's go back to our Chrome and look for the output okay so here you can see now my image is moving perfectly and it is looking good so one more thing we have to do over here is we have to give that background to this particular section right so we have already created our main.js and we want that main.js as the background for this particular section so let's do that let's move to our vs code and to make our main.js as a background we have to make that particular section as relative so what where we will write that particular CSS inside our app.js right so inside my app.js what I'll do I'll just remove this this for a time being and I'll be creating one more divs okay so first of all so first of all I'll be writing one simple div over here and I'll be giving some classes to it so let's say class name class name and I want it as a flex Flex call overflow will be x hidden okay and uh first of all we will have our nav bar but we haven't created nefar yet so we will first try to figure out our main and about section okay so first of all let's create one more Dev over here let's say Dev and uh class name and minimum height of this div will be of screen okay so that it will cover whole screen area and now the main part comes so first of all we will make our display as absolute display as absolute absolute okay and inside this we will use our main class same mean now we want our about on top of our mean so what we have to do we have to make our about as relative right so relative to our main class so let's do that outside this da I'm writing Dev over here and class name relative okay inside this I'll be using my about section now after this div I'll be creating one more div and inside this div we will have our other sections as well okay let's move back to our Chrome and see whether we have achieved the output or not so here you can see it is working just fine we have our background behind our about section so that's what we wanted right now let's move ahead now we have completed our homepage now we have to create a navigation bar so let's move to our navb bar. JS and here we'll write RFC and we have our boiler plate code okay now let's move ahead and create a navigation bar so before creating a navigation bar let's first try to see what actually a navigation bar look like okay so let's move to our completed project and try to create a replica of it okay so here is my completed Pro project if you see this is a navigation bar it has one logo and there are some links okay so if I just inspect it and uh check the responsiveness of the navigation bar you will notice one thing over here that whenever I'm creating or making this website inside my phone in that case my navigation bar does not show options it giving me a burger menu okay so hamburger menu if I open it then I can get this links over here okay so I want to create it like that so in my phone it will become a hamburger menu and whenever I'll be viewing this inside my laptop it will show a complete navigation bar okay so if I'll just once again I'll exit this and if I'll just again inspect it you can see and if I'll just put it at the sponsive you can see over here when I'm going to 710 it is becoming a hamburger menu okay so we have to implement this toggle button so on click of this the navigation will close on click off this navigation will open so let's try to do this let's move to our vs code so inside my vs code first of all what I'll do I'll start by creating one nav okay something like this okay okay now one more thing to notice when creating a nav bar is the Navar is always staying at the top whenever you are scrolling your website nav bar is not moving so we want our Navar bar to be sticky at top so let's do that move back to our vs code and inside my nav I'll write some classes over here let's say classes class name uh we want a nav bar as fixed at top width is equal to full Z index is equal to 20 top is equal to zero and uh background color will be orange 100 I guess let's try orange 100 okay then BG opacity will be of 80% because it's not completely you know dark it is like little bit transparent in nature so we'll do that then let's create one more Dev over here and uh in this Dev and class name now again for our screen whenever our screen will be of full length the maximum width can be of screen right so we don't want it to get overflow that's why we are making it as Max withd is equal to screen and uh again this will be flat Flex wrap because we want to make this responsive Flex wrap and uh items Center justify between and the MX Auto MX Auto this is margin X okay and pading I want two pixels so then we'll be having one image over here so I'm using inip part's logo over here you can use your own branding image over here so I'll be just copying down the link of the logo which I have just got from my Chrome so over here first of all we'll create one image tag and inside my SRC I'll paste the link of my okay okay and a few more things we will give some class name we will set height for the logo and also we will give some margin from left side and uh if this logo is not loaded in that case I just want to text this logo okay okay we have added our image now what we have to to do is we have to create a list right so so after logo what we want we want our list okay so we will create one unordered list and uh inside that list we will create some links to move across your portfolio Okay so over here I'm just creating an empty div to make that button and everything okay so right now I'm just keeping it empty we will try to understand the logic for toggle button later but right now what we will do we will just first create our on ordered list okay so for that I'm creating one more diff over here and inside this dip I'm creating one unordered list like this and now I'll give some classes to this unordered list and I'm writing this inside a curly braces because I want to implement the logic as well and this is the symbol of back tick you can see uh just right below your Escape key you can see a tilt and a btic so we write whenever we are writing uh functions inside your classes in that case we use back tick and inside that we write other codes okay so right now I'm using a back IC and a curly basis so I want this order L to be Flex Flex direction will be of column so let's a f call over here I want padding to be four margin bottom P0 mt1 mt4 text Excel [Music] border cursor sir whenever I want my pointer to be cursor whenever it is coming over the list okay so cursor pointer border border gr00 100 then I wanted rounded LG LG MD flag and MD space and SP is X8 and Mt mty Z and MD border Zer this is in case I have my toggle but okay but when my toggle button is not there in that case what I want I want the opacity to be changed and few more functionality we will implement it later but right now let's just keep this now inside this UL I'll be creating some list so Ali and uh here I'll be creating one div and inside this div I'll be putting everything okay so I'll be writing all of my Telvin code inside my div so let's start by making a display block py2 pl3 pr4 uh I want I want this as a rounded so rounded MD P0 H text we have seen on H the text was changing okay so H text was orange orange 600 let's keep 600 for now okay and uh text with without Hover was violet color and it was Violet 700 now the actual text first of all we have home button okay now what we will do we will just copy paste it for the Times how many elements you have okay so here I'm just copying my Alli tag and I'm pasting it for this is for my about section next section we had was our project section so we will write projects over here projects then after projects we have contact Section so here I'm writing contact before editing other code let's try to repeat before before repeat before making further changes inside code let's move to our Chrome and try to see what are the changes are required okay so here I'm inside my Chrome and this is the project we have created and we haven't rendered it inside my app.js so let's first do that so inside app.js we want Navar at the top right so we have to write it before our name [Music] so over here we will create one more Dev over here and uh inside this D I'm calling my number okay and I want to give some class name over here let's a class name and this will be absolute because uh it will show if it is not absolute okay absolute and withd is equal to screen now let's move back to our Chrome okay now you can see we have one header with us and uh the data we have to set it in the center whenever we are in the laptop screen or on the bigger screen we want our data in the center and whenever we are in the mobile setting we want our button at the right hand corner okay so we have to set that and let's create a toggle Button as well right now if you will see there is no toggle button over here it is just like this okay now we have to create this toggle button on toggle only this will open okay or else it will just show a logo and a button at this corner okay so let's try to do that so let's move to our nav bar. JS back and at the top I have created this div if you remember okay so inside this div we will be creating our toggle button so over here let's say class name and uh display will be Flex obviously and MD order order of two now let's create one more button over here and we want on click of this button the toggle function will call we will create the tole function leader but right now I'm just writing on click and uh we will create this toggle function later toggle okay now uh let's give some styling to this button okay so let's say class name and over here we want inline Flex item Center padding let's say two with is equal to 10 H is equal to 10 this is I'm just randomly typing this numbers okay so you want you can change the numbers later just defy Center text SM text 3 500 and uh we will also put one icon over here okay on and I want this button to be little rounded so let's say rounded LG and and uh on medium screen this button will be hidden and uh Focus outline I also want when the button is clicked I want it to get those outlines okay so let's say Focus ring two and uh color of that Focus ring let's say Focus ring GR 200 let's keep it 200 okay now I want one icon over here so for that icon I have to import icon from my react icon library right so let's say import name of your icon so name of my icon is AI outline outline menu unfold from react icon slash EI okay okay okay now let's add that icon over here so we will just use AI outline unfold and uh okay so we got our icon let's write class name over here and let's give some color to it let's say text color text Orange and 400 text LG okay this is the size of my icon now let's just go back to our Chrome and see what we are getting over here so here you can see it is giving uh error at Icon okay so we haven't write spelling of react correctly so let's just change this from now let's move back before moving to the output let's first create a toggle function so whenever you are creating a functions inside your react we always keep those function outside your return statement okay so inside my function nav bar but outside my return statement so over here I'll create one constant and uh I'll create one state okay so let's say state is open comma set so this will keep keep track of my state of my button okay which is equal to initially I want my nav bar inside my phone to be closed so let's say use State and uh initially it will be false so you can see use state is already imported over here okay now let's create a function let's say constant toggle I guess this was the name of my function uh okay T was one okay so toggle and I'm making this as a arrow function okay inside toggle what we will do we will just create one more inside toggle what we will do we will just set the open as its opposite let's say the open was false at the beginning right so whenever we are clicking that button we want that open to be true right so what we will do we will just set set open as whatever the value opposite of that particular value okay so how we can do that we will just write set is open and inside this will pass not open is open okay so this is how you can create your toggle button let's move back to our Chrome okay so here you can see now we have a perfect navigation bar if I just you know minimize this or you can see if I can open this inside my mobile setting you can see here I have this open navigation bar okay but it's still not showing that button thing what I actually want okay so if you can see here in the middle somewhere we have a small tiny button but I want that button but over here and I want this to open whenever that button is clicked okay so we have to do that so how we can do that we have to make changes inside my CSS so if I'll go back to my vs code and over here when we have given that back tilt and we have WR inside we have given back tilt and inside that we have wrote some telin CSS properties so over here we have to make changes inside my CSS file Okay so so over here what we will do we will just write a dollar symbol and this is how you can create a tary operations okay so like this and curly braces inside the curly braces we will check whether is open is true or not if the is open is true I want my BG color to change from orange 100 orange 100 and VG opacity to change to 70% 70 okay and uh this is more than one value so we have to give uh single invited comma over here and if not if the is false then I don't want to make any changes inside it so okay now let's go to our Chrome so on full screen it is working just fine but in mobile view if you see here I again have the button but still the view is not changed let's try to change this view okay so over here what I have to do is whenever I am in my mobile setting I have to change the display type so first of all we have display type as flex but whenever I am in my mobile at that time I want my display to be blocked otherwise if the display if I'm not in my mobile view I want my display to be hidden so that that button is not open Okay so let's try to do that so on top of my UL I'll write inside this div okay so I'll create one class name and inside this class name again we will be using our back tech and uh curly braces that won't be any spaces over here and inside this cly Braes backtick and inside this we will write item Center justify between withd is equal to full MD Flex MD width is equal to Auto MD order order is equal to one and uh if this is not the case then I'll be creating one turn operator over here is open if it is open then my display will be block so in case my is open is true in that case I want that navigation bar otherwise I want the display to be hidden or you can see the whole component to be hidden now let's go back to our Chrome okay so if I'll just do this you can see it is still not working why it is not working okay so it is not firing or changing the state of my is open variable okay so let's try to check what where is the problem inside our code okay so if I just inspect it over here you can see our navigation bar is working just fine so you can see this button is toggling and my button is at the right hand side corner and all of the options are on the left hand side below my logo so that's what I wanted so our navigation part is clear and now we have to create other part okay so let's move back to our PP and see what we have to create next so before creating a project. JS section let's try to understand what are the components we have inside our project. JS okay so let's move to our already created project so this is our already created project inside this if you can see there is one heading there is this text and there are some Services we provide okay and there is this tool step so what we will do we will create one separate file and store all of this we will Store The Heading we will store this text over there and this images okay so whenever we are creating one component we don't have to copy paste components again and again okay so we will create just one component and then we will create one for Loop and using that for Loop we will create all of these components so in future you will add some tool Stacks or whenever you in future you add some Services you don't have to create separate code you just have to change single file and by adding data in that single file the changes will reflect inside your portfolio so let's do that so let's create one file inside my constants so inside my constants I'm creating index.js over here okay and inside my index.js what I'll be doing I'll be just pasting all of my code so in this code what I have done I have imported all the required images for my project so you can import the image according to your requirements okay so here what are the images I have used inside my portfolio which I have already created and showed you guys so those mes I have imported over here and then I have created separate sections or you can say separate objects for the things so over here first of all we had Services right so I have created one Services object and inside my service object what I had I have one title and one image if I'll go to just already created you can see that there is this title over here and this image so I have just simply return that inside my constant list or you can say object okay so similarly I have done with the Technologies so here you can see there is this title and inside icon I have given the name of the icon which I have imported so if you just look above over here there is this web I have imported and I have used that web as icon over here so I hope this part is clear to you so don't get confused while creating this uh you know index.js file or you can say constants file okay uh similarly we have done for the Technologies name of the technology and icon for the technology so again if we go to our already created project here is the same thing we have an image and then we have this name of the technology so we have written that inside my Technologies constant list or object okay so this basically this list contains so many objects so how many tools you are using you can create that many objects inside it so let's say now I'm using Android studio as well so I want to add Android Studio so what I'll do I'll just write Name colon Dr Android so to write Android I have to Android after Android I'll just import the icon for the Android so let's say I have icon for the Android Studio so if I just go to Google and write icon okay let's say I'm importing this this single image save as image okay and over here I'm just saying Android and uh I'll go to my downloads folder okay so I have to drop this first okay let's get some other image let's take this image okay so let's say I'm just saving this as a image and I'm writing Android over here and I want to replace this file okay now what I'll just do I'll just go to that folder that particular folder I'll just copy this and I'll move to my project file so where is my project my project is inside my project one so if I'll just go over here here you can see I have images and my assets so over here I'll just paste my Android and um what I'll do I'll just import that Android image over here so let's say import Android from do assets SL android. PNG right and over here I'll just write Android so this is how you can add anything inside your object list okay similarly we have for project so if we go to our created project and see so over here we have uh two links which contains netlify and GitHub one image of of that particular project name of that project and description for that particular project okay so what we will do we will create that many objects or you can see that many variables inside my object list okay so here if I'll just move back to my vs code you so if you look at over here inside my projects we have the name of our project description of my project and I have also given some tags for uh which from which technology they are created you can add this or you can remove this is your wish there is this image of the project the source code link and the deployed link okay so this deployed link of my netlify and source code link of my GitHub similarly I have two more projects you can add other projects as well this I have added and uh at the end we have exported all of the variables we have created variable list we have created okay so first we had created services so I have exported Services then Technologies and then projects so we are going to use this index.js in our whole portfolio Okay now you get it how you can change your portfolio using this particular file okay you can edit any data inside your portfolio using this particular file okay now let's just move ahead and create our overview section so if I'll go just to my overview section and if I'll just write RFC okay I have my boiler plate code with me and now I just have to create a section so in this section we know that there were some tilt were used right and uh there were some transition and animations inside this particular section so let's see how you can do that so if I'll just move back over here over here you can see there is this you know this tilt is used and if I'll just refresh this now you can see this part is in the paralic so whenever the object is moving above anything so you can see this is a till still background okay and whenever you are scrolling this this is going on top of that right so the background you have created with the particle JS is still and whatever the part you have created later is moving on top of that so we have to create this introduction part and other parts on top of that particular div okay so here you can see we have this tilt so we have to use our tilt JS for that so let's first start by importing our tilt JS so if I'll just go back to my vs code and I'll open one more terminal over here and inside this I'll just write npm I react pad trint let this get downloaded till then we will just visit this website okay so if I just go back to my Chrome and I'll just open react Parx tilt you can see there are so many reacts website and if I'll just open this first one you will see there are so many examp examples and the whole code for creating this parallx tilt so here you can see this is the how you can create your react tilts so this is one demo there are so many other ways to create react tilt as well so here all the details about how to use react tilt is given to you okay you can refer this documentation later whenever you are creating a code in reactjs this documentations are very important let's say you want to change some colors or you want want to change some theme in that case whenever you're using telin GS so in case of telin CSS you will just visit that documentation and you will get the whole idea about it okay and uh similarly this npm websites are so good you can check any packages over here and you will get everything inside this here the example is given to you there are whole code of this dependencies and everything the versions you will get older versions over here everything okay okay so here on this side you can also get the repositories of GitHub so in this G repositories you will get all kinds of dependences implemented over there okay so you will get all the examples over there so right now we know what we have to create so let's just move back for now and you can explore this documentation later so first of all we have already installed our react parall til so let's just import that so import tilt tilt from react paral tilt okay now what we want we want our Styles so we'll just now what we want we want our Styles so let's just import styles styles then we want our data from my constants file so let's say import what we want in this section we want Technologies comma services from my constants file okay and one more thing I'll be importing over here that is framer motion so we will install this framer motion this is also one uh library of reactjs that is framer motion. JS okay so let's just uh install this as well npmi so we have installed our frame motion as well so now let's start by creating our overview section okay so first of all we had our services first of all we had our title then we had our introduction and then we had our services so let's start doing that so over here what I'll do I'll create one more div inside this Division and uh in this div I'm giving some classes let's say class name and uh Flex I want Flex as row and items in Center padding left as five and justify content Center justify Center then I want PT pedding top as three and I'll give ID over here for my navigation purpose okay so let's say overview okay now inside this what we had we had our heading and then we had some text over there okay so let's just uh create one span over here let's say span and inside this pan I'll be writing introduction introduction over here and uh some class properties okay so if you can remember we have created our utils and inside that we had our style bouet so inside that we had our Styles dot section head text okay so this is section heading so I'm using that particular style over here and uh apart from that we had our little paragraph and one horizontal line so to create horizontal line you just have to write HR tag and and uh this will create one horizontal line but I don't want this line for the whole width so I just want it for the particular width so I'll just give one class over here and I'll make this width as let's say 35% of my screen okay I guess this will do okay now we will create one more div over here let's say division and inside this div I want my introduction okay so whatever you want to write you can write uh right now I have copied one paragraph over here and I'll be just pasting that particular paragraph okay so I'm just pasting this particular paragraph if I just I'll that you can read it okay uh here I have WR I am a skilled web developer with experience in JavaScript and expertise in Frameworks like react node I am a quick learner and a collaborative scale and userfriendly solution that solve real life problems let's work together to bring your ideas to life okay you can modify this text here and there okay now what I want is I want to change some CSS of this particular paragraph so over here we have already created section text inside my Styles so I'll use that section text over here now after this particular div what I want is I want some services okay but before implementing the services let's check the output first so this is already created and uh this is what we have created but we have to call our overview inside my app.js okay so let's just do that first okay so inside my app.js if I'll just scroll down after about okay so after the div of about we have another div this empty div we have already created right so over here I'll just write class name Flex Flex call okay and over here I'll just write overview now let's just go and check output so over here you can see the overview section is not visible okay so to make it visible we have to make a display as relative first so let's just do that over here let's say relative so that it will come on top of my main okay so now you can see if I'll just refresh this page and now you can see that is this little bit overview but one more thing if you notice over here this background is still at the back side of my this introduction right I don't want that I want the background from my introduction to be white so what we will do we will just give a background over here simple let's say BG white now now if you will check you can see now there are no TS particles behind my introduction section so this is what I wanted so if you see over here this much part is similar right this is similar you can see the both of them are similar now let's just move move back to our vs code and uh implement the rest of the code okay so now we want our services so to create the services we use our tilt but before implementing tilt we will also create one more diff outside this div I'll create one more div like this and uh over here I'll just give some t let a class name display as Flex Flex wrap grab and justify Center and uh now how many boxes we want whenever we are implementing our services section how many list we have right how many objects inside my list we have so that many boxes we have to implement so to Traverse the list we basically use our full loop or you can say you can also use a map so what we will do we will create one variable and we will map all the sub services to that particular variable so to do that just uh open curly braces and inside that write Services services do map and name of my that particular variable that will be service okay so this is Services I'm creating variable as service and I'll be creating this function aror function and inside this we will return a division okay so now we have to create this division so we had a tilting box right so we will create that so let's say tilt and uh inside this tilt we will pass our key as service icon so we have different icon for all the services right so we will write service dot icon okay you can take key value as a name as well okay now let's give some classes over here let's say class name is equal to we had given that parallx glare effect we will create that glare effect okay so I didn't use any predefined glare over here I have created my own CSS glare I'll teach you how to do that so I'm just just writing the class over here like this now how much perspective we want we want the perspective to be 500 now glare color color and uh whatever the color you like here I have used this beautiful orange color because my tee is orange okay and uh I want this to glare so I'll enable the glare enable and inside this will pass through after that how much opacity of the glare we want let's say glare Max opacity I guess how much maximum opacity it can go up to 0 point 050 okay this is basically a 50% kind of thing and then the scale will be 1 point so this are just hidden trial uh numbers you can also change according to your you know needs and we also have to pass one more thing over here that is gyroscope so gyroscope is basically used whenever we are talking about cameras whenever you will be implementing the 3Gs concept there is this scale and gyroscope are used more so over here if you want to learn more about all of this you can uh check out the documentation of tjs okay so this much we'll do and uh this will take two I guess yeah okay and this is inside our okay here I have forgot the equal to okay nice now inside this what we want we want a image and whatever the service we provide that is a title right so we will create one more div inside this and uh inside this div I'll be giving some classes let's say p is equal to 3 m is equal to three Flex Flex call justify evenly I guess huh justify evenly item Center okay and inside this we will give our image and uh class name obviously we have to set the height and width of my image uh let's take 100 pixel for each and uh we will also pass our SRC over here and uh have you can pass a image RC service do icon so this is basically same whenever you are using objects inside your some other programming languages like react or JavaScript or Java whatever okay so this is just the same way of accessing your objects and uh you can compare it like that whenever you are using function and you want to use that function of some particular class so we create object and by using that particular object we use the functionality of that particular class class by implementing the dot function right so this is similarly same and uh alternate what we will do we'll just pass our service do name or you can say title so here I have created title that's why I'm giving title over here okay and uh after that we also want a name of my service right so that is basically a title of my service so we will do that over here I'll just pass service do title and let's add some properties to it so let's say class name m is equal to 5 text wallet Viet uh let's keep it 500 okay I guess that's it that's what we needed now let's go and check for the output so over here you can see we have this particular boxes which contains our name and the images okay so one more thing we have to do there are no outlines if you have noticed right so if you look at the final output there are this outlines and uh this outline is not of a single color if you notice this is a gradient effect so here this part is little bit darker blue and this part is violet and if you see inside it is a orange color of glare right so we have to create this over here you can see there are no particular kind of effects in this and this looks very blunt so let's try to do that so to do that first of all we will create one Styles sheet over here inside my component folder so let's create a new file and name of my file will be style. CES and inside this style. CSS we will so inside this style. CSS we will create that border effect okay so this is the name of my class I have just copied okay now let's just give display is equal to flex then we have Flex Direction column then justify Center content Center next we have align item Center then we have width is equal to 250 pixels then height is equal to 250 pixels we want square right then margin let's give margin as 40 pixels so to make it you know bold and big and uh border width border with also 2 pixel now border of a solid color so border of style solid and let's create one gradient effect so to create a gradient effect we basically use B B image so like this you can use border image okay and inside this border image what we will pass we will pass linear gradient gradient okay and inside this linear gradient there are few things first of all from where to where we want so let's say I want the gradient from to right and then we start giving the colors so basically whenever we are using this border image and linear gradient there we can use three or four colors okay so I am using only two colors over here you can add more colors according to your needs okay so let's just say red comma yellow so this is just an example we will add other colors as well but let's just right now look at the output okay we have have to import this style. CSS inside my overview as well so if I'll just go over here and if I'll just import my style. CSS and I'll check the output again here you can see I have this box and uh this is looking good right now one more thing we have to do if you notice we don't have those border color so one more thing we have to mention over here is transform style piz Up 3D now if you look it over here this is looking little bit better if I'll just reload this page and yeah this is looking good right now let's add add some other colors to this so so now I have added a color over here so I have used this beautiful blue color and this purplish color over here and if I'll show you the output you can see this is looking exactly similar as the created portfolio Okay so you can see this is giving you a glare and let's check ours yes this is also giving you a glare effect so this is looking amazing now let's move to our tools okay so again for the tools we are going to perform the same process we have performed earlier uh let's move to our overview if you see what we have done we have created the map okay we have implemented a map over here and we have mapped it with a key value okay and according to that key particular key values we have created that many blocks so if you have noticed one thing we have returned this code only once but it got implemented twice so if you just look over here there are three boxes right but we have just written the code for once so that is because of we have implemented a map function over here so map function is basically of our JavaScript okay so if you know few particular functions of our Java JavaScript such as map filter and if you know how to write a f Loop whenever you are implementing your code so this kind of thing is going to be very helpful for you okay so let's just move ahead now and Implement a tools over here so outside this block we will be creating one more div let's create div over here and inside this I'll be giving first some class names okay I was not supposed to write here I was supposed to write over here okay now inside this first of all we have Flex Flex wrap after Flex wrap we have justify Center item Center and now we will again implement the map functionality for our Technologies so let's say Technologies dot map and name of my variable name of my variable will be technology let's say technology okay you can use anything over here and we will create Arrow function just like this and inside this we will pass a div and uh this D will have a key as a name of Technology let's keep name as a key this time so let's say technology do name right now let's write some class name over here and let's give margin as four margin top as five whole [Music] transition height is equal to 100 pixel width is equal to 100 pixel rounded I want it rounded um let's say 3XL and Shadow let's give 2 XEL okay and uh I want one border of one pixel so let's say border one pixel and the color of my border will be Violet Violet let's give 400 this time okay and uh on Hover I want shadow of orange color so I'll just say shadow orange 300 and uh over Shadow will be Shadow okay that's it now what we want inside this day we want a image and outside that box we want a name of that particular technology or a tool okay so let's give image over here and uh class name P2 I just want to give pedding over here nothing else okay SRC and uh SRC has technology dot icon right because it's an image and alternative we have technology do name now after this image what we want we want a text so let's say div and uh inside this div what we will do we will just pass the name of my technology so let's say technology. name and over here I'll give class name and um I just want to set my text color as wallet while it's 600 let's keep and then justify Center and place now let's check the output first so over here you can see the images are not coming we just have the boxes and the names are not coming as well so let's just try to debug the code okay so whenever the names are not coming and the titles are not coming that means there is some problem when we are using this map over here okay so let's just try to fix this let's let's just move to our Chrome and see what is the output coming okay so if you can see over here we have this beautiful looking tool section okay so here you can see this is orange shadow on the background and we have added this Android separately right so this is only you know coming in the next row but uh if I'll just go ahead and remove that from my index.js it will be fixed so if I'll just go over here and uh if I'll just remove this you can see my Android is gone now we have completed our introduction section we have completed our first page so now let's move ahead with our PP and see what we have to do next so we have completed our overview section next we have is our project section so if you just move back to our already created project and let's try to f figure out what are the things we have to do inside our project section so here I am inside my project and if you look it over here this is similar to our introduction section so this part is same as our introduction section and similarly we have this uh tilt boxes but only the content of this tilt boxes are different so let's first try to implement this particular part and then we will try to figure out the rest of the part which contains our actual projects and the project description okay so let's move back to our vs code and inside my projects so we have created a component as projects so we will move to that so I am inside my projects. Js let's create one boiler plate first and yeah here is my react boil so now let's move back to our overview and from the overview I'm taking this first part okay so this part of my overview will remain same so I am just copying this part down and uh moving back to my projects and over here I'm just pasting it and instead of this uh introduction I'm writing projects over here and uh for this description I have already copied down the textt so I'm just pasting that text instead of this text okay uh let's go to our app.js and try to import that okay we have to import our projects projects from okay not from constant we want my projects from projects. JS okay back slash component and inside component I want my projects okay so let's go to our browser and if you see okay this is giving him because there is one div extra okay let's go to our project and try to remove that so over here I guess there will be one more closing D okay okay and we haven't imported our Styles so let's import that let's say import styles from my utils do Styles okay I guess it should work fine okay yeah this is working good okay if you just move down over here we have this projects and there is no description let's try to refres this on okay so there is not no description the description is in the white color so we don't want that right we want the description in the orange filler so let's do that okay so there was this closing div over here you just had to remove that one okay so rest of the part is working fine if I'll show you just the output okay you can see over here we have our text in orange color now okay now we have to create those blocks which contains our project details okay so let's do that so we have already created a tilt before right for the services so same kind of tilt we are going to create for our projects so let's just do that after this div over here okay over here let's create one tilt and uh key will be my project name project. name but before using this project we also have to import it right so let's just go back to our import and let's say import projects projects from my constants okay after importing projects what we will do we will map our projects right so first of all I'll start by creating One Division over here and inside this div what I do I'll just write project. map projects. map [Music] and inside this bracket I'll write project and like this inside this we will just pass a tilt okay so because we have created a tilt okay and this tilt will take key as a project do name repeat and this tilt will take key as a project do name okay so we have mapped the Tilt with our project okay one more thing if you have noticed over here we haven't imported the Tilt so what we have to do over here is we have to import our tilt from from my react react parall tilt okay so now we have our tilt and uh it should not give us error anymore now let's start by giving this tilt a classes okay so let's say class name uh first of all let's define height and width so let's say width will be of my 300 pixels height will be 500 pixel because I have created a rectangle shape over here and flex all Flex and justify evenly so that when you add more projects inside it it won't look bad and uh Shadow let's give 2 XEL Shadow okay and uh margin 10 item Center H Shadow let's give H Shadow as well okay so H shadow of 2x okay yeah now you can see properly then we have over Shadow color so let's give violet color shadow Viet 400 okay now usually the shadow color will be of pink B of 300 now pedding three rounded Xcel little bit rounded right and uh border of two and Border color will be Violet Viet 900 okay uh let's go to our browser and check the output so I'll just refresh this here you can see it has created three boxes for me but this boxes are in not in a row direction right I want this in a row so what we will do over here we'll just go over here and we'll just remove this Flex call and if I just rephrase this so this is not enough a if you go to our browser and look at the output we have this boxes in a line but we don't want it like that right so let's try to add some more Telvin so I'm just moving to this parent div of this tilt and writing class name over here and and let's make it Flex first then Flex wrap and uh padding let's give it justify evenly and item Center okay now let's go back to our Chrome so over here now you can see we have this beautiful boxes but one more thing we want we want uh borders of this right and we want data inside it so otherwise it is looking just fine okay let's move back to our vs [Music] code now inside this tilt what we will do we will create one div and uh inside this div we have another div and let's write class name over here let's say flx justify Center I Center and margin bottom let's give three over here okay inside this let's create one more Division and uh this division will store our netlify and GitHub icons okay so let's create one Circle so let's give some height to our Circle and height will will be of 40 pixel and width will be of 40 pixel too first we will create a square and then we will give radius is equal to full or you can say rounded is equal to full okay then margin equal to 3 BG slat 50 let's take 50 okay rounded full then we want a shadow Shadow LG Shadow color valet 500 this will also be flex and just if I obviously Center item center now this will contain one link also right so for link we will use anchor tag and uh this anchor tag will hold the link so let's say hrf and uh what will be our link we use project as our key right so we use project as our key right so we will write project DOT first deploy link and then we will add source code link Okay so here Target is equal to blank blank and after Target we will give an icon over here so first we have to import those icons as well so right now I am first writing over here the name of my icon and then I'll import it okay so SI nlii is the name of my icon and after that we will give some class name over here let's a class name inside this we have to change the font size so let's make it 3XL font we will make it bold and uh the color of Icon will be violet 600 okay so let's just copy this one more time the same thing for our GitHub okay so I'm just copying this down over here and instead of this deploy link I'm writing over here source code link okay and instead of this assign file we have GitHub same over this side okay now let's just copy this and uh in our import section let's say import SI GitHub from react ions of Si SI okay and similarly I want SI nlii now let's go to our Chrome and look it out let's just reload this okay here you can see we have two icons two beautiful looking icons of netlify and getup so right now we have made this s Center that's why this are in the center whenever we will add other images and the description of our project this will go at the top so let's do [Music] that now after the icons what we had we had our project image right so let's just add our project image first so over here what I'm doing I'm just taking image tag and an SRC I'll just add project do image okay and for alternative we have my project name now let's add some classes so over here I want my height of this particular image to be 200 [Music] pixel the width of my image will be 250 pixels and uh the image will be self centered and border of the image will be two and water color will be pink after that I want my edges of this particular image to be rounded to XEL okay so we have done this much now let's just close this tag now let's move to our Chrome and look at the output so let's just refresh this and over here you can see we have images and our logo part if you want it in a different direction so we will change this later but right now let's first add add our textt for our particular project so after image we have image name right image title so let's add that now let's add title of our project so to do that I'm creating one more div over here and inside this div I'll be just passing project do name of my project so like this and here I'll be passing some classes to give it a styling now first thing we want my text size to be 2XL and uh next I want my text color to be Violet and violet 600 let's make font extra bold okay now last thing thing we want is our project description so let's add our project description as well now inside this I'll be creating one span and inside the span I'll be passing my project do description and uh let's just add class name and text color will be orange orange 500 and text will be in Center like this now I guess we have completed our project section let's move to our Chrome and look at the output so yeah we have got output over here but one more thing we have to do is we have to make this heading in the center right so let's just do that and I guess rest of the things are pretty much good right okay I have changed my text to center now now let's go back to our Chrome and look at the output so here you can see this is the desired output we have wanted now let's move to our PP and look at the next step okay now after creating project what we have to do is we have to create a contact form so in contact form we have two things first uh form on a left hand side and on right hand side we have one image so let's go to our final output and see what are the components we will be needing inside my contact page okay so let's move to our final output and try to figure out what other the components we'll be needing so this is the contact page of the project we have completely created so what we have to do is we have to create this text field we have to create this label The Heading and the outline part is the same so this is this the HR tag and the heading that we have already created for our projects and introduction part and this particular image so this image is already present in my assets folder and one more thing we have to add over here is this button so let's go to our vs code and try to build this contact. JS file so I'm inside my contact. Js what I'll do over here is RF C and uh one more thing I'll do I'll go to my app.js and I'll just write here do okay now let's go back to our contact page and first of all in the contact page we have that same particular heading section heading right so I have just copied my section heading from my overv section and I'll just pasting that over here and let's just add more over here okay and instead of introduction we will write contact so we have to import our Styles now what we have to do we have to create two parts we have to divide our screen into two parts for our large screen right so what we will do we will create one flex and then divide it into a 50/50 for large screen and for small screen we will apply Flex wrap so that when we are in the mobile view our image will come in the top and then our contact form and on the above we will have our heading so let's try to implement that so after this heading I'm just creating a Dev over here and inside that div I'm just giving as mt5 inside that I'll create one more div and uh let's give that D of properties let's say flax FX strap and uh this Flex will be a flex row okay and then we have justifi around then inside this I'll create one more div and I'll just set the width for this particular div in the larger devices so let's say class name LG colum width is equal to 40% so whenever my screen will be big this part will contain 40% of my screen because I don't want it to you know touch both the images so I'll just take 10% of gap between both of the components okay so that's why I have took 40 over here now let's create form inside it so let's say form and uh this form will have some class which says margin is equal to five Flex Flex call and GAP is equal to three so Gap is basically the space between two labels or you can say a text field and a label okay now first of all first label we have and that label have a class name of flex Flex call and gap of three inside this label we have span and uh span says your name and uh let's add some properties over here let's say class name text wallet 700 font media and uh let's give margin bottom over here okay now we have to create one input field repeat now we have to create one input field as well so let's say input and uh the input type will be of text so let's say type type textt then we have name is equal to name and uh Place holder so let's Place Holder will say what your go name okay after the placeholder we will give this input field some styling so let's just create first background as Orange Orange let's keep it 200 100 p y is = to 4 PX is equal 6 placeholder color will be let's say x secondary secondary text color whatever the text you are going to write inside that particular text field will be of color orange 500 and uh I want to keep it as rounded [Music] LG now let's have outline as well so let's say outline of color none and Border also none and the font medium okay so we have created one label over here let's just copy this label two more times okay and then we will change CH the input Fields okay so we have added three labels let's go back to our Chrome and look at the output so this is the created and this is what we created okay so right now we just have this form here that's why this is in the middle when the image will come this will go to our left hand side now let's go back to our vs code and try to edit this so for the first one we had a name then for the next one we have your email address so this one is for name this one is for email so let's say your email and uh type will be of email email and U name will also be email name uh placeholder will say your web address address and U I guess rest of the things will remain same okay for the last one we want a text area not an input field okay so here you can say your message okay and over here instead of this we will make it as text area and uh over here we'll say text and uh instead of this type we will give row is equal to five now placeholder will say what's your let's say what you want to say over here and uh rest of the things will remain same over here you can see there is this error okay this error is because this is not input field this is text area okay now at the hand we had one button also right so let's create that button so over here let's say button and uh the button type will be submit submit and uh let's give some CSS to this button as well so let's say class name background of this button will be slat 100 over Shadow Orange orange 300 pedding y will be 3 pedding x will be 8 margin bottom will be four all over margin will be four and uh I want this button to be a little rounded so I'll just use rounded Excel I don't want any outline and uh the width I want is to fit okay and uh text will be black color let's say black let's make it black okay and um font bold after that we have Shadow the shadow will be mty and the shadow color will be primary basically secondary is white and primary is black okay and here we want submit so our form is ready let's go to our Chrome and look at the output so here you can see if I just refresh this here you can can see we have our form so this button is looking very beautiful and we have our whole form over here with us okay now what we have to do we just have to move this form to our left hand side and then we have to add image on the right hand side right so let's just do that I'll just move back to my vs code and uh outside this form and outside this div if I'll just create another div and I'll just just give image over here and class name for large devices I want my image width to be 50% you can use grid over here as well I am using just with is equal to 50% because it's not that you know difficult to handle this part so let's say class name after this diff I am giving one more div and uh the width of this div on large screen will be 50% okay so you can use grid also but right now I'm using just 50% with because this works for me and uh image SRC okay we haven't imported our image okay so let's first do that and Alternate text will be let's give alternate text over here okay uh so let's first import the image and then we will use it so let's say import contact from do back slash assets back slash contact us okay so let's just write contact over over here okay so I guess we have completed our contact page let's go to our Chrome and look at the output so here you can see we have our beautiful looking contact page now what we have to do is we have to create a footer so let's go to our pre-created project and try to figure out what are the things we are going to need so over here you can see this is the footer we have to create and and this footer is very simple to create this just had this black strip and on that top of that black strip we have our icons and the details right so let's just quickly create this footer and complete our portfolio so if I'll just move back to my vs code over here and if I open my footer over here and RFC and let's go to our app.js as well and import a footer over here okay okay now let's go back to our footer and U inside my footer we will first start by creating that black strip right so inside this div I'm creating one more div let's first give the background color and the width for that particular footer so let's say width will be obviously of our screen right so let's say width will be a screen always inside our phone also and background will be black now after that inside that I'll be creating one more div and uh that Dev will have some class that says it will be of flex display the flex will be of row display and uh pending will be two Flex wrap will be on and justify around inside this what we do we will create a anchor tag and we will add our links to that particular anchor tag okay so so let's start with the LinkedIn profile okay so let's create an Anor tag over here like this and U let's says HF and inside this add your LinkedIn and uh Target we'll say blank and let's give class name over here and class name will be text LG Flex Flex row and text color will be wallet wallet 300 okay so let's quickly add a hrf over here so I have copied my LinkedIn profile over here and I have just pasted it okay now what we want we want one icon with that particular L profile right so what we do so inside this particular anchor tag we will create one more division so let's say Dev because I want that particular link to open when that icon is clicked also right whenever we are clicking the link we are opening that particular link but whenever I'm clicking the icon I want that particular link or website to be open right so that's why I'm creating this division inside my anchor tag now let's start by making the circle so let's say class we we know how to create Circle right height is equal to 30 pixel my width will be 30 pixel as well after that I have rounded full to create a circle now this circle will be of flex justify content Center item Center and uh background will be of violet color after this we want this icons right so we will import this icon later let's say gr LinkedIn LinkedIn option text F I just want the logo in a white color okay so that's why I'm just doing this okay now let's import this first okay so we have imported this logo also and uh one more thing after this logo I want some text right so let's add the text as well so after this division I'm creating one span tag so inside the span I'll just write in tath and I will be and over here I'll just say class name is equal to text white and ml1 mty 0.1 RM so after doing this much we have created our one link so let's go to our Chrome and check the output so this is our Chrome and you can see we have created this much okay so now what we have to do we just have to copy and paste this for three more times okay so let's go to our vs code and if I'll just select this div I'll just close this div and then select this div okay so over here I'm copying this for the first time now for the second time and now for the third time now what we have to do we just have to change the text and the icon right rest of the things will remain same and also we have to change the url of the particular icon right so let's just do that so here is our first anchor tag this is our second aner tag so over here we don't want our LinkedIn profile instead we want our main so for the icon I'm using gr mail over here so I'll just remove this and I'll change it to gr mail and I'll also change this and uh okay now we want a mail ID so my mail ID is in telepath repeat so my mail ID is Eva do adate telepath Doom okay now after a mail ID we have our phone number so let's just change the icon first and over here I'm just keeping this blank and uh over here I'm changing this icon to VI solid phone okay I've have imported this icons now so you can also import this icon this are all from react icons Library okay and uh on this pan tag I want a phone number so I'm just typing a random phone number let's say 0 1 2 3 4 5 6 7 8 9 now for the last one we have our GitHub profile so let's just here say our GitHub let's say in chath okay and um over here I I'll change this icon to gr GitHub okay gr GitHub and similarly over here over here we will add our GitHub link so over here we will add our GitHub link okay so I guess we have completed our portfolio let's look at the final output let's just refresh this once and over here you can see this is quite not what we expected right so let's just move back to our vs code and if you look at the code over here okay so so we have added LinkedIn Tri so let's just remove that okay now this is good okay but what we want over here is we want this in a single line right not in this rowwise so what we will do we will just go to our main heading div and uh over here we will make this as a so let's just change this to flex row Okay so so now we have completed with our whole project just the thing left over here is to add the links so if I'll just go to my output you can see we have completed the whole project but if I'll just click those links it will not work okay so we have to make this link work right so let's add react links so react link is basically used to move inside your R project so whenever you're going to create your react portfolio or you can say just the landing page kind of website in that case you don't need routing you can just directly use react link and that will do your job okay so let's just implement the react links if I'll just go back to my vs code and I'll write npmi react scroll and it will install a react scroll for you okay so SC okay now we want this react scroll to work in our navigation bar right so let's move to our Navar and over here I'm importing links from my scroll so let's say import link from react scroll okay now what we have to do we have to create this this links with my every ankle tag or you have created our list right so in our list we will add our links so let's start by adding links so first of all before this my lii tag what I'll do I'll just write link and uh I'll just wrap this Li tag inside this link okay and let's give this link some properties let's say let's say spy and uh we will enable the Spy then first one will be for our home class right so this will take you to home okay and this will be our active class as well so let's just say active class if you wish you can ignore this okay similarly we will do for our rest of the links so here again I'll be creating a link and here also spy to true and and uh this will take you to about or I guess we have created overview right so this will take you to overview overview and uh this has to wrap it over here will again a link spy true and this will take you to projects right so let's just add projects over here so let's just move to our project section as well and check whether we have given the IDS or not so this links basically work on IDs okay so similarly when we are in the HTML we create IDs to move inside our page right so in react we don't have that concept but to implement that we have to use Link concept okay so let's just move to our projects and see whether we have given the ID or not so here we have given the IDS as project and you have to mention the same ID to make it work okay so make sure this IDs are similar to whatever you have given inside this pages okay now after the projects we have contact page and I'm pretty sure we haven't given the the ID inside our contact page so let's just do that as well so let's first Mi Pi is equal to 2 and uh this will take you to contact and I'm just copying this ID closing this link Tab and uh inside my contact I'll just move at the top and here this will give you a contact okay and inside my na bar again okay so we have wrapped all the links inside my repeat we have linked all the list Inside My Links so let's go to our Chrome and look at the output so this is what we have created so far and now let's check whether our navigation bar is working or not so if I'll just click on the project I want this to move to my project section but it is not moving it is just blinking my cursor over there if you see okay so the project section is not working because the project ID is wrong so let's go to our project and copy this ID move to Navar now let's just refresh the this once okay now let's click on contact if I just click contact it will move to contact if I project it will take me to project and if I click home it will take me to main page so we have implemented the whole project using react and telin CSS and let's also try to download the resume okay so if I'll just click on this resume download button you can see the resume is downloaded now let's check for the responsiveness as well so if I'll just click control shift I and move to my inspection mode you can see this website is responsive if I'll just open an XR here you can see we have our whole website and it's looking very beautiful inside our mobile phone as well and if I'll just open my navigation menu and if I'll just try to make this navigation work let's say yeah this is working just fine over here and with that we have completed our react portfolio project so if you were creating this Rea portfolio alongside with me please share your GitHub link or your deployed code Link in the comment section let's also try to deploy this on GitHub as well as on netlify so first of all I'll move to my GitHub and inside my GitHub I'll create one new repository over here so let's just say project one okay and I'll just click on create repository okay now the git has created a new repository for me so if you don't have GitHub account go ahead and create a GitHub account and then download a git bash in your system and log in to that particular git bash using your GitHub credentials okay now what we will do we just have to follow the steps okay so first of all I'm just opening this on a side Tab and over here I'll say get in it see you can see that it initialized get repository for me now what we will do we will write get add read me MD click enter it will add the read me file to our project now what we will do we will just copy this this says get commit minus M and first commit so minus m is a main branch okay so we are committing inside a main branch so we have added our read me file to it we will add get Branch as well so just paste the second command over here and press enter then we have to add origin so copy this command paste it over here and click enter and in the last command to push let's just push this so if I'll just write get status it says that there are so many files we haven't committed okay so let's just add that as well so like get add dot it will add all the files in your branch then we have to do get commit commit minus M and we will add complete project and H enter then we will push this so let's say get push origin mean and click enter so here you can see we have pushed whole project to our GitHub so if I'll just go to my GitHub and if I'll just show you if I'll just refresh this you will see my project is pushed over here everything of my project is pushed over here alongside this pre-created get read me file okay so now let's try to deploy this project so I have I already have the netlify account if you don't have just create one netlify account and uh just log to that particular netlify account so here you can see this is my particular netlify account if I'll just say add new site you can uh deploy the site using two methods first by adding the GitHub and second by creating a build file so I guess uh you all know how to deploy using a GitHub so let's try to understand how we can implement the build file as well so if I'll just move back to my project inside my vs code I'll just write npm run build so this will create a build file for me if I just hit enter you can see over here you will get a build file created okay so here this is my build file so what you have to do you just have to drag and drop drop this build file to your netlify so let's just do that let's say import deploy manually okay and after that you just have to click on browse and upload inside that my projects is on my desktop project one inside portfolio and I'll just grab this build file and I'll just click upload So within a few minutes it will deploy your site and and uh you can just you know see all those processes over here and if you'll just click open production deploy you will see your portfolio is uploaded over here okay and it is working just fine and is looking very beautiful and with that we have successfully completed our react portfolio project we have seen how to create it from the scratch how to deploy it how to push it on a GitHub I hope you have enjoyed this video and if you guys were creating this project alongside with me do share your source code link inside the comment section below don't forget to like And subscribe to intellipath YouTube channel I'll see you in next video till then keep crafting and keep coding those amazing react applications just a quick info guys intellipath offers a fulltech developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course

Channel: Intellipaat

Views: 14,516

Keywords: React Portfolio Website Tutorial, Buil And Deploy React JS Portfolio Website, React JS, React, React Website, React JS Personal Portfolio Website Tutorial, Complete React Portfolio Website Project, React JS Tutorial, Learn React JS, React JS And CSS Project Tutorial, Responsive React JS Website Tutorial, Full React Native Project Tutorial For Beginners, How To Build Website Using React, Build And Deploy The Perfect Portfolio, Best React Tutorial On Youtube, Intellipaat

Id: Gt6x3GNE5gk

Length: 167min 56sec (10076 seconds)

Published: Wed Nov 29 2023