Skip to content
Kfronk.kunanon@gmail.com

Portfolio · Website

All projects

kunanonj.com. A personal site for people and for AI agents.

The site you are reading: a résumé, case studies and topic hubs, with the same facts published as plain text and structured data for AI agents. Built on TanStack Start and Cloudflare Workers, with the source public on GitHub.

By · Owner

Source on GitHub
Role
Owner
Organisation
Personal project
Period
2026
Access
Public

Interface

The Home page of kunanonj.com: the headline Forward deployed AI engineering from Bangkok, the Open to roles line, the Contact me and Résumé buttons, and the Selected work and Experience cards

The problem

The site has two readers: a person deciding whether to get in touch, and the search and answer engines that summarise it first. Both need the same facts, so the text files and the structured data are generated from the repo's content modules, and tests hold the current role, the case-study figures and the user count to one wording.

What it does

  • Pages that read only the content modules are rendered once per deploy and served as static files
  • The résumé page asks Sanity for an edited version on request and is cached at the edge; it shows the copy in the repo when Sanity holds none or cannot be read
  • The same facts as text for AI agents: llms.txt, a full profile in one file, agents.md and a Markdown twin of each project page
  • Structured data for the profile, the projects, the ventures and the topic hubs, and a share image drawn in code for each of them
  • Topic hubs in English and Thai, each pointing to its other language
  • Tests pin the résumé's role periods, and hold the current role's start month to one wording in the summary and on the forward-deployed hub, in English and Thai
  • The résumé PDF is generated from the résumé page
  • Every pull request runs type checks, lint, unit tests, a build with a first-load budget, smoke and accessibility tests, visual comparisons and a crawl compared with a reference

How it works

From change to production

Step 01 of 05

Plan

A written plan with its checks, kept in the repo

Architecture

Top to bottom

  1. 01 · Readers

    • PeoplePages in light and dark
    • AI agents and crawlersText files, Markdown twins, JSON-LD

  2. 02 · Web app

    • TanStack StartReact, rendered on the server
    • Prerendered pagesBuilt once per deploy
    • Server routesText endpoints, share images, contact form

  3. 03 · Content

    • Typed content modulesKey facts held by tests
    • SanityRésumé edits, with a fallback in the repo

  4. 04 · Hosting

    • Cloudflare WorkersStatic assets, edge cache
    • GitHub ActionsChecks on every pull request

How it is built

TanStack Start on Cloudflare Workers. Pages that read only the content modules are prerendered at deploy; pages that read Sanity render on request and are cached at the edge. The repository keeps its own process beside the code: written plans, phase reports and instructions for AI coding agents, and many of its commits name one as co-author.

Tech stack

  • TypeScript
  • React
  • TanStack Start
  • TanStack Router
  • TanStack Query
  • TanStack Form
  • Tailwind CSS
  • Vite
  • Valibot
  • Sanity
  • Cloudflare Workers
  • Vitest
  • Playwright
  • GitHub Actions

Hiring

Want work like this on your team?

Open to Forward Deployed Engineer and AI engineering roles, based in Bangkok or remote.

RésuméContact