Developer and designer portfolio
A designer-developer's personal site on paper with ultraviolet: a header with an availability chip and a live city clock, a hero with typing roles, a cursor spotlight and magnetic buttons, projects as a stack of sticky cards, “worked with” as a text marquee, “about me” with a B/W → colour photo, one-at-a-time autoplay reviews, a contact with a copyable email and a one-row footer. Inter Tight, Golos Text and IBM Plex Mono.
A personal site that sells a specialist: roles type out in the hero, projects flip by as a card stack, and alongside are past clients, an about section, reviews and a one-click copyable email. The author in the demo is fictional.
What it is made of
8 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Personal site header with an availability chip and city clocknavbar-031
Name, an “open to projects” chip, a live city clock, a “Write” button.
2. First screen
Personal hero: typing roles and a cursor spotlighthero-031
A huge name, typing roles, a cursor spotlight, magnetic buttons.
3. Work
Projects as a stack of sticky cardsportfolio-012
A stack of sticky cards: the next slides over, the previous shrinks.
4. Worked with
“Worked with” as a text marqueelogocloud-007
Company names as a text marquee with alternating styles.
5. About
“About me” with a B/W → colour photo, facts and skillsabout-014
A B/W → colour photo, three facts, skill tags, a career line.
6. Words
One quote at a time with autoplay and a progress bartestimonials-024
One big quote at a time, autoplay with a bar, arrows and keys.
7. Contact
Contact with an email that copies on clickcontact-021
Email copies on click, local time, socials with handles, a photo.
8. Footer
One-row personal site footerfooter-030
Name, links, year, a “to top” arrow button.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Developer and designer portfolio” page made of?
- 8 catalog sections in order: Personal site header with an availability chip and city clock, Personal hero, Projects as a stack of sticky cards, “Worked with” as a text marquee, “About me” with a B/W → colour photo, facts and skills, One quote at a time with autoplay and a progress bar, Contact with an email that copies on click, One-row personal site footer. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.