Doodle Developer Portfolio

手描きなのに、製品を届けられることを証明するポートフォリオ。

手描きの落書きスタイルで1ページの開発者ポートフォリオを構築します。固定したドゥードルの語彙、スケッチ風のセクションヘッダー、自分の担当とひとつの技術的判断を明記したプロジェクトカード、本物のコードサンプルを備えます。

こんな方におすすめ

個性のあるポートフォリオを求める開発者、学生、インディーハッカー

所要時間

初稿まで約30分

レベル

初心者向け

3ステップでインストール

登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入（$4.99）し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。

パックの内容

SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：

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.
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.

テンプレートのプレビュー

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}