Kieron Oates, home
console@kieron-oates:~/portfolioC:\Users\kieron\portfolio

Kieron Oates, web developer

Projects

kieron@portfolio:~/projects
Overhead: a faceted globe ringed by thousands of satellites, with live counts of working satellites, rocket bodies and debris, and a timeline.

kieron@portfolio:~/projects/~/overhead$ cat README.mdPS C:\Users\kieron\projects\…\overhead> Get-Content README.md

Overhead

Overhead shows around 32,000 satellites, rocket bodies and pieces of debris moving where they really are. You can scrub a week either way, pick out groups like Starlink or the space stations, ride along with the ISS and see what passes over you tonight. I built it because the trackers I used were either beautiful or useful, rarely both, and few worked on a phone. A Cloudflare Worker collects fresh orbits every two hours; everything else runs on your device, with SGP4 in a web worker and the GPU moving every object each frame.

Built with

  • Svelte 5
  • TypeScript
  • Three.js and GLSL
  • satellite.js (SGP4, WebAssembly)
  • Web Workers
  • Cloudflare Workers and KV
The studio with every character drawn, showing a specimen poster for the finished handwriting font.

kieron@portfolio:~/projects/~/handwriting-font$ cat README.mdPS C:\Users\kieron\projects\…\handwriting-font> Get-Content README.md

Handwriting Font Maker

You write each letter on your phone, with a mouse, or on a printed template you photograph, and download a font that installs on an iPhone, Mac or PC. It spaces and kerns your letters, lets you draw busy letters up to three times so repeats take turns, and joins pairs like th the way you write them. I wrote most of the font file myself, from the TrueType outlines to the layout tables. There's no account and no server, and nothing you draw leaves your device.

Built with

  • React 19
  • TypeScript
  • Vite
  • Web Workers
  • Hand-written OpenType tables
  • Cloudflare Pages
A finished Wikiracer race: two search fronts meeting in the middle, with my route shown against the shortest one.

kieron@portfolio:~/projects/~/wikiracer$ cat README.mdPS C:\Users\kieron\projects\…\wikiracer> Get-Content README.md

Wikiracer

Get from one Wikipedia article to another in as few clicks as you can. At the finish, a search spreads out from both articles at once, you watch the two fronts meet, and your route appears beside the shortest one. I turned Wikipedia's 11 GB of SQL dumps into a map of 7 million articles and 713 million links that the browser can search by reading about a megabyte of it, with no search server. There's a daily course, random courses at three difficulties and live rooms for racing friends.

Built with

  • Svelte 5
  • TypeScript
  • WebGL2
  • Web Workers
  • Cloudflare Workers and Durable Objects
  • GitHub Actions
Every Page: an open book asking what the library should find, over a lamplit gallery of hexagonal bookshelves.

kieron@portfolio:~/projects/~/every-page$ cat README.mdPS C:\Users\kieron\projects\…\every-page> Get-Content README.md

Every Page

A lamplit version of Borges's library, holding every page of 3,200 characters that could ever be written. Type anything and you fly down the air shaft, follow a trail of light to one book, and it opens on the page where your words have always been. The library stores nothing: each page is computed on your device from its place on the shelf, and search runs that shuffle backwards. The whole 3D scene is about 154 KB gzipped and stays smooth on a phone.

Built with

  • Astro
  • TypeScript
  • three.js and GLSL
  • Web Workers
  • BigInt
  • Web Audio
  • Cloudflare Workers
A balance scale with a keg of beer on one pan and a stack of televisions on the other.

kieron@portfolio:~/projects/~/perfect-balance$ cat README.mdPS C:\Users\kieron\projects\…\perfect-balance> Get-Content README.md

Perfect Balance

You get something on one pan, say an elephant, and a shelf of everyday objects to stack on the other until you think the weights match. Then the scale lets go, and landing between 3% light and 4% heavy wins the round. There are five rounds a day, the same for everyone, and a Freeplay mode. Jolt physics, compiled to WebAssembly, runs in a web worker so the piles slide and topple without the page stuttering, and each of the 200 objects has its weight from two independent sources.

Built with

  • Svelte 5
  • TypeScript
  • three.js
  • Jolt Physics (WebAssembly)
  • Web Workers
  • Cloudflare Workers
Three phone screens from NFC Savers: the welcome page, a points balance with deals and products, and a shopping list.

kieron@portfolio:~/projects/~/dissertation$ cat README.mdPS C:\Users\kieron\projects\…\dissertation> Get-Content README.md

Dissertation

Contactless Mobile Web Reward System to Enhance Customer Engagement, for my BSc (Hons) in Computing for Business. Big supermarkets keep customers coming back with reward schemes that small local shops can't build, so I designed and built one they could: NFC Savers, a mobile web app where customers' NFC cards carry their details to readers in the shop, with points, deals and shopping lists on their phone. It's backed by a MongoDB database with token-based logins, and it follows a literature review, an agile build and a customer survey. It was graded 72/100, a First.

Built with

  • HTML, CSS and JavaScript
  • MongoDB
  • Entity relationships
  • SQL
  • Authentication tokens
  • NFC