Enhanced ui for blog page

[Richajaishwal0]

Description
Completely redesigned and enhanced the blog page with modern, professional styling and comprehensive responsive design. The update transforms the basic blog layout into a visually stunning, interactive experience that rivals modern design systems with gradient backgrounds, smooth animations, and optimized layouts for all screen sizes.

This enhancement addresses the need for a more engaging and professional blog interface that works seamlessly across all devices, improving user experience and visual appeal.

Fixes #254

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

-Added functional search bar: Implemented working search functionality with real-time filtering of blog articles, modern glass-morphism design with focus animations

• Redesigned article cards: Transformed basic cards into professional design with rounded corners, gradient overlays, hover animations, and enhanced shadows
• Enhanced card layouts: Added responsive grid system with 3-column (desktop), 2-column (tablet), and 1-column (mobile) layouts
• Improved typography: Upgraded section titles with larger fonts, gradient underlines, and better spacing throughout
• Added interactive elements: Implemented hover effects on cards with scale animations, color transitions, and smooth micro-interactions
• Enhanced category badges: Redesigned badges with gradient backgrounds, hover transformations, and professional styling
  Upgraded buttons: Transformed simple links into animated buttons with gradient backgrounds and slide effects
• Added author sections: Enhanced author display with gradient avatars, improved typography, and animated elements
• Implemented search results display: Added styled search results counter with visual feedback
• Added background enhancements: Implemented gradient backgrounds and decorative overlays for visual depth
• Fixed responsive issues: Ensured proper card sizing and layout across all device breakpoints
  Here is the screenshot of the work

Dependencies

• Added react-icons: Installed for search icon and other UI icons used in the enhanced blog interface
• Uses existing CSS architecture and design system
• Compatible with current build process and tooling
• Maintains existing HTML structure while enhancing styling

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.

[vercel]

@Richajaishwal0 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Richajaishwal0]

@sanjay-kv Can u give me level 3 as i completely changed the page and searchbar is functional and it has other effects too.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
recode-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 5, 2025 8:27am

[sanjay-kv]

Your dev is good @Richajaishwal0

Can you create a new issue and remove the below one.

and fix the author name

[sanjay-kv]

@Richajaishwal0

Can u also create another issue to redesign the footer your development is good.

[Richajaishwal0]

@sanjay-kv Thank u . Will work on both issue.