Як створити сайт-портфоліо, який приносить роботу

Щоб створити сайт-портфоліо, який приносить роботу, оберіть чотири-вісім найкращих проєктів для аудиторії, яку хочете охопити, подайте кожен як коротку історію — проблема, що ви зробили, результат — і зробіть зв’язок із вами легким з кожної сторінки. Тримайте сайт швидким, особливо якщо він насичений зображеннями, і розмістіть його на домені з вашим іменем. Інструмент важить менше, ніж добір робіт і тексти.

Почніть з того, хто дивиться

Портфоліо — це продаючі сторінка, де продуктом є ваші роботи. Перш ніж обирати макет, вирішіть, хто має вас найняти і що йому потрібно побачити:

Якщо ви працюєте з двома дуже різними аудиторіями — скажімо, ролі дизайнера продукту та фріланс-ілюстрація — розгляньте окремі розділи або навіть окремі сайти, щоб жодна аудиторія не мусила шукати.

Що включити

Роботи

Обирайте менше, але кращих проєктів. Приберіть усе, що ви б не хотіли робити знову за наймом. Поставте найсильнішу і найрелевантнішу роботу першою; багато відвідувачів не прокручують далі першого ряду.

Для дизайнерів і розробників найкращі проєкти стають кейсами. Корисна структура:

1. Проблема — одне-два речення про ситуацію і про те, кого вона торкнулася.
2. Ваша роль — що ви зробили, а що інші. Будьте точними; перебільшення легко помітити на співбесіді.
3. Процес — кілька ключових рішень з ескізами, вайрфреймами або фрагментами коду.
4. Результат — що було випущено і будь-який результат, який ви можете чесно назвати. Якщо не можете поділитися цифрами, опишіть зміну якісно.

Для фотографів та ілюстраторів роботу виконують самі зображення. Згрупуйте їх у чіткі набори (весілля, продукт, редакційні), тримайте підписи короткими і дайте сітці дихати.

Про мене та контакти

Розділ «Про мене» має розповісти, хто ви, чим займаєтеся, для кого це робите і де базуєтеся або чи працюєте віддалено. Справжнє фото допомагає. Шлях для зв’язку має бути очевидним з кожної сторінки: коротка форма, адреса електронної пошти або посилання, щоб забронювати дзвінок. Якщо ви приймаєте бронювання, вкажіть як.

Необов’язкові сторінки

• Послуги та тарифи — корисно фрилансерам, якщо хочете відсіювати запити, що не підходять.
• CV або резюме — корисно тим, хто шукає роботу; поширений варіант — PDF для завантаження плюс версія на сторінці.
• Тексти або нотатки — варто, лише якщо ви будете їх оновлювати. Покинутий блог багаторічної давності шкодить більше, ніж його відсутність.
• Відгуки — лише справжні, з дозволу.

Рішення та компроміси

Статичний сайт чи застосунок? Більшість портфоліо — прості сайти з контентом і не потребують бази даних. Додавайте її лише з причиною: форма зв’язку, яка зберігає запити, галерея, яку ви часто оновлюєте через адмін-сторінку, або перевірка фото клієнтами, де люди обирають світлини.

Де зберігаються зображення. Великі зображення — головна причина повільних портфоліо. Змінюйте розмір і стискайте перед завантаженням, віддавайте сучасні формати та відкладайте завантаження зображень, поки відвідувач прокручує сторінку. Для великої або часто оновлюваної галереї зберігайте зображення у належному файловому сховищі, а не вбудовуйте їх у код сайту.

Як ви його оновлюватимете. Будьте чесними з собою. Якщо ви додаєте роботи щомісяця, потрібен простий спосіб це робити — проста адмін-сторінка, CMS або конструктор, у якому вам зручно редагувати. Якщо оновлюєте двічі на рік, редагувати сайт безпосередньо — нормально.

Видимість у пошуку. Якщо ви хочете, щоб люди знаходили вас за пошуком вашого імені разом із фахом і містом, сторінка потребує справжнього тексту, правильних заголовків, унікальних заголовків і описів сторінок та описових альт-текстів для зображень. Див. SEO для сайтів, створених ШІ.

Перший промпт для ШІ-конструктора

Добрий промпт називає аудиторію, сторінки, роботи та стиль:

