From 96aca777fd6590fd11f1387ae53be533f74c9569 Mon Sep 17 00:00:00 2001
From: animesh sahoo <animeshsahoo159@gmail.com>
Date: Fri, 4 Jul 2025 17:04:29 +0530
Subject: [PATCH 1/5] fix: normalize badge height for all tool reports (#1753)

---
 pages/tools/components/ToolingDetailModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/tools/components/ToolingDetailModal.tsx b/pages/tools/components/ToolingDetailModal.tsx
index 9bdcb82b8..53dca990c 100644
--- a/pages/tools/components/ToolingDetailModal.tsx
+++ b/pages/tools/components/ToolingDetailModal.tsx
@@ -388,6 +388,7 @@ const BowtieReportBadge = ({ uri }: { uri: string }) => {
           className='my-1'
           width={100}
           height={20}
+          style={{ width: 'auto', height: '20px', objectFit: 'contain' }}
         />
       )}
       {error && (

From 5d5fe6e7bf9a8bccfd40ce4326e2b1f2cd0c3017 Mon Sep 17 00:00:00 2001
From: animesh sahoo <animeshsahoo159@gmail.com>
Date: Sat, 5 Jul 2025 12:03:06 +0530
Subject: [PATCH 2/5] changed to tailwind

---
 pages/tools/components/ToolingDetailModal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/tools/components/ToolingDetailModal.tsx b/pages/tools/components/ToolingDetailModal.tsx
index 53dca990c..8c91a50e1 100644
--- a/pages/tools/components/ToolingDetailModal.tsx
+++ b/pages/tools/components/ToolingDetailModal.tsx
@@ -385,10 +385,9 @@ const BowtieReportBadge = ({ uri }: { uri: string }) => {
         <Image
           src={`https://img.shields.io/endpoint?url=${encodeURIComponent(uri)}`}
           alt='Bowtie Badge'
-          className='my-1'
+          className='my-1 h-[20px] w-auto'
           width={100}
           height={20}
-          style={{ width: 'auto', height: '20px', objectFit: 'contain' }}
         />
       )}
       {error && (

From dc21b926480e2a99d42bd3513a1965491447ad66 Mon Sep 17 00:00:00 2001
From: animesh sahoo <animeshsahoo159@gmail.com>
Date: Sat, 5 Jul 2025 13:26:12 +0530
Subject: [PATCH 3/5] change object-cover to object-fill

---
 pages/blog/index.page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 65fdfb3a4..81c2942d5 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -317,7 +317,7 @@ export default function StaticMarkdownPage({
                         src={frontmatter.cover}
                         alt={frontmatter.title}
                         fill
-                        className='object-cover'
+                        className='object-fill'
                         loading={idx < 10 ? 'eager' : 'lazy'}
                         priority={idx < 10}
                         quality={75}

From 0c1a85c3fd49b3e7ebfc34b3b7cc4b0be5a0c557 Mon Sep 17 00:00:00 2001
From: animesh sahoo <animeshsahoo159@gmail.com>
Date: Sat, 5 Jul 2025 13:33:47 +0530
Subject: [PATCH 4/5] removed code of another PR

---
 pages/tools/components/ToolingDetailModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/tools/components/ToolingDetailModal.tsx b/pages/tools/components/ToolingDetailModal.tsx
index 8c91a50e1..9bdcb82b8 100644
--- a/pages/tools/components/ToolingDetailModal.tsx
+++ b/pages/tools/components/ToolingDetailModal.tsx
@@ -385,7 +385,7 @@ const BowtieReportBadge = ({ uri }: { uri: string }) => {
         <Image
           src={`https://img.shields.io/endpoint?url=${encodeURIComponent(uri)}`}
           alt='Bowtie Badge'
-          className='my-1 h-[20px] w-auto'
+          className='my-1'
           width={100}
           height={20}
         />

From 91b1546bf3903947e28a87b131a293c099176143 Mon Sep 17 00:00:00 2001
From: animesh sahoo <animeshsahoo159@gmail.com>
Date: Sat, 2 Aug 2025 20:01:00 +0530
Subject: [PATCH 5/5] fix: correct blog image logic

---
 pages/blog/index.page.tsx | 214 ++++++++++++++++++++------------------
 pages/index.page.tsx      |   2 +-
 2 files changed, 114 insertions(+), 102 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 81c2942d5..473773f68 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable linebreak-style */
 import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -9,7 +10,7 @@ const PATH = 'pages/blog/posts';
 import TextTruncate from 'react-text-truncate';
 import generateRssFeed from './generateRssFeed';
 import { useRouter } from 'next/router';
-import { SectionContext } from '~/context';
+import { SectionContext } from '../../context';
 import Image from 'next/image';
 
 type Author = {
@@ -197,14 +198,13 @@ export default function StaticMarkdownPage({
       </Head>
       <div className='max-w-[1400px] mx-auto overflow-x-hidden flex flex-col items-center mt-0 sm:mt-10'>
         {recentBlog[0] && (
-          <div className='relative w-full h-[500px] sm:h-[400px] bg-black clip-bottom mt-1.5 flex flex-col items-center justify-start dark:bg-slate-700'>
+          <div className='relative w-full aspect-[16/9] bg-black clip-bottom mt-1.5 flex flex-col items-center justify-start dark:bg-slate-700'>
             <div className='absolute w-full h-full dark:bg-[#282d6a]' />
             <Image
               src={recentBlog[0].frontmatter.cover}
-              width={800}
-              height={450}
-              className='object-cover w-full h-full opacity-70 blur-[5px]'
               alt={recentBlog[0].frontmatter.title}
+              fill
+              className='object-fill w-full h-full opacity-70 blur-[5px]'
               priority
               quality={75}
             />
@@ -307,113 +307,125 @@ export default function StaticMarkdownPage({
 
             return (
               <section key={blogPost.slug}>
-                <div className='h-[510px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
-                  <Link
-                    href={`/blog/posts/${blogPost.slug}`}
-                    className='inline-flex flex-col flex-1 w-full'
-                  >
-                    <div className='relative h-[160px] w-full'>
-                      <Image
-                        src={frontmatter.cover}
-                        alt={frontmatter.title}
-                        fill
-                        className='object-fill'
-                        loading={idx < 10 ? 'eager' : 'lazy'}
-                        priority={idx < 10}
-                        quality={75}
-                      />
+                <Link
+                  href={`/blog/posts/${blogPost.slug}`}
+                  className='h-[600px] sm:h-[540px] flex border rounded-lg shadow-sm transition-shadow duration-300 overflow-hidden dark:border-slate-500 group flex-col flex-1 w-full'
+                >
+                  <div className='relative w-full aspect-[16/9] overflow-hidden'>
+                    <Image
+                      src={frontmatter.cover}
+                      alt={frontmatter.title}
+                      fill
+                      className='object-fill transition-transform duration-300 group-hover:scale-110'
+                      loading={idx < 10 ? 'eager' : 'lazy'}
+                      priority={idx < 10}
+                      quality={75}
+                    />
+                    <div className='absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 pointer-events-none' />
+                  </div>
+                  <div className='p-4 flex flex-col flex-1 justify-between min-h-0 pt-2'>
+                    <div>
+                      {/* Display each category as a clickable badge */}
+                      <div className='flex flex-wrap gap-2 mb-4'>
+                        {getCategories(frontmatter).map((cat, index) => (
+                          <div
+                            key={index}
+                            className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full text-sm'
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              toggleCategory(cat);
+                            }}
+                          >
+                            {cat || 'Unknown'}
+                          </div>
+                        ))}
+                      </div>
+                      <div className='text-lg h-[95px] font-semibold overflow-hidden transition-transform duration-300 group-hover:scale-105'>
+                        {frontmatter.title}
+                      </div>
+                      <div className='mt-3   text-slate-500 dark:text-slate-300 flex-1 min-h-0'>
+                        <TextTruncate
+                          element='span'
+                          line={4}
+                          text={frontmatter.excerpt}
+                        />
+                      </div>
                     </div>
-                    <div className='p-4 flex flex-col flex-1 justify-between'>
-                      <div>
-                        {/* Display each category as a clickable badge */}
-                        <div className='flex flex-wrap gap-2 mb-4'>
-                          {getCategories(frontmatter).map((cat, index) => (
+                    <div className='flex flex-row items-center mt-2'>
+                      <div className='flex flex-row pl-2 mr-2'>
+                        {(frontmatter.authors || []).map(
+                          (author: Author, index: number) => (
                             <div
                               key={index}
-                              className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full text-sm'
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                toggleCategory(cat);
+                              className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                                frontmatter.authors.length > 2
+                                  ? 'h-8 w-8'
+                                  : 'h-11 w-11'
+                              }`}
+                              style={{
+                                backgroundImage: `url(${author.photo})`,
+                                zIndex: 10 - index,
                               }}
-                            >
-                              {cat || 'Unknown'}
-                            </div>
-                          ))}
-                        </div>
-                        <div className='text-lg h-[80px] font-semibold'>
-                          {frontmatter.title}
-                        </div>
-                        <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
-                          <TextTruncate
-                            element='span'
-                            line={4}
-                            text={frontmatter.excerpt}
-                          />
-                        </div>
+                            />
+                          ),
+                        )}
                       </div>
-                      <div className='flex flex-row items-center'>
-                        <div className='flex flex-row pl-2 mr-2'>
-                          {(frontmatter.authors || []).map(
-                            (author: Author, index: number) => (
-                              <div
-                                key={index}
-                                className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
-                                  frontmatter.authors.length > 2
-                                    ? 'h-8 w-8'
-                                    : 'h-11 w-11'
-                                }`}
-                                style={{
-                                  backgroundImage: `url(${author.photo})`,
-                                  zIndex: 10 - index,
-                                }}
-                              />
-                            ),
-                          )}
-                        </div>
-                        <div className='flex flex-col items-start'>
-                          <div className='text-sm font-semibold'>
-                            {frontmatter.authors.length > 2 ? (
-                              <>
-                                {frontmatter.authors
-                                  .slice(0, 2)
-                                  .map((author: Author, index: number) => (
-                                    <span key={author.name}>
-                                      {author.name}
-                                      {index === 0 && ' & '}
-                                    </span>
-                                  ))}
-                                {'...'}
-                              </>
-                            ) : (
-                              frontmatter.authors.map(
-                                (author: Author, index: number) => (
+                      <div className='flex flex-col items-start'>
+                        <div className='text-sm font-semibold'>
+                          {frontmatter.authors.length > 2 ? (
+                            <>
+                              {frontmatter.authors
+                                .slice(0, 2)
+                                .map((author: Author, index: number) => (
                                   <span key={author.name}>
                                     {author.name}
-                                    {index < frontmatter.authors.length - 1 &&
-                                      ' & '}
+                                    {index === 0 && ' & '}
                                   </span>
-                                ),
-                              )
-                            )}
-                          </div>
-                          <div className='text-slate-500 text-sm dark:text-slate-300'>
-                            {frontmatter.date && (
-                              <span>
-                                {date.toLocaleDateString('en-us', {
-                                  year: 'numeric',
-                                  month: 'long',
-                                  day: 'numeric',
-                                })}
-                              </span>
-                            )}{' '}
-                            &middot; {postTimeToRead} min read
-                          </div>
+                                ))}
+                              {'...'}
+                            </>
+                          ) : (
+                            frontmatter.authors.map(
+                              (author: Author, index: number) => (
+                                <span key={author.name}>
+                                  {author.name}
+                                  {index < frontmatter.authors.length - 1 &&
+                                    ' & '}
+                                </span>
+                              ),
+                            )
+                          )}
+                        </div>
+                        <div className='text-slate-500 text-sm dark:text-slate-300'>
+                          {frontmatter.date && (
+                            <span>
+                              {date.toLocaleDateString('en-us', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                              })}
+                            </span>
+                          )}{' '}
                         </div>
                       </div>
                     </div>
-                  </Link>
-                </div>
+                  </div>
+                  {/* Separator Line */}
+                  <div className='border-t border-gray-200 dark:border-slate-600 mx-4'></div>
+                  {/* Read More Section */}
+                  <div className='flex w-full px-4 py-2 justify-between items-center'>
+                    <span className='text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center gap-1 group/readmore'>
+                      Read More
+                      <span className='transition-transform group-hover/readmore:translate-x-1 text-xs'>
+                        →
+                      </span>
+                    </span>
+                    <span className='text-slate-500 text-sm dark:text-slate-400'>
+                      {postTimeToRead} min read
+                    </span>
+                  </div>
+                </Link>
               </section>
             );
           })}
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 95fb51ddd..41ce2d046 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -427,7 +427,7 @@ const Home = (props: any) => {
                   <>
                     <Image
                       src={blogPosts[0].frontmatter.cover}
-                      className='w-full h-[232px]  mb-4'
+                      className='object-fill mb-4'
                       width={600}
                       height={232}
                       alt='blog'