Got Junk

The Problem

The business had a static HTML site with no real way to capture leads — no working contact form, no SEO structure, and no way to know if something broke. For a local service business, that means missed calls and quote requests that just silently disappear.

The Goal

Rebuild the site as a real, maintainable Next.js app with a contact form that actually delivers requests to the business owner, search-engine-friendly structure, and a way to know immediately if the form ever stops working — without the owner having to test it manually.

What I Created

• Rebuilt the site from static HTML/CSS/JS into a Next.js 16 app (App Router, TypeScript, Tailwind CSS v4)
• Built a dual-channel contact form backend (email via Resend, SMS via Twilio) with honest failure reporting instead of a false success message
• Diagnosed and fixed a production bug where the hero text was permanently clipped on narrower phones
• Added LocalBusiness + FAQPage schema.org markup, robots.txt, and a sitemap for search visibility
• Connected the site to the business's Google Business Profile (embedded map, reviews link) and social accounts
• Found and cleaned up a duplicate, misconfigured Vercel deployment that was silently eating build minutes
• Set up a daily automated health check (GitHub Actions) that submits a real test request and alerts on delivery failure

What I Built

Got Junk is a live, in-production site handling real customer requests today — not a concept or a mockup. These are actual screenshots of the deployed site.

Homepage / Hero

Rebuilt the hero section with a real conversion-focused layout — call and text CTAs, trust badges, and a headline that survived a full responsive audit down to 320px-wide phones.

Next.jsResponsive designConversion copy

Services Grid

A six-service grid with real job photos, replacing a flat list from the old static site with something that actually shows the work.

Component designContent structure

Contact + Live Google Map

The contact form posts to a real backend that emails and texts the business owner, plus an embedded, interactive Google Map pulled from the business's actual listing.

Backend integrationGoogle Business ProfileForm UX

Mobile Experience

Fixed a real production bug here: the hero text was getting permanently clipped on narrower phones because of a fixed aspect-ratio container — not just scrolled past, actually cut off. Replaced it with a content-driven min-height.

Bug diagnosisMobile-first debugging

Tools & Skills

What I Learned

Shipping is different from building. The form worked in every test I ran — but it still failed silently in production because of a sender-domain restriction I hadn't hit locally, and the site still showed a false success message when it did. That taught me to treat "does it work" and "does it tell the truth when it doesn't" as two separate requirements, and to build a way to find out about failures automatically instead of waiting for a customer to mention it.