Preview gallery
About this Skill
A hand-drawn notebook portfolio for an independent developer or small studio. A giant cobalt serif headline sits on warm cream beside a portrait cut into a lilac blob with a taped ID note, and hand-lettered notes, arrows and flowers run through every section. It includes case studies with drawn product previews, services with a live price estimator, about, experience, a journal with full articles, FAQ, newsletter and contact pages.
Picked most often by
About this Skill
Turn your work into a portfolio that feels like a sketchbook: a giant cobalt serif headline on warm cream, your portrait cut into a lilac blob with a taped ID note, and hand-drawn arrows, flowers and underlines that sit inside the layout. The example site has 22 connected pages and arrives as one file that opens offline in any browser.
What you get
- Home with about, services, selected work, experience, process, toolkit, testimonials, notes and a closing call to action
- Case studies with drawn product previews in desktop, mobile and component tabs, plus a work index with filters, search and sort
- Services with fixed-price cards and a live estimator that updates a price range as you choose
- About, experience, a journal with full articles, FAQ, newsletter, privacy, contact and a designed 404
- Young Serif, Figtree, Kalam and Geist Mono embedded with every image, so the page makes no network requests
How to use it
- Share your name, role, projects, services and contact details, plus a portrait if you have one.
- The Skill fills every page, drafts anything missing as plausible placeholder copy and lists it for you to confirm.
- Open the file, try the estimator, filters and forms, and ask for changes in plain words.
Photos and illustrations you do not supply come from your agent's image tool, which may have its own usage charges.
What you need before you start
- You bring
- Your name, role, location and a short introduction, plus a portrait if you have one · Two to six projects with the brief, key decisions and outcome, and the services you offer with prices · Optional: experience, toolkit, testimonials, articles and contact details
- 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 for the portrait, studio and context photos and journal illustrations; optional if you supply your own
- Outside costs
- Photos and illustrations you do not supply are generated with your agent's own image tool, which may incur that tool's usage charges. Product previews are drawn in code, and the finished page makes no network requests. Viewing the example costs nothing.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
What you get
- 22 connected pages: home, work index, four case studies, services with three detail pages, about, experience, a journal with four articles, contact, FAQ, newsletter, privacy and 404
- The doodle look: Young Serif headlines, Figtree text, Kalam hand notes, a lilac portrait blob, tape, arrows and underlines that draw themselves in once
- Working parts: a price estimator, work filters with search and sort, case-study preview tabs, a testimonial carousel, FAQ tabs and validated forms, in one offline file
Good fit
- Front-end developers and product designers who want a portfolio with personality rather than a dark template
- Small studios, illustrators and indie product makers who can map their work onto case studies, services and notes
- Freelancers who want to show prices and process up front and get better-qualified enquiries
Not for
- Corporate or formal brands; the hand-drawn notes and pastel stages are deliberately playful
- Real message delivery: contact and newsletter forms confirm on the page and need your own backend to send
- Sites without a person to feature; the hero is built around a portrait and a name card
Brand Identity & Visual SystemsWeb Design & Digital ExperiencesBuild Portfolio SiteStyle-lockedEditable OutputDoodle HeroHand NoteId NotePortrait Stage
User reviews
Loading reviews…
