Skip to content

Colophon

How this site was made, and the rules it follows.

I write software for a living, so I treated this site like production software: typed content, tests, an accessibility budget and a build step that refuses to ship anything that looks confidential.

About these case studies

The case studies summarize professional work I've done as a developer at Detechtion.AI, on web and mobile software for natural-gas compression monitoring. They cover the problems I worked on, my role, the decisions I made and what came of them. They were drafted from my own records with an AI coding agent under my direction. They are not product documentation and are not official communications from any company.

Who owns what

The work described here was done as part of my job, and my employer owns it: its code, designs and data. Nothing on this site grants or claims any rights in it. The demos were made for this site, with an AI coding agent under my direction. They share no code, assets or data with any employer product.

The rules I followed

  • No source code. There are no employer code snippets, renamed fragments or code rewritten from memory anywhere on the site.
  • No screenshots. There is no production, staging, internal or unreleased software on the site. The visuals are original recreations with their own palette, typography and layout.
  • Synthetic data only. Every unit name, number, location and time series in the demos comes from a seeded generator in this site's source. None of it is taken or derived from real customer or company data.
  • Public names only. I name my employer and its products only where the company has announced them publicly, and only as plain text to identify the work. Internal project names are replaced with generic descriptions.
  • No customers. I don't name customers or describe their sites, fleets, operations or data.
  • No business figures. There are no revenue, pricing, user, customer, device or fleet counts, and no commit counts or other git statistics. The numbers I quote are engineering measurements of work I did or directed, such as lines of CSS removed, test counts or contrast failures fixed.
  • No security details. I describe authentication, access control and device features only at the level of a public product page.
  • High-level architecture only. I mention widely used public technologies, not internal systems, schemas, endpoints or infrastructure.

Credit where it's due

Software is a team effort. When I write “I”, I mean my own contribution. Work by teammates is credited to “the team” or “colleagues”. I don't name colleagues, and I say so explicitly when a piece of work came from someone else, such as a reviewer catching an issue. Where an AI coding agent did part of the work, the case study says so. I directed that work and was responsible for verifying it.

Built with

The site is built with Next.js 16 (App Router, static export), React 19, TypeScript and Tailwind CSS 4. The interactive demos use React, SVG and canvas, with no chart or UI libraries. Page-to-page morphs use the View Transitions API where the browser supports it.

  • Built with an AI coding agent. The site's code, demos and icons, and much of its copy, were produced with AI coding agents under my direction, working from my own records.
  • Design tokens with tests. A unit test parses the stylesheet and fails the build if any text colour drops below 4.5:1 contrast on any surface, in either theme.
  • Confidentiality scanner. Every build scans the source and the generated HTML for ticket keys, internal hostnames, work email addresses, cloud credentials and a private denylist of names. The denylist is committed only as keyed hashes (HMAC with a secret key kept out of the repository), so the repository never reveals the names it protects.
  • No flash of the wrong theme. A tiny inline script picks the theme before first paint. Your choice is remembered, and the site otherwise follows your operating system.
  • Keyboard first. Press Ctrl/⌘ + K anywhere to open the command menu.

Privacy notice

Effective September 30, 2026

  • No analytics or trackers. The site sets no cookies of its own and loads no third-party scripts, fonts, images or embeds. Fonts are self-hosted.
  • One local setting. If you pick a light or dark theme, it is saved in your browser's localStorage under the key theme. It never leaves your device, and clearing site data removes it.
  • Hosting. The site is served by Cloudflare Pages. Like any web host, Cloudflare processes standard request data (such as IP address, user agent and requested URL) to deliver and protect the site, under its own privacy policy. To protect the site from automated abuse, Cloudflare may set a strictly necessary security cookie (such as __cf_bm), and your browser may send Cloudflare reports about failed connections. Cloudflare's optional analytics and script-injecting features are switched off. I don't receive or use request logs to identify visitors.
  • Email. If you email me, I use your message and address only to reply. I don't add you to lists or share your message.
  • Do Not Track / Global Privacy Control. There's no tracking to switch off, so these signals have nothing to act on. They're respected by default.
  • Changes. Any change to this notice will be posted here with a new effective date.

Accessibility statement

The site targets WCAG 2.2 level AA. It uses semantic landmarks, a skip link, visible focus rings that the sticky header can't hide and 24×24 px minimum targets. Every text colour is tested for contrast in both themes. The site respects reduced-motion preferences, and every interaction works from the keyboard, including the demos: anything you can drag, you can also do with arrow keys or buttons. Each chart comes with a text summary.

If something doesn't work for you, please tell me on LinkedIn and I'll fix it.

Trademarks & endorsement

Detechtion.AI, Detechtion Technologies, Noralta Technologies Inc., OneView Compression, Enalysis, Enbase Mobile, Enbase Dashboard and related names are trademarks of their respective owners. They appear only as plain text to identify work I contributed to. No logos are used. No employer, customer or vendor has sponsored or endorsed this site, and views here are my own. iOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license. App Store is a service mark of Apple Inc., registered in the U.S. and other countries and regions. Android is a trademark of Google LLC. Device frames in the demos are generic drawings, not any manufacturer's design.

Credits & licences

This site's content and demo code are © 2026 Kelvin Mei. Third-party work is used under the licences below.

Third-party assets and their licences
AssetCopyright
Geist & Geist MonoThe Geist Project AuthorsSIL Open Font License 1.1
Instrument SerifThe Instrument Serif Project AuthorsSIL Open Font License 1.1
Next.jsVercel, Inc.MIT
React (react, react-dom, scheduler)Meta Platforms, Inc. and affiliatesMIT
Tailwind CSSTailwind Labs, Inc.MIT
Motion (motion, motion-dom, motion-utils)Motion B.V.MIT
Framer Motion (bundled by Motion)Framer B.V.MIT
clsxLuke EdwardsMIT

The full licence texts and copyright notices for the packages bundled into this site are in third-party-licenses.txt.

The icons, monogram and device frames were drawn in SVG for this site, with an AI coding agent under my direction. None come from an icon set or a manufacturer's artwork.

Corrections & takedowns

If you represent a company or person mentioned here and think something should be changed or removed, message me on LinkedIn. I'll respond promptly and take the material down while we sort it out.

Esc

↑↓ to move ↵ to select