React Project Tutorial – Build a Portfolio Website w/ Advanced Animations

Key Takeaways

in this course slobodan will help you improve your react skills by teaching you how to build a portfolio website that has cool javascript animations if you're looking to build an awesome react portfolio website you come to a perfect place in this tutorial i will show you how to build breathtaking website with advanced animations using various techniques like gsap library animate.css and custom css animations together we will add a pacman page loader also i will show you how you can create and implement contact form using only email.js library without a need to set up a server and you will learn to implement maps on your website and much much more sounds interesting please join wait for me first thing first let's create react application using mpx create react app and pass in the name of the application in this case it's react portfolio it will install all the packages that you need for react application after project installation is done we want to change directory to the project itself and first let's install all the packages that we're going to be using so that we can later focus only on coding and not installing the first package is email.js which we'll be using to implement the contact form so type in mpmi email.js browser the next package is for our font icons so it's at fort awesome free brands svg icons and we're gonna install a couple of these font icon versions after done clear the console and the next one is fort awesome slash free solid svg icons so we're gonna use the free packages for fonts solid icons are going to be used for the navigation on the left side the next package is ford awesome slash react font awesome this is a wrap up for the font awesome so you can use it easily on react the next one is anime.css it's a css library for animating the objects and fonts it's really cool you'll see it now for more advanced animations we're gonna use gsapp i'm installing gsab trial as i didn't want it to create any accounts next package is loaders.css it's a package for loaders right so we're gonna add a pacman in between the pages in our application you'll see it's really cool the next one is react dashly fleet so on our contacts page we're gonna have a map and this is a wrap-up library for using leaflet maps the next package is react dash loaders we installed the loaders.css previously and this is for react integration so it's really easy to use the loaders inside of the react the next one is the standard package inside of to react is react dash router dash dom so as we are going to have three pages in our application this is going to help us to navigate through and for styling i'm going to be using the sas as it helps you to write less code and to use some of the operations like for and variables and we are finally done with installing the packages and now i want to open the project that we just created inside of the visual studio code the first thing that i want to add inside of my root folder is to print your configuration file and name of the file is dot pre-tier rc i'll let this plugin worry about the formatting and i'm going to worry about the coding and focus on and the default settings that i set up is that trailing commas are going to be enabled tab width is going to be two i'm going to remove the semicolons and add a single quotes also as we are going to be using scss i want to update app file and also update the import inside of the app component so instead of the app.css add just has to be sas extension now let's define some of the global styles inside of our file i'll define primary color to this yellow ffd700 it's used inside of the animate.css library so it's needed in order to use it then import the anime css and let's define the font faces that we're going to be using and default font is going to be helvetica new and let's enter the url of the font which is going to be inside of the assets folder inside of the fonts folder and the name of the file is helvetica dash new dot ttf and format let's add ttf now let's add the assets folder to our project and inside of this assets folder we're gonna have images and fonts and i'm gonna put the link to the assets folder in the description so that you can build entire and same application as i'm doing here so okay we have the assets folder now let's link it inside of our app css file the rest of the fund families i'll just copy paste the first font face three times as we're going to use three fonts the next font is going to be named labelle aurora we're going to use this phone for styling the tags on our background very nice font and the name of the file is labelled aurora with camelcase and the format is buff 2 and the last font is going to be colverica and the file name is going to be colverica rg for regular dash regular and format is going to be again well f2 and you're done with the font faces and now i just want to add a default font for input and text areas so i'm gonna be using font family helvetica new now let's just start our application to see does it work and have we break anything until this point so run npm start from the console and we have our app up and running now the next thing which i want to do is inside of the index.css file i want to remove some of the predefined styles to the code and to change the font family first i'll define html selector and i'm going to set the font size to 62.5 percent for body let's set the 300 as a font weight eleven as of font size pixels and 1.4 as a line height and a default font should be helvetica new as a fallback font we're gonna use sun serif for the color put the 444 and for the background color the hash code is 0 2 2 c 4 3. put the overflow hidden and a display block and those should be default values for a body tag okay now let's open up a index.js file and close all the other files and inside of the index.js file i want to import browser auto module and wrap our application around it this provides us with ability to use the routes inside of our application next we can open up the app.js file and this is the file where i'm gonna be defining our routes so remove the boilerplate code and import the routes from react router dom next import a single route and place it inside of the routes here we're going to define the first path which is going to hold the layout component and we're going to create that just in a second so the element is going to be a layout but as we don't have this component yet let's create it first i want to create a components folder for all our components and i'm going to place that inside of the source directory now inside of the components let's create a new folder and name it as a layout obviously i'm gonna place layout component there then inside of that layout folder add a new file and call it index.js it's easier for later on imports and add index.css file so this is going to be the pattern that we're going to use for all of our components and the first thing that we want to import inside of our index.js file is our scss file so that we don't forget it later on all of our components are going to be functional components so i'm going to follow the same pattern for every single component const name layout is equal the arrow function here we're just going to create a boilerplate code so that we can import it inside of our app file and export default layout now we can remove the logo which is from boilerplate code and import our layout component and let's save it and preview it and we haven't imported the route so let's do that and now as we can see it works correctly so we set up our first component and our first route we can start building our layout first we're gonna build left sidebar so inside of the components folder create another folder named sidebar inside of this folder we want to create index.js file and index.scss file same as we do for other components close other files so they are not confusing us and the first thing that i always do is to import styles on top of our index.js file and now let's create a sidebar dummy component so that we can import it inside of the layout so add const sidebar equals a dummy fat arrow function and export default sidebar and just put the text hello from the parentheses and now we can import that inside of the layout and continue building so inside of the layout index.js file instead of the hello just import the sidebar component and we have connected that as you can see remove this dummy text and inside of the parentheses we want to add a div with a class name of a navbar navbar actually inside of the nail bar import the link from react router dom and edit the name class name logo and this is going to be a default home page so two is going to route to the slash to home page inside of the logo we want to obviously display the logo so add the image with the source and let's import the logo s for slobodan or slova so import os from assets folder images and the name of the file is logo dash s.png place the image inside of the source file and add alt attribute as a logo now we want to duplicate the image and import that new image as well as we're going to have two images one is going to be s and the other one is going to be rest of my name underneath of it slow but on so let's import both of these and let's add to second image logo subtitle as it's like a subtitle to our logo and update the l to slower down we can't even see our images on the page as they are too large and they are overflowing our page so let's add some styles inside of the index.scss file add a class name of navbar and instead of it set the background to 181818 it's very dark background set the width of 60 pixels height is going to be a hundred percent position absolute top left z index three set the minimum height to 500 pixels because on the smaller screens we don't want to get the overflow on our container and it's better to have some scroll bar so for our logo container set the display to block and put the padding on top and bottom to 8 pixels left and right let it be and for the image itself set the display to block and margin to 8 pixels auto so it's centered width to 24 pixels and now we can finally see it completely set height to auto and for our second image we want to set the subtitle logo and set the width to 50 pixels but i think that we forgot to add subclass so let's do that add a class name to our sub logo and it should work now and that's our home logo image only so below that we want to add navigation with the links to every single page that we have so add a nav tag and inside of the knapsack add the nav link first navlet is going to be our home page so set the exact to true active class name to active so that it helps us to style the active link and two is going to be slash inside of our envelope import the font awesome icon and for the icon set it for home it's gonna display nice little home for the color we want this gray color 4d 4d for e and it's going to be used for all our icons as you can see we got the small house in our sidebar now let's copy paste it three times next link is going to be about section so for the icon import file user and put the route to about also we will need a class so that we can actually add the content on hover so add the class name about link for a third icon is going to be fa envelope which is going to be a contact page so add a class name of contact link and add to slash contact we have our navigation now but it doesn't work and it also doesn't look nice so let's add some styles go inside of the index style file and add an app tag inside of the nav tag add these properties set the display to block text align its center position absolute set the height to 210 pixels and we want to position our nav in the middle so we need to set the top to 50 and on top of that we want to give a negative margin of minus 120 pixels set the width to 100 and for the links add a font size of 22 pixels and set the color to 40 4e which is a gray color set the display to block and set the line height to 51 pixel height is going to be the same 51 pixel and set the position to the relative you can see now how it's laid out and the last thing for nav links we want to remove the text decoration so set the text decoration to none now let's add some transition to our to our links so for the i set the transition for all the elements 0.3 seconds is out and on hover we want to set the color of our links to yellow and svg we want to set opacity to zero so as you can see when we hover over the svg icon it disappears but we want to add the content now so instead of the logo we see the text so set the after opacity 1. now for all of our after elements we want to set some default values set the content to empty string font size to 9 pixels set the letter spacing to 2 pixels for the position property we want to set an absolute value bottom set to zero we want to set the display block and a width of a hundred percent text align to center and we want to set the initial opacity to zero so that we can fade in in order to have a smooth transition we need to add transition property for all set to 0.3 seconds as ease out and now let's alter the content for the first child set the content as home and as you can see when you hover we get the home text we can do the same for rest of the links we can target them using the classes as we added the class name use the about link to target the second element and for the after set the content for about and as you can see we have the about link as well now so we can just copy paste our about link and we can update the about to contact so let it be contact link and for the contact to be contact and now we have all the links and tags on hover and the last thing that is left to be done in this section is to add active class to our active route link so add the active class and set the svg to this yellow color as we are on the home page the active class gets activated on the first link and we are getting active class so we get this beautiful yellow color the last part that we want to add to our navbar is to add the links to our outside accounts and the profiles like youtube github linkedin and similar having that in mind i'll add unordered list inside of the list i'll add li tag with an anchor tag again we're gonna use the icons for links so the first one is going to be font awesome for the icon i'm gonna set the linkedin the color is going to be the gray color as we use for our top navigation as well the target for it is going to be blank so we want to open the links in the new page and we want to set the row as well for the href i'm just gonna paste the link to my linkedin account but obviously you will use yours and just to test if the link works correctly i can open up my page let's close it now we can just copy paste over the link that we just created and update the icons for others and the links for the second one i'm gonna use the github so the icon is f github and i'm just gonna paste in the link to my github account the next link is linked to the youtube channel so add the fa youtube icon and i'm gonna put the link to my youtube channel here if you don't have a youtube account obviously you're gonna remove this icon the last link that we're gonna navigate to is the skype so add the fa skype icon and update the href with the skype prefix after the prefix you want to add a skype username everything else is the same so now that we linked all of our accounts we can style them to look nicely first element that we want to target is our unordered list so set the position to the absolute and we want to place it on the bottom of our screen so bottom position 20 pixels what is going to be a hundred percent and we want it to be displayed as block also set the padding to zero list style to none we want to remove the bullet points and align the text to center set the margin to 0 as well the next we want to style are anchor tags inside of the list items so set the padding on top and bottom to 7 pixels and the left and the right side to zero we want to display them as a block and to give it a font size of 15 pixel set the line height to 16 pixels and the color actually we don't need as that is set on the icon itself and when we hover over our links we want to set the color to be yellow same as we have on our nav links as well but we want to do that on the svg so add svg there please and if we hover over we can see that we have nice yellow color and that makes our layout complete on the left side let's continue with our home page but one thing i noticed that if we hover over our nav links you can actually see that the font isn't applied this is a default font and if you go to the index.css file we can see that i used font family which is used for a font name not for the all properties of the font itself if we save that we can now see that the font is actually being applied so please fix this error if you're following along before starting with the content of the home page i want to add some of the elements that are going to be used across our application these elements are going to be placed in the background but they're going to add the feel of a web developer because we're gonna display on top html and body text and on the bottom as well so inside of the layout folder and in the js file we want to add a class name with a app so this is going to be the main wrapper of our application and we want to add a class name of page and inside of this element i will set an outlet where we will render all the pages in our application which will be like a placeholder so import the outlet from react router dom before the outlet i already inserted top tags with body tag now i want to do that for the bottom as well so we will import the body tags and we will add a class name of tags and bottom tags and inside of it i want to paste in the body code add the break line and add the html tag as well so add a class name of bottom text html so that we can move it slightly and make a difference of the body tags now i just paste in the code of the html tags that i copied over from the web and who really can remember those characters now let's add some styles to our tags open up the index.scss file let's set the width and the height of the page set for both of these to a hundred percent and set the position to be absolute for our top tags we want to set bottom position to be set as auto and for top we want 35 pixels for tags general class set the color to be this this yellow default color that we use across our application but i just want to reduce the opacity by a bit so set it opacity 0.6 position will be absolute and the bottom will be set to zero left is going to be 120 pixels set the font size to 18 pixels and finally now we can see our body tags and what we are calling actually set the font family to a label or this nice font which will give such a good styling to our body tags and for our body tech html i want to add -20 pixel indentation so that we actually have that feeling of the real code as we have our main layout setup we want to create a home page finally so inside of the components folder add a home folder inside of the home folder as always add index.js file and index.scss file we want to create just a dummy home component so that we can import that inside of our router const home equals hello and export default home next we can import our home component inside of the app.js file so add a new route with a path of actually you don't need a path we just set it as indexed and element is going to be the home component now we can bring in some content into our home page let's do that open up index.js file inside of the home folder and remove the implicit return inside of the curly braces i will add a return and inside of the return let's add a div deal with the class name of container and a class name of home page inside the container i will add a text zone div this div will contain the animated text on the left side of our screen in the text zone add the h1 title and inside of the title add the following text hi comma then we will add a break i'm and after that it should say hi i'm slobodan for the first letter of my name i will use an image which will be styled differently so let's add an image tag and for the source we're going to import the image later and for the alt tag add the developer image is going to be exactly the same as we use on the left sidebar so let's import it import logo title from the assets images and the file name is logo dash s.png and now just place the logo title inside of the source attribute okay this is linked properly but it lacks some styling as you may see let's continue with building our page below the image let's add the rest of the word lobodon with s is going to be my name slobodan and add the break and below it's going to say web developer and we actually need to surround all the text that you've written inside of the h1 title not just the first two words below this i will add h2 title first i said who i am next i want to say what i do so it's very visible once somebody lands on your first page so i'm a front-end developer and javascript expert and also i create youtube content as well and below that we want to add a link button so this will link to our contact page so that actually somebody can contact you in case he has a project for you full-time job collaboration or he just wants to say hello two is going to be slash contact and we're going to add this to our route later on and class name add a flat button so we can style it now open the index scss file inside of the layout folder the styles that we're going to add here are going to be the same for every single page so we don't want to duplicate them let's put them inside of the layout and it will be applied to all the pages set the width to be a hundred percent we'll change the contents height to ninety percent min height to 566 pixels set the position to be absolute and the opacity to be zero container will have fade in animation that's why the opacity needs to be zero at the beginning set it up to be five percent margin zero auto z index to be one transform style preserve 3d and animation fade in this is the animation from animate.scss duration is one second and let it end forwards add animation delay to one second and the rest of the styles we're gonna place inside of the index.css file in our home folder inside of our index.js file in the home page folder import our index scss file now we can open our style file and on top of our file let's add the first class home page inside of that home page we want to target h1 tag and inside of the h1 we have an image that is overlarged so put the size to 32 pixels and we can finally see the rest of the h1 title so target detects zone and position it absolute for the left position property put it as a 10 percent so that we can see it and it's not positioned below the sidebar put it up 50 percent as we want this to be centered as i want our text zone to be in the dead center add the transform translate y property and put the minus 50 percent so it moves the text zone a little bit on top the width is going to be 40 percent as we are going to have a 60 of the other elements on the right side and the max height is going to be 90 next let's add some styles to our title first put the color to be white and you can see how that stands out now and let's increase the font size to 53 pixels so it's nice and visible we want this to stand out when somebody lands on our index page put the margin to be zero and for the fun family put the call vertica and for our weight i just want it slightly to be less bold so the font weight is going to be 400 as i want this portfolio to give the user feeling that he's on a developer portfolio i want to add h1 tags around our titles similar what we did for the body and html tag so we're going to do that with the before and after of the title use the content h1 for the font family again we're gonna use label auror and color is going to be yellow font size we want to reduce it to 18 pixels set the position to absolute as i want this tag to be slightly on top of our title put the margin top of minus 40 pixels and place the slight indentation so left is going to be 15 pixels and just to fade out a little bit so the opacity is 0.6 now let's do the similar for the after as well so content is going to be closing h1 tags without the space fun family is going to be the same label or most of the properties are going to be the same for the h1b4 and h1 after color is going to be the yellow the font size is going to be 18 pixels position is going to be an absolute set the margin top to 18 pixels margin left to 20 pixels and we want this to animate along with the text so put the animation fading one seconds and delay 1.7 seconds and backwards for the fill in mode and for the opacity is going to be the same 0.6 as for the b4 let's reload the page to see our fading animation that's much better let's style the rest of our text zone for the s letter inside of our text let's add a little bit of space on the left side so put the margin left of 20 pixels set the opacity of zero because we will adding the fading animation actually the rotation animation height is going to be auto and the animation is going to be rotate in one second long linear and fill in mode both and for the animation delay i will add 1.4 seconds as you want this animation to start a little bit after as we are going to be add some of the loaders later on now we can move on on our subtitle set the color to be ada 80 hash code set the margin top to 20 pixels font weight to 400 font size it's going to be 11 pixels for the fun family let's use good old sun serif and i want to spread the letters out so set the letter spacing to 3 pixels and we will be animating the h2 as well so put the animation as fade in one second long 1.8 seconds delay and set the filling mode as backwards the last but not the least is our contact button so use the flat button class that we use inside of our jsx set the color to be this default yellow color font size to 13 pixels font weight to be 400 for our button i want letter spacing to be 4 pixels for the font family let's use good old sun serif again we don't want this to be presented as a link so text decoration set to none and let me add a little bit of padding on top and bottom put the 10 pixels and 18 pixels on the left and right side for the border let's set it to one pixel solid and our default yellow color we want a margin top 25 pixels and to float to left side now we also want to animate this as well so put the animation as fade in animation one second duration 1.8 second delay and set the filling mode as backwards actually the name of the animation is fade in there you go and i'll set the white space to no wrap now let's change the styles on the hover event so on the hover let's change the background to be our default yellow and set the color to be this dark 333 and that completes our tag zone stylings that's very nice the next thing which we want to do is to animate our text so every single letter needs individually to pop up once the page is loaded and i would like to create a component for that so that we can reuse this component on every single page and we don't have to repeat this process we will just pass in the array of the characters that we want to be animated and this function will return the animated letters so having that in mind inside of the components folder create the animated slatter folder and again create index.js file and index the scss file inside of our index file first thing that we want to do is to import our styles file as always next let's define our functional component so give it a name animated letters and this component will receive three arguments the first argument is going to be the class that we want to apply to our characters the second one is going to be the array of the characters itself and the last one is going to be the index the starting point which will basically set the delay of our letters and the animation the type of the element that you want return is going to be a span as we want it to be an inline element as these individual letters needs to form a letter and a word now let's map to the array of the letters that we received as arguments we get the element and the index itself inside of the map we will return another span and we want to give it a key as every single map inside of the react needs to have a key index so we will add a char which is a basically a letter and an index because we can have the repeated letters here as a class name we're gonna pass the letter class that you receive to the props and we will add an index plus the number that is passed through the properties which is like a starting point so if the index is 5 every single index in the map array it will be increased by 5. and finally this span is going to display the letter that is passed in and just export default animated letters now we can use it inside of our home component let's import it there first let's use the use state hook to define the state of our class as letters can only have one animation and specific moment in time after the initial loading is done we want to add animation on hover so this is why we use use state default animation name is text animate the next what i need to do is to create two arrays for two words that we want to animate these arrays need to hold the characters of the separated letters that we want to animate for the animated letter component that we just created the first array holds the characters lobodon without the s because s is the image that we imported and the second array is going to hold the web developer i need to spell it correctly so i don't make any mistakes and for the first two words hi i'm i'm manually gonna add the classes without using animated letters component finally replace slobodan word and import the animated lattice component that we created for the letter class attribute passing the letter class variable that we defined in the use statehook for the string array attribute pass in the name array which is lower down the words that we just defined on top and for the idx put the 15 number so our classes are going to start from 15 index let's open up the console and see does it work if you refresh the page and inspect the letters you can actually see that every single letter has text animate it's a single span and it has different index nice now let's do the same for the web developer part let's reuse the code that we just coded out and just replace the string array to put in the job array and for index set it to 22. the last thing that is done is the first two words so like i said i'm gonna do that manually add a spam tag with the h letter in it for hi and class name is going to be letter class that is default class for animating our letters now we want to copy over this span and change the class only the first letter has just text animate class every next letter has a delay class as well because we don't want these letters to appear at the same time so we are adding the second part and the index that we are using later on to add a slight delay to animation so the letters are appearing in a sequence so the second letter has the delay of 12 which will be actually 1.2 seconds delay and copy paste that over to add to two additional letters hi i'm so and we actually need to update remove this part and update the indexes to 13 and 14. as we have classes in place now we want to add styles to them so open index style file from the animated letters and let's add it default class for text animation is text animate so set the display to inline block as we want this to appear as a word and a sentence the initial opacity is going to be zero so we want them to pop out set the animation as a bouncy end and duration for this animation let it be to one second and one second delay if you want the letters to stay visible set the animation film mode to forwards and set the minimum width to 10 pixels so that they don't jump around as you can see now all the letters do appear at the same time so what we want to do is we want to add a delay to the indexes that we created and every single letter is going to appear one by one we're gonna use for loop inside of the sas this is a great feature so that we don't have to manually code classes from 1 to 35 use the loop and go from the indexes from 1 to 35. inside of the loop we are creating textanimate class with underscore and the index from the loop and we are adding animation delay animation delay is dividing index by 10 so for every single letter we're getting 10th of a second and when we refresh our page we can see that our letters are appearing in a sequence beautiful animation after animation is done we want to add hover effects for our letters so when we hover over effect we get the yellow color and also we get the rubber band effect so let's add that set the minimum width to 10 pixels so the text is not jumping around display to inline block animation fill mode to both and finally when we hover over our characters we want to add animation rubber band one second and the color to be our default yellow color next in the index.js file of the home folder we can utilize this class so we're going to use use effect hook in this effect i'm going to return the set timeout and inside of the timeout after 4 seconds i want to set the class to text animate hover and i will pass an empty array for dependencies so this runs only once and now when we hover over our text we should get the hover effect let's reload the page and for some reason it's not appearing if we check our index.css file we can actually see that we are placing text anime hover as a child of text animate so let's just place it outside of it and let's try again after a couple of seconds for loading boom we have the hover effects i love it in order to complete the home page i want to display the logo on the right side of the page and animate it using gsap library so let's create a separate component for it inside the home folder create a logo folder and again create index.js file and index.css file and let me close all the other files now inside of the index.js file we want to import our index style file on top now i will just create a dummy logo component so that we can insert that inside of our home page and continue with coding define a constant logo which returns only a hello text and export default logo now go to homeindex.js file and let's import it at the bottom and automatic import didn't work for some reason so let's import it manually just type in import logo from the same folder logo and there you go let's build our logo component now remove the hello world and insert the curly braces inside of the curly braces we want to enter the return statement in the return we want to create a wrapper div the name of the wrapper is going to be logo container in the logo container we will have two images one will hold the solid logo image and the other one is going to be transparent and once the loading animation is done we want to display the solid logo import the solid logo from assets images and the name of the file is logo s.png and place that in the source attribute of our image don't forget to add the alt attribute and put it s and next to that i can paste in the svg outline s logo and all the assets like i mentioned are going to be in the description box so that you can build the entirely same website as i'm building here now in order to target our svg element inside of the svg and the g tag add the class name of the svg container all these three elements are going to be hidden as well svg container svg itself and the solid image so in order to manipulate with them and apply gsap animation to it we need to use use ref to these three elements one reference is going to be for the background or rather container the other one is going to be for the solid image and the third one is going to be the outline of the logo now let's add some stylings to our logo so it's not overlapping with our text first let's tile the logo container class reset the z-index to zero set the width to be 400 pixels set the height to be 60 pixels position will be absolute position on top of the element is going to be zero for the position right i will set 15 percent it's looking better already set the bottom to be zero position left is going to be auto and set the same setting for the margin as well next one is svg first i want to set the width to be a hundred percent of the container next set the height to be automatic bottom position of the svg is going to be zero next i want to tilt my logo slightly on the right side i will use transform rotate z in order to achieve this and the rotation value is going to be 30 degrees i'm adding important attribute so it doesn't get overridden later on the last piece of the puzzle here is solid logo set the position as absolute the top position of the element is going to be auto i will use the same value or the right position and also the same value for the bottom the only different position property is going to be the left and it will take the zero value margin is also going to be automatic set the width to be a hundred percent and set the opacity to be zero as we want the solid image to appear once the logo animation is done and again we want to apply same rotation as we did for the outline logo place the rotation value as 30 degrees if i remove the opacity for a second and the transform rotation value you can see what it does to our logo if you want our solid logo to appear on top set the z index to be 1. now the reason why we don't see our outline logo is because we haven't set our stroke settings let's do that use the svg container class to target the svg element that we added set its row color to be our default yellow color and set the stroke width to be 10 pixels and finally we can see it clearly the last style that we want to add is to set the opacity 0 to our logo container as container will have fading animation now we can switch over to our index.js file of the home component first add the logo container ref to our bgref to our image i want to add a reference to our solid logo ref and for the svg path we want to add outline logograph next in order to apply our animation effects we will use use effect hook so define one on the top for the array of the dependencies set it as empty array as i want this to execute only once library of choice for animations is gsap so import it from gsab trial and first we want to register the plug-in for drawing the animation on the svg next call the gsap timeline function that calls the animations in a sequence called the 2 function which will represent the end state of the animation the first argument is the element that we want to animate so set the background ref current as the second argument we can set properties inside of the object set the duration to be one second and the opacity as an endpoint to be one before our function we need to add a dot and for the draw svg plugin it didn't work for the automatic import so we need to do it manually so place it on top import raw svg plugin from gsab trial draw svg plugin and now when the page loads we get the fade in animation next i want to chain animation on top of this current fade in animation so i will call the from function which is similar to 2 as it receives the first argument as the element that you want to animate in our case it's outline logo svg set the draw svg property as 0 which is a starting point and it starts from very beginning and duration to 20 seconds so it's going to be a long animation and as you can see it creates that beautiful drawing svg animation when the drawing animation is done i want to fade in the solid logo so the logo creation animation is completely done to achieve that call the gsap from to function and as a target element set the solid logograph next attribute is the starting point of the animation and that's opacity zero and is the third argument is the end state of our animation which is opacity 1. set the delay to 4 seconds and duration to 4 seconds and that finishes up our logo animation so let's preview it let's reload the page and see the complete homepage animation we have the nice fade in and that beautiful drawing animation and when the drawing is done the solid logo appears and if we refresh again we can see on the left side that we have the text pop-up animation i could refresh this over and over again outstanding job let's build our next page it's going to be an about page so create new about folder inside of the components folder and create again index.js file and index.css file close all the other files and let's create our about component boilerplate code const about equals the function that returns hello and just export default about now in order to use it we need to create a new route so inside of the app.js duplicate the new route and set the path to be slash about and for the element import the about component that we just created and if we click on about link we land on our new page first let's import our index.scss file remove the hello string add the curly braces and inside of our component add the return statement inside add a first div with a class name of container and about page and similarly as on home page we have another div with a class name of a text zone where we will place our h1 tag and a paragraph inside of the h1 tags we can use our animated lattice component that we created for our home page for the string array parameter we want to pass in an array of characters this time it's going to be about me and for the idx property i want to set in 15 which actually means 1.5 seconds delay and just update our import to be relative to the folder that we are in and we get our text below this animated title i will have three paragraphs as this is about section i will tell a little bit more about myself and now instead of typing all this text out and torturing you to watch it i typed it already so i can just copy paste it i will copy paste three paragraphs and i will just paste in the text in the first paragraph i say how ambitious i am in the second one i say how confident i am and from the first two you can tell that i'm very humble right and the last paragraph is one sentence definition now let's add some styles to it so open index.css file in the layout folder as this is going to be repeated in the context page as well add a very top class about page and inside of it add a tag zone and this part will be very similar on the context page set the position as absolute set the left position property as 10 percent so it's not behind a bar add the transform translate y property to minus 50 but before we move it on top we want to add a top property of 50 width is going to be only 35 as we will have another elements on the right side of the page set the vertical align to middle and the display property to the table cell and additionally max height is going to be 90 next i want to target our title i will set the font size to 53 pixels font family will be colverica color of our main title will be yellow our default yellow color set the font weight to 400 so it's not as bold i will reset the margin top to be zero i will set position to be relative and margin bottom to be 40 pixels set the left position property to 10 pixels and same as on the home page we want to add h1 tags before and on the after so i will use before and after pseudo selectors on db4 set the content to be opening h1 tag for the font family again we will use that label aurora font let's decrease the font size to 18 pixels set the position to be absolute so that we can move it around margin top will have negative 10 pixels left will have the same value -10 pixels set the opacity to 0.6 so it's slightly transparent and the final style is line height 18 pixels let's do the similar for the after pseudo selector set the content to be closing h1 tag for the font family you probably guessed it label or ror and we want to remove the space on the closing h1 tag let's reduce now font size to 18 pixels and let's adjust the line height accordingly to 18 pixels as well again we want to be able to move it around so set the position to be absolute and for the position left property i want to set to minus 30 pixels bottom position property will be minus 20 pixels let's set margin left to be 20 pixels and let's reduce the opacity once again to 0.6 now let me give some style to the paragraphs they are barely visible set the font to be 13 pixels color of the font is going to be white so we finally see it for the font family use good old sun serif and i want this text to be really thin so set the font weight to be 300 minimum width of the paragraphs will be fit content and the paragraphs are going to have a popping animation so i will set animation to pulse and duration is going to be one second but i don't like the animation where they pop up at the same time having that in mind i will add a slight delay to every single one of them i will use ends of type selector and for the first element i will add animation delay to 1.1 second and when i reload the page you can see what the animation the first paragraph has let's do the same for the other two copy paste the code that we just coded for two times update the selectors two and three and animation delays accordingly to 1.2 seconds 1.3 seconds let's reload the page to see the final result we get this nice animation and the last thing let's add the class for the hover effects the class name seam is on the home page is text animate hover and this time we want the color to be white because our text is by default yellow the hover effect is not working because we need to alter the class after initial animation is done so let's do that as we did exactly the same thing in the home index.js file as well let's go and copy it over copy use statehook from index.js homepage file this hook sets the initial value for our classes and just import it next let's copy over the use effect hook in which we use the set timeout to update the classes after 4 seconds are done again we need to import a use of ad hook i'm using automatic imports now we can pass our letter class to the letter class attribute of the animated letters component and now after the animation is done the hover effect is here only thing that i want to update is to set the delay to 3 seconds as on the about page we don't have that long loading animation at the beginning like on the home page and now let's go the right part of the about page it will be a cube with the logos of the skills that i possess and it will be rotating so add a div with a class name of stage cube inside of that create a div with a class name of cube spinner cube spinner will hold the six sides of the cube with just different icons so let's create a first one with a class name of face one inside of the phase one i will have font awesome icon and for the first icon i'm going to use fa angular color will be this red dd0031 now copy paste this div five times then just update the class names to phase 2 phase 3 phase 4 phase 5 and phase 6. now update the icons for the second one it's going to be fa html5 for phase 3 it's going to be fa css3 for the fourth one it's going to be fa react for the fifth one f a j s square for the javascript for the last one f a get out for the kit all these are imported from fourth awesome free brands svg icons so now open the index style file for the about page and let's add some stylings to our cube first let's style the stage cube container set the width to be fifty percent so it's going to take only the half of the page set the height to be a hundred percent and position top to be zero i will add some padding on top so set padding top to be eighteen percent set the margin left to be zero position property set it to be as absolute position right property set it to be to the maximum right so it's a zero value and the last style is overflow hidden if we check our cube now it looks like a list of red icons very small icons so the next thing that i want to do is to update the colors of these icons so open the index.js of the about page and for the second icon put this hash code five two nine for the third phase static hash code to be two eight a four d nine forty phase four set it to be five e d four f four forty phase five e ef d8 1d and the last one ec4d28 and now every icon in every scale has their proper color it looks much more nicer now next open the style file of the about page and let's continue with adding the styles to our cube because right now it's just a list so let's add the rotation animation actually the spinning animation cube spinner is going to hold this animation so set the animation name to spin cube and let's define this is going to be a custom animation that we are going to code define the animation with add keyframes and the name is spin cube from property is going to be empty n2 is going to be like a starting position so set the transform rotate x as zero degrees rotate y also to zero degrees and rotate z to zero degrees so like i said this is a starting point of our animation on the 16 percent of the animation we want to transform rotate y to minus 90 degrees on 33 we want to leave rotate y to minus 90 degrees but we will set rotate z to 90 degrees on the half of the animation i will copy over the same styles and for the rotate y i will update to minus 180 degrees and for the rotate z i will leave to 90 degrees on the 66 percent of the animation i want to copy over again the same styles and i will just update rotate y to minus 270 degrees and the last keyframe is 83 percent where i will set transform rotate x to 90 degrees next let's add the rest of the animation properties so that we can trigger the animation so for the cube spinner set the anima