{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-portfolio", "title": "Folio: designer portfolio", "author": "Ballmac ", "description": "A bold five-page portfolio: a huge intro with inline colour pills, a work grid that reveals each result on hover and focus, an about bento, a case study with a sticky fact sheet and contents list, writing and a uses page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/blur-fade.json", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/marquee.json", "https://ui.ballmac.com/r/table-of-contents.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/templates/portfolio/portfolio-fonts.ts", "content": "// Ballmac UI: Portfolio template fonts. https://ui.ballmac.com/templates/template-portfolio\nimport { Bricolage_Grotesque, Geist_Mono } from \"next/font/google\"\n\nexport const portfolioSans = Bricolage_Grotesque({ variable: \"--portfolio-sans\", subsets: [\"latin\"], axes: [\"opsz\", \"wdth\"], display: \"swap\", preload: false })\nexport const portfolioMono = Geist_Mono({ variable: \"--portfolio-mono\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-fonts.ts" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-data.ts", "content": "import type { MediaSource } from \"@/components/ballmac/media\"\n\n// Ballmac UI: Portfolio sample content. https://ui.ballmac.com/templates/template-portfolio\n\nexport type PortfolioProject = {\n slug: string\n title: string\n client: string\n year: string\n discipline: \"Product\" | \"Brand\" | \"Systems\"\n blurb: string\n result: string\n tags: string[]\n /** Which painted cover to draw (0 to 5). */\n cover: number\n /** Your own image instead of the painted art: an image URL (give it imageAlt), an object with alt text and a dark-mode file, or your own element. */\n image?: MediaSource\n /** Describes `image` when it is a plain URL. */\n imageAlt?: string\n}\n\nexport const projects: PortfolioProject[] = [\n { slug: \"fernhill\", title: \"Rebuilding onboarding\", client: \"Fernhill\", year: \"2026\", discipline: \"Product\", blurb: \"A first-run flow that gets teams to their first invoice in one sitting.\", result: \"+34% activation\", tags: [\"Product design\", \"Research\", \"Prototyping\"], cover: 0 },\n { slug: \"lumen\", title: \"A design system in six weeks\", client: \"Lumen Health\", year: \"2025\", discipline: \"Systems\", blurb: \"Tokens, 60 components and the docs that made engineers actually use them.\", result: \"-40% handoff time\", tags: [\"Design systems\", \"Documentation\"], cover: 1 },\n { slug: \"paddock\", title: \"Identity for a riding school\", client: \"Paddock\", year: \"2025\", discipline: \"Brand\", blurb: \"A mark, a typeface pairing and a handbook for a school that outgrew its logo.\", result: \"3 offices, 1 look\", tags: [\"Brand\", \"Print\", \"Wayfinding\"], cover: 2 },\n { slug: \"halcyon\", title: \"A calmer banking app\", client: \"Halcyon\", year: \"2024\", discipline: \"Product\", blurb: \"Spending insights that read like a sentence, not a spreadsheet.\", result: \"4.8 App Store rating\", tags: [\"Mobile\", \"Data visualisation\"], cover: 3 },\n { slug: \"tessera\", title: \"Pricing page, tested\", client: \"Tessera\", year: \"2024\", discipline: \"Product\", blurb: \"Six experiments, one clear winner and a page the sales team stopped apologising for.\", result: \"+22% trial starts\", tags: [\"Experimentation\", \"Copy\"], cover: 4 },\n { slug: \"quanta\", title: \"Tokens that travel\", client: \"Quanta\", year: \"2023\", discipline: \"Systems\", blurb: \"A theming layer that let one product ship in nine brands.\", result: \"9 brands, 1 codebase\", tags: [\"Design systems\", \"Tokens\"], cover: 5 },\n]\n\nexport type PortfolioPost = { slug: string; title: string; date: string; read: number; tag: \"Process\" | \"Craft\" | \"Career\"; excerpt: string }\n\nexport const posts: PortfolioPost[] = [\n { slug: \"p1\", title: \"The first-run checklist nobody wants to ship\", date: \"2026-08-14\", read: 7, tag: \"Process\", excerpt: \"Why the thing that tests best is usually the thing that annoys the team.\" },\n { slug: \"p2\", title: \"Stop designing empty states last\", date: \"2026-05-02\", read: 5, tag: \"Craft\", excerpt: \"Empty is the first thing every new user sees. Treat it that way.\" },\n { slug: \"p3\", title: \"What I learned from deleting 40 components\", date: \"2026-02-19\", read: 9, tag: \"Process\", excerpt: \"A design system is a garden. A small, tidy one beats a sprawling one.\" },\n { slug: \"p4\", title: \"Going independent after nine years\", date: \"2025-11-07\", read: 6, tag: \"Career\", excerpt: \"The money, the loneliness and the three clients that made it work.\" },\n { slug: \"p5\", title: \"A defence of the boring button\", date: \"2025-06-23\", read: 4, tag: \"Craft\", excerpt: \"Novelty has a cost. Spend it where it pays.\" },\n { slug: \"p6\", title: \"How I run a design review\", date: \"2025-03-11\", read: 8, tag: \"Process\", excerpt: \"Four questions, one hour and no one defending their pixels.\" },\n]\n\nexport const uses: { group: string; items: { name: string; note: string }[] }[] = [\n { group: \"Hardware\", items: [{ name: \"MacBook Pro 14″\", note: \"M3 Pro, 36 GB. Mostly plugged into a desk shelf in Lisbon.\" }, { name: \"Studio Display\", note: \"The only monitor I have trusted for colour.\" }, { name: \"Keychron Q1\", note: \"Brown switches. Loud enough that my partner has opinions.\" }, { name: \"iPad Pro + Pencil\", note: \"Sketches, critique markup and reading.\" }] },\n { group: \"Software\", items: [{ name: \"Figma\", note: \"Design, prototypes and the occasional diagram.\" }, { name: \"Linear\", note: \"Where projects and promises go to be counted.\" }, { name: \"Things\", note: \"Personal tasks. Never work tasks.\" }, { name: \"Raycast\", note: \"Launcher, clipboard history and window layouts.\" }] },\n { group: \"Type\", items: [{ name: \"Bricolage Grotesque\", note: \"This site, because I wanted something with a personality.\" }, { name: \"Geist Mono\", note: \"Small labels and code.\" }, { name: \"Söhne\", note: \"For client work where budget allows.\" }] },\n { group: \"Reading\", items: [{ name: \"Refactoring UI\", note: \"Still the best short book on interface design.\" }, { name: \"The Design of Everyday Things\", note: \"Reread every two years.\" }, { name: \"Field notebooks\", note: \"Paper, always. Three at a time.\" }] },\n]\n\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-data.ts" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-theme.tsx", "content": "// Ballmac UI: Portfolio template shell. https://ui.ballmac.com/templates/template-portfolio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight, Menu, X } from \"lucide-react\"\n\nimport { CopyButton } from \"@/components/ballmac/copy-button\"\nimport { portfolioMono, portfolioSans } from \"@/components/ballmac/templates/portfolio/portfolio-fonts\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype PortfolioPage = \"home\" | \"work\" | \"case\" | \"writing\" | \"uses\"\ntype PortfolioHrefs = Record\n\nconst defaultHrefs: PortfolioHrefs = { home: \"/portfolio\", work: \"/portfolio/work\", case: \"/portfolio/work/fernhill\", writing: \"/portfolio/writing\", uses: \"/portfolio/uses\" }\n\n/** Portfolio's palette: gallery white and ink with one acid lime. In dark mode the lime becomes the light on a black wall. */\nconst portfolioCss = `\n.portfolio-theme,body:not(:has([data-gallery])):has(.portfolio-theme){--background:oklch(0.988 0.003 100);--foreground:oklch(0.16 0.01 100);--card:oklch(1 0 0);--card-foreground:oklch(0.16 0.01 100);--popover:oklch(1 0 0);--popover-foreground:oklch(0.16 0.01 100);--primary:oklch(0.16 0.01 100);--primary-foreground:oklch(0.988 0.003 100);--secondary:oklch(0.958 0.008 100);--secondary-foreground:oklch(0.16 0.01 100);--muted:oklch(0.958 0.008 100);--muted-foreground:oklch(0.46 0.012 100);--accent:oklch(0.94 0.014 110);--accent-foreground:oklch(0.16 0.01 100);--border:oklch(0.16 0.01 100 / 14%);--input:oklch(0.16 0.01 100 / 20%);--ring:oklch(0.16 0.01 100);--surface:oklch(0.968 0.006 100);--destructive:oklch(0.54 0.22 28);--chart-1:oklch(0.9 0.19 125);--chart-2:oklch(0.72 0.17 38);--chart-3:oklch(0.78 0.12 235);--chart-4:oklch(0.76 0.13 300);--chart-5:oklch(0.86 0.09 75);--portfolio-on-accent:oklch(0.16 0.01 100);--radius:1rem}\n.dark .portfolio-theme,.dark body:not(:has([data-gallery])):has(.portfolio-theme){--background:oklch(0.14 0.004 100);--foreground:oklch(0.96 0.006 100);--card:oklch(0.18 0.005 100);--card-foreground:oklch(0.96 0.006 100);--popover:oklch(0.2 0.006 100);--popover-foreground:oklch(0.96 0.006 100);--primary:oklch(0.96 0.006 100);--primary-foreground:oklch(0.16 0.01 100);--secondary:oklch(0.23 0.006 100);--secondary-foreground:oklch(0.96 0.006 100);--muted:oklch(0.22 0.006 100);--muted-foreground:oklch(0.72 0.012 100);--accent:oklch(0.26 0.01 110);--accent-foreground:oklch(0.96 0.006 100);--border:oklch(1 0 0 / 12%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.9 0.19 125);--surface:oklch(0.165 0.005 100);--destructive:oklch(0.7 0.19 28);--chart-1:oklch(0.9 0.19 125);--chart-2:oklch(0.72 0.17 38);--chart-3:oklch(0.76 0.12 235);--chart-4:oklch(0.74 0.13 300);--chart-5:oklch(0.84 0.09 75);--portfolio-on-accent:oklch(0.16 0.01 100)}\nbody:not(:has([data-gallery])):has(.portfolio-theme){font-family:var(--portfolio-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\n/** A painted cover: abstract shapes in the chart colours standing in for a screenshot. */\nfunction Cover({ variant, className, image, imageAlt }: { variant: number; className?: string; image?: MediaSource; imageAlt?: string }) {\n const v = ((variant % 6) + 6) % 6\n if (image) return \n return (\n
\n {v === 0 && (<>
{[0, 1, 2].map((i) =>
)}
)}\n {v === 1 && (<>
{[chart(1), chart(2), chart(3), chart(4), chart(5), chart(1), chart(3), chart(2)].map((c, i) =>
)}
)}\n {v === 2 && (<>
)}\n {v === 3 && (<>
{[40, 70, 55, 90, 65].map((h, i) =>
)}
)}\n {v === 4 && (<>
{[0, 1, 2].map((i) =>
)}
)}\n {v === 5 && (<>
{[0, 1, 2, 3, 4].map((i) =>
)})}\n
\n )\n}\nfunction chart(n: number) {\n return [\"bg-chart-1\", \"bg-chart-2\", \"bg-chart-3\", \"bg-chart-4\", \"bg-chart-5\"][(n - 1) % 5]\n}\n\nconst links: { key: PortfolioPage; label: string }[] = [\n { key: \"work\", label: \"Work\" },\n { key: \"writing\", label: \"Writing\" },\n { key: \"uses\", label: \"Uses\" },\n]\n\ntype PortfolioShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: PortfolioPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Portfolio's frame: a wordmark with an availability chip, a quiet nav and a huge email in the footer. */\nfunction PortfolioShell({ page, hrefs: overrides, className, style, children, ...props }: PortfolioShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n React.useEffect(() => {\n const classes = [portfolioSans.variable, portfolioMono.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n const active = page === \"case\" ? \"work\" : page\n return (\n \n \n
\n
\n \n IC\n Ines Calder\n \n
\n {open && (\n \n )}\n
\n {children}\n
\n
\n

Have a product that needs care?

\n \n
\n

© 2026 Ines Calder. Designed and built in Lisbon.

\n
    {[\"LinkedIn\", \"Read.cv\", \"Are.na\", \"RSS\"].map((l) =>
  • {l}
    • )}
\n
\n
\n
\n
\n )\n}\n\nexport { Cover, PortfolioShell, defaultHrefs as portfolioDefaultHrefs, type PortfolioHrefs, type PortfolioPage, type PortfolioShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-theme.tsx" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-home.tsx", "content": "// Ballmac UI: Portfolio home page. https://ui.ballmac.com/templates/template-portfolio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDownRight, ArrowUpRight, BookOpen, Headphones, Hammer, MapPin } from \"lucide-react\"\n\nimport { BlurFade } from \"@/components/ballmac/blur-fade\"\nimport { Marquee } from \"@/components/ballmac/marquee\"\nimport { posts, projects } from \"@/components/ballmac/templates/portfolio/portfolio-data\"\nimport { Cover, PortfolioShell, type PortfolioHrefs } from \"@/components/ballmac/templates/portfolio/portfolio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--portfolio-mono)\" } as const\n\nconst quotes = [\n [\"Ines made the hard thing feel obvious. Our activation rate said so.\", \"Sasha Petrova, Fernhill\"],\n [\"The calmest designer I have ever worked with, and the sharpest.\", \"Marcus Lindqvist, Halcyon\"],\n [\"She cut our component library in half and everyone thanked her.\", \"Priya Raman, Lumen Health\"],\n [\"We hired Ines for a logo and got a company worth working for.\", \"Tom Beltrán, Paddock\"],\n]\n\nfunction Pill({ className, children }: { className?: string; children?: React.ReactNode }) {\n return {children}\n}\n\ntype PortfolioHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Portfolio home page: a bold intro, a work grid whose cards reveal a result on hover and focus, an about bento, kind words and recent writing. */\nfunction PortfolioHome({ hrefs, ...props }: PortfolioHomeProps) {\n const h = { work: hrefs?.work ?? \"/portfolio/work\", case: hrefs?.case ?? \"/portfolio/work/fernhill\", writing: hrefs?.writing ?? \"/portfolio/writing\" }\n return (\n \n
\n
\n \n

Independent product designer · 9 years · Lisbon

\n

\n I design products people finish using, and teams enjoy shipping.\n

\n \n \n
\n\n
\n \n {[\"Product design\", \"Design systems\", \"Prototyping\", \"Research\", \"Brand\", \"Workshops\", \"Art direction\", \"Front-end\"].map((s) => {s})}\n \n
\n\n
\n
\n

Selected work

\n All projects \n
\n \n
\n\n
\n

About

\n
\n
\n
\n
IC
\n

Hi, I’m Ines. I turn tangled products into ones that feel obvious.

\n

Nine years across fintech, health and developer tools. Before going independent I led design at Fernhill and Lumen Health.

\n
\n
\n

Based in

\n

Lisbon

\n

Working across Europe and the US East Coast.

\n
\n
\n
\n
9
years designing
\n
40+
products launched
\n
\n
\n
\n

Right now

\n
    \n {[[Hammer, \"Building\", \"A pricing experiment kit for Tessera\"], [BookOpen, \"Reading\", \"The Timeless Way of Building\"], [Headphones, \"Listening\", \"Fela Kuti, on repeat\"]].map(([Icon, k, v]) => {\n const I = Icon as typeof Hammer\n return

  • {k as string}

    {v as string}

    • \n })}\n
\n
\n
\n
\n\n
\n \n {quotes.map(([q, who]) => (\n
\n
“{q}”
\n
{who}
\n
\n ))}\n \n
\n\n
\n
\n

Recent writing

\n All posts \n
\n \n
\n
\n \n )\n}\n\nexport { PortfolioHome, type PortfolioHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-home.tsx" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-work.tsx", "content": "// Ballmac UI: Portfolio work page. https://ui.ballmac.com/templates/template-portfolio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport { projects } from \"@/components/ballmac/templates/portfolio/portfolio-data\"\nimport { Cover, PortfolioShell, type PortfolioHrefs } from \"@/components/ballmac/templates/portfolio/portfolio-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Filter = \"All\" | \"Product\" | \"Brand\" | \"Systems\"\nconst filters: Filter[] = [\"All\", \"Product\", \"Systems\", \"Brand\"]\n\ntype PortfolioWorkProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Portfolio work page: every project, filtered by discipline, in a staggered grid with a result on hover. */\nfunction PortfolioWork({ hrefs, ...props }: PortfolioWorkProps) {\n const [filter, setFilter] = React.useState(\"All\")\n const shown = projects.filter((p) => filter === \"All\" || p.discipline === filter)\n const caseHref = hrefs?.case ?? \"/portfolio/work/fernhill\"\n return (\n \n
\n

Work · 2023 to 2026

\n

Six projects I’m proud of, and what they changed.

\n
\n {filters.map((f) => {\n const n = f === \"All\" ? projects.length : projects.filter((p) => p.discipline === f).length\n return (\n \n )\n })}\n
\n

{shown.length} projects shown

\n \n
\n \n )\n}\n\nexport { PortfolioWork, type PortfolioWorkProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-work.tsx" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-case.tsx", "content": "// Ballmac UI: Portfolio case study page. https://ui.ballmac.com/templates/template-portfolio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight } from \"lucide-react\"\n\nimport { TableOfContents } from \"@/components/ballmac/table-of-contents\"\nimport { projects } from \"@/components/ballmac/templates/portfolio/portfolio-data\"\nimport { Cover, PortfolioShell, type PortfolioHrefs } from \"@/components/ballmac/templates/portfolio/portfolio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--portfolio-mono)\" } as const\nconst h2 = \"scroll-mt-24 text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl\"\nconst body = \"text-muted-foreground mt-5 max-w-2xl text-lg leading-relaxed text-pretty\"\n\nconst meta = [\n [\"Role\", \"Lead product designer\"],\n [\"Team\", \"2 designers, 5 engineers, 1 PM\"],\n [\"Timeline\", \"14 weeks, Mar to Jun 2026\"],\n [\"Tools\", \"Figma, Linear, Maze, Framer\"],\n]\n\nconst process = [\n [\"Week 1–2\", \"Listen\", \"Watched 14 new teams try to get started. Nine gave up before inviting a colleague.\"],\n [\"Week 3–5\", \"Frame\", \"Reduced the goal to one sentence: send your first invoice in one sitting.\"],\n [\"Week 6–10\", \"Build and test\", \"Four prototypes, 22 tests. We cut the setup from nine steps to three.\"],\n [\"Week 11–14\", \"Ship and measure\", \"Rolled out behind a flag to 10, then 50, then 100 percent of new signups.\"],\n]\n\nconst results = [[\"+34%\", \"of new teams activate in their first week\"], [\"−58%\", \"time to first invoice\"], [\"9 → 3\", \"setup steps\"], [\"4.7\", \"onboarding satisfaction, up from 3.9\"]]\n\ntype PortfolioCaseProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Portfolio case study: a sticky fact sheet, a contents list that follows your reading, the process as a timeline and results in big numbers. */\nfunction PortfolioCase({ hrefs, ...props }: PortfolioCaseProps) {\n const next = projects[1]\n return (\n \n
\n
\n

Work / Fernhill

\n

Rebuilding onboarding so teams reach their first invoice in one sitting.

\n \n
\n\n
\n \n\n
\n
\n

Overview

\n

Fernhill is invoicing software for small studios. It was good at the second month and bad at the first day: almost half of new teams never sent an invoice. I led a 14-week rebuild of the first-run experience.

\n
\n
\n

The problem

\n

The old flow asked for nine things before it showed any value: company details, tax settings, a logo, bank info, a template, a first customer. Every step was reasonable. Together they were a wall.

\n
“I just wanted to send one invoice. I closed the tab at step six.”
Participant 7, studio owner
\n
\n
\n

Process

\n
    \n {process.map(([when, title, text]) => (\n
  1. \n {when}\n {title}\n {text}\n
    2. \n ))}\n
\n
\n
\n

The solution

\n

One screen asks the only question that matters: who are you invoicing? Everything else is a default you can change later, and the first invoice is a draft by the time you finish typing the customer’s name.

\n
\n
\n
\n

Results

\n
\n {results.map(([v, l], i) => (\n
\n
{v}
\n
{l}
\n
\n ))}\n
\n
\n
\n

What I’d do differently

\n

I would have involved sales earlier. They knew which questions prospects asked on day one, and two of them became default answers we had to bolt on after launch.

\n
\n
\n\n \n
\n\n
\n \n

Next project

{next.title}

{next.client}

\n \n \n
\n
\n \n )\n}\n\nexport { PortfolioCase, type PortfolioCaseProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-case.tsx" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-writing.tsx", "content": "// Ballmac UI: Portfolio writing page. https://ui.ballmac.com/templates/template-portfolio\n\"use client\"\n\nimport * as React from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { posts } from \"@/components/ballmac/templates/portfolio/portfolio-data\"\nimport { PortfolioShell, type PortfolioHrefs } from \"@/components/ballmac/templates/portfolio/portfolio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--portfolio-mono)\" } as const\ntype Tag = \"All\" | \"Process\" | \"Craft\" | \"Career\"\nconst tags: Tag[] = [\"All\", \"Process\", \"Craft\", \"Career\"]\nconst dateFmt = new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" })\n\ntype PortfolioWritingProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Portfolio writing page: posts grouped by year, with a topic filter, a search and the reading time of each. */\nfunction PortfolioWriting({ hrefs, ...props }: PortfolioWritingProps) {\n const [tag, setTag] = React.useState(\"All\")\n const [query, setQuery] = React.useState(\"\")\n const q = query.trim().toLowerCase()\n const shown = posts.filter((p) => (tag === \"All\" || p.tag === tag) && (!q || (p.title + p.excerpt).toLowerCase().includes(q)))\n const years = [...new Set(shown.map((p) => p.date.slice(0, 4)))]\n return (\n \n
\n

Writing

\n

Notes on making things people use.

\n
\n
\n {tags.map((t) => )}\n
\n
\n \n setQuery(e.target.value)} placeholder=\"Search posts\" className=\"bg-card focus-visible:ring-ring/50 placeholder:text-muted-foreground h-10 w-full rounded-full border pe-4 ps-10 text-sm outline-none focus-visible:ring-[3px]\" />\n
\n
\n

{shown.length} posts

\n {years.length === 0 &&

No posts match. Try another topic.

}\n {years.map((y) => (\n
\n

{y}

\n \n
\n ))}\n
\n \n )\n}\n\nexport { PortfolioWriting, type PortfolioWritingProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-writing.tsx" }, { "path": "registry/ballmac/components/templates/portfolio/portfolio-uses.tsx", "content": "// Ballmac UI: Portfolio uses page. https://ui.ballmac.com/templates/template-portfolio\nimport * as React from \"react\"\n\nimport { uses } from \"@/components/ballmac/templates/portfolio/portfolio-data\"\nimport { PortfolioShell, type PortfolioHrefs } from \"@/components/ballmac/templates/portfolio/portfolio-theme\"\n\nconst mono = { fontFamily: \"var(--portfolio-mono)\" } as const\n\ntype PortfolioUsesProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Portfolio uses page: the tools, hardware and books behind the work, in plain lists. */\nfunction PortfolioUses({ hrefs, ...props }: PortfolioUsesProps) {\n return (\n \n
\n

Uses · updated September 2026

\n

What’s on my desk, and why.

\n

People ask. Nothing here is sponsored, and most of it is older than it should be.

\n
\n {uses.map((g) => (\n
\n

{g.group}

\n
    \n {g.items.map((i) => (\n
  • \n {i.name}\n {i.note}\n
    • \n ))}\n
\n
\n ))}\n
\n
\n \n )\n}\n\nexport { PortfolioUses, type PortfolioUsesProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/portfolio/portfolio-uses.tsx" }, { "path": "registry/ballmac/app/portfolio/page.tsx", "content": "// Ballmac UI: Portfolio template route. https://ui.ballmac.com/templates/template-portfolio\nimport type { Metadata } from \"next\"\n\nimport { PortfolioHome } from \"@/components/ballmac/templates/portfolio/portfolio-home\"\n\nexport const metadata: Metadata = {\n title: \"Ines Calder: product designer\",\n description: \"Independent product designer in Lisbon. Selected work, writing and how to get in touch.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/portfolio/page.tsx" }, { "path": "registry/ballmac/app/portfolio/work/page.tsx", "content": "// Ballmac UI: Portfolio template route. https://ui.ballmac.com/templates/template-portfolio\nimport type { Metadata } from \"next\"\n\nimport { PortfolioWork } from \"@/components/ballmac/templates/portfolio/portfolio-work\"\n\nexport const metadata: Metadata = {\n title: \"Work · Ines Calder\",\n description: \"Six projects and what they changed.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/portfolio/work/page.tsx" }, { "path": "registry/ballmac/app/portfolio/work/[slug]/page.tsx", "content": "// Ballmac UI: Portfolio template route. https://ui.ballmac.com/templates/template-portfolio\nimport type { Metadata } from \"next\"\n\nimport { PortfolioCase } from \"@/components/ballmac/templates/portfolio/portfolio-case\"\n\nexport const metadata: Metadata = {\n title: \"Rebuilding onboarding · Ines Calder\",\n description: \"A case study: how a first-run flow got teams to their first invoice in one sitting.\",\n}\n\n// One layout for every case study. Load the project by params.slug from your data when you add more.\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/portfolio/work/[slug]/page.tsx" }, { "path": "registry/ballmac/app/portfolio/writing/page.tsx", "content": "// Ballmac UI: Portfolio template route. https://ui.ballmac.com/templates/template-portfolio\nimport type { Metadata } from \"next\"\n\nimport { PortfolioWriting } from \"@/components/ballmac/templates/portfolio/portfolio-writing\"\n\nexport const metadata: Metadata = {\n title: \"Writing · Ines Calder\",\n description: \"Notes on making things people use.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/portfolio/writing/page.tsx" }, { "path": "registry/ballmac/app/portfolio/uses/page.tsx", "content": "// Ballmac UI: Portfolio template route. https://ui.ballmac.com/templates/template-portfolio\nimport type { Metadata } from \"next\"\n\nimport { PortfolioUses } from \"@/components/ballmac/templates/portfolio/portfolio-uses\"\n\nexport const metadata: Metadata = {\n title: \"Uses · Ines Calder\",\n description: \"The tools, hardware and books behind the work.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/portfolio/uses/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "portfolio", "designer", "case study", "personal site", "writing", "bento" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page personal portfolio. Change the content in portfolio-data.ts, the palette in portfolioCss, and the painted covers in the Cover component (or replace them with images).", "whenToUse": [ "Personal sites for designers, developers and independent consultants", "A bold, typographic portfolio with a real case-study layout" ], "whenNotToUse": [ "Agencies with a team and services pages (use template-studio)" ], "composesWith": [ "marquee", "table-of-contents", "blur-fade" ], "a11y": [ { "keys": "Tab to a work card", "action": "Reveals the result on the card, the same as hovering it" }, { "keys": "Enter / Space on a filter", "action": "Filters the list and announces the number shown" } ], "customization": [ "Replace Cover with or next/image when you have real screenshots", "Edit portfolioCss for the light and dark palettes", "Swap the font in portfolio-fonts.ts" ] }, "examples": [ "template-portfolio-demo", "template-portfolio-work", "template-portfolio-case", "template-portfolio-writing", "template-portfolio-uses" ], "url": "https://ui.ballmac.com/components/template-portfolio" }, "docs": "Pages are at /portfolio, /portfolio/work, /portfolio/work/[slug], /portfolio/writing and /portfolio/uses. Edit your projects, posts and kit in portfolio-data.ts; the palette is the portfolioCss string in portfolio-theme.tsx.", "categories": [ "templates" ], "type": "registry:block" }