zsty.us

Before / After · Case Study

Fuel1st — a 12-year-old brochure page rebuilt into a real aviation services site

  • Aviation

Their site had been the same fifty-word brochure since 2014, with an outside agency in the loop for every change. One weekend later it's a full site: six clearly-listed services, real aviation photography, and an industry news feed that refreshes itself — with updates back in the owner's hands.

“A 12-year WordPress brochure rebuilt into an operating surface — in a single weekend.”
New build (live)↗Legacy (Wayback, 2025-07-11) → fuel1st.com↗Repo → fuel1st-site↗
🔒fuel1st-site.vercel.app
jackiej.events — modern site

At a glance

What this rebuild covers.

  • Design

    The old site was four links and a tagline; the rebuild gives each of the six services — fuel supply, trip support, logistics, flight planning, ground handling, sustainable aviation fuel — its own space, anchored by real capability stats like 1,800+ airports and 24/7 dispatch.

  • Theme & color

    A deep-purple brand gradient paired with self-hosted aviation photography — a head-on jet photo even became the site icon — so the site finally looks like an operator, not a leftover brochure.

  • Agents

    An industry news page gathers stories from four aviation publications on its own every day, sorts them into five categories, and quietly drops anything that mentions a direct competitor.

  • Speed

    A heavy embedded map was cut from the mobile page early so the first screen loads fast, and the three motion effects — card lift, tap press, fade-up on scroll — stay light and switch off for visitors who prefer reduced motion.

  • Search visibility

    Search visibility is fully wired — sitemap, share-preview images generated for every page, structured business info — but held behind a single switch until the launch checklist clears, so nothing half-finished gets indexed.

Receipts — measured

Numbers that moved.

0yrs
Years on the legacy WordPress build
was 0yrs
0
Services listed on the site
was 0
0 hrs
Sprint duration (rebuild to ship)
was 0 hrs
0
Aviation news sources aggregated
was 0
  • ~50 words → full multi-page site
  • 0 → 6 services listed
  • rebuilt in one 43-hour weekend
  • news feed refreshes itself daily

The pixel diff

Overview, then the walkthrough.

Left: everything the legacy site shipped — frozen in place. Right: an auto-scrolling tour of the rebuild, from hero to booking. No slider to fight with.

Before — the overview
🔒fuel1st.com
Before — the overview

This is everything the legacy site had to offer above the fold. No pricing, no calendar, no booking — the funnel ended at a mailto.

After — scroll through what shipped
🔒fuel1st-site.vercel.app
After — scroll through what shipped

Auto-scrolls through the modern site so you can see the booking surface, the package grid, the pricing table, and the calendar inline — without leaving this page.

The four beats

Problem · Insight · Build · Outcome.

Scroll past the legacy frame. The four beats land in order. At the end, the modern site fades into the same window.

🔒fuel1st.com
Legacy
01 · Problem

A 12-year WordPress brochure with the entire site copy fitting in a paragraph.

The legacy fuel1st.com had been running unchanged since 2014, designed and maintained by an outside agency (G3 Grafix Studios, per the footer). The full visible surface: nav of Home / About Us / Fuel Services / Contact Page; a single tagline ("We provide 24 hour, 7 days per week, 365 days per year dispatch, for around the clock fuel coverage."); a quote ("Whether we are fueling a King Air or a Boeing 777"); a footer crediting the agency. About fifty words total.

02 · Insight

Aviation buyers want a structured operating surface, not a brochure.

Fuel buyers, dispatch teams, and trip-support coordinators need to see capability scope, footprint, and how to reach a human at 2am — not a tagline. The new site is built around that hierarchy: six explicit services, three hero stats, a 24/7 dispatch email + phone, and an industry news feed that signals the brand actually pays attention to the lane.

03 · Build

22 commits, 43 hours, May 6 → May 8 2026.

Scaffold → initial site → drop map iframe for mobile LCP → self-hosted aviation photography → favicon iteration → tighter AEG-style full-bleed bands → about-page identity rewrite → brand wordmark swap → five hero layout iterations → services pruning (dropped Card Programs which Fuel1st no longer offers) → contact info strip-down → three motion passes (card lift, tap squish, stagger fade) → hide the Insights + Leadership tabs until the copy lands. Every commit was scoped enough to roll back independently.

04 · Outcome

Structurally complete. Indexing gated on the launch checklist.

