Build your personal website from JSON file with React using @allamgr/portafolio library and publish it on your GitHub page?
Tags: react, resume, portfolio, github
Published: 2021-08-23 14:33:58

---
title: Build your personal website from JSON file with React using @allamgr/portafolio library and publish it on your GitHub page?
published: true
description: Build your personal website from JSON file with React using @allamgr/portafolio library and publish it on your GitHub page?
tags: react, resume, portfolio, github
//cover_image: https://direct_url_to_image.jpg
---

Hi, this will be my first article here on Dev, oriented to developers/designers, I hope you found this useful, and if you like share it or leave your comments.

Like the title said this will be a tutorial for people who wants to have a personal portfolio website based built with React on their personal GitHub page.

##### Purpose of this Blog:

- Create a personal portfolio with React and `@allamgr/portafolio`
- Publish it to your GitHub page using `gh-pages`


### Step 1 - Create React App and add `@allamgr/portafolio`

**Note:** replace username with your Github username

cd to your preferred directory and in the command line run:

```sh
$ npx create-react-app username.github.io
``` 
Then we cd into the created app

```sh
$ cd username.github.io
``` 

Then install `@allamgr/portafolio` library

```sh
# using npm
$ npm install --save @allamgr/portafolio

# or using yarn
$ yarn add @allamgr/portafolio
``` 

Then install `gh-pages` as will be needed to publish the website on GitHub pages
```sh
# using npm
$ npm install --save gh-pages

# or using yarn
$ yarn add gh-pages
```

Then edit the `package.json` file to include the following script under `scripts` section:
```json
"scripts": {
    ...,
    "push": "gh-pages -b gh-pages -d build"
}
```

### Step 2 - Create a JSON file with the required information and render portfolio.

Create a JSON file called `cv.json` under `src` folder with the following format, change the information as your needs.

```json
{
   "personalInfo": {
      "name": "👨‍💻 Name",
      "position": "Position",
      "brief": "Brief.",
      "email": "firstpartemail",
      "emailDomain": "domain.com",
      "location": "Azgard",
      "gender": "Male",
      "github": "username",
      "linkedin": "username",
      "twitter": "username"
   },
   "educationInfo": {
      "data": [
         {
            "school": {
               "name": "Name",
               "logoUrl": "https://logo.url/image.png",
               "acronym": "ACRONYM",
               "location": "Azrgard",
               "url": "https://azgard.edu.space"
            },
            "degree": "Thor Technology Assistant",
            "startYear": 2013,
            "endYear": 2017
         }
      ]
   },
   "workExperience": {
      "data": [
         {
            "company": {
               "name": "Advengers",
               "logoUrl": "https://advengers.image/image.png",
               "url": "https://www.advengers.end"
            },
            "title": "Time Traveller",
            "startYear": 2019,
            "startMonth": 12,
            "current": true,
            "description": "Working hard to get a seat in the table"
         }
      ]
   },
   "skillsAndTech": {
      "technologies": [
         {
            "name": "Javascript",
            "level": "advanced"
         },
         {
            "name": "CSS",
            "level": "advanced"
         },
         {
            "name": "React",
            "level": "advanced"
         },
         {
            "name": "Node.js",
            "level": "advanced"
         },
         {
            "name": "SQL",
            "level": "intermediate"
         },
         {
            "name": "MySQL",
            "level": "I"
         },
         {
            "name": "Typescript",
            "level": "I"
         }
      ]
   },
   "portfolio": {
      "projects": [
         {
            "name": "Save Hulk",
            "desc": "Create a suit for protect the people from hulk",
            "stack": [
               "react",
               "redux",
               "sass",
               "azure"
            ],
            "startYear": 2019,
            "endYear": 2020
         }
      ]
   }
}
```

Open your code editor in this case VSCode and delete the existing code in App.js and App.css

Go to your `App.css` file and set the following content:

```css
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

a {
  text-decoration: none;
}
```

Go to your `App.js` file and put the following content:

**Note:** for this tutorial we are using `TemplateLean` as it's the only default template available.

```js
import './App.css';
import { TemplateLean } from '@allamgr/portafolio'
import jsonData from './cv.json';

function App() {

  let json = JSON.stringify(jsonData);
  return (
    <div className="App container">
      <TemplateLean json={json}/>
    </div>
  );
}

export default App;

```

Runs your app and verify everything works fine:

```sh
# using npm
$ npm run start

# or using yarn
$ yarn start
```

Example expected result:
![cv-example1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628744702491/TgILhlGo4.png)

### Step 3 - Create GitHub repository

> 
The following info was taked from  [https://pages.github.com/](https://pages.github.com/) 

Go to  [create repository](https://github.com/new) page and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.

*If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.*

*To avoid errors, do not initialize the new repository with README, license, or .gitignore files. You can add these files after your project has been pushed to GitHub.*

See the image below: 
![user-repo@2x.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628742470331/CSjdiFj5g.png)


### Step 4 - Initialize git and add remote origin to the local repository:


1. Open Git Bash. 
2. Change the current working directory to your local project.
3. Initialize the local directory as a Git repository or Checkout to `main` branch if is already initialized.
```sh
# run if git is not initialized
$ git init -b main
# run if git is already initialized
$ git checkout -b main
```
4. Add the files in your new local repository. This stages them for the first commit.
5. Commit the files that you've staged in your local repository.
```sh
$ git commit -m "First commit"
```
6. At the top of your GitHub repository's Quick Setup page, click  to copy the remote repository URL.
7. In the Command prompt, add the URL for the remote repository where your local repository will be pushed.
```sh
$ git remote add origin  <REMOTE_URL> 
# Sets the new remote
$ git remote -v
# Verifies the new remote URL
```
8. Push the changes in your local repository to GitHub.
```sh
$ git push origin main
# Pushes the changes in your local repository up to the remote repository you specified as the origin
```

### Step 5 - Build and Publish the portfolio

To build the portfolio just run the following command:
```sh
# using npm
$ npm run build

# or using yarn
$ yarn build
```

To publish the portfolio just run the following command:
```sh
# using npm
$ npm run push

# or using yarn
$ yarn push
```

Go to your GitHub page setting, select `gh-pages` as the source branch.
and save the new settings.

#### Congratulations

You have your personal portfolio website in only 5 steps.

For more information about how GitHub pages works go to [this link](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) 

For more information about `allamgr/portafolio` go to [this link](https://allamgr-portafolio.netlify.app/)

Thanks for your time, hope you found this tutorial useful.

[Buy me a pizza](https://www.buymeacoffee.com/allamgr) 

Original posted on: [allamgr.hashnode.dev](https://allamgr.hashnode.dev/)