content(blog): rewrite GSoC and Weekend Tech Grind posts, retune image presentation

GSoC post: rewrite as a transparent breakdown of 9 GSoC selections plus 5
selections across LFX, SSoC, ESoC, and GSSoC (14 acceptances across 13
people, with Talha doing GSoC + SSoC). Each contributor has a one-paragraph
introduction with org context and project link. The 5 designed acceptance
posters (gsoc, gsoc2, gsoc3, gsoc5, gsoc7) are placed alongside the
contributors they depict, with captions that name the people in each.

Weekend Tech Grind post: rewrite with sensory framing of the room,
concrete format details (2 days, 12 hours per day, monthly cadence, goal
declaration on Day 1, deep-work blocks, Sunday closing ritual), and a
proper "who this is and is not for" section. Cover image swapped to
weekend-grind.jpg.

Detail page typography: bigger section spacing (h2 mt-20, paragraphs my-6
with leading-1.85), proper styling for h3, ul, ol, li, blockquote, hr,
and softer link underlines so long-form prose breathes.

Blog list/featured cards: replace hardcoded slug-based cropping with
frontmatter-driven imageFit and imagePosition, default portrait posters
to aspect-4/5 + object-contain on a near-black backdrop so headshots are
not cropped.

Numbers throughout written as digits, em-dashes removed.

Author: ZeeshanAdilButt

app/blog/[slug]/page.tsx

