https://github.com/jimbrig/projects
Showcasing of All My Projects
https://github.com/jimbrig/projects
gh-pages projects-list website
Last synced: 3 months ago
JSON representation
Showcasing of All My Projects
- Host: GitHub
- URL: https://github.com/jimbrig/projects
- Owner: jimbrig
- Fork: true (2KAbhishek/projects)
- Created: 2022-08-04T13:42:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-06T06:50:07.000Z (10 months ago)
- Last Synced: 2024-08-09T02:15:35.134Z (7 months ago)
- Topics: gh-pages, projects-list, website
- Language: JavaScript
- Homepage: https://docs.jimbrig.com/projects
- Size: 981 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - jimbrig/projects - Showcasing of All My Projects (JavaScript)
README
## GitHub Projects Site
`Projects` uses the GitHub API to list all your GitHub projects in a nice searchable grid. Also shows pretty programming icons using `devicons`.
`Projects` uses the GitHub API to list all your GitHub projects in a nice searchable grid.
Also shows pretty programming icons using `devicons`.
## Inspiration
Needed a way to display all my projects, used my [portfolio's project section](https://2kabhishek.github.io/#projects) as inspiration.
## Getting Projects
To get projects, follow these steps:
```bash
git clone https://github.com/2kabhishek/projects
cd projects
```
## Setup Your Own Projects
You can easily set up projects to show your own repos.
- Fork the repo
- Clone it
- Open up `script.js` and update the `username` variable to your GitHub username.
- Open up `index.html` and update the `title` tag to make it your username.
- You may also want to update the favicon too, update the `link` tag in `index.html`
- Push your changes
- Go to repo settings on GitHub and enable GitHub Pages.
The site should be live on `https://.github.io/projects`
Here's the projects page for [@sindresorhus](https://github.com/sindresorhus)
### Number Of Repos
The number of repos is controlled by the `maxPages` variable, the GitHub API supports 100 repos per page max.
If you have less than 100 repos, set `maxPages` to 1, if you have 300 then 3.
You can also edit the fetch query to reduce the per page repo count.
> There's no pagination, all repos are shown on the same page.
### Forked Repos
Forked repos are hidden by default, to show them set `hideForks = false` in `script.js`
### Authenticated Requests
If you are working locally and notice the API is not sending over data, it might be because of rate limit on GitHub API requests.
You can either wait for an hour or setup a personal access token on GitHub and pass that into the fetch request in `script.js`
### Themes
Comes with a dark and light theme by default, depends upon your system configs.
Edit the variables under `:root` in `styles.css` to modify colorscheme.
### Programming Language Icons
This project uses [Devicon](https://devicon.dev/) for adding language icons, if the language name and icon are not being
displayed correctly for any of your repos, update `devicons` mapping in `script.js`.
## Viewing projects
Open `index.html` in your favorite browser or visit [2kabhishek.github.io/projects](https://2kabhishek.github.io/projects).
## How it was built
Projects was built using `HTML` `CSS` & `JavaScript`.
It was built on Neovim and the python http server.
Uses GitHub API for data and Devicons for programming icons.
## What I learned
- Learned about a few quirks of the fetch API, especially implementation of `maxPages`.
- Flex, box-shadow and some other CSS tricks were revisited.
## What's next
You tell me!
Hit the ⭐ button if you found this useful.
## More Info