The site is on operator-owned infrastructure now — no third-party agency in the loop for content updates. SEO surface is shipped: sitemap, dynamic OG image generation per page, JSON-LD Organization schema, Twitter card, robots flag wired through to layout metadata. The site is currently noindex by intent — when the 5-item launch checklist below clears (leadership bios, press kit, legal review, real editorial post, indexing flag flip), the site is searchable the same day.

05 · Pending

Launch checklist — the gating items before indexing flips.

Four placeholder leadership bios (Jane Doe / John Roe / Avery Smith / Morgan Park) await real profiles. Press kit needs the full logo pack + a one-pager PDF. Privacy / Terms / Cookies pages are unreviewed boilerplate, flagged at the top of each page; legal review is the bottleneck. The /blog system ships with one placeholder post tagged `todo: true` (renders with a `· placeholder` badge); first real editorial post comes next. Flip the single indexing flag on once all four are done — robots.ts + layout.tsx pick it up immediately, sitemap drops in the same build.

06 · Roadmap

The agent surfaces Fuel1st could ship next — same operator stack.

Speculative, not committed: a 24/7 dispatch concierge wired through the OgLife widget (already running across the brand portfolio) that triages /contact submissions and routes to the right dispatcher; an AI weekly news digest built on top of the same `lib/rss.ts` aggregator already shipping in production; a SAF / carbon-offset calculator under /sustainability; an editorial-drafting agent that turns operational events into blog drafts marked `todo: false` for one-tap human approval. Each piece is an adapter onto the same Drizzle / Neon / Vercel runtime the rest of the operator's stack already runs on.

🔒fuel1st-site.vercel.app
Modern
For the technically curiousHow it was done
  1. 01

    Where it started

    fuel1st.com had run on the same WordPress build since 2014, designed and maintained by an outside design agency. The entire visible site was four nav links, one tagline about 24/7 fuel coverage, a single quote, and a footer crediting the agency — roughly fifty words of copy, no service list, no imagery beyond a search box.

  2. 02

    What was wrong

    Fuel buyers, dispatch teams, and trip-support coordinators need to see capability scope, coverage footprint, and how to reach a human at 2am — none of which a fifty-word brochure carries. And with the agency owning the WordPress theme, every content change had a third party in the loop.

  3. 03

    The rebuild

    22 commits over a 43-hour sprint, May 6 to May 8 2026, on our hosting platform. Scaffold, then the structural site; the embedded map was dropped from mobile for load speed; self-hosted aviation photography landed in the third commit; the hero went through five layout iterations until the plane and the copy stopped competing; a stale service the company no longer offers was pruned; and three named motion passes finished it — card lift, tap-press squish, and stagger fade-up — every commit small enough to roll back on its own.

  4. 04

    What runs now

    A news aggregator pulls four public aviation industry feeds, tags each story against a five-category keyword taxonomy, and strips any item mentioning a direct competitor before it ever renders; the page rebuilds itself every 24 hours with a token-gated manual refresh for breaking-news days. Share-preview images are generated on the fly for every page, and the sitemap is driven by the live services list — add a service in code and the sitemap updates on the next deploy.

  5. 05

    What the owner does now

    Content updates ship in seconds with no agency in the loop. The site is deliberately unlisted from search until a short launch checklist clears — real leadership bios, a press kit, legal review of the boilerplate policy pages, and a first real editorial post. When it does, flipping one indexing switch makes the site searchable the same day, sitemap and all.

Architecture

Old stack
  • WordPress
  • G3 Grafix-maintained theme
  • Search box
  • Static brochure copy
  • No news
  • No services list
↓
New stack
  • modern web framework
  • design system
  • edge hosting we operate
  • Self-hosted aviation photography
  • 4-source RSS aggregator
  • Competitor-mention filter
  • Manual revalidate webhook
  • Motion polish (3 named effects)

What changed, with evidence

Design

Real services catalog, not just a tagline

The legacy site had one Fuel Services nav item and no actual list of what Fuel1st does. The rebuild ships a structured catalog: Fuel Supply, Trip Support, Logistics, Flight Planning, Ground Handling, Sustainable Aviation Fuel — each with its own surface and copy.

Before
Nav: Home · About Us · Fuel Services · Contact Page. No actual service list anywhere on the site.
After
Six clearly-scoped services with their own pages, anchored by hero stats: 1,800+ Airports · 190+ Coverage · 24/7 Dispatch.
Design

