Создаём многостраничный сайт-портфолио
через V0 by Vercel и публикуем по живой ссылке
🎯 К концу урока у тебя будет живая ссылка на профессиональный многостраничный сайт — с твоим именем, твоими проектами и твоей историей
Один показывает «я умею» — другой доказывает «вот что я уже сделал»
• Текст на листе бумаги
• «Умею HTML, CSS, JS»
• Ты один из сотни кандидатов
• Проверить нельзя
• Живой сайт по ссылке
• «Вот мой реальный проект»
• Запоминаешься мгновенно
• Можно открыть и проверить
💼 Сайт-портфолио — это твой личный бренд в интернете. Он работает 24/7 и говорит за тебя даже когда ты спишь
Разные характеры, разное назначение — выбираем лучший для портфолио
Быстрый фуллстек-генератор. Отлично для стартап-прототипов и мобильных приложений
Фокус на красивом дизайне и UX. Лучший выбор если нужна wow-визуалка с первого промпта
От Vercel. Генерирует production-код на React + TypeScript + Tailwind. Сразу деплоим на Vercel
💡 Принципиальное отличие V0: не картинка-макет, а живой рабочий React-код который сразу запускается и деплоится
Описываешь текстом — получаешь живой рабочий код. Не макет, не картинку. Код.
Текстом описываешь что хочешь — страницы, стиль, контент, логику
Появляется React + TypeScript + Tailwind CSS — тот же стек что в стартапах Кремниевой долины
Справа сразу видишь результат — интерактивный, кликабельный, живой
Нажимаешь Publish → сайт живёт по ссылке в интернете. Сразу. Без настроек.
⚡ Твоя задача — составить сильный промпт. Инструмент сделает остальное. Не нужно знать React.
▲ v0
Что ты хочешь создать сегодня?
Навигация: Home, Projects, Chats
Поле промпта — сюда вставляем запрос
Превью результата — живой и кликабельный
Сначала создаём структуру и дизайн. Данные — во втором промпте. Это и есть итерация.
Структура
5 страниц с навигацией
Дизайн
Тёмная тема + акценты
Функционал
Валидация · Фильтры · Темы
Перед тобой — не случайная генерация. Это сборка полноценного цифрового продукта
Компоненты, страницы, стили, data.ts — всё по правилам современного React-проекта
Цвета, типографика, компоненты — V0 думает как дизайнер, а не просто копирует шаблон
Навигация между /about /projects /blog /contact — всё работает из коробки
Форма валидирует email, фильтры работают, тёмная тема переключается
⏸ Поставь видео на паузу · Вставь промпт в V0 · Нажми Enter · Наблюдай
Слева — что делает. Справа — превью. За минуту появится первая версия твоего сайта
Это не заглушка — это живой сайт с реальной логикой внутри
Имя, роль, краткое био. Бегущая строка со стеком. Люксовый чёрный дизайн с голубым градиентом
Карточки с категориями, годом и стеком. Фильтр по типу проекта — работает!
История, принципы, годы опыта. V0 сам написал весь текст — и это уже звучит профессионально
Форма с живой валидацией email. Ошибку в адресе — сайт поймает сразу. Это реальная логика.
📌 Внутри пока чужие данные — чужое имя, чужие проекты. Сейчас мы это исправим.
Сильная работа с ИИ почти никогда не строится на одном идеальном запросе
Промпт #1
Архитектура
Промпт #2
Персонализация
Промпт #3+
Улучшения
Deploy
Живая ссылка
Новичок
«Ничего не получилось» → пишет новый промпт с нуля
Профи
Сохраняет то что работает, уточняет то что нет
Правило
Всегда продолжай тот же диалог — V0 помнит контекст
В том же диалоге — второй запрос. Замени выделенное курсивом на свои данные:
📌 Пример из урока: «Замени все данные на мои. Имя: Kumisai. Роли: VibeCoder, UI/UX дизайнер. В проектах: StageLight — лендинг для школьного театра; Telegram-бот с расписанием. Обо мне: мне 20 лет, я училась в Америке, соединяю креатив и цифровые продукты.»
⚠️ Отправляй второй промпт в тот же самый диалог — не создавай новый чат. V0 помнит структуру и обновит только данные.
Почему второй промпт отправляют в тот же диалог, а не создают новый чат?
✅ Верно! +200 XP
Контекст диалога — это память V0. Он знает весь сайт: компоненты, страницы, структуру. Второй промпт в том же диалоге = точечное обновление, а не переделка с нуля.
V0 обновил все данные и написал полноценный кейс для каждого проекта
← ABOUT
Твоё имя
Заменено во всех местах сайта автоматически
Твои проекты
V0 написал полноценный кейс с задачей и процессом
Твоя история
Раздел «Обо мне» с твоими словами и опытом
Два промпта → твой первый сайт-портфолио
Скопируй промпт архитектуры со слайда 6 → вставь в v0.dev → нажми Enter → наблюдай ~60 сек
Перейди на каждую страницу: / → /about → /projects → /blog → /contact. Нажми на фильтры в Projects, введи email с ошибкой в Contact
Замени курсивные части на свои данные: имя, роли, 2 проекта, пара слов о себе
Открой /about и /projects — ты должен увидеть свои данные. Это твой личный бренд!
✅ Готово — нажми чтобы получить +150 XP
До этого сайт жил внутри V0. Сейчас мы дадим ему настоящий адрес в интернете
Белая кнопка в правом верхнем углу интерфейса V0 → Publish to Production
Нажми Customize Domain → введи своё имя или название → получи красивый адрес вместо рандомного
~30–60 секунд → Vercel собирает и публикует твой React-проект
Теперь это настоящий сайт. Его можно вставить в резюме, отправить другу, поставить в Instagram bio
🎁 Бонус: после публикации скачай ZIP-архив с полным кодом проекта — он твой навсегда
Мы нажали Publish и началась какая-то «сборка». Что это значит?
✅ Верно! +200 XP
Деплой = публикация в интернет. Vercel берёт твой React-код, собирает его в оптимизированный сайт и размещает на своих серверах — всё автоматически. Ты получаешь живую ссылку которую видит весь мир.
Пройдись по сайту как незнакомый пользователь и напиши уточняющий запрос
Открой опубликованный сайт и запиши 2–3 момента которые ощущаются неудобно или неточно. Это уже аналитическая работа UX-специалиста.
Нажми кнопку со стрелочкой назад в интерфейсе V0 чтобы сравнить предыдущую и новую версию. Стало ли лучше? Именно так итерирует профи.
✅ Написал промпт #3 → нажми для +150 XP
Выбери что хочешь улучшить — и скопируй промпт
Какой технологический стек использует V0 для генерации кода?
✅ Именно! +200 XP
React + TypeScript + Tailwind — это тот же стек что используют команды в Airbnb, Vercel, Linear. Ты уже работаешь с инструментарием уровня Кремниевой долины.
Работай как настоящий продуктовый разработчик — добавь то чего ещё нет
✅ Добавил новый раздел и задеплоил → +150 XP
Ты написал три промпта в одном диалоге. Что ты делал?
✅ Точно! +200 XP
Итерация — это профессиональный подход. Ни один продукт не создаётся в один шаг. Сначала основа, потом наполнение, потом полировка. Именно так работают команды в лучших tech-компаниях.
После публикации V0 покажет все файлы проекта. Их можно скачать как ZIP-архив.
✅ Открыть и изучить код — понять как устроен React-проект
✅ Изменить в любом редакторе — VS Code, Cursor
✅ Задеплоить на другом хостинге
✅ Использовать как шаблон для следующего проекта
💡 Это не просто красивый результат на экране. Это полноценный профессиональный проект со всей архитектурой внутри. Всё твоё.
Смотри как Publish → Customize Domain → живая ссылка в браузере
От HTML-файла к React-приложению. Посмотри на дистанцию
Один HTML-файл · Статичный · Локально · CSS вручную
5 страниц React-приложение · Живая ссылка · Vercel CDN · TypeScript + Tailwind
📢 «Портфолио — это не финальная точка. Это живой документ, который растёт вместе с тобой. Каждый новый проект — это новый кейс. И теперь у тебя есть и инструмент, и навык, чтобы это делать.»
V0
Освоен новый инструмент
Итерация
Понял как работают профи
Deploy
Опубликовал живой сайт
Портфолио
Личный бренд в интернете
Открой опубликованный сайт по живой ссылке. Пройдись по каждой странице как незнакомый пользователь — не как создатель. Запиши 2–3 момента, которые ощущаются неудобно или неточно. Скинь ссылку + список замечаний в чат.
Выбери одну страницу или секцию которую хочешь улучшить. Напиши третий уточняющий промпт в том же диалоге V0. Сравни результат с предыдущей версией — скинь скриншоты «до» и «после» с комментарием что изменилось и стало ли лучше.
Добавь на сайт новый раздел или новую страницу которой ещё нет. Опиши его в промпте, получи обновлённую версию, опубликуй снова через Vercel и проверь живую ссылку. Скинь ссылку в чат — спикер лично откроет каждый сайт.
🎉 Урок 8 полностью пройден! +100 XP
Урок 8 — Портфолио на V0
Многостраничный сайт · Vercel Deploy · Итерация
Урок 9 — ИИ-стек
Соединяем инструменты в цепочку · Один усиливает другой
🔗
Следующий уровень: ИИ-цепочки
Ты уже умеешь создавать сайты, ботов и портфолио.
Следующий шаг — соединить их все в единый ИИ-стек.
Держи свои проекты под рукой — они пригодятся.