Vibe Coding Prompt Library

I'm building a professional portfolio website for my [industry/service type] business. 
I've uploaded my resume and headshot. Please analyze these documents and create:

1. A structured content outline for my portfolio site
2. My professional value proposition (1-2 sentences)
3. A list of 5-7 key services/offerings based on my experience
4. 3 portfolio pieces or case study ideas from my background

Let's start by extracting the most important details from my resume.

Please analyze my resume and extract:
- Current professional title/role
- Years of experience
- Top 5 skills or expertise areas
- Key achievements (3-5 bullet points)
- Education and certifications
- Professional summary suitable for an "About" page

Format this as structured data I can easily reference.

I'm going to paste my LinkedIn profile summary. Please:
1. Identify my unique value proposition
2. Extract key accomplishments
3. Suggest 3-5 compelling headlines for my portfolio hero section
4. Recommend which projects or experiences should be featured

[Paste LinkedIn content here]

Using my resume and experience, write a compelling 200-word professional bio for my 
portfolio "About" page. Make it:
- First-person narrative
- Conversational but professional
- Focused on outcomes and impact
- Include a personal touch at the end

Industry: [your industry]
Target clients: [describe ideal client]

Create 3-4 sentence descriptions for each of these services:
[List your services]

For each service, include:
- What the service is
- Who it's for
- The key benefit or outcome
- What makes my approach unique

Tone: Professional, confident, client-focused

Help me structure a case study based on this project:
[Describe a past project or client success]

Create:
- Compelling project title
- Client challenge (50 words)
- My approach/solution (100 words)
- Results/impact (50 words)
- Key metrics or outcomes (3-5 bullet points)

Write 5 variations of hero section copy for my portfolio homepage. Each should include:
- Attention-grabbing headline (8-12 words)
- Supporting subheadline (15-20 words)
- Primary CTA button text
- Secondary CTA button text

Target audience: [describe]
My unique angle: [describe]

Draft an email template I can send to past clients requesting a testimonial. Make it:
- Brief (under 150 words)
- Specific about what to include
- Easy to respond to
- Professional but warm

Create a modern, professional portfolio website with these pages:
1. Home with hero section, services overview, and CTA
2. About page with bio and credentials
3. Services/Work page
4. Contact page with form

Design style: [minimal/bold/creative/corporate]
Color scheme: [primary color] with clean, professional aesthetics
Include smooth scrolling and mobile-responsive design

Build a hero section with:
- Professional headshot image on the left (circular crop)
- Name and professional title on the right
- Two-line value proposition
- Two CTA buttons: "View My Work" and "Get in Touch"
- Clean, modern layout with [color] accents
- Fully responsive for mobile

Create a services section with:
- 3-column grid on desktop, 1-column on mobile
- Each service card includes: icon, title, description
- Hover effects that show more detail
- Consistent card heights
- Professional spacing and typography

Services:
1. [Service name] - [brief description]
2. [Service name] - [brief description]
3. [Service name] - [brief description]

Build a portfolio showcase section with:
- Filterable project grid (filter by category: [category 1], [category 2], [category 3])
- Each project card shows: image, title, brief description, "Learn More" link
- Modal popup with full project details when clicked
- Clean, Pinterest-style masonry layout
- Smooth animations on scroll

Design an About page with:
- Professional headshot at top
- Bio section (2-3 paragraphs)
- Skills/expertise section (icon-based grid)
- Timeline of key career milestones
- Education and certifications
- Personal interests section (optional, brief)

Create a contact form with:
- Fields: Name, Email, Phone (optional), Service Interested In (dropdown), Message
- Email validation
- Required field indicators
- Success message after submission
- Integration with [your email] or Supabase
- Clean, professional styling matching site theme

Add a sticky navigation bar with:
- Logo/name on left
- Menu items: Home, About, Services, Portfolio, Contact
- Mobile hamburger menu
- Smooth scroll to sections on same page

Footer with:
- Social media icons (LinkedIn, Twitter, etc.)
- Copyright notice
- Privacy policy link (optional)
- "Back to top" button

My brand color is [color]. Please:
1. Suggest a professional color palette (primary, secondary, accent, neutral)
2. Apply this palette consistently across all sections
3. Ensure good contrast for accessibility
4. Use [color] as the primary action color for CTAs

Improve the typography by:
- Selecting professional font pairings (one for headings, one for body)
- Setting proper font sizes and line heights
- Ensuring readable text hierarchy
- Making sure it works on all screen sizes

Review the entire site for mobile responsiveness and fix:
- Navigation menu on mobile
- Image sizing and positioning
- Button sizes and spacing (touch-friendly)
- Form layouts on small screens
- Any text overflow or layout breaks

Add subtle, professional animations:
- Fade-in on scroll for sections
- Smooth hover states on buttons and cards
- Transition effects between pages
- Loading states for form submission
- Keep it subtle and professional, not distracting

Optimize the site for SEO by adding:
- Page titles for each route
- Meta descriptions (150 characters each)
- Open Graph tags for social sharing
- Favicon
- Alt text for all images

Primary keywords: [your keywords]
Target location (if relevant): [location]

The [section name] isn't displaying correctly on [desktop/mobile]. 
The issue is: [describe what's wrong]

Please:
1. Identify the cause
2. Fix the layout
3. Ensure it works across all breakpoints

The site breaks at [screen width]. Please:
- Identify which components are causing issues
- Add appropriate media queries or responsive utilities
- Test at these breakpoints: 320px, 768px, 1024px, 1440px

The contact form isn't submitting properly. 
Current behavior: [describe]
Expected behavior: [describe]

Please check:
- Form validation logic
- Submit handler
- Backend connection/Supabase setup
- Error handling

My images are loading slowly. Please:
1. Optimize image sizes without losing quality
2. Add lazy loading for images below the fold
3. Use appropriate image formats (WebP where supported)
4. Ensure images are properly cropped/sized for their containers

Please review the site for performance and:
- Minimize bundle size
- Remove unused code/dependencies
- Optimize asset loading
- Add loading indicators where needed
- Ensure smooth scrolling and interactions