improved images loading. using Astro.Image

Author: MuhammadPen

public/1mindFirst.png src/assets/1mindFirst.pngpublic/1mindFirst.png renamed to src/assets/1mindFirst.png

@@ -1,8 +1,10 @@
 ---
+import { Image } from "astro:assets";
+
 interface Props {
   title: string;
   link: string;
-  slides: { image?: string; description?: string }[];
+  slides: { image?: ImageMetadata; description?: string }[];
   color: string;
 }
 
@@ -26,10 +28,16 @@ const { title, link, slides, color } = Astro.props;
             <div class="showcase-slide flex md:flex-row flex-col-reverse md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
               {slide.image && (
                 <div class="md:border-r p-5">
-                  <img
+                  <Image
                     class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
                     src={slide.image}
-                    alt={slide.description}
+                    alt={slide.description || title}
+                    width={768}
+                    height={425}
+                    format="webp"
+                    quality={80}
+                    loading="lazy"
+                    decoding="async"
                   />
                 </div>
               )}

public/1mindSecond.png src/assets/1mindSecond.pngpublic/1mindSecond.png renamed to src/assets/1mindSecond.png

@@ -1,4 +1,11 @@
 ---
+import mindFirst from "../assets/1mindFirst.png";
+import mindSecond from "../assets/1mindSecond.png";
+import seshaSystemsFirst from "../assets/seshaSystemsFirst.png";
+import seshaSystemsSecond from "../assets/seshaSystemsSecond.png";
+import peaqueFirst from "../assets/peaqueFirst.png";
+import peaqueSecond from "../assets/peaqueSecond.png";
+
 import BaseLayout from "../layouts/base.astro";
 import ProjectShowcase from "../components/projectShowcase.astro";
 ---
@@ -11,14 +18,14 @@ import ProjectShowcase from "../components/projectShowcase.astro";
       link="https://1mind.com"
       slides={[
         {
-          image: "/1mindFirst.png",
+          image: mindFirst,
           description: `1mind is an AI agent company.
 They specialize in creating both realistic and unrealistic ai avatars which can be trained
 on your voice and mannerisms in few minutes.
 They can be used as sales representatives, information providers, customer support agents and pretty much anywhere you would want customer interaction. `,
         },
         {
-          image: "/1mindSecond.png",
+          image: mindSecond,
           description: `I worked here as a fullstack engineer and cloud architect.
           helped create their zoom integration.
           built and managed parts of their aws and gcp cloud infrastructure.
@@ -45,11 +52,11 @@ openai.anthropic.`,
       link="https://peaque.io"
       slides={[
         {
-          image: "/peaqueFirst.png",
+          image: peaqueFirst,
           description: `peaque.io is an online book reading platform mixed with social media features. you can leave public notes/comments on any part of a book and people can react and reply to your notes. alongside that you can also create your own library, add custom artwork and chat with characters from the books (using ai).`,
         },
         {
-          image: "/peaqueSecond.png",
+          image: peaqueSecond,
           description: `i led a small team of 2 engineers and we built this entire platform from scratch. i worked as a fullstack engineer. built and implemented a custom version of an open source reading library(https://github.com/d-i-t-a/R2D2BC). designed the app architecture. built a fully response interface with my teammates. built the mobile app for this platform.`,
         },
         {
@@ -71,11 +78,11 @@ react helmet.`,
       link="https://sesha-systems.com"
       slides={[
         {
-          image: "/seshaSystemsFirst.png",
+          image: seshaSystemsFirst,
           description: `sesha systems is a multi-tenant article generation and editing tool. it allows users to provide 1 or more links to news articles. and then generates a new article based on the provided links. It can also be used to summarize news. it contains a full article management system with features version control, archiving, cross-org sharing, exporting and real time updates. `,
         },
         {
-          image: "/seshaSystemsSecond.png",
+          image: seshaSystemsSecond,
           description: `I worked as a fullstack engineer and cloud architect. built the application architecture including the article generation pipeline. created in-house tooling which included a custom syntax parser that our ai engineer used to create and edit prompts in real time.
 implemented multi-tenancy. built the user interface with real time article generation updates.`,
         },

public/noise.svg src/assets/noise.svgpublic/noise.svg renamed to src/assets/noise.svg

@@ -45,7 +45,7 @@ body {
 .grain-background {
   background: 
 	linear-gradient(25deg, #ffffff, #ffffff48),
-	url(/noise.svg);
+	url(/src/assets/noise.svg);
 }
 
 .custom-cursor {