Skip to content
Tyler King
Contact
Product Engineer Available for work

Tyler King

I build modern web applications end to end, handling the architecture, the interface, and the documentation that keeps them maintainable. I’ve been doing this since 2010, in bio-science, health, energy, and fintech.

Selected work

5 studies

Focused looks at real problems I’ve worked on, the constraints involved, and the decisions made along the way.

A screenshot of the dashboard leads section.

Building This Site and the CMS Behind It

A portfolio kept current through its own single-admin CMS, where every word on the page is editable and a change goes live without a rebuild.
2026
SvelteKitPostgresDrizzle
A sales engineer showing a client demo on their mobile phone.

Letting Sales Build Client Demos Themselves

Built demo tooling for the sales team, where a branded environment is created, provisioned, and handed off without an engineer in the loop.
2026
SvelteKitTypeScriptTooling
A group of wind turbines in a green pasture next to a winding pathway.

Isolated End-to-End Testing System

An ephemeral testing setup that provisions a full application stack for every CI run, so tests stop sharing state and failures reproduce locally.
2024
CI/CDDockerMySQL
Energy executives working in a board room.

Rebuilding Risknet Around Daily Decisions

Rebuilt the Risknet dashboard so the metrics analysts act on lead the layout, with reference detail on demand and new metrics added as data.
2021
TypeScriptReactHighcharts
A small batch of cannabis seedlings in a research greenhouse.

Restructuring a Genotype Report for Two Audiences

Reorganized a dense genotype report around the questions its readers ask, with one visual language across the charts.
2019
VueExpressHighcharts

Self-directed products

2 projects

Built, shipped, and maintained on my own time, outside any client work. Each card links straight to the live project.

American Bestiary
A parchment map of the United States titled Tabula of the Continent and Its Beasts, with a dot on every state and Oregon filled in red.

American Bestiary is an illustrated field guide to fifty cryptids, one per state, kept as a naturalist's folio. Each legend is recorded with a straight face, then glossed with what the evidence says.

TypeScriptSvelteKitMongoDBGraphQL
Fogline
A near-black screen with a two-line poem in the centre, its letters drifting out of line as the post fades.

Fogline is a text platform where posts decay in real time, drifting through fog zones until they vanish. Fog events reshape visibility on independent timers, with no likes, dates, or engagement sorting.

TypeScriptSvelteKitGoPostgreSQL

A repeatable process

6 steps

My goal is to understand the real problem, work within existing constraints, and deliver solutions that are reliable, maintainable, and understandable.

  1. Understand the product and its constraints

    Learn how the product is used, who it serves, and the constraints shaping the work.
  2. Analyze the system as it exists today

    Evaluate the current architecture, data flow, and failure points before proposing changes.
  3. Identify the core problem and define success

    Determine root causes, and establish clear outcomes so improvements can be evaluated objectively.
  4. Choose a solution and align on tradeoffs

    Choose a balanced approach and make the tradeoffs transparent before implementation begins.
  5. Implement incrementally and intentionally

    Favor small, reviewable changes that reduce risk and preserve momentum for the team.
  6. Test, ship, and stabilize in production

    Use real behavior to refine the solution, deploy carefully, and address issues before moving on.

Live browser features

5 exhibits

Demonstrations of platform features I’m using now. When a browser lacks support, the exhibit shows its fallback instead.

Native Popovers for Lightweight UI Overlays

The mirror is three native popovers, one nested inside the next. Escape closes one level at a time, and an outside click collapses the whole chain, without any overlay code.

Each level opens inside the last
Level 1 / 3
Fig.01 Nested popovers

Automatic Contrast in CSS (contrast-color)

Each tile’s label is colored by contrast-color(), which returns black or white against the tile behind it. The browser handles the contrast math without any values in the stylesheet.

Each label is contrast-color(tile)
0.85
0.85
0.85
0.60
0.60
0.60
0.35
0.35
0.35
oklch(0.60 0.13 285)
Fig.02 Contrast flip

View Transitions for Seamless UI Changes

Shuffling the tiles is a single DOM update wrapped in a view transition. The browser animates each tile to its new position without any animation code written for the move.

Reordered with a view transition
A
B
C
D
Fig.03 Tile shuffle

Perceptual Color in CSS (OKLCH)

The ramp is one hue at five lightness steps, rebuilt live as the hue moves. Because OKLCH lightness is perceptual, the steps stay even at any hue the slider lands on.

Five lightness steps, one hue
oklch(0.62 0.12 200)
Fig.04 Live hue ramp

Layered Motion for Stateful Interfaces

Using native browser animation primitives to create smooth, coordinated motion without relying on external libraries. Each wave layer runs two looping animations created with element.animate.

Three timers, paused offscreen
Fig.05 Layered waves

A self-taught background

I’m self-taught, started coding early in the web’s evolution, and have stayed close to the tools and patterns shaping how people build for the browser today. Agencies came first, then startups and product teams, with work across advertising, bio-science, risk analytics, clean energy, and fintech.

Over the years, I’ve designed and built everything from marketing sites and design systems to full application architectures. Most of my work lives at the intersection of design decisions and technical choices, ensuring what ships looks intentional and holds up under real-world use.

Core competencies

Software Development, Architecture, Product Design, Data Visualization

Data visualization

D3, Highcharts, Chart.js, ECharts, Three.js, WebGL, SVG, Canvas

Product design

Design Systems, UI / UX, Accessibility, WCAG 2.2, Axe CLI, Figma, Adobe Suite

Front-end

TypeScript, Svelte, Vue, React, Vite, HTML, CSS, SASS, Vanilla Extract

Back-end

Node.js, Python, PHP, SQL, PostgreSQL, MongoDB, Redis, RESTful APIs, GraphQL

Full-stack

SvelteKit, Nuxt, Next, Laravel, Django, NestJS, FastAPI, Flask, Remix

Testing

Vitest, Jest, Playwright, Cypress, Supertest, Storybook, Chromatic

DevOps

Docker, GitHub Actions, GitLab, Jenkins, CI/CD, Terraform, AWS, GCP, Vercel

CMS & commerce

Payload, Sanity, Directus, Strapi, Contentful, WordPress, Shopify

Current availability

I’m open to full-time roles, contract engagements, and consulting. Contract work is scoped and remote from Portland, and I reply within two working days.

tk@tylerking.io Portland, OR
or Ctrl + Enter