Create a developer portfolio using reactjs

resume_cover
resume_cover

Reactjs has cemented its position in front end world in past few years and there has been increase in demand for reactjs developers in recent months. In an effort to increase your chances of securing a position as frontend web developer I am writing this article today to show an easy way to create your own developer portfolio in reactjs and host it on github pages for free. So lets begin:

1)First download free resume template from the following link:

Ceevee

Extract the zip folder in suitable location. We will refer to this folder as template folder in the entire tutorial.

2)Next install create-react-app npm module either using yarn or npm package manager:

3)Set up a new resume project:

4)Now copy the css,images and js folders from template folder(Ceevee10) to resume=>public folder in your project.

3)Next add following lines in head tag of index.html in resume=>public folder as follows:

Add following line below div with id root similarly:

This should take care of all extra resources required by the project and we can now focus on core react js development.

4)Now we need to create individual components by dividing various sections in index.html file in downloaded site folder into modules.

First create a components folder in resume=>src folder as follows:

Lets start with header. First copy the header portion from index.html file in the template folder(Ceevee10) viz:

Now paste the code in html to jsx convertor like this one:

https://magic.reactjs.net/htmltojsx.htm

The covertor will remove extra comments, add appropriate closing tags and indent the code accordingly. Next create a new class in header.js file in resume=>src=>header folder and paste the generated code in render function as follows:

Similarly convert the other components and add them to corresponding files.

5)Next import the components in App.js file as followed:

If you now run “npm start” command from terminal you should be able to see your website live and working fine. Now you can go and edit the individual details by yourself in each component or you can pass those details as props to each component from parent component. We are going to take the latter approach but you can skip this step if you want and move towards code hosting step.

5) Now let us pass our own details as props to each component from parent component as follows:

First create a resumeData.js file in resume=>src folder as follows:

Next import the file as in App.js and pass it as props to the child components as follows:

Next use the props in Header file as followed:

Similarly add other details and pass props to other components for setting up your website. Feel free to refer to github project mentioned at the end of the tutorial if you face any issue.

Finally you will have your own developer portfolio created in react completely ready.

6)Next it’s time to deploy the code to github pages. If you already have a github account then create ‘your-profile-name.github.io’ repo or else sign up for one. For more details follow this link: Github Pages

Next go to resumeData.js and change the imagebaseurl attribute to url of your github.io repository.

For example if repo name is ‘techonoeticsclub.github.io’ then baseurl would be:-

Next run the following command to generate build of the project:

7) Now clone your github repo locally using the command:

8)Copy the contents from resume=>build folder to your repo folder.

9)Push your changes to github using the commands within the repo folder:

Now you can see your portfolio live on by visiting github pages website url.

You can get entire source code of the project at the following link : Github

That’s it for today’s tutorial. Hope you will give it a try and create your awesome resumes in the future. Happy Coding 😀

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development