Как сделать сайт-портфолио: структура и проверка в 2026

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

Какой результат должен дать сайт-портфолио

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

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

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

Что подготовить до конструктора или ИИ

Сборка начинается не с шаблона. Создайте отдельную папку и подготовьте материалы в окончательном виде. Так вы не будете придумывать содержание внутри редактора и подгонять смысл под случайные блоки.

• Одно предложение о специализации и типе задач, которые вы берёте.
• От трёх до пяти работ, релевантных выбранной аудитории.
• Для каждой работы: исходная задача, ваша роль, процесс, результат и подтверждение.
• Изображения без личных данных, закрытой переписки и чужих материалов без разрешения.
• Рабочий способ связи и запасной контакт на случай сбоя формы.
• Короткая биография только из фактов, которые помогают принять решение.

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

Как оформить кейс, чтобы он доказывал навык

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

1. Назовите проект и задачу одним предложением без рекламных эпитетов.
2. Укажите ограничения: срок, формат, платформа, доступные материалы или техническая граница.
3. Опишите свою роль отдельно от результата команды.
4. Покажите два или три решения и объясните, почему они выбраны.
5. Добавьте наблюдаемый итог: работающий сценарий, ссылка, отзыв с разрешением или сравнение до и после.
6. Завершите выводом, чему кейс научил и что вы изменили бы в следующей версии.

Без подтверждённой метрики не пишите проценты и громкие результаты. Можно честно зафиксировать то, что проверяется: форма отправляет заявку, макет передан разработчику, страница опубликована, сценарий проходит тест или заказчик разрешил показать отзыв. Концепт подписывайте словом «концепт» рядом с названием.

По теме: Как сделать подписку на сайт: форма, согласие и подтверждение

Как собрать страницу по шагам

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

1. Сделайте первый экран: имя, специализация, конкретный тип задач и кнопка к кейсам или контакту.
2. Поставьте выбранные кейсы сразу после первого экрана. Самый релевантный разместите первым, а не самым свежим.
3. Добавьте блок услуг или навыков, но связывайте каждый пункт с показанным кейсом.
4. Напишите короткий блок о себе: опыт, рабочий формат, город или часовой пояс, если это влияет на сотрудничество.
5. Добавьте основной контакт и запасной способ связи. Рядом объясните, какие данные нужны в первом сообщении.
6. Сделайте отдельные заголовок страницы и описание для браузера и поисковых систем.
7. Опубликуйте черновик по закрытой ссылке, проведите проверку и только потом подключайте основной домен.

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

Как подготовить изображения и мобильную версию

Скриншоты часто становятся самым тяжёлым содержимым портфолио. Сохраняйте их в разумном размере, делайте разные варианты для экранов и проверяйте качество после сжатия. Google Search Central рекомендует обычный элемент img с адресом в src, описательные имена файлов и содержательный alt; для разных размеров можно использовать srcset, сохраняя запасной src.

Альтернативный текст зависит от назначения картинки. В руководстве W3C по изображениям информативная иллюстрация получает короткое описание существенной информации, декоративная картинка пустой alt, а изображение-ссылка описание действия или назначения. Не переписывайте в alt весь абзац и не набивайте его повторяющимися словами.

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

• Не вставляйте важный текст только внутрь изображения.
• Проверьте, что подпись относится к нужной работе и не уехала к соседнему скриншоту.
• Откройте страницу через медленное соединение и найдите изображения, которые задерживают первый экран.
• Нажмите все ссылки и кнопки большим пальцем на реальном телефоне.
• Увеличьте текст в браузере и убедитесь, что смысл и контакт не пропали.

По теме: Как сделать сайт цветов: каталог букетов и заказ

Проверка за 60 секунд и перед публикацией

Первый практический тест проводит человек, который не видел проект. Дайте ему минуту и не подсказывайте. Затем попросите назвать вашу специализацию, самый убедительный кейс и способ связи. Если ответ неверный, проблема обычно в первом экране, порядке кейсов или неясной кнопке, а не в оттенке фона.

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

1. Сверьте видимый главный заголовок с тем, что обещает первый экран.
2. Проверьте каждую работу по формуле: задача, роль, решение, результат, подтверждение.
3. Удалите кейсы, которые повторяют один навык и не добавляют доказательства.
4. Проверьте форму, почту, мессенджер и запасной контакт из приватного окна.
5. Откройте все изображения, подписи и внешние ссылки.
6. Проверьте мобильную ширину, увеличение текста и навигацию с клавиатуры.
7. Попросите другого человека пройти минутный тест и запишите только наблюдаемые ошибки.

Для поисковой выдачи сделайте ясный и уникальный title, который точно описывает страницу. Google Search Central использует для заголовка результата несколько источников, включая title, главный визуальный заголовок, h1 и og:title; противоречия между ними могут привести к другому отображению. Название профессии и имя должны совпадать по смыслу во всех этих местах.

Частые вопросы

Сколько работ добавить в портфолио?

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

Что делать, если коммерческих проектов нет?

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

Нужен ли отдельный домен?

Для первого показа достаточно стабильной ссылки без рекламы и случайного имени. Собственный домен полезен для долгой работы и личного бренда, но не исправляет слабые кейсы.

Можно ли сделать портфолио только из картинок?

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

Когда одностраничное портфолио не подходит?

Когда работ много, у каждой нужен подробный разбор, есть каталог товаров или регулярные публикации. Тогда оставьте на главной отбор работ, а кейсы вынесите на отдельные страницы.