Портфоліо розробника за вихідні з Gemini 3.8 Flash High

Багато досвідчених розробників мають одну трохи незручну звичку: роки роботи з JavaScript, TypeScript, React, Next.js, Node.js, Java, Python і хмарами — і особисте портфоліо, яке так і не доведено до кінця. Проблема рідко технічна. Це класична пастка «потім, коли буде час», а час так і не з'являється.

Один із виходів — змінити підхід. Замість того щоб днями проєктувати компоненти й набирати кожен рядок, перший прохід можна віддати ШІ-агентові для коду. Тут це був Antigravity з Gemini 3.8 Flash High, у суботу по обіді. Мета була не отримати ще один безликий ШІ-шаблон, а зробити сайт, який відчувається особистим, і результат перевершив очікування.

Навмисно коротке ТЗ

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

А ще треба було піти від звичного шаблону: хіро-блок, 47 значків навичок, 12 карток проєктів, величезне резюме, привітання про «захопленого розробника», форма зворотного зв'язку, футер. Підсумкова структура вийшла значно скромнішою:

• Хіро-блок на весь екран
• Заклик підписатися на розсилку
• Вибрані роботи
• Основні технології
• Статті й публікації
• Досвід
• Мінімалістичний футер

Жодного вивантаженого резюме, нескінченної каруселі й розділів для галочки.

Спершу дизайн

Візуальний напрям визначили ще до того, як Gemini написав бодай рядок: темний, кінематографічний, сучасний, для розробників, мінімалістичний, просторий і особистий.

Найважливішим був хіро-блок. Стокова ілюстрація «розробник за ноутбуком» відпала одразу. Хотілося показати живу людину за робочим місцем, тому зрештою в хіро — темна кінематографічна сцена з вписаним у неї портретом. Блок займає весь екран, і це, здавалося б, дрібниця, але змінює багато: перший екран сприймається як знайомство, а не як шапка сайту. Невеликий індикатор прокручування внизу посередині підказує, що далі є ще.

Віддаємо Gemini все бачення цілком

Ось тут стало цікаво. Gemini не отримував покрокових прохань на кшталт «зроби навбар», потім «тепер хіро», потім «тепер картки проєктів». Він одразу отримав усе бачення продукту. Стек був простий: Next.js і Tailwind CSS.

У промпті було:

• бекграунд
• стек технологій
• проєкти
• статті
• досвід
• візуальний напрям
• брендинг
• вимоги до адаптивності
• ієрархія контенту

Після цього Gemini видав першу реалізацію.

Перша версія й не мусить бути ідеальною

І не повинна. Частина іконок була заглушками, частина логотипів — приблизними, а деякі статті довелося замінити на справжні.

Саме тут і треба міняти погляд на роботу з ШІ. Очікування не «ШІ згенерував ідеальний код», а «ШІ видав сильну першу реалізацію, яку людина може перевірити, спрямувати й доопрацювати». Це дуже різні твердження.

Не дозволяйте моделі вигадувати, хто ви

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

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

Справжні іконки в розділі технологій

У першій версії розділу технологій стояли іконки-заглушки, і цього було замало. Якщо на сторінці перелічено JavaScript, TypeScript, React, Next.js, Docker, PostgreSQL і GitHub, там мають бути справжні логотипи. Тому Gemini прямо вказали, звідки їх брати: Devicon для технологій розробки та React Simple Icons для ширшого набору брендів. Справжній логотип кращий за його ШІ-наближення.

Адаптивність приємно здивувала

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

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

Безпека перед деплоєм

Сайт не опублікували одразу. Перед деплоєм перевірили:

• відомі вразливості в залежностях
• зашиті в код ключі, токени й паролі
• змінні оточення та приватні ключі
• номери телефонів, адреси пошти й внутрішні URL
• будь-які інші випадково залишені секрети
• чутливі дані, що залишилися в історії Git

Пам'ятайте про одну відмінність. Публічне портфоліо може свідомо містити ваше ім'я, GitHub, LinkedIn, посилання на статті й професійні дані, і це не проблема безпеки. Випадково викотити щось подібне до цього — зовсім інша справа:

API_KEY=...
DATABASE_PASSWORD=...
PRIVATE_KEY=...

Застосункам, згенерованим ШІ, так само потрібна звичайна інженерна дисципліна.

Викочуємо

Готовий застосунок запустили на Vercel. Саме тоді експеримент став реальним. Суть не в тому, що Gemini згенерував якийсь код. Суть у тому, що людина описала продукт, ітерувала, перевірила й випустила його, і так думати про розробку з ШІ значно корисніше.

Скільки ліміту пішло?

Gemini 3.8 Flash High провів увесь процес в Antigravity. Після цього панель використання показувала, що лишилося 90% тижневого ліміту і 37% п'ятигодинного. Це не науковий бенчмарк: інші промпти, розміри контексту, моделі, поведінка агента й проєкти дадуть зовсім інші цифри. Але як особиста точка даних це все одно цікаво: шлях від нуля до продуманого портфоліо, адаптивної реалізації, ітеративних правок, перевірки безпеки й деплою в продакшен уклався у вихідні й не вичерпав тижневий ліміт.

Чого навчили вихідні

Висновок не в тому, що Gemini вміє робити сайти, — це й так відомо. Висновок у тому, як ним користуватися.

1. Промпт — частина архітектури. Розмитий промпт дає шаблонний сайт. Промпт, у якому прописано обмеження дизайну, контент, архітектуру, технології, адаптивну поведінку й межі, приводить значно ближче до бажаного.
2. ШІ добрий у реалізації, але не має права вирішувати. Gemini може вирішити, як зверстати картку. Він не повинен вирішувати, яка у вас кар'єра, які проєкти ви робили, які статті ваші та які посилання вам належать. Це питання джерела істини.
3. Ітерації важливіші за ідеал. Процес був не «промпт, потім ідеальний сайт», а «промпт, реалізація, огляд, виправлення, доопрацювання, перевірка, деплой», і це значно ближче до справжньої інженерії.
4. Не чіпайте те, що працює. Щойно портфоліо стало мати потрібний вигляд, прохання «зроби ще краще» припинилися. Агенти чудово вміють змінювати речі, але це не означає, що змінювати треба все.

Чи спрацює так для будь-якого проєкту?

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

Що насправді перевіряв експеримент

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

Для інженерів це справжній зсув: від написання кожного рядка до керування, рев'ю, перевірки й випуску систем. Інженерія від цього не стає менш важливою. Важливішим стає інженерне судження.

Цікавою була не швидкість. Впало в око, яка частка зусиль переїхала з клавіатури в ухвалення рішень. Розробка з ШІ стає переконливою, коли розробник може чітко описати ідею, провести агента через збирання, впіймати його помилки, захистити ключові обмеження й водночас відповідати за те, що виходить у прод, а не коли модель пише 10 000 рядків. ШІ не збудував портфоліо самотужки. Його спрямовувала, перевіряла, виправляла й випускала людина, і для експерименту на вихідні це добрий підсумок.