feat: Optimize image processing and performance

- Implement WebP image format conversion
- Reduce image file sizes through compression
- Improve overall performance optimizations

Author: amirallami-code

output.css

@@ -573,7 +573,8 @@ <h1 class="title h-full min-h-[3.7em] sm:min-h-[2.5em] leading-tight">
                 <div>510</div>
               </div>
               <pre
-                class="code-content"
+                class="code-content lazy"
+                loading="lazy"
                 id="code-content"
               ><code class="html-code">&lt;<span class="tag">section</span> <span class="attr">id</span>=<span class="string">"home"</span> <span class="attr">class</span>=<span class="string">"flex flex-row flex-wrap w-full h-auto justify-center items-center mx-auto px-4 gap-8"</span>&gt;
   &lt;<span class="tag">div</span> <span class="attr">class</span>=<span class="string">"home-info flex flex-col w-full max-w-xl gap-6"</span>&gt;
@@ -778,7 +779,7 @@ <h2 class="title w-full text-left">My Github</h2>
                   class="github-self__titles flex flex-row flex-wrap items-center justify-start gap-4"
                 >
                   <img
-                    src="images/github/profile.jpeg"
+                    src="images/github/profile.jpg"
                     alt="Github Profile"
                     class="max-w-12 max-h-12 rounded-full"
                   />
@@ -827,14 +828,14 @@ <h2 class="title w-full text-left">My Github</h2>
             <!-- Desktop -->
             <img
               class="github-desktop hidden lg:block max-w-xl"
-              src="images/github/desktop.png"
+              src="images/github/desktop.webp"
               alt="Github Section's Background"
               loading="lazy"
             />
             <!-- Mobile -->
             <img
               class="github-mobile lg:hidden min-w-[175%]"
-              src="images/github/mobile.png"
+              src="images/github/mobile.webp"
               alt="Github Section's Background"
               loading="lazy"
             />
@@ -852,21 +853,34 @@ <h2 class="title w-full text-left">My Github</h2>
         <div
           class="flex flex-row items-start justify-center flex-wrap lg:flex-nowrap gap-4"
         >
-          <div class="touch-graphic min-w-64 max-w-md">
-            <creattie-embed
-              src="https://d1jj76g3lut4fe.cloudfront.net/saved_colors/100163/JClZL6y5QqPVOpgd.json"
-              delay="1"
-              speed="100"
-              frame_rate="24"
-              trigger="loop"
-              loading="lazy"
-              class="bg-transparent"
-            >
-            </creattie-embed>
-            <script
-              src="https://creattie.com/js/embed.js?id=3f6954fde297cd31b441"
-              defer
-            ></script>
+          <div
+            class="touch-graphic animation-placeholder min-w-64 max-w-md"
+            id="creattie-container2"
+          >
+            <script>
+              window.addEventListener("load", function () {
+                const script = document.createElement("script");
+                script.src =
+                  "https://creattie.com/js/embed.js?id=3f6954fde297cd31b441";
+                document.body.appendChild(script);
+
+                const animation = document.createElement("creattie-embed");
+                animation.setAttribute(
+                  "src",
+                  "https://d1jj76g3lut4fe.cloudfront.net/saved_colors/100163/meEdlyNeNjLyCUVm.json"
+                );
+                animation.setAttribute("delay", "1");
+                animation.setAttribute("speed", "100");
+                animation.setAttribute("loading", "lazy");
+                animation.setAttribute("frame_rate", "24");
+                animation.setAttribute("trigger", "loop");
+                animation.className = "bg-transparent";
+
+                document
+                  .getElementById("creattie-container2")
+                  .appendChild(animation);
+              });
+            </script>
           </div>
           <div
             class="touch-context w-full flex flex-col gap-6 md:gap-12 text-priBlue dark:text-primary"

src/images/certificates/png/cer-IFD.jpg

@@ -149,9 +149,9 @@ const certificatesData = [
         earnedOn: "Jul 7, 2024",
         verifyLink: "https://www.coursera.org/account/accomplishments/verify/HF7Y6KJLLGK9",
         downloadPath: "images/certificates/pdf/cer-IFD.pdf",
-        imagePath: "images/certificates/png/cer-IFD.png",
+        imagePath: "images/certificates/png/cer-IFD.jpg",
         imageAlt: "Coursera Certificate - Introduction to Front-end Development",
-        providerLogo: "images/logos/meta-logo.png"
+        providerLogo: "images/certificates/provider/meta-logo.webp"
     },
     {
         title: "Programming with JavaScript",
@@ -160,9 +160,9 @@ const certificatesData = [
         earnedOn: "Jan 25, 2025",
         verifyLink: "https://www.coursera.org/account/accomplishments/verify/C8G31UOCMO46",
         downloadPath: "images/certificates/pdf/cer-JS.pdf",
-        imagePath: "images/certificates/png/cer-js.png",
+        imagePath: "images/certificates/png/cer-js.jpg",
         imageAlt: "Coursera Certificate - Programming with JavaScript",
-        providerLogo: "images/logos/meta-logo.png"
+        providerLogo: "images/certificates/provider/meta-logo.webp"
     },
     {
         title: "Version Control",
@@ -171,9 +171,9 @@ const certificatesData = [
         earnedOn: "Mar 3, 2025",
         verifyLink: "https://www.coursera.org/account/accomplishments/verify/0XEJ04PVV5ZW",
         downloadPath: "images/certificates/pdf/cer-VC.pdf",
-        imagePath: "images/certificates/png/cer-VC.png",
+        imagePath: "images/certificates/png/cer-VC.jpg",
         imageAlt: "Coursera Certificate - Version Control",
-        providerLogo: "images/logos/meta-logo.png"
+        providerLogo: "images/certificates/provider/meta-logo.webp"
     },
 ];
 

src/images/certificates/png/cer-IFD.png

@@ -55,7 +55,7 @@ function createMobileSkillCard(skill) {
   card.innerHTML = `
     <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <div class="flex items-center gap-3">
-        <img src="${skill.icon}" alt="${skill.name}" title="${skill.name}" class="w-6 h-6" />
+        <img src="${skill.icon}" loading="lazy" alt="${skill.name}" title="${skill.name}" class="w-6 h-6" />
         <h4 class="font-medium text-gray-900 dark:text-white">${skill.name}</h4>
       </div>
       <div class="mt-2">
@@ -108,7 +108,7 @@ function createDesktopSkillRow(skill) {
 
   row.innerHTML = `
     <th scope="row" class="flex flex-row items-center gap-3 px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-      <img src="${skill.icon}" alt="${skill.name}" title="${skill.name}" class="w-6 h-6" />
+      <img src="${skill.icon}" loading="lazy" alt="${skill.name}" title="${skill.name}" class="w-6 h-6" />
       ${skill.fullName}
     </th>
     <td class="px-6 py-4">
@@ -174,7 +174,7 @@ function createCertificateCard(cert) {
     <div class="cer-context h-full w-full flex flex-col gap-2 justify-between">
       <div class="flex flex-col gap-2 flex-1">
         <p class="cer-earnDate text-sm">Earned on <b>${cert.earnedOn}</b></p>
-        <div class="cer-logo bg-white px-2 py-1 w-[4.5rem] rounded-full">
+        <div class="cer-logo w-20 py-1 px-2 bg-white rounded-full">
           <img src="${cert.providerLogo}" alt="${cert.provider} Logo" />
         </div>
         <a title="verify link" href="${cert.verifyLink}" class="cer-title font-mont-bold leading-5 hover:underline" target="_blank">