[Projects] The CSS code needs Refactoring

[VishrutAggarwal]

Current Behavior

Currently, the CSS code present in src\sections\Projects\Project-grid\projectGrid.style.js has the following issues:

1. It is extremely messy and is difficult to modify without breaking other things.
2. There are no fixed breakpoints and thus very difficult to understand where the code needs to be modified to get the desired result.

Due to this, it is very difficult for new contributors to make contribute to this section. Refactoring is required to organize the code and enable more contributors to fix any bugs found.

It also hinders correction of other bugs, for example: issue #4321 .

Desired Situation

Ideally the following things must be kept in mind while refactoring the code completely:

1. There should be proper breakpoints defined.
2. The code is written in mobile-first view and thus should follow it in the refactored code too.
3. The code follows the site's UI design.
4. Use dynamic units like rem, percentage, etc. than px. (Use of px unit should be done where necessary though)
5. Use media query should be proper and defined.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[manshul014]

Can i contribute to this?.

[Shivam-AfA]

Go ahead @manshul014 🚀

[nihalpawar4]

can I also contribute to this issue

[vishalvivekm]

can I also contribute to this issue

Hi @nihalpawar4 , Thanks for jumping in.
We follow FCFS for assigning the issues to contributors.
Let's find you some other good-first and help wanted issues to work on. Check out the link : https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+

[nihalpawar4]

can I also contribute to this issue

Hi @nihalpawar4 , Thanks for jumping in. We follow FCFS for assigning the issues to contributors. Let's find you some other good-first and help wanted issues to work on. Check out the link : https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+

ok thanks for the information will checkout the above link.

[sudhanshutech]

Any updates here @manshul014

[saaagarsingh]

@manshul014 are you working on this? If not I would love to go ahead with it.

[vishalvivekm]

Thank you @saaagarsingh . // @Modern-artist

[nihalpawar4]

all the best....

[github-actions]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[ankushbhardwaj408]

Hi @abhijeetgauravm If this is a valid issue? I would like to work on this. Please assign it to me.

[abhijeetgauravm]

there u go @ankushbhardwaj408

[ankushbhardwaj408]

Hi @abhijeetgauravm please review this pr

[psankhe28]

@VishrutAggarwal , is this issue still open?

[Shubhf]

Is this issue Still open?@VishrutAggarwal