Портфолио как редакционная страница: характер без сложной навигации
Крупная типографика, асимметрия, CSS-объект и спокойные страницы для чтения: разбор визуального языка этого сайта.
Портфолио разработчика должно быстро отвечать на несколько вопросов: кто передо мной, что он делает и где посмотреть его работы. Но это ещё и возможность показать собственное отношение к интерфейсам.
В этом сайте выразительность строится не на необычных способах навигации. Проекты остаются проектами, блог — блогом, а контактная ссылка ведёт к форме. Характер появляется в композиции: крупном тексте, неравных колонках, свободном пространстве и небольшом интерактивном объекте на главной.
Главная работает как редакционная полоса
Первый экран сочетает крупный заголовок и самостоятельную визуальную композицию. На широком экране колонки немного отличаются по ширине: текст получает больше пространства, но графика не превращается в фоновую декорацию за буквами.
Дальше ритм меняется. Избранный проект получает большую обложку и отдельный текстовый блок. Заметки представлены строками с датой и заголовком. Завершает страницу крупное приглашение связаться.
Эти разделы не пытаются выглядеть одинаково. Проект удобнее сначала увидеть, статью — выбрать по теме, а контактное действие — заметить без поисков. При этом нумерация секций и тонкие разделительные линии связывают их в одну страницу.
Такой подход можно назвать редакционным: визуальный вес зависит от роли материала, а не только от единого размера карточки.
Типографика задаёт масштаб
В hero используется крупный заголовок с плотным межстрочным интервалом и отрицательным межбуквенным расстоянием. Размер меняется через clamp(): растёт вместе с экраном, но остаётся в заданных пределах.
Сервисные подписи оформлены иначе: моноширинный шрифт, небольшой размер, увеличенный трекинг. Этот контраст отделяет основные мысли от номеров секций, дат и технологий.
Но приёмы первого экрана не переносятся механически на статьи. Для текста задана ширина до 72ch и межстрочный интервал 1,75. Заголовок привлекает внимание, а длинный материал должен позволять спокойно читать абзац за абзацем.
Здесь же проходит граница эксперимента. Очень плотный заголовок требует проверки длинных слов и переводов. Мелкие подписи не должны становиться единственным носителем важной информации. Выразительность не освобождает от этих ограничений.
Объём без WebGL
Объект на главной выглядит объёмным, но реализован обычными HTML-элементами и CSS. Сфера собирается из градиентов, света и теней; орбиты и слои используют perspective и пространственные transform.
При движении указателя компонент меняет CSS-переменные наклона и положения блика. Геометрия области запоминается при входе указателя, а не считывается заново на каждом движении. Для самой реакции не требуется обновлять React state: новые значения записываются в стиль корневого элемента.
Это локальный эффект с понятной задачей — добавить ощущение живого интерфейса. Он не управляет переходами и не скрывает контент. Если посетитель не взаимодействует с объектом, сценарий просмотра сайта остаётся тем же.
Декорация исключена из дерева доступности через aria-hidden. При prefers-reduced-motion отключаются анимации появления и наклон сцены. Это не заявление, что на сайте вообще нет движения, а конкретное ограничение самого заметного эффекта.
Цвета меняют роли, а не только яркость
Основа сайта нейтральная: светлые или почти чёрные поверхности, тонкие границы, спокойный основной текст. Цвет концентрируется в акцентах, заголовках и главном визуальном объекте.
Тёмная тема не получается простым инвертированием. У неё отдельно заданы поверхности, текст и цвета действий. Например, основная кнопка меняется с насыщенного индиго на светлый лавандовый оттенок, а текст на ней становится тёмным.
В коде эти решения оформлены семантическими токенами: фон, поверхность, приглушённый текст, основное действие. Компонент обращается к роли цвета, а не хранит собственную копию палитры. Благодаря этому корректировка контраста не требует искать одинаковые значения по всем страницам.
Градиенты при этом остаются акцентом. Обычный текст статьи не должен зависеть от сложного фона, чтобы выглядеть интересно.
На телефоне меняется композиция
Адаптация здесь не сводится к уменьшению десктопной страницы. Колонки складываются в вертикальную последовательность, действия переносятся, а строки заметок перестраиваются. Дополнительная стрелка у статьи на узком экране скрывается, но ссылка в заголовке остаётся.
Важны и менее заметные ограничения: minmax(0, …) в сетках, min-width: 0 у текстовых блоков, перенос длинного контента. Именно такие детали помогают реальным заголовкам и тегам не растягивать страницу шире экрана.
У интерактивных элементов предусмотрены состояния клавиатурного фокуса. Внешний вид может быть нестандартным, но посетителю не должно приходиться угадывать, где находится фокус и что можно открыть.
Где эксперимент стоит остановить
У такого дизайна есть цена. Крупная типографика чувствительна к длине текста. Асимметрия требует отдельных решений для маленького экрана. Декоративные эффекты нужно проверять вместе с настройками движения и темами.
Поэтому самые выразительные решения сосредоточены на главной. Страницы проектов, статьи и формы сохраняют более спокойную структуру. Это не отказ от визуального языка, а распределение внимания: сначала сайт знакомит с автором, затем помогает изучить конкретную работу или написать сообщение.
Нестандартность этого портфолио — в подаче, а не в необходимости заново учиться пользоваться сайтом. Хороший критерий для следующих изменений тот же: добавляет ли приём характер, сохраняя понятными текст, действие и путь к результату?