Personal portfolio site with projects, skills, about section, and contact form. Dark theme, animated.
Prompt
Build a personal developer portfolio website. Include:
- Hero with name, title, and animated typing effect
- About me section with photo placeholder and bio
- Skills section with progress bars or tags
- Projects grid (6 projects with image placeholders, title, description, and links)
- Experience timeline
- Contact form (frontend only)
- Dark theme with accent color
Make it responsive and add smooth scroll. Single page, put in ~/data/public/index.html
1
Copy the prompt above
2
Paste in Claude Code terminal
3
Your project is live
portfoliopersonaldeveloperdark theme
About this prompt
A developer portfolio is your most important marketing tool. It shows potential employers and clients what you can build. But most developers spend weeks building their own portfolio — ironically, the project that should showcase their speed. This prompt builds a complete, professional portfolio in under 5 minutes with a dark theme, typing animation, project showcase, skills section, and contact form.
What you get
✓ Animated hero with typing effect showing your name and title
✓ About me section with photo placeholder and bio
✓ Skills section with visual tags or progress bars
✓ Project grid with 6 projects, image placeholders, and links
✓ Experience timeline
✓ Contact form (frontend)
✓ Dark theme with customizable accent color
✓ Smooth scroll navigation
✓ Fully responsive
How to customize
Replace the placeholder name, title, and bio with your own. Add your real project screenshots and descriptions. Update the skills list to match your stack. Change the accent color to your preference. Add real links to your GitHub, LinkedIn, and email.
Frequently asked questions
Can I use this for a design portfolio too?
Yes. Change the projects section to show design work instead of code projects. The layout works for any creative portfolio.
Does it include a blog?
This prompt focuses on the portfolio. You can ask Claude to add a blog section as a follow-up prompt.
Can I add animations?
The typing effect in the hero is included. You can ask Claude to add more animations like fade-in on scroll, hover effects, or page transitions.