Portfolio Page
A personal portfolio with working discipline filters and a pointer-responsive work grid.
DOM + CSS0 deps1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
About this page 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.
