[FEATURE]: Enhance projects page with filterable, searchable interactive gallery

[saismrutiranjan18]

Feature and its Use Cases

Transform the projects page into a dynamic, filterable showcase that makes it easier for visitors to explore and discover AOSSIE projects.

Additional Context

No response

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[Jeconiah20]

Hi! I am interested in working on this issue.

[smmuskan140]

@saismrutiranjan18 Hello mentor! I would be more then happy to take up this project.
My approach for this project:
Review the existing projects page components.
Understand how project data is currently stored (static JSON, etc.).

Add Filtering System:
Introduce filter categories such as:
Project domain (Web, Blockchain, Mobile, AI, etc.)
Implement filtering using state-based logic (e.g., React state / Vue reactive data depending on the stack).
Ensure filters update the UI dynamically without page reload.
Add a keyword search bar to allow quick project discovery.

UI Improvements:
Display projects in a clean card-based grid layout.
Add smooth transitions when filtering.
Ensure responsive design for mobile and tablet screens.

Accessibility & Performance:
Optimize rendering for better performance.

Testing:
Test filtering combinations.
Verify responsiveness across screen sizes.

Let me know if this approach is appropriate. Thank You.