Build & deploy your react.js Resume

Last month I was free at home and was enjoying PSL matched. It was very difficult to spend all day just sitting in front of the TV. I thought I should do something in my free time. So I decided to create a Resume app. I tried to write the code in a way that we can reuse the element and also keep it for reference.

I employed React to build this beautiful resume and styled the resume with styled-components. let’s start working on our resume without wasting our time.

First, we will create a react project with the help of the following command. you can also follow official react documentation to create and run the project.

npx create-react-app Resume

The next step is to install all required packages. If I forget to mention any package that I have used. You guys can find all these packages in my final code’s package.json file.

yarn add styled-components react-sweet-progress react-svg react-icons react-circular-progressbar polished vertical-timeline-component-react

Next, remove all the unnecessary files from your installed react project and create the following missing folders in your project as shown in this image. Then create one more folder inside the components folder and name it common. We will keep our common elements inside this folder.

Let’s start writing our code. First, we will create a file called Global Style.js inside the common folder.

Here we are doing nothing special. We imported an object from styled-components and created a GlobalStyle object from this. There is nothing to worry about in the rest of the code. We are just resetting the default setting. Also, create one more file px2vw.js inside the common folder and place the following code in it. Then import the px2vw.js file inside the GlobalStyle.js.

Next, move on to your App.js file and import your GlobalStlye.js. Do exactly as I.

Create one more file inside the common folder and name it Paper.js. Here we will define our Resume’s layout. Our Paper.js file should have the following code.

Here I have created a react component. Started with imports and then created PaperLayout element with the help of styled-component. There are dozens of libraries to style the react components. All those have their pros and cons and I don't want into this debate. Just a small introduction of styled-components. “styled-components is a library built for React and React Native developers. It allows you to use component-level styles in your applications. styled-components leverage a mixture of JavaScript and CSS using a technique called CSS-in-JS”.

Now move to App.js and place your Paper.js component just under the GlobalStyle. We have nothing more for App.js. It should look like.

Next we will create a header component for our CV. This component contains only the name and job title. Let's create a new file HeaderSec.js inside the components folder.

I have simply created a functional component and inside it a<Header> element that is wrapping two other elements. Let's create a Header element just above this code.

This Header variable here is now a React element that you can use like any other React tag! This unusual backtick ( ``) syntax is a new JavaScript feature called a tagged template literal. Inside backticks, we have simple CSS. This is our reusable react element and we can use it anywhere in our code.
On line 34 we have the<Heading> element. We have a pretty long code in a separate file. Which we will use in different places.

Let's create another file Heading.js inside the common folder and place the following code. Now we have a reusable Heading element and we will make all our heading with this element. Of course, you can save this reusable element in your different projects. I always do the same and don't waste time writing the same code each time.

In the Header.js file, I imported the above element and use its variant h3, centre aligned.

Just above our HeaderSec function. I used the same Heading element and overridden its properties and assign it to the new variable TopHeading.

Don't worry about {Data.name} and {Data.jobTitle}. You already have created a folder of data. If not, then create it inside the src folder and create a Data.js file inside it.

Place the above data in the Data.js file. I am simply importing data inside our component from this file. Same like {Data.name} and {Data.jobTitle}.

So our Header element is ready to use. Move to your Paper.js file and update the code like this.

Above in our code, we are using Mycolors.light or Mycolors.purple. Don’t worry about it, I have created a separate file Mycolors.js inside the common folder and imported colours value from this file. You guys create your own and place these lines of code.

All right, Our Header is finished. The Next step is to create ContactSec. This section contains a rounded profile image, a few icons with text. Let’s create a ContactSec.js file inside the components folder. inside the file place the following code.

Here we are importing Icons from react-icons. Then a {Text} and {Divider} element that we will create next. An img2 image in the images folder and about data you already know.
Place below piece of code just below the about code.

So we need <Divider /> that serve as a horizontal line between contact information. Create a CommonElements.js inside the common folder and place this code. We will use this divider in many places.

Next, we need a Text element. Create a Text.js inside common and place the following code.

Everything that we needed is ready. Write in the same order in our ContactSec.js. Once again update your Paper.js file.

Alright, One more section is completed. let's move on to the other sections.

The next step is to create a DetailsSec.js inside the components folder and we have the following code. We will reuse most of our prebuild components in this section.

I am ignoring what I have already discussed. Newly, I have created three containers on lines 22, 28 and 36 and used these within the return statement.

We have an <AboutSec /> element on line number 54. The below code is for the AboutSec element.

Then we have a <SkillSec /> element on line number 60. And for this section, We have the following code.

We have a <AwardSec /> on line 66 and the following code.

Same like Other sections, we have a languages element on line 72.

So, our left section is just finished and now we will do our right section. Let's do our <EduSec />. I am intentionally leaving some plain text as hardcoded. you guys place that text inside the Data.js and then import it here.

Same like the education section we have the <Experience /> element.

And our final section is hobbies & interests and we have <Hobbies /> element.

At the end once again update your Paper.js and we have done all.

Finally, our coding part is ended. The next step is to deploy the Resume somewhere so that you can share the link. We will do this in the next part. If you guys are stuck somewhere, you can take help from my GitHub code. If you have a better solution than mine, please comment. I would really appreciate your feedback.