style: categorization on tech stack page

[ujwal-yadav]

Description

This Pull Request addresses the issue related to the Tech Stack page's need for improved categorization. It introduces a categorization feature to enhance the organization and navigation of various technologies on the Tech Stack page.
In anticipation of future growth and expansion of the technology stack, this Pull Request has also been designed with scalability in mind, so that it can easily add additional categories to accommodate new technologies and tools without altering the existing code logic.

Fixes #375

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

This has been tested with all screen sizes on browsers like- Chrome, Firefox, Brave, and Edge.

Checklist:

• I have performed a self-review of my own code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

Screenshots or example output

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	4e2a88f
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/652ce060b66d9c000869cb51
😎 Deploy Preview	https://deploy-preview-1265--reactplayio.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vercel]

@ujwal-yadav is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

[joshi-kaushal]

Hi, this is actually great, loved it. But I have a suggestion, Can we do something like this for desktop screen sizes?

Toggle to see photo

For mobile, i think the same design with two items on each row, center-aligned would look great.

Let me know what you both think @ujwal-yadav @priyankarpal

[ujwal-yadav]

Hi, this is actually great, loved it. But I have a suggestion, Can we do something like this for desktop screen sizes?

Toggle to see photo

For mobile, i think the same design with two items on each row, center-aligned would look great.

Let me know what you both think @ujwal-yadav @priyankarpal

Hello @joshi-kaushal, As the width of the container is only 1280px, so in future when no. of tech stack will increase then it will make the frame works column look congested as there will be very less space available for it.
Still I can implement your suggestions if you want to. So, let me know your thoughts.

[joshi-kaushal]

1. Limit to a certain number (say 6) and add a `Load more` or `Show all` button 2. Horizontal scrolling 3. Tabs (like pagination). Would add more clarifying to this point if you need. This is just what I could think of right now. Maybe there's something even better.

…

On Sun, 8 Oct, 2023, 9:08 pm Ujwal Yadav, ***@***.***> wrote: Hi, this is actually great, loved it. But I have a suggestion, Can we do something like this for desktop screen sizes? Toggle to see photo <https://user-images.githubusercontent.com/53049546/273457367-dd24ab58-29d4-47aa-b20f-c3cc1169447c.png> For mobile, i think the same design with two items on each row, center-aligned would look great. Let me know what you both think @ujwal-yadav <https://github.com/ujwal-yadav> @priyankarpal <https://github.com/priyankarpal> Hello @joshi-kaushal <https://github.com/joshi-kaushal>, As the width of the container is only 1280px, so in future when no. of tech stack will increase then it will make the frame works column look congested as there will be very less space available for it. Still I can implement your suggestions if you want to. So, what do you think ? — Reply to this email directly, view it on GitHub <#1265 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMUXRSW6HWGMCP43QIM3C6LX6LCF7AVCNFSM6AAAAAA5OE46DOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONJSGA4DQMBTGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ujwal-yadav]

1. Limit to a certain number (say 6) and add a Load more or Show all button 2. Horizontal scrolling 3. Tabs (like pagination). Would add more clarifying to this point if you need. This is just what I could think of right now. Maybe there's something even better.

Or we can reduce the size of the frameworks icon card by few px.

[joshi-kaushal]

@ujwal-yadav yes that's a good idea as well. Can surely try that

[ujwal-yadav]

@joshi-kaushal @priyankarpal I have implemented the UI changes. You can review it.

[atapas]

@joshi-kaushal please finish the review and let me know when it is ready for merge.

[joshi-kaushal]

@ujwal-yadav can you please share screenshots for both mobile and laptop screen sizes?

[ujwal-yadav]

@ujwal-yadav can you please share screenshots for both mobile and laptop screen sizes?

Laptop screen

Mobile screen

[atapas]

@joshi-kaushal you can test it here: https://deploy-preview-1265--reactplayio.netlify.app/

[priyankarpal]

python? @atapas

[atapas]

python? @atapas

I don't think we use it. Let's remove it.

[ujwal-yadav]

python? @atapas

I don't think we use it. Let's remove it.

I have removed Python. It can be reviewed now.

[priyankarpal]

Looks Good 🎉