yukovsky.space

Что это

Сайт, который вы сейчас читаете. У него два очень разных посетителя, поэтому у одних и тех же страниц два режима.

Рекрутер с телефона видит простую быструю страницу: кто я, мой стек, главные проекты и их результаты, контакты, резюме и открыт ли я к предложениям. Это статический HTML, он читается за полминуты и работает без JavaScript.

На широком экране те же страницы открываются как пиксельный рабочий стол. Проекты лежат в папке слева и открываются в окнах, которые можно двигать и растягивать. Есть панель задач с часами, меню «Пуск» с поиском по всему сайту, просмотр резюме, терминал и AI-ассистент, который отвечает на вопросы о моей работе и может сравнить меня с вакансией. Переключиться между режимами можно в любой момент.

Как это устроено

• Одни страницы, два режима. Astro собирает каждую страницу в статический HTML на русском и английском. Рабочий стол это прогрессивное улучшение: обычный TypeScript без UI-фреймворка, который загружается только в режиме рабочего стола. Окно показывает ту же серверную разметку, что и настоящая страница, поэтому ссылки, поисковики и чтение без JavaScript продолжают работать.
• Один источник контента. Проекты это Markdown-файлы с типизированной схемой. Из них же собираются страница для рекрутера, страницы проектов, окна рабочего стола, меню «Пуск», поисковый индекс, файлы терминала, карта сайта, llms.txt, JSON-лента и контекст для AI.
• Пиксельная сцена на canvas. Обои это маленький движок сцены на Canvas 2D: дизеринговые палитры дня и ночи, пошаговое пиксельное движение и планировщик, который бережёт ресурсы. В скрытой вкладке сцена засыпает, а тем, кто предпочитает меньше движения, показывает неподвижный кадр.
• Поиск без модели. Индекс для каждого языка собирается при сборке: стемминг, исправление опечаток, поиск по началу слова и таблица русско-английских синонимов. Запрос обрабатывается примерно за 2 мс.
• Терминал. Виртуальная файловая система собирается при сборке: обо мне, навыки, контакты, резюме и папка на каждый проект с README и стеком. Редактирование строки как в shell, история, автодополнение и постраничный просмотр.
• AI-сервер. Мой собственный сервер на Node.js без зависимостей. Раз в сутки он ранжирует бесплатные модели OpenRouter по качеству, доступности и реальной скорости, а при сбоях переключается между моделями и провайдерами с автоматическими предохранителями. Ответ идёт потоком через Server-Sent Events и опирается на файл контекста, который собирается вместе с сайтом. Лимиты на посетителя и на день, ограничение размера запроса, список разрешённых источников и опциональный Turnstile защищают сервер, а текст посетителя считается данными, а не инструкциями.
• Темы и языки. Светлая и тёмная тема следуют системе, пока посетитель не выберет сам. У пиксельных иконок 16×16 своя дневная и ночная палитра. Каждый скриншот есть в четырёх вариантах, тема × язык, и меняется на лету без сдвига вёрстки, а загружается только тот, что на экране. На рабочем столе смена языка обновляет все открытые окна на месте, без перезагрузки.
• Поисковики и превью. JSON-LD (Person, ProfilePage, SoftwareApplication, BreadcrumbList), карта сайта с hreflang, llms.txt и Open Graph-картинка для каждой страницы, которая рисуется при сборке и поддерживает кириллицу. Теги релизов и свежие коммиты приходят из GitHub API при сборке с кешем на случай сбоя, поэтому ни одно меняющееся число не вписано вручную.
• Просмотр резюме. pdf.js рисует резюме прямо в окне, с выделяемым текстом и рабочими ссылками. Загружается только когда окно открыто.

Как я его делаю

Сайт это наглядный пример того, как я делаю софт с AI-агентами. Каждый раунд начинается с письменного задания. Затем несколько агентов работают параллельно: у каждого свои файлы и общие контракты, например схема имён, по которой скриншоты одного агента сразу встают в галерею другого. Я проверяю, что сделал каждый агент, смотрю сайт в headless-браузере на разных размерах, темах и языках и веду журнал всех решений. Для логики, которая может тихо сломаться, вроде ранжирования поиска, сопоставления навыков в терминале или переключения моделей на AI-сервере, есть маленькие самопроверки, которые запускаются из командной строки.

Попробуйте

Читать об этом не обязательно. На компьютере переключитесь на рабочий стол и осмотритесь: откройте пару окон, загляните в терминал, спросите что-нибудь у AI. Рабочий стол живой, и в нём больше, чем кажется.

Моя роль

Автор продукта: идея, концепция двух режимов, визуальное направление и архитектура. Код написали AI-агенты под моим руководством: я ставил задачи, делил работу, проверял её и смотрел каждый раунд в браузере.