Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2KAbhishek/projects
Showcase All Your Projects 🛍️🎇
https://github.com/2KAbhishek/projects
devicons github portfolio projects-list showcase vanilla-js website
Last synced: 2 months ago
JSON representation
Showcase All Your Projects 🛍️🎇
- Host: GitHub
- URL: https://github.com/2KAbhishek/projects
- Owner: 2KAbhishek
- License: gpl-3.0
- Created: 2022-07-30T03:03:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-06T06:50:05.000Z (8 months ago)
- Last Synced: 2024-06-12T07:16:22.540Z (7 months ago)
- Topics: devicons, github, portfolio, projects-list, showcase, vanilla-js, website
- Language: JavaScript
- Homepage: https://2kabhishek.github.io/projects
- Size: 1000 KB
- Stars: 241
- Watchers: 6
- Forks: 132
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - 2KAbhishek/projects - Showcase All Your Projects 🛍️🎇 (JavaScript)
- project-awesome - 2KAbhishek/projects - Showcase All Your Projects 🛍️🎇 (JavaScript)
README
## Introducing Projects
Present all your projects in style with a super customizable web app! ✨
`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, that should auto update from GitHub
## Getting Projects
To get projects, follow these steps:
```bash
git clone https://github.com/2kabhishek/projects
cd projects
```
### Setup Your Own Projects
You can set up projects for yourself by following these steps:
- Fork the repo: https://github.com/2kabhishek/projects
- Clone it locally / Open it in GitHub Codespaces
- 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 own.
- You may also want to update the favicon by updating the `link` tag in `index.html`
- Commit and push your changes
- Go to repo settings on GitHub, under `Pages` enable GitHub Pages.
- Choose 'Deploy from a branch' with the `main` branch and `/` as the root directory.
- Done!
The site should be live on `https://.github.io/projects`
#### Number Of Repos
The number of repos shown changes with 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 show up on the same page.
### Forked Repos
To show forked repos 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 and browser settings.
Edit the variables under `:root` in `styles.css` to change color scheme.
### Programming Language Icons
This project uses [Devicon](https://devicon.dev/) for adding language icons, if the language name and icon are not
displayed, for any of your repos, update `devicons` mapping in `script.js`.
## How it was built
I built `Projects` using `HTML` `CSS` `JavaScript` and Neovim
## What I learned
- Learned about some quirks of the fetch API, during implementation of `maxPages`.
- Revisited Flex, box-shadow and some other CSS tricks
## What's next
You tell me!
Hit the ⭐ button if you found this useful.
## More Info
