Overseas Media Group

The Challenge

Overseas Media Group is the marketing studio built into Keys Weekly Media, the locally owned media network that has run Keys news and the tourist development council webcams since 2003. Their own site had drifted away from how they actually work: a service grid like every other agency template, a portfolio buried under category pages, and a webcam directory on a legacy /livecams/ path that nothing else on the site trusted.

The assignment was the one every studio dreads: build your own site. It had to show client work the way the team pitches it, carry Jordan Baylis’s new 2026 brand kit without turning into a brand-guideline screenshot, and keep the working parts of the old site (webcams, forms, decades of ranked URLs) intact through the move.

The Build

Static Astro 5 with Tailwind, deployed on Netlify, one React island where interaction actually earns its payload: the portfolio filter. Everything else runs on plain browser scripts, which is why a page carrying an animated hero still reports zero blocking time.

The brand came first. Jordan’s kit set the register: Fraunces headlines, Work Sans body, plum, sand, and coral. Those became shared design tokens, so a headline, a case-study eyebrow, and a CTA all pull from one place and the next update changes the whole site at once.

The portfolio does the convincing. Sixty-five project pages, filterable by industry, service, and town, with filter state persisted in URL parameters and browser history. The initial HTML contains every project, so the grid renders with JavaScript off and crawls complete. Detailed case studies sit beside shorter summaries, and results only appear where we have evidence to back them.

The webcam directory became real data. Twenty-six cameras from Key Largo to Key West, each with its own page, poster, and embed, plus town landing pages and a map. Counts are derived from the collection rather than typed into copy, so the meta description, the homepage “26 amazing live cams” pill, and the directory can never disagree. Cameras under construction get an amber status and no dead play button instead of vanishing, which keeps their pages ranking while the venue rebuilds.

Motion that respects the room. The homepage reel draws on OMG’s footage library and approved Robbie’s footage. A reduced-motion preference gets the quiet version: the WebGL hero falls back to a still, and the reel stops asking.

Nothing orphaned. Eighty-five redirect rules cover the legacy URL map, forms run through Netlify, and the whole build is checked before merge: about 170 to 180 pages generated, link check green across roughly six thousand internal references, and page-width sweeps at three viewports with zero overflow. The team wrote up the process honestly in their own blog: Behind the new OMG website.

The Result

The studio’s site now looks like the work it sells. PageSpeed pairs at 94 mobile and 100 desktop with zero total blocking time and a clean cumulative layout shift, SEO and accessibility both score 100, and the old host is gone with its URLs redirected. Adding a project, a camera, or a news post is a content commit now, not a developer ticket, which is the point: the site sits still so the studio can keep moving.