From 1da15a540208abfcdc6a7a0e32ce6eee14e97c99 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Thu, 14 Nov 2024 15:48:26 +0100
Subject: [PATCH] fix image sizes

this way we prevent layout shifts
---
 index.html | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 0095b74..1e6fd6e 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
     <section>
       <div class="container">
         <h3>Allow me to introduce myself...</h3>
-        <img src="images/cv.webp" class="image" alt="A photo of myself, smiling to camera." />
+        <img src="images/cv.webp" class="profile"  width="320px" alt="A photo of myself, smiling to camera." />
 
         <div id="intro">
           <p>
@@ -169,11 +169,10 @@
               <h3>Subman</h3>
             </a>
             <div class="gallery">
-              <a href="images/subman.webp"><img src="images/subman.png" alt="A screenshot of subman in action."
-                  class="desktop-screen" /></a>
-              <a href="images/subman-mobile.webp"><img src="images/subman-mobile.png"
-                  alt="A screenshot of subman on mobile." class="mobile-screen"></a>
-              <a href="images/subman-mobile-2.webp"><img src="images/subman-mobile-2.png" class="mobile-screen"
+              <a href="images/subman.webp"><img src="images/subman.webp" width="320px"  width="240px" alt="A screenshot of subman in action." class="desktop-screen" /></a>
+              <a href="images/subman-mobile.webp"><img src="images/subman-mobile.webp" width="120px" 
+                   alt="A screenshot of subman on mobile." class="mobile-screen"></a>
+              <a href="images/subman-mobile-2.webp"><img src="images/subman-mobile-2.webp" width="120px"  class="mobile-screen"
                   alt="A screenshot of subman on mobile."></a>
             </div>
             <p>
@@ -191,12 +190,12 @@
               <h3>Movie-Explorer</h3>
             </a>
             <div class="gallery">
-              <a href="images/movie-explorer.webp"><img src="images/movie-explorer.png"
-                  alt="A screenshot of Movie-Explorer in action." class="desktop-screen"></a>
-              <a href="images/movie-explorer-mobile.webp"><img src="images/movie-explorer-mobile.png"
-                  alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
-              <a href="images/movie-explorer-mobile-2.webp"><img src="images/movie-explorer-mobile-2.png"
-                  alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
+              <a href="images/movie-explorer.webp"><img src="images/movie-explorer.webp"
+                  alt="A screenshot of Movie-Explorer in action." class="desktop-screen" width="300px"></a>
+              <a href="images/movie-explorer-mobile.webp"><img src="images/movie-explorer-mobile.webp"
+                     width="120px" alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
+              <a href="images/movie-explorer-mobile-2.webp"><img src="images/movie-explorer-mobile-2.webp"
+                   width="120px" alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
             </div>
             <p>
               An app for when you don't know what movie to watch, written in
@@ -211,7 +210,7 @@
             <a href="https://projects.ajstepien.xyz/andrzej/gopaper">
               <h3>GoPaper</h3>
             </a>
-            <a href="images/gopaper.webp"><img src="images/gopaper.png" alt="A screenshot of GoPaper in action."
+            <a href="images/gopaper.webp"><img src="images/gopaper.webp"  width="320px" alt="A screenshot of GoPaper in action."
                 class="desktop-screen" /></a>
             <p>A cross-platform wallpaper demon, built to ensure color harmony, written in Go.</p>
             <div class="links-container">
@@ -234,8 +233,8 @@
             <a href="https://demos.ajstepien.xyz/calculator">
               <h3>Calculator</h3>
             </a>
-            <a href="images/calculator.webp"><img src="images/calculator.png" png
-                alt="A screenshot of the calculator app in action." class="mobile-screen"></a>
+            <a href="images/calculator.webp"><img src="images/calculator.webp"
+                 width="120px" alt="A screenshot of the calculator app in action." class="mobile-screen"></a>
             <p>A simple calculator app written in React and vanilla CSS. Scales responsively to look great on any
               screen.</p>
             <div class="links-container">