I Made a Web App to Showcase all your GitHub Projects 😍✨
source link: https://dev.to/2kabhishek/i-made-a-web-app-to-showcase-all-your-github-projects-le3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I Made a Web App to Showcase all your GitHub Projects 😍✨
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, used my portfolio's project section as inspiration.
Getting Projects
To get projects, follow these steps:
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 theusername
variable to your GitHub username. - Open up
index.html
and update thetitle
tag to make it your username. - You may also want to update the favicon too, update the
link
tag inindex.html
- Push your changes
- Go to repo settings on GitHub and enable GitHub Pages.
The site should be live on https://<your-username>.github.io/projects
Here's the profile for @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.
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
Viewing projects
Open index.html
in your favorite browser or visit 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
Add more languages to devicons if necessary.
Hit the ⭐ button if you found this useful.
2KAbhishek / projects
Showcase All Your Projects 🛍️🎇
Projects
Showcase All Your Projects 🛍️🎇
projects screenshotIntroducing 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, used my portfolio's project section as inspiration.
Getting Projects
To get projects, follow these steps:
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 theusername
variable to your GitHub username. - Open up
index.html
and update thetitle
tag to make it your username. - You may also want to update the favicon too, update the
link
tag inindex.html
- Push your changes
- Go to repo settings on GitHub and enable GitHub Pages.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK