О сайте

Портфолио генерируется как полноценные документы HTML5 из небольших шаблонов и структурированного JSON. Генератор на стандартной библиотеке Python 3 заранее выпускает каждую языковую версию; браузеру не приходится собирать сайт во время выполнения.

Сайт публикуется из ветки main через GitHub Pages. За портфолио не стоят CMS, прикладной фреймворк, база данных или серверное приложение.

в браузере

HTML5 · CSS · обычный JavaScript

сборка

Python 3 · JSON · HTML-шаблоны

хостинг

GitHub Pages

Английская, традиционная китайская (Гонконг), упрощённая китайская, японская, немецкая, французская и русская версии генерируются как отдельные статические издания с каноническими URL и hreflang-ссылками и метаданными для каждой языковой версии.

Для литературных текстов действуют более строгие правила, чем для обычного интерфейсного текста. Там, где это задано, каноничен традиционный китайский; упрощённые литературные зеркала меняют только письменность и проверяются по хешу источника, а отдельные тесты проверяют структуру строк и строф переводов.

локали

en-GB · zh-Hant-HK · zh-Hans · ja · de · fr · ru

литературные тексты

OpenCC · хеши исходников · проверка структуры строк

метаданные

canonical · hreflang · Open Graph

Вёрстка использует CSS Grid, subgrid, container queries, logical properties, custom properties и плавные размеры через clamp(). Media queries остаются консервативным запасным вариантом; при поддержке container queries модуль перестраивается по собственной доступной ширине.

Шрифты размещены локально в WOFF2. Основной латинский текст набран преимущественно EB Garamond, метаданные — Courier Prime и Cousine, традиционный китайский и японский — Shippori Mincho, упрощённый китайский — Noto Serif SC; редкие отсутствующие гонконгские глифы дополняет крошечный subset I.Ming. CJK-подмножества пересобираются с fontTools и Brotli; источник Noto закреплён по commit и SHA-256.

вёрстка

Grid · subgrid · контейнерные запросы · логические свойства

шрифты

EB Garamond · Courier Prime · Cousine · Shippori Mincho · Noto Serif SC · I.Ming

цветовая схема

светлая/тёмная · prefers-color-scheme

Используются семантические области, один главный заголовок, ссылки для пропуска блоков и заметный клавиатурный фокус, полные названия языков и надёжные размеры сенсорных целей. Учитываются системные настройки reduced motion, повышенного контраста и forced colours.

Постоянная панель чтения позволяет включить шрифт без засечек, увеличить текст и интервалы, сузить строки, упростить раскладку, уменьшить движение и повысить контраст. Это прогрессивные улучшения; настройки сохраняются только локально в браузере.

настройки чтения

без засечек · крупный текст · интервалы · ширина строки · простой макет · движение · контраст

хранение

только localStorage

проверки

собственный структурный аудит · браузерный аудит axe-core

Фотографии и исследовательские иллюстрации используют picture/srcset с вариантами WebP и JPEG, явно заданными размерами и атрибутом sizes. Главное изображение получает приоритет; медиа ниже по странице загружаются отложенно и декодируются асинхронно.

Нижние разделы могут использовать content-visibility. View Transitions и scroll-linked motion остаются необязательными прогрессивными улучшениями; при reduced motion анимация отключается.

изображения

picture · srcset · WebP · JPEG

загрузка

явные размеры · отложенная загрузка · асинхронное декодирование

прогрессивный CSS

content-visibility · View Transitions · временные шкалы прокрутки

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

Браузерная проверка добавляет геометрические тесты для разных языков и при разных ширинах окна, аудиты axe-core и проверку HTML. В GitHub Actions при push и pull request сначала выполняются лёгкие проверки, а после них браузерный набор; GitHub Pages независимо публикует те же статические файлы из main.

проверки репозитория

сборка · языки · доступность · ссылки/ресурсы · синтаксис JS

проверки в браузере

Playwright · axe-core · html-validate

доставка

GitHub Actions · GitHub Pages