Need help with GPortfolio?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

246 Stars 35 Forks MIT License 629 Commits 4 Opened issues


Creating an automatic portfolio based on Github profile

Services available


Need anything else?

Contributors list



Version Build Total alerts License


Automatic portfolio creation based on Github profile.

Example - Default theme: Github / Website

Previous Version v3


  • All settings are in one file config.ts
  • Vanilla JS, no frameworks
  • Ability to change data on the fly (in dev mode, you just need to refresh the page)
  • Adding new services (like Github API) to get data and fill the template
  • Configuring, sorting and filtering the received data
  • Ability to add new templates and switch between them
  • Support for Progressive Web Apps (offline access)
  • Support for The Open Graph protocol (social share)
  • Automatic daily page build with Github Actions

How to install

  • Fork this repository
  • Rename the forked repository to <username> | [Settings -> Repository name]
  • Enable Github Actions and
    for autodeploy | [Actions tab -> profile.yml]
  • Generate new access token and add this value to the repository settings as
    | [Settings -> Secret]
  • Fill the
    file in root directory with your data and push changes
  • Change Github page to
    branch | [Settings -> Pages -> Source]
  • Open the site (<username>


Default template


Not all possible data are listed here, you can find more in IConfig interface. Also use typehint hints from your IDE.

All images must be loaded via callback, example:

image: () => require('./public/my-image.png')

If the image is a link from the Internet, then simply:

image: ''


export default {
  // Choosing a template for generating a site, a list of available in the [Templates] section
  template: 'default',

global: { // Format: language_TERRITORY locale: 'en_US', // default value

// The Open Graph protocol
opg: {
  // All settings have already been added, but if you want to expand with
  // new values or replace, you can always do it here:
  'og:image:alt': 'Profile image',

// Progressive Web Apps
pwa: {
  // If you want to change the data when generating manifest.json
  description: 'My Portfolio',
  theme_color: '#000',

// HTML Meta tags
// <meta name="&lt;key&gt;" content="&lt;value&gt;">
meta: {
  description: 'My Portfolio',
  viewport: 'width=device-width, initial-scale=1.0',

www: {
  // If you are using your domain and not <username>
  domain: '',


// This is the main property, the data from which fill the template // If any services are used (like Github), then this data can be // automatically filled in data: { // To replace generated values or add missing data hireable: true, gender: 'male', position: 'Software Developer', avatar: () => require('./public/my-image.png'), },

// Here are the services from which you can automatically get the latest data services: { github: { configuration: { // nickname: 'myNickname', // This data is used when making requests to the Github API fetcher: { repositories: { type: 'all', }, }, // When generating a template, the received data is filtered, // described in more detail in the [Filter] section filter: { repositories: [ [ { attr: 'owner.login', values: ['myNickname', 'orgName'] }, { attr: 'id', values: 123456, options: { sign: '>' } }, ], [ { attr: 'fork', values: false }, ], ], }, // Output data is also sorted in more detail in the [Sorter] section sort: { repositories: [ { attr: 'created_at', sortByDesc: true }, { attr: 'forks_count', sortByDesc: true }, ], }, }, }, },

// Each template can have its own unique settings templates: { // Template name default: { configuration: { githubRepositoriesMore: 2, background: () => require('./public/background.png'), }, }, }, } as IConfig;


Filtering allows you to filter data when displaying information on the site.

Use cases

Output repositories that are not forks AND number of stars greater than 10.

    { attr: 'fork', values: false },
    { attr: 'stargazers_count', values: 10, options: { sign: '>' } },

Output repositories that are not forks OR number of stars less than 10.

    { attr: 'fork', values: false },
    { attr: 'stargazers_count', values: 10, options: { sign: '

Output repositories where (the number of forks is more than 10 AND non-Javascript language) OR (TypeScript language).

    { attr: 'forks_count', values: 10, options: { sign: '>' } },
    { attr: 'language', values: 'JavaScript', revert: true },
    { attr: 'language', values: 'TypeScript' },


Sorting allows you to sort data while displaying information on the site.

Use cases

Sort repositories by creation date.

  { attr: 'created_at', sortByDesc: true },

Sort the repositories first by the number of stars, and then by creation date.

  { attr: 'created_at', sortByDesc: true },
  { attr: 'stargazers_count', sortByDesc: true },


For Github, a token is required to get information about the organization's repositories.

All data is stored in the

# Fetch Github data
$ yarn github:profile ACCESS_TOKEN
$ yarn github:repositories ACCESS_TOKEN

How to contribute

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


Detailed changes for each release are documented in the



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.