patx/afterdarklabs
flesh out about page
Commit 372d30e · patx · 2026-05-16T15:13:14-04:00
Comments
No comments yet.
Diff
diff --git a/docs/about.html b/docs/about.html
index 7b13358..18fafb0 100644
--- a/docs/about.html
+++ b/docs/about.html
@@ -3,11 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>About After Dark Labs | Custom Apps and Websites</title>
- <meta name="description" content="Learn about After Dark Labs, a Fort Lauderdale-based studio creating custom mobile apps, websites, and digital products for businesses across the U.S.">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
+ <title>About Harrison Erd and After Dark Labs | Custom Apps and Websites</title>
+ <meta name="description" content="After Dark Labs is run by Harrison Erd, a solo product builder with 15+ years of hands-on experience shipping custom apps, websites, and digital products for U.S. businesses.">
<link rel="canonical" href="/about.html">
- <meta property="og:title" content="About After Dark Labs | Custom Apps and Websites">
- <meta property="og:description" content="Placeholder company information for After Dark Labs, a custom app and website studio based in Fort Lauderdale, Florida.">
+ <meta property="og:title" content="About Harrison Erd and After Dark Labs | Custom Apps and Websites">
+ <meta property="og:description" content="Work directly with Harrison Erd, the solo operator behind After Dark Labs, for senior custom app, website, and digital product execution without agency overhead.">
<meta property="og:type" content="website">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
@@ -39,39 +40,60 @@
<section class="page-hero pt-36 pb-24">
<div class="max-w-5xl mx-auto px-6">
<p class="text-[#ccff00] font-semibold mb-5">About After Dark Labs</p>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">A digital product studio for businesses ready to move.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">Placeholder text: After Dark Labs partners with founders, local businesses, and growing teams to design and build custom mobile apps, websites, and digital systems.</p>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Senior product execution, without the agency handoff.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">After Dark Labs is run by Harrison Erd, a hands-on builder with 15+ years of experience designing, developing, launching, and improving custom websites, mobile apps, and digital products for businesses across the U.S.</p>
+ </div>
+ </section>
+
+ <section class="py-12 border-y border-white/10 bg-black">
+ <div class="max-w-5xl mx-auto px-6 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">15+</p>
+ <p class="text-gray-300 mt-2">years hands-on</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">20+</p>
+ <p class="text-gray-300 mt-2">products shipped</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">10M+</p>
+ <p class="text-gray-300 mt-2">downloads</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">U.S.</p>
+ <p class="text-gray-300 mt-2">businesses served</p>
+ </div>
</div>
</section>
<section class="py-24 bg-zinc-950">
<div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10">
<div>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">Who we are</h2>
- <p class="text-gray-300 leading-8">Placeholder text: We are a Fort Lauderdale-based studio focused on practical, polished digital work. Our projects combine strategy, design, development, launch support, and ongoing improvement for businesses across the U.S.</p>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">Who you work with</h2>
+ <p class="text-gray-300 leading-8">My name is Harrison Erd. I run After Dark Labs solo, which means every project gets direct access to the person doing the strategy, design decisions, development, launch planning, and follow-through. Outside of client work, I have built developer tools used well beyond my own projects, including <a href="https://github.com/patx/pickledb/" class="text-[#ccff00] hover:text-white transition-colors">pickleDB</a>, a Python data store with 2M+ downloads, and <a href="https://github.com/patx/micropie" class="text-[#ccff00] hover:text-white transition-colors">MicroPie</a>, a lightweight web framework recognized in the official ASGI documentation for modern Python web apps.</p>
</div>
<div>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">How we work</h2>
- <p class="text-gray-300 leading-8">Placeholder text: We start by understanding the business goal, then map the user experience, build the core product, and refine the details that make the final result feel fast, trustworthy, and useful.</p>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">How projects run</h2>
+ <p class="text-gray-300 leading-8">There are no account managers, handoffs, or layers of agency overhead. We start with the business goal, define the clearest path to a useful product, then move through focused execution so the final website, app, or system feels polished, reliable, and ready for real customers.</p>
</div>
</div>
</section>
<section class="py-24 bg-black">
<div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-8">What we value</h2>
+ <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-8">What that changes</h2>
<div class="grid md:grid-cols-3 gap-6 text-gray-300">
<div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white mb-3">Clear strategy</h3>
- <p>Placeholder text for positioning, project planning, and business-focused decision making.</p>
+ <h3 class="font-semibold text-white mb-3">Senior attention from day one</h3>
+ <p>You are not briefed through a sales layer and passed down a chain. The person scoping the work is the person building it.</p>
</div>
<div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white mb-3">Strong execution</h3>
- <p>Placeholder text for design, development, testing, launch, and support practices.</p>
+ <h3 class="font-semibold text-white mb-3">Built for real business use</h3>
+ <p>After Dark Labs has shipped 20+ products for businesses around the country, from marketing sites to ecommerce, SaaS, booking flows, and mobile app experiences.</p>
</div>
<div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white mb-3">Long-term utility</h3>
- <p>Placeholder text for building products that remain useful as the business grows.</p>
+ <h3 class="font-semibold text-white mb-3">Lean by design</h3>
+ <p>No agency overhead means less drag, clearer communication, and more of the budget going into the work that actually moves the business forward.</p>
</div>
</div>
</div>
@@ -79,8 +101,8 @@
<section class="py-24 border-t border-white/10 bg-zinc-950">
<div class="max-w-3xl mx-auto text-center px-6">
- <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Tell us what you are building.</h2>
- <p class="text-gray-400 text-lg mb-8">After Dark Labs builds custom websites and mobile apps from Fort Lauderdale for businesses across the U.S.</p>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Work directly with Harrison on your next app or website.</h2>
+ <p class="text-gray-400 text-lg mb-8">Tell me what you are trying to build, fix, or launch. You will get a direct response and a practical path forward.</p>
<a href="index.html#contact" class="inline-flex items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Contact After Dark Labs <span>→</span></a>
</div>
</section>
diff --git a/docs/app-store-launch-support.html b/docs/app-store-launch-support.html
index beee97d..0f39a63 100644
--- a/docs/app-store-launch-support.html
+++ b/docs/app-store-launch-support.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>App Store Launch and Support for iOS and Android | After Dark Labs</title>
<meta name="description" content="App Store and Google Play launch support for custom mobile apps, including release preparation, store assets, submissions, updates, and post-launch improvements.">
<link rel="canonical" href="/app-store-launch-support.html">
diff --git a/docs/backend-api-integration.html b/docs/backend-api-integration.html
index c4e9140..1eb6ad7 100644
--- a/docs/backend-api-integration.html
+++ b/docs/backend-api-integration.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Backend and API Integration for Mobile Apps | After Dark Labs</title>
<meta name="description" content="Backend and API integration for mobile apps, including authentication, databases, payment systems, notifications, dashboards, and third-party services.">
<link rel="canonical" href="/backend-api-integration.html">
diff --git a/docs/brand-positioning-creative-strategy.html b/docs/brand-positioning-creative-strategy.html
index 5fc82b3..d878136 100644
--- a/docs/brand-positioning-creative-strategy.html
+++ b/docs/brand-positioning-creative-strategy.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Brand Positioning and Creative Strategy | After Dark Labs</title>
<meta name="description" content="Brand positioning and creative strategy for custom websites, including messaging, visual direction, campaign ideas, and conversion-focused content planning.">
<link rel="canonical" href="/brand-positioning-creative-strategy.html">
diff --git a/docs/custom-web-development-ecommerce.html b/docs/custom-web-development-ecommerce.html
index cc87bee..c70a0ab 100644
--- a/docs/custom-web-development-ecommerce.html
+++ b/docs/custom-web-development-ecommerce.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Custom Web Development and E-commerce Solutions | After Dark Labs</title>
<meta name="description" content="Custom web development and ecommerce solutions for businesses that need fast storefronts, polished service pages, product catalogs, checkout flows, and reliable digital tools.">
<link rel="canonical" href="/custom-web-development-ecommerce.html">
diff --git a/docs/index.html b/docs/index.html
index 3ccf025..39a8606 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>After Dark Labs | Custom Mobile Apps & Websites</title>
<meta name="description" content="After Dark Labs builds custom mobile apps and high-performance websites for businesses across America, with strategy, design, development, SEO, and launch support.">
<link rel="canonical" href="/index.html">
@@ -157,21 +158,27 @@
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group rounded-3xl overflow-hidden border border-white/10">
- <img src="miadruck.png" 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 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="miadruck.png" 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>
<h4 class="text-xl font-semibold mt-1">Mia Druck</h4>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
- <img src="gardenfresh.png" 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 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="gardenfresh.png" 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">Web App • E-commerce</div>
<h4 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h4>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
- <img src="invoiceotter.png" 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 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="invoiceotter.png" 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>
<h4 class="text-xl font-semibold mt-1">Invoice Otter</h4>
@@ -210,12 +217,58 @@
</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-11 w-11 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="">
+ </div>
+
<script>
function handleSubmit(e) {
e.preventDefault();
alert("Thank you! We'll get back to you within 24 hours. 🌑");
}
+ (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;
+
+ 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');
diff --git a/docs/influencer-marketing-social-media.html b/docs/influencer-marketing-social-media.html
index a89bbbf..37aa7a3 100644
--- a/docs/influencer-marketing-social-media.html
+++ b/docs/influencer-marketing-social-media.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Influencer Marketing for Mobile Apps | After Dark Labs</title>
<meta name="description" content="Influencer marketing and social media launch strategy for mobile apps, including creator outreach, content angles, campaign planning, and social proof.">
<link rel="canonical" href="/influencer-marketing-social-media.html">
diff --git a/docs/mobile-app-branding-ui-ux.html b/docs/mobile-app-branding-ui-ux.html
index d86997f..3d4105b 100644
--- a/docs/mobile-app-branding-ui-ux.html
+++ b/docs/mobile-app-branding-ui-ux.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Mobile App Branding, Logo Design, and UI/UX | After Dark Labs</title>
<meta name="description" content="Mobile app branding, logo design, and UI/UX design for custom iOS, Android, and cross-platform apps that need a polished launch-ready identity.">
<link rel="canonical" href="/mobile-app-branding-ui-ux.html">
diff --git a/docs/mobile-apps.html b/docs/mobile-apps.html
index 17c4a90..e7296cc 100644
--- a/docs/mobile-apps.html
+++ b/docs/mobile-apps.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Custom Mobile App Development | After Dark Labs</title>
<meta name="description" content="After Dark Labs designs, builds, launches, and supports custom iOS, Android, and cross-platform mobile apps for businesses across the U.S.">
<link rel="canonical" href="/mobile-apps.html">
diff --git a/docs/moon-stars-fill.svg b/docs/moon-stars-fill.svg
new file mode 100644
index 0000000..c50e070
--- /dev/null
+++ b/docs/moon-stars-fill.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-stars-fill" viewBox="0 0 16 16">
+ <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
+ <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
+</svg>
\ No newline at end of file
diff --git a/docs/online-bookings-appointments-memberships.html b/docs/online-bookings-appointments-memberships.html
index 6c01f69..7b59423 100644
--- a/docs/online-bookings-appointments-memberships.html
+++ b/docs/online-bookings-appointments-memberships.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>Online Booking, Appointment, and Membership Websites | After Dark Labs</title>
<meta name="description" content="Online booking, appointment scheduling, payment, and subscription membership website features for service businesses and growing teams.">
<link rel="canonical" href="/online-bookings-appointments-memberships.html">
diff --git a/docs/seo-performance-optimization.html b/docs/seo-performance-optimization.html
index 63cf30f..1694d6f 100644
--- a/docs/seo-performance-optimization.html
+++ b/docs/seo-performance-optimization.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>SEO Optimization and Website Performance | After Dark Labs</title>
<meta name="description" content="SEO optimization and lightning-fast website performance for custom websites, including page structure, metadata, responsive design, technical cleanup, and speed-focused builds.">
<link rel="canonical" href="/seo-performance-optimization.html">
diff --git a/docs/websites.html b/docs/websites.html
index 9c8406e..5c870f7 100644
--- a/docs/websites.html
+++ b/docs/websites.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<title>High-Performance Custom Websites | After Dark Labs</title>
<meta name="description" content="After Dark Labs builds high-performance custom websites, ecommerce stores, booking systems, memberships, and SEO-ready pages for businesses across the U.S.">
<link rel="canonical" href="/websites.html">