zsty.us

Before / After · Case Study

Fuel1st — 2014 WordPress brochure to a 2026 Next.js operating surface

  • Aviation

Fuel1st had been running on the same WordPress brochure since 2014, designed and maintained by an outside agency. The entire site was four nav links, a tagline, a quote, and a footer credit — roughly fifty words of copy. Rebuilt from scratch on Next.js 14 + Tailwind in a 43-hour sprint: six structured services, hero stats, self-hosted aviation photography, a four-source aviation news aggregator with a competitor filter, and three motion polish passes — all on operator-owned infrastructure, deployable in seconds.

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

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 → multi-page operating surface
  • WordPress (2014, third-party agency) → Next.js 14 (operator-owned, 2026)
  • 0 services listed → 6 (Fuel Supply, Trip Support, Logistics, Flight Planning, Ground Handling, SAF)
  • 0 hero imagery → self-hosted aviation photography throughout

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 `NEXT_PUBLIC_ALLOW_INDEXING=true` 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

Architecture

One chain replaced by another. Receipts above.

Old stack
  • WordPress
  • G3 Grafix-maintained theme
  • Search box
  • Static brochure copy
  • No news
  • No services list
↓
New stack
  • Next.js 14 + TypeScript
  • Tailwind
  • Vercel + ISR
  • Self-hosted aviation photography
  • 4-source RSS aggregator
  • Competitor-mention filter
  • Manual revalidate webhook
  • Motion polish (3 named effects)

What changed

Grouped by what kind of system shipped.

Each claim ships with concrete evidence — env vars, table names, cadence chips. No marketing fluff.

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 she sleeps.

Autonomous surfaces

The agent backbone keeps the brand earning between gigs. Jackie 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 — 2014 WordPress brochure to a 2026 Next.js operating surface — zsty.us