https://github.com/robbield/github-portfolio
A showcase site which can be forked and used by anyone with a GitHub Account to showcase their GitHub Profile and Repositories
https://github.com/robbield/github-portfolio
github github-pages portfolio portfolio-page portfolio-website
Last synced: about 2 months ago
JSON representation
A showcase site which can be forked and used by anyone with a GitHub Account to showcase their GitHub Profile and Repositories
- Host: GitHub
- URL: https://github.com/robbield/github-portfolio
- Owner: RobbieLD
- Created: 2019-03-05T17:17:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-29T09:51:53.000Z (about 7 years ago)
- Last Synced: 2025-06-07T15:04:50.160Z (about 1 year ago)
- Topics: github, github-pages, portfolio, portfolio-page, portfolio-website
- Language: TypeScript
- Homepage: https://robdavis.dev/#/home
- Size: 543 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GiHhub Portfolio
## Description
Github Portfolio is a simple web project to help showcase you're projects and skills on GitHub and provide an online Resume of sorts to show off. The iead is that you'll fork this repo to your own GitHub account and modify it to present your own customized show case. Detailed instructions on that are as follows.
## Set up
1. Fork this repository
2. Clone the code to your local machine
3. Install all the npm packages with `npm install`
4. Create the `public/config.json` based on the `config.json.sample` file. Details on how to set it up are in the config section below.
5. Run up the deverlopment server to test your changes by running `npm run serve`
6. Once you're happy with the look of your profile create a distribution using the command `npm run build`
7. All the files you need are in the `dist` directory. Simply deploy them with [GitHub Pages](https://pages.github.com/).
8. Optional: Buy a domain (such as a [.dev](https://domains.google/tld/dev/) one) and point it at your new profile site.
## Config File
The config file defines what data will be pulled from the GitHub account and how it will be displayed in the profile. Below are descriptions of each of the sections of the config file.
### githubUser
This is your GitHub username and defines the user for which the portfolio will display information.
### profile
The section displayed how the profile is displayed.
#### class
This determines which css class is used to style the profile section. All the colour css classes come from [bulma.io hero](https://bulma.io/documentation/layout/hero/) element.
#### showLocation
This is a boolean which determins if you're GitHub location is displayed on the user profile section at the start of the portfolio
#### interestTypes
This defines the legend to be used for the little tag colors displayed on the profile section. Each of these is a named object which has a title and colour class. The name of the object is used as the key when you're setting up the interests tags later on.
The title is simply the title of the tag and the colorClass is the bulma css. It's the same classes as mentioned in the profile class section. The possible values are:
- is-primary
- is-info
- is-warning
- is-danger
- is-success
- is-light
- is-dark
#### interests
These are the little tags which appear below your profile imformation. The structure of each interest consists of a `title` which is the text displayed, a `type` which comes from the `interestTypes` above and a `sizeClass` which a [bulma tag size](https://bulma.io/documentation/elements/tag/)
### social
This is an array of objects which create the menu items in the right of the nav bar. These objects configure which social media and other sites you'd like as icon links in the nav bar on the right. Each objects in the social array consists of the follwing two properties.
#### url
The url the link points to.
#### service
This is the name of the site. The supported sites so far are as follows.
- twitter
- bitbucket
- stack-overflow
- npm
- envelope
- facebook
- flickr
- 500px
### sections
These are the main sections of the whole site. As with the interests sections above they consist of several properties. Each section has a `title` which is these large text at the top. They also have a class which again comes from [bulma heros](https://bulma.io/documentation/layout/hero/). Finally they have an array of repos names. These are the names of the GitHub repositories in your GitHub profile you'd like displayed in the section.
#### repository demo url
You might notice that some of the repositories in a section have a small red icon next to them. This automatically renders if that GitHub repository has a url defined in the website field in the repo settings.
### externalRepositories
A string array of repositories outside the account specified by `githubUser` in the form `{username}/{repositoryName}`.
The name of the repository can then be used in the `sections` to have the repository displayed - username is not required in the sections.
## Themes
To pick a theme for your site, have a look at [Bulmaswatch](https://jenil.github.io/bulmaswatch/) and pick a theme. Change the name of the default them in the `src/assets/app.scss` import line to be the name of your chosen theme. For example if you're wanting to use the 'minty' theme make the theme import line read as follows: `@import '~bulmaswatch/minty/bulmaswatch.scss';`
You can also add in overrides to the colours in the `app.scss` file to make the theme truely yours. The avaliable colours and fonts which can be overriden as listed [here](https://github.com/jenil/bulmaswatch/blob/gh-pages/darkly/_variables.scss)