Portfolio Page
A personal portfolio with working discipline filters and a pointer-responsive work grid.
- Category
- Templates
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
const PROJECTS = [
{ name: "Compass", tag: "Product design" },
{ name: "Kiln", tag: "Brand identity" },
{ name: "Ferry", tag: "Web app" },
{ name: "Loop", tag: "Mobile" },
];
function Nav({ name }: { name: string }) {
return (
<header className="flex items-center justify-between px-6 py-6">
<span className="font-sans font-bold">{name}</span>
<nav className="flex gap-6 text-sm text-neutral-400">
<a href="#">Work</a>
<a href="#">About</a>
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this template
A portfolio's job is fundamentally different from a SaaS landing page's, and the composition reflects that: no CTA button anywhere, because the visitor is already here to look at work, not to be sold something. The nav is reduced to three links and a name, and the intro treats the name itself as the largest type on the page — for a personal site the person is the brand, not a logo mark. Project covers are flat opacity-varied divs rather than photos, which is the non-obvious choice worth keeping even after real work is added: it keeps every card visually consistent in weight even when the actual project screenshots vary wildly in color and density. The footer's contact email is generated from the name prop rather than hardcoded, so renaming the person updates every reference to them in one place. Caveat: this template has no case-study detail page — clicking a project card currently goes nowhere, which is the obvious next piece to build once real projects exist.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Blog Post Page
templatesA long-form article page with real reading progress and a ToC that tracks scroll.
Changelog Page
templatesA changelog with working tag filters and releases that expand in place.
Documentation Page
templatesA docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.