Сайт-портфолио

Собрал структуру в Figma, оставил только нужное и навайбкодил работающий сайт. Вы сейчас на нём

Придумал структуру, спроектировал интерфейс, навайбкодил и запустил сайт

Инструменты

FigmaNext.jsTailwindClaude CodeVercel

Что получилось

Работы — сразу на первом экране

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

Вопросы вместо страницы «О себе»

Ответы на частые вопросы собраны в чат — и ведут в нужный кейс

Одна композиция на все ширины

Десктоп, планшет и мобильный держат один порядок блоков — карточки просто перестраиваются

Собрал сайт вокруг одного действия — посмотреть работы

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

Первый экран сайта: боковая панель и лента кейсов

Превратил «О себе» в короткий диалог

Страница «О себе» — это монолог, который читают по диагонали. Я собрал вопросы, которые задают на интервью, в чат: посетитель выбирает вопрос, ответ печатается репликой и уводит в кейс, где это видно на практике

Блок «Ответы на вопросы»: чат и карточки вопросов

Навайбкодил макеты и запустил живой сайт

Интерфейс собрал на Next.js с помощью Claude Code: задачу описывал словами, а вёрстку доводил руками — адаптивы, состояния, тёмная тема. Опубликовал на Vercel: получился не концепт, а сайт, которым можно пользоваться

Claude Codeсобирает сайт…деплой…

Собери мне сайт-портфолио. Не допускай ошибок!

приступаю…

вёрсткатемыадаптивыдеплой
Разметка и токены
Компоненты
Адаптивы
Деплой на Vercel
building site…deploying…
Сайт готовОпубликован на Vercel

Сайт опубликован и работает. Новый кейс добавляется правкой данных, а не новой вёрсткой: дальше наполняю кейсы разборами, а «Спросить меня» — новыми вопросами

Следующий кейс