patfleet-site

The website for Pat Fleet — "The Voice of the Network," the recorded voice of AT&T and the Bell System.

Live: https://patfleet.com (also https://alexkaspercom.github.io/patfleet-site/)

What this is

A modern, static one-page site, rebuilt from the content of the original patfleet.com (recovered from the Internet Archive's 2016 snapshot). No build step, no framework — plain HTML/CSS with a small progressive-enhancement script for the audio players.

Layout

Path	What it is
index.html	The whole site — a single page with sections (About, Demos, What Pat records, Clients, Off the record, Order, Press, Elsewhere).
assets/styles.css	All styling. Design tokens are the :root custom properties at the top.
assets/player.js	Swaps the native <audio controls> for a custom play/seek UI. Falls back to native controls if JS is off.
assets/	Images (hero, portrait, og), favicons. *.webp + *.jpg pairs via <picture>.
audio/	The seven demo MP3s, used by the players.
press/	Press-kit downloads: backgrounder PDF, high-res photo.
archive-snapshot/	The original 2009-era site, self-contained (its own images/, audio/, voice.css, player.swf). Linked from the footer as "View the original."
CNAME, .nojekyll	GitHub Pages custom-domain + serve-as-is.

See ARCHIVE-NOTES.md for how the original was recovered.

Running locally

python3 -m http.server 8000

Then open http://localhost:8000/.

Editing

• Colours / type: the :root block in assets/styles.css. The palette is warm neutrals + a deep "telephone blue" accent + a warm gold for eyebrows. Fonts are Fraunces (display) and Inter (text), loaded from Google Fonts.
• Copy / sections: all in index.html, one <section> each.
• Demo clips: add a <figure class="clip"> with an <audio> inside; the script picks it up automatically.
• Images: regenerate the derivatives from press/Pat Fleet.jpg with ImageMagick (magick … -resize 2200x -strip -quality 82 assets/hero.jpg, etc.).

Contact form — one-time setup

The Contact section posts to Web3Forms (free, no account beyond an email). The access key lives in index.html on the name="access_key" hidden input; it is registered to send to patricia.fleet@gmail.com.

The key is designed to be public — it only lets a form send to the address it was registered with. Pat's email never appears in the page. Submissions arrive by email (and in the Web3Forms dashboard). Spam is filtered by a hidden honeypot field; with JS off, the form falls back to a normal POST and lands on thanks.html.

To route somewhere other than email later (Google Sheet, Slack, etc.), Web3Forms supports that from the same dashboard — no code change.

Still to confirm (content, not code)

• Custom recordings / ordering — Flowroute is dead, so the site now just points everything at the contact form. If a new ordering path appears, add it.
• "Elsewhere" links — Wikipedia, ABC Nightline (YouTube), and Telephone World are all live; give them a click to be sure they still point somewhere useful.
• archive-snapshot/ still contains the old public email addresses and phone number in its historical markup. Those pages are noindex and blocked in robots.txt, and the same data is in the Wayback Machine regardless, but say the word and they can be scrubbed too.