Performance improvement

Author: ctrl-vi

src/assets/arc.webp

@@ -1,4 +1,6 @@
 ---
+import type { CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
 import "./Card.css";
 
 function formatDate(date : string) {
@@ -9,14 +11,14 @@ function formatDate(date : string) {
     return (dateObject.getUTCMonth() + 1) + "/" + dateObject.getUTCFullYear();
 }
 
-const {title, image, description, link, startDate, finishDate} = Astro.props;
+const { link, title, startDate, finishDate, image, alt, description } = Astro.props;
 
 const dateString = formatDate(startDate) + " - " + formatDate(finishDate); 
 ---
 
 <a href={link} class="card-link">
 <div class="card">
-    <img style="width:100%" src={image.src}, alt={image.alt} />
+    <Image class="card-image" src={image} alt={alt} loading="eager"/>
     <h2 class="card-header"><b>{title}</b></h2>
     <p class ="card-date">{dateString}</p>
     <p class="card-text">{description}</p>

src/assets/astro.webp

@@ -13,6 +13,10 @@ a {
     box-shadow: 0 1em 2em 0 rgba(0,0,0,0.2);
 }
 
+.card > .card-image {
+    width: 100%;
+    height: auto;
+}
 .card > h2 {
     text-align: center;
 }

public/images/github.svg src/assets/github.svgpublic/images/github.svg renamed to src/assets/github.svg

@@ -1,6 +1,11 @@
 ---
 import Social from "./Social.astro";
 import "./Footer.css";
+import github from "@assets/github.svg"
+import linkedin from "@assets/linkedin.svg"
+import phone from "@assets/phone.svg"
+import mail from "@assets/mail.svg"
+
 
 const year = new Date().getFullYear();
 ---
@@ -17,20 +22,20 @@ const year = new Date().getFullYear();
 
   <div class="socials">
     <Social 
-      image="/images/github.svg" 
+      image={github} 
       alt="Github logo links to Violet Monserate's personal Github"
       link="https://github.com/ctrl-vi" />
     <Social
-      image="/images/linkedin.svg"
+      image={linkedin}
       alt="LinkedIn logo links to Violet Monserate's LinkedIn"
       link="https://www.linkedin.com/in/violet-monserate/"
     />
     <Social 
-      image="/images/phone.svg" 
+      image={phone} 
       alt="Phone icon links to calling Violet Monserate's personal number"
       link="tel:425-970-5779" />
     <Social 
-      image="/images/mail.svg" 
+      image={mail} 
       alt="Mail icon links to sending Violet Monserate an email"
       link="mailto:violetmonserate@gmail.com" />
   </div>