Coder Social home page Coder Social logo

gportfolio / gportfolio Goto Github PK

View Code? Open in Web Editor NEW
365.0 365.0 41.0 21.89 MB

Creating an automatic portfolio based on Github profile

Home Page: https://oleksiikhr.github.io/

License: MIT License

TypeScript 77.18% JavaScript 0.68% SCSS 8.34% EJS 13.79%
cv github github-pages personal-website portfolio portfolio-template resume theme webpack

gportfolio's Introduction

GPortfolio

GPortfolio

Version Build Total alerts License

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

Default template

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

gportfolio's People

Contributors

dependabot-preview[bot] avatar lucasgdb avatar oleksiikhr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gportfolio's Issues

sorting by stars

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
I'd like a "sort by stars" option, it'd help a lot.

Describe alternatives you've considered
no one.

Additional context

My most starred repo is on the last position:
Screenshot from 2019-09-20 15-30-05

possible to run two filters at once?

Hi
Is it possible to run two filters on the repositories at once. I mean I want to get rid of all the forks, apart from one, "flappy-musk"

{ attr: 'fork', values: true, revert: true, more: '' },
{ attr: 'name', values: "flappy-musk", revert: true, more: '' },

But this does not seem to work. Once a filter has been applied are the repositories are completely removed from the repositories array?

I was thinking it might be possible to do something like:

{ attr: 'fork', values: true, revert: true, more: '&& name!=\'flappy-musk\' ' },

but this does not seem to work

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.