Этот сайт

Почему это здесь

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

Решения

Почти без JavaScript

Сайт — это статический HTML и CSS без клиентского фреймворка. Всё наше собственное поведение — появление элементов при прокрутке, переключатель навигации, линия прогресса чтения, оглавление раздела и контактная форма — умещается в один модуль на 3.6 KB. Роутер переходов Astro и предзагрузка ссылок добавляют ещё 5.8 KB. Всё деградирует аккуратно: если ничего из этого не выполнится, любая страница всё равно останется полной, доступной для навигации и отправки формы.

У этого бюджета два осознанных следствия: система появления элементов никогда не может оставить контент скрытым (три запасных варианта, включая тайм-аут, при котором отменяется анимация, а не контент), а всё поведение живёт в одном модуле, а не в скриптах компонентов, потому что скрипт компонента выполняется только один раз при клиентском роутере.

Свои шрифты, свои изображения, свои иконки

Archivo и IBM Plex Mono размещены на своём хостинге, ограничены латиницей, предзагружаются как WOFF2 с font-display: swap и подкреплены метрически подобранным запасным шрифтом, чтобы при загрузке ничего не сдвигалось. Иконки — это SVG из Lucide, встроенные во время сборки. Фотографии обрабатываются в AVIF и WebP по пять ширин каждая. В результате сайт ничего не загружает извне — ни CDN шрифтов, ни хостинг изображений, ни куки, ничего, что нужно указывать в баннере о куки. Единственное допустимое исключение — счётчик посещений без куки, и страница о конфиденциальности называет его, когда он включён.

Токены прежде страниц

Цвет, типографика, отступы, форма и анимация определены один раз как пользовательские свойства CSS и используются повсюду. Поверхности переключаются заданием трёх переменных для секции, поэтому тёмные полосы не требуют дополнительных усилий для поддержки. На /design-system есть витрина компонентов, которая показывает каждое состояние.

Доступность как часть разработки, а не аудит

Ориентиры (landmarks) и один h1 на странице, ссылка для перехода к содержанию, видимый фокус на каждом интерактивном элементе, соблюдение prefers-reduced-motion, контраст, проверяемый по токенам, а не на глаз, и весь сайт, которым можно управлять с клавиатуры.

Единая политика изображений — везде

Каждая фотография — из общественного достояния, по лицензии CC0 или CC BY, и никогда — share-alike, потому что все они изменены. Все они выведены в монохроме, чтобы десяток источников читался как один набор, а цвет возвращается только при наведении или фокусе на ссылку, которой принадлежит изображение. Автор, лицензия и источник каждого файла опубликованы на странице /credits, сгенерированной из того же реестра, что рендерит изображения, поэтому она не может устареть.

Честная модель контента

Записи о проектах — это MDX со схемой, которая требует явного поля kind: client, internal, reference-architecture или concept. Значок, который вы видите на каждой карточке, берётся из этого поля, поэтому непроверенная запись не может незаметно выглядеть как выполненная работа для клиента.

Из чего это сделано

Astro — для статической сборки и коллекций контента, TypeScript, Tailwind CSS v4 — для слоя токенов, MDX — для развёрнутых записей, и sharp — для обработки изображений во время сборки. Разворачивается как папка статических файлов на любом хостинге.

Измерено, а не заявлено

Цифры в полосе выше измерены на продакшен-сборке этого сайта с помощью Lighthouse 12 на локальном превью, в мобильном профиле. Вес страницы — от 75 KB на текстовой странице до 250 KB на главной, которая несёт главную фотографию. Метод и необработанные результаты — в docs/05-verification.md в репозитории, так что вы можете прогнать их заново.