Задача
Мне нужна была страница, которая рассказывает обо мне не списком технологий, а по порядку: от первого сервера в 13 лет до того, чем занимаюсь сейчас. Одна лента, пять глав, без переходов между страницами.
Хотелось, чтобы человек не просто читал, а участвовал: в тех главах, где действие подкрепляет рассказ, посетитель может что-то сделать сам. И чтобы страница выглядела как печатный зин, а не как очередной лендинг.
Что сделано
Собрал пять глав одной лентой с прокруткой: история читается непрерывно, от первого сервера до финала, без переходов и перезагрузок.
Задал газетную эстетику: кремовая бумага с зерном, плотный сжатый гротеск, чёрный текст с алым акцентом, моноширинные подписи и фотографии в полутоновой печати.
В главу про первый сервер встроил рабочую консоль: посетитель нажимает кнопку, статус меняется с OFFLINE, и рассказ про конфиги подкрепляется действием.
Банковский этап подал не абзацем, а карточкой из архива — должность, инструменты, особые навыки и штамп «переведён в веб».
Для главы про фриланс сделал торт: свечи гаснут от курсора по одной или все сразу, счётчик доходит до 23, рядом — форма регистрации как на бирже.
Интерактив добавлял только там, где он объясняет этап, а не ради украшения: в главах про банк и про сегодняшнюю работу его нет, там важнее факты и цифры.
Финал свёл к имени и четырём адресам, где меня найти, чтобы после прочтения был понятный следующий шаг.
Проверил ленту на узких экранах: порядок глав, типографика и все действия работают на телефоне так же, как на компьютере.
Результат
Получилась страница примерно на десять экранов, которую читают, а не просматривают: посетитель сам поднимает сервер, задувает свечи и гладит пса, и за этими мелочами видно, как я делаю интерфейсы.
Это одновременно рассказ о себе и наглядный пример работы — от структуры и типографики до интерактивных состояний и адаптива.
Открыть rosliakov.ru