Improved images

src/layouts/Main.astro

@@ -58,13 +58,25 @@ const {
     </main>
     <footer class="md:row-start-2 emph-bg flex justify-center gap-3 py-3">
       <a href="https://github.com/lbfalvy">
-        <Image height="20" width="20" src={GhLogo} alt="Github" />
+        <Image
+          height="20"
+          width="20"
+          src={GhLogo}
+          alt="Github"
+          loading="eager"
+        />
       </a>
       <a href="/rss.xml">
-        <Image height="20" width="20" src={RssLogo} alt="Rss" />
+        <Image height="20" width="20" src={RssLogo} alt="Rss" loading="eager" />
       </a>
       <a href="https://bsky.app/profile/lbfalvy.bsky.social">
-        <Image height="20" width="20" src={BskyLogo} alt="BlueSky" />
+        <Image
+          height="20"
+          width="20"
+          src={BskyLogo}
+          alt="BlueSky"
+          loading="eager"
+        />
       </a>
       <a href="https://fosstodon.org/@lbfalvy">
         <img
@@ -72,6 +84,7 @@ const {
           alt="Fosstodon"
           height="20"
           width="20"
+          loading="eager"
         />
       </a>
     </footer>

src/pages/about.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import Main from "../layouts/Main.astro";
 
 ---
@@ -8,7 +9,8 @@ import Main from "../layouts/Main.astro";
 	description="Lawrence Bethlenfalvy, software engineer"
 >
 	<div class="max-w-[80ch] m-5">
-		<img src='https://github.com/lbfalvy.png'
+		<Image src='https://github.com/lbfalvy.png' loading="eager"
+			alt="My face" width="120" height="120"
 			class="rounded-full h-30 float-right m-3 [shape-outside:_ellipse()]" />
 		<p>
 			My name is Lawrence Bethlenfalvy, I make websites and web-based applications primarily

src/pages/projects.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection, render } from "astro:content";
 import Main from "../layouts/Main.astro";
+import { Image } from "astro:assets";
 
 const projects = await getCollection("projects");
 const projReady = await Promise.all(
@@ -14,9 +15,10 @@ const projReady = await Promise.all(
       projReady.map(([proj, Content]) => (
         <a href={proj.data.url}>
           <article class="emph-bg m-3 p-2 text-sm rounded-2xl">
-            {proj.data.image && <img
+            {proj.data.image && <Image
               src={proj.data.image}
               alt=""
+              loading="eager"
               width="100" height="60"
               class="object-center aspect-[16/9] w-full"
             />}

tailwind.config.mjs

@@ -1,5 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	
-}