Portfolio
Portfolio — Developer
Copy-paste layout brief covering Hero Section, About Section, Skills Section and Projects Section — hand it to ChatGPT, Claude, or v0 as-is.
Portfolio — Developer is a copy-ready build prompt for portfolio pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
Everything on this page — the summary, the category and the how-to — is written by HowToPrompts; the link below goes to the original project.
| Use case | Portfolio |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create a Claude Code portfolio website for a developer:
CLAUDE CODE PORTFOLIO PROMPT
- Build a production-ready developer portfolio that Claude Code can implement in a React, Next.js, or Astro project.
- Include a responsive project grid, detailed case-study pages, GitHub repository links, live demo links, technical skills, measurable results, and a contact CTA.
- Use accessible HTML, mobile-first layout, semantic sections, keyboard-friendly navigation, and clean component boundaries.
- Add implementation notes for reusable project cards, case-study routing, image optimization, metadata, and deployment.
1. HERO SECTION
- "Hi, I'm [Name]"
- Animated typing effect showing roles: "Full-Stack Developer", "Open Source Contributor", "Tech Writer"
- Brief intro paragraph
- CTA buttons: "View Projects" and "Download Resume"
- Social links: GitHub, LinkedIn, Twitter
- Terminal-style design element or code snippet decoration
2. ABOUT SECTION
- Professional summary
- Currently working at [Company]
- Tech stack visualization
- Years of experience stats
- Fun fact or personal touch
3. SKILLS SECTION
Organized by category:
Languages:
- JavaScript/TypeScript
- Python
- Go
- SQL
Frontend:
- React, Next.js
- Vue, Nuxt
- Tailwind CSS
Backend:
- Node.js, Express
- PostgreSQL, MongoDB
- Redis, GraphQL
DevOps:
- Docker, Kubernetes
- AWS, Vercel
- CI/CD, GitHub Actions
Display as icon grid with labels, not progress bars.
4. PROJECTS SECTION
Featured projects (3-4):
- Project screenshot/mockup
- Title and description
- Tech stack tags
- GitHub link and Live demo link
- Star count if open source
- One-line business or user outcome
- Links to case-study pages for deeper project context
Project card layout:
- Image top
- Content bottom
- Hover: Slight lift with shadow
5. OPEN SOURCE SECTION
- GitHub contribution graph embed
- Notable contributions list
- "View GitHub Profile" link
6. BLOG/WRITING SECTION (optional)
- Recent articles (3 cards)
- Title, excerpt, date
- Read time
- Link to blog or dev.to/medium
7. CASE-STUDY PAGES
For each featured project, create a case-study page with:
- Problem and user context
- Constraints and tradeoffs
- Architecture or data-flow diagram area
- Screenshots or UI states
- Code or GitHub repository link
- Results, metrics, or lessons learned
8. EXPERIENCE TIMELINE
- Company, role, dates
- Brief description
- Technologies used
- Vertical timeline layout
9. CONTACT SECTION
- "Interested in working together?"
- Email prominently displayed
- Contact form (name, email, message)
- Response time expectation
- CTA copy for freelance, full-time, or consulting inquiries
10. CLAUDE CODE IMPLEMENTATION NOTES
- Create reusable components for Hero, ProjectGrid, ProjectCard, CaseStudyPreview, SkillsCloud, ExperienceTimeline, and ContactCTA.
- Use placeholder data arrays for projects, skills, experience, and links so the portfolio is easy to customize.
- Add responsive breakpoints for mobile, tablet, and desktop.
- Include SEO metadata for developer portfolio, Claude Code portfolio, and full-stack developer portfolio queries.
Design: Can be dark or light theme. Include subtle code/terminal aesthetic elements. Mobile responsive with hamburger menu.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts