Skip to content
Creating an automatic portfolio based on Github profile
Branch: master
Clone or download
Latest commit 676b2c8 Jun 18, 2019



Build Status Version Dependency Status devDependency Status License


Creating an automatic portfolio based on Github profile. When building a project, we get a profile and repositories with the Github API and generate an html file based on the chosen one.

See examples


  • Documented code
  • Filters after receiving repositories with the Github API
  • Webpack + babel + es6
  • The Open Graph protocol
  • Multiple template support
  • Progressive Web Apps (PWA) - the site is available offline

How to install

After running the npm run deploy command, the utils/deploy.js script is launched, which initializes git in the dist folder and makes a force push in the <username> repository or <repo> in the gh-pages branch.

npm run deploy - overwrites all data


  • Clone this repository on your PC
  • Copy config.example.js to the config.js file and config this
  • Create <username> repository
  • Run npm ci && npm run build && npm run deploy
  • Open <username> in the browser


  • Fork this repository and clone on your PC
  • Rename to <repo>, example - portfolio
  • Copy config.example.js to the config.js file and config this
  • Run npm ci && npm run build && npm run deploy
  • Change Source GitHub Pages to gh-pages branch
  • Open <username><repo> in the browser




How to get your repositories from the organization?

You need to get a token from Github with access to public_repo, and add it to config.js.

Read more

How to make a new template?

Run the command to create base files with required default content:

$ npm run template <name>

Change the template in the config.js file:

module.exports = {
  template: 'default' // <name> 

Run the project with a new template in dev mode:

$ npm run dev

<name> - new template name

How to refresh data from API?

Data is cached to the API Github cached, to avoid the limit. It lasts about an hour.

But you can force to refresh the data by deleting the cache folder.

How to change favicon?

Put the file favicon.ico in the assets folder.

List of user portfolios

How to contribute

Please make sure to read the Contributing Guide before making a pull request.


  • assets - files that do not directly build webpack.
  • cache - temporarily created files, for example - data from the GitHub API.
  • dist - compiled files that are uploaded to your repository/gh-pages branch.
  • node_modules - libraries.
  • public - all files from this folder will be copied to the dist folder and access by url: /static/public/*.
  • src - source files.
  • utils - files that work with the node: getting data from the API, script for creating a new template, etc.


Detailed changes for each release are documented in the



You can’t perform that action at this time.