Portfolio builder for frontend engineers
Plinth turns your projects into real case studies, covering the problem, your approach, screenshots, and accessibility and performance notes. It exports your portfolio as one HTML file you can host anywhere. No account, and nothing leaves your browser.
No accountAutosaves locallyOne HTML file out
The case study
A hiring manager has ninety seconds with your portfolio. Plinth gives every project the same clear shape, so they see what was broken, what you did and what changed, and they don't have to guess from a hero image.
01 Problem
Shoppers abandoned one in three checkouts, and keyboard and screen reader users could not finish an order at all.
Plinth asks for the problem first, in your words.
02 Approach
I rebuilt the flow as a single accessible form with inline validation and explicit focus management.
What you did, and why.
03 Screenshots
Up to four, each with required alt text and an optional caption. Images are scaled down and embedded, so the page never breaks.
04 Accessibility
A field of its own for how you made the work usable by everyone. Interviewers notice.
05 Performance
Notes, plus up to four metrics such as LCP 1.2 s or +14% orders.
06 Outcome and links
What changed, then a link to the live site and the repo.
Case study
Checkout redesign
A faster, more accessible checkout for a home goods retailer.
Lead frontend engineer
Problem
Approach
Accessibility
1.2 sLCP
+14%Orders
Outcome
Live site ↗Repo ↗
How it works
01
Profile, case studies, skills and experience, one step at a time. Jump to any step whenever you like.
02
Reorder the sections, and switch between Studio, Midnight and Editorial in the live preview.
03
A checklist shows what's missing, and each item takes you straight to the field that fixes it.
04
Download one self-contained HTML file with no scripts and every image embedded. Host it anywhere.
What's inside
Senior Frontend Engineer
Sam Rivera
I build fast, accessible interfaces for commerce teams.
Case studiesRésumé
Studio, Midnight and Editorial each meet WCAG AA contrast. The preview and the export render the same component, so what you see is what you ship.
Group skills by category and Plinth sorts them by level. Every level is spelled out, so the matrix never relies on colour alone.
The same data as a one-page résumé, always printed black on white. Use your browser's print dialog and keep nothing in sync by hand.
Saved
Everything saves to your browser as you type. Download a JSON backup and restore it anywhere.
WCAG 2.2 AA
Alt text is required on every screenshot. The output has a skip link, real headings and visible focus, and needs no JavaScript at all.
No account and no server. Your portfolio lives in localStorage until you export it.
Try it
Click Start from the example to load a finished portfolio for Sam Rivera, then change a theme, reorder a section or open the résumé. Everything stays in this browser.
Questions
In your browser's localStorage, on this device. Nothing is uploaded. Take a JSON backup to move it to another browser or keep it safe.
Export it and you get one HTML file with your images inside. Upload it to any static host, such as GitHub Pages, Netlify or your own server.
Plinth scales images down as you add them. If the browser still runs out of room, it tells you, keeps your work in memory and tries again on your next change.
That's who it's shaped for: case studies with accessibility and performance notes, and a skills matrix of frameworks and tooling. Anyone who ships interfaces will feel at home.
No. It's a static page that runs in your browser.
Give them one worth reading. It takes an evening, not a weekend.
Build your portfolio