patx/afterdarklabs

update portfolio to fix desktop scrolling issues

Commit 337cbb6 · patx · 2026-07-16T18:15:13-04:00

Changeset
337cbb65893561b0d6cd2be843df781d4e994fee
Parents
76f0e454bb2273ea3de1dba261d1db5b925b3c42

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/docs/index.html b/docs/index.html
index 76f6db7..f27c8ee 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -27,7 +27,7 @@
     <meta name="twitter:description" content="Florida website design and development for custom websites, Shopify stores, apps, SEO, hosting, and integrations.">
     <meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png?v=2">
     <meta name="twitter:image:alt" content="After Dark Labs Florida website design and development">
-    <link rel="stylesheet" href="https://afterdarklabs.io/index.tailwind.css?v=3">
+    <link rel="stylesheet" href="https://afterdarklabs.io/index.tailwind.css?v=4">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@500;600;700;800&display=swap');
 
@@ -174,6 +174,21 @@
             font-weight: 600;
         }
 
+        @media (min-width: 768px) {
+            .work-scroll-controls {
+                display: flex;
+            }
+
+            #work-scroller {
+                padding-inline: max(1.5rem, calc((100% - 64rem) / 2 + 1.5rem));
+                scroll-padding-inline: max(1.5rem, calc((100% - 64rem) / 2 + 1.5rem));
+            }
+
+            #work-scroller > article {
+                width: 38rem;
+            }
+        }
+
     </style>
     <script type="application/ld+json">
     {
@@ -295,7 +310,7 @@
             <div class="py-20 md:py-24">
                 <div class="mx-auto mb-10 flex max-w-5xl items-end justify-between gap-6 px-6">
                     <h2 class="heading text-4xl font-semibold tracking-tighter md:text-6xl">Recent projects</h2>
-                    <div class="hidden shrink-0 gap-3 md:flex">
+                    <div class="work-scroll-controls hidden shrink-0 gap-3 md:flex">
                         <button type="button" data-work-scroll="-1" class="flex h-11 w-11 items-center justify-center rounded-full border border-white/15 text-gray-300 transition-colors hover:border-[#ccff00] hover:text-[#ccff00] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Scroll projects left">
                             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M10 3 5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                         </button>
@@ -304,7 +319,7 @@
                         </button>
                     </div>
                 </div>
-                <div id="work-scroller" class="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-6 pb-2 scroll-px-6 md:px-[max(1.5rem,calc((100vw-64rem)/2))] md:scroll-px-[max(1.5rem,calc((100vw-64rem)/2))]">
+                <div id="work-scroller" class="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-6 pb-2 scroll-px-6">
                     <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
                         <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.webp?v=2" width="1200" height="681" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
@@ -337,6 +352,14 @@
                             <p class="text-sm font-medium text-[#ccff00]">Invoice Otter • SaaS • Subscriptions</p>
                         </div>
                     </article>
+                    <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+                        <div class="w-full overflow-hidden rounded-t-3xl">
+                            <img src="https://afterdarklabs.io/vegy.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Vegy wholesale ordering platform project by After Dark Labs">
+                        </div>
+                        <div class="p-6">
+                            <p class="text-sm font-medium text-[#ccff00]">Vegy • SaaS • Wholesale ordering</p>
+                        </div>
+                    </article>
                 </div>
             </div>
         </section>
diff --git a/docs/vegy.png b/docs/vegy.png
index 2d0034f..8b956e9 100644
Binary files a/docs/vegy.png and b/docs/vegy.png differ
diff --git a/docs/vegy.webp b/docs/vegy.webp
new file mode 100644
index 0000000..3994dfd
Binary files /dev/null and b/docs/vegy.webp differ