Cobalt Serif Freelancer Site
+6Bento Designer Portfoliov1.0.2
Use this Skill to build portfolio site.
Rising
5.011 downloads0 likes1 saves
$4.99
What do I get when I buy this Skill?Build a designer portfolio with a pale grey stage, a two-line headline with a faded second line, floating bento cards around a red portrait tile, giant faded lettering in the footer and quiet case-study pages. Filters, booking and forms all work, and you get one self-contained file that opens in any browser and works offline.
Picked most often by
Updated Oct 3, 2026
Similar Skills
View all skills+6
What you get
- One self-contained portfolio file for your practice that opens in any browser and works offline, with fonts and images built in; a port into your own framework project when you have one.
- Case studies with identity boards, service pages with price summaries, a journal, and working filters, search, sort, grid and list views and a booking widget.
- The signature look in a 28-page example with 14 purpose-made images: floating cards, a red portrait tile, faded type, calm motion and full reduced-motion support.
Good fit
- Independent brand, web and product designers who want a portfolio they can publish as is.
- Small studios that can turn the red tile into a founder or team portrait and write as we.
- Designers who sell fixed-fee services and want clear service pages, a process timeline and a booking flow.
Not for
- Real calendar booking, email delivery or payments; the forms show honest demo confirmations only.
- Photographers or agencies that need a dense, full-bleed image gallery instead of quiet case studies.
- Presenting the fictional Elin Saro, her clients or quotes as real work.
Brand IdentityDigital Publications & Web PagesBuild Portfolio SiteStyle-lockedEditable OutputBentoGhostPortraitProcess
About this Skill
Bento Designer Portfolio builds a portfolio site for an independent designer, studio or small brand: a pale grey stage, a two-line headline with a faded second line, six floating bento cards around a red portrait tile, and quiet case-study pages. The example is the fictional Rotterdam designer Elin Saro, with 28 connected pages where every filter, form and booking step works.
What you get
- One self-contained website file that opens in any browser and works offline, with fonts and images built in. If you already have a framework project, the design is ported into it instead.
- A full portfolio: a work index, six case studies with identity boards, about, services with four detail pages and price summaries, process, reviews, a journal with four articles, booking, FAQ, newsletter, privacy, colophon and a designed not-found page.
- Working controls: category chips with counts, live search, sort, grid and list views, a booking widget with day, time and topic, and forms with validation and success states.
- One art direction for 14 images: soft north light, pale warm-grey surfaces and one red thing, with each client's identity shown as real objects rather than screens.
- Calm motion: cards settle in once, sections reveal on scroll, and reduced-motion settings make everything instant.
How to use it
- Share your name or studio, what you design, your projects with clients and outcomes, services, prices and contact details. Anything missing is drafted as a plausible placeholder and listed for you to confirm.
- Send a waist-up portrait for the red tile and photos of your work, or let the agent generate project still lifes in the same soft light. Generated portraits are stand-ins until you replace them.
- Open every page on desktop and phone, try the filters, booking and forms, and ask for changes.
Type is set in Instrument Sans and Geist Mono, embedded in the file. New images come from your agent's own image tool and may carry its usage charges.
What you need before you start
- You bring
- Your name or studio, what you design and a short introduction · Projects with client, year, category and outcome, plus services, prices and contact details · A waist-up portrait and project photos, or approval to generate stand-in images
- Dependencies
- Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent, or your own photos, for the portrait and project images · A modern browser for previewing and reviewing every page
- Outside costs
- New project and portrait images are generated with your agent's own image tool, which may charge for usage. Without one, supply your own photos; six neutral images can stay as placeholders. Viewing the example costs nothing.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…