Improve mobile page speed

.github/workflows/deploy-frontend-dev.yml

@@ -1,12 +1,9 @@
 name: DeployFrontendServerlessDev
 
 on:
-  workflow_run:
-    workflows: ["DeployBackendDev"]
-    types:
-      - completed
+  push:
     branches:
-      - "master"
+      - "use-nuxt-image-to-show-images"
 
 jobs:
   deploy-frontend-dev:

infrastructure/frontend.yml

@@ -18,12 +18,7 @@ Parameters:
     Type: String
     Description: Name of the zip file.
 
-Conditions:
-   IsDev: 
-      Fn::Equals: 
-        - Fn::Sub: ${EnvName}
-        - dev
-
+
 Resources:
   SSRFunction:
     Type: AWS::Serverless::Function
@@ -42,11 +37,4 @@ Resources:
       Description:
         Fn::Sub: Canopas Website SSR Frontend Lambda ${EnvName}
       FunctionUrlConfig:
-        AuthType: NONE   
-      Environment:
-        Fn::If:
-          - IsDev
-          - Variables:
-              NUXT_SITE_ENV: 
-                Fn::Sub: ${EnvName}
-          - Ref: AWS::NoValue        
+        AuthType: NONE   

nuxt-frontend/components/CTA/CTA4.vue

@@ -50,13 +50,13 @@
 </template>
 
 <script type="module">
