From f7646504eae5456f738062f7ea92e7c7bd0a79aa Mon Sep 17 00:00:00 2001
From: Khushal Bhardwaj <khushalbhardwaj0111@gmail.com>
Date: Sun, 14 Jun 2026 12:55:08 +0530
Subject: [PATCH 1/3] Fix React Review audit warnings (#3)

Resolves all 35 warnings from issue #3 across grouped sub-issues:
- #5 design-no-redundant-size-axes: collapse w-N h-N to size-N (13)
- #6 rendering-hydration-mismatch-time: suppressHydrationWarning on date elements (7)
- #7 design: bg-black->bg-gray-950, font-bold->font-semibold, em-dash->comma (7)
- #8 server async: Promise.all for independent awaits in blog/[slug]/page (3)
- #9 nextjs/a11y/memo: metadata export, next/image, memo default const, Card keyboard a11y (5)

Closes #5, closes #6, closes #7, closes #8, closes #9
---
 app/(frontend)/blog/[slug]/page.tsx | 12 +++++-------
 app/(frontend)/blog/page.tsx        |  4 ++--
 app/(frontend)/layout.tsx           |  2 +-
 app/(frontend)/not-found.tsx        |  2 +-
 app/(frontend)/page.tsx             |  9 ++++++++-
 components/about.tsx                |  2 +-
 components/blogs.tsx                |  4 ++--
 components/footer.tsx               |  2 +-
 components/greeting.tsx             |  8 ++++----
 components/projects.tsx             |  6 +++---
 components/ui/blog-card.tsx         |  4 ++--
 components/ui/card.tsx              | 14 ++++++++++++++
 components/ui/dithering-shader.tsx  |  4 +++-
 components/ui/project-card.tsx      |  8 ++++----
 components/ui/stack-card.tsx        |  4 ++--
 next.config.ts                      |  6 +++++-
 16 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/app/(frontend)/blog/[slug]/page.tsx b/app/(frontend)/blog/[slug]/page.tsx
index ad5859b..5f1b8ea 100644
--- a/app/(frontend)/blog/[slug]/page.tsx
+++ b/app/(frontend)/blog/[slug]/page.tsx
@@ -15,8 +15,7 @@ type Props = {
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug } = await params;
-  const payload = await getPayload({ config });
+  const [{ slug }, payload] = await Promise.all([params, getPayload({ config })]);
   const {
     docs: [post],
   } = await payload.find({
@@ -34,8 +33,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function BlogPostPage({ params }: Props) {
-  const { slug } = await params;
-  const payload = await getPayload({ config });
+  const [{ slug }, payload] = await Promise.all([params, getPayload({ config })]);
   const {
     docs: [post],
   } = await payload.find({
@@ -57,7 +55,7 @@ export default async function BlogPostPage({ params }: Props) {
           href="/blog"
           className="text-neutral-500 text-sm hover:text-white transition-colors duration-300"
         >
-          <ChevronLeft className="inline w-3.5 h-3.5" /> Back to blog
+          <ChevronLeft className="inline size-3.5" /> Back to blog
         </Link>
       </div>
 
@@ -66,7 +64,7 @@ export default async function BlogPostPage({ params }: Props) {
           <h1 className="text-2xl font-medium tracking-tight font-pixel">{post.title}</h1>
 
           <div className="flex flex-wrap gap-3 text-xs text-neutral-500 mt-3">
-            <span>
+            <span suppressHydrationWarning>
               {new Date(post.publishedAt).toLocaleDateString("en-US", {
                 year: "numeric",
                 month: "long",
@@ -118,7 +116,7 @@ export default async function BlogPostPage({ params }: Props) {
           href="/blog"
           className="text-neutral-500 text-sm hover:text-white transition-colors duration-300"
         >
-          <ChevronLeft className="inline w-3.5 h-3.5" /> Back to all posts
+          <ChevronLeft className="inline size-3.5" /> Back to all posts
         </Link>
       </div>
     </main>
diff --git a/app/(frontend)/blog/page.tsx b/app/(frontend)/blog/page.tsx
index 185e24c..5da82a0 100644
--- a/app/(frontend)/blog/page.tsx
+++ b/app/(frontend)/blog/page.tsx
@@ -26,7 +26,7 @@ export default async function BlogPage() {
           href="/"
           className="text-neutral-500 text-sm hover:text-white transition-colors duration-300"
         >
-          <ChevronLeft className="inline w-3.5 h-3.5" /> Back
+          <ChevronLeft className="inline size-3.5" /> Back
         </Link>
       </div>
 
@@ -44,7 +44,7 @@ export default async function BlogPage() {
                 </h2>
 
                 <div className="flex gap-2 text-xs text-neutral-500 mt-1.5">
-                  <span>
+                  <span suppressHydrationWarning>
                     {new Date(post.publishedAt).toLocaleDateString("en-US", {
                       year: "numeric",
                       month: "short",
diff --git a/app/(frontend)/layout.tsx b/app/(frontend)/layout.tsx
index 9ea4b38..f50e9fe 100644
--- a/app/(frontend)/layout.tsx
+++ b/app/(frontend)/layout.tsx
@@ -29,7 +29,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={`${GeistSans.variable} ${GeistPixelSquare.variable}`}>
-      <body className="scroll-smooth min-h-screen bg-black">
+      <body className="scroll-smooth min-h-screen bg-gray-950">
         {children}
         <Analytics />
         <SpeedInsights />
diff --git a/app/(frontend)/not-found.tsx b/app/(frontend)/not-found.tsx
index 5cb255c..a9c24bd 100644
--- a/app/(frontend)/not-found.tsx
+++ b/app/(frontend)/not-found.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-black text-white">
+    <main className="flex min-h-screen items-center justify-center bg-gray-950 text-white">
       <div className="text-center">
         <h1 className="text-5xl font-medium tracking-tight mb-4">404</h1>
         <p className="text-neutral-400 text-sm mb-8">This page doesn&apos;t exist.</p>
diff --git a/app/(frontend)/page.tsx b/app/(frontend)/page.tsx
index 159895a..77193fa 100644
--- a/app/(frontend)/page.tsx
+++ b/app/(frontend)/page.tsx
@@ -1,5 +1,6 @@
 export const dynamic = "force-dynamic";
 
+import type { Metadata } from "next";
 import { About } from "@/components/about";
 import { Blogs } from "@/components/blogs";
 import { Footer } from "@/components/footer";
@@ -10,9 +11,15 @@ import { Stack } from "@/components/stack";
 import { HeroShader } from "@/components/hero-shader";
 import Link from "next/link";
 
+export const metadata: Metadata = {
+  title: "Khushal Bhardwaj | Full Stack Web Developer",
+  description:
+    "Portfolio of Khushal Bhardwaj, a Full Stack Web Developer based in Jaipur, India, building web apps with React and Next.js.",
+};
+
 export default function Home() {
   return (
-    <main className="min-h-screen bg-black relative">
+    <main className="min-h-screen bg-gray-950 relative">
       {/* Navigation - top right */}
       <header className="absolute top-0 right-0 p-8 md:p-12 z-20">
         <Links />
diff --git a/components/about.tsx b/components/about.tsx
index e0794c7..65aa457 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -5,7 +5,7 @@ export function About() {
       <div className="space-y-4 text-sm text-neutral-400 leading-relaxed">
         <p>
           Hey, I&apos;m{" "}
-          <span className="text-white font-medium">Khushal Bhardwaj</span> — a
+          <span className="text-white font-medium">Khushal Bhardwaj</span>, a
           Full Stack Web Developer based in Jaipur, India. Passionate about
           building web apps with React/NextJS. I&apos;m also an undergrad at VIT
           Bhopal University.
diff --git a/components/blogs.tsx b/components/blogs.tsx
index 471d1cc..9115d27 100644
--- a/components/blogs.tsx
+++ b/components/blogs.tsx
@@ -27,7 +27,7 @@ export async function Blogs() {
               {post.title}
             </h3>
             <div className="flex gap-2 text-xs text-neutral-500 mt-1">
-              <span>
+              <span suppressHydrationWarning>
                 {new Date(post.publishedAt).toLocaleDateString("en-US", {
                   year: "numeric",
                   month: "short",
@@ -53,7 +53,7 @@ export async function Blogs() {
         href="/blog"
         className="text-neutral-500 text-xs hover:text-white transition-colors duration-300 inline-block mt-2"
       >
-        View all posts <ArrowUpRight className="inline w-3 h-3" />
+        View all posts <ArrowUpRight className="inline size-3" />
       </Link>
     </section>
   );
diff --git a/components/footer.tsx b/components/footer.tsx
index 694a9a9..12ba2d5 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -11,7 +11,7 @@ export function Footer() {
   return (
     <footer className="border-t border-neutral-800 pt-8 mt-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <p className="text-neutral-500 text-xs">
+        <p className="text-neutral-500 text-xs" suppressHydrationWarning>
           &copy; {new Date().getFullYear()} Khushal Bhardwaj. Built with
           Next.js.
         </p>
diff --git a/components/greeting.tsx b/components/greeting.tsx
index aa9cc94..d650579 100644
--- a/components/greeting.tsx
+++ b/components/greeting.tsx
@@ -1,15 +1,15 @@
-/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
 
 export function Greeting() {
   return (
     <section className="space-y-6">
-      <div className="w-20 h-20 rounded-full overflow-hidden bg-neutral-800 ring-2 ring-neutral-700">
-        <img
+      <div className="size-20 rounded-full overflow-hidden bg-neutral-800 ring-2 ring-neutral-700">
+        <Image
           src="https://github.com/celeroncoder.png"
           alt="Khushal Bhardwaj"
           width={80}
           height={80}
-          className="object-cover w-full h-full"
+          className="object-cover size-full"
         />
       </div>
 
diff --git a/components/projects.tsx b/components/projects.tsx
index dba32cf..83b8a8a 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -57,10 +57,10 @@ export function Projects() {
                   rel="noopener noreferrer"
                   className="text-neutral-500 text-xs hover:text-white transition-colors duration-300"
                 >
-                  GitHub <ArrowUpRight className="inline w-3 h-3" />
+                  GitHub <ArrowUpRight className="inline size-3" />
                 </Link>
               ) : (
-                <span className="text-neutral-600 text-xs"><Lock className="inline w-3 h-3" /> Private</span>
+                <span className="text-neutral-600 text-xs"><Lock className="inline size-3" /> Private</span>
               )}
               {project.live_url && (
                 <Link
@@ -69,7 +69,7 @@ export function Projects() {
                   rel="noopener noreferrer"
                   className="text-neutral-500 text-xs hover:text-white transition-colors duration-300"
                 >
-                  Live <ArrowUpRight className="inline w-3 h-3" />
+                  Live <ArrowUpRight className="inline size-3" />
                 </Link>
               )}
             </div>
diff --git a/components/ui/blog-card.tsx b/components/ui/blog-card.tsx
index b180edc..af0757b 100644
--- a/components/ui/blog-card.tsx
+++ b/components/ui/blog-card.tsx
@@ -21,7 +21,7 @@ export const BlogCard: React.FC<Blog> = ({
     <Card>
       <div className="flex items-center gap-2 mb-2">
         <span className="text-neutral-500 text-xs">[FILE]</span>
-        <h3 className="text-white font-bold text-sm">{title}</h3>
+        <h3 className="text-white font-semibold text-sm">{title}</h3>
       </div>
 
       <div className="flex gap-2 text-xs text-neutral-500 mb-2">
@@ -40,7 +40,7 @@ export const BlogCard: React.FC<Blog> = ({
         href={`/blog/${slug}`}
         className="text-blue-400 text-xs hover:underline"
       >
-        <ChevronRight className="inline w-3 h-3" /> read
+        <ChevronRight className="inline size-3" /> read
       </Link>
     </Card>
   );
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index fb79762..0d5ba1e 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -5,9 +5,23 @@ export const Card: React.FC<{
   className?: string;
   onClick?: () => void;
 }> = ({ children, className = "", onClick }) => {
+  const handleKeyDown = onClick
+    ? (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+          onClick();
+        } else if (e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }
+    : undefined;
+
   return (
     <div
       onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={handleKeyDown}
       className={cn(
         "border-l-2 border-white pl-4 py-3",
         "hover:border-green-500 transition-colors duration-200",
diff --git a/components/ui/dithering-shader.tsx b/components/ui/dithering-shader.tsx
index e713075..49e04d7 100644
--- a/components/ui/dithering-shader.tsx
+++ b/components/ui/dithering-shader.tsx
@@ -324,6 +324,8 @@ function createProgram(
   return program
 }
 
+const EMPTY_STYLE: React.CSSProperties = {};
+
 export function DitheringShader({
   width = 800,
   height = 800,
@@ -334,7 +336,7 @@ export function DitheringShader({
   pxSize = 4,
   speed = 1,
   className = "",
-  style = {},
+  style = EMPTY_STYLE,
 }: DitheringShaderProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const animationRef = useRef<number>(0)
diff --git a/components/ui/project-card.tsx b/components/ui/project-card.tsx
index f2afb32..90d252e 100644
--- a/components/ui/project-card.tsx
+++ b/components/ui/project-card.tsx
@@ -19,7 +19,7 @@ export const ProjectCard: React.FC<Project> = ({
     <Card>
       <div className="flex items-center gap-2 mb-2">
         <span className="text-neutral-500 text-xs">[DIR]</span>
-        <h3 className="text-white font-bold text-sm">{title}</h3>
+        <h3 className="text-white font-semibold text-sm">{title}</h3>
       </div>
 
       <p className="text-neutral-400 text-xs mb-3">{description}</p>
@@ -32,10 +32,10 @@ export const ProjectCard: React.FC<Project> = ({
             rel="noopener noreferrer"
             className="text-blue-400 hover:underline"
           >
-            <ChevronRight className="inline w-3 h-3" /> github
+            <ChevronRight className="inline size-3" /> github
           </Link>
         ) : (
-          <span className="text-neutral-600"><Lock className="inline w-3 h-3" /> private</span>
+          <span className="text-neutral-600"><Lock className="inline size-3" /> private</span>
         )}
         {live_url && (
           <Link
@@ -44,7 +44,7 @@ export const ProjectCard: React.FC<Project> = ({
             rel="noopener noreferrer"
             className="text-blue-400 hover:underline"
           >
-            <ExternalLink className="inline w-3 h-3" /> live
+            <ExternalLink className="inline size-3" /> live
           </Link>
         )}
       </div>
diff --git a/components/ui/stack-card.tsx b/components/ui/stack-card.tsx
index 820aaac..60d7f0b 100644
--- a/components/ui/stack-card.tsx
+++ b/components/ui/stack-card.tsx
@@ -10,9 +10,9 @@ export const StackCard: React.FC<Stack> = ({ title, description }) => {
   return (
     <Card>
       <div className="flex items-center gap-3">
-        <Play className="w-3.5 h-3.5 text-green-500 fill-green-500" />
+        <Play className="size-3.5 text-green-500 fill-green-500" />
         <div>
-          <h4 className="text-white font-bold text-sm">{title}</h4>
+          <h4 className="text-white font-semibold text-sm">{title}</h4>
           {description && (
             <p className="text-neutral-500 text-xs">{description}</p>
           )}
diff --git a/next.config.ts b/next.config.ts
index ee2b339..4738283 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,10 @@
 import type { NextConfig } from "next";
 import { withPayload } from "@payloadcms/next/withPayload";
 
-const nextConfig: NextConfig = {};
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [{ protocol: "https", hostname: "github.com" }],
+  },
+};
 
 export default withPayload(nextConfig);

From 1c0981654f86cc3c2ecafbd19a4c9f05b4d6326a Mon Sep 17 00:00:00 2001
From: Khushal Bhardwaj <khushalbhardwaj0111@gmail.com>
Date: Sun, 14 Jun 2026 12:57:39 +0530
Subject: [PATCH 2/3] Add pnpm-workspace.yaml; gitignore .pnpm-store cache

---
 .gitignore          | 3 +++
 pnpm-workspace.yaml | 5 +++++
 2 files changed, 8 insertions(+)
 create mode 100644 pnpm-workspace.yaml

diff --git a/.gitignore b/.gitignore
index 17cdd65..b07294c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,6 @@ next-env.d.ts
 # payload
 /public/media
 payload.db
+
+# pnpm local store cache
+.pnpm-store/
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..277fa3b
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+allowBuilds:
+  bufferutil: true
+  esbuild: true
+  sharp: true
+  utf-8-validate: true

From 1e02bd7d52b3e958d44284a21cdd48b0573d0f3b Mon Sep 17 00:00:00 2001
From: Khushal Bhardwaj <khushalbhardwaj0111@gmail.com>
Date: Sun, 14 Jun 2026 13:01:16 +0530
Subject: [PATCH 3/3] Fix Vercel build: remove pnpm-workspace.yaml

pnpm-workspace.yaml (added in 1c09816) only contained allowBuilds and no
'packages:' field. Vercel's pnpm 9.x reads it as a workspace root and fails
with 'packages field missing or empty'. The repo is not a monorepo and already
declares build-allowed deps via package.json 'pnpm.onlyBuiltDependencies', so
remove the file and gitignore it to prevent reintroduction by newer pnpm.
---
 .gitignore          | 1 +
 pnpm-workspace.yaml | 5 -----
 2 files changed, 1 insertion(+), 5 deletions(-)
 delete mode 100644 pnpm-workspace.yaml

diff --git a/.gitignore b/.gitignore
index b07294c..0b0dac7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ payload.db
 
 # pnpm local store cache
 .pnpm-store/
+pnpm-workspace.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
deleted file mode 100644
index 277fa3b..0000000
--- a/pnpm-workspace.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-allowBuilds:
-  bufferutil: true
-  esbuild: true
-  sharp: true
-  utf-8-validate: true