Portfolio Hero
One line in, one self-contained index.html out: an editorial portfolio hero — a name set huge, a role line, a drawn portrait medallion, and a short row of work links, all on a warm editorial ground.
We made two examples: a cool grey-lilac studio face for Vibary, and a warm terracotta one for Mara Voss, a ceramicist in Lisbon. Both keep the huge name with its dash, the muted role line, the round initials medallion with the link row and availability dot beneath, and the staggered rise.
The name, the role, the medallion's initials and the four work links all come from the fields. The medallion is a drawn stand-in for a portrait, so swap in a real image when you have one. The name as the largest element, the role beneath it, the medallion, the link row and the staggered entrance always hold.
Generated for this library
Input
Brief an editorial portfolio face for a Vibary designer
Name Vibary — Studio
Role AI design & vibe coding, in the browser
Initials VS
Links Skills · Motion · Palettes · Writing
Avail Open for new work
Palette --ground #efeee9 · --ink #17171a · --muted #6b6b70 ·
--accent #5b5bd6 · --panel #ffffff
Returned 1 file · index.html · full-viewport · no page scroll
name set huge in an editorial serif, holding the left
role one muted line beneath the name
medallion a round panel drawn from the palette, the initials
VS set inside — a stand-in for the portrait
links a short row, underlining on hover, with an
availability dot and line
entrance name settles, then role → medallion → links rise;
reduced motion drops the travelYou fill in 7 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The name
- 3The role line
- 4The initials (for the medallion)
- 5The work links
- 6The availability mark
- 7The palette (one :root block)
Portfolio Hero
What this makes
One line in, one self-contained index.html out: an editorial portfolio hero — a name set huge, a role line, a drawn portrait medallion, and a short row of work links, all on a warm editorial ground.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six slot lines — the name and role carry the page; the initials draw the medallion; the links point onward.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser — it is the whole front page, ready to sit at your domain.
- Drop a real portrait into the medallion later; the composition already holds its place.
What you swap
- The brief (one line)
- an editorial portfolio face for a Vibary designer
- The name
- Vibary — Studio
- The role line
- AI design & vibe coding, in the browser
- The initials (for the medallion)
- VS
- The work links
- Skills · Motion · Palettes · Writing
- The availability mark
- Open for new work
- The palette (one :root block)
- --ground #efeee9 · --ink #17171a · --muted #6b6b70 · --accent #5b5bd6 · --panel #ffffff
Before it runs
- A name worth setting large — one or two words; a title with a tagline is a paragraph, not a name.
- Three to five work links, not a sitemap — the front page points, it does not list.
- A palette of five values, warm or cool — the ground and the medallion are drawn from them.
When to reach for it
When someone needs a front page for their work — a personal site, an about hero, a designer's calling card. The editorial composition is fixed; the name, the role and the links are yours.
What changes
- A single index.html with no build step and no outside request: one full-viewport portfolio hero without page scroll.
- The name set as the largest thing on the screen, editorial and wide, with a role line beneath it.
- A portrait medallion drawn in CSS from initials — no hosted photo — standing in for the face until a real one replaces it.
- A short row of work links along one edge, quiet and evenly set, and a small availability mark.
- One entrance: the name settles, then the role, the medallion and the links rise in turn; with reduced motion the travel is dropped.
Pairs with
- 404 Error PageOne line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
- Count-Up StatsOne line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
- Mobile Profile PageOne line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.