-import cta400 from "@/assets/images/portfolio/new-portfolio/new-cta-400w.webp";
-import cta800 from "@/assets/images/portfolio/new-portfolio/new-cta-800w.webp";
-
 export default {
   data() {
     return {
-      CTAImage: [cta400, cta800],
+      CTAImage: [
+        "/images/portfolio/new-portfolio/new-cta-400w.webp",
+        "/images/portfolio/new-portfolio/new-cta-800w.webp",
+      ],
       reasons: [
         "High-performing mobile apps",
         "Bulletproof cloud solutions",

nuxt-frontend/components/CTA/CTA5.vue

@@ -54,15 +54,11 @@
   </section>
 </template>
 <script>
-import cta800 from "../../assets/images/CTA/fifth-cta-800w.webp";
-import ctaImage400w from "@/assets/images/mobile-app-development/cta-2/cta-image-400w.webp";
-import ctaImage800w from "@/assets/images/mobile-app-development/cta-2/cta-image-800w.webp";
-
 export default {
   data() {
     return {
-      ctaImage400w,
-      ctaImage800w,
+      ctaImage400w: "/images/mobile-app-development/cta-2/cta-image-400w.webp",
+      ctaImage800w: "/images/mobile-app-development/cta-2/cta-image-800w.webp",
     };
   },
 };

nuxt-frontend/components/home-new/BlogSection.vue

@@ -167,6 +167,7 @@
         :src="bg"
         :srcset="`${bg} 400w, ${bg400} 800w, ${bg2400} 1200w`"
         alt="blog-background-image"
+        loading="lazy"
       />
     </div>
   </section>

nuxt-frontend/components/home-new/ClientReviewSection.vue

@@ -7,6 +7,7 @@
         :loop="true"
         :spaceBetween="20"
         :pagination="pagination"
+        :autoplay="true"
         :modules="modules"
         @swiper="onSwiper"
         class="swiper-container"
@@ -36,7 +37,6 @@
                   <span class="sm:justify-between sub-h4-regular">
                     REVIEWED ON
                   </span>
-
                   <img
                     :src="reviewImage"
                     class="mr-2 w-[5.0625rem] h-[1.4375rem]"
@@ -83,11 +83,11 @@
                     <span class="sm:justify-between mr-2 sub-h4-medium">
                       REVIEWED ON
                     </span>
-
                     <img
                       :src="reviewImage"
                       class="mr-2 w-[5.3125rem] h-[1.5rem]"
                       alt="reviewClutchImage"
+                      loading="lazy"
                     />
                   </div>
                   <div class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end">
@@ -112,17 +112,16 @@
 </template>
 
 <script>
-import { Autoplay, Pagination } from "swiper/modules";
+import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import reviewImage from "@/assets/images/clients/v3-client/ReviewImage.webp";
 import Config from "@/config.js";
 export default {
   data() {
     return {
       swiper: null,
       reading: false,
-      modules: [Pagination, Autoplay],
-      reviewImage: reviewImage,
+      modules: [Autoplay],
+      reviewImage: '/images/clients/v3-client/ReviewImage.webp',
       clutchLink: Config.CLUTCH_URL,
       clients: [
         {

nuxt-frontend/components/home-new/ContributionSection.vue

@@ -38,16 +38,17 @@
           v-if="contribution.tags.length > 0"
           class="my-6 overflow-hidden overflow-x-scroll scrollbar-hidden"
         >
-          <div class="w-full min-w-[1000px]">
+          <div class="w-full min-w-[1000px] lg:min-w-full flex-wrap flex gap-2">
             <div
-              class="mt-1 inline-flex pr-1"
+              class="mt-1 inline-flex"
               v-for="(tag, index) in contribution.tags"
               :key="index"
             >
-              <div
+              <p
                 class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
-                v-html="tag"
-              ></div>
+              >
+                {{ tag }}
+              </p>
             </div>
           </div>
         </div>
@@ -74,7 +75,7 @@
           <div class="flex items-center gap-2">
             <span
               class="h-4 w-4 rounded-full"
-              :class="contribution.color"
+              :style="{ backgroundColor: contribution.color }"
             ></span
             ><span
               class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
@@ -87,198 +88,14 @@
   </section>
 </template>
 <script type="module">
-import config from "@/config.js";
+import contributionsJson from "@/json-data/contribution";
 
 export default {
   data() {
     return {
       width: 0,
       websiteOpenSourceUrl: "https://github.com/canopas/canopas-website",
-      contributions: [
-        {
-          title: "compose-intro-showcase",
-          description:
-            "Highlight different features of the app using Jetpack Compose",
-          tags: [
-            `android`,
-            `kotlin`,
-            `material-design`,
-            `kotlin-library`,
-            `showcase`,
-            `android-library`,
-            `android-development`,
-            `jetpack`,
-            `intro`,
-            `feature`,
-            `jetpack-android`,
-            `app-intro`,
-            `jetpack-compose`,
-            `jetpack-compose-tutorial`,
-          ],
-          link: "https://github.com/canopas/compose-intro-showcase",
-          stars: config.INTRO_SHOWCASE_STARS,
-          forks: "32",
-          color: "bg-royal-purple",
-          language: "Kotlin",
-        },
-        {
-          title: "UIPilot",
-          description: "The missing typesafe SwiftUI navigation library",
-          tags: [
-            `macos`,
-            `swift`,
-            `ios`,
-            `router`,
-            `xcode`,
-            `navigation`,
-            `routing`,
-            `ios-ui`,
-            `navigation-view`,
-            `swiftui`,
-            `swift5`,
-          ],
-          link: "https://github.com/canopas/UIPilot",
-          stars: config.UIPILOT_STARS,
-          forks: "25",
-          color: "bg-flamingo",
-          language: "Swift",
-        },
-        {
-          title: "Jetpack Compose animations",
-          description: "Cool animations implemented with Jetpack compose",
-          tags: [],
-          link: "https://github.com/canopas/compose-animations-examples",
-          stars: config.JETPACK_COMPOSE_ANIMATION_STARS,
-          forks: "34",
-          color: "bg-royal-purple",
-          language: "Kotlin",
-        },
-        {
-          title: "Swiftui-animations-examples",
-          description: "Cool animations implemented with SwiftUI.",
-          tags: [],
-          link: "https://github.com/canopas/swiftui-animations-examples",
-          stars: config.SWIFT_UI_ANIMATION_STARS,
-          forks: "3",
-          color: "bg-flamingo",
-          language: "Swift",
-        },
-        {
-          title: "Tailwind Animations Examples",
-          description: "Cool animations implemented with tailwindcss.",
-          tags: [
-            `css`,
-            `vuejs`,
-            `animations`,
-            `animation-css`,
-            `tailwind`,
-            `tailwindcss`,
-            `tailwind-elements`,
-            `tailwind-animations`,
-            `animation-example`,
-            `tailwindcss-animate`,
-            `tailwind-animations-examples`,
-            `animation-examples`,
-          ],
-          link: "https://github.com/canopas/tailwind-animations-examples",
-          stars: config.TAILWIND_ANIMATIONS_STARS,
-          forks: "6",
-          color: "bg-soft-yellow",
-          language: "JavaScript",
-        },
-        {
-          title: "ComposeRecyclerView",
-          description:
-            "Seamlessly integrate Jetpack Compose composables in RecyclerView with ComposeRecyclerView🔥. This library enhances performance⚡, tackles LazyList issues🔨, and offers built-in drag-and-drop👨🏽‍💻 support for dynamic UIs.",
-          tags: [
-            `kotlin`,
-            `android`,
-            `drag-and-drop`,
-            `recyclerview`,
-            `kotlin-library`,
-            `android-library`,
-            `recyclerview-adapter`,
-            `draggable`,
-            `composer-library`,
-            `lazylist`,
-            `jetpack-compose`,
-            `jetpack-compose-tutorial`,
-            `compose-ui`,
-          ],
-          link: "https://github.com/canopas/compose-recyclerview",
-          stars: config.COMPOSE_RECYCLEVIEW_STARS,
-          forks: "7",
-          color: "bg-royal-purple",
-          language: "Kotlin",
-        },
-        {
-          title: "Canopas - Blog",
-          description:
-            "Feature-Rich blogs platform built with strapi and next.js",
-          tags: [
-            `website`,
-            `development`,
-            `web-development`,
-            `web`,
-            `responsive`,
-            `reactjs`,
-            `nextjs`,
-          ],
-          link: "https://github.com/canopas/canopas-blog",
-          stars: config.CANOPAS_BLOG_WEBSITE_STARS,
-          forks: "7",
-          color: "bg-soft-yellow",
-          language: "JavaScript",
-        },
-        {
-          title: "Canopas - website",
-          description:
-            "Responsive website built with Vue.js and vite by following best practices.",
-          tags: [
-            `golang`,
-            `aws`,
-            `website`,
-            `boilerplate`,
-            `development`,
-            `vuejs`,
-            `web-development`,
-          ],
-          link: "https://github.com/canopas/canopas-website",
-          stars: config.CANOPAS_WEBSITE_STARS,
-          forks: "4",
-          color: "bg-sea-green",
-          language: "Vue",
-        },
-        {
-          title: "RichEditorSwiftUI",
-          description:
-            "RichEditorSwiftUI is swift based library, it is made to make rich text editing easy with SwiftUI.",
-          tags: [
-            `editor`,
-            `swift`,
-            `string`,
-            `uikit`,
-            `rich-text-editor`,
-            `richtext`,
-            `swiftui`,
-          ],
-          link: "https://github.com/canopas/rich-editor-swiftui",
-          stars: config.RICHEDITOR_SWIFTUI_STARS,
-          forks: "1",
-          color: "bg-flamingo",
-          language: "Swift",
-        },
-        {
-          title: "RichEditor",
-          description: "Android WYSIWYG Rich editor for Jetpack compose.",
-          tags: [],
-          link: "https://github.com/canopas/rich-editor-compose",
-          stars: config.RICHEDITOR_STARS,
-          forks: "0",
-          color: "bg-royal-purple",
-          language: "Kotlin",
-        },
-      ],
+      contributions: contributionsJson,
     };
   },
   mounted() {