Как создать сайт-портфолио с помощью ИИ

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

Atelier Folio — шаблон с разделами Index, Studio, Work и Writing, тёплой бумажной палитрой и тёмной темой. Он подходит фрилансеру или небольшой студии, которым нужно показать проекты и рассказать о своём подходе. На обложке статьи изображён исходный шаблон, а не готовое портфолио заказчика.

В Preview, то есть предпросмотре, сопоставьте разделы со своими материалами. В Work разместите избранные работы, в Studio — информацию о себе и услугах. Writing имеет смысл оставить, если есть статьи. Если их нет, удалите раздел вместе со ссылкой в меню. Три понятных кейса могут рассказать о вас больше, чем двадцать картинок без пояснений.

Интерфейс Mythos и страница шаблона — на английском. Тексты создаваемого сайта можно подготовить на нужном вам языке. Перед Remix или Build ознакомьтесь с текущими условиями использования.

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

Для каждого проекта нужны пять вещей:

• Задача: что требовалось клиенту или автору проекта.
• Ваша роль: что именно вы проектировали, писали, разрабатывали или снимали.
• Материалы: изображения, эскизы, скриншоты или ссылка, которые разрешено показывать.
• Решения: одна-две детали, объясняющие ваш подход.
• Результат: подтверждённый эффект либо точное описание выполненной работы.

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

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

На странице шаблона действие Remix создаёт отправную точку для адаптации. Передайте свои тексты и изображения в проект и опишите первую правку целиком: имя, избранные работы, разделы и контакт. Замените значения в квадратных скобках перед отправкой.

Адаптируй Atelier Folio под портфолио [имя или студия].
Специализация: [что делаю]. Заказчики: [для кого работаю].
Язык сайта: [язык]. Сохрани тёплый редакционный стиль,
светлую и тёмную темы.

Используй приложенные изображения и факты о проектах.
Не придумывай клиентов, отзывы, награды и показатели.
Index: кратко объясни мои услуги и покажи [список проектов].
Work: раскрой задачу, мою роль, решения и результат каждого проекта.
Studio: используй [биографию и описание услуг].
Writing: [оставь с этими статьями / убери раздел и ссылки на него].
Связь: [почта]. Резюме: [реальный файл или адрес / убрать ссылку].

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

Когда появится обновлённый Preview, сравните его с брифом. Если структура подходит, а описание кейса слишком общее, запросите конкретную правку этого текста. Несколько точных изменений проще оценить, чем новый полный дизайн после каждого запроса «сделай дороже». Подготовленный бриф также сокращает число повторных запросов к ИИ.

Откройте портфолио, отложив бриф. На первом экране должна быть понятна ваша специализация, а в каждом кейсе — ваша работа. Замените общие формулировки вроде «создаю креативные решения» конкретным описанием услуг. Заказчик не должен восстанавливать историю проекта по одним скриншотам.

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

В Atelier Folio связь начинается с почтовых ссылок, а не с сервиса отправки заявок. Укажите адрес, который вы проверяете, и оставьте его видимым текстом для копирования. Ссылка mailto обычно открывает почтовое приложение посетителя; письмо само не отправляется. Проверьте получателя и отдельно отправьте себе тестовое письмо. Ссылку-заглушку на CV замените настоящим резюме или уберите.

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

• Прочитайте самый длинный заголовок: он должен переноситься без горизонтальной прокрутки.
• Проверьте кадрирование изображений. Важный объект не должен исчезать по краям.
• Не оставляйте объяснение работы только в мелком тексте на скриншоте; добавьте его рядом.
• Пройдите меню, карточки и контактные ссылки с клавиатуры.
• Проверьте светлую и тёмную темы, подписи, логотипы и выделение активных элементов.
• Откройте резюме и внешние проекты с мобильного устройства.

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

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

Задайте заголовок страницы, который называет вас и вашу работу: например, «[Имя] — портфолио [специализация]». В описании кратко укажите реальные услуги. Проверьте изображение для публикации ссылки и язык страницы. Эти настройки описывают сайт поисковику и читателю, но не гарантируют позицию в выдаче.

Когда готовы открыть портфолио всем, используйте Publish. Затем проверьте опубликованный адрес в браузере без входа в Mythos: главная, выбранная работа, способ связи. Откройте вложенную страницу напрямую и обновите её. Убедитесь, что в публичную версию не попали закрытые клиентские материалы, демонстрационные адреса и ссылки-заглушки.

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

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