How this site is made

kirill.si. A portfolio designed in Figma, built in code and able to answer questions about its owner ✦

Why. Recruiters give a portfolio thirty seconds and AI agents give it none. The site had to work for both: a quiet page for people and a plain source of facts for machines.

System. Every colour, spacing, radius and text style is a Figma variable, mirrored one to one into CSS tokens. The code may not invent a value. If Figma lacks it, it is added there first.

Build. Claude Code works inside the same rules. It reads the Figma file over MCP, reuses the components and follows design.md, so a change starts in Figma and lands in the browser without a handoff. A hundred commits in the first days.

Agent. The hero is a chat. Ask anything and Claude answers from a single file, the same one that feeds About, For Agents and llms.txt, so the site never says two different things.

Details. Pixels that dither and ripple on click, a title that jitters, device mockups that lift on hover, a globe you can spin, a video that unfolds from a circle. All of it short, all of it off with reduced motion.

Machines. For Agents and llms.txt describe Kir in plain text: names, roles, keywords, FAQ and where to look next. An assistant that reads the site gets facts, not a guess.

Source. Next.js, Tailwind CSS and motion, three.js for the globe, PostHog for analytics, Vercel for hosting, Manrope for every letter. One person, Claude Code and a Figma file.