Сайт-портфолио с помощью нейросети за один вечер

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

Разберём, зачем новичку портфолио, какие блоки в нём важны, и как собрать такой сайт за один вечер с помощью ИИ-ассистента — например, Claude Code. Писать код вручную строчка за строчкой не придётся. Вместо этого сосредоточимся на смысле: что показать, как рассказать, куда выложить. Технические детали ассистент возьмёт на себя.

Что такое сайт-портфолио простыми словами

Представьте, что вы идёте на ярмарку handmade-изделий. У каждого мастера есть небольшой стенд: на нём висят фотографии работ, лежат визитки, стоит табличка «меня зовут Анна, я вяжу игрушки». Человек подходит, за несколько секунд понимает, что за мастер, смотрит лучшие работы и решает — остаться или идти дальше.

Сайт-портфолио — это такой же стенд, только в интернете. Это страница или небольшой сайт, где вы рассказываете о себе и показываете свои проекты: игры, приложения, статьи, дизайны, боты — всё, чем гордитесь. Он работает круглосуточно, не требует от вас личного присутствия и легко пересылается одной ссылкой.

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

Зачем новичу портфолио, если опыта «мало»

Очень часто начинающие разработчики думают: «У меня пока нет серьёзных проектов, мне рано делать портфолио». Это миф. Портфолио нужно не тогда, когда вы «уже всего достигли», а тогда, когда у вас есть хотя бы одна вещь, которой вы можете поделиться.

Первая игра-змейка, простой лендинг, бот для Telegram, скрипт, который решает бытовую задачу, — всё это уже материал для портфолио. Главное не масштаб, а понятная история: что сделано, зачем, какие навыки использованы, что получилось в итоге.

Портфолио помогает и вам самим. Когда проектов становится много, вы перестаёте помнить, что и когда делали. Сайт становится личным архивом. Через полгода вы сможете заглянуть в него и сказать: «А, вот мой первый проект, вот тут я разобрался с анимацией, а тут — с базой данных». Это ценно для самооценки и для понимания своего пути.

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

Почему за один вечер — и почему с ИИ

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

Сегодня у новичка есть третий путь — ИИ-ассистент. Вы описываете, что хотите, а ассистент генерирует структуру, текст, стили и код. Он не рисует сайт сам по себе: вам всё равно нужно думать о содержании, выбирать проекты и проверять результат. Но техническая рутина уходит на задний план.

За один вечер вполне реально:

• собрать тексты и скриншоты для трёх-четырёх проектов;
• сгенерировать структуру сайта;
• получить готовый HTML/CSS-шаблон;
• выложить сайт на GitHub Pages;
• проверить, как он выглядит на телефоне и компьютере.

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

Что подготовить заранее

Перед тем как открывать ассистента, полезно собрать «сырьё». Чем больше готового контента вы дадите ИИ, тем меньше вам придётся дописывать вручную. Вот минимальный набор.

1. Список проектов

Выпишите три-семь проектов, которыми вы готовы поделиться. Для каждого ответьте на вопросы:

• Что это за проект? Игра, сайт, бот, скрипт, дизайн?
• Какую задачу он решает? Развлекает, помогает, автоматизирует?
• Что в нём интересного? Новая механика, красивый дизайн, необычная идея?
• Какие технологии или навыки использовались? ИИ-ассистент, HTML, игровой движок, логика диалогов?
• Где можно посмотреть? Ссылка на игру, сайт, репозиторий, видео.

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

2. Скриншоты и изображения

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

Соберите картинки в одну папку. Дайте файлам понятные имена: например, zmeyka-screenshot.png, landing-magazin.png. Это упростит работу ассистенту и вам.

3. Короткий текст о себе

Напишите 3-5 предложений о себе. Не нужно перечислять все достижения за жизнь. Достаточно: кто вы, чем увлекаетесь, что делаете сейчас, что ищете. Например: «Привет, меня зовут Сергей. Я учусь создавать игры и небольшие веб-приложения с помощью ИИ. Здесь собраны мои первые проекты. Открыт к обратной связи и совместным экспериментам».

4. Контакты

Решите заранее, как с вами можно связаться. Это может быть Telegram, электронная почта, ссылка на профиль в социальной сети или форма обратной связи. Если не хотите публиковать личные данные, оставьте один удобный канал.

Какие блоки должны быть в портфолио

Хороший сайт-портфолио — это не просто красивая картинка, а понятная история. Посетитель должен за несколько секунд понять: кто вы, что вы делаете и почему это стоит внимания. Вот блоки, которые стоит включить.

Шапка с главным сообщением

Самый верх сайта — это ваше первое впечатление. Там должно быть:

• ваше имя или псевдоним;
• короткая фраза о том, чем вы занимаетесь;
• кнопка или ссылка на самое важное: например, «Смотреть проекты» или «Написать мне».

