Портфолио
Рабочий стол XP
Портфолио как рабочий стол в духе Windows XP: экран загрузки с бегущими блоками, вход по клику на пользователя с «Добро пожаловать», значки программ, окна-проводники с меню, панелью кнопок, адресной строкой, синей боковой панелью и статусом — перетаскивание, растягивание за угол, сворачивание и разворачивание; таскбар с «Пуском», двухколоночное меню и трей с часами; поверх — плёнка ЭЛТ; по желанию — синтезированные звуки без файлов. Обои — свободное фото холмов (CC BY) из public/demo/xp, значки и аватар — свои SVG; содержимое окон — ваше.
Что можно поменять
- name и role — имя и подпись: в знаке, на входе, в меню «Пуск» и в призраке «Обо мне»
- apps — программы: title (значок и заголовок окна), kind (призрак и запасной значок: about, projects, resume, contact, folder), hint — подпись в «Пуске», icon — своя картинка значка, content — своё содержимое окна
- avatar — картинка пользователя на входе, в «Пуске» и в призраке (демо — /demo/xp/avatar.svg); без неё — инициалы
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/folio-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client». Три сцены в useState: boot (знак, три бегущих блока steps(17) как в оригинале, подсказка про F11 внизу, 3 с) → login (тёмно-синие полосы, голубое поле с линиями сверху/снизу, знак слева, карточка пользователя справа с градиентом на hover, «Перезагрузить» и заметка внизу; клик или 6 с) → «Добро пожаловать» 1.6 с → desktop. Стол: обои — свой файл по адресу в wallpaper (демо — /demo/xp/hills.jpg, фото «Curves» Nicholas A. Tonelli, CC BY 2.0, см. public/demo/xp/CREDITS.txt; запасной вариант — /demo/xp/hills.svg, векторные холмы с травяной фактурой feTurbulence) либо CSS-градиенты hills/graphite как фолбэк; значки — сетка 104px (dblclick, Enter, на touch — одно касание). Окно — абсолютный section с x/y/w/h/z в state: рамка 2px #284ffd, заголовок 30px с градиентом XP и кнопками 21px, меню (Файл/Вид/Справка), панель 48px (Назад/Вперёд и ярлыки других программ — открывают их), адресная строка 34px, содержимое, статус 23px; перетаскивание за заголовок и растягивание за правый нижний угол через pointer capture, свернуть с анимацией в таскбар, развернуть, закрыть. Призрак содержимого — проводник: левая панель 190px с карточками (Ссылки/Навыки/Программы) и синее поле; резюме — лист на сером, контакты — форма. Таскбар 30px: «Пуск» зелёный с курсивом, кнопки окон по метрикам XP, трей с тремя значками и часами (Intl.DateTimeFormat). Меню «Пуск» 335px: шапка с аватаром, белая колонка программ (первые две — с подписью hint), голубая колонка мест, подвал «Выйти»/«Выключение». Плёнка ЭЛТ (crt) — сетка пикселей и виньетка с mix-blend-mode: multiply. Ниже 40rem окна во весь стол, значки в строку, вход столбиком; окно уже 520px прячет боковую панель. Палитра фиксированная светлая --vibeui-folio-001-* (XP без тёмной темы), reduced-motion гасит анимации. Звуки (sounds, по умолчанию выключены): Web Audio без файлов — осцилляторы с экспоненциальной огибающей; свой чайм на вход, тики на открытие/закрытие, глиссандо вниз на сворачивание, щелчок «Пуска», нисходящая тройка на выход; контекст создаётся в первом клике, автопереходы беззвучны; динамик в трее включает и выключает.
Теги
- portfolio
- desktop
- windows
- xp
- retro
- os
- windows-manager
- personal site
- interactive
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…