zuif.ru: портфолио как стенгазета

Я долго откладывал портфолио по очень обычной причине: всегда находилось что-то важнее.

Проект, задача, доработка, сервер, бот, очередная идея. Всё это казалось реальной работой. А портфолио — чем-то вторичным, почти декоративным. Потом в какой-то момент стало понятно, что проектов уже достаточно, а цельной точки входа всё ещё нет.

Если кто-то спрашивает “что ты делал?”, не хочется собирать ответ из кусочков: вот тут бот, вот тут VPN, вот тут сайт, вот тут скриншоты, вот тут код. Нужна одна страница, которая не просто перечисляет проекты, а показывает, как я думаю.

Так появился zuif.ru.

Почему не обычная сетка карточек

Самое простое решение для портфолио разработчика — чистая сетка. Белый фон, аккуратные карточки, стек, кнопка “Подробнее”. Это работает. И именно поэтому таких сайтов очень много.

Мне хотелось, чтобы сайт запоминался не эффектом ради эффекта, а характером. Я не хотел делать лендинг с героем, где крупно написано “backend developer” и дальше идут одинаковые блоки. Мне ближе была идея живой подборки материалов: будто проекты разложены на стене, а не упакованы в шаблон.

Отсюда пришла стенгазета.

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

Дизайн быстро стал технической задачей

На картинке такая идея выглядит легко. В CSS она сразу начинает спорить.

Карточки разного размера должны складываться в понятную композицию. На широком экране это одна история, на мобильном — другая. Нужно, чтобы макет не разваливался, текст не вылезал, изображения не ломали ритм, а декоративная “живость” не превращалась в беспорядок.

CSS Grid стал главным инструментом. Не просто “разделить на колонки”, а управлять весом карточек, переносами, пропорциями и адаптивностью. Flexbox помогал внутри блоков, custom properties — держать цвет и типографику под контролем.

Я много времени провёл в DevTools, двигая один отступ на пару пикселей и пытаясь понять, почему композиция вдруг стала выглядеть хуже. Это хороший опыт: дизайн перестаёт быть абстрактным вкусом и превращается в конкретные решения.

Модалки появились из ритма чтения

Сначала можно было сделать просто отдельные страницы проектов и статей. Нажал — перешёл — прочитал — вернулся. Технически понятно.

Но для портфолио такой переход ломал ощущение просмотра. Ты смотришь на стену проектов, открываешь один материал и будто уходишь из комнаты. Потом возвращаешься и снова ищешь место, где был.

Мне хотелось оставить человека в контексте. Поэтому появились модалки: открыл проект или статью поверх текущей страницы, прочитал, закрыл и вернулся туда же.

У длинного текста в модалке есть свои проблемы: скролл, фокус, клавиатура, URL, пагинация, доступность. Это уже не “покажем div поверх страницы”. Нужно следить, чтобы пользователь мог нормально читать, закрывать, переходить между материалами и не терять состояние.

Именно на модалках я лучше почувствовал разницу между “сделать интерфейс” и “сделать поведение”. Внешне кнопка может выглядеть готовой, но настоящая работа начинается в сценариях.

Контент оказался частью архитектуры

Сайт статический, но статьи и проекты не лежат россыпью HTML-файлов. Источник — JSON. Из него генерируются JS-данные для главной страницы, отдельные SEO-страницы, sitemap и проектные страницы.

Такой подход оказался удобным. Я могу добавить статью в одном месте, запустить сборку и получить всё, что нужно: модалку на главной, отдельный URL для поисковиков, внутренние ссылки, sitemap.

Это не полноценная CMS, но для моего масштаба она решает задачу лучше, чем тяжёлый движок. Контент остаётся под контролем, сайт остаётся быстрым, а структура понятна.

Здесь zuif.ru перекликается с другими проектами. В RuVn VPN важна управляемость инфраструктуры. В Dating Bot — разделение бота, backend и Mini App. В RuVn Mod — модульность функций. Везде одна и та же мысль: система должна не просто работать, а оставаться понятной при росте.

Что сайт дал мне как разработчику

zuif.ru оказался не витриной после работы, а отдельным проектом.

Я глубже разобрался в CSS Grid, адаптивности, типографике, состоянии интерфейса, генерации контента и SEO для статических страниц. Но главное — начал лучше формулировать собственные проекты.

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

Поэтому сайт стал не только портфолио, но и инструментом мышления.

Статья про RuVn Mod родилась именно так: сначала казалось, что это просто бот с автопостингом, модерацией и магазином. Когда начал раскладывать историю, стало ясно, что главный смысл не в списке функций, а в желании убрать операционный шум из бизнеса.

Что дальше

Я не считаю zuif.ru законченным. У такого сайта нет финальной версии.

Нужно улучшать навигацию, думать о поиске, аккуратнее связывать статьи между собой, дорабатывать мобильную версию стенгазеты, добавлять новые проекты и не превращать всё в одинаковые карточки.

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

Мне нравится, что zuif.ru получился немного нестандартным. Он не пытается быть стерильным. Он показывает проекты как живые материалы: где-то техническая история, где-то продуктовый разбор, где-то личный опыт. Для моего портфолио это честнее, чем идеально ровная сетка.