Portfolio builder · 6 themes · EN / VI

Your company's work, in a site that looks like it won an award

Folio turns any client's design into a working portfolio site in about 30 minutes. It ships with six looks taken from the best agency sites — with their effects: letter loaders, particle portraits, mega menus, sliders and more. Edit every word, translate with AI and receive every message.

Open a live theme ↗See all six themes

A vibe project from Vybev · Web, Android and iOS apps · New themes and changed features on request

6themes
36effects
21features with guides
EN · VIand any language
folio.vybev.com
Noir · dark agency
folio.vybev.com
Blaze · creative agency
folio.vybev.com
Verdant · designer
folio.vybev.com
Studio · light studio
folio.vybev.com
Volt · engineering
folio.vybev.com
Mono · personal HUD
Why Folio exists

Not a settings panel. A portfolio built from your own design.

Folio is not made for clients to sit and configure. It is made so that we build each client's portfolio in their own design: drop in a picture of the design, and the new look is coded on top of Folio — every page, effect, language and the back office already working — in about 30 minutes.

The same goes for every new look of Shopora (shop) and Booking: a new theme from a picture in about 30 minutes, with all features working, or tailored to exactly what the client needs — made with Vybev.

  1. 1

    Send the design

    A screenshot, a Figma frame or a site you love.

  2. 2

    We code the look

    Layout, type, colours and effects on top of Folio's engine.

  3. 3

    Live in ~30 minutes

    Content, languages, form and back office work from minute one.

Six examples

Six designs built this way

Each one was made from a picture of a reference site, with its own type, layout and effects. Your client's design becomes the seventh. Every demo below is the real site, live.

demo/noir/index.html
Noir
Noir on a phone

Noir

Dark agency · red & serif

Inspired by award-winning agency sites: letters that open the page, a floating pill menu, a red curve that draws itself, staggered pictures.

Letter loaderWord revealFloating pill menuCurved linePicture revealGrayscale team
Open the live demo ↗Tiếng Việt ↗
demo/blaze/index.html
Blaze
Blaze on a phone

Blaze

Creative agency · orange & lime

Loud and confident: a full-bleed photo hero, heavy uppercase type, a tilted lime marquee and stacked project cards.

Full photo heroOutline giant textTilted marqueeMagnetic buttonsStacked cardsCard tilt
Open the live demo ↗Tiếng Việt ↗
demo/verdant/index.html
Verdant
Verdant on a phone

Verdant

Designer · green silk

For personal brands and product designers: moving silk light, floating service tags, a giant headline and a draggable work slider.

Silk gradientFloating tagsGiant headlineHorizontal sliderBig menu footerParallax
Open the live demo ↗Tiếng Việt ↗
demo/studio/index.html
Studio
Studio on a phone

Studio

Light studio · blue & minimal

Calm and clean for design and consulting firms: a light page, bold modern type and lists where a picture follows the mouse.

Clean fadesHover picture listImage revealUnderline linksSoft parallaxCounters
Open the live demo ↗Tiếng Việt ↗
demo/volt/index.html
Volt
Volt on a phone

Volt

Engineering · lime & grotesk

Made for architecture, construction and engineering: a mega menu with pictures, a lime band of numbers and a process line that fills as you scroll.

Mega menuAccent bandCountersProcess linePicture zoomLight and dark bands
Open the live demo ↗Tiếng Việt ↗
demo/mono/index.html
Mono
Mono on a phone

Mono

Personal · black & white HUD

A portfolio that feels like an interface: a portrait made of particles that scatter around the mouse, scrambled letters, HUD panels and a ticker.

Particle portraitScramble textHUD panelsTickerLocal timeGlitch hover
Open the live demo ↗Tiếng Việt ↗
NoirBlazeVerdantStudioVoltMono
Features · with how-to

Folio

A portfolio site and its back office

Everything a company needs to show its work: pages drawn by six themes, a back office to edit every word, translations side by side, and messages that reach your inbox.

21 features · screenshot + how-to eachfolio.vybev.com

folio.vybev.com
Home page in 13 sections
Public site · 01 / 21

Home page in 13 sections

Hero, moving words, about, services, featured work, numbers, process, team, testimonials, client logos, posts, questions and a call to action — drawn differently by every theme.

How to use
  1. Open Themes and look.
  2. Switch sections on or off in Home sections.
  3. Drag them up or down to change the order.
  4. Press Save the look.

TipEvery text of the home page is edited in Company and texts.

folio.vybev.com
Portfolio with filters
Public site · 02 / 21

Portfolio with filters

All projects in the layout of the theme — grid, masonry, stacked cards, list or slider — filtered by category without reloading.

How to use
  1. Add categories in Content → Categories.
  2. Give each project a category.
  3. Visitors click a category to filter; links like work?c=2 open it pre-filtered.
folio.vybev.com
Project page
Public site · 03 / 21

Project page

Big cover, key facts band, the story, the result in a highlight, a gallery, a video and the next project.

How to use
  1. Open Portfolio and a project.
  2. Fill the cover, facts, story and result.
  3. Add up to 12 pictures to the gallery.
  4. Set the status to Published.

TipNo picture yet? The site draws abstract art in the theme's colours so nothing looks broken.

folio.vybev.com
Services and service pages
Public site · 04 / 21

Services and service pages

Each service has its page with key points, a starting price, related work and a quote button that pre-selects the service in the form.

How to use
  1. Open Content → Services.
  2. Write a short text, points and the page text.
  3. Pick an icon and a starting price.
  4. Link projects to the service so they show as related work.
folio.vybev.com
About and team
Public site · 05 / 21

About and team

The company story with words that light up while you scroll, numbers that count, the way of working and the team.

How to use
  1. Write the about headline and text in Company and texts.
  2. Add numbers, steps and questions there too.
  3. Add people in Content → Team with photo and links.
folio.vybev.com
Journal
Public site · 06 / 21

Journal

Articles with cover, tags, author and date; visitors filter by tag and keep reading related posts.

How to use
  1. Open Content → Journal and press Write a post.
  2. Ask the AI to draft the article if you like.
  3. Add tags separated by commas.
  4. Publish.
folio.vybev.com
Contact form that reaches you
Public site · 07 / 21

Contact form that reaches you

Name, email, phone, company, service, budget and message. Checked box by box, protected from bots and floods.

How to use
  1. Set the budget choices and contact texts in Company and texts.
  2. Set the email that receives new messages.
  3. Every message appears in Messages and arrives by email with a direct link.
On every phone
Public site · 08 / 21

On every phone

Each theme has a full phone layout: a full-screen menu, stacked sections and touch-friendly sliders.

How to use
  1. Nothing to set: the site adapts on its own.
  2. Preview the phone layout from Themes and look → Phone.
folio.vybev.com
Full-screen menu
Effects · 09 / 21

Full-screen menu

A menu that opens as a circle from the burger, with huge numbered links, contacts and the language switch.

How to use
  1. Pick the menu style in Themes and look: floating pill, full bar or logo centre.
  2. The burger always opens the full-screen menu.
folio.vybev.com
Mega menu with pictures
Effects · 10 / 21

Mega menu with pictures

In the Volt theme, Work opens a panel with the featured project and the latest work.

How to use
  1. Choose the Volt theme.
  2. Mark a project as Featured on home to put it in the panel.
folio.vybev.com
Picture that follows the mouse
Effects · 11 / 21

Picture that follows the mouse

In list layouts, hovering a project or service shows its picture floating under the mouse.

How to use
  1. Choose List with hover picture as the portfolio layout.
  2. Or use the Noir and Studio themes, where services do it too.
folio.vybev.com
Particle portrait
Effects · 12 / 21

Particle portrait

In Mono, the hero picture becomes thousands of points that scatter around the mouse and drift back.

How to use
  1. Choose the Mono theme.
  2. Upload a portrait as the hero picture (a plain background works best).
  3. With no picture, a silhouette is drawn.
folio.vybev.com
Motion you control
Effects · 13 / 21

Motion you control

Opening animation, custom cursor and three motion levels. Visitors who ask their device for less motion get a calm page automatically.

How to use
  1. Open Themes and look → Effects.
  2. Turn the opening animation and the cursor on or off.
  3. Pick motion: full, soft or off.
