Create a developer portfolio using react.js
Reactjs has cemented its position in front end world in the past few years and there has been an increase in demand for reactjs developers in recent months. In an effort to increase your chances of securing a position as a 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:-
So let's begin:
1)First download free resume template from the following link:
https://www.styleshout.com/free-templates/ceevee/
Extract the zip folder in a suitable location. We will refer to this folder as a 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-appyarn global add create-react-app
3)Set up a new resume project:
create-react-app resumecd resumenpm start
4)Now copy the CSS, images, and js folders from the template folder(Ceevee10) to resume=>public folder in your project.
3)Next, add the following lines in the 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">
<script src="%PUBLIC_URL%/js/modernizr.js"></script>
<title>Sample resume</title>Add following line below div with id root similarly:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
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:
Let's start with the 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 converter 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 (
<div className="App">
<Header />
<About />
<Resume />
<Portfolio />
<Testimonials />
<ContactUs />
<Footer />
</div>
);
}
}export default App;
If you now run “npm start” command from the 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 the 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 the Header file as following:
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 build7) 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 masterNow 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
The original inspiration for this project comes from this repo:- Github. Do check it out too.
That’s it for today’s tutorial. I hope you will give it a try and create your awesome resumes in the future. You can connect with me on Twitter or LinkedIn to get help or general guidance in frontend development.
Happy Coding :D
