Главная / Статьи / Портфолио разработчика за выходные с Gemini 3.8 Flash High

Портфолио разработчика за выходные с Gemini 3.8 Flash High

Как вести ИИ-агента для кода к готовому портфолио на Next.js: промпты, выдуманный контент, иконки, проверка адаптивности и безопасность перед деплоем.

1436 слов

У многих опытных разработчиков есть одна слегка неловкая привычка: годы работы с 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 строк. ИИ не построил портфолио в одиночку. Его направлял, проверял, поправлял и выпускал человек, и для эксперимента на выходные это хороший итог.