Showcase All Your Projects ๐Ÿ›๏ธ๐ŸŽ‡

Overview

Projects

License People Stars Forks Watches Last Updated

Showcase All Your Projects ๐Ÿ›๏ธ ๐ŸŽ‡

projects screenshot
projects screenshot

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 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://<your-username>.github.io/projects

Here's the projects page for @sindresorhus

sindresorhus's projects

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 = true 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 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.

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

Comments
  • Give credit

    Give credit

    What

    Creates text at the bottom of the page giving credit

    What does this pull request accomplish?

    • [x] Finished item

    How

    • Added an h4 tag in index.html with a link to this repo and a nice โค emoji.

    Why

    • [x] I want to add credit for the OG repo

    Screenshots (If applicable)

    Notes

    Checklist

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [ ] I have commented my code, particularly in hard-to-understand areas
    • [x] New and existing unit tests pass locally with my changes
    opened by Wjplatformer 2
  • Did automation of title and other stuff

    Did automation of title and other stuff

    What

    What does this pull request accomplish?

    • [x] Finished item

    How

    What code changes were made to accomplish it?

    • Created init.js
    • imported username variable from init.js to script.js
    • created a HTML tag in index.html which links to this repo

    Why

    • [ ] I want to fix the issue # (issue)
    • [x] I want to add a new feature
    • [x] I want to improve the documentation
    • [ ] I want to fix the tests
    • [x] I want to improve code organization (not putting the edits directly in script.js in this case

    Screenshots (If applicable)

    image

    Notes

    I added my own logo for no reason, I can delete it if you want :)

    Checklist

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] New and existing unit tests pass locally with my changes
    opened by Wjplatformer 2
  • [BUG]:  Merge Update Problem

    [BUG]: Merge Update Problem

    Description of the bug

    Can't merge or update account x's repo of projects

    Since I'm probably the first user, I saw a problem when I changed the docs. I could not merge my commit and yours later. Is that a nooby misunderstanding of mine or a real issue? I'm not sure...

    image image

    Steps To Reproduce

    1. Create a fork on account x
    2. Create a PR and wait until merged by @2KAbhishek
    3. Create another PR to update this repo on account x
    4. Can't merge!

    Additional Information

    Check out https://github.com/Wjplatformer/projects/pull/1 to see the bug (or something else)

    bug 
    opened by Wjplatformer 2
  • [ENH]: New screenshots for markdown

    [ENH]: New screenshots for markdown

    Description

    For the 2.0 update, @2KAbhishek added a code and live link for certain projects such as GitHub pages and profile README's. I think that changing the images/screenshot.png and changing @sindresorhus 's project page would be needed. However, I can't make a PR as my screen is very small and cannot take a big screenshot. :(

    Additional Information

    For reference on why it should be changed: image

    enhancement 
    opened by Wjplatformer 1
  • [BUG]: Sindre Sorhus link ๐Ÿ’€

    [BUG]: Sindre Sorhus link ๐Ÿ’€

    Description of the bug

    Sindre Sorhus link links to nothing. A possible solution

    Steps To Reproduce

    1. Go to README.md
    2. click on @sindresorhus blue link
    3. GitHub 404

    Additional Information

    image

    image

    bug 
    opened by Wjplatformer 1
  • Added title change

    Added title change

    What

    This adds a line stating on how to change the title of the HTML page. It is possible to do this with JS... though, if the reviewers prefer.

    What does this pull request accomplish?

    • [x] Finished item
    • [ ] Item in progress
    • [ ] Fixes # (issue)
    • [x] Update Docs

    How

    What code changes were made to accomplish it?

    • Added a step to the markdown

    Why

    • [ ] I want to fix the issue # (issue)
    • [ ] I want to add a new feature
    • [x] I want to improve the documentation
    • [ ] I want to fix the tests

    Screenshots (If applicable)

    image

    Notes

    Please merge it ๐Ÿฅบ. Also we can change the favicon if we want๐Ÿคทโ€โ™‚๏ธ

    Checklist

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [ ] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] New and existing unit tests pass locally with my changes
    opened by Wjplatformer 1
  • Add credits sections

    Add credits sections

    • Update script
    • Update index.html
    • Add files via upload
    • New PFP!
    • Update index.html
    • Minor change
    • Update for PR
    • Update for PR
    • Add credits

    Thanks @Wjplatformer

    opened by 2KAbhishek 0
  • first commit

    first commit

    What

    What does this pull request accomplish?

    • [ ] Finished item
    • [ ] Item in progress
    • [ ] Fixes # (issue)

    How

    What code changes were made to accomplish it?

    • Modify the foo function to return bar
    • Remove the baz function

    Why

    • [ ] I want to fix the issue # (issue)
    • [x] I want to add a new feature
    • [ ] I want to improve the documentation
    • [ ] I want to fix the tests

    Screenshots (If applicable)

    Notes

    Checklist

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] New and existing unit tests pass locally with my changes
    opened by rozodkarbharat 0
  • [BUG]: Incomplete info and text squeeze

    [BUG]: Incomplete info and text squeeze

    Description of the bug

    I had not reviewed my own projects pages in a while, and I found out that not all 17 of my projects are listed on the page. There is also a -1 repo on the repo counter. I tried deleting the fork and forking it again, but it didn't solve the issue. There is also a text squeeze when you search a project. This is a serious bug :skull:

    • [x] Incomplete info
    • [ ] Text Squeeze

    Steps To Reproduce

    1. Go to https://wjplatformer.github.io/projects
    2. Count the number of repo's profiles (those square boxes) displayed versus the actual number.
    3. See the repo counter and go to https://github.com/Wjplatformer and see the GH repo counter and compare it to the projects counter
    4. Search some keywords
    5. See the text squeeze

    Additional Information

    profile display: image count display: image image text squeeze: image

    bug 
    opened by Wjplatformer 12
