✨ [Feature request]: Change how contributors are displayed in the homepage

[ammaaraslam]

Describe the solution you'd like

Currently the Contributors section in the homepage consists of only 29 contributors out of 39 (this is caused by the GitHub API's pagination system - each page returns only 30 items) and each contributor is represented inside a circle. Here are few features to be implemented on to the contributors section (suggested by @atapas).

• Based on the number of contributions we make the circle bigger... more contributions more bigger circle. We get the contribution count already.
• We show first 25 contributors on the page starting with the bigger (most contributions) to smaller circles (least contributions).
• Then we show a link like "See more contributors" and that takes to the project's readme's contributor section where we show all the contributors.

This may encourage people to even contribute more make their circle bigger and even to appear on our home page.

[nobel10122025]

i would like to work on this :)

[yung-coder]

I would like to work on it 🛠️

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!

[yung-coder]

Hey @atapas i will continue the work for the issue form tomorrow sorry for the delay i was just busy with my college exams..!

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!

[AbhiPatel10]

Looks good or Should we make a consistency on bigger to smaller Circle?

[atapas]

Looks good or Should we make a consistency on bigger to smaller Circle?

Yes I like it. What's your logic?

[AbhiPatel10]

I Use Switch case in One function and use that function in Style.

switch (true) {
case item >= 80:
contributionCircle = { height: '150px', width: '150px' };

    break;
  case item < 80 && item >= 50:
    contributionCircle = { height: '130px', width: '130px' };

    break;
  case item < 50 && item >= 30:
    contributionCircle = { height: '100px', width: '100px' };

    break;
  default:
    contributionCircle = { height: '50px', width: '50px' };
}

So Now we need to show only 25 contributors in Home page and made one Button for "See more contributors" and redirect to GitHub contributors ?

also please assign this task to me.

[6km]

Yes I like it. What's your logic?

More Contributions = Bigger Circle 😃

[atapas]

I Use Switch case in One function and use that function in Style.

switch (true) { case item >= 80: contributionCircle = { height: '150px', width: '150px' };

    break;
  case item < 80 && item >= 50:
    contributionCircle = { height: '130px', width: '130px' };

    break;
  case item < 50 && item >= 30:
    contributionCircle = { height: '100px', width: '100px' };

    break;
  default:
    contributionCircle = { height: '50px', width: '50px' };
}

So Now we need to show only 25 contributors in Home page and made one Button for "See more contributors" and redirect to GitHub contributors ?

also please assign this task to me.

Great..

A few things:

• These sizes must be responsive. so that on mobile, tab , and desktops they scale well.
• We need to have a contributions page on the /contributors route to list them all in a card with
  photo, name, number of contributions

[AbhiPatel10]

Okay, I'm working on it to improve that code and make it responsive across all devices.

Is there a specific design I should use for the contributor page, or can I make it however I see fit? 

[atapas]

Okay, I'm working on it to improve that code and make it responsive across all devices.

Is there a specific design I should use for the contributor page, or can I make it however I see fit?

Make it on Figrma or https://excalidraw.com/ and share the design first

[atapas]

Hey @yung-coder

I have added @AbhiPatel10 as assignee to this issue as he made some progress on it. If you had started on it or panning to contribute, you both can collaborate. In case you are not working/not panning to work on it, let me know.

[yung-coder]

@atapas

Hey sure would love to collaborate and finish this task asap pitch me on discord @AbhiPatel10 let's get this done.

[AbhiPatel10]

@yung-coder Thank you for collaborating; I have sent you the message on Discord.

[atapas]

@AbhiPatel10 @yung-coder

Please give me an idea of how the all contributors page may look like. Some basic design.

[AbhiPatel10]

Sure sir working on it... Building basic design in Figma

[AbhiPatel10]

Looks Good ? @atapas Sir

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!