GPortfolio

Plans

Create ui, with which you can simply create your portfolio online without editing any files. After development is complete, major changes to this repository are possible.

• More automation
• More customization options
• Get data from various sites in one click
• Deploy to various sites or upload as html

Repository Server

Introducing

Automatically create a portfolio based on data from various social networks.

Configure data -> build -> deploy

See example | Default template

Benefits

• Documented code
• Configuration in one place
• Filters after receiving data from API
• Webpack + babel + es6
• Multiple template support
• The Open Graph protocol (social share)
• Progressive Web Apps (offline access)
• The ability to obtain data from:
  • Github
  • Dribbble

How to install

<username>.github.io

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

<username>.github.io/<repo>

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

Templates

Contributors

FAQ

• How to get your repositories from the organization?
• How to make a new template?
• How to refresh data from API?
• How to change favicon?
• How to connect Dribbble or another?

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

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.ts 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 public folder.

How to connect Dribbble or another?

See here

How to contribute

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

Structure

• assets - files that directly build webpack.
• cache - temporarily created files, for example - data from the GitHub API.
• dist - compiled files that are uploaded to repository.
• docs - documentation (.md files)
• core - running scripts (retrieving data from API) before webpack work
• node_modules - libraries.
• public - all files from this folder will be copied to the dist folder (user files).
• scripts - small cli scripts.
• src - source files.

How can you improve?

• Default template
  • Display data shots from Dribbble (modules.dribbble.shots)
• Add more templates or improve existing.
• Add more sites for parse data.
• Add tests
• Support merge config.example.ts to config.ts after update
• Other improvements.

Changelog

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

License

MIT