У разработчиков есть вредная привычка создавать «швейцарские ножи», когда им на самом деле нужно просто острое лезвие. Мы тянемся к тяжеловесным фронтенд-фреймворкам еще до того, как написана первая строка HTML. Мы навешиваем библиотеки анимации, инструменты управления состоянием и конвейеры сборки, мощности которых хватило бы на управление небольшой компанией. А потом удивляемся, почему наши сайты-портфолио отрисовываются три секунды, почему навигация ломается на мобильных устройствах и почему менеджеры по найму закрывают страницу, даже не успев увидеть проекты, на создание которых мы потратили месяцы.
В своем последнем портфолио я выбрал другой путь. Я отошел от экосистемы бесконечных зависимостей и построил весь сайт на семантическом HTML и чистом CSS. Никаких JavaScript-фреймворков. Никаких этапов сборки. Никаких сторонних движков анимации. Только сама платформа, верстка с помощью CSS Grid и Flexbox и философия дизайна, в которой скорость и ясность являются ключевыми функциями, а не второстепенными мыслями.
Результат — легкий, быстрый и профессиональный. Вот именно так я к этому подошел.
Начните с фундамента
Большинство случаев избыточного проектирования начинаются с фундамента. Портфолио не обязательно должно быть одностраничным приложением. Его задача — демонстрировать вашу работу, сообщать людям, как с вами связаться, и не мешать просмотру. Я использовал семантический HTML, потому что браузер уже знает, как отрисовывать nav, article и footer. Когда вы используете правильный элемент для правильной задачи, вы фактически бесплатно получаете доступность, видимость для поисковых систем и адаптивность. Кроме того, вы пишете меньше кода. div с пятью атрибутами ARIA — это просто многословная имитация button. Я полностью избежал этого.
Для верстки CSS Grid и Flexbox более чем достаточно. Grid отвечает за макроструктуру: общие разделы страницы, галерею проектов, выравнивание основных блоков. Flexbox управляет микро-взаимодействиями: ссылками навигации внутри капсулы, центрированием текста в карточках, прижатием футера к нижней части экрана. Вместе они заменяют любую причину, по которой в 2018 году вам могло понадобиться импортировать двенадцатиколоночный фреймворк сетки. Код остается читаемым. CSS-файл остается маленьким.
Цвет, типографика и сдержанность
Я хотел, чтобы портфолио вызывало ощущение спокойствия с момента загрузки. В качестве фона используется светлая основа с тонкими радиальными градиентами. Ничего агрессивного. Градиент имеет низкую непрозрачность, создавая мягкую глубину, которая не дает странице выглядеть плоской, но и не требует излишнего внимания. Он загружается мгновенно, потому что это чистый CSS. Здесь нет тяжелых hero-изображений, которые нужно сжимать, нет необходимости настраивать WebP-запасные варианты или библиотеки ленивой загрузки на JavaScript.
Типографика передает характер. Я выбрал сочетание Outfit и Ovo. Outfit, геометрический гротеск, отвечает за весь интерфейсный текст: подписи в навигации, текст на кнопках, основной текст, метаданные. Он четко выглядит на экранах и остается читаемым при малых размерах. Ovo, шрифт с серифами средней контрастности, используется для заголовков. Это сочетание придает странице спокойный «редакционный» вид. Она выглядит спроектированной, а не просто оформленной готовой темой. Что еще важнее, оба шрифта загружаются одним запросом к сервису шрифтов или из локальных файлов. Нет никаких сдвигов макета, вспышек нестилизованного текста или подмены начертаний скриптами после начальной отрисовки.
Плавающее меню-капсула
Навигация — это то место, где портфолио часто рушится под собственным весом. Полноэкранные оверлейные меню, скрипты со ступенчатой анимацией и иконки «гамбургер», которым требуется сорок строк JavaScript, чтобы просто переключить класс. Мне все это было не нужно.
Я создал плавающее меню-капсулу в стиле глассморфизма. Это единый горизонтальный контейнер со скругленными краями, закрепленный (fixed) в верхней части экрана. Эффект глассморфизма достигается за счет полупрозрачного цвета фона и свойства backdrop-filter: blur(). Оно парит над контентом, не перекрывая его, обеспечивает мгновенный доступ к любому разделу и изящно сворачивается на маленьких экранах без необходимости полного редизайна. Эффект выглядит современно, потому что композицию выполняет браузер, а не библиотека Canvas.