Self-hosted aviation photography, not stock fillers

The legacy site had no hero imagery beyond a search box. The rebuild's third commit added self-hosted aviation photography throughout, with a head-on jet photo as the favicon. Hero went through five iterations (brighter overlays, photo-on-right + text-on-left, split layout) until the plane and the copy stopped competing.

  • Commit dac4e0b: Add self-hosted aviation photography throughout the site
  • Commit 975761d: Use head-on jet photo as the site favicon
  • Commit 9cab939 → 7c08e9d: Hero layout iterations until text + plane stopped competing
Agent backbone

Curated aviation news, automatically refreshed

A `/news` aggregator pulls four public industry sources — Aviation Week, FlightGlobal, Simple Flying, AIN — filters out items mentioning direct competitors, categorizes by keyword, and renders a card grid with category filters that persist in localStorage. 24-hour ISR with a manual revalidate webhook.

  • Sources: Aviation Week · FlightGlobal · Simple Flying · AIN
  • Competitor-mention filter applied to every item
  • POST /api/revalidate-news endpoint gated by a shared token
Design

Three motion passes, scoped to feel — not flash

After the structural rebuild shipped, three interaction passes landed: card lift on hover (desktop), tap-press squish for cards and buttons, and stagger fade-up on scroll. Each is a small, named effect; everything stays GPU-light and respects reduced-motion preferences.

  • Effect 1: card lift on hover (desktop)
  • Effect 3: tap-press squish for cards and buttons
  • Effect 4: stagger fade-up on scroll
Agent backbone

Complete SEO surface — sitemap, dynamic OG, JSON-LD, robots flag

Full Next.js metadata API: per-page Twitter cards + OG, Organization JSON-LD with foundingDate / email / phone, a dynamic `/opengraph-image` Edge route that renders a 1200×630 brand-gradient PNG per page, and a /sitemap.xml that enumerates 11 static paths plus a per-service anchored entry. Indexing is gated behind a single `site.allowIndexing` flag wired through both `robots.ts` (disallow:/ when off, allow:/ + sitemap when on) and `layout.tsx` (matching robots meta on every page).

  • app/sitemap.ts: 11 static paths + per-service `#slug` entries, weekly/monthly changeFreq
  • app/robots.ts: gated on site.allowIndexing — full disallow → full allow + sitemap + host
  • app/opengraph-image.tsx: Edge runtime, 1200×630, brand-gradient (#6000CD → #160031)
  • app/layout.tsx: title template, OG, Twitter card, Organization JSON-LD (5+ fields)
  • app/icon.png + app/apple-icon.png picked up automatically
Agent backbone

News aggregator with 5-category regex taxonomy + competitor blocklist

`lib/rss.ts` defines 5 news categories — commercial, business-aviation, military, MRO, sustainability — each backed by a regex over the item title + content. Items can land in multiple categories. A single BLOCKLIST regex strips any item that mentions the named competitor before render. 12-second per-feed timeout, custom User-Agent, media:content support for inline thumbnails.

  • 5 categories with per-category keyword regex (commercial / bizav / military / MRO / SAF)
  • BLOCKLIST = /\baeg\b/i — competitor mentions never reach the page
  • rss-parser with 12s timeout + Fuel1st-News-Aggregator/1.0 User-Agent
  • Items can land in multiple categories (multi-tag)

While the owner sleeps.

Autonomous surfaces

The agent backbone keeps the brand earning after hours. The owner approves; the system runs.

  • Refreshes the aviation news feed every 24 hours

    every 24h (+ manual on demand)

    Vercel ISR rebuilds /news on its own cadence; the manual /api/revalidate-news webhook is there for breaking news days. Render path: rss-parser pulls 4 feeds → 5-category regex taxonomy tags each item → BLOCKLIST filter strips the named competitor → card grid with persisted filter chips.

  • Generates per-page OG images at the edge

    on every link-unfurl request

    `/opengraph-image` runs on Vercel Edge and renders a 1200×630 brand-gradient PNG with the site name + tagline for every social share — no static asset to maintain.

  • Keeps the sitemap fresh against the live services list

    every deploy

    app/sitemap.ts iterates `services` from lib/services.ts, so adding a new service in code auto-publishes a new sitemap entry on the next build.

← All rebuilds

Fuel1st — a 12-year-old brochure page rebuilt into a real aviation services site — zsty.us