Портфолио разработчика и дизайнера
Личный сайт дизайнера-разработчика на бумаге с ультрафиолетом: шапка с чипом доступности и живыми часами города, первый экран с печатающимися ролями, светом за курсором и магнитными кнопками, проекты стопкой sticky-карточек, «работал с» текстом бегущей строкой, «обо мне» с фото ч/б → цвет, отзывы по одному с автопрокруткой, контакт с копируемой почтой и подвал в одну полосу. Inter Tight, Golos Text и IBM Plex Mono.
Личный сайт, который продаёт специалиста: роли печатаются на первом экране, проекты листаются стопкой карточек, рядом — с кем работал, «обо мне», отзывы и почта, которую копируют в один клик. Автор в демо вымышленный.
Из чего собрано
8 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка личного сайта с чипом доступности и часами городаnavbar-031
Имя, чип «открыт к проектам», живые часы города, кнопка «Написать».
2. Первый экран
Первый экран личного сайта: печатающиеся роли и свет за курсоромhero-031
Огромное имя, роли печатаются, свет за курсором, магнитные кнопки.
3. Проекты
Проекты стопкой sticky-карточекportfolio-012
Стопка sticky-карточек: следующая наезжает, предыдущая уменьшается.
4. Работал с
«Работал с» текстом бегущей строкойlogocloud-007
Названия компаний текстом бегущей строкой, начертания чередуются.
5. Обо мне
«Обо мне» с фото ч/б → цвет, фактами и навыкамиabout-014
Фото ч/б → цвет, три факта, навыки тегами, линия карьеры.
6. Отзывы
Цитаты по одной с автопрокруткой и полосой прогрессаtestimonials-024
По одной цитате крупно, автопрокрутка с полосой, стрелки и клавиши.
7. Контакт
Контакт с почтой, которая копируется кликомcontact-021
Почта копируется кликом, местное время, соцсети с никами, фото.
8. Подвал
Подвал личного сайта в одну полосуfooter-030
Имя, ссылки, год, кнопка «наверх» со стрелкой.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Портфолио разработчика и дизайнера»?
- Из 8 секций каталога по порядку: Шапка личного сайта с чипом доступности и часами города, Первый экран личного сайта, Проекты стопкой sticky-карточек, «Работал с» текстом бегущей строкой, «Обо мне» с фото ч/б → цвет, фактами и навыками, Цитаты по одной с автопрокруткой и полосой прогресса, Контакт с почтой, которая копируется кликом, Подвал личного сайта в одну полосу. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.