VibeUI
РусEng
Войти

О компании

«Обо мне» с фото ч/б → цвет, фактами и навыками

Фото чёрно-белое, по наведению — в цвет с лёгким наездом; рядом крупный заголовок и текст, три факта цифрами акцентом, навыки тегами, которые по наведению заливаются акцентом, и короткая линия карьеры «годы — место — роль». Без состояния.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • image, imageAlt, imageNote, eyebrow, title, text
  • facts: value, label; skillsLabel, skills
  • pathLabel, path: years, place, role

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
«Обо мне» с фото ч/б → цвет, фактами и навыками — Фото чёрно-белое, по наведению — в цвет с лёгким наездом; рядом крупный заголовок и текст, три факта цифрами акцентом, навыки тегами, которые по наведению заливаются акцентом, и короткая линия карьеры «годы — место — роль». Без состояния.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/about-014?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<About014
  image="/photos/portrait.webp"
  title="Дизайнер, который умеет в код"
  facts={[{ value: "7", label: "лет в продуктах" }, { value: "40+", label: "проектов" }]}
  skills={["Figma", "React", "TypeScript"]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: Дизайнер, который умеет в код. Или наоборот
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «О компании»

Частые вопросы

Как установить компонент ««Обо мне» с фото ч/б → цвет, фактами и навыками» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента ««Обо мне» с фото ч/б → цвет, фактами и навыками»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте ««Обо мне» с фото ч/б → цвет, фактами и навыками»?
Можно менять: image, imageAlt, imageNote, eyebrow, title, text; facts: value, label; skillsLabel, skills; pathLabel, path: years, place, role. Сохранить как есть: импорты из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; фото — filter: grayscale(1) → none по :hover обёртки с transition .6s и scale(1.03); факты — сетка 3 колонки, цифры акцентом плотным гротеском.
Компонент ««Обо мне» с фото ч/б → цвет, фактами и навыками» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/about-014.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • about
  • bio
  • portfolio
  • personal
  • skills
  • career
  • photo
  • facts
  • composite
Исходник компонента

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

Загружается…