Render "good first issue" list in a more nice style

[hendrikebbers]

🆕🐥 First Timers Only

This issue is reserved for people who have never contributed to Hiero or any open source project in general. We know that creating a pull request (PR) is a major barrier for new contributors. The goal of this issue and all other issues labeled by 'Good First Issue' is to help you make your first contribution to Hiero.

👾 Description of the issue

At our hacktoberfest page, we have a dynamic list of good first issues.

The filter for that list and the list is currently styled minimalistic.

To solve this issue the style / ui of the list and the filter should be improved. Since we use tailwindCSS as base for our styling enough good example should be available. The list is implemented as a Hugo shortcode that can be found here. The dynamic data is fetched by a running instance of this open service. Currently there is not documentation for the fetched REST data structure but the server side java record can be found here.

📋 Step by step guide to do a contribution

If you have never contributed to an open source project at GitHub, the following step-by-step guide will introduce you to the workflow. More information and concrete samples for shell commands for each step can be found in our CONTRIBUTING.md file. A more detailed general documentation of the GitHub PR workflow can be found here.

• [ ] Claim this issue: Comment below that you are interested in working on the issue
• [ ] Wait for assignment: A community member with the given rights will add you as an assignee of the issue
• [ ] Fork the repository: You can do that in GitHub (by simply clicking the 'fork' button).
• [ ] Check out the forked repository
• [ ] Create a feature branch for the issue. We do not have a hard naming definition for branches but it is best practice to prefix the branch name with the issue id.
• [ ] Solve the issue in your branch.
• [ ] Commit your changes: Here, it is needed to add sign-off information to the commit to accept the "Developer Certificate of Origin" (https://developercertificate.org). More details can be found in our CONTRIBUTING.md
• [ ] Start a Pull Request (PR): We have a pattern for naming pull requests that a GitHub Action checks. We use that pattern to support the creation of automatic release notes.
• [ ] Check GitHub Actions: Several GitHub Actions will be triggered automatically for each PR. If a GitHub Action fails and you do not understand the cause of that error do not hesitate to add a comment to the PR and ask the Hiero developer community for support.
• [ ] Wait for reviews: Members of the Hiero developer community will review your PR. If a reviewer finds any missing pieces or a problem, he or she will start a discussion with you and describe the next steps for solving the problem.
• [ ] You did it 🎉: We will merge the fix in the develop branch. Thanks for being part of the Hiero community as an open-source contributor ❤️

🎉 Contribute to Hacktoberfest

Solve this issue as part of the Hacktoberfest event and get a chance to receive cool goodies like a T-Shirt. 🎽

🤔 Additional Information

If you have any questions, just ask us directly in this issue by adding a comment. You can join our community chat at Discord. A general manual about open-source contributions can be found here.

[mustapha1607]

I am interested in working on the issue

[AbhiSharmaNIT]

I also want to work on this issue pls assign it to me.

[MVENKATESH786]

I want to work on this please assign this to me.

[hendrikebbers]

@mustapha1607 are you still interested? Otherwise I would remove you as assigne.