Releases(2.0)
  • 2.0(Aug 14, 2022)

    What's Changed

    • System based themes support! Theme changes automatically depending on your settings.
    • Sort your projects by star count!
    • Show star and fork counts along with their links.
    • Option to hide forked repositories, enabled by default. To disable set hideForks = false in scripts.js
    • If project has a homepage, show two buttons instead of one.
    Source code(tar.gz)
    Source code(zip)
Owner
Abhishek Keshri
Craftsperson ๐Ÿ’ผ | Learner ๐Ÿ“š | Maker ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป | Explorer ๐Ÿ”Ž
Abhishek Keshri
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Solved by Flexbox A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. View Site Viewing the

Philip Walton 13k Jan 2, 2023
Example of a ceramic app to showcase dynamic NFT capability

This is an example application that uses Ceramic, based on Next.js. Fork it freely. Getting Started Install dependencies. Create local ENV file with y

Ceramic Studio 12 Sep 6, 2022
Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Mai 1 Jan 22, 2022
A example vault to collect and showcase various dataview queries. Created on behalf of AB1908

Obsidian Example Vault for Dataview Queries Good day! This example vault showcases different usages of the Dataview plugin for Obsidian.md. You'll fin

s-blu 184 Jan 5, 2023
Template to showcase different use-cases about Ionic, Firebase, Capacitor

Ionic, Angular, Capacitor, and Firebase Template This is a starter templates for projects using Ionic, Angular, Capacitor, and Firebase. It covers the

Jorge Vergara 7 Oct 6, 2022
A guide to showcase use cases for web3.js and ethers.js libraries

Use case using web3.js and ethers.js The purpose of these scripts is to show how to build common cases of interaction with the blockchain using web3.j

ProtoFire 6 Aug 31, 2022
deno-ja (Deno Japanese community) showcase

Showcase Denoๆœฌๅฎถใ‚ˆใ‚Šใ‚‚ๆฐ—่ปฝใซไฝœใฃใŸใ‚‚ใฎใ‚’ๅ…ฌ้–‹ใงใใ‚‹ใ‚ˆใ†ใชShowcaseใงใ™ใ€‚ ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆใฎๆ’ฎๅฝฑๆ–นๆณ• ็Ÿญใ‚ใฎidใ‚’ๆฑบใ‚ใฆใ„ใŸใ ใ„ใฆใ€ไธ‹่จ˜ใฎใ‚ˆใ†ใซใ‚นใ‚ฏใƒชใƒ—ใƒˆใ‚’ๅฎŸ่กŒใ—ใฆใใ ใ•ใ„ใ€‚ deno task screenshot [url] [id] โ€ปใ‚จใƒฉใƒผใŒๅ‡บใ‚‹ๅ ดๅˆใฏใ€ไธ‹่จ˜ใ‚’ๅฎŸ่กŒใ—ใฆใฟ

deno-ja 17 Oct 28, 2022
This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Kiril Bernard Tucker 54 Dec 29, 2022
All-in-one solution for configuring ESLint in all of your projects

โœจ All-in-one solution for configuring ESLint in all of your projects โœจ โš ๏ธ May not work in your project. This is related to eslint module resolution pr

Eslint Kit 53 Nov 28, 2022
This monorepo stores all code and assets of all projects with which we develop regels.overheid.nl

Welcome Introduction In 2021 Utrecht started developing the Virtual Income Desk with Open Rules. An initiative with the aim for citizens to always and

Ministerie van Binnenlandse Zaken en Koninkrijksrelaties 5 Dec 8, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
A project manager website to all apprentices and interns save your projects.

Apeview - Web Application (Front-End) Development: Todo [x] Modal search box in Home page when clicking the search icon in header [ ] Study about crea

null 3 Oct 3, 2022
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

?? typesafe-i18n A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. Advantages ?? lightwe

Hofer Ivan 1.3k Jan 4, 2023
Web based all in one gradient editor for your next projects.

Find the perfect gradient for your next projects Introducing Gradientify Gradientify is a web-based all-in-one gradient editor that gives you access t

Nitin Singh 21 Dec 25, 2022
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone โšก Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
๐Ÿ“œ Sharable eslint configuration rimac technology uses in all of its projects.

Eslint Config Usage Install the library as a dev dependency alongside required dependencies using yarn add -D @rimac-technology/eslint-config

Rimac Technology 8 Nov 23, 2022
A full stack application that uses an authentication system to allow FAA Inspectors, Airliners, and Aircraft Technicians to update progress on their work all while keeping a log of records on projects completed.

A full stack application that uses an authentication system to allow FAA Inspectors, Airliners, and Aircraft Technicians to update progress on their work all while keeping a log of records on projects completed.

BinaryBitBytes 3 Jun 13, 2022
This is personal portfolio website that features the projects I have been working on, all the contact information is provided as well.

Personal-Portfolio This is personal portfolio website. Built With React CSS VS code Live Demo Live Demo Getting Started Prerequisites: Create an accou

Meri Gogichashvili 30 Jan 6, 2023
All the Fake Data for All Your Real Needs ๐Ÿ™‚

All the Fake Data for All Your Real Needs ?? Run it on Stackblitz Installation npm i @ngneat/falso yarn add @ngneat/falso Methods rand<T>(arr: T[]):

ngneat 2.8k Dec 29, 2022