Odile Varga example developer portfolio built by the Skill: a near-black page with a floating pill nav, a large headline ending in one cyan clause, a two-tone introduction and a row of employer marks

The same home page scrolled to Selected work: product windows for a markdown editor and a SQL schema map laid on dark stone backdrops

The About page: a portrait of Odile Varga beside the headline I'm Odile. I build software that keeps out of your way, and three lines on how she works

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Similar Skills

View all

Wrenly example gifting app home page built by the Skill: large headline beside a phone showing a birthday card, with sticker cards around it and a dark occasions ticker below

FREE

Gifting App Site

New

Rolling Word Hero

Still Open example podcast home page built by the Skill: a dark blue gradient hero with a large headline, a play button and a small player card, the latest episodes heading below

Product-Led SaaS Landing

What you get

Eleven views around an invented developer named Odile Varga: a home page, four case studies and an archive under work, five articles, talks, a uses page, milestones on about, plus resume, contact and 404.
A product window built in the page for each project, so covers stay crisp and selectable, shown in four card shapes over four stone backdrops.
Interactive parts in place: a command palette, employer tabs, Show More, filters and search for the archive and writing, notes under talks, copy buttons and a contact form that shows each state.

Good fit

Backend, frontend and full-stack developers who want writing, talks and project write-ups at one address.
Freelancers and indie makers wanting a site that says they can be hired, with availability and a working contact form.
Job seekers presenting open-source work, side projects and a one-page resume as one body of work.

Not for

Bright, colorful personal brands: the design is dark only, with a single cyan accent.
Sites that need live star counts or posts from a code host; repository figures are written into the page.
Receiving messages from day one: until you connect a backend, the form just shows a confirmation.

Web designBuild a product websitedeveloper portfoliopersonal sitecase studiesdarkcyan accentcommand paletteeditable-outputsingle-file

Good forBuild a product website

About this Skill

You say/ours-gabbro-dev-portfolio Build my portfolio: a backend developer in Tucson, five talks, five posts and four case studies.

Gabbro Developer Portfolio is a portfolio website skill for Claude Fable 5, for developers who want one calm address for everything they have shipped. Near-black stone and a single cyan line set the mood. The home page leads with one dry sentence, then four case studies, an experience rail, open-source work, recent posts and talks. Every project opens as a full case study.

How it works

The agent collects your roles, projects, posts, talks and tools, or drafts what is missing in your voice and lists it for your approval.
It replaces the sample arrays at the top of the page and the static copy until no sample name remains.
Each project gets a product window suited to your field, and the imagery is planned around your own portrait and talk photos if you have them.
It builds a single offline file, then the validator runs and every route is clicked through at four widths before delivery.

Checked before delivery

validate-portfolio.mjs passes on the built file: one file, no remote requests, one h1 per view, every #/ link, project and post resolves, one cyan clause in a text-only hero, no sample name left
Tabs, Show More, filters, search, the palette, dialogs, copy buttons and both forms work at 390, 768, 1024 and 1440 px and inside a sandboxed frame
Employers, clients, quotes, star counts, talks and dates are the user's, drafted entries are listed in the closing message, and no award or certification is made up

What you need before you start

You bring: Name, one-line role, city and time zone, availability, a two- or three-sentence bio with one personal detail, email and profile links · Two to four employers (role, dates, place, two to four results, stack), two to six projects (problem, constraints, three decisions, results with numbers, a quote, a reflection), small repositories, posts, talks, uses and milestones by year · Your own portrait and any real talk photos if the site is real; otherwise the agent's image tool makes stand-ins
Dependencies: Node.js 18+ on the machine running the agent, to pack the offline file · An internet connection during the build, so both fonts are fetched once and embedded · Optional: an image generation tool for the backdrops and stand-in photos
Outside costs: None
Last tested: v1.0.4 — Claude Code / Codex / Cursor

User reviews

Loading reviews…

FAQ

What format does it ship in?

A single offline file with its fonts and pictures embedded, which opens in a browser or a sandboxed preview. In a framework project, or if you ask, the agent rebuilds those routes and components in your stack.

Are the covers real screenshots?

No. Every cover is a product window built in HTML and CSS over a stone backdrop, so the agent can fill it with details of your work and it stays sharp at any width.

Do the photos need to show me?

On a real site, yes: supply your portrait and any genuine talk photos. The generated faces are only stand-ins, and with no talk photos the talks fall back to slide or waveform thumbnails.

Preview gallery