Пример: «Анна. Создаю небольшие игры и учусь вайбкодингу. Смотрите мои проекты ниже».

Блок «Обо мне»

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

Проекты

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

Контакты

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

Дополнительно: блог, отзывы, резюме

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

Пример структуры карточки проекта

Карточка проекта должна отвечать на вопросы посетителя за 10-15 секунд. Вот шаблон, который можно дать ИИ-ассистенту.

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

Пошаговая сборка сайта с Claude Code

Теперь перейдём к практике. Мы будем считать, что вы уже установили Claude Code или другой ИИ-ассистент, который умеет работать с файлами и терминалом. Если нет — сначала настройте ассистента по инструкции вашего курса.

Шаг 1. Создайте папку проекта

Создайте на компьютере папку, например my-portfolio. Внутри сделайте подпапки images для картинок и projects для описаний. Положите туда все скриншоты, которые подготовили заранее.

Такая структура помогает ассистенту сразу понять, где что лежит, и не путаться в файлах.

my-portfolio/
├── index.html
├── style.css
├── images/
│   ├── zmeyka.png
│   ├── landing.png
│   └── bot.png
└── README.md

Шаг 2. Откройте папку в Claude Code

Запустите Claude Code и откройте в нём папку my-portfolio. Скажите ассистенту, что хотите сделать сайт-портфолио. Чем конкретнее будет запрос, тем лучше результат.

Пример запроса:

Шаг 3. Проверьте первую версию

Ассистент создаст файлы index.html и style.css. Откройте index.html в браузере. Не пытайтесь сразу получить идеал. Сначала посмотрите на общую структуру: есть ли все блоки, правильно ли расположены проекты, работают ли ссылки.

Если что-то не так, поправьте словами: «Сделай шрифт крупнее в заголовке», «Поменяй местами блоки Обо мне и Проекты», «Добавь иконку Telegram рядом с контактом». Итеративные правки — нормальный процесс.

Шаг 4. Наполните карточки проектов

Когда структура готова, вставьте реальные тексты и ссылки. Не оставляйте в карточках «текст-рыбу» вроде «Lorem ipsum». Это сразу бросается в глаза и разрушает доверие.

Для каждого проекта напишите:

• что это;
• зачем вы его делали;
• что получилось;
• что узнали нового.

Если у проекта есть рабочая ссылка — обязательно добавьте её. Если ссылки пока нет, можно дать ссылку на репозиторий или видео.

Шаг 5. Проверьте адаптивность

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

Шаг 6. Протестируйте на друзьях

Прежде чем публиковать сайт, покажите его кому-нибудь из близких. Попросите за 30 секунд сказать, кем вы представились и какие проекты у вас есть. Если человек не понимает — значит, тексты или структура требуют доработки.

Публикация на GitHub Pages

GitHub Pages — это бесплатный способ разместить простой статический сайт в интернете. «Статический» означает, что сайт состоит из готовых HTML-файлов, а не из сложного сервера. Для портфолио этого достаточно.

Что понадобится

• Аккаунт на GitHub. Регистрация бесплатная и занимает пару минут.
• Репозиторий для вашего сайта. Можно назвать его my-portfolio.
• Загрузка файлов в репозиторий.
• Включение GitHub Pages в настройках репозитория.

Как это работает

После включения GitHub Pages ваш сайт становится доступен по адресу вроде ваш-никнейм.github.io/my-portfolio. Это обычная ссылка, которой можно делиться в социальных сетях, резюме или сообщениях.

Если ассистент умеет работать с Git, вы можете попросить его загрузить файлы на GitHub. Если предпочитаете сделать вручную — в интерфейсе GitHub есть кнопка загрузки файлов. Главное, чтобы в корне репозитория лежал файл index.html.

Проверка после публикации

После включения GitHub Pages подождите несколько минут. Затем откройте ссылку в браузере, в режиме инкогнито и на телефоне. Убедитесь, что:

• картинки загружаются;
• все ссылки работают;
• текст читается;
• нет ошибок в консоли браузера.

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

Типичные ошибки новичков

Даже с ИИ-ассистентом в портфолио можно наделать ошибок. Вот самые частые.

Ошибка 1. Перегрузить сайт эффектами

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

Ошибка 2. Оставить тексты-заглушки

«Lorem ipsum» и «Текст о проекте» сразу выдают незаконченность. Если текста ещё нет — лучше не публиковать сайт, а дописать описания. Посетитель должен понимать, что перед ним реальный человек, а не шаблон.

Ошибка 3. Слишком много проектов

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

Ошибка 4. Нерабочие ссылки

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

Ошибка 5. Скрыть контакты

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

Чек-лист перед публикацией

