Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robertdavidwest/githubportfolio
https://github.com/robertdavidwest/githubportfolio
Last synced: about 9 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/robertdavidwest/githubportfolio
- Owner: robertdavidwest
- License: mit
- Created: 2023-03-13T16:21:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-29T15:31:25.000Z (9 months ago)
- Last Synced: 2024-04-19T16:13:54.551Z (7 months ago)
- Language: TypeScript
- Homepage: https://github-portfolio-iota.vercel.app
- Size: 12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Github Portfolio
Turn your Github Profile into a beautifully rendered Portfolio website in minutes for Free!
This project is a fork of the excellent [React JS Resume Project](https://github.com/tbakerx/react-resume-template) by [Tim Baker](https://github.com/tbakerx).
This is a React based personal resume website template. Built with typescript on the Next.js framework, styled with Tailwind css. We have made modifications on top of Tim's template to make this design robust to different information sets that may be found in each person's github account.
Team [Alphacas](https://github.com/alphacas) ([Chris Jung](https://github.com/cjung14), [Edmund He](https://github.com/EddieFahrenheit) and [Robert West](https://github.com/robertdavidwest)) have taken Tim's React App and automated the Data Ingestion from Github. Anyone can now very quickly and easily turn their existing Github account into a beautifully rendered Portfolio website!
## How it works
When you run this app in Dev or Prod, data will be automatically pulled from your public Github data, including your Bio and information and all of your **Pinned** Github repos will show up as your projects in your portfolio!
## Set up your Github Profile
You will just need to make sure that your Github account conforms to the following features and your data will automatically be rendered.
### Basic Info
1. Ensure you have filled out all of your Github Profile information including your **name**, **bio**, **Social Accounts**, you can fill out your profile information at this url when you are loggedin : https://github.com/settings/profile.
### Your respository selections for your projects
2. On your github homepage `https://github.com/`, click on **Customize your pins** and select the repos that you would like to show up in the project section of your site. Then, for every repo, follow these steps:
1. Click on the "settings" Icon in the About section of each repo. Add a description, a website url (if you have one) and add any Topics that are associated with your work. This could be languages used in the project e.g: **javascript**, **react** etc.
2. Add an image file in your repository named 'app-screenshot.png' with an image that you would like to have featured on each of your projects (if you don't add an image then a default octocat will be used)
### More details about you
3. Create a **user repo** in your Github account. Create a github repo with the same name as your username. Did you know that if you do this the repo has some special properties on Github, anything that you put in the repo `README.md` will show up on your Github profile page! We recommend setting this up even if you arn't using our template. [Here](https://dev.to/puenehfaith/how-to-beautifully-organize-your-github-profile-dha?ck_subscriber_id=1030950679&utm_source=convertkit&utm_medium=email&utm_campaign=Diversify+Tech+%23221%20-%209810757) is a useful resource for putting that together in general.
1. Inside the `README.md` add more detailed information about yourself, using the following template:
1. Add a more detailed **description** of yourself (the github bio is quite short and serves as a headline item), this will show up in the aboutme section of your site! Place the description between these tags:
```
Use this bio section as your way of describing yourself and saying what you do, ...
```
2. Add **aboutme** bullet points. These will also show up in the aboutme section. Add bullet points with a label followed by a colon:
```
- Location: in Space
- Nationality: Alien
- Study: Milky Way University
- Interests: Humans
- Age: 500000
- Employment: Oberver, Aliens Inc.
```
(NOTE1: You can omit any of these categories and everything will still work)
(NOTE2: You can add any custom categories, they will just show up without a logo)
3. You can also include both **blog** and an **email** address on your site by including them in the about me section:
```
.
.
.
- Email:
- Blog:
```
4. Add a list of **skills** and **levels**, copy the format below:
```
- Languages: Python: 8/10, JavaScript: 7/10, ...
- Frontend: React: 7/10, ...
- Backend: Node.js
```
(NOTE: Add as many bullets as you like, ensure the format matches exactly, including spacing)
(NOTE: If you don't want to show any of the following information on your Github page but still want it in your Github Portfolio then just put it between html comment tags ! like this: `<-- info here i dont want to show -->`
1. Upload your resume to github in one of either of these locations (if you have data in both them number 1 will be selected):
1. `https://github.com///blob/main/resume.pdf` (note: `main` or `master` will work fine)
2. `https://github.com//resume/blob/main/resume.pdf` (note: `main` or `master` will work fine)
## Upload your Linkedin data to Github (optional)
We have also made it possible for you to pull in your **Experience**, **Education** and **received recommendations** from your linked in profile! Unfortunetely LinkedIn does not make this data available via an API. So will need to follow these steps to manually obtain your linkedin data and use it on your website:
1. Follow these instructions from Linkedin to download your data: https://www.linkedin.com/help/linkedin/answer/a1339364 and be sure to select the option to download all data. For the data we need, a download link will become available 10 minutes after you have made the request.
2. Download the data and unzip the file.
3. Commit the following files to repo that you already created: ``:
- `Recommendations_Received.csv`
- `Positions.csv`
- `Education.csv`
Now the Sections **Experience**, **Education** and **Recommendations** will be populated with your data from linkedin. Anytime you want to refresh your linkedin data just download a new file from linkedin and replace the old one in the `` repo.
If you choose not to include linkedin data then these sections will simply be omitted from the portfolio site.
## Get Token to use the Github graphql api
* Login to your github account and go to : https://github.com/settings/apps
* Click "Personal access tokens" then "Tokens (classic)
* Click "Generate new token" > "Generate new token (classic)
* Add a note. e.g "GithubPortfolio"
* Set Expiration to "No Expiration". While Github warns against not having an expiration, there is no other way to keep the app working in perpetuity without intervention
* You should not need to set any particular scope for this token since all the information needed should be publically available. If you want to access private repo info you can select "repo"
* Click "Generate Token" and copy the token somewhere safe. You will not be able to retrieve it from Github again
## Environemt Variables
For this project to pick up all of your data automatically, you will need two environment variables to run the app in `dev` or `prod`. In dev you can create an environment file called `.env` and add your github user account and github token to the file:
```
# .env
GITHUB_USERNAME=
GITHUB_TOKEN=
```
## Thats it!
Now that your Github account is configured correctly, follow the steps below to set up your Portfolio website!
If you're feeling lucky, you can skip ahead to `Deployment` you have everything you need to run the app.
## Dev Setup
We advise running the application in local development before you launch, just to make sure the data layoutl looks as you expect. You can also then make personal customizations if you wish.
### 1. Make sure you have what you need
To build this website, you will need to have the latest stable versions of Node and Yarn downloaded and installed on your machine. If you don't already have them, you can get Node [here,](https://nodejs.org/en/download/) and Yarn [here.](https://yarnpkg.com/getting-started/install)
### 2. Fork and download this repo (and star if you like)
Next, find the `Fork` button in the top right of this page. This will allow you to make your own copy, for more info on forking repo's see [here.](https://docs.github.com/en/get-started/quickstart/fork-a-repo#forking-a-repository) After this, download to your development machine using the green `Code` button at the top of the repo page.
### 3. Install dependencies and run
Once you have your own copy of this repo forked and downloaded, open the folder in your favorite terminal and run `yarn install` to install dependencies. Following this, run `yarn dev` to run the project. In your terminal you should be given the url of the running instance (usually http://localhost:3000 unless you have something else running).
### 4. Make any other changes you like
Of course, all of the code is there and nothing is hidden from you so if you would like to make any other styling/data changes, feel free!
## Deployment
Deploy to Vercel and enjoy your new Resume Website
Deploying your new site to Vercel is simple, and can be done by following their guide [here.](https://vercel.com/guides/deploying-nextjs-with-vercel) When you're all done and the build succeeds, you should be given a url for your live site, go there and you'll see your new personal resume website! Congratulations!
Remember to add the environment variables
GITHUB_USERNAME=
GITHUB_TOKEN=
when you deploy!
Whenever you make changes in your Github account, the changes will automatically flow thru to your new website. NOTE: The static web page will be refreshed every 30 minutes so don't expect to see the changes right away. We cannot check for new data more often than this because of the limitations on the github api.
While it is beyond the scope of this initial project, it is possible to request an API TOKEN for the github API for your account so that you will be able to make requests more often. You will need to make some change to the parts of the code that make requests. If you do so, you can change the amount of time that the app will wait to check for new data [here](https://github.com/alphacas/GithubPortfolio/edit/main/README.md) by adjusting the value of `revalidate` (in seconds).
## Project Created & Maintained By
[Chris Jung](https://github.com/cjung14), [Edmund He](https://github.com/EddieFahrenheit) and [Robert West](https://github.com/robertdavidwest)
## Original Project created by :
[Tim Baker](https://github.com/timbakerx)
#### If this template has helped you and you'd like to support Tim's work, the original template creator, feel free to [♥️ Sponsor](https://github.com/sponsors/tbakerx) his project