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

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.
8. Optional: Buy a domain (such as a .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 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

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

github-portfolio's Issues

Commits, Contributors and Releases data

I have hooked up the projects with the data that we have in the GithubRepo object but there are several fields that are not available.

We can get this data but may run into issues with rate limiting on the GIthub API.

The 3 missing fields are number of commits, releases and contributors. There are no counts of this data available but we can get all the data and count it ourselves. The problem it is paged.

e.g.
https://api.github.com/repos/RobbieLD/github-portfolio/commits?per_page=5
Gives us the first 5 commits (obviously we can say more than 5 but there's only 17 commits currently and this give us multiple pages)

This also has the Link header in the response with the value
<https://api.github.com/repositories/173989281/commits?per_page=5&page=2>; rel="next", <https://api.github.com/repositories/173989281/commits?per_page=5&page=4>; rel="last"

This gives us the link the next page and the last page. We can go the last page and see there are 2 commits and infer 3 full pages of 5 each before that and get 17 commits total.

If the Link header is absent then all the data is on page 1. This still means 6 requests per repo to get all the data we want.
Might be easier to just not include it?

Missing Types?

@a-jackson Any ideas why in the vuex branch which I've just pushed to, it doesn't like the CreateProxy in the NavBar.vue when it works fine in the store.ts. I've mentioned you in a comment there if it helps you find it.