Optimize homepage GIFs with Cloudinary transformations for better performance

Author: ThomasJButler

src/constants/placeholderImages.ts

@@ -55,7 +55,7 @@ export const PLACEHOLDER_IMAGES = {
   matrixArcadeStatic: 'https://res.cloudinary.com/depqttzlt/image/upload/v1767710994/matrixarcade2_kbbnaf.png',
 
   // HomePage introduction images - GIFs and Video
-  matrixArcadeGif: 'https://res.cloudinary.com/depqttzlt/image/upload/v1767712404/matrixarcadegif2_ubesub.gif',
+  matrixArcadeGif: 'https://res.cloudinary.com/depqttzlt/image/upload/w_320,q_auto,f_auto/v1767712404/matrixarcadegif2_ubesub.gif',
   modelVizGif: 'https://res.cloudinary.com/depqttzlt/image/upload/v1767712413/modelvizgif2_wkl1lh.gif',
   morpheusVideo: 'https://res.cloudinary.com/depqttzlt/video/upload/v1767706547/2_1080_N_s5t1ww.mp4',
   morpheusGif: 'https://res.cloudinary.com/depqttzlt/image/upload/v1767712416/morpheusgif2_zdkku9.gif',

src/pages/HomePage.tsx

@@ -399,11 +399,11 @@ export const HomePage: React.FC = () => {
           <div className="introduction-img">
             <img src={PLACEHOLDER_IMAGES.matrixArcadeGif} alt="The Matrix Arcade - Interactive Gaming Portal" />
             <img
-              src="https://res.cloudinary.com/depqttzlt/image/upload/v1768064855/Tom_Minimalist_3D_logo_of_Personal_with_a_glowing_neon-green__fd6f82e1-e17a-459f-825b-aee88269f44a_1_ecz9sh.gif"
+              src="https://res.cloudinary.com/depqttzlt/image/upload/w_320,q_auto,f_auto/v1768064855/Tom_Minimalist_3D_logo_of_Personal_with_a_glowing_neon-green__fd6f82e1-e17a-459f-825b-aee88269f44a_1_ecz9sh.gif"
               alt="Personal Logo Animation"
               className="intro-featured"
             />
-            <img src="https://res.cloudinary.com/depqttzlt/image/upload/v1768067110/modelviz2short_ukdyda.gif" alt="ModelViz - AI Model Comparison Platform" />
+            <img src="https://res.cloudinary.com/depqttzlt/image/upload/w_320,q_auto,f_auto/v1768067110/modelviz2short_ukdyda.gif" alt="ModelViz - AI Model Comparison Platform" />
           </div>
 
           {/* Featured Projects Section */}