# kunanonj.com

A personal site for people and for AI agents.

Source: https://kunanonj.com/portfolio/kunanonj-com  
Author: [Kunanon Jarat](https://kunanonj.com/about)  
Role: Owner, Personal project (2026)  
Category: Website  
Stack: TypeScript, React, TanStack Start, TanStack Router, TanStack Query, TanStack Form, Tailwind CSS, Vite, Valibot, Sanity, Cloudflare Workers, Vitest, Playwright, GitHub Actions  
Source on GitHub: https://github.com/KunanonJ/fronk-website  
Updated: 2026-11-11

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.

## Highlights

- 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

## 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.

## 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.

## From change to production

1. Plan: A written plan with its checks, kept in the repo
2. Build: Code with its unit tests
3. Checks: Types, lint, tests, a build and browser runs
4. Preview: Each branch uploads its own Worker version
5. Deploy: A merge to main ships the Worker

## Architecture

- **Readers:** People (Pages in light and dark), AI agents and crawlers (Text files, Markdown twins, JSON-LD)
- **Web app:** TanStack Start (React, rendered on the server), Prerendered pages (Built once per deploy), Server routes (Text endpoints, share images, contact form)
- **Content:** Typed content modules (Key facts held by tests), Sanity (Résumé edits, with a fallback in the repo)
- **Hosting:** Cloudflare Workers (Static assets, edge cache), GitHub Actions (Checks on every pull request)

All work: https://kunanonj.com/portfolio