• Я собрал тексты и скриншоты для каждого проекта.
• Я написал короткий текст о себе.
• У меня есть понятные контакты.
• Сайт имеет блоки: шапка, обо мне, проекты, контакты.
• Каждый проект оформлен как карточка с картинкой, описанием и ссылкой.
• Я проверил сайт на компьютере и на телефоне.
• Все ссылки работают.
• Я убрал тексты-заглушки.
• Я опубликовал сайт на GitHub Pages.
• Я показал сайт хотя бы одному человеку и получил обратную связь.

Как писать описания проектов: до и после

Описание проекта — это не просто аннотация. Это маленькая история, которая объясняет, почему проект появился и чем он может быть интересен. Посмотрим на пример «до» и «после».

«Игра змейка»

• До: «Игра змейка»
• После: «Классическая змейка в браузере. Я добавил уровни сложности, бонусы и таблицу рекордов, чтобы было интересно возвращаться. Делал с помощью Claude Code, учился работать с локальным хранилищем браузера»

«Лендинг»

• До: «Лендинг»
• После: «Лендинг для вымышленного магазина цветов. Пробовал делать адаптивную вёрстку, чтобы сайт красиво смотрелся и на телефоне, и на компьютере»

«Telegram-бот»

• До: «Telegram-бот»
• После: «Бот, который присылает напоминания выпить воды. Помогает не забывать о режиме во время рабочего дня. Разбирался с API Telegram и логикой диалогов»

Разница в том, что «после» есть три вещи: что это, почему это сделано и что автор при этом узнал. Именно это и интересно посетителю портфолио.

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

Как выбрать имя и адрес сайта

Имя сайта — это ваша визитная карточка. Не нужно выдумывать что-то грандиозное. Хороший адрес легко произнести, легко написать и легко запомнить.

Если вы публикуете на GitHub Pages, адрес будет выглядеть как ваш-никнейм.github.io/название-репозитория. Например, ivan-frontend.github.io/portfolio. Это бесплатно и удобно для старта.

Название репозитория лучше делать простым: portfolio, my-portfolio, projects. Избегайте транслита с ошибками, длинных словосочетаний и цифр без смысла. portfolio лучше, чем moi_proecty_2026_v2.

Если позже вы захотите свой домен вроде ivanpetrov.dev, вы сможете подключить его к GitHub Pages. Но для первого портфолио это не обязательно. Главное — чтобы ссылка работала и выглядела аккуратно.

Как обновлять портфолио со временем

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

Хорошая привычка — обновлять портфолио раз в месяц или после каждого завершённого проекта. Даже если изменения маленькие, они показывают, что вы не стоите на месте.

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

FAQ

1. Нужно ли уметь вёрстку, чтобы сделать портфолио?

Нет. ИИ-ассистент может сгенерировать весь код. Вам нужно только подготовить тексты, скриншоты и чётко объяснить, что вы хотите.

2. Можно ли сделать портфолио в конструкторе сайтов?

Можно, но у такого пути есть минусы: часто платно, меньше контроля, сложнее перенести сайт. GitHub Pages + ИИ дают бесплатный и гибкий вариант.

3. Сколько проектов должно быть в портфолио?

Достаточно двух-трёх качественных проектов. Лучше мало, но хорошо оформленных, чем много пустых заглушек.

4. Нужно ли публиковать исходный код?

Не обязательно, но если проект выложен на GitHub, ссылка на репозиторий добавляет доверия. Это показывает, что вы умеете работать с системой контроля версий.

5. Что делать, если у меня нет своих скриншотов?

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

6. Можно ли добавить резюме в портфолио?

Конечно. Ссылка на PDF-резюме или отдельная страница «Опыт» будут уместны. Но главное — всё-таки проекты.

7. Как часто нужно проверять работоспособность сайта?

Хотя бы раз в несколько месяцев. Ссылки устаревают, картинки могут перестать загружаться, а GitHub Pages иногда меняет настройки.

Заключение

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

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

Если вы хотите пройти этот путь вместе с поддержкой — присоединяйтесь к практикуму skillmake. Там мы помогаем новичкам не только делать проекты, но и оформлять их так, чтобы ими хотелось поделиться.

Нейросеть для создания сайта бесплатно: что реально умеет

Запрос «нейросеть для создания сайта бесплатно» — один из самых частых, поэтому честно разберём, что возможно без вложений. Бесплатные веб-чаты нейросетей (Claude, ChatGPT и другие) умеют сгенерировать полноценный код одностраничного сайта: структуру, стили, адаптивность под телефон. Ты копируешь код в файл index.html — и сайт открывается в браузере. Для сайта-портфолио этого достаточно.

Ограничения бесплатного пути: лимиты сообщений в чате, никто не поможет с ошибками, а публикация сайта в интернете — отдельная задача (впрочем, GitHub Pages тоже бесплатен). Платная подписка снимает лимиты и открывает инструменты вроде Claude Code, где ИИ работает с файлами напрямую, без копирования кода руками. Итог: попробовать и собрать первую версию — бесплатно можно; работать системно — удобнее с подпиской.