В основе моего сайта — монета с моим профилем. В этом образе сошлись моя любовь к римской эстетике и идея личного знака: портрет в профиль, круглая форма, рельеф.
Эту монету я использую как аватарку в социальных сетях и в своём личном Telegram-канале «ЗамыселЪ Глеба Киренкова».
Создавая сайт, я хотел сохранить монету и собрать вокруг неё разные стороны своей практики. Мы меняли композицию, материал и механику, сохраняя этот образ. Дальше — путь от знакомой аватарки к объёмному предмету, навигации и ритуалам.
Один предмет. Несколько направлений.
01 / Архив
Форма появляется через версии
Монета оставалась отправной точкой во всех версиях. Менялось то, как она входила в экран: левитировала, занимала центр большого барельефа, уступала место морфирующим плашкам и возвращалась как предмет с круговым меню. Здесь можно пройти эти версии и попробовать их механику.
Первая версия
Монета слегка левитирует над именем. Это первая версия сайта из архива: исходная композиция, движение и реакция на курсор, а не иллюстрация экрана.
Круглый барельеф и монета
Вторая версия: большой барельеф объединяет разные стороны моей практики. Круг вращается, а монета остаётся в центре. Здесь повторена архивная анимация страницы «Об авторе»: исходные изображения и оборот за 38 секунд.
Третья версия с барельефами
Одна история, две композиции. Десктоп и мобильная версия показаны рядом: в широком экране главы собраны в горизонтальный ряд, на телефоне текст и барельефные плашки морфят при прокрутке. Это архивные версии с исходной механикой. Прокрути внутри каждого экрана, чтобы пройти переходы.
Кольцо становится меню
Кольцо связывает разделы, а выбранное название приходит в нижнюю точку. Здесь показана работающая механика нынешней версии сайта: десктоп и телефон рядом. Выбери раздел в любом экране — монета, текст и действие изменятся вместе.
Архив Claude и Codex. Порядок здесь — сценарий рассказа; точные даты и причины переходов между версиями ещё уточняются.
02 / Материя
Изображение получает объём
Профиль и монограмма получают толщину, рельеф и торец. Отключи текстуры, чтобы увидеть геометрию. Верни серебро, чтобы сравнить, как материал и свет меняют её восприятие.
01 / PNG + PBR
Сначала — изображение и карты
Первая монета собиралась из PNG-сторон на плоских поверхностях и простого цилиндрического торца. Normal map меняла реакцию света и создавала ощущение рельефа. Металличность и шероховатость задавались материалом. В архиве сохранились также карты глубины, roughness и AO; наличие карты ещё не означает, что она использовалась в каждой версии рендера.
02 / BLENDER + GLB
Затем — рельеф в геометрии
Позже мы построили объёмную модель в Blender и экспортировали GLB. Теперь выступы и углубления принадлежат самой форме: их можно рассмотреть под углом и без текстур. Карты материала продолжают уточнять поверхность, а толщина и насечки торца становятся частью предмета.
Albedo / PNGИзображение поверхностиNormalНаправление отражения светаRoughnessКарта шероховатости из архиваDepthКарта глубины из архива
01
Исходное изображение
02
Рельеф
03
Геометрия / GLB
04
Материал и свет
05
Движение в браузере
Модель построена по исходным изображениям. Крупные формы задают объём, карты поверхности уточняют детали. Свет в исходном рисунке не всегда можно отделить от формы: это авторская интерпретация, а не скан физической монеты.
В этом просмотрщике — сохранённый веб-экспорт: 93 772 треугольника и 120 насечек торца. Вращение и полуоборот вычисляются в браузере. Это экранная модель, не производственный чертёж.
03 / Устройство
Выбор меняет предмет и содержание
Кольцо связывает восемь разделов. При выборе меняются рельеф, пояснение и следующий шаг. На телефоне всё собирается вокруг центра; на большом экране раскрывается в три поля.
Следующий 3D-рельеф готовится на скрытой стороне. Один полуоборот — один переход.
Монету с рельефом «Кодекса» я использую и как аватарку Telegram-канала «МетодЪ». На сайте она обозначает цифровые продукты; в канале этот образ сопровождает журнал моей цифровой практики: от замысла и структуры до интерфейса, кода и запуска.
Ритуалы позволяют задержаться в действии. Разжечь огонь, доверить выбор случаю, восстановить целое из фрагментов. Каждый опыт продолжает язык сайта своей механикой.
Это живые сцены из ритуалов, не видеозаписи. Они повторяются без звука. Ниже можно перейти от наблюдения к игре.
Огонь
Угли → пламя → изменение жара
Как играть
Я оставил здесь один жест: разжечь огонь. Затем можно усилить жар, убавить его или снова оставить угли. Вместо счёта и победы — наблюдение за тем, как действие меняет состояние. Звук включается отдельно.
Как сделано
Жаровня — изображение, а не объёмная модель. Поверх него Three.js рисует пламя: шейдер рассчитывает шум, свечение и поглощение света по глубине, добавляет искры и свет от углей. Жар меняется плавно; тёплый отсвет связывает огонь с основанием. Потрескивание создаётся в Web Audio из шума и коротких импульсов.
Нажатие, свайп вверх или клавиша подбрасывают монету. Сила свайпа влияет на высоту. После касания появляется один из девяти рельефов, короткое прочтение и переход к разделу сайта. Это не прогноз: случайный ответ даёт повод взглянуть на вопрос с другой стороны.
Как сделано
Я использовал ту же GLB-монету, что и в навигации: объёмный рельеф, торец и серебряный материал. Полёт вычисляется в браузере — подъём по параболе, обороты, затем затухающие отскоки и покачивание. Это заданная кинематика, не физический движок. Результат выбирается случайно; во время полёта рельефы сменяются, перед приземлением остаётся выбранный.
Четыре барельефа «МетодЪ» превращаются в пятнашки: сетка 4 × 4, пятнадцать частей и одно пустое место. Двигать можно только соседнюю часть. Есть подсказка с целым изображением, номера, отмена хода и управление стрелками. Когда порядок восстановлен, швы исчезают и возвращается цельный барельеф.
Как сделано
Canvas 2D вырезает части из исходного изображения чугуна и плавно сдвигает их в пустую ячейку. Для игры я перемешиваю поле 44 допустимыми ходами из собранного состояния — поэтому оно всегда решаемо. Здесь показан другой, короткий цикл: записанные 14 ходов идут в обратном порядке. Это демонстрация сборки, не автоматический решатель.
Демонстрации используют существующие ритуалы сайта. В «Целом» перемешивание допустимыми ходами сохраняет решаемость; таймера и соревновательного счёта нет.
05 / Инфраструктура
Доступность — часть продукта
После первого релиза я столкнулся с простой проблемой: сайт открывался через VPN, а без него оставался в бесконечной загрузке. Это происходило на моём телефоне через МТС и Wi-Fi. Мы перенесли размещение с Cloudflare Pages на Beget, сохранив домен, содержание и адреса страниц.
Когда ссылка есть, а доступа нет
Посетитель приходит по прямой ссылке или из поиска. До монеты, текста и навигации браузер должен получить страницу и её ресурсы. Если этот путь прерывается, вся работа над интерфейсом остаётся недоступной. Я включил проверку обычного подключения в проверку самого продукта.
Что показало сравнение с VPN
VPN меняет сетевой маршрут через промежуточный сервер. В моём случае этого хватало, чтобы сайт открылся. Разница стала признаком проблемы доступа, но точную причину мы не установили. Для решения я выбрал размещение, которое удалось открыть в тех же условиях без дополнительного подключения.
Схема переезда
Один домен. Разные пути к странице.
Выбери состояние, чтобы сравнить путь запроса. Схема объясняет наш опыт переезда; это не проверка доступности сайта в реальном времени.
01 / Узнать адрес
Cloudflare DNS
Для c-b-gk.com сообщает адрес Beget. Записи работают в режиме DNS only.
DNS остался на Cloudflare. В режиме DNS only содержимое страницы идёт напрямую с хостинга, минуя прокси Cloudflare.
02 / Получить страницу по HTTPSПодтверждено автором: с VPN и без него
Посетитель
c-b-gk.com
Прямая ссылка или результат поиска
Подключение
МТС / Wi-Fi
Сети, в которых я проверял сайт
Размещение
Beget
Прямое HTTPS-соединение с хостингом
Браузер
Страница открыта
Текст, изображения и 3D-монета
После переезда браузер получает страницу с Beget. Cloudflare сохраняет роль DNS-сервиса, а прежний релиз Pages — возможность отката.
Ход переноса
Меняем размещение, сохраняем сайт
01
Сохранить точку возврата
Прежний релиз Cloudflare Pages оставили доступным для отката. Домен c-b-gk.com сохранили: посетителю не нужен новый адрес.
02
Перенести сборку и маршруты
На Beget разместили статическую сборку: HTML, стили, скрипты, изображения и GLB-модели. Для Apache настроили правила адресов страниц и ответа 404; служебные файлы Cloudflare Worker в пакет не включали.
03
Связать домен и HTTPS
Подключили сертификат для основного домена и www. При настройке выяснилось, что Beget использовал отдельный IP-адрес для HTTPS. Его уточнили у поддержки и указали в A-записях. Убрали мешавшие выпуску сертификата AAAA-записи.
04
Проверить обычный вход
После переключения я подтвердил, что сайт открывается с VPN и без него. Сохранились русская и английская версии. Результат относится к проверенным подключениям; доступ из других сетей требует отдельной проверки.
Поиск
Ссылка из Яндекса ведёт на тот же домен
Я сохранил адреса страниц, чтобы опубликованные ссылки продолжали вести к материалам. Доступ посетителя и доступ поискового робота проверяются отдельно. Индексацию следует оценивать по ответу сервера и данным Вебмастера: успешное открытие на моём телефоне подтверждает только эту проверку.
Переезд меняет сервер, сохраняя содержание и языки сайта. Для зарубежного посетителя точкой входа остаётся c-b-gk.com. Скорость и доступность зависят от его сети и маршрута до хостинга; проверки из всех стран у нас нет. Это отдельная задача контроля, а не обещание в описании продукта.
Что я вынес из этого этапа
Размещение, домен, HTTPS и публикация входят в устройство продукта наравне с интерфейсом. Теперь я рассматриваю релиз как полный путь: собрать сайт, открыть его по обычной ссылке, проверить материалы и сохранить возможность вернуться к предыдущей версии.
Схема составлена по нашему переезду и моим проверкам. Различие DNS и прокси сверено с документацией Cloudflare. Cloudflare: DNS only / Proxied
06 / Продолжение
Продукт продолжается после первого релиза
Рельеф должен читаться на небольшом экране. Движение — объяснять переход. Текст — оставлять место действию. Публикация — сохранять уже выпущенное. В собственном сайте я могу пройти весь этот путь и оставить его видимым.
