SHOW WORLD
How This Website Was Made
Behind the scenes of the Talking With Jon website: the construction-paper look, the free tools, and the build timeline with screenshots.
The paper look
Every surface is "construction paper": a dark blue and purple base with a faint fiber texture, torn edges, tape strips and slightly tilted cards. Big headlines use a chunky display font with a red drop shadow. There is no photo of real paper anywhere. It is all CSS and small generated textures.
The tools (all free)
- Plain HTML, CSS and JavaScript, with no app framework
- A small Python script that builds all the Extras pages from one list
- Open-source libraries hosted on the site itself: three.js for the 3D studio, Matter.js for physics games, model-viewer for AR, and a QR code maker
- Free static hosting. No ads, no accounts, no tracking
- Sounds made in the browser with the Web Audio API
Build timeline
- The episode archive and paper design
- Games, the theme song page and the Show Bible
- The 100 Extras, built ten at a time and tested on phones, tablets, laptops and big screens after every batch
