Doodle Developer Portfolio
A hand-drawn portfolio that still proves you can ship.
Builds a one-page developer portfolio in a hand-drawn doodle style: a fixed doodle vocabulary, sketched section headers, project cards that name your part and one technical decision, and a real code sample.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
Doodle Developer Portfolio
When to use
- Your developer portfolio looks like every other template — same hero, same grid, same stock icons
- You want a portfolio that shows personality (playful, hand-drawn, human) while still proving you can ship real code
- You are a student, bootcamp graduate, or indie hacker who needs a portfolio that stands out to hiring managers and clients
- You have 3–6 real projects and want each one to get a memorable card instead of a generic screenshot
- You want a site you can update by editing one file, not by fighting a page builder
Workflow
- Pick your projects (input: your work → output: project shortlist)
Choose 3–6 projects you actually built and can talk about. For each one, note: what it does in one sentence, what you built (not the team — your part), one technical decision you made and why, and a link (live demo or repo). Cut anything you can't explain in 30 seconds. Three strong projects beat six vague ones. - Define the doodle vocabulary (input: shortlist + your taste → output: doodle style sheet)
Settle the hand-drawn language before building pages: one ink color and one accent color, one hand-drawn font for headings and one readable font for body text, and a small set of recurring doodles (arrows, stars, brackets, underlines, coffee cups, checkmarks). Every doodle on the site comes from this set — consistency is what makes hand-drawn look designed instead of messy. - Sketch the sections (input: style sheet → output: page outline)
Lay out five sections in this order: hero (name, one-line role, one doodle self-portrait or avatar), about (three sentences + a row of tools you actually use), projects (one card per project), code sample (one real snippet with a short explanation), and contact (email + links, nothing else). Each section gets a hand-drawn header — a sketched underline, a circled word, a margin arrow — drawn from your doodle set. - Build the project cards (input: page outline → output: finished project cards)
Each card has: a doodle illustration (a sketched browser window, terminal, phone, or diagram — not a screenshot), the project name, one sentence on what it does, a line on your part ("Built the API and the deploy pipeline"), a line on one technical decision, and links. Keep cards the same size so the grid stays tidy; let the doodles, not the layout, do the varying.
Template preview
Doodle Developer Portfolio — Site Template
One page, five sections, one doodle set used everywhere.
Hero
Name: {name} One-line role: {role in one line — e.g. "I build small tools people actually finish using."} Doodle: {doodle self-portrait / avatar description} Links: {email} | {GitHub} | {other}
About
{Three sentences: who you are, what you build, what you're looking for.}
Tools I actually use: {tool}, {tool}, {tool}
Doodle style sheet
- Ink color: {color}
- Accent color: {color}
- Heading font (hand-drawn): {font}
- Body font (readable): {font}