folio.vybev.com
Dashboard
Back office · 14 / 21

Dashboard

Counts of work, services and posts, new messages, a live preview of the home page and quick actions.

How to use
  1. Log in; the dashboard opens first.
  2. Type in the search box at the top to find any record.
folio.vybev.com
Themes and look with live preview
Back office · 15 / 21

Themes and look with live preview

Six themes, then your colours, fonts, corners, menu style, portfolio layout, effects and home sections — seen live on computer or phone before saving.

How to use
  1. Click a theme card.
  2. Change colours or fonts; empty boxes keep the theme's own.
  3. Switch the preview to Phone to check it.
  4. Press Save the look; nothing changes on the site before that.
folio.vybev.com
Portfolio editor
Back office · 16 / 21

Portfolio editor

Every project with its category, client, year, status and featured flag; a full editor with readiness checks and an AI assistant.

How to use
  1. Open Content → Portfolio.
  2. Press Add work item.
  3. Use Write the story or Suggest key facts to let the AI help.
  4. Follow the readiness list, then publish.
folio.vybev.com
Messages from visitors
Back office · 17 / 21

Messages from visitors

Every form message with the service, budget and page it came from; follow up with a status, an owner and notes.

How to use
  1. Open Messages.
  2. Open a message to see everything the visitor sent.
  3. Set the status (contacted, proposal sent, won…) and who handles it.

TipThe Sales role sees only messages — not content or settings.

folio.vybev.com
Company and texts
Back office · 18 / 21

Company and texts

Name, logos, contacts, social links, every text of the home page, numbers, process, questions and SEO in one place.

How to use
  1. Open Website → Company and texts.
  2. Fill the sections from top to bottom.
  3. Press Save.
folio.vybev.com
Background jobs
Back office · 19 / 21

Background jobs

The workers that notify the team and send emails, with their health and any failed email to send again.

How to use
  1. They are created when you import the files.
  2. Check Settings → Background jobs if mails do not arrive.
folio.vybev.com
Translate side by side
Languages · 20 / 21

Translate side by side

Original on the left, translation on the right, for work, services, categories, team, testimonials, posts and site texts. One click asks the AI for the whole translation.

How to use
  1. Add a language in the platform's Languages.
  2. Open Languages and translations.
  3. Pick a kind and a row, press Translate with AI.
  4. Check and press Save the translation.
folio.vybev.com
The site in the visitor's language
Languages · 21 / 21

The site in the visitor's language

A language switch in the header; every text, menu and button changes, and untranslated rows fall back to the original.

How to use
  1. Add a second language: the switch shows by itself.
  2. Visitors pick EN, VI or any language you added.
01 / 21
Trust

Safe by design

Visitors can write to you; nobody else can write to your site.

Everything escaped

Every text is escaped when printed; rich text is cleaned again on the server.

Roles checked on the server

Owner, Editor and Sales each see and change only their part; every save is checked again.

A form that resists bots

Box-by-box checks, a hidden trap for bots and at most 3 messages per email in 10 minutes.

AI key stays on the server

The AI writes and translates through the server; the browser never sees the key.

Get started

Online in an afternoon

Import the files, pick a theme, fill your work. Queues and workers are created for you.

  1. 1

    Import the files

    Import 00-shared, content, background, work, console, site, i18n and zz-website.

  2. 2

    Give roles

    Pf Owner for you, Pf Editor for content people, Pf Sales for whoever answers messages.

  3. 3

    Pick a theme

    Open Themes and look, choose one of six, adjust colours and save.

  4. 4

    Fill your content

    Company texts, services, projects, team. The AI can draft the texts.

  5. 5

    Add languages

    Add a language, translate with AI, and the switch appears on the site.

Optional

Demo studio

Import zz-demo-data to start from “Northwind Studio” with 10 projects in English and Vietnamese. Remove it later with one switch.

Optional

Connect the AI

Add your AI key in AI settings to write and translate with one click.

Live demo

Click through a real studio site

“Northwind Studio” runs in all six themes, in English and Vietnamese. Want your own theme or a changed feature? Vybev makes it for you.

Six themes, every pageLive theme demo↗Site + back officefolio.vybev.com↗Made withvybev.com→