GPortfolio / GPortfolio

Creating an automatic portfolio based on Github profile

GPortfolio

Introducing

Automatic portfolio creation based on Github profile.

Example - Default theme: Github / Website

Previous Version v3

Features

• 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>.github.io | [Settings -> Repository name]
• Enable Github Actions and profile.yml for autodeploy | [Actions tab -> profile.yml]
• Generate new access token and add this value to the repository settings as ACCESS_TOKEN | [Settings -> Secret]
• Fill the config.ts file in root directory with your data and push changes
• Change Github page to gh-pages branch | [Settings -> Pages -> Source]
• Open the site (<username>.github.io)

Templates

Config

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: 'https://example.com/image.png'

Example

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
    // https://ogp.me/
    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
    // https://web.dev/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="<key>" content="<value>">
    meta: {
      description: 'My Portfolio',
      viewport: 'width=device-width, initial-scale=1.0',
    },

    www: {
      // If you are using your domain and not <username> .github.io
      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: {
        // https://github.com/<nickname>
        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;

Filter

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' },
  ],
]

Sorter

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 },
]

Utils

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

All data is stored in the ./data folder.

# 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.

Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

License

MIT