website icon indicating copy to clipboard operation
website copied to clipboard

✨ Enhancement: Revamp Blog Grid: Modern UI, Skeleton States, and Micro-Interactions

Open DivyanshuVortex opened this issue 1 month ago • 2 comments

Is your feature request related to a problem? Please describe

  • Weak visual hierarchy.

  • No loading skeleton → visible blank flashes during navigation.

  • Hover interactions are heavy and unrefined (aggressive zoom, no elevation).

Describe the solution you'd like

  • Introduce a redesigned card component with proper spacing, rounded corners, consistent typography, and clear hierarchy.

  • Add skeleton loading states that match the card structure to prevent layout flashes during navigation.

  • Use subtle micro-interactions: light hover elevation, soft image zoom (scale ~1.03), and animated “Read More →” arrow.

  • Improve category badges with refined styling and clear hover feedback.

  • Simplify author section with consistent avatar sizing and spacing.

  • Implement JS logic for incremental loading:

Load only the first N cards initially.

Use an IntersectionObserver or scroll listener to load more cards as the user scrolls.

Maintain smooth UI transitions when new cards appear.

Describe alternatives you've considered

Extract cards into reusable components to simplify maintenance.

Add incremental loading: render an initial batch, then load more cards on scroll via IntersectionObserver.

Rebuild the grid using a cleaner responsive layout without fixed heights.

Redesign cards with better spacing, clearer hierarchy, and subtle interactions.

Additional context

Request

@Utkarsh-123github Please assign this issue to me.

Proposal

I will redesign the blog grid with a cleaner responsive layout, improved card UI, skeleton loaders, and subtle micro-interactions. I’ll also add incremental loading so cards load in batches as the user scrolls. The changes will improve readability, performance, and maintainability.

Are you working on this?

Yes

DivyanshuVortex avatar Nov 23 '25 18:11 DivyanshuVortex

i am interrested to work on it, will u plz assign me this issue

dhiraj-143r avatar Nov 24 '25 04:11 dhiraj-143r

Hey @dhiraj-143r Thanks for showing interest in this but i aldready starts wroking on it and about 40% is done . I'm waiting for the @Utkarsh-123github or @jdesrosiers for change status to accepted then asap i make a pr .

DivyanshuVortex avatar Nov 24 '25 13:11 DivyanshuVortex

Hi @DivyanshuVortex , thank you for raising this issue. Thank you for raising this issue. Before opening a PR, could you please share your proposed new card designs with us? This will help us review the approach and provide feedback early on.

Thanks for your cooperation!

Utkarsh-123github avatar Nov 29 '25 05:11 Utkarsh-123github