← All work

// Case Study

The Harlem Shooter: a videographer whose proof lived on Instagram gets a site that books

A Harlem-bred, Atlanta-based videographer with a decade in the culture and a portfolio that only existed as an Instagram feed. I built a four-page site that pulls his reels into a theater, prices his packages in the open, and turns a DM into a structured booking brief that lands in his inbox.

Client The Harlem Shooter
Industry Videography & Content Production
Location Atlanta, GA
13
reels curated from the feed
4
priced packages
3
steps to a booking brief
1
switch runs a site-wide promo

The feed is the proof. It is not the pitch.

A videographer's best marketing is the work itself, and for The Harlem Shooter the work was already out there. Hundreds of reels on Instagram, a decade of shooting artists, podcasts, events, and brands across Atlanta and Harlem. The problem was what happened after someone watched one. There was no page that said what a shoot costs, no place to send a brand manager who needed a quote in writing, and no way to book that did not start with a DM.

Instagram is a great place to be discovered. It is a bad place to close.

A design that feels like the work

A videography site should look like the videographer cut it. The design system is built from the language of film: a red-and-black palette, a title that slams in like a slot machine, a filmstrip you can drag, a blinking REC indicator, timecode details in the corners. The hero is a kinetic logo build over a short video loop, trimmed to three and a half seconds so the clip ends before anything a client would not want on screen.

I tried a Harlem touch along the way, an Apollo-style marquee with amber theater bulbs on the work page. It read as vaudeville, not hip-hop, so it went. Knowing what to take back out is most of design.

Let the feed stay the source

The portfolio does not fight Instagram. It curates it. Each reel in the CMS is an Instagram shortcode, a caption, a category, and a cover image. The work page turns that list into a draggable strip of 13 frames, a "Now Showing" panel for the newest piece, and a theater mode for watching full screen. Older pieces sit in an archive below. When he posts something new, he adds the shortcode and it appears on the next build.

Two things made this harder than it sounds. Instagram embeds silently failed on mobile, which took two separate fixes, and some posts cannot be embedded at all, so each reel got a real cover image and a direct link as a fallback. The site never shows a broken frame.

Put the prices on the page

The original packages were a long menu. We rebuilt them around the shoots he actually books: The Cut, The Set, and The Takeover for events, each with hours on set, number of reels, reel length, behind-the-scenes photo count, and turnaround. A fourth package, The Edit, covers clients who already have footage and want a 75 to 90 second cut.

Open pricing does two jobs. It lets a serious client self-qualify before they reach out, and it lets him stop having the same price conversation in the DMs.

A brief instead of a DM

The booking page is three steps. Pick a lane: events, music, podcast, or brand. Pick a tier. Then write the brief: name, email, date range, location, and what you want to make. The form posts to a serverless endpoint that formats the brief and emails it through Resend, with a hidden honeypot field to keep bots out. If the mail service is ever unconfigured the form falls back to a plain email link, so a lead is never dropped.

The page also states the terms up front. A written reply within 24 hours, a 30 percent deposit to hold the date, two to six weeks of lead time. The brief arrives with everything he needs to quote.

One switch for a promotion

Running a sale used to mean posting a story and hoping people saw it. Now a promo record in the CMS has a label, an amount off, a note, and an on-off switch. When it is on, every package card shows the original price struck through, the new price, and a banner across the top of every page. When summer ends he flips it off and the site goes back to list price.

Owned by the person on camera

Everything editable is in Keystatic, stored in GitHub, editable from the live site. Six collections cover reels, packages, services, process steps, ventures, and testimonials. Three settings singletons hold the Instagram handle, booking email, tagline, promo, and page copy. The two ventures he runs alongside the camera, Bars On The Bus and The KLM Podcast, get their own section that links out rather than competing with the booking flow.

How long it took

  • May 27, 2026. Empty repo.
  • May 29, 2026. Multi-page site live, rebranded from the working name to The Harlem Shooter, CMS wired, mobile fixes shipped.
  • June 7, 2026. Packages restructured into priced tiers, booking form moved to the Resend backend.
  • June 19, 2026. Promo system and sticky promo bar.

// Before and after

What changed

AreaBeforeAfter
Web presence BeforeAn Instagram handle and a Linktree. AfterHis own domain with four pages. Home, work, about, and book.
Portfolio BeforeScroll the grid and hope the right reel comes up first. After13 reels picked by hand, each with its own cover, in a draggable filmstrip with a theater mode and an archive.
Pricing BeforeQuoted one conversation at a time. AfterThree event tiers and an editing package, with hours, reel counts, photo counts, and turnaround listed on the page.
Booking BeforeA DM. AfterA three-step brief. Pick a lane, pick a tier, describe the shoot. It posts to a serverless endpoint and emails the inbox through Resend.
Promotions BeforeA story post that disappears in a day. AfterOne promo record in the CMS. Switch it on and every price shows the discount with a banner across the site.
Editing BeforeNothing to edit. AfterKeystatic. Reels, packages, services, process, ventures, testimonials, and settings are all editable without code.

// What shipped

  • ✓Four-page site on a cinema-inspired design system. Red, black, slot-machine title, filmstrip, timecode details.
  • ✓Hero with a kinetic logo build over a trimmed video loop
  • ✓Work page with 13 reels sourced from Instagram shortcodes, cover images, a draggable strip, theater mode, and an archive
  • ✓Three priced event tiers plus a content-editing package, each with deliverables spelled out
  • ✓Booking page with a three-step brief and a serverless Resend endpoint, honeypot included
  • ✓CMS-driven promo bar that discounts every package with one switch
  • ✓About page with the five-step process and the two ventures he runs alongside the camera
  • ✓Keystatic CMS with six collections and three settings singletons, GitHub storage, editable from the live site
  • ✓Mobile pass. Menu overlay, 44px tap targets, sticky book bar, reels that render on phones
  • ✓OG share image, sitemap, favicon, and the DNS move to theharlemshooter.com on Vercel

// Stack

AstroTailwind CSS 4ReactGSAPFramer MotionKeystatic CMSResendVercel

// Your turn

Want a site that books for you?

Service-business websites start at $499, live in days. Booking and client management when you need it.