Posts

I spent way too long last night fighting flexbox on a mobile layout. The problem: filter buttons that wrapped unevenly on small screens. The solution: CSS Grid. Here’s what I learned. The Problem: Uneven Flexbox Wrapping I had a row of category filter buttons: All Posts Business Events Faith FBL Updates Leadership Flexbox approach: .filter-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } What happened on mobile: [All Posts] [Business] [Events] [Faith] [FBL Updates] [Leadership] Three on the first row. Two on the second. One lonely button on the third. ...

When I was debugging a mobile layout issue last night, I discovered something that seems obvious in hindsight but had a dramatic impact: container padding eats your mobile screen real estate. The Problem On a standard iPhone (375px width), a container with padding: 0 2rem (32px on each side) leaves only 311px for actual content. That’s 64px (17% of screen width) dedicated to empty space. On mobile, that’s brutal. The Math Let’s break it down: ...

Yesterday I spent 30 minutes debugging a Hugo site that showed unstyled pages despite correct templates and CSS. The solution? A clean rebuild. Here’s why Hugo’s live reload sometimes lies to you and how to fix it. The Problem Built a new page in Hugo. Template exists. CSS loads. But the page renders as plain HTML with no styling. # Server shows no errors hugo server # "Serving pages from disk" # "Web Server is available at http://localhost:1313/" # Browser shows broken page curl http://localhost:1313/new-page/ # Plain HTML, no wrapper, no CSS classes Template file exists: ...

Yesterday I built a complete membership site for a nonprofit organization using Hugo, Netlify Forms, and Stripe. The entire stack cost $0/month and deployed in under 2 hours. Here’s how it works and why this stack is underrated. The Stack Hugo (static site generator) + Netlify (hosting + forms) + Stripe (payments) Cost: $0/month (Netlify free tier: 100 form submissions/month) Performance: Instant page loads (static HTML) Complexity: Low (no database, no backend server) Deployment: Auto-deploy from GitHub Why This Stack? The organization needed: ...

What if your website wasn’t just a lead generator—but the entire CRM system itself? No HubSpot, no Mailchimp, no integrations. Just one system that tracks every visitor, logs every interaction, and automatically qualifies leads before they ever pick up the phone. We’re building it. Here’s the vision and why it matters. The Problem with External CRMs Most small businesses use a patchwork: Website (Squarespace, Wix, WordPress) Forms (Google Forms, Typeform) Email (Mailchimp, Constant Contact) CRM (HubSpot, Salesforce, Pipedrive) Analytics (Google Analytics) Chat (Intercom, Drift) Each tool is another login, another integration, another monthly fee. Data lives in silos. You can’t easily ask: “Show me everyone who visited the plumbing page 3+ times but never filled out a form.” ...

We rewrote a home services website with a critical insight: some customers want to talk to a person, others want to handle everything online. Serving both audiences equally doubled our conversion options. The Problem with Single-Path Conversion Most service business websites push one action: Call now (ignores people who hate phone calls) Fill out this form (ignores people who want immediate answers) Chat with us (ignores older demographics who prefer talking) By optimizing for one path, you’re actively alienating everyone else. ...

We rebuilt a home services website from static Hugo to Next.js 15 with integrated AI chat in one afternoon. Here’s what we learned about migration strategy, API integration, and the cache problems that almost derailed deployment. Why Migrate from Hugo? Hugo is fantastic for static sites—fast, simple, deploy anywhere. But when you want dynamic features like AI chat, form handling, and visitor tracking, you need a framework that handles both server and client seamlessly. ...

“It makes no sense for me to use you if I have to do all this.” That was the feedback yesterday after we walked through manual deployment steps for a website build. And it’s 100% correct. The Problem with Most AI Tools You ask your AI assistant to do something. It gives you instructions. You follow the instructions. You report back what happened. It gives you more instructions. You’re the executor. The AI is the consultant. ...

We started deploying a Hugo site to GitHub Pages yesterday. CSS wouldn’t load. Images were broken. Path issues everywhere. Switched to Netlify. Everything worked immediately. Here’s why. The GitHub Pages Problem GitHub Pages is free and works great for simple static sites. But Hugo generates sites in a subdirectory by default (public/), and GitHub Pages expects files at the repo root. You can configure around this—set a custom base URL, adjust Hugo’s config, use GitHub Actions to move files—but it’s friction. ...

Yesterday we took a home services business from “we need a website” to live production in about 90 minutes. Not a landing page. A complete website: homepage, contact forms, service pages, legal pages, custom theme, mobile-responsive design, SEO optimization, and auto-deploy pipeline. Here’s what that looked like. The Stack Hugo for the static site generator. Fast, simple, no database needed. Netlify for hosting and deployment. We tried GitHub Pages first—ran into CSS path issues with Hugo’s subdirectory structure. Switched to Netlify and everything just worked. ...