[Feature Request] Please enhance the UI of our Random Contributor Component

[XanderRubio]

Description

This is a longer design UI enhancement project.

Please enhance the UI of the show button that then displays a random contributor's name and clickable image to their GitHub account.

The idea here would be to rearrange this in regards to where it is displayed on the website and place it below the header component and above the MasonryLayout Component. The idea would be to have the text Thanking Our Before I Die Contributors and then showing a slick and professional UI card display of our contributors GitHub avatar and set it to use the random shuffle display algorithm that is seen when viewing the RandomContributors Component so it randomly acts as a slide show cycling every 5 seconds as an example.

Please see below this image of the potential idea. I've included it for you.I've included for you

Screenshots

Here is where the newly designed RandomContributors Component needs to go

Here is a potential rough sketch of how the RandomContriubtor could be presented. Note that please don't follow the font or exact designing. This is to get you thinking of how to present this component to highlight our contributors and should blend well with the rest of the site this far.

This section is being pushed up from the issue #190. And if it still needs to be assigned, you can work on both.

Checklist

• [X] I have checked for duplicate issues
• [X] I have read the Contribution Guidelines
• [ ] I am willing to work on this issue (optional)

[LynxSumit]

I want to resolve this bug, but want to discuss about the Show button design and position enhancement.

[XanderRubio]

Excellent @LynxSumit! You have been assigned. Please let me know your thoughts.

[LynxSumit]

Excellent @LynxSumit! You have been assigned. Please let me know your thoughts.

Okay so the the question is if i have to change the design structure of show button like placement position?

[XanderRubio]

Excellent @LynxSumit! You have been assigned. Please let me know your thoughts.

Okay so the the question is if i have to change the design structure of show button like placement position?

@LynxSumit yes that is correct in changing the position of the where the Random Contributor component is displayed and I should rename the issue as it would be best to go from a show button to a Random Contributor component that displays on the webpage for example structured like the second screenshot provided. Hope that helps with direction and also adding what you see as good UI from your perspective. Let me know if you have further questions.

[LynxSumit]

Okay i got it i'll show you once i'm done .

[XanderRubio]

Okay i got it i'll show you once i'm done .

Great looking forward to seeing and happy developing!

[LynxSumit]

Is this looking okay ?

[XanderRubio]

Hi @LynxSumit ,

Yes, I was thinking of not showing a button and only displaying a random user component that displays in a format similar to this image below and adding your UI to make it look nice. Also, adding code to cycle through the co,ntributors for example, displaying a new contributor and their name every five seconds or so as an example. As an idea. I am thinking about how to make the website seem more slick in the UI with the Random Contributor component.

For now, go with what looks good from your perspective and play around with how to make what we have more appealing and fit well with the site. Much appreciated, and keep up the great work!

[LynxSumit]

Okay, the design you have provided i will use this to modify current design okay ?

[LynxSumit]

I have implented all the things you asked for, here is the preview

https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/114245865/c34c7b9d-0e95-454e-bf8b-e681393634d8

[XanderRubio]

Okay, the design you have provided i will use this to modify current design okay ?

Great!

[XanderRubio]

I have implented all the things you asked for, here is the preview

https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/114245865/c34c7b9d-0e95-454e-bf8b-e681393634d8

Great work @LynxSumit! I'm currently traveling at the moment and once settled in I will review and merge. And get back to you! Thank you for your time in contributing and enhancing! Have a great day!

[joyboy-reincarnated]

Hi I'm Vijay I would like to work on this As I'm a beginner So let me learn to do this Thanks

[XanderRubio]

HI @LynxSumit,

I'm sorry for not getting back to you sooner. I have been traveling and just got settled into our new location. Great work on the location and design. You are good to go for creating a PR, and if you would like to enhance the font and other additions if you would like from your own design perspective. Great work on having contributors shuffle on a timer and looks like it functions great!

[XanderRubio]

Hi I'm Vijay I would like to work on this As I'm a beginner So let me learn to do this Thanks

Hello @joyboy-reincarnated,

Thank you for your enthusiasm this issue is already been assigned and being worked on. You can right away by working on issue #188. Let me know if you have any questions and have a nice day!

Xander

[LynxSumit]

HI @LynxSumit,

I'm sorry for not getting back to you sooner. I have been traveling and just got settled into our new location. Great work on the location and design. You are good to go for creating a PR, and if you would like to enhance the font and other additions if you would like from your own design perspective. Great work on having contributors shuffle on a timer and looks like it functions great!

yeah sure man i've raised PR regarding the same you can check and if there aren't any conflicts you can merge.

[XanderRubio]

The issue has been successfully merged and closed from PR #204