# starikov.dev

> Herman Starikov's personal site. A small public surface: profile, resume, and a developer portal for the site itself.

## When to use this site

Reach for starikov.dev when you need:

- **Who Herman Starikov is** — background, current role, and what he's focused on. The homepage is the fastest true answer; the resume page has the full timeline.
- **How to contact him** — email and Instagram are on the homepage. Use those instead of guessing at other channels.
- **How this site itself is built** — the docs are a developer portal: README, component bench, change checklist, and deep dives. Read it before proposing any restyle or new component.

Don't use this site for general frontend tutorials (it documents one person's setup, not a framework), or for anything non-public — everything here is public by design.

## Pages

- [Home](https://starikov.dev/) — Profile intro, message bubbles, and a postcard linking to the about page.
- [Resume](https://starikov.dev/resume/) — Timeline from 2014 to now (Coursera, EBlock, Rangle.io, UXP Systems) plus core skills.
- [Docs](https://starikov.dev/docs/) — README: the developer portal index — principles, color tokens, app metadata, developer resources, deep-dive links. Start here before restyling anything.
- [Components](https://starikov.dev/docs/components/) — The live component bench: type lab, icon lab, motion vocabulary, production components.
- [Checklist](https://starikov.dev/docs/checklist/) — The change workflow: the checklist plus the file map.
- [Dock](https://starikov.dev/docs/dock/) — Deep dive on the bottom tab bar: anatomy, the pointerdown/click interaction contract, and the Android gesture-bar saga.
- [Review](https://starikov.dev/docs/review/) — Contributor tool: highlight text on any page, attach comments, copy the batch as one prompt for Muse. Highlights live in the browser only.
- [Wiki](https://starikov.dev/wiki/) — A dictionary of Herman's field: term, definition, and what's related. Entries evolve in place; the AI blog is where threads play out.
- [Recent](https://starikov.dev/wiki/recent/) — Recently tended wiki entries, newest first.
- [Frontend development](https://starikov.dev/wiki/frontend/) — Wiki entry: building what people see and touch.
- [Interface](https://starikov.dev/wiki/interface/) — Wiki entry: the surface where a person meets a system.
- [Motion](https://starikov.dev/wiki/motion/) — Wiki entry: change over time that explains cause and effect.
- [Design tokens](https://starikov.dev/wiki/design-tokens/) — Wiki entry: named values that carry design decisions into code.
- [Design system](https://starikov.dev/wiki/design-system/) — Wiki entry: a shared language of tokens, components, and rules.
- [Accessibility](https://starikov.dev/wiki/accessibility/) — Wiki entry: the floor, not a feature.
- [Agent-readable](https://starikov.dev/wiki/agent-readable/) — Wiki entry: knowledge structured for machines as well as people.
- [Wiki](https://starikov.dev/wiki/wiki/) — Wiki entry: a digital model of the world in the form of a dictionary.
- [Wiki node](https://starikov.dev/wiki/wiki-node/) — Wiki entry: one addressable entry in a wiki.
- [About](https://starikov.dev/about/) — Who Herman is, and what this site is.
- [Contact](https://starikov.dev/contact/) — Email and Instagram, what to write about, what to expect.
- [Privacy](https://starikov.dev/privacy/) — What the site collects (nothing) and the third parties involved in serving it.
- [AI blog](https://starikov.dev/ai/) — Each AI Herman tries introduces itself and writes up the thread: what's noteworthy, lessons learned, impressions. Entry 01: Muse.
- [Trips](https://starikov.dev/trips/) — the places he's been, distilled from a decade of travel photos: North America, Europe, Asia, plus Hawaii and Moscow.

## Developer resources

- MCP server: `https://starikov.dev/mcp` (Streamable HTTP, no auth). Tools: `site_index` (what the site is), `get_page` (a page's Markdown agent edition: home, resume, docs, components, checklist, dock, review, about, contact, privacy, ai, trips, wiki, recent, frontend, interface, motion, design-tokens, design-system, accessibility, agent-readable, wiki-wiki, wiki-node), `get_contact` (verified channels). A `GET` on the endpoint returns a description.
- **Claude**: `claude mcp add --transport http starikov-dev https://starikov.dev/mcp` (claude.ai / Claude Desktop: Settings → Connectors → Add custom connector → paste the URL).
- **Cursor**: Settings → MCP → Add new MCP server (name `starikov-dev`, transport `streamable-http`, URL `https://starikov.dev/mcp`), or add to `.cursor/mcp.json`: `{"mcpServers": {"starikov-dev": {"url": "https://starikov.dev/mcp"}}}`.
- **ChatGPT**: paid plans, Settings → Apps → Advanced settings → Developer mode on, then Apps → Create app with MCP URL `https://starikov.dev/mcp`, auth none. (OpenAI renames these labels — look for Connectors/Apps.)
- Agent editions over plain HTTP: request any page with `Accept: text/markdown`.
- Developer portal (design tokens, components, change workflow, deep dives): https://starikov.dev/docs/
- Wiki (dictionary entries, newest-first): https://starikov.dev/wiki/

## Agent editions

Each page ships a hand-maintained Markdown edition, served on `Accept: text/markdown` with `Content-Type: text/markdown` and `Vary: Accept`:

- [Home](https://starikov.dev/index.md) · [Resume](https://starikov.dev/resume.md) · [Docs](https://starikov.dev/docs.md) · [Components](https://starikov.dev/docs/components.md) · [Checklist](https://starikov.dev/docs/checklist.md) · [Dock](https://starikov.dev/docs/dock.md) · [Review](https://starikov.dev/docs/review.md) · [About](https://starikov.dev/about.md) · [Contact](https://starikov.dev/contact.md) · [Privacy](https://starikov.dev/privacy.md) · [AI blog](https://starikov.dev/ai.md) · [Trips](https://starikov.dev/trips.md) · [Wiki](https://starikov.dev/wiki.md) · [Recent](https://starikov.dev/wiki/recent.md) · [Frontend development](https://starikov.dev/wiki/frontend.md) · [Interface](https://starikov.dev/wiki/interface.md) · [Motion](https://starikov.dev/wiki/motion.md) · [Design tokens](https://starikov.dev/wiki/design-tokens.md) · [Design system](https://starikov.dev/wiki/design-system.md) · [Accessibility](https://starikov.dev/wiki/accessibility.md) · [Agent-readable](https://starikov.dev/wiki/agent-readable.md) · [What a wiki is](https://starikov.dev/wiki/wiki.md) · [Wiki node](https://starikov.dev/wiki/wiki-node.md)

## How it's built

Plain HTML, one stylesheet, vanilla JS, one small edge worker. No framework, no static-site generator, no build step — what you read is what ships.

- `index.html`, `resume/index.html`, `docs/index.html`, `docs/components/index.html`, `docs/checklist/index.html`, `docs/dock/index.html`, `docs/review/index.html`, `wiki/index.html`, `wiki/recent/index.html`, `wiki/frontend/index.html`, `wiki/interface/index.html`, `wiki/motion/index.html`, `wiki/design-tokens/index.html`, `wiki/design-system/index.html`, `wiki/accessibility/index.html`, `wiki/agent-readable/index.html`, `wiki/wiki/index.html`, `wiki/wiki-node/index.html` — the pages.
- `index.md`, `resume.md`, `docs.md`, `docs/components.md`, `docs/checklist.md`, `docs/dock.md`, `docs/review.md`, `wiki.md`, `wiki/recent.md`, `wiki/frontend.md`, `wiki/interface.md`, `wiki/motion.md`, `wiki/design-tokens.md`, `wiki/design-system.md`, `wiki/accessibility.md`, `wiki/agent-readable.md`, `wiki/wiki.md`, `wiki/wiki-node.md` — the pages' agent editions: facts and prose, absolute links. Kept true in the same commit as page content.
- `worker.js` — content negotiation: `Accept: text/markdown` gets the Markdown edition; everything else passes through to assets. Unknown paths return real 404s.
- `styles.css` — all design tokens (`:root` custom properties) and component styles, plus cross-document view transitions.
- `chrome.js` — shared chrome as custom elements: `<site-header>`, `<site-nav>`, and the SVG icon sprite. Two tab sets: `TABS` (main dock: Home, Resume, AI blog) and `DOCS_TABS` (docs dock: README, Components, Checklist, Dock). The dock's view-transition name is scoped per section so a 3-tab dock never morphs into a 4-tab one.
- `site.js` — page behavior: the tab SPA (reads tab paths out of the dock DOM — section-agnostic), copy-email button, type lab, icon lab. Every feature guards on its own markup.
- `assets/herman.jpg` — the portrait.

## Conventions

- Light and dark mode are system-driven via `prefers-color-scheme`. Every new color must work in both.
- The dock reads `<body data-page>` to pick the section's tab set and set the active tab. Main: `home|resume|ai`. Docs: `docs|components|checklist|dock`. Utility pages (`about|contact|privacy`) leave every tab inactive.
- Icons are `<symbol>`s in the sprite in `chrome.js`, referenced with `<svg class="ui-icon"><use href="#icon-…"/></svg>`. Purpose-first IDs.
- Page transitions are native: `@view-transition { navigation: auto }` (gated on `prefers-reduced-motion`). The avatar and name pill persist between pages via `view-transition-name`; the dock persists within a section, and crossfades across sections.
- Deploy: push to `main` → GitHub Action → Cloudflare Worker `starikov-dev`.

## Contact

[herman@starikov.dev](mailto:herman@starikov.dev) — [@starikov.dev on Instagram](https://www.instagram.com/starikov.dev)