Створи сайт-портфоліо для Лени Пак, дизайнерки продуктів, яка шукає старші штатні ролі в SaaS-компаніях. Сторінки: Головна з коротким знайомством і сіткою з 5 кейсів; шаблон сторінки кейсу з розділами для проблеми, моєї ролі, процесу (з галереєю зображень) і результату; Про мене з фото, коротким біо і завантаженням CV; Контакти з простою формою (ім’я, електронна пошта, повідомлення), яка зберігає дані в базі даних і показує повідомлення з подякою. Стиль: спокійний і мінімалістичний, багато білого простору, один акцентний колір, великий читабельний шрифт. Добре працює на телефонах. Використай чітко позначені заглушки проєктів, які я зможу замінити по одній.

Потім замінюйте заглушки по одному проєкту, а не вставляйте весь свій контент в одне повідомлення. Так легше перевіряти, і ШІ правильно виконує кожну сторінку.

Докладніше про шаблони промптів — у статті як писати промпти для ШІ-конструкторів застосунків.

Кроки побудови

1. Оберіть аудиторію і проєкти перед тим, як торкатися будь-якого інструмента.
2. Напишіть текст для кожного кейсу спочатку в документі: проблема, роль, процес, результат.
3. Підготуйте зображення — обріжте, змініть розмір і стисніть їх. Давайте файлам зрозумілі назви.
4. Згенеруйте або оберіть стартовий макет. Перегляд шаблонів портфоліо — швидкий спосіб побачити, який стиль підходить вашій роботі.
5. Спочатку створіть головну і один кейс, доведіть їх до ладу, а потім повторіть цей шаблон.
6. Додайте «Про мене» і контакти. Перевірте форму зв’язку від початку до кінця.
7. Перевірте на телефоні. Портфоліо часто ламаються на малих екранах: тісні сітки, величезні зображення, дрібні підписи.
8. Додайте основи SEO і зображення для поширення, щоб посилання виглядали добре, коли ви їх надсилаєте.
9. Опублікуйте та підключіть домен. Див. як підключити власний домен.
10. Попросіть двох людей з вашої цільової аудиторії подивитися на сайт протягом тридцяти секунд і сказати, чим ви займаєтеся. Якщо не можуть, виправте головну сторінку.

Типові помилки

• Показувати все. Слабкі проєкти розводять сильні. Відбирайте.
• Зображення без контексту. Для дизайну і розробки скриншот без проблеми та вашої ролі мало що говорить керівникові з найму.
• Повільні, важкі сторінки. Нестиснені зображення повного розміру роблять сайт нерозбірливим на мобільному інтернеті.
• Химерна навігація. Незвичні меню та ефекти прокручування можуть бути цікавими, але не тоді, коли відвідувачі не можуть знайти ваші роботи або електронну пошту.
• Приховані контакти. Розмістіть посилання на контакти в шапці та футері кожної сторінки.
• Використання робіт клієнтів без дозволу на показ. Перевіряйте контракти та NDA; за потреби анонімізуйте або опишіть проєкт.
• Ніколи не оновлювати. Застарілі роботи та «останній проєкт» багаторічної давності подають неправильний сигнал.

Витрати

Поточні витрати особистого портфоліо зазвичай невеликі: доменне ім’я, яке продовжується щороку, і хостинг. Сайти з великою кількістю зображень коштують трохи більше, якщо ви зберігаєте і віддаєте багато великих файлів. Конструктори сайтів часто беруть щомісячну підписку, яка включає хостинг; створення власного сайту може бути дешевшим, але означає, що ви його підтримуєте. Актуальні ціни перевіряйте на сайті кожного провайдера, бо вони змінюються.

Коли краще готовий продукт

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

Створення з Mythex

Mythex може створити портфоліо за описом, як промпт вище. Ви бачите його в живому попередньому перегляді з рамкою розміром з телефон, уточнюєте макет і текст у чаті та публікуєте на yourname.mythex.app. Якщо вам потрібна форма зв’язку, яка зберігає запити, Mythex додає до проєкту базу даних; для фотогалерей він може використовувати файлове сховище проєкту, щоб зображення не вбудовувались у код. На Pro можна купити домен у Mythex або підключити вже наявний, а також експортувати код або синхронізувати його з GitHub, якщо згодом захочете хостити сайт деінде.

Про це йдеться в документації у розділі використання для портфоліо, а також у розділі про файлове сховище. Можна почати з ШІ-конструктора сайтів-портфоліо або з конкретного стилю, наприклад шаблонів портфоліо розробника чи портфоліо фотографа.

Запитання