AI Prompt for a Modern Freelancer Portfolio Website

Create a portfolio website from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a portfolio website from scratch. The prompt is quite specific with its requirements. This helps nudge the AI to a result that's likely what you might expect from a modern freelancer portfolio website.

The Prompt:

Generate a complete, single-file HTML template for a modern freelance photographer's portfolio website. The design should be clean, image-focused, and elegant.

Page Structure:

  1. Navigation Bar: A simple, sticky navigation bar with links to "Home," "Portfolio," "About," and "Contact."
  2. Hero Section: A full-screen hero section with a striking background image, a headline (e.g., "Capturing Moments, Creating Art"), a sub-headline, and a call-to-action button that scrolls to the portfolio section.
  3. Portfolio Gallery: A grid-based gallery section to showcase photography projects. Each grid item should have a placeholder image and a project title that appears on hover. Use CSS Grid for the layout.
  4. About Me Section: A simple two-column section. One column for a professional headshot (placeholder image) and the other for a brief biography and a list of skills or services.
  5. Contact Form: A functional and clean contact form with fields for "Name," "Email," "Message," and a "Submit" button.
  6. Footer: A simple footer with social media icons (use placeholder SVG icons) and a copyright notice.

Core Requirements:

  • Technology: Generate a single HTML file with CSS included in a <style> tag in the <head>.
  • Accessibility: Adhere to WCAG 2.1 AA standards. Use semantic HTML5 tags (<header>, <nav>, <main>, <section>, <footer>). Ensure all images have alt attributes, form inputs have labels, and color contrast is sufficient.
  • Responsiveness: The design must be mobile-first and fully responsive, adapting perfectly to all screen sizes from mobile phones to desktops. The photo gallery grid should adjust its number of columns based on screen width.
  • Best Practices: Use modern CSS like Flexbox and Grid for layout. The CSS should be well-commented, and use CSS variables for the main color scheme (e.g., --primary-color, --text-color) and font families. No inline styles.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of modern freelancer portfolio AI prompt result

Minor Tweak

I should mention that two of the sample stock images were broken when Gemini generated the website. I asked for those two to be redone, and it returned one successful replacement and one more broken image. I ended up replacing the image myself. In practice, missing stock images shouldn't be an issue, as you would need to replace those images anyway.

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.