React Portfolio Website | Build and Deploy | Responsive Portfolio Website Tutorial for Beginners

hello my friends today we are gonna create this minimal portfolio page using react it's a single page app that we can show our information portfolio and we are gonna be using an awesome animation here and a contact for we are gonna create a dark mode toggle here that we can switch between the dark and the light team and you are gonna see how easy to do that using context api and for the contact form we'll use email.js when someone sends a message to us we are gonna see it in the mailbox right away and this design will be fully responsive you will learn how to create responsive components using pure css and finally we are going to deploy our application using a hosting service to do that we will be using hostinger one of the most popular hosting providers and the sponsor of this video let's check hosting plans as you can see they start at an incredibly cheap price you can deploy here 100 websites but the amazing thing is you are gonna have a free domain free ssl certificate and unlimited bandwidth you can choose any time period here and if you use the link in the description below or la madev coupon code here you are gonna get an extra discount after choosing payment method and entering your information you will see this page let's set up the hosting if you use any cms like wordpress hostinger is gonna create it for you after just one click but we will create our own app so i will skip this section let's claim the free domain after choosing a domain and entering your contact information your hosting will be ready to run so if you are ready let's create an amazing portfolio page and deploy it here okay i created my portfolio folder here we are gonna install our react application to do that make sure that you have installed the last version of the npm and after that you can come here in the terminal and you can write mpx create react app and your application name in this case it's my app but if you do that it's gonna install all those unnecessary files like logos icons unnecessary javascript files we don't need that i don't wanna waste time deleting all those unnecessary files so what i'm going to do is opening clomodel github repository and finding here react mini branch and if you check this folder as you can see we have only app.js index.js and inside this file there is only thing which is hello world so we don't need to delete anything we don't have to waste our time so how we are gonna clone this branch it's really easy let's come here and copy this url if you drag the clone disk url it's gonna download all those branches to prevent this we are gonna be using single branch key let's do that i will say git clone and it's gonna be single branch and i'm gonna write here my branch name which is react mini and after that this url and finally select your folder path in this case it's going to be just dot because i want to download this application into my main folder so i will enter and it's ready awesome but we don't have node modules if we start this application it's not gonna work to prevent this only thing you should do is writing here yarn or npm install and it's ready as you can see we have node modules right now so let's start our application i will say npm start or er start and after that we are going to create our images to do that i will create new folder inside my source folder i will say in which let's open up image folder here by the way application is ready as you can see hello world and my image folder i'm gonna take all those images and move into my new folder like that perfect and right now we are gonna be choosing our font family to do that we are gonna use google fonts if you search for poppins or whatever you like you can select your styles here as you can see i just selected normal ones like three hundreds for hundreds and after that i'm gonna copy this link and i'm gonna paste inside my html file which is in the public folder and index html okay let's paste this here and to use it we should provide our font family to our css file and our style is here i'm gonna paste and after that it's gonna change our phone firmly as you can see it's popping right now i can close these pages and let's decide what we are going to have firstly i'm going to create an introduction component which includes our name our job title and maybe image let's do that inside source i'm gonna create new folder which is components and one more folder it's gonna be introduction or just intro and it's gonna include our javascript and css file let's say intro jsx and intro css let's close here and here and i'm going to create my component function to do that i'm going to use a shortcut and i will say ref c e and it's going to create this function if you want to use this shortcut you can just use this i have some extension let's shrink here and you can search for any shortcuts here as you can see there are many of them okay anyway i will close here and i'm gonna write this is intro so how we are gonna use this component only thing you should do is calling this component in app.js instead of hello world i'm gonna say intro and as you can see it recommends to import this component from components folder and intro and intro file i will enter and as you can see it imports from this path and i'm gonna close my tag let's see again and right now we can see our component here have some so i can close here and here and after that i'm gonna divide my component into two pieces and it's gonna be left and right side but before let's give class name for our main div and it's gonna be intro or just i it can be i shortcut so let's create left side i left and i write and i'm gonna write here left and this side will be right so basically i just wanna split this component and all this side will be left and this side will be right to do that we are gonna be using flexbox but before let's import our css file here i will say import and intro.css ok right now we are able to use our class names and give some styles let's do that i'll say i and it's going to be display flex and as you can see they are in the same line right now but how i'm gonna separate them let's write here i left and i will say flex one i will do the same thing for right side so i will say i write and as you can see fifty percent of the component is left side and fifty percent of the component is right side if i say for example here two and one left will be twice bigger than right side it works like that okay i wanna see this component full screen so i can come here and say height 103h let's give some background color and see i'll say aqua for example and as you can see it's full secret if i say 50vh it's gonna be the half of the secret okay i can delete this background and right now what i'm gonna do is writing my name title and other information here in the last site but before i'm gonna create a wrapper that because we are gonna be using padding we are going to give some space so i will come here actually i can split this css file here and we can see that writing like that okay inside left component left div i'm gonna say i left wrapper i'm gonna be using h2 tag and it's gonna be hello my name's and one more and it's gonna be a name let's say john something like that but we are gonna use class name of course i will say i name and it's gonna be class name and i uh let's say intro introduction and i'm gonna use h1 tech here okay let's see as you can see it's here perfect let's keep padding for our wrapper i will say i left and wrapper padding will be 50 pixels like that also and what else we can write here we can write our job titles but we are gonna be using an animation so i'm gonna create a div and inside this div i'm gonna create my job titles so after h1 tag i'm gonna say i title it's gonna be a div and inside again another do i title and dropper oops dot here and finally i title and item and first item will be web developer let's duplicate this and it's going to be ui ux designer and writer and finally content creator okay i can delete this okay nice so basically we are going to have title div inside we are gonna create wrapper that because we are gonna give some animation and when we animate it it's gonna show another title here in every second you are gonna understand better i know it's confusing right now don't worry about that so let's give some style for this texts so firstly for this intro i will say font size 30 pixels and font weight is gonna be 300. like that it's thinner right now so what about our name here i will say i name and font size will be 60 like that so what about title div i title and i'm gonna say height 50 pixels that because our each item will be 50 pixels so it's gonna able to show only one item inside and i will say overflow hidden so we are not gonna see others as you can see there are two items here that because we didn't give any size for each item so if i say i title and item and height 50 as you can see there is only one item okay let's increase this font size like that okay it's better maybe bold font fade bold and i'm gonna give color it's going to be something like green like that let's see okay perfect but if i give here background color for example let's say red or this purple as you can see it's not centered we have to center this item that because when we give animation this space can be a problem so only thing i should do is come here and see display flags and align item center like that as you can see it's centered perfect let's delete here and make this bigger okay so how we are gonna use this wrapper as i said we are gonna give some animation let's do that wrapper and i will say height a hundred percent first so in this case it's gonna be 50 pixels also and after that i will say animation and move and it's going to be 10 seconds and i'm gonna write here timing function it's going to be is in out and our animation is going to take forever so i will say infinite and finally alternate i'm not gonna explain everything here in the animation if you want to learn more about animation i will have some course you can check it in the description below you can find everything about animations transitions transforms after that course you will be able to create every animation and every transition okay we have an animation but how we are gonna move this let's write here keyframes and here we are gonna write our animation name which is mu here okay right now i'm gonna write percentages here so we have four items after the first one we are not counting this because at the beginning we are gonna see that basically we are gonna have four items so it means we are gonna use 25 percent 50 75 percent and a hundred percent for each items we are going to indicate here our percentages inside how i'm gonna move this div it's really easy i'm gonna use transform and translate why that because it's gonna move on y-axis so i go right here minus 50 pixels i will do the same thing for others oops we don't need this second column okay in the first step we are gonna move just 50 pixels and second will be 100 pixels 150 and finally 200. let's see i hope everything is okay as you can see it's moving like that for every two seconds we see only one item perfect after this title let's create a description our title is here i'm gonna say i and description and inside i'm gonna write some text like that and let's see so how i'm gonna center this item and give some space between these items i'm gonna center this left side first i'll say display flex align item center just y content center as you can see they are centered and for this wrapper if i say height 50 percent for example and let's give some background and we can see better so i can give some space between these items to do that again i'm gonna use display flex but this time it's gonna be flex direction column because they are gonna be in the same column and after that i will say justify content and space between like that as you can see there is a space between each item okay let's rate this color it looks really nice and what about this right side i will showing this again and inside my second component which is right side i'm gonna create an image image and i image right now i'm gonna use image folder remember we have an handsome guy here we are gonna be using this image to do that we should import this image first so i will come here and say import let's say man or me and it's going to be from i'm going to take this image folder and me dot png so we can use this image right now i will come here and instead of codes i will open curly brackets and inside me let's see okay it's here perfect it's really big we are gonna change sizes so i can use this class name and here i will say with a hundred percent height a hundred percent and object fit it's gonna be core oops like that but it looks really naked maybe we can add here a shape so i'm gonna create new do here it's gonna be i am bg so let's do something creative so if you search for clip path generator and click on the first page here you are gonna see this page basically it allows us to create any shape using css as you can see triangle pentagon a star a circle so in our case i'm gonna use something like that but i don't want this space so i can move this around here and finally i'm gonna use this clip path you are gonna see how easy to use it i will open my css file here and i'm going to say i am bg and inside i'm going to paste this clip path and background color again i'm going to use my green color here and let's see if i save this and check we are not going to see anything that because we don't have any size so i will save it a hundred percent and height 100 percent and it's here as you can see also but it moves our image here to prevent this we are going to be using position absolute and we should give some starting point and it's going to start from here at the beginning top and left sorry right so i will say top zero and write zero but there is an important thing if we are using position absolute the parent should be position relative in this case our parent is i n right let's come here and say position relative but before doing this let's check if you wanna as you can see okay it starts from here but it contains all our component here that because we didn't write your position relative perfect but there is a problem we can see our image to prevent this we can write here position absolute also like that also it looks really nice so what else i can add here i can add an icon here scroll button but if i use an image directly when we create a dark mode it's not possible to change this image color so what i'm going to do is using svg instead of image so after description by the way it can be p tag it can be just paragraph and after this div this wrapper i'm gonna paste my svg as you can see there is a button here so i can change its position to do that i will give class name here class name and it's going to be i and screw let's change it i will come here and maybe before this image and background that because it belongs left side okay firstly i'm going to change width and height it's going to be 30 pixels and i'm gonna say position absolute and i should provide here a position so it's gonna be bottom 20 pixels okay right now it's here so why we are using this svg that because we can change its color if i write here red for example as you can see yellow it's really easy to change its color we can write here a condition if it's dark mode change the stroke to white if it's not it can stay as black it's that easy okay awesome we finished our first component let's take care of other one so i closed everything and i'm gonna create another component here i will say about and inside jsx and css file about css let's create our function and i'm gonna write here something and class name will be about or just a and after that to see this component i'm gonna write it in fgs so i'll see about i will import and that's all let's see okay it's here so what i'm gonna do is making this component a hundred percent first so i will say a and height will be 100vh of course to use that i should import this css file first but let's deplete this css file here and i'm going to import this here import about css let's see okay perfect 100bh and i will do the same thing again i will split this component is going to be left and right side so let's say a left and right let's make this display flex first and i will center everything inside this flexbox and after that a left flex will be one and for the right side and after that inside left side i'm going to create an image but before let's create a wrapper i will say a and cards and i'm going to create one more card but this time it's gonna include an image i will say a dot image i just found an image on pixels so i'm gonna just paste it here like that let's see okay it's really big so why i created two cards that because first one will be our background card kinda shadow of this image and second one will be just our image so let's write them here i will say a and cards let's give some beat and height it's going to be 60 percent and height will be 70 vh and i will give some border radius 30 pixels and let's take care of this image it's really big right now so i will say with a hundred percent height a hundred percent and objective will be cover like that but how i'm gonna center this image here display flags align item center and justify content center okay they are centered that because our other card is here what i'm gonna do is making it position absolute so i will say a card and bg it's going to be position absolute and i should indicate here it's position it's going to be top 50 and left 50. of course let's give some background color and we can see better let's say this dark color and again if you are using position absolute the parents should be position relative like that but as you can see we set top 50 pixels but it starts from here it should be somewhere here that because we don't have any height for this left side if i say background color and red for example as you can see it's not a hundred percent i will say height a hundred percent and right now this card is here perfect let's delete this and how i'm gonna move this image to front sight here we did this before remember if i come here and say position absolute or position relative we are gonna able to see our image like that perfect it looks really nice but we can see our border radius here if i say overflow of hidden it's not gonna overflow perfect so what about this right side let's create some title subtitle and description actually i will just copy and paste there is nothing new so i will shrink this a little bit and inside right side i'm gonna paste as you can see we have title h1 tag ptex subtitle and ptag description let's see like that we are gonna take care of their styles but before i'm gonna create another div here it's gonna include an image and its title and description so after this p tag i will say a and award it's going to input an image which is a our image and let's use our image inside this folder which is this one remember how we are importing i will say import awards from this image folder and our dot png oops png let's use it like that let's give some size with 120 it will be the same and border radius maybe 20 pixels like that so let's create our title and description here to do that i'm going to create another div that because we are going to separate this image and those texts so i will say a a words and texts so i'm gonna copy and paste them i don't wanna waste time as you can see h4 tag title and p tag description let's see okay as you can see they are not in the same row it's really easy to handle that only thing i should do is writing display flags for this component for this thing so let's start with this title first i will say font weight 400 and subtitle i will give some margin between this title and this other description remember it's here so i will say margin 20 pixels and zero pixel it's from top and bottom it's from left and right and for description front feet let's say 300 like that so let's make this over the display flex and maybe some margin here so i will say a award and it's going to be margin top maybe 50 pixels display flex align item center and justify content i'll say space between okay but it's really long this text div so let's change its size so i will say a and our texts it will be 78 maybe it's gonna be like that let's change this title and we are going to end this page a awards and title part wait will be bold and maybe let's change color it's going to be a little bit softer like gray and i will give margin bottom yes it looks really nice so we finished this component also after the end of the tutorial we are going to add dark mode and light mode and we are going to change for example this heart color and those text colors but for now it's totally enough let's create another component basically we are gonna have some title and our product list and we are gonna show our product cards so let's close them and create two more components first one will be product let's say list i'm gonna create jsx file product list dot and css and i'm gonna copy this folder and paste again but this time it's gonna be just product card or just product doesn't matter let's change them also product product okay so let's create function and let's write here just cart we are gonna take care of this later before maybe we can import our css because i'm gonna probably forget so i will say product dot css okay i can close here and i'm gonna split this css file here and i can close my navigation okay let's create our function here also and class name will be maybe product list something like that and again css file import product list dot css let's use it inside our app.js after about i will say product list okay so what i'm gonna do firstly we are gonna have title and description and after our list so basically i can create a div here first product list and texts and insights i'm going to create an h1 tag and ptek like that pl title and pl description and after that after this do i'm going to create another view and it's going to be our list so i will say pl and list so if i call my products here for example product okay we can import let's write here import products from product and product so i will duplicate these products and let's see what we have as you can see title description and so firstly let's take care of main container which is pl so i will say product list i'm gonna give some padding let's say 50 pixels and 100 pixels from top and bottom 50 left and right 100 like that and i will make them display flags full extraction will be column they are going to be vertical why i'm doing this because i want to just center them align item center oops not start center and and text the line will be center also like that but it looks really long i didn't like it maybe i can shrink this component textview so i will save it 65 percent okay it's better i think so what about this title font size 50 pixels and font weight will be 600 i can give some margin here for this description margin 20 pixels and from left and right zero pixel okay awesome so let's make this list the display flex our list here so i'm gonna say display flex but if i do this all items will be in the same row even if i give some sizes for those cards let's open our product here and i'm gonna give some class name it's gonna be just p and i'm gonna open product css and p will be 300 for now we are gonna change it as you can see it's overflowing that's because we said display flex to prevent this there is an have some property so i will come here and say flex wrap is going to be wrap and as you can see if they don't fit in this container it just separates them it creates another row perfect so i can give space between those items justify content and space between they are going to be centered like that so we finished this list let's take care of our products i will close them and open up products and here it's going to be css let's close here okay so let's write here 30 percent for example of course we are gonna change all those sizes later for the responsive design let's see okay they look really small that because we didn't give any wheat for our product list let's open up product css again and for this list i will say with a hundred percent okay i can close and i will give some height 100 vh and let's give some margin it's gonna be 20 pixels and 10 pixels i can give some border and we can see it better i will say 2 pixels solid and i'm going to paste here an rgb quote like that let's see okay so i'm gonna give some border radius but for only this side top left and top right both sides will be the same we are not gonna change them to do that i will say border radius and 10 pixels left and top 10 pixels left and right 0 from bottom right and 0 4 bottom left like that as you can see we change only right and left side on the top so i will say overflow hidden that because we are going to add image and i don't wanna see any overflowing so i will say overflow hidden right now what i'm gonna do is adding an image but before let's make it a little bit fancier and make something creative basically i'm gonna create here another div and i'm gonna fill inside and add some circles here and basically it's gonna look like a browser let's do that i'll say pm browser and inside three circles p circle and three of them let's save and i will come here and give some style for them i will say hi 20 pixels and background color will be this same color like that and i will say display flex and align item center basically we are going to center those circles here let's create them first p circle i will say width 6 height 6 and background color will be white and of course border radius will be 50 percent let's see okay they are too close so i can say maybe margin three like that let's create one more card here by the way product list i will replicate this and that's all okay it looks really nice and let's add our images but firstly i'm gonna create an anchor tag that because when we click any images we are gonna visit another website we are gonna see our project so i will say after this do a tag and let's say http llama.dev and inside this anchor tag i'm going to create my image image and let's say p and image by the way if i click this image number.tab is gonna open here in this tab to prevent this you can write here targets and it's gonna be underscore black if you do this it's gonna warn you that because you can't use this without this key let's copy this and paste here okay right now when i click my image this website is going to open in new tab okay awesome so let's create some image but if i copy and paste all those products will be the same let's create a data file here inside source i'm going to say data.js i'm going to paste my data like that as you can see each product has id image and link you can change them for example you can show your product your web project for example so basically we are gonna use this products so i will come here and open up my list and i'm gonna import this file import products list from data remember it's an array right now we don't have to do that we can just leave one of them and we can map through this array so i'll say map and for each item just call this component products i will save and as you can see it's still six and also i can pass my props here for example image is gonna be item dot image because remember in data we have image link and id by the way we are going to use those ids here i will say key is going to be item dot id if you are using map inside react application you have to provide here an id unique id that's why we are using id and after that we can pass our link also link will be item dot link like that okay i can use them right now i will write here my props it's gonna be image and link and we are able to use them right now and i will come here and say image and i can use this link here instead of writing manually so i will say link okay let's give some style for our image and we are going to check after i will say with a hundred percent and as you can see they are here by the way i'm not going to share them to prevent any copyright issue so i'm gonna do so let's make it fancier when i hover this image we are gonna add some animation and we are gonna move this image on y-axis that because let me move this image as you can see it's a really long image we can give animation inside this browser inside this card so let's do that i will say transition and for all i will say 10 seconds and function will be easy so then i'm gonna run this animation when i hover over so i will say p and hover and it's gonna affect our p dot image when i hover over this card we are gonna give animation for this image so let's say transform and translate x sorry y and it's gonna be minus a hundred percent it's gonna move to top let's see oops something wrong okay it's dash here as you can see i have some but there is a problem here that we can see our browser this top so what i'm gonna do is coming here for the browser and position let's say sticky and i'm going to give some set index it's going to be 2 and as you can see it's always there by the way if you don't know how to create image like that i mean full screen image there is an add some extension chrome extension which is called full page if you install this extension and if you click as you can see it's gonna create full screen screenshot and you can just download this as png or any other file extension and you can use them here instead of these images okay we finished our list also and when i click them it's opening la mado so let's take care of our contact page so i'm gonna close them and create one more component it's gonna be contact contact jsx and css i will open here and i'm going to create function ref c e and it's going to be contacts let's add this in app.js it's going to be contacts from components and that's all let's give class name it's going to be c and i'm going to write it here okay let's see first okay it's here and it's gonna be again 100 vh and i will import here contact css okay let's see firstly what i'm gonna do is creating a background div it's gonna be 100 vh and width will be around 20 pixels 30 pixels if you want to you can create something like this green do but i'm just gonna make a small one so i will say c and bg and i'm gonna write it here with let's say 20 it will be a hundred percent which is a hundred vh and background color i will copy and paste my main green color here and let's see okay something like that but i want to make it position absolute because we are going to split again our component and i don't want to distract other divs so i will say position absolute and here i will say position relative okay it's still here but when we create any div it's going to be under this d okay firstly let's create a proper and we are going to rub our left and right side i will say c wrapper and c and right let's do the same thing as we always do i will say see wrapper you don't have to create dropper but i just want to give some padding and after that display flex and see left flex one c right flex one so inside left let's create h1 tag and it's gonna be see title and i'm gonna paste my text here let me make this bigger and after that i'm gonna create information div and it's gonna include phone number email and address so let's say c info and one more div that because it's gonna include phone number text and also an icon so i will say c info and item oops i forgot div here and first the icon image let's say c icon and here i'm gonna call my icon import form it's gonna be image and font.png i will do the same thing for others it's gonna be email and address of course they are going to be lower case like that let's use it here first one will be phone and after this let's write some numbers like that let's see okay as you can see they are here so i'm gonna create two more divs here two more items and second one will be our email and address something like that so i can sharing here and take care of my divs and items firstly it's gonna be title firstly i'm going to give some bit for this title that because i will say font size 60 and it's going to be really big and if i say bit eight percent for example it's gonna look better like that so after that i will say c info and item i'm gonna make them display flex and i will center them of course to see better firstly let's make those icons a little bit smaller so c icon high 30 and i will give some margin right i will separate them okay nice let's give some margin for items from top and bottom 50 pixels from left and right is going to be zero maybe a front weight 300 like that but as you can see this address is long also so i will say maybe 70 percent so let's create some form here but before maybe some description so i will come here inside right view and i'm gonna create a description i will copy and paste like that as you can see see description and some text here like that i will change this font weight c and description it's going to be 200 it's going to be a little bit thinner like that so let's create our form after this p tag i will say just form we don't need any action for now and after that let's create our first input type will be text and i will give some placeholder let's separate and it's gonna be name and i'm gonna give name for this input it's going to be username it's really important that because we are going to send inputs to email.js and we are going to send this email to our email address by using this name you are going to understand better right now and let's create two more it's gonna be subject let's say user subject and it's gonna be user email and finally i'm gonna create a text area which we can send our matter so it's gonna be text area you can give any row here it's going to be five let's see as you can see two three four five rows and placeholder let's say message and name will be message and finally i can create my button and i will say submit when we click this button we are going to send all those information to our email let's come here and take care of our form firstly i'm going to give some margin here margin top 20 pixels and for each input i'm going to give some bit 50 percent like that and height 50 pixels is going to be bigger like that and i will delete those borders and i'm gonna give just border bottom on pixel solid and black like that it's better i think so let's give some margin between them margin 10 pixels and zero pixel and font size i can give some padding here for those placeholders padding left and 10 pixels okay so what about this text area i will say text area and it will be a hundred percent it's going to be bigger like that i will give margin and font size actually i can just copy here and paste here like that by the way i can center this div this right side so i will come here and say display flex align item center just by content center of course flex direction should be column like that okay perfect so let's change this button button i will delete this border none and i will give some padding background color will be my green color let's change text color is going to be white and font weight will be 500 and finally cursor pointer that we can show our cursor like that have some so how we are gonna take our inputs we are gonna use use ref hook if you use reference for this form we will be able to reach all these data let's do that if i write here you will understand better i will say const let's say form ref and it's going to be use ref hook as you can see it comes from react and after that i can use this graph here i will say rev and form ref so how we are gonna send this data to do that i'm gonna create here on submit event it's gonna run whenever we click this button and let's create a function i will say handle submit we don't have yet let's create i will say const handle submit is gonna be event firstly i will write here event and prevent default if you don't do that let's see when i submit it's gonna refresh the page to prevent this we are using this function i will save and let's see again i'm clicking and as you can see it's still here it's not refreshing page let's delete here so what we are gonna do when we submit our data to send your data to your email address you have to create a back-end server or use any email server provider so what we are going to do is using email.js it's really easy to use if you sign up you are gonna see this page and after you can add new service and you can connect your email address for example i did before and it's my gmail account i'm gonna be using lamadev test account and it's totally free it's just limited by 500 emails per day but it's totally in a fighting it's just a portfolio page and after that you can come here and create your email template as you can see i did before when someone sent us email email.js is going to send this mail template to us basically subject will be usage subject which we are using here remember that's why we are using those names user name user subject user email and message we can use those informations in the email js for example subject will be user subject and it's gonna send new message from user and name and it's gonna write this message and finally it's gonna write user email of course you can change here you can write whatever you want so this service id and template id is important so how we are gonna use it if you search again as you can see there is a react documentation and it uses userf also as you can see its form is here we have already done all of those so after that we are gonna import this function and send our mail like that firstly let's install this library i'm going to open new terminal and i will say npm install or yarn at and this library and i can copy this and i'm gonna paste here and finally copy here and after that we are gonna use those ids let's paste okay as you can see we need our service id first it's here i will copy this and paste here and template id and it's going to be our form ref and finally our user id i will click integration and here this is my id let's paste here by the way it's wrong template id is gonna be this one and let's try i'm gonna open my gmail account and as you can see it's empty right now and i'm gonna try to send an email let's write here something i will say john doe and subject will be test joan gmail.com and hello it's a test i will send and check my email i will refresh and as you can see it's here new message from john doe hello it's a test and mail address is this address have some it works and what else you can do you can create a use state here and say don and set done and we are going to be using your statehook and at the beginning is going to be false and after successful we are going to set this to true and i can use this here after button i can say if done is true write here something let's say maybe thank you message i will try again something and after submit it's gonna say thank you of course you can change this css so we finished our page let's take care of dark mode so i'm gonna create our last component let's close here and finally it's gonna be toggle toggle jsx and css file and i'm going to create this function quickly and class name will be just t and import css file by the way in app.js i can import this somewhere here toggle it can be anywhere doesn't matter that because position will be fixed and we are gonna see it on the top all the time okay let's separate them and what i'm gonna do firstly we are gonna have two images let's say t icon and first one will be sun and second one will be moon so i will say import sun from image folder and sound.png and second one will be moon.png let's write it here it's gonna be sun and moon okay they are here so finally we are gonna have a button that we can click and change our team it's gonna be light or dark mode so i will say tm button okay let's create them firstly main container it's going to be width let's say 50 and height 25 and i will give some border radius 20 pixels and maybe border one pixel solid and let's say gray something like that and background color is gonna be white let's change this images first t icon and with 15 and height 15. okay something like that so how i'm gonna fix this container it's going to be position fixed and i shot right here it's position it's going to be top 10 and right down so it's going to be always here but as you can see it's not here if i write here set index 999 it's gonna be like that let's enter those items display flex align item center and maybe justify content space around okay what about our button let's write here t button and it will be 25 height will be 25 and for the radius 50 and background color again our gray color 999 let's see as you can see it's here so if i say position absolute and cursor pointer let's see as you can see it's in the middle of the container if i write here left 0 for example it's going to be here if i write right 0 it's going to be here we are going to change it so we can do this we can write here a condition we can say style and if it's dark mode make the left 0 if it's light mode make the right 0 or left 25 it's the same that because its width is 25 pixels and total width is 50 pixels if i say here left 25 it's gonna be the same thing it's gonna be right zero okay we are gonna add this condition but before let's create our context api we are gonna be using context api that because we are gonna use this dark mode or light mode in every component we are going to need them everywhere so if you don't want to use context api you can come here and create use state you can say dark mode but in this case you should come here and send this use state as props for example let me do that const dark and set dark is going to be use state and at the beginning is gonna be false so how we are gonna change this dark mode in this case i should send this as prop to use this dark mode everywhere you should come here and say dark and dark and here also and here and here basically you should write them in every component here for this project it's not a big problem but imagine you have a bigger website you have more than five components here it's gonna be really big problem so it's no sense to do it like that the best option is using context api let's delete them and i'm going to create my context file let's close here and components inside source i will say context js firstly i'm going to create my team context so i will say export const and team context it's gonna be create context from react and after that i'm gonna provide my initial state let's say initial state and at the beginning start mode and it's gonna be false okay at the beginning it's false but how we are gonna change it to do that we should create a reducer i will say const team reducer for example and i'm gonna write here my state and action by the way i'm passing here quickly but if you want to learn more about context api you can watch my social media application tutorial of course you don't have to watch all videos but you can find the context api section it's around 5 or 10 minutes you can watch there basically we are gonna write here our action and according to this action we are gonna switch dark mode so i will write here switch and action type action and type and i'm gonna write here my case i will say if it's toggle oops not column here if it's toggle we are going to return neeve state and it's going to be dark mode and if it's false it's going to be true if it's true it's gonna be false so basically i can write state dot dark mode and we don't have any other action type we are just gonna toggle so i can just write here default and and my cases it's going to be just return state okay don't be confused you are going to understand everything better and finally we are going to create our team provider and export our items i will say export const and team provider it's gonna take all props right now we should use our reducer to do that we are gonna use use reducer hook use reducer as you can see it's gonna be our reducer which is team reducer and our initial state will be here and we don't need that okay of course i should import this first from react okay so finally i can return my provider tag to do that i will just write here team provider and here will be props and children i'm gonna explain this now just wait and finally we are gonna export our values let's say value and it's gonna be state and dispatch so basically we will be able to use this state which is dark mode here and we will be able to use our dispatch which comes from use reducer so what's this props children how we are going to use those state and dispatch if you come here open your app chess and if you say team provider and if you cover only for example these two items it means you can use dark mode in only about and product list components if you move this here you can use this everywhere in every component so basically there are props and children but i prefer doing this in index.js not here i will delete here and this one and i'm going to open index.js and cover my entire application team provider and like that that's all that's because if you cover your components here it means you cannot use dark mode inside app.js but we are gonna need it that because we are gonna change our background color let's say style and background color let's say red for example okay something is wrong let's see team provider okay we call our app and context team provider ah it's gonna be team context dot provider that because we should use our context and provider method let's see again okay as you can see it's red and also we can use font color i will say white as you can see we can't change any properties here so how we are gonna use our state here to use this we are gonna use use context hook now we are gonna do this let's say const theme and i'll say use context as you can see it comes from react also and here which context we are gonna use we have only one which is team context it comes from our context file here team context and after that we will be able to reach this state and we can take dark mode here how we are gonna do this i will say cons dark mode and it's gonna be team dot state and dark mode that's all because remember we can reach this data and essentially it's our initial state and inside our initial state we have dark mode okay right now i can use this value and create a condition here i will say if it's dark mode make the background color 2 2 2 which is soft black if it's not make it white so i can do the same thing here for the font color i will say if it's dark mode make the font color white let's see okay there is something wrong we couldn't export them i think let's open up again i forgot here writing object it's gonna be like that let's see again i hope everything is okay right now okay perfect as you can see it's like at the beginning nothing has changed but if i come here and say dark mode true as you can see the background is black and texts are white i have some so how we are gonna toggle this information it's really easy we are gonna use this patch right now let's close here and open up toggle and i will do the same thing i will say const team and use context it's gonna be team context and right now what we have remember we have team dot state which includes dark modes and team dot dispatch so we are gonna use this patch and we are gonna dispatch toggle action to do that i'm gonna write here on click event for this button and click it's going to be handle click let's create this function const handle click and here we can dispatch our action team.dispatch and i'm gonna write here action type and it's gonna be toggle because remember it's our action action.type and in this case we are gonna run this function and it's gonna return us the opposite of the dark mode so let's try i will come here and i will click and as you can see it's the light mode again awesome it works but it stays here as you can see let's fix it again i can use team.state.dark mode here and i'm going to create new style and i will say left if team dot state dot dark mode it's gonna be zero if it's not it's gonna be 25 pixels as you can see it's the light mode i will click and it's going to be dark mode also so you can use this dark mode everywhere for example you can change this card color any font colors whatever you want it depends on you and as i said if you don't want to use context api just create here use state and send your props set dark modes here and dark mode for other components okay we almost finished our application by the way those inputs look a little bit strange let's change them i will just copy here for contact page contact component i'm gonna paste here of course i should import them first and team context okay and for inputs and text area let's choose them and i will say style and i'm gonna say background color and if it's dark mods it's gonna be three three three like that it looks better right now i'm gonna do the same thing for text area let's copy and paste okay i think it's much better right now let's take care of our responsive design so let's open intro css and start our responsive design to create a responsive design we are gonna be using media query how we are gonna do that i will come here and i'm gonna use media key and we are gonna arrange classes according to our screen and we can write here our condition and it's gonna be max width 480 pixels this is mobile device breakpoint when you open your application on your phone you're gonna see this media query so what we are gonna do open another introduces here and we can follow quickly as you remember our container is display flex but this time we are gonna change it so i will write here i and this time flex direction will be called i will open my console and if you click this button here you are gonna see the mobile version of the application you can choose here any phone and any size it really doesn't matter as you can see flex direction is column but something is wrong here it's overflowing because of our contact page as you can see this text area so i will do the same thing there and after we are gonna keep doing our intro page so i will copy here and i'm going to open contact css and at the ending i will say c and flex direction call let me check first okay it's not c it's c and wrapper let's see again okay perfect it's not overflowing anymore we can continue doing intro page let's close here and what else we are going to do we can reduce this padding for left wrapper so i will paste here and i'm going to say padding 10 pixels and i can center everything here but these texts are not centered so let's say text align center okay like that maybe i can center vertically also justify content center like that okay we can't see the animation by the way that because our height is 50 here so if i say a hundred percent we are gonna see this animation so what else i can do i can delete this description maybe i'll say display none and like that it looks really nice so what about this page let's open i'll say about i can close here like that and again i'm gonna do same thing media screen and my condition here and max width it's gonna be 480 pixels so i'm going to write here main container and again full x direction it's going to be column and takes the line again center let's see okay like that maybe margin here margin top 50 pixels and after let's take care of a and left which contains our image what i'm gonna do is changing width of this left side let's say a hundred percent and i'm gonna delete this shadow card and i'm gonna change this image card size so firstly a card and height will be 30vh and for pg card and bg it's going to be display note let's see okay like that so i can add padding here and maybe i can delete this section it's going to be really small so i will say a and write padding20 and i'm gonna delete this div so i can write it here of course space and comma let's see okay it looks really nice only image and description i have so so what about here it looks really strange let's open up product list css and i'll close here and open again okay let's write here media query quickly actually i can copy this and paste for product css and contact css but we already have there okay so i'm gonna say dot pl and i'm gonna reduce the padding it's gonna be just 10 pixels but they look still small that's because there is a size for this title let's check as you can see for this div there is a width let's take care of this it's going to be a hundred percent like that if you want to you can delete this description if you want you can just leave as you wish but i will delete it's going to be display no i want to see this more minimal so what about our cards product css and here i'm going to change size of the main container which is p here and i will say with 40 percent and height 20 vh like that it looks really nice right now and only thing we have and it's contact page let's open contact css i can close them and here and i'm gonna simply take it okay for this dropper as you can see we have padding 50 pixels but i'm gonna change it for top and bottom it's gonna be zero pixels like because we already have here okay after that i will say see title and font size is really big remember here it's gonna be 30 pixels font size okay perfect i can reduce this margin for the items c in for an item and i will say margin 20 pixels and 0 pixel okay right now they are closer and if i save it a hundred percent as you can see this address is longer right now and it looks better i can delete this description it looks weird don't forget if you are using mobile phone i recommend you to delete long texts you should put their only important things which user can use immediately so i can say see description and it's gonna be display not okay right now it's more minimal so what about this form it looks pretty ugly i will say form and let's check here i will change this margin top it's going to be zero and after that i will say display flex and flex wrap is gonna be wrap okay nothing has changed that because input size is too big so they can't fit in the same row so what i'm going to do is reducing this size let's say with 35 percent and i will say height 40 pixels let's see as you can see it's smaller right now and this subject is here but i can give some margin they are really close like that but right now there is a margin here and it looks a little bit strange so i will say margin left zero okay perfect maybe for this button margin top 10. it looks really nice we finished our project everything looks good by the way if you want to create more breakpoint for mobile devices it's going to be 480 and for tablets you can use 700 and you can arrange your css i'm not gonna do for every sequence size i don't want to waste your time and after that for laptops and small screens you can use 1200s and something like that so we finished our project but we can see it only on localhost how we are gonna deploy this application if you go to hostinger dashboard and choose your hosting account you are gonna see your all settings here and in the website section i'm gonna click on import website and as you can see we can upload our files but make sure that you compress your build folder so let's open up vscode again so right now what i'm gonna do is building my application for the deployment so i can close them and here firstly i'm gonna open package.json and here i'm gonna write my home page and it's gonna be the domain which we claimed on hostinger so i will say http llama web dev and com okay right now i will come here and say npm run and build after that our build folder will be ready here and we are just gonna take that build folder and import inside our hosting ok let's do that i will enter it's going to be ready soon ok it's ready it's here we are going to send this folder but before you should compress this file first it's here only thing i should do is sending that folder let's do that i will say choose a file my portfolio project i'm gonna choose this folder and i'm gonna say import so it's gonna take a minute during this process you can go to ssl section and here you can activate your ssl basically it allows us to use https request for browsers like that after this ssl certification our connection will be secure so let's set up i will say install ssl and it's installing i'm gonna wait for the activation and after we are gonna see our website and it's ready guys as you can see lemonweb.com and our certificate is ready connection is secure and this is our application and our portfolio everything works perfectly i'm gonna toggle dark mode and have some so we finished this project i hope you liked it if you learned something new today please like the video and subscribe to the channel and you can support lamadev by using the join button or the link in the description below and don't forget to follow lamadev's social media accounts and that's all i hope i will see you in the next tutorial goodbye [Music]

Channel: Lama Dev

Views: 259,779

Keywords: react, react js, react project, react course, react app, react website, react hooks, responsive react, web design, responsive, portfolio, personal website, react site, react animation, react portfolio, react portfolio website, react ui, portfolio website, react css, portfolio page, portfolio html css, personal portfolio, portfolio contact page, deploy hosting, react deploy

Id: hQjlM-8C4Ps

Length: 99min 53sec (5993 seconds)

Published: Fri Oct 08 2021