What this prompt does
This prompt generates a complete developer portfolio architecture — not a blank-canvas brief, but a structured output covering eight distinct sections from hero to contact, each with specific content requirements baked in. The template enforces industry design rules directly in the prompt (dark theme rationale, monospace typography, anti-patterns to avoid), so the AI assistant produces opinionated, production-aware output rather than generic suggestions.
What makes it work is the combination of variables and constraints. The [developer_type], [experience], and [personality] fields personalize the output, while the hardcoded anti-patterns ("NO listing skills without context") force the AI away from the filler content that makes most portfolios forgettable. The [hero_style] and [framework] variables mean you get actual code — a terminal animation in your chosen stack, not pseudocode.
The project detail section is where this prompt earns its keep. It asks for problem, solution, role, technical challenges, and architecture decisions — the substance that turns a project list into a credibility signal.
When to use it
- You are a junior or mid-level developer building your first portfolio and need a full content + code blueprint, not just design inspiration.
- You are a senior engineer refreshing a stale portfolio before a job search and want to audit what sections you are missing.
- You are switching specializations (backend to full-stack, web to AI/ML) and need a narrative that bridges the gap.
- You are a bootcamp grad with 2-3 projects and need a structure that makes a small project count look intentional rather than thin.
- You freelance and want a portfolio that converts inbound leads, not just impresses other developers.
Example output
For inputs: [developer_type]: Full-stack TypeScript engineer, [experience]: 4 years, [goal]: Senior role at a product company, [personality]: Direct, systems-minded, [hero_style]: Typing animation with live GitHub stats, [project_count]: 3, [framework]: React + Framer Motion
Hero:
Name: Alex Rivera
Role: Full-Stack Engineer — TypeScript, Node, React
Tagline: "I build the thing and the thing that monitors the thing."
Hero element: Terminal typing animation cycling through recent commits,
GitHub contribution graph pulled live via API
Featured Project — "Queueify":
Problem: Internal Slack bots at $COMPANY had no retry logic; failed jobs
silently vanished.
My role: Sole engineer, 3-week build.
Stack badges: Node.js · BullMQ · Redis · TypeScript
Architecture decision: Chose BullMQ over custom solution — existing Redis
infra made it zero net cost.
Live link: queueify.dev | GitHub: github.com/arivera/queueify
Pro tips
- Set
[project_count]to 3, not 6. The template's own anti-patterns warn against walls of content. Three well-documented projects outperform six shallow ones every time. Use the project detail section on all three. - Be specific with
[personality]. "Thoughtful" produces bland copy. "Dry humor, obsessed with observability, ex-SRE" gives the AI enough signal to write a tagline that sounds like a human wrote it. - Use
[hero_style]to match your stack. If you are a React engineer, request a React + Framer Motion terminal component. If you are a backend engineer, a VS Code-style status bar animation is more on-brand than a flashy canvas effect. - Run the project detail section separately per project. Paste the problem/solution/challenges fields into a follow-up prompt with your actual project notes. The AI cannot invent your architecture decisions — you have to supply the raw material.
- Pair with your actual tech stack for the code output. The
[framework]field controls what code the prompt generates. Requesting Next.js when your portfolio is Astro means unusable output. Match it to your deployment target.
