Create a developer portfolio using reactjs

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.

Your final portfolio will have the following look:-

Porfolio

And you can check out finished website here:- GithubPages

So lets begin:

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

https://www.styleshout.com/free-templates/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:

npm install -g create-react-app
yarn global add create-react-app

3)Set up a new resume project:

create-react-app resume
cd resume
npm start

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:

<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">

http://%PUBLIC_URL%/js/modernizr.js
<title>Sample resume</title>

Add following line below div with id root similarly:

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
    window.jQuery || document.write('')
    http://js/jquery-migrate-1.2.1.min.js
    http://js/jquery.flexslider.js
    http://js/waypoints.js
    http://js/jquery.fittext.js
    http://js/magnific-popup.js
    http://js/init.js

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:

<body>
   <!-- Header
   ================================================== -->
   <header id="home">   <---Copy from this section
   ...
   ...
   </header> <--Till here
...
</body>

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:

import React, { Component } from 'react';
export default class Header extends Component {
  render() {
    return (
      <React.Fragment>
      {/*generated code*/}
      <header id="home">
        ....
      </header>
      </React.Fragment>
    );
  }
}

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

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

import React, { Component } from 'react';
import Header from './components/header/header';
import About from './components/about/about';
import Resume from './components/resume/resume';
import Portfolio from './components/portfolio/portfolio';
import Testimonials from  './components/testimonials/testimonials';
import ContactUs from './components/contactus/contactus';
import Footer from './components/footer/footer';
class App extends Component {
  render() {
    return (

);
}
}

export default App;

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:

let resumeData = {
  "imagebaseurl":"http://localhost:3000/",
  "name": "Your name",
  "role": "Frontend Developer"
  }
export default resumeData

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

import React, { Component } from 'react';
....
import resumeData from './resumeData';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header resumeData={resumeData}/>
        ....

Next use the props in Header file as followed:

import React, { Component } from 'react';
export default class Header extends Component {
  render() {
    let resumeData = this.props.resumeData;
    return (
      <React.Fragment>
      {/*generated code*/}
      <header id="home">
         ....
         <div className="row banner">
            <div className="banner-text">
               <h1 className="responsive-headline">I am {resumeData.name}.</h1>
               <h3>I am a {resumeData.role}.{resumeData.roleDescription}
               </h3>
               <hr/>
               ...
      </header>
      </React.Fragment>
    );
  }
}

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:-

let resumeData = {
  "imagebaseurl":"https://techonoeticsclub.github.io/",
...
}
...

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

npm run build

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

git clone <your-repo-url>

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:

git add .
git commit -am "resume changes"
git push origin master

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 😀

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.