patx/afterdarklabs

convert portfolio images to webp

Commit dc5b159 · patx · 2026-07-11T20:57:54-04:00

Changeset
dc5b159c55aaf885aa2e6cde47cb8dd80ac35e69
Parents
87aa85302e4b2898727ee9080b51ad05baafb8ef

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/docs/afterdarklabs-redesigned.html b/docs/afterdarklabs-redesigned.html
index c55675c..072c097 100644
--- a/docs/afterdarklabs-redesigned.html
+++ b/docs/afterdarklabs-redesigned.html
@@ -168,7 +168,7 @@
                 
                 <div class="grid md:grid-cols-2 gap-6">
                     <a href="https://miadruck.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
-                        <img src="https://afterdarklabs.io/miadruck.png?v=1" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Mia Druck Real Estate">
+                        <img src="https://afterdarklabs.io/miadruck.webp" width="1200" height="681" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Mia Druck Real Estate">
                         <div class="p-6">
                             <p class="font-medium">Mia Druck • Real Estate</p>
                             <p class="text-sm text-gray-400">Modern lead-generation website</p>
@@ -176,7 +176,7 @@
                     </a>
                     
                     <a href="https://gardenfreshwholesale.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
-                        <img src="https://afterdarklabs.io/gardenfresh.png?v=1" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Garden Fresh Wholesale">
+                        <img src="https://afterdarklabs.io/gardenfresh.webp" width="1200" height="687" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Garden Fresh Wholesale">
                         <div class="p-6">
                             <p class="font-medium">Garden Fresh • Wholesale Produce</p>
                             <p class="text-sm text-gray-400">E-commerce platform + SEO</p>
@@ -184,7 +184,7 @@
                     </a>
                     
                     <a href="https://coralvibefl.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
-                        <img src="https://afterdarklabs.io/coralvibe.png?v=3" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Coral Vibe">
+                        <img src="https://afterdarklabs.io/coralvibe.webp" width="1200" height="678" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Coral Vibe">
                         <div class="p-6">
                             <p class="font-medium">Coral Vibe • Shopify Store</p>
                             <p class="text-sm text-gray-400">E-commerce with local flavor</p>
@@ -192,7 +192,7 @@
                     </a>
                     
                     <a href="https://invoiceotter.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
-                        <img src="https://afterdarklabs.io/invoiceotter.png?v=3" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Invoice Otter">
+                        <img src="https://afterdarklabs.io/invoiceotter.webp" width="1200" height="673" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Invoice Otter">
                         <div class="p-6">
                             <p class="font-medium">Invoice Otter • SaaS</p>
                             <p class="text-sm text-gray-400">Subscription billing platform</p>
diff --git a/docs/coralvibe.webp b/docs/coralvibe.webp
new file mode 100644
index 0000000..40dc8c6
Binary files /dev/null and b/docs/coralvibe.webp differ
diff --git a/docs/gardenfresh.webp b/docs/gardenfresh.webp
new file mode 100644
index 0000000..58c58d8
Binary files /dev/null and b/docs/gardenfresh.webp differ
diff --git a/docs/index.html b/docs/index.html
index a83c366..df61c47 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -296,7 +296,7 @@
                 <div class="grid gap-5 md:grid-cols-2">
                     <article class="overflow-hidden rounded-3xl bg-zinc-950">
                         <a href="https://miadruck.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Mia Druck website">
-                            <img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
+                            <img src="https://afterdarklabs.io/miadruck.webp" width="1200" height="681" loading="lazy" decoding="async" class="h-48 w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
                         </a>
                         <div class="p-6">
                             <p class="text-sm font-medium text-[#ccff00]">Mia Druck • Website • Real estate</p>
@@ -304,7 +304,7 @@
                     </article>
                     <article class="overflow-hidden rounded-3xl bg-zinc-950">
                         <a href="https://gardenfreshwholesale.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Garden Fresh Wholesale website">
-                            <img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+                            <img src="https://afterdarklabs.io/gardenfresh.webp" width="1200" height="687" loading="lazy" decoding="async" class="h-48 w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
                         </a>
                         <div class="p-6">
                             <p class="text-sm font-medium text-[#ccff00]">Garden Fresh Wholesale • Business Website • SEO</p>
@@ -312,7 +312,7 @@
                     </article>
                     <article class="overflow-hidden rounded-3xl bg-zinc-950">
                         <a href="https://coralvibefl.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Coral Vibe website">
-                            <img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
+                            <img src="https://afterdarklabs.io/coralvibe.webp" width="1200" height="678" loading="lazy" decoding="async" class="h-48 w-full object-cover" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
                         </a>
                         <div class="p-6">
                             <p class="text-sm font-medium text-[#ccff00]">Coral Vibe • Shopify • E-Commerce</p>
@@ -320,7 +320,7 @@
                     </article>
                     <article class="overflow-hidden rounded-3xl bg-zinc-950">
                         <a href="https://invoiceotter.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Invoice Otter website">
-                            <img src="https://afterdarklabs.io/invoiceotter.png?v=3" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Invoice Otter SaaS project by After Dark Labs">
+                            <img src="https://afterdarklabs.io/invoiceotter.webp" width="1200" height="673" loading="lazy" decoding="async" class="h-48 w-full object-cover" alt="Invoice Otter SaaS project by After Dark Labs">
                         </a>
                         <div class="p-6">
                             <p class="text-sm font-medium text-[#ccff00]">Invoice Otter • SaaS • Subscriptions</p>
diff --git a/docs/index_old.html b/docs/index_old.html
index e94cf4f..a10a5d1 100644
--- a/docs/index_old.html
+++ b/docs/index_old.html
@@ -326,7 +326,7 @@
             <div class="grid md:grid-cols-3 gap-8">
                 <div class="group rounded-3xl overflow-hidden border border-white/10">
                     <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
-                        <img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
+                        <img src="https://afterdarklabs.io/miadruck.webp" width="1200" height="681" loading="lazy" decoding="async" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
                     </button>
                     <div class="p-6">
                         <div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
@@ -335,7 +335,7 @@
                 </div>
                 <div class="group rounded-3xl overflow-hidden border border-white/10">
                     <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
-                        <img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+                        <img src="https://afterdarklabs.io/gardenfresh.webp" width="1200" height="687" loading="lazy" decoding="async" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
                     </button>
                     <div class="p-6">
                         <div class="text-[#ccff00] text-sm font-medium">Business Website • SEO</div>
@@ -344,7 +344,7 @@
                 </div>
                 <div class="group rounded-3xl overflow-hidden border border-white/10">
                     <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
-                        <img src="https://afterdarklabs.io/invoiceotter.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
+                        <img src="https://afterdarklabs.io/invoiceotter.webp" width="1200" height="673" loading="lazy" decoding="async" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
                     </button>
                     <div class="p-6">
                         <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
@@ -362,7 +362,7 @@
                 </div>
                 <div class="group rounded-3xl overflow-hidden border border-white/10">
                     <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
-                        <img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
+                        <img src="https://afterdarklabs.io/coralvibe.webp" width="1200" height="678" loading="lazy" decoding="async" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
                     </button>
                     <div class="p-6">
                         <div class="text-[#ccff00] text-sm font-medium">Shopify • E-Commerce</div>
diff --git a/docs/invoiceotter.webp b/docs/invoiceotter.webp
new file mode 100644
index 0000000..374b2af
Binary files /dev/null and b/docs/invoiceotter.webp differ
diff --git a/docs/miadruck.webp b/docs/miadruck.webp
new file mode 100644
index 0000000..8ed7408
Binary files /dev/null and b/docs/miadruck.webp differ