Перейти к содержимому
ODIN337

Работы

2026

odin337.ru — сайт студии

Кейс, который вы сейчас читаете внутри самого кейса. Всё, что здесь написано, проверяется в ваших devtools за минуту — на это он и рассчитан.

Открыть сайт

Роль

  • Архитектура
  • Дизайн-система
  • Разработка
  • Инфраструктура
  • SEO

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • three.js
  • Docker

Факты

  • Шрифты

    3 файла woff2, 138 756 байт (135,5 КиБ)

    Как проверить: Devtools → Network → фильтр Font. Три файла, все с этого домена, ни одного запроса к fonts.googleapis.com.

  • Серверный код страниц

    Ни одного API-роута, ни одной server action

    Как проверить: Откройте исходный код страницы: разметка приходит целиком в HTML, а не досоздаётся на клиенте.

  • Google Analytics

    Отсутствует

    Как проверить: Заголовок Content-Security-Policy в ответе сервера: ни одного домена Google в script-src и connect-src. Браузер не выполнит то, чего там нет.

  • Cookies до согласия

    Одна функциональная — выбранный язык

    Как проверить: Devtools → Application → Cookies при первом заходе. Единственная запись — langPinned; сторонних cookie нет.

  • Куда уходят данные форм

    На собственный сервер в Москве

    Как проверить: Директива connect-src в CSP — это полный список адресов, куда странице вообще разрешено обращаться.

  • Тиры рендера

    4 — от статичного постера до WebGL с постобработкой

    Как проверить: Devtools → Rendering → Emulate prefers-reduced-motion. Тяжёлый слой не просто остановится — он не будет загружен.

Страницы собираются заранее

Ни одна страница сайта не собирается в момент запроса: весь HTML готов на этапе сборки, в проекте нет ни одного API-роута и ни одной server action. Единственный код, выполняющийся на стороне хостинга, — обработчик, который запоминает явно выбранный язык, и он намеренно не читает ни тело запроса, ни геолокацию. Прошлая версия сайта редиректила «/» на «/en» по стране из IP-адреса: это оплачивало вызов на каждом холодном заходе, делало главную некэшируемой и выводило признак посетителя из его IP. Сейчас язык — только явное действие.

Три шрифта, ни одного стороннего запроса

Шрифты не подключены с Google Fonts, а собраны своим скриптом: у каждого семейства сужена ось насыщенности до используемого диапазона и вырезан набор символов до того, что действительно рендерится. Причина в первую очередь не в весе, а в том, что fonts.googleapis.com получал бы IP-адрес посетителя на каждом просмотре страницы. Побочный эффект приятный: один самодоменный woff2 на семейство с бессрочным кэшем вместо кросс-доменного CSS-запроса и непредсказуемого числа фрагментов после него.

Тяжёлая графика не грузится туда, где не потянет

У главной сцены четыре реализации, и выбор между ними происходит до создания WebGL-контекста, а не после. Порядок проверок — это контракт: настройка доступности важнее сетевой подсказки, сетевая подсказка важнее проверки возможностей, и только потом эвристика по железу. Поэтому включённый prefers-reduced-motion отправляет в статичный постер даже мощный десктоп, а Save-Data уважается раньше, чем считается число ядер. Сервер всегда отдаёт нулевой тир, так что первый экран никогда не бывает пустым, пока грузится JavaScript.

Персональные данные не покидают РФ

Данные из форм уходят на собственный сервер в России и в базу в РФ, а не в инфраструктуру хостинга. Это требование ст. 18 ч. 5 152-ФЗ: первичная запись персональных данных граждан РФ должна происходить в базе на территории России. Отсюда же архитектурное следствие — на маркетинговом сайте нет ни одного эндпоинта, который мог бы принять форму, потому что эндпоинт, физически способный записать данные не туда, рано или поздно это сделает.

Аналитика — только с согласия и только одна

Google Analytics удалён и не может вернуться: он передаёт персональные данные за пределы РФ, что ст. 18 ч. 5 152-ФЗ запрещает для данных российских граждан. Единственная допустимая аналитика — Яндекс Метрика, и она загружается только после явного согласия, а не «по умолчанию, пока не отказались». До согласия ставится ровно одна первая cookie — выбранный язык; это функциональная запись действия самого посетителя, а не идентификатор для отслеживания. Список разрешённых источников закреплён в CSP, поэтому сторонний скрипт нельзя добавить незаметно: он просто не выполнится.

  • Производительность
  • WebGL
  • 152-ФЗ
  • Доступность
Обсудить задачуВсе работы