Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

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

1. 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.
2. 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.
3. 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.
4. 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.
5. Write the code sample and ship (input: finished cards → output: live portfolio)
   Pick one short, real code snippet (10–25 lines) that shows how you think — a clean function, a clever query, a tidy component — and add three lines explaining what it does and why you wrote it that way. Then publish: check the site on a phone, make sure every link works, and confirm the page loads fast. A portfolio with one broken link costs more than a portfolio with one fewer project.

Vorschau der Startvorlage

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}

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills