Собираем страницу портфолио
Портфолио связывает короткое резюме с подробными доказательствами. Не обязательно начинать с большого персонального сайта: достаточно страницы, на которой видно вашу роль, выбранный проект и способ связи. Спроектируем содержание такой страницы для Анны.
У неё уже есть кейс «Учебной библиотеки» и понятный репозиторий. Теперь посетитель должен переходить между материалами без догадок.
Первый экран и выбранная работа
На первом экране разместим имя, целевую роль и короткое описание уровня. Ниже — карточку проекта с задачей и личным действием. Кнопки должны называть назначения: «Описание проекта», «Демонстрация», «Код». Три одинаковых слова «Смотреть» затрудняют выбор.
Содержание карточки можно записать так:
«Учебная библиотека». Самостоятельный учебный каталог. Реализовала фильтр по названию и состояние без результатов. В кейсе описаны решение, сценарии и ограничения. Доступны демонстрация и репозиторий.
Это тот же факт, который фигурирует в резюме. Не превращайте портфолио в другую биографию. Если проект выполнен по заданию или использует чужой макет, происхождение должно быть понятно на странице кейса.
Выбор работ зависит от роли. Разработчику полезны код и объяснение поведения, дизайнеру — сценарий и прототип, QA — воспроизводимая проверка, SEO-специалисту — диагностика с источниками данных. Не заставляйте человека искать доказательство выбранной роли в случайном наборе файлов.
Маршрут посетителя
Нарисуйте простую схему: резюме → карточка → кейс → демонстрация или код → контакт. Для каждого перехода проверьте адрес и понятность названия. Пользователь должен иметь возможность вернуться к портфолио из кейса.
Если демонстрация временно недоступна, сообщите это рядом со ссылкой и предложите доступный материал. Скриншот может показать внешний вид, но не подтверждает работоспособность фильтра. Подписывайте изображения так, чтобы эта граница сохранялась.
Не добавляйте обязательную регистрацию только для чтения кейса, если в ней нет необходимости. Чем больше шагов требуется для просмотра, тем труднее человеку оценить работу в ограниченное время. При этом закрытые исходники нельзя раскрывать ради сокращения пути.
Читаемость и контакт
Проверьте страницу на узком экране, размер текста и видимость ссылок. Изображение резюме без текстовой версии мешает чтению и копированию сведений. Содержимое должно сохранять смысл даже без декоративной анимации.
Разместите один понятный профессиональный контакт. Не публикуйте домашний адрес и чужие телефоны. Форма обратной связи необязательна; если она есть, объясните результат отправки и проверьте, что сообщения действительно доходят.
Добавьте дату обновления кейса, когда она помогает понять состояние проекта. Это особенно полезно, если демонстрация и описание развиваются. Не пишите «активно поддерживается», если вы давно не проверяли доступность.
Попросите человека выполнить три действия: назвать вашу целевую роль, найти личный вклад и открыть нужный материал. Если он успешно проходит маршрут, страница уже решает основную задачу. Улучшать внешний вид можно после этого; новый эффект не должен скрывать содержание или увеличивать неопределённость.