Pinkvilla Shubhangi Clone

Early on, I wanted to prove to myself that I could rebuild a real, content-heavy, image-first website pixel by pixel using only the fundamentals — no React, no framework shortcuts. Pinkvilla was the perfect target: dense grids, image cards everywhere, a navigation bar that has to behave on every screen size, and typography that has to stay readable inside a busy visual layout. If I could match that with vanilla tools, I'd trust myself with anything more abstract.

This was a discipline exercise, not a creative one. The decision was deliberate: spend a week with HTML, CSS, Bootstrap and vanilla JavaScript before I got too comfortable in modern tooling. I studied the original site's layout grid, screenshotted it at different breakpoints, and built a personal style guide before writing a single line of code. The thinking was less 'how do I make this look good' and more 'how do I match what already exists, exactly.'

Pure HTML, CSS and JavaScript with Bootstrap for the responsive grid. The hardest part was the hero carousel and the nested category navigation — I built both from scratch with vanilla JS to really understand the moving parts. I spent more time on responsive breakpoints than anything else; entertainment portals look easy until you try to keep them readable on a 360px phone.

Screenshots

Building the responsive grid system before reaching for the framework. I implemented the layout in plain CSS first, only switching to Bootstrap utilities once I understood why each rule was there. That muscle memory — knowing what's actually happening underneath utility classes — has stayed with me through every React project since.

I'd rebuild it in React with proper component composition. The current version has a lot of repeated markup that a small ArticleCard component would have collapsed into ten lines. I'd also lazy-load the images properly — the page loads heavy because every image fires at once. Both fixes are easy now; they just weren't where my attention was at the time.