celeroncoder · celeroncoder · Jun 14, 2026 · Jun 14, 2026 · Jun 14, 2026 · Jun 14, 2026
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,7 @@ next-env.d.ts
 # payload
 /public/media
 payload.db
+
+# pnpm local store cache
+.pnpm-store/
+pnpm-workspace.yaml
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);