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
![]() |
![]() |
Automatically create a portfolio based on data from various social networks.
Configure data -> build -> deploy
See example | Default template
- 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:
- 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
- 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
![]() |
- 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?
You need to get a token from Github with access to public_repo
,
and add it to config.ts.
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*
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.
Put the file favicon.ico in the public folder.
Please make sure to read the Contributing Guide before making a pull request.
- 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.
- Default template
- Display data shots from Dribbble (
modules.dribbble.shots
)
- Display data shots from Dribbble (
- 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.
Detailed changes for each release are documented in the CHANGELOG.md.