Portfolio

XP Desktop

A portfolio as a Windows XP-style desktop: a boot screen with running blocks, login by clicking the user with a Welcome, program icons, explorer windows with a menu, toolbar, address bar, blue side panel and status — dragging, corner resize, minimize and maximize; a taskbar with Start, a two-column menu and a tray with a clock; a CRT film on top; optional synthesized sounds with no files. The wallpaper is a free hill photo (CC BY) from public/demo/xp, icons and avatar are your own SVGs; the window content is yours.

What you can change

name and role — the name and caption: in the mark, on login, in the Start menu and in the About ghost
apps — programs: title (icon and window title), kind (ghost and fallback icon: about, projects, resume, contact, folder), hint — the caption in Start, icon — your own icon image, content — your own window content
avatar — the user picture on login, in Start and in the ghost (demo — /demo/xp/avatar.svg); without it — initials

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Start

Wallpaper

Name

Caption

CRT film

Sounds

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/folio-001?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Start

Wallpaper

Name

Caption

CRT film

Sounds

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/folio-001?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

One file, zero dependencies, "use client". Three scenes in useState: boot (the mark, three running blocks with steps(17) like the original, an F11 hint at the bottom, 3 s) → login (dark blue bands, a light blue field with lines top/bottom, the mark on the left, the user card on the right with a hover gradient, Restart and a note at the bottom; click or 6 s) → Welcome 1.6 s → desktop. The desktop: wallpaper is your own file by URL in wallpaper (demo — /demo/xp/hills.jpg, the photo «Curves» by Nicholas A. Tonelli, CC BY 2.0, see public/demo/xp/CREDITS.txt; fallback — /demo/xp/hills.svg, vector hills with feTurbulence grass) or CSS gradients hills/graphite as fallback; icons in a 104px grid (dblclick, Enter, a single tap on touch). A window is an absolute section with x/y/w/h/z in state: a 2px #284ffd frame, a 30px title bar with the XP gradient and 21px buttons, a menu (File/View/Help), a 48px toolbar (Back/Forward and shortcuts to the other programs — they open them), a 34px address bar, content, a 23px status bar; dragging by the title bar and resizing by the bottom-right corner via pointer capture, minimize with an animation into the taskbar, maximize, close. The content ghost is an explorer: a 190px left panel with cards (Links/Skills/Programs) and a blue field; the resume is a sheet on gray, contacts a form. The 30px taskbar: a green italic Start, window buttons by XP metrics, a tray with three icons and a clock (Intl.DateTimeFormat). The 335px Start menu: a header with the avatar, a white column of programs (the first two with a hint caption), a light blue column of places, a footer with Log off / Shut down. The CRT film (crt) is a pixel grid and vignette with mix-blend-mode: multiply. Below 40rem windows fill the desktop, icons go in a row, login stacks; a window narrower than 520px hides the side panel. A fixed light palette --vibeui-folio-001-* (XP has no dark theme), reduced motion stops the animations. Sounds (sounds, off by default): Web Audio with no files — oscillators with an exponential envelope; an own chime on login, ticks on open/close, a downward glide on minimize, a Start click, a descending triad on log off; the context is created in the first click, auto-advances are silent; the tray speaker toggles it.