patx/afterdarklabs
simplify the our work section
Commit 4891190 · patx · 2026-07-08T00:40:39-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 1056c2b..40e1837 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -230,39 +230,35 @@
</div>
<div class="grid gap-5 md:grid-cols-2">
<article class="overflow-hidden rounded-3xl bg-zinc-950">
- <button type="button" class="block w-full cursor-zoom-in 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]" data-work-preview>
+ <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">
- </button>
+ </a>
<div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">Website • Real estate</p>
- <p class="mt-4 text-sm leading-6 text-gray-300">"The demo captured my brand quickly, and the final site made it easier for clients to find me and reach out to purchase their dream home." - <a href="https://miadruck.com" target="_blank" rel="noopener noreferrer" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Mia Druck</a></p>
+ <p class="text-sm font-medium text-[#ccff00]">Mia Druck • Website • Real estate</p>
</div>
</article>
<article class="overflow-hidden rounded-3xl bg-zinc-950">
- <button type="button" class="block w-full cursor-zoom-in 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]" data-work-preview>
+ <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">
- </button>
+ </a>
<div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">Business Website • SEO</p>
- <p class="mt-4 text-sm leading-6 text-gray-300">"The new site gave our team a cleaner way to show products, answer customer questions, and bring in wholesale inquiries. And our mobile app After Dark Labs made for us lets us compete with the big guys by allowing our clients to place orders right from their phone." - <a href="https://gardenfreshwholesale.com" target="_blank" rel="noopener noreferrer" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Garden Fresh Wholesale</a></p>
+ <p class="text-sm font-medium text-[#ccff00]">Garden Fresh Wholesale • Business Website • SEO</p>
</div>
</article>
<article class="overflow-hidden rounded-3xl bg-zinc-950">
- <button type="button" class="block w-full cursor-zoom-in 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]" data-work-preview>
+ <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">
- </button>
+ </a>
<div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">Shopify • E-Commerce</p>
- <p class="mt-4 text-sm leading-6 text-gray-300">"Our Shopify store is cleaner, faster, and easier to shop. The product pages finally match my brand. We have seen sales increase 80 percent!" - <a href="https://coralvibefl.com" target="_blank" rel="noopener noreferrer" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Coral Vibe</a></p>
+ <p class="text-sm font-medium text-[#ccff00]">Coral Vibe • Shopify • E-Commerce</p>
</div>
</article>
<article class="overflow-hidden rounded-3xl bg-zinc-950">
- <button type="button" class="block w-full cursor-zoom-in 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]" data-work-preview>
+ <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">
- </button>
+ </a>
<div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">SaaS • Subscriptions</p>
- <p class="mt-4 text-sm leading-6 text-gray-300">"Working with After Dark Labs was a great experience. They helped turn my idea into a real, working invoicing app with a clean design, smooth user experience, payments, quotes, expenses, and mobile-friendly features. They understood what the business needed and built practical solutions that work in the real world. Highly recommend." - <a href="https://invoiceotter.com" target="_blank" rel="noopener noreferrer" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Invoice Otter</a></p>
+ <p class="text-sm font-medium text-[#ccff00]">Invoice Otter • SaaS • Subscriptions</p>
</div>
</article>
</div>
@@ -406,11 +402,6 @@
</div>
</footer>
- <div id="work-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/85 px-4 py-8 backdrop-blur-sm" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Work screenshot preview">
- <button type="button" id="work-modal-close" class="absolute right-5 top-5 h-12 w-12 text-4xl leading-none text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Close screenshot preview">×</button>
- <img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
- </div>
-
<script>
(function () {
const toggle = document.getElementById('mobile-nav-toggle');
@@ -714,49 +705,6 @@
setStep(0, false);
})();
- (function () {
- const modal = document.getElementById('work-modal');
- const modalImage = document.getElementById('work-modal-image');
- const closeButton = document.getElementById('work-modal-close');
- const previewButtons = document.querySelectorAll('[data-work-preview]');
- let lastFocused = null;
-
- if (!modal || !modalImage || !closeButton || !previewButtons.length) return;
-
- function openPreview(button) {
- const image = button.querySelector('img');
- lastFocused = document.activeElement;
- modalImage.src = image.currentSrc || image.src;
- modalImage.alt = image.alt;
- modal.classList.remove('hidden');
- modal.classList.add('flex');
- modal.setAttribute('aria-hidden', 'false');
- document.body.classList.add('overflow-hidden');
- closeButton.focus({ preventScroll: true });
- }
-
- function closePreview() {
- modal.classList.add('hidden');
- modal.classList.remove('flex');
- modal.setAttribute('aria-hidden', 'true');
- modalImage.removeAttribute('src');
- document.body.classList.remove('overflow-hidden');
- if (lastFocused) lastFocused.focus({ preventScroll: true });
- }
-
- previewButtons.forEach(button => {
- button.addEventListener('click', () => openPreview(button));
- });
-
- closeButton.addEventListener('click', closePreview);
- modal.addEventListener('click', event => {
- if (event.target === modal) closePreview();
- });
- window.addEventListener('keydown', event => {
- if (event.key === 'Escape' && !modal.classList.contains('hidden')) closePreview();
- });
- })();
-
/* ─── HERO CANVAS ANIMATION ──────────────────────────────── */
(function () {
const canvas = document.getElementById('hero-canvas');