Improve Mobile Responsiveness & Optimize Image Loading for Better Performance

I observed two major performance and UX issues in the project:

1. **No Proper Mobile Responsiveness**

* The layout and elements do not adapt well to smaller screens.
* Text, images, and interactive elements are sometimes misaligned or require excessive scrolling.

2. **Slow Image Loading on Low Network Speeds**

* Images are loading in an unoptimized/raw manner, leading to long load times.
* On slow connections, the site becomes less usable and increases the risk of users dropping off.

**Proposed Solution:**

* Implement **responsive design** techniques (CSS Flexbox/Grid, media queries, and fluid layouts) for better mobile adaptability.
* Optimize image delivery using:

* **Lazy loading** for off-screen images.
* **Responsive image sizes** based on device viewport.
* Next-gen formats like **WebP** or **AVIF** for reduced file size.
* Compression without noticeable quality loss.

**Expected Benefits:**

* Improved user experience on all devices.
* Faster page load times, especially on slow connections.
* Better Core Web Vitals performance.

@AayushSahani01 I am a **GSSoC-2025 Contributor** and would like to work on these enhancements to improve the project’s performance and accessibility across devices.