New independent view of TSC members

[derberg]

We finally have https:/asyncapi/website/blob/master/config/TSC_MEMBERS.json (semi automated, but from website repo perspective all needed things are in place already)

now we need to expose this in nice non-json way to the community. TSC members hall of fame :)

• we need view like https://www.asyncapi.com/community/tsc so far linked from Community drop down in top menu (long term subject for a change as I want to have dedicated community view with many other things, contrib guides, instructions, whatever needed)
• this new view should first explain what TSC is, where is it coming from, where governance model can be found
• most important are members,
  • use gh login name to pull profile picture and add github profile link
  • use linkedin and twitter to provide respective social media icon that is a link to their profiles
  • if available for hire, make it visible in the UI, in LinkedIn it is like a ribbon around the profile picture
  • use full name of course
  • use list of repos to prepare links to every single repo where given TSC member is a codeowner, like Maintainer of: and list of links (can be hidden in collapse expand if that is too much
• there can be one placeholder, with card with question mark, and test "want to become one?" and link to document where we explain how to become a TSC member (I can provide content long term)

This issue is realted to: asyncapi/.github#47

[aayushmau5]

I would like to work on it :)

[aayushmau5]

@derberg I came up with some designed inspired from TailwindUI, have a look.

1. Card with borders
   

2. Row wise(Tabular)
   

3. Card without borders
   

Let me know if you have any other ideas?

The main problem I'm facing right now is showing the drop-down of repos maintained list. If we use a card, when the user expands the "repos", I think the whole UI will shift with it, I don't think that's a good thing, so how should I tackle this issue?

[jonaslagoni]

Looks very nice @aayushmau5 👏 I think I like option 1 more than the others 🤔

Should the company be displayed in any way? 🤔

The main problem I'm facing right now is showing the drop-down of repos maintained list. If we use a card, when the user expands the "repos", I think the whole UI will shift with it, I don't think that's a good thing, so how should I tackle this issue?

Not sure I follow, can you record/show the problem? 🤔

[aayushmau5]

Should the company be displayed in any way?

🤔 I think I can replace Open to Work with company name, how about that?

Not sure I follow, can you record/show the problem?

Yeah, let me explain.

Suppose a person has a lot of repos in their Maintainer of field, then we show a drop-down icon for it so that the user can expand it.

and lets say a user opens this drop down, which causes the card to expand(if this is the desired behavior). I think due to this, the adjacent card on the same row will accommodate.

Like this

[derberg]

@aayushmau5 loving card view ❤️ 🚀

Open to Work is still needed. Company name too. So in case of me or Jonas, there needs to be a name of the company. If someone has no company it should say Individual member. So it must be clear if you are paid to work on the project or not.

As for the card behavior when expanding repo list, I think the individual card should expand too. Not an expert though and would prefer @magicmatatjahu and @fmvilas share their view

[aayushmau5]

@derberg Got it 👍, thanks a lot for clarifying. Will send a final mockup for this & then start implementing.

[magicmatatjahu]

@aayushmau5 Of course I prefer card view, love it :) Well done! As for the dropdown, I'd rather not have it, because then when someone expands, like you mentioned, other cards will expand as well and it doesn't give a nice visual effect, so I'd skip the dropdown.

[fmvilas]

Yeah, I'd not use a dropdown or "show more" for the reasons already described. I personally like the table row much better, to be honest. It would also be great to see how do you imagine the whole page design.

[aayushmau5]

Okay, so no more dropdown button. I will make a mockup and showcase how the whole page will look like. 👍

[aayushmau5]

I totally did not forget to show the mockup 😅 , but I have made a PR and you can check whether the design is good or not :)

Check here: https://deploy-preview-379--asyncapi-website.netlify.app/community/tsc

[AceTheCreator]

I totally did not forget so show the mockup , but I have made a PR and you can check whether the design is good or not :)

Check here: https://deploy-preview-379--asyncapi-website.netlify.app/community/tsc

@aayushmau5 amazing stuff you did there 😍

[magicmatatjahu]

@aayushmau5 I added comment to your PR. Awesome work, but we should be consistent with colors/size etc with other views :)