Transcript for:
Personal Portfolio Website in React with Animations

building personal portfolio website in react with animations and different sections so i'm just gonna reload the page so you guys can see the starting animations at the top we have this header with some links to navigation and about section going forward we are showcasing our skills and as we have i'm sure all of us have lots of skills that don't only fit in these three component container that's why we have slider here and we can add as many skills as we want next on there's a list of projects and we have a different tabs here and the tab switch in each of these tabs we can place any content as for the projects on the hover we do get more information on each project then we have contact as a callout where users can fill out their information this form i do have connected to the mail server so once the users fill out the information it does get sent to your email and of course we have a subscribe to the newsletter so you can build your audience and mailing list and at the end we have these links to once again call out to our socials as for the navigation this is as you can see one page website since it's like a long page as to say to navigate in between sections we can use this like the top navigation so yeah that's it hope you guys enjoy the tutorial and let's get started so i just use create react app command as you can see on the screen to create the project and i'm gonna name this personal portfolio and then once it's created we're gonna sit into it and start the application by npm start as for the styling i did use uh react bootstrap library so next thing we'll be doing will be installing the library as well let's try packages and then we can run npm start going into the code itself i'm on the app.js like the main js file i'm going to start off by removing all this extra code and the first component that we'll be building would be the navigation bar at the top so for navigation bar as i mentioned i'm using bootstrap as my component library so i'm gonna use their navigation bar just modified so going into source um i usually create new folder here name it components and this is where i'll also be placing our navigation bar so naming it nutbar.js creating functional component for now with no parameters and pasting in the bootstrap code at the top also when we are using bootstrap components we need to import them so let's see what we need here we need navbar from bootstrap we also need container and i think that's it okay let's take a look at what we have here this is just for the color we don't want the light one we're just gonna give it our own color so removing this href we can leave that at home as for the brand we can either have a name or we can have image here which i'll be placing logo here so image source i'm gonna import the image into the project so i'm gonna leave the source empty for now since i don't have it imported yet alt would be a logo and closing this one out so for toggle this is when image is on let's see this is this image is on on the mobile menu when uh image is minimized so for this one i'm just gonna add our own an icon updating this so creating spam giving class name for the collapse id this one looks good class name let's update the link so drop down we don't need a drop down menu for now we're just gonna update the links here so if you remember we had uh three links it was home and then it was skills and the third one was projects so adding that and then towards the other side at the end we also had like the social call out so i'm just gonna add that here social icon would be the name of the conti container and adding the links here [Music] i'll leave it uh empty link but obviously you can add the links to your um social source i'm also going to import the icons for this at the top and also if you need icons i'm adding the github url in the description so feel free to grab them or update them as you like so let's copy this three times because we have three links and then at the end we had this button that would take us to the contact us form so adding that button as well i'm gonna give it a class name for the styling for now on click i would be just it will console.log and then we'll add later on the functionality to actually uh take us to the contactless form and let's add a span element inside that says let's connect as for the managing like which link we are on at the moment let's create like a class that would hold that information so i'm gonna import you state hook at the top react and then create just active link class i mean the state and initially this would be set at home because that's what we have at the top in the beginning so next thing that we need is our navigation at the in the beginning when the page is loaded it was transparent if you recall and then towards when we start scrolling other sections we have in black and then in the beginning we have kind of like a background is like this cosmic image so that's why we need to detect when user scrolls and change the color of the background so to keep the information whether or not user has scrolled let's create another class name it scrolled and also the initial state would be false of course and then we'll create a use effect that would determine if it's scrolled or not and this use effect would be triggered once a scroll starts so let's have his effect and we want this to be fired on mount and let's create a function that will determine what happens on scroll so let's measure if window dot scroll y position so the height of how much has been scrolled it's more than 50 50 would be around the amount of our like banner that we have we're gonna set scrolls to true but if user has scrolled back or hasn't scrolled like 50 pixels yet then we're gonna set scroll to false and since this is just a function we want to add window at event listener which would be fired only on scroll and then pass this function that determines what happens on scroll since we are adding event listener on mount we also have to remove it when the component gets removed from the dome so this is what i'm doing right now window remove event listener and on the same event and the same function okay so now that we have scrolled we can go in the nav bar which is here and have class name based on what condition the scroll y is at so scrolled let's roll let's just give it name scroll if it's not then we'll leave it as it is also what we need is based on which link is active we're gonna highlight uh the link at the top so in here class name equals so if active link equals to that specific link we're gonna give it like active class name so this would be for home for example then active bar link if it's not active then the name would just be navbar link and we'll do the same logic for all of them just changing their um like the names in the condition so this would be projects and we also want the stage to get updated when these links are actually pressed so let's pass on on click function and in here let's uh give it a name up on update active link and we're gonna declare this function at the top it will take in the name of the link this one would be home and we'll do the same for the rest of them so this one is skills and we have projects here also let's copy the name and declare it here after use effect so constant or update active link taking in the value and setting it as active link um yep empty source link so i already pasted all the images and logos that i'll be using throughout the project once again you can get this from my github project and in assets i have two folders one is for the fonts and another one is for the images if you do end up using the project on github please give it a star also if you want to see more full stack applications please subscribe to my channel and turn on notifications so you don't miss any of the projects okay so let's import this log so we need logo at the top and a navigation icon so import logo from and then just giving the path of the image and this is in the svg format also in the same way pasting in the navigation icons so and this would be 2 and this this one would be 3. and once we have import in the source we don't have to indicate the path anymore we can just use this as an object that we imported this would be three okay so replacing this with logo and replacing this ones with nav icon one okay now let's move on to styling of the page and navigation bar and then we can see what we have i'll be doing all of the styling in this app.css file so first at the top i am going to import the custom fonts that we have in the assets folder so custom fonts and then this can be done using font face so we give the font family name this one is centra and then we gave it give it a url so url going back to our ss folder assets font and then the name of the file so it's this one and font wait so this is bold so this would be 700 and we have so three of them so we'll repeat this for all three this is medium one so 500 and then last one would be just regular one and it's called book okay now let's do a little bit of set a default css that we would be using throughout the page and also on the whole like html and the body so it's a good practice to have all those like fonts and those kind of default css at the top so for the whole body um setting margin and padding to both zero and box sizing border box for the html only thing i would be modifying a scroll behavior i wanted to have smooth and adding scroll padding at the top about 75 pixels for the body let's set the font weight to normal 400 we don't want it to overflow on x which means horizontally position relative and let's set the background color i set this to like a dark color it's like a dark gray i believe and i'm adding important because sometimes what happens is that bootstrap styling overwrites our styling so some cases i have to set important same thing for the color let's set it to white this would be the color of the text and finally let's set font family so we don't have to separately set it for each component so sans serif and once again this is important now for the header so in total we have what um six headers so let's copy this one six and let's set margin and padding to zero and line height normal in the styling for navigation bar but let's go over it so just setting up padding position would be fixed because it is always like fixed and visible at the top with we want it to like stretch fully top zero because there's no anything left at the top of the screen in between that bar um the index then again we set it to high number because we want it always to be visible and transition easing is out this is for the animations so once i mentioned this is where we use the scroll class once it's scrolled further down the background color it sets to dark gray which is same as the rest of the page except the banner at the top where we have kind of like a galaxy background now for the brand this is just for the logo which would be nine percent um this is styling for the links nothing uh special just setting some of the like the weights and size to 18 pixel also default opacity would be like 0.75 unless it's hovered or the link is active then it would be like one so for the text uh we're gonna center it then we have styling for icons here setting the width and the height because this icons are like round so we want the same width and height for it setting also the background centering them and giving it like a small border this is like the icon link uh before styling and uh transform this is like when somebody hovers over we want the icon to show as a little bit bigger than it is this is the image itself the width would not be full it would be 40 percent um setting this brightness and other um how to say variables uh when it's hovered over as for the pattern this button is for the let's connect button that take us to the contact form and also same styling for this like the font weight color adding a little bit of like um border to indicate that it's a button because it's transparent um settings index also button like before styling so to make sure like nothing um covers it um what else we have here and this is the toggler icon when menu is like minimized the icon that we have and then if the toggler like if the is expanded we want this to rotate to 45 degrees and then if it's um closed it would rotate to the other side and that's it for the net bar styling let's see what we have now okay now let's add the navigation bar to fjs file so we can actually see it on the page um so this is where app.js is first of all i'm gonna rename the folder name it's not ss2 it's just assets and let's import navbar in here so the name of it from and then it's in components folder bar we're missing is we never imported map from react bootstrap so let's do that here real quick and also for the scroll we did create the state but we named it okay let's reduce oh i made a typo okay to actually add the bootstrap css file so we do get the styling okay now let's see what we have here this looks great we have home on hover we get this links highlighted as well as this little animations on the um social links and this slide on the connect button now let's actually work on the home banner okay for the banner i'm gonna add it in here before i create so that i don't forget later on and this just like any other component this would be created inside the components folder i know this is a little bit upside down um but at least it lets me focus on the task and finish it so banner js let's create export constant banner so we would start off with just adding some text a little bit of like structure to it and also the main image and then we would move on to that you know the typing animation and then when the text that gets deleted and kind of like gets rotated so when i say oh hello this is your name and then you can at least all your like your entrepreneur maybe or different backgrounds that you have so let's create a since this is like a section um use html section tag give it class name it would be banner and for id this is home then taking in container from bootstrap also inside container we usually have row and inside the row we do have a column for the row we want items to be centered so i'll give this class name align item center and bootstrap would take care of the styling and for column for extra small let's set it to full length this would be the section on the left first that contains all the text and we have two buttons one in the top one the bottom uh medium we're going to have it half of the length so six excel let's make it bigger seven so starting off with the tagline that's saying something like welcome to my portfolio presented to you by web decoded um h1 in here is where we're gonna put first our text and then our typing animation but first i'm just gonna dump the text and then this would be the inside the span the text would be rotating so class name wrap it doesn't matter what the text is and then here let's open a paragraph i'm just gonna paste in lauren ipsum but this were usually the about yourself closing and at the end a button where we have let's connect once again for on click i'm gonna fill it in its functionality after so i'm just gonna leave it at console.log for now and here we have let's connect and then we have a an icon after that um like an arrow icon for the icons i'm also gonna be using react bootstrap icons and install it installed at the top we're gonna import the icon that we'll be using this one is named arrow right circle okay and then also one import that we are missing is the column import that goes in here okay so continuing with our sections the next column is where we have the image this would also be about the same sizes except for the last one if this is seven this has to be 5 because it adds up to 12. and image source i'm just going to import that in a sec and alter alt text header image and this one yeah let's add it in here for this package we can also set the sizes in pixels i'm going to give it 25 and let's import our header that goes on the right so that would be had their image from and then the past so it's assets image and then csv and okay let's put it in the source here so now that we have the ui that we'll be working with in banner we can move on to typing animation for animation we need to store a different state and we also need to have a use effect hook to detect when like user not is an user when we have a typing or deleting animation so let's import use effect and use state from react and in here so first we need like a list of uh words that we would be displaying so i'm gonna name it to rotate and this would be my words that i would like it to be displayed then next on we need to have loop number that would be set initially to zero so this loop number would indicate like index as to which word is currently displayed on the screen so is it this one or the other one so use state will start from the first word obviously and then we have is the leading state which is either said true or false that means that is the word being typed out or being deleted on the other way around so initially this is set to false because we start by typing the word so this one current text this our like the component needs to know what text we're showing right now so text set text so this would only indicate like the portion of the word that is being displayed so starting off let's say we start with w then w e b and etc and the constant period this would kind of like arbitrarily indicate um how much time passes between one extra letter being typed out now we have use effect where we're gonna um run this function they'll be responsible for taking care of like typing or deleting so let's name this function ticker and then set interval so this would be the interval in between the text would get updated and for this one let's add another state so let's name it delta this would actually be a state so and we can also have this somewhat like random so math.random but it's not going to be like higher very far from like 300 and the way we would use this is so period would be amount of time between like each transition between each words and then we're gonna use delta to determine how fast uh one letter comes after the first one is typed and also one thing to note when some like the word would be getting deleted it would be getting delayed faster than typed out because that's the naturally when somebody is deleting it it goes faster so tick and then delta would be our interval when the tick is getting fired off once again we need to once we set the interval and component unmounts we need to clear it so i'm going to pass in the function in here to clear that interval and that contains the ticker and this use effect we want it to run every time the text gets updated okay and then let's actually define the tick function so constant tick equals so i would be the index as to like from the array we're currently peaking and the reason is that is loop number is constantly increasing so once we go over this the size of this is three loop number would be set four but we don't have fourth element so we want to go back to the first element here okay and then this would be to rotate length so basically like calculating the modulus and so the full text we need to keep also track of that so that would be to rotate and then i element and this is the future like the text to be updated what we will set to so if the current state is is deleting then we'll take the full text and get its um substring so one letter less than the current number of letters and then if it's not deleting then we do the other way around which is we add one letter to make the current text closer come closer to the full text and this is also where we update the states to our updated text and we have to determine if is um deleting as i mentioned the pace would be different so we're gonna update the delta and compared to previous delta we're gonna take that one and cut it into half and we also have to check if we finished typing out the words so if we're not deleting right now and also we got to the point where updated text equals to full text we need to set is deleting to true and also set delta back to its like normal pace um then we have another scenario where else oh sorry else if if it is deleting and we got to the point where the text became completely deleted so it's empty then we need to set is deleting to false also we need to update the loop number because we need to move on to the next um text right so look number plus one and set delta 500 okay so that would be all of our cases and going back here i just hard coded the text so let's update this and actually display what we have in terms of tag okay so let's see what we have here oh as you can see there's this um like typing animation i'm just gonna add the space in here okay and then this looks a little bit weird because we haven't added any styling yet but we're about to do that and let me just add a spacing here okay okay so the for the banner says is also pasted in here because it's like a lot of repetition and just like setting the same things and typing out this would like take a good portion of the video so but like let's quickly go over it so no margin at the top just setting some padding for the background image i used um this image and like positioned it make sure it's the cover this is for the tagline that comes above the uh about text it's like linear gradient kind of looks like a button just to make it look nice i set some of the colors for the gradient then we have h1 then we have p text uh this is the button for like the let's connect and styling afterwards of this svg that follows the button also a little bit of margin left because the arrow kind of moves towards the right so we add this margin and this is uh the keyframes this is for if you recall the image on the right is like bouncing up and down so that's what it basically does the wrap this is the typing text at the at the end we kind of want the same line as you can see when i'm like clicking on the text right so we created that line using the border right and that's it let's move on to now we have skill section for the skill section i do have a carousel and this is the package that i use for it so jumping it and paste it in here okay let's create a new component for the scale so just going to name it skills.js export constant skills and let's add into an fjs skills and it goes below we're actually following the order so every new component would be below the previous one and here in the skills as i mentioned we're using react multi cursor so i'm just going to paste some of the default stuff that they have here so at the top we need import statements and then they have this responsive like controls that you can obviously customize it but i'm just gonna use what they have default and only thing that i would update here no actually on the desktop i do want three items so i'll just leave it as it is and let's start building out the components or return this is a new section once again a class name would be skill and then id is skills and let's have a container as well as the row and the column so making sure that all these elements are being imported in the bootstrap sometimes vs code the extension that i have does it automatically sometimes it does not work and let's create a class for where we will store our skills so that would be skill box and let's give it a header once again and here i'll just put lauren if some text okay pasting that in here now we have the header description and let's create the carousel we need to pass in the responsive config that we just declared so responsive as for other settings i want infinite true so it could like go around come back and also give it a class name that would be [Music] skill slider and here we create each of the items i'm just gonna do a few of them class name would be item and each item has an image source i'm gonna import them at the top um of description image and then we had like a descript title of the project so header five went development and that would be that was all that item contained yeah let's copy this i have this four times so one two three four also let's just change names this can be brand and i'm gonna import the images at the top so we have meter one so that happens three times two and three and then one more image i'm gonna import is i have a little bit of like a gradient circle at the corner of this like the skill section so i'm gonna import that as well and put it in the class name so images and add that in the end class name so i can update the styling color sharp it doesn't have that much of styling so i'm just gonna type them out so let's comment it first that this is for skill section and so first goes the main container which was scale we're gonna adjust it headings it would only have on one side position would be relative then the next inside skill we have skill box we're gonna set like almost black background for this one so one five one five one five order reduce 64 pixels text align we want it to be in the center some padding and margin we wanted to push out at the top now for the scale title i think we actually used h5 okay so this would be h5 font size it's pretty big one and the weight would also be kind of like a bold and p that was for the like the paragraph description so it's almost white font size 18 pixels letter spacing line heights 150 1.5 ram margin now we got to the slider part and width would be eighty percent as you recall it was like um not full width and then it was centered so margin not this one margin would be zero auto and position relative for the images we're gonna do half width so with 50 pixels and then they would also be centered zero out to 15 pixel and lastly the gradient like a circle that i mentioned we're gonna style that this one would be like just position absolute because it's not really part of this container background image left so top 28 percent position of this one absolute like i mentioned so it would be positioned towards the bottom the width would be only 40 percent and then say index would set it to -4 so that it doesn't cover the actual main component okay so now let's see what we have uh first of all that is our animation here and going towards the scale we have oh my god those titles are actually huge okay i'm gonna make them smaller but um here we have our slider so let's yeah i don't think we need this oh this was one was for the actual title of the section not the yeah okay so this this is definitely better now we are gonna build the projects part okay once again creating new component projects.js and let's might as well add it into app.js so projects we obviously are going to have like a list of projects so what i'm going to do is at the top kind of create like a constant that's gonna hold information about the projects and we need three kinds of information this is title description and image or image url so let's create an array that will hold objects that um okay i pasted we don't need this extra line so it will hold the objects that contain this three variables and let's build out the component itself so starting off the section class name project same goes for the id once again we need container react bootstrap row and column and let's give it a header which would be projects once again in here we have lauren ipsum abs we're gonna use the react bootstrap tabs component we want they have different versions of it we want something more similar to this one and then we'll just like copy actually i'm just gonna copy this inside and then modify it so it goes after the navigation item oh and then this we can so we have three items we're gonna change instead of hrefs we're gonna give it event keys so event key first one is like just the first tab and this is second [Music] we don't want a disabled tab so let's modify this to third oops and also changing the names just saying like tab one [Music] tab two and tab three okay and then um we're gonna wrap this into tab container so id of this would be just projects tabs and we also set the default active key which would be the first one this is more like more customized tab than they offer because we want to be able to not only have text inside the content but place other contents for example like the projects cards in there uh so let's wrap this in type container and this is where we define the tab um content so starting off with the first pane so as in what would be displayed on the first tab and for each also we want to obviously map the buttons to panes right so first one would be event key first second one second and etc so event key first and so create row and then this is where we would place all the project cards so let's take the projects list like the constant like we created and then map it out so for each project and index let's just return project name product title first before we create uh the card and let's do other uh sections so tap that pane event second and the third one for this one's i'm just gonna put like just a contact text but yeah you can place whatever you'd like in here okay so now let's create uh project cards for this one i'm gonna create like a new component and then i'll use that to like map it out here so component new file project just card.js so the for the project card it actually takes seeing couple of components and i mean a couple of arguments and as you remember the project had three fields so we do need to use all the sort build so title description and image url so yeah let's create like a column that's where we're gonna place um this card and on the small one let's give it a six on medium size is four so we're gonna have on average three cards per row so now let's create a new class class name project image box and have the image at the top so it's not really at the top it kind of like covers the whole card and then we have the text on hover but that one we don't have to actually do it um in any specific order we can update this using css in any either way so header four let's use it to display title and just the regular uh span for the description okay and then here at the top to die oh i didn't import so we're using column here so we also need to import this from bootstrap okay so this should be fine and let's import that here so project cars from project card and instead of just title also when we're mapping um things out unless we indicate unique key we're gonna get a warning so let's say key equals index and then for the rest of the fields we can use like this um rest like the spreader and pass all the props like that also i have another gradient um at the on the other side so i'm just gonna add that image in here so this would be instead of background image right in this case and i have to also import the source at the top so the source would be color sharp let's just say number two so we don't mix it up assets image color sharp okay and then let's copy the name and paste it in here otherwise if we have empty source we're gonna get an error for projects i am also going to paste in the css here and i guess the only thing you should note in this css is that some of the things are basic like setting the font sizes and weights and as for the tabs i did create like um trans not transparent like for the active tab we have a gradient background so that is set in here and then for the first one we have a little bit of different styling for each tab that's what that's why we gave it like unique ids and for so yeah unique ids because the border is so the whole container contains like a rounded border so that's why we had to set this reduces on like different sites differently and i think yeah that's that's pretty much it for the text yeah we wanted it to be exactly centered over the image once it's visible so on however its opacity would be set to one um not on over it would be zero so it would be not be displayed so we have left contact form newsletter and footer and we're done okay so we have some errors i probably did not import something correctly so this is in projects.js files so i'll just go and see one of the imports that was missing was the row component from bootstrap so let's just add here and yeah for the images that i'm using we do need to import them as well and these are once again coming from images like the folders so assets image name is project image one i think there's three of the three of them so just going to copy this three times okay we should be good now if there's also the nav we need to add this at the top um anything else tab we do have tab row column okay should be good now okay so let's see yeah so we have the project section and then just the tabs here the hover on the project card itself only thing i'll add padding at in between like this too because it's looks like it's very crowded see in between the navigation item and tab content so yeah let's have a class name also default key is not home this is active actually we don't even we already have default active key defined here so we can remove this and give a class line navigation pills margin 5 and let's do also justify content it did already look centered but just in case and id would be pills tab okay so now moving on to our next section which is the contact form so let's create a new file and the component for this one so what we need here is we need to we're going to have a few fields in the form right and then we need to have a state to store this field so let's store them using the ustade hook and let's declare like the initial default state so that would be form initial details and this would list all the fields we're gonna have but they're gonna be just empty so first name let's do last name also the email phone number and the message and let's create a state that would store or all this details so form details set for details equals user state form initial details and then we're gonna also use this i guess initial details constant to reset the form later on and as for the submit button it would be initially set to send but when user presses send it would update to like sending so the user knows that once they took the action um the api call actually was triggered and the status would be once we make the api call afterwards whether or not we get error message or if our message has been sent successfully this is uh what i'm gonna use to update that but initially of course before user has sent anything it would just be an empty object so yeah let's start creating the form uh we still are going to wrap this in a section and give it its name contact also the id connect this we need to um have the id to navigate in between pages right not in between pages in between sections from the top header um and let's have a container also row and the column and we want everything centered so class name align item center additionally plus equal sign so for column medium we're just gonna set this to six and on the left if you recall we just had an image so image source would be let's import that now so it was contact image from and adding that sourcing here also alt text would be contact us okay now that we have image on the left right let's add another column which would be placed on the right and that would actually contain the form so this and setting header and creating form forming here so for every row we're gonna have one or two fields each starting off with first one we have like first name last name this one on this small let's make it six so for two once we have if we have two columns it's just gonna take the same space and let's also give like padding um so that would be first one second one [Music] and now the input so input type equals text for the value so this would be for details dot first name placeholder since we don't have labels on top i'm just going to use like placeholders and on change we want to update our state so event on form update so we're going to pass a category so first name like the field name and e target value so the value that user put in and i'm gonna declare this function so constant on firm update it contains category value and it updates the form detail state that we have so it leaves the rest of the details intact only updates the field that we have indicated in the arguments and value okay so let's close this out yeah we don't need anything else i'm also gonna move this so we have more space and same thing for the other one but only difference is that this would be last name okay so following like the same patterns for [Music] email and phone number only difference in those cases in addition to like the names of the values would be the type so we're gonna have email type and telephone your phone placeholder update and lastly we have a field this is a bigger one so i'm just gonna place it on the whole column this would be for the message so text area how many rows we set it to 6 value equals to form details dot message placeholder would also be message and same function on the unchanged and lastly we have the button that would be responsible for submitting all this like information so button we set the type here equals to submit and this the text inside it so this would be pattern text because as i mentioned um this is a variable because it gets updated from sound to sending back to send and um also in case we get an error or the message is sent successfully we need to display that but before user takes any action this would not be displayed so status message another column so paragraph class name based on what the status is so status that success this will we will set um to true if it's successful and then false if it's not successful so if it's false the class name would be danger and if not success for the styling of this i already did update uh in the defaults part in app.css and would also stat the status message so user knows what's going on um yeah after the way we close out the form we have the row so now we need to pass and create the submit function so let's say at the top of the form we're gonna have so let's create the function first constant handle submit and where is the form for here on submit and submit for now to actually be able to like send this information we need to use like a mail server the one that i used is node mailer and to set that up you need three packages so those three are course express and node mailers so just run npm install express course node mailer and so the way we would set this up is we're going to create a new file inside our project so let's just say here server.js and i'm going to paste some of the configurations from the node mailer package itself which i modified according to like my my configurations and what fields i'm using so let's go over the here at the so let's go over the file at the top we just you know declare use all this like modules that we just installed and we set up like a server and we have to it like listens to runs on port 5000 so if you go to your browser localhost 5000 it should be running there but we haven't started it yet so the way you can run is you can go in terminal to your project root and you can run npm server so that should run um this file and then depending on what service you have so i use gmail so i indicated gmail in here this is to like the set up a way to send this email you have to pass your username and then for the password depends on what again email carrier you're using for gmail it does not let you use your personal password because it will won't let you use your personal password if you have two factor authentication on because there's no way that you can verify so what you have to do is you go to your account security and then over there you'd have application password and you can create application password and use it in here and this is just when you're running just to verify if it's running and then as for the contact so the way we would send this data is that we would make a post request to our created like api url and then dash so on port 5000 slash contact and then this post request would take in the request and the body would have all these fields that we want to pass and we created in the form they would face it so from name this would combine the first name and the last name to this year once again your email so you would send to get sent to you subject could be anything you can modify and then for html same thing you might not need all this fields and then at the end we send back if it's an error reason back there if it's successful message um i send back this code of 200 which means the status is okay and the message has been sent so yeah let's save this go back to the contact form and submit so since we're making a request to api this is like asynchronous um method and prevent default so we don't want page to get reloaded when user submits um the form that's why we're saying create default so let's submit button set button text to sending to indicate that something has been like triggered and user just needs to wait so then let's get a response by making from the api call to what we had just set up so like i said the server that we set up would be running on local host 5000 and the path is contact and i'll pass the url um that it's like a post method and let's set the headers so we have content type that's application json car set tf eight and also we need uh the body so but it would be and always body needs to be like a string so we're gonna take our object stringify it and that that is it so form details is our object and once this is done we're going to set button text back to send we also are waiting for the response in json format so response.json and we're gonna also set form details back to initial state so we want to clear the form and then we're gonna process the response back so if result code equals equals to 200 then we have a successful api call set status so we're going to set status success to true and then message to message sent successfully if that is not the case then um we're gonna set status success to false and like a error message something like you know something went wrong please please try again later subscribe to the newsletter component i did use this react mailchimp subscribe package so let's go ahead install this and set it up like as the name of the module suggests for this service to work you do need the mailchimp account i i have one i have like a free one i think it's it's up to certain amount of emails that you can send and subscriber list that you can use but there's other services i know the sender cent grid is a good one you can use in a i know that they probably have also like developer tutorials over there so how to use it but for the mailchimp i'll show real quick to you first need to create like a sign up form and then you're gonna use some of the variables from the sign up form into our application and we're gonna plug it in into our module so real quick going to audience signup forms there use form builder or embedded forms i think i did for builders so and then basically after that where you're gonna do is copy the sign up form url that it gives you and paste it in a new tab and open ins do inspect element did on the form it only has like one field so at the top of the form there would be action i like exit out so you need all the three values that i did put x's on so we need the url we need the input name value and then the id value and we're gonna move this values to the enemy file while we are at subscribe newsletter part please subscribe to my newsletter i'm also gonna include the link in the description i'm just getting started so maybe you won't get any emails for me in the next couple of weeks but i'm working on the content and it'll be there it'll be news basically about web development new frameworks around react typescript and etc okay so let's go back to our project as you can see this is the mailchimp subscribe module like a default configuration we're going to use custom forms since we're building our own form and we need to take in the url and pass it into the form and yeah let's import this at the top so let's create new components this would be kind of like a wrapper of our custom form so i'm gonna name it mail chain form dot js so importing mailchimp at the top and then later on i'm gonna import our custom form so export constant mail chain form so this is where we have to generate the url that we're gonna pass on and i'm going to be using um environment variables to set this so process that env so we're gonna have three of them react app mailchimp url and then we have so this was the first url that we saw in like post action equals and then url that post subscribe something like that so then the next one that we saw we're gonna use that in here react app mailchimp you and i think the last one is the id so and id equals to okay and then for this files like we're gonna create um like a new env file so for example here and then paste it then so here you will just put whatever url you copied from your form and the same thing for like all this fields and the last one so yeah make sure not to forget to fill this in and moving forward let's get the form so return we have mailchimp subscribe and the url is post url then we render so this all these like values in here that are this structured we do have access to them inside the form so we can use them to display messages status and etc and yeah now let's create the form in here i'm gonna leave it empty until we we have the form so i think i'm missing something oh i didn't close out now to subscribe okay so creating new component news letter dot js and yeah export constant newsletter and we saw the three fields that we're getting so let's just copy those in here return [Music] let's create column and this is going to take the full width so i'm just going to set it too large and let's create a class name this would be newsletter box so row another column so two columns one for the input one for the submit so this would be also long one but on like medium screens let's make half half of the width and then it would be a small one for like a smaller i mean bigger desktop so first we have a header here that says subscribe to our news letter so then in here based on we're going to show an alert based on what the status is so there's coming from the module i know that there's like three statuses that they have so it's sending um error and success so first sending we're gonna have alert which is like a bootstrap component variant for this one we're not going to set we're just going to use the default variant so sending and let's copy this paste it two times so another scenario where we have an error so this is where we do want to set a variant and that would be danger and also we're gonna have like an error message so we're just gonna display that error message then again this field is coming from here and same thing for this one we do want to show the message variant would be success and this value would also be success okay so moving on to the form itself also on medium let's make it this big like half of the size and seven for the large ones and let's create the form on submit we're gonna create handle submit so let's have that here and i'll submit we're gonna come back to it so let's first add the fields in the form um we actually do have like one field only so let's have um just another container so new email box and then our field so input value equals let's create a class to store this value so for this one import [Applause] use statehook and constant in email set and now use state default just empty string so value of this would be email and same like the type as well and then on change we're gonna update the state so get event set email event target value placeholder would also be like something that says email address and finally the submit button so type your submit and it does say submit as well so now we do have to work on the handle submit function so first again um event prevent default then we do check if email has actually been entered and kind of like if email index of so if it contains like the add sign so if we can find this then oh and another function that we do get past instead of subscribe we're gonna use on validated so this basically validates the forms that we pass so the type of the form is email so this is the function that's coming from the module that we are using so once that's good um then we're good to go one more thing is that we need to clear the fields so this only happens if message um email has been sent successfully so set email empty and then we're gonna make use of use effect so basically if it fails um to send it then user can try again right so in that case we don't want to clear the fields um so we're just going to keep it on successful message um so yeah let's create this and then this would be triggered every time the status will be updated but inside we're gonna have another check that says if status equals to success only in that case clear the fields and so here let's import at the top newsletter that we just created and instead of this um let's pass newsletter and the filter status would be status same for the message as for the unvalidated it does need to take the form data first and then subscribe so i did try this on my account and then on once you go to the mailchimp you have once pressed contacts that's where the email is gonna show up so i have a typo here this should be form data so now we're gonna move on the final part which is footer and for this one we are also so we're gonna actually include newsletter in the footer they kind of like overlap each other so that's why i didn't add the newsletter in the app.js so creating footer so let's make use of footer html tag class name um give it footer let's create a container row inside of it for the class name we're gonna just make sure the items are aligned and here we can import our mailchimp wrapper for the form that already contains the formula now this one mail shame form this one and so on the folder on the right we're gonna just have a logo so column the small one size six and inside here image source equals to importing logo at the top so i import logo from so that would be logo alt text logo okay and then next part we have for the socials so this one also on the small six and class name so um the text we do want it to be centered whether on the small one we wanted to move it to the end so creating that here and the container for the socials that would be social icon this is where you'd indicate the link to your own show urls and inside each one of them we're gonna also have icons and importing the same icons that we had in the header so this one's so just copying and pasting them in here so now icon so i believe one i added for linkedin one is for facebook maybe i'm not sure and then we have the typical oh copy write reserved message all rights reserved and here you can say bye and then maybe your company name or just your name and now let's add footer to the app.js file and see how it looks like we still have no time styling for it so we're gonna do that after we add it here so footer and at the end okay now i'm gonna open this side by side okay so we're missing definitions from bootstrap so we need row column so that we're good for footer about newsletter let's see what's going on there um once again row column e is not defined so e i believe is for the event it's online oh because we never passed it okay that should be good now let's see so yeah this is our footer with the logo email there's a submit button probably can't see it and our logos so let's go back to app that's css and do the styling for the footer so i'm just gonna comment it out here so starting off with the main footer component first let's add some padding to it so it would be at the top on the right will be zero and then from the bottom it's gonna have a 50 pixels of padding let's also add background image so a url for this this would be coming from assets folder image and the name of the image that i have for that one is footer bg for big now background position so we want it center both on the both horizon center background size we wanted to cover as for the repeat we're going to set it to no repeat now moving on to the newsletter container that was newsletter box let's set it to a background so this one would be white so f ffs and like we wanted to have rounded corners so for that border ready use 55 pixels and then this is for color of the text this would be the dark um gray also setting some padding that would be 85 pixels 125. let's see so also this is gonna have margin from the bottom which would be 80 pixels and then marching top would be minus 22 so this kind of like over this two containers like overlay so we're gonna set the z index also so that this is not covered from the um component that's top of it and then this is the background the image is just a gradient spot so now let's do the newsletter header so that one had h3 just making it a bold that would be 700 spacing 0.5 pixels and setting some line height 1.2 em now for the input box itself that would be new email px so background of this one is also white then we have a little bit of padding of five pixels this is also um rounded corners but not as much position is relative say index is zero display we have not in line it's going to be flex and we want it to center so now setting the styling um for the b4 element so we make sure that the content nothing covers the content uh before so setting content to empty and then this is where we set the background to like a linear gradient and this is some um coordinates that i'm pasting in when i um build the image so 37c so this is also border reduce of also 20 pixels position this is absolute so oops they index this would be minus one minus one so top would be minus one pixels same for the left and bottom and right interesting so we have the same styling for um before except of the linear gradient so i mean so we have the same selling for after except the linear gradient background the background is just going to be white so i'm gonna paste this in and modify this to be oops ffff so border radius position absolute say index top and then this one's we're gonna update to be zero okay so now styling for the input itself because in here we can see the input so let's say new email box input so with we do want it to be hundred percent color would be also dark gray so that's total 12. font weight it's um regular and background is transparent [Music] border reset it to zero and then padding goes like zero and 15 pixels for the sides now for the bottom that would be just the name and the button so this one we have background linear gradient so just gonna copy the same gradient that we have here by the way let me know in the comments what tool do you guys use to pick and generate like this gradient and paste it in like css so then we set the padding to 20 pixels 75 on the sides color of the text would be white so fff font way same as we have for the input 500 letter spacing would be 4.5 pixels or the reduce 18 or 19 it could be almost the same now so for the footer oh you guys can see okay so for the footer image let's say it set the width to 26 percent and for the footer the paragraph the text that we have in there uh one two eight would be 400 size of the font would be 14 pixels uh color this would be this one we used it before b8b 8 letter spacing 0.5 pixels and merging top so that it's not very close to the input and the newsletter project is kind of still overlapping our newsletters so i'm just going to let's see update maybe the padding of the projects and then it's um the index so if we do make this maybe 120 and then set it to the index minus one okay so now we have the newsletter i'm gonna update the same for app.css file so project now that we have all the components built out for the page we can add some animations to bringing some drama and effects to our page so the module that i used for to enable this kind of like different effects is animate css as it says for attention seekers so there's a list of different things that you can do with css i mainly use like maybe fading fade out i do have one bouncing and sliding but um i'll show you how we can set up one and then based on that you can edit on any component and whichever effect you like so for that we'll add this module and another thing about um just in general animations is that if you set it up for it to play when the html is loaded um it would actually do that but since we have one page application and when the page loads the other parts are not visible so we want the animations to kick off when user user is actually able to see them so to enable that i also added react on screen module so this will help us detect oh this component is on screen let's um kick off with the animation so let's install both of these modules and get started with it for animate css we need to import it in the files that we'll be using i can also import it in the main file but since i'll only use it as an example in banner.js so that's where i'm gonna import it so we have animate css and for tracking the visibility the way this works is also we import this track visibility in the same file and so you this basically is a wrapper so component that you want to be aware whether or not it's displayed on the screen or not so you put that component inside this wrapper and then this is visible variable is being passed and it's set to true when the component is visible so let's import that at the top as well and the component that i'm going to animate in here that would be let's see let's do welcome to my portfolio and all this like this section basically um so whatever is inside here so that's where i'm gonna put my wrapper track visibility [Music] and let's this one goes after this and let's wrap all this in a div um so the reason i am wrapping this in a do is because i'm gonna add some styling on the d for like animations so let's see for the class name this is where our is visible variable comes in so if it is visible then we do want to did something good oh no we don't want this is for testing yeah aroma got imported so if is visible for class name let's set animated so this names that you're seeing is coming from the animate uh full module so any uh file so any effect that we want we we're gonna start with animated animate and then this and then we'll gonna replace this portion of it um so that's what i'm doing right now fading but if it's not visible then we don't want any animation so we're gonna leave it as empty so now how are we getting this is visible that is also coming from the track visibility so first we need to wrap all this in here and then we need to destructure because i believe they have other variables as well and we can wrap our component in here so now we do have access to is visible so let's um okay everything looks good let's go ahead and test this i'm gonna reload the page maybe have it set on skills okay i'm not sure if you can see but when i'm reloading and when it first appears on the page you can see the this animated animate fading class gets added to it and once you scroll down and it's no longer visible it disappears let's do one for the projects as well and then for the rest you can set it to any of the components we want to animate in here let's do this just projects and the description so wrapping this in additive actually we can paste so copying this pasting it in here but instead of fading i'm gonna do um slide in up just to um switch it up and closing this the about in here also the track visibility okay okay now let's go test this so i'm just gonna reload the page so starting off here once we get to the projects this should be let's see okay animated slide okay so this is visible this gets disappeared i don't see the animations itself so we did import animate css at the top so that should take care of it wondering if i'm missing something else install with cdn yeah maybe let's check the name if it's if i spelled it correct okay let's try bounce okay so you can see yeah i i guess my spelling was wrong so yeah that's that's our animations let's also update the spelling for this one okay so you can see we have the fading all right thank you so much guys for watching this hope you enjoyed the tutorial let me know in the comments if you have personal portfolio already or if you build something using this tutorial how does it look like i can also offer maybe just my own like feedback on your portfolio what should be included for the recruiters or etc so yeah let me down in the comments and if you want me to review your personal portfolio website more in detail and if you want to get feedback also from others i'm going to include a link to my discord channel in the description so please make sure to check it out and join