Этот сайт

У каждой страницы своя форма

Портфолио обычно рассказывает о работе словами. Здесь страница устроена как сама работа: главная это сцена с прокруткой вниз и вбок, Флоу выглядит как Obsidian, потому что тот кейс и был базой заметок, а Проекты похожи на редактор, потому что я дизайнер.

Цена такой формы: у каждой страницы свой движок. Чтобы они не срослись, страницы разделены границами. Фича не импортирует другую фичу, а общее переезжает ниже, в ui/ и lib/. Это не договорённость, а правило ESLint: импорт через границу роняет проверку.

Один компонент, четыре темы

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

Цвет вне контракта просто не соберётся: палитра Tailwind отключена. Контраст считает тест, и ради него у темы два акцента. accent это точный цвет бренда для заливок, accent-strong это вариант для текста. Белый на синем продукта даёт 3,7:1, для текста этого мало.

Тема объявлена в разметке и читается через :has(), поэтому она есть в первом HTML и страница не мигает. Кнопки \Написать на главной и [[Написать]] на Флоу это один компонент, а капсула меняет обшивку на лету, когда на главной приезжает глава другой темы. Значения ниже считаны с примера при каждом переключении.

Дизайн и код на одном экране

Первый экран это два слоя: дизайн и его чертёж с размерами и настоящими строками кода. Тест находит эти строки в исходниках, поэтому чертёж не расходится с кодом.

Слои совпадают по координатам: каждый блок чертежа стоит на месте настоящего, потому что внутри него лежит сам этот блок, скрытый, и задаёт размер. Линза только открывает второй слой через clip-path. Она достаёт и до капсулы, хотя та лежит вне первого экрана: скрипт пишет ей те же переменные в её координатах.

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

Смена страницы по косой логотипа

У каждого инструмента своя зона: наведение и фокус делает CSS, смену страницы ViewTransition, сцены на прокрутке GSAP, графы и линии canvas. Длительности и кривые живут в токенах, в коде эффекта чисел нет.

Первая смена страницы выглядела плохо. ViewTransition вокруг страницы даёт один слой на всю высоту, у главной это 34 678 px на 03.11.2026, и браузер сжимает его до экрана. Теперь снимается только экран, а новая страница приходит по линии 20,2°, наклону косой из логотипа. Шаг назад по капсуле идёт в обратную сторону.

В Firefox форма стояла в конце всего перехода: он не интерполирует зарегистрированную переменную @property на этих псевдоэлементах. Поэтому формы выписаны прямо в ключевых кадрах polygon. Снимок WebDriver этого не показывает, такой кадр берётся системным снимком окна настоящего браузера.

14 проверок, одна команда

python3 scripts/check.py идёт перед каждым коммитом, и CI запускает её же на PR. Ниже настоящий прогон от 03.11.2026: 300 модульных тестов и 257 браузерных.

Браузерные проверки идут за настоящим Caddy с образом того же digest, что на сервере: адреса, заголовки, CSP, доступность в обоих режимах, сцены при уменьшенном движении и без JavaScript. Проверка должна уметь падать: каркас проверялся намеренным импортом через границу и текстом в разметке.

Сначала решение, потом код

Всё, что дорого откатывать, записано до кода: контекст, варианты, выбор и условие пересмотра. Принятая запись не переписывается, другое решение это новая запись.

Статика выбрана не ради экономии: ресурсов на сервере хватало. Она быстрее, надёжнее и безопаснее для соседа по серверу, а анимации и так живут в браузере. Репозиторий открыт с первого коммита, потому что закрытое, попав в историю, остаётся в старых коммитах. Код под MIT, тексты и изображения под защитой, а GSAP остаётся зависимостью и в репозиторий не копируется.

Релиз это одно переключение

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

Хранятся три последних релиза, и --rollback возвращает прошлый за секунду. Ключа от сервера в GitHub нет: CI только проверяет, а выкатка идёт с ноутбука. Это осознанная плата: разработчик один, а сайт собирается заново из любого коммита.

Что ещё не готово

Сайт в работе, и это видно по плану в репозитории.