From 28e2f5d072ac3228afef78c3c9d22dfaef2bf127 Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 11:06:06 +0200 Subject: [PATCH 01/10] feat: Setup image optimization config --- apps/website/astro.config.mjs | 30 ++++++++++-------- apps/website/src/components/hero.astro | 42 ++++++++++++++------------ 2 files changed, 39 insertions(+), 33 deletions(-) diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs index 1b61cc60..163290b7 100644 --- a/apps/website/astro.config.mjs +++ b/apps/website/astro.config.mjs @@ -1,31 +1,35 @@ -import { defineConfig } from 'astro/config'; -import react from '@astrojs/react'; -import vercel from '@astrojs/vercel' -import createRemarkPlugin from '@crocoder-dev/remark-plugin'; +import { defineConfig } from "astro/config"; +import react from "@astrojs/react"; +import vercel from "@astrojs/vercel"; +import createRemarkPlugin from "@crocoder-dev/remark-plugin"; import tailwindcss from "@tailwindcss/vite"; const classes = { - titleClass: 'font-bold text-[1.25rem] mt-[2.5rem]', - summaryClass: 'cursor-pointer font-bold text-[1.25rem]', - detailsClass: 'mt-[2.5rem]', - iframeClass: 'border-none w-full h-[360px] overflow-y-hidden' -} + titleClass: "font-bold text-[1.25rem] mt-[2.5rem]", + summaryClass: "cursor-pointer font-bold text-[1.25rem]", + detailsClass: "mt-[2.5rem]", + iframeClass: "border-none w-full h-[360px] overflow-y-hidden", +}; const remarkPlugin = createRemarkPlugin(classes); export default defineConfig({ prefetch: true, - output: 'server', + output: "server", adapter: vercel({ imageService: true, + imagesConfig: { + sizes: [320, 480, 640, 800, 1196], + formats: ["image/avif", "image/webp"], + }, + devImageService: "sharp", }), redirects: { - '/feed': '/rss.xml', - '/sitemap': '/sitemap.xml' + "/feed": "/rss.xml", + "/sitemap": "/sitemap.xml", }, integrations: [tailwindcss(), react()], markdown: { remarkPlugins: [remarkPlugin], }, }); - diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro index 3c2fb896..33e79901 100644 --- a/apps/website/src/components/hero.astro +++ b/apps/website/src/components/hero.astro @@ -4,6 +4,7 @@ import Pill from "./Pill.astro"; import Section from "./Section.astro"; import { Image } from "astro:assets"; import heroImage from "../assets/croco-13.png"; +import { Picture } from "astro:assets"; ---
@@ -13,34 +14,34 @@ import heroImage from "../assets/croco-13.png";
- CroCoder team collaborating on web development projects
More than just developers @@ -65,7 +66,8 @@ import heroImage from "../assets/croco-13.png"; class="fadeInUp" style="animation-delay: 900ms;animation-fill-mode: backwards;" > - A web development consultancy delivering scalable solutions that drive real business impact. + A web development consultancy delivering scalable solutions that drive + real business impact.
From 689da6dd8fee34a27e0847df6614fc943867c673 Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 11:30:13 +0200 Subject: [PATCH 02/10] fix: image sizes --- apps/website/src/components/hero.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro index 33e79901..039495f2 100644 --- a/apps/website/src/components/hero.astro +++ b/apps/website/src/components/hero.astro @@ -18,7 +18,7 @@ import { Picture } from "astro:assets"; src={heroImage} alt="CroCoder team collaborating on web development projects" widths={[320, 480, 640, 800, 1196]} - sizes="(max-width: 480px) 320px, (max-width: 800px) 480px, (max-width: 1196px) 640px, 1196px" + sizes="(max-width: 320px) 320px, (max-width: 480px) 480px, (max-width: 640px) 640px, 1196px" loading="eager" fetchpriority="high" /> From f4971e33118c82adfbd800371add1c944580b860 Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 12:33:05 +0200 Subject: [PATCH 03/10] fix: sizes --- apps/website/src/components/hero.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro index 039495f2..fb38964e 100644 --- a/apps/website/src/components/hero.astro +++ b/apps/website/src/components/hero.astro @@ -17,8 +17,8 @@ import { Picture } from "astro:assets"; From 46201bfc153d20d0ac0a8c03c590c1ad4314fced Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 13:18:23 +0200 Subject: [PATCH 04/10] feat: Image optimizations for landing page --- apps/website/astro.config.mjs | 3 +-- apps/website/src/components/ServiceCard.astro | 4 ++-- apps/website/src/components/ValueCard.astro | 20 +++++++++++++------ apps/website/src/components/hero.astro | 2 +- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs index 163290b7..06fe6762 100644 --- a/apps/website/astro.config.mjs +++ b/apps/website/astro.config.mjs @@ -19,10 +19,9 @@ export default defineConfig({ adapter: vercel({ imageService: true, imagesConfig: { - sizes: [320, 480, 640, 800, 1196], + sizes: [320, 480, 578, 640, 800, 1196], formats: ["image/avif", "image/webp"], }, - devImageService: "sharp", }), redirects: { "/feed": "/rss.xml", diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro index f803c535..262f680f 100644 --- a/apps/website/src/components/ServiceCard.astro +++ b/apps/website/src/components/ServiceCard.astro @@ -94,11 +94,11 @@ const image = await src(); class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2" > {imgAlt}
diff --git a/apps/website/src/components/ValueCard.astro b/apps/website/src/components/ValueCard.astro index 33facf8d..4bcdfa4e 100644 --- a/apps/website/src/components/ValueCard.astro +++ b/apps/website/src/components/ValueCard.astro @@ -16,7 +16,6 @@ interface Props { const { title, content, img, styles, onDark, icon } = Astro.props; - const images = import.meta.glob("../assets/*.*"); const src = images[`../assets${img.path}`] as any as () => Promise<{ default: ImageMetadata; @@ -29,10 +28,19 @@ const image = await src(); class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`} >
- +
-

{title}

-
+

+ {title} +

+
@@ -40,8 +48,8 @@ const image = await src(); class="mt-auto max-w-[466px] w-full" src={image.default} alt={img.alt} - widths={[320, 466, 640, 800]} - sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), calc(33vw - 28px)" + widths={[320, 480, 640, 800]} + sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), 320px" loading="lazy" />
diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro index fb38964e..006c2be0 100644 --- a/apps/website/src/components/hero.astro +++ b/apps/website/src/components/hero.astro @@ -2,7 +2,6 @@ import { grid_classes } from "./_grid"; import Pill from "./Pill.astro"; import Section from "./Section.astro"; -import { Image } from "astro:assets"; import heroImage from "../assets/croco-13.png"; import { Picture } from "astro:assets"; --- @@ -19,6 +18,7 @@ import { Picture } from "astro:assets"; alt="CroCoder team collaborating on web development projects" widths={[320, 480, 640]} sizes="(max-width: 480px) 320px, (max-width: 480px) 768px, 640px" + quality={80} loading="eager" fetchpriority="high" /> From 746353300cacac398fad43ec3d596c5c3c17b07c Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 13:27:08 +0200 Subject: [PATCH 05/10] fix: Service card image styling issue --- apps/website/src/components/ServiceCard.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro index 262f680f..7e945583 100644 --- a/apps/website/src/components/ServiceCard.astro +++ b/apps/website/src/components/ServiceCard.astro @@ -94,7 +94,7 @@ const image = await src(); class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2" > {imgAlt} Date: Fri, 29 Aug 2025 13:35:28 +0200 Subject: [PATCH 06/10] fix: add 1920 size to image config --- apps/website/astro.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs index 06fe6762..fa59cc7f 100644 --- a/apps/website/astro.config.mjs +++ b/apps/website/astro.config.mjs @@ -19,7 +19,7 @@ export default defineConfig({ adapter: vercel({ imageService: true, imagesConfig: { - sizes: [320, 480, 578, 640, 800, 1196], + sizes: [320, 480, 578, 640, 800, 1196, 1920], formats: ["image/avif", "image/webp"], }, }), From 6cf507540358f619f80b17199848a07197c63122 Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 13:52:06 +0200 Subject: [PATCH 07/10] fix: set width to logo images --- apps/website/src/components/Clients.astro | 25 ++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/apps/website/src/components/Clients.astro b/apps/website/src/components/Clients.astro index 0d6b48bb..d463f001 100644 --- a/apps/website/src/components/Clients.astro +++ b/apps/website/src/components/Clients.astro @@ -10,31 +10,46 @@ import Section from "./Section.astro";
- Conductor logo + Conductor logo Lynes logo Submix logo - SevDesk logo + SevDesk logo Misterspex logo
-
- Our tailored software services bridge the gap between the big-picture strategy +
+ Our tailored software services bridge the gap between the big-picture + strategy and day-to-day operations, turning ambitious goals into concrete, - actionable steps that drive results. + actionable steps that drive results.
From 96018052e12b7cfd681b3581afb1044091337d84 Mon Sep 17 00:00:00 2001 From: stefanskoricdev Date: Fri, 29 Aug 2025 14:12:22 +0200 Subject: [PATCH 08/10] feat: Optimize images on Contact us --- apps/website/astro.config.mjs | 2 +- apps/website/src/components/ContactUs.astro | 4 +- apps/website/src/pages/contact/success.astro | 123 ++++++++++--------- 3 files changed, 69 insertions(+), 60 deletions(-) diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs index fa59cc7f..fc4ed3ea 100644 --- a/apps/website/astro.config.mjs +++ b/apps/website/astro.config.mjs @@ -19,7 +19,7 @@ export default defineConfig({ adapter: vercel({ imageService: true, imagesConfig: { - sizes: [320, 480, 578, 640, 800, 1196, 1920], + sizes: [320, 480, 578, 640, 720, 800, 1196, 1920], formats: ["image/avif", "image/webp"], }, }), diff --git a/apps/website/src/components/ContactUs.astro b/apps/website/src/components/ContactUs.astro index 1db25755..c9d25bb4 100644 --- a/apps/website/src/components/ContactUs.astro +++ b/apps/website/src/components/ContactUs.astro @@ -28,8 +28,8 @@ import peopleCollaborating from "../assets/people-collaborating.png";