shaansubbaiah/Portfolio

Automatically generate a beautiful, responsive site to display your GitHub projects.
Live demo at shaansubbaiah.github.io
If you find Portfolio useful, make sure to 🌟 the repository!

Features

Website features
- Responsive
- Dark Mode
- SEO score of 100 on Lighthouse
- Customizable colors, no. of repos, social, links, etc
- Supports displaying repository social preview images
- Display GitHub profile README.md
- To-do: GitHub Gists support using iframe embeds
- To-do: Blurry/Frosted glass styled repo cards
Deploy to GitHub pages directly from Portfolio
Uses ViteJS under the hood fu=or building, live preview on development

Getting Started

Install

Clone the repo or download the latest release

git clone git@github.com:shaansubbaiah/Portfolio.git

Install dependencies

cd Portfolio

npm install

Run Portfolio

node portfolio.js

Set the Github token, edit the config and then build!

See Configuration

A token can be created at https://github.com/settings/tokens/new

Make sure you have selected atleast public_repo, read:user permissions while creating the token!

You can deploy the website to your github pages site (generally https://.github.io) from Portfolio. OR Manually copy contents in dist/ to your github pages repository.
Done

Development

Portfolio now uses ViteJS which significantly improves over the previosuly existing development workflow.

The website files are in src/

To view the site with hot-reload on changes, run:

npm run dev

If there's data missing, you might have to build the site once so it writes the GitHub data to ./github-data.json

Building

Run Portfolio and select the build option.

Under the hood, Portfolio runs vite build which reads the config from vite.config.js and the build files are at dist/

Configuration

username: String - your Github username

repos: Integer - number of repositories to display, MAX 100

avatar: String - path(local/remote) to an image for the avatar and favicon. If not specified, uses your GitHub avatar.

linkedinURL: String - your LinkedIn profile link. Set to null in config.json to disable it / press enter while setting it up.

twitterId: String - your Twitter profile id. Set to null in config.json to disable it / press enter while setting it up. (Portfolio will automatically get your Twitter ID if you have added it to your GitHub profile)

gitlabId: String - your GitLab profile id. Set to null in config.json to disable it / press enter while setting it up.

navLinks: Object Array - adds navigation links at the top. DON'T EXCEED 3

where,
name: String - Text to display
link: String - URL the text links to

infoLinks: Object Array - adds additional links in the information section.

where,
name: String - Text to display
link: String - URL the text links to

socialPreviewImage: String - displays repo's social preview image in the card. To enable, set value = "enabled".

Contributing

See CONTRIBUTING.md

Gitfolio

Dev Portfolio