Автор, fullstack · 2026

Этот сайт

Портфолио-хамелеон: LLM переписывает сайт под каждого посетителя. NestJS + OpenRouter + Nuxt 4 + three.js.

  • Nuxt 4
  • NestJS
  • OpenRouter API
  • three.js
  • Redis
  • Docker
  • Playwright

Сайт, который вы сейчас читаете. Задача была простая — запомниться, и решается она фичей: посетитель говорит, кто он («я из HR», «я разработчик» или свободным текстом хоть «печенька»), и LLM на лету переписывает интро, подводки кейсов и призыв — одни и те же факты, но поданные на языке читателя.

Как устроен хамелеон

Правда фактов против свободы подачи. В промпт зашит фиксированный список фактов — модель не имеет права придумывать компании, цифры и технологии. При этом подача раскрыта настежь: высокая температура, требование говорить метафорами мира посетителя, запрет на канцелярит. Инструкции в пользовательском вводе, пытающиеся сменить правила, промпт игнорирует.

Structured output. Ответ модели — строгий JSON по схеме (hero, подводка на каждый кейс, CTA): ключи кейсов фиксированы, поэтому модель не может «потерять» проект. Ответ валидируется zod-схемой, невалидный отбрасывается.

Деградация без стыда. Пресеты кешируются в Redis несколькими вариациями (почти ноль расходов), свободный ввод ограничен rate limit-ом. Если ключа нет, провайдер лёг или лимит исчерпан — фронт молча подставляет статичные заготовки. Сайт не выглядит сломанным ни в одном сценарии.

Остальное

Фон — шейдерная сцена на three.js: поле мерцающих частиц с параллаксом от курсора и скролла, деградирует до статики без WebGL и при prefers-reduced-motion. Скролл-анимации — своя директива на IntersectionObserver, без библиотек. Инфраструктура — монорепо npm workspaces, Docker, Nginx, e2e на Playwright.