chore: project screenshots into webp

Author: sofvanh

index.html

@@ -98,7 +98,7 @@ <h2 class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-500
           <div>
             <a href="https://magicsearch.sofiavanhanen.fi/" target="_blank" rel="noopener noreferrer"
               class="group no-underline">
-              <img src="public/screenshots/magic-search.png" alt="Magic Search"
+              <img src="public/screenshots/magic-search.webp" alt="Magic Search"
                 class="w-full aspect-video rounded object-cover mb-4 border border-stone-100 grayscale group-hover:grayscale-0 group-hover:border-stone-500 [transition:filter_700ms_ease,border-color_300ms_ease]">
               <h3
                 class="text-[1.05rem] font-[550] text-stone-800 tracking-[0.01em] leading-[1.4] underline decoration-transparent group-hover:decoration-stone-500 underline-offset-4 decoration-[0.5px] transition-all duration-300">
@@ -121,7 +121,7 @@ <h2 class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-500
 
           <div>
             <a href="https://nexus-tool.com/" target="_blank" rel="noopener noreferrer" class="group no-underline">
-              <img src="public/screenshots/nexus.png" alt="Nexus"
+              <img src="public/screenshots/nexus.webp" alt="Nexus"
                 class="w-full aspect-video rounded object-cover mb-4 border border-stone-100 grayscale group-hover:grayscale-0 group-hover:border-stone-500 [transition:filter_700ms_ease,border-color_300ms_ease]">
               <h3
                 class="text-[1.05rem] font-[550] text-stone-800 tracking-[0.01em] leading-[1.4] underline decoration-transparent group-hover:decoration-stone-500 underline-offset-4 decoration-[0.5px] transition-all duration-300">
@@ -141,7 +141,7 @@ <h2 class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-500
           <div>
             <a href="https://autoblog.sofiavanhanen.fi/" target="_blank" rel="noopener noreferrer"
               class="group no-underline">
-              <img src="public/screenshots/autoblog.png" alt="Autoblog"
+              <img src="public/screenshots/autoblog.webp" alt="Autoblog"
                 class="w-full aspect-video rounded object-cover mb-4 border border-stone-100 grayscale group-hover:grayscale-0 group-hover:border-stone-500 [transition:filter_700ms_ease,border-color_300ms_ease]">
               <h3
                 class="text-[1.05rem] font-[550] text-stone-800 tracking-[0.01em] leading-[1.4] underline decoration-transparent group-hover:decoration-stone-500 underline-offset-4 decoration-[0.5px] transition-all duration-300">
@@ -160,7 +160,7 @@ <h2 class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-500
 
           <div>
             <a href="https://pantheon.chat/" target="_blank" rel="noopener noreferrer" class="group no-underline">
-              <img src="public/screenshots/pantheon.png" alt="Pantheon"
+              <img src="public/screenshots/pantheon.webp" alt="Pantheon"
                 class="w-full aspect-video rounded object-cover mb-4 border border-stone-100 grayscale group-hover:grayscale-0 group-hover:border-stone-500 [transition:filter_700ms_ease,border-color_300ms_ease]">
               <h3
                 class="text-[1.05rem] font-[550] text-stone-800 tracking-[0.01em] leading-[1.4] underline decoration-transparent group-hover:decoration-stone-500 underline-offset-4 decoration-[0.5px] transition-all duration-300">
@@ -184,7 +184,7 @@ <h2 class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-500
           <div>
             <a href="https://www.existentialhope.com/worlds/beyond-collective-intelligence-cities-of-orare"
               target="_blank" rel="noopener noreferrer" class="group no-underline">
-              <img src="public/screenshots/orare.png" alt="Cities of Orare"
+              <img src="public/screenshots/orare.webp" alt="Cities of Orare"
                 class="w-full aspect-video rounded object-cover mb-4 border border-stone-100 grayscale group-hover:grayscale-0 group-hover:border-stone-500 [transition:filter_700ms_ease,border-color_300ms_ease]">
               <h3
                 class="text-[1.05rem] font-[550] text-stone-800 tracking-[0.01em] leading-[1.4] underline decoration-transparent group-hover:decoration-stone-500 underline-offset-4 decoration-[0.5px] transition-all duration-300">