@@ -56,82 +56,110 @@ export default async function BlogPost({
       </header>
 
       {/* COVER IMAGE */}
-      {/* COVER IMAGE */}
-{data.image && (
-  <div className="relative w-full mb-16 overflow-hidden rounded-2xl bg-black">
-    <div className="relative aspect-[16/9] w-full">
-      <Image
-        src={data.image}
-        alt={data.title}
-        fill
-        priority
-        sizes="(max-width: 1024px) 100vw, 1200px"
-        className={`transition duration-700 hover:scale-105 ${
-          slug === "gsoc"
-            ? "object-contain"
-            : "object-cover object-center"
-        }`}
-      />
-    </div>
-  </div>
-)}
+      {data.image && (
+        (() => {
+          const fit: "cover" | "contain" =
+            data.imageFit ?? (slug === "gsoc" ? "contain" : "cover");
+          const aspect = fit === "contain" ? "aspect-[4/5]" : "aspect-[16/9]";
+          const fitClass =
+            fit === "contain" ? "object-contain" : "object-cover object-center";
+          return (
+            <div className="relative w-full mb-16 overflow-hidden rounded-2xl bg-neutral-950">
+              <div className={`relative ${aspect} w-full mx-auto max-w-3xl`}>
+                <Image
+                  src={data.image}
+                  alt={data.title}
+                  fill
+                  priority
+                  sizes="(max-width: 1024px) 100vw, 1024px"
+                  className={`transition duration-700 hover:scale-105 ${fitClass}`}
+                />
+              </div>
+            </div>
+          );
+        })()
+      )}
       {/* MARKDOWN */}
       <article className="mx-auto max-w-2xl">
-        <div
-          className="prose prose-lg prose-neutral max-w-none
-          prose-headings:font-serif
-          prose-h2:mt-12
-          prose-h3:mt-8
-          prose-p:text-gray-700 prose-p:leading-8
-          prose-img:rounded-xl prose-img:my-10"
-        >
+        <div className="prose prose-lg prose-neutral max-w-none">
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
-              /* ✅ Prevent <p> wrapping images */
               p({ node, children }) {
                 const hasImg = node?.children?.some(
                   (child: any) => child.tagName === "img"
                 );
 
                 if (hasImg) {
-                  return <div className="my-6">{children}</div>;
+                  return <div className="my-12">{children}</div>;
                 }
 
                 return (
-                  <p className="text-gray-700 leading-8 my-4">
+                  <p className="text-gray-800 leading-[1.85] my-6 text-[1.075rem]">
                     {children}
                   </p>
                 );
               },
 
-              /* ✅ Proper markdown images */
               img({ src = "", alt = "" }) {
                 return (
-                  <span className="block my-10">
+                  <span className="block my-14">
                     <Image
                       src={src}
                       alt={alt}
-                      width={1200}
-                      height={600}
-                      className="rounded-xl object-cover w-full h-auto"
+                      width={1600}
+                      height={2000}
+                      sizes="(max-width: 768px) 100vw, 768px"
+                      className="rounded-xl w-full h-auto"
                     />
                   </span>
                 );
               },
 
               h1: ({ children }) => (
-                <h1 className="text-4xl font-serif mt-10 mb-6">
+                <h1 className="text-4xl md:text-5xl font-serif tracking-tight mt-16 mb-8 text-black">
                   {children}
                 </h1>
               ),
 
               h2: ({ children }) => (
-                <h2 className="text-2xl font-serif mt-10 mb-4">
+                <h2 className="text-3xl font-serif tracking-tight mt-20 mb-6 text-black">
                   {children}
                 </h2>
               ),
 
+              h3: ({ children }) => (
+                <h3 className="text-xl font-serif font-semibold mt-12 mb-3 text-black">
+                  {children}
+                </h3>
+              ),
+
+              ul: ({ children }) => (
+                <ul className="my-6 space-y-2 list-disc pl-6 text-gray-800 leading-[1.75]">
+                  {children}
+                </ul>
+              ),
+
+              ol: ({ children }) => (
+                <ol className="my-6 space-y-2 list-decimal pl-6 text-gray-800 leading-[1.75]">
+                  {children}
+                </ol>
+              ),
+
+              li: ({ children }) => (
+                <li className="pl-1">{children}</li>
+              ),
+
+              blockquote: ({ children }) => (
+                <blockquote className="my-8 border-l-2 border-black pl-6 italic text-gray-700">
+                  {children}
+                </blockquote>
+              ),
+
+              hr: () => (
+                <hr className="my-16 border-0 h-px bg-gray-200" />
+              ),
+
               strong: ({ children }) => (
                 <strong className="font-semibold text-black">
                   {children}
@@ -141,7 +169,7 @@ export default async function BlogPost({
               a: ({ href, children }) => (
                 <a
                   href={href}
-                  className="underline text-black hover:opacity-70"
+                  className="underline underline-offset-4 decoration-gray-300 text-black hover:decoration-black transition"
                 >
                   {children}
                 </a>

app/blog/blogClient.tsx

@@ -13,6 +13,17 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 
+function imageClasses(post: Post) {
+  const fit = post.imageFit === "contain" ? "object-contain" : "object-cover";
+  const positionMap = {
+    top: "object-top",
+    center: "object-center",
+    bottom: "object-bottom",
+  } as const;
+  const position = positionMap[post.imagePosition ?? "center"];
+  return `${fit} ${position}`;
+}
+
 export default function BlogClient({ posts }: { posts: Post[] }) {
   const [activeTab, setActiveTab] = useState<"news" | "blog">("news");
 
@@ -106,25 +117,22 @@ export default function BlogClient({ posts }: { posts: Post[] }) {
                       className="block group"
                     >
                       {/* IMAGE */}
-                      <div className="relative w-full aspect-[16/9] mb-5 overflow-hidden rounded-xl bg-gray-100">
-
+                      <div
+                        className={`relative w-full aspect-[4/5] mb-5 overflow-hidden rounded-xl ${
+                          post.imageFit === "contain"
+                            ? "bg-neutral-950"
+                            : "bg-gray-100"
+                        }`}
+                      >
                         <Image
                           src={post.image || "/post1.jpg"}
                           alt={post.title}
                           fill
                           priority
                           sizes="(max-width:768px) 100vw, 33vw"
-
-                          /*
-                            FIX:
-                            gsoc image uses object-top
-                            others remain centered
-                          */
-                          className={`rounded-xl transition duration-500 group-hover:scale-[1.02] object-cover ${
-                            post.slug === "gsoc"
-                              ? "object-top"
-                              : "object-center"
-                          }`}
+                          className={`rounded-xl transition duration-500 group-hover:scale-[1.02] ${imageClasses(
+                            post
+                          )}`}
                         />
                       </div>
 
@@ -192,17 +200,21 @@ export default function BlogClient({ posts }: { posts: Post[] }) {
                 className="block group"
               >
                 {/* IMAGE */}
-                <div className="relative w-full aspect-[16/9] mb-6 overflow-hidden rounded-xl">
+                <div
+                  className={`relative w-full mb-6 overflow-hidden rounded-xl ${
+                    post.imageFit === "contain"
+                      ? "aspect-[4/5] bg-neutral-950"
+                      : "aspect-[16/9] bg-gray-100"
+                  }`}
+                >
                   <Image
                     src={post.image || "/post1.jpg"}
                     alt={post.title}
                     fill
                     sizes="100vw"
-                    className={`rounded-xl transition duration-500 group-hover:scale-[1.02] object-cover ${
-                      post.slug === "gsoc"
-                        ? "object-top"
-                        : "object-center"
-                    }`}
+                    className={`rounded-xl transition duration-500 group-hover:scale-[1.02] ${imageClasses(
+                      post
+                    )}`}
                   />
                 </div>
 

app/blog/page.tsx

@@ -10,10 +10,14 @@ export type Post = {
   category: string;
   description?: string;
   image?: string;
+  imageFit?: "cover" | "contain";
+  imagePosition?: "top" | "center" | "bottom";
   featured?: boolean;
   order?: number;
 };
 
+const PORTRAIT_POSTER_SLUGS = new Set(["gsoc"]);
+
 export default function BlogPage() {
   const blogDir = path.join(process.cwd(), "content", "blog");
   const files = fs.readdirSync(blogDir);
@@ -22,14 +26,18 @@ export default function BlogPage() {
     const filePath = path.join(blogDir, file);
     const fileContent = fs.readFileSync(filePath, "utf-8");
     const { data } = matter(fileContent);
+    const slug = file.replace(".md", "");
 
     return {
-      slug: file.replace(".md", ""),
+      slug,
       title: data.title,
       date: data.date,
       category: data.category,
       description: data.description || "",
       image: data.image || "/post1.jpg",
+      imageFit:
+        data.imageFit ?? (PORTRAIT_POSTER_SLUGS.has(slug) ? "contain" : "cover"),
+      imagePosition: data.imagePosition ?? "center",
       featured: data.featured || false,
       order: data.order ?? 999,
     };