From 1e7a1c8a5fe29417da5e13396988467ff2fe8e54 Mon Sep 17 00:00:00 2001
From: GeorgeWebberley <george@brain-plus.com>
Date: Mon, 2 Feb 2026 13:53:49 +0100
Subject: [PATCH] Fixed Image tags

---
 app/infrastructure/page.tsx             |  4 ++--
 app/projects/[category]/[slug]/page.tsx |  6 +++++-
 app/projects/[category]/page.tsx        |  2 +-
 components/Footer.tsx                   | 10 +++++++---
 components/MonitorCard.tsx              | 19 +++++++++++++------
 components/ProjectShowcase.tsx          | 15 ++++++++++-----
 6 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/infrastructure/page.tsx b/app/infrastructure/page.tsx
index c856077..9bbead9 100644
--- a/app/infrastructure/page.tsx
+++ b/app/infrastructure/page.tsx
@@ -43,7 +43,7 @@ const CAPABILITIES = [
 
 export default function InfrastructurePage() {
   return (
-    <PageLayout backLink="/" maxWidth="5xl">
+    <PageLayout backLink="/" maxWidth="6xl">
       {/* Header Section */}
       <header className="mb-16 font-mono">
         <div className="flex items-center gap-2 mb-3">
@@ -117,7 +117,7 @@ export default function InfrastructurePage() {
           </div>
 
           <div className="shrink-0">
-            <Link href="/projects/ayla">
+            <Link href="/projects/infrastructure/ayla">
               <motion.div
                 whileHover={{
                   scale: 1.02,
diff --git a/app/projects/[category]/[slug]/page.tsx b/app/projects/[category]/[slug]/page.tsx
index 2d07570..726a001 100644
--- a/app/projects/[category]/[slug]/page.tsx
+++ b/app/projects/[category]/[slug]/page.tsx
@@ -50,7 +50,11 @@ export default function ProjectDetail({
 
   return (
     <PageLayout
-      backLink={`/projects/${category}`}
+      backLink={
+        category == "infrastructure"
+          ? "/infrastructure"
+          : `/projects/${category}`
+      }
       backLabel={`Back to ${category}`}
       maxWidth="6xl"
     >
diff --git a/app/projects/[category]/page.tsx b/app/projects/[category]/page.tsx
index 7b720e6..9905df9 100644
--- a/app/projects/[category]/page.tsx
+++ b/app/projects/[category]/page.tsx
@@ -64,7 +64,7 @@ export default function CategoryPage({
   if (!meta) return <PageLayout backLink="/">Sector not found.</PageLayout>;
 
   return (
-    <PageLayout backLink="/" maxWidth="5xl">
+    <PageLayout backLink="/" maxWidth="6xl">
       <div className="mb-16">
         <h1 className="flex items-center gap-4 text-5xl font-bold tracking-tighter mb-6">
           {meta.icon} {meta.title}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 19f4378..80cb897 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,5 @@
 "use client";
+import Image from "next/image";
 
 export default function Footer() {
   return (
@@ -6,10 +7,13 @@ export default function Footer() {
       <div className="flex items-center gap-6">
         <div className="flex items-center gap-2">
           <p>Pipeline Status</p>
-          <img
+          <Image
             src="https://ci.georgew.dev/api/badges/11/status.svg"
-            alt="Build Status"
-            className="h-3 grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
+            alt="CI Build Status"
+            width={64}
+            height={20}
+            unoptimized
+            className="h-3 w-auto grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
           />
         </div>
         <div className="hidden md:block w-[1px] h-3 bg-neutral-800" />
diff --git a/components/MonitorCard.tsx b/components/MonitorCard.tsx
index acb74e6..6090b48 100644
--- a/components/MonitorCard.tsx
+++ b/components/MonitorCard.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Activity } from "lucide-react";
+import Image from "next/image";
 
 const MONITORS = [
   { id: 2, name: "Datasaur" },
@@ -116,15 +117,21 @@ function RegistrySlider({ isHovered }: { isHovered: boolean }) {
                 {m.name}
               </span>
               <div className="flex gap-1 shrink-0 scale-75 origin-right">
-                <img
+                <Image
                   src={`https://status.georgew.dev/api/badge/${m.id}/status`}
-                  className="h-5"
-                  alt="up"
+                  width={60} // Set a base width
+                  height={20} // Set a base height
+                  className="h-5 w-auto" // Keep your CSS for sizing
+                  alt="System Status"
+                  unoptimized // Essential for live status badges
                 />
-                <img
+                <Image
                   src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`}
-                  className="h-5 opacity-60"
-                  alt="ms"
+                  width={80}
+                  height={20}
+                  className="h-5 w-auto opacity-60"
+                  alt="Average Response Time"
+                  unoptimized
                 />
               </div>
             </div>
diff --git a/components/ProjectShowcase.tsx b/components/ProjectShowcase.tsx
index 6ebe1d4..a6048fb 100644
--- a/components/ProjectShowcase.tsx
+++ b/components/ProjectShowcase.tsx
@@ -43,11 +43,16 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
                 : "border-neutral-800 opacity-40 hover:opacity-100"
             }`}
           >
-            <img
-              src={img}
-              className="h-full w-full object-cover"
-              alt={`Thumb ${i}`}
-            />
+            <div className="relative h-full w-full overflow-hidden">
+              <Image
+                src={img}
+                alt={`Project showcase thumbnail ${i}`}
+                fill
+                className="object-cover transition-transform duration-500 group-hover:scale-105"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              />
+            </div>
+
             {i === index && (
               <motion.div
                 layoutId="active-thumb"