Photographer Portfolio
A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form.
Example of the website this prompt builds. Your result will use your own name, text and images.
- Tech stack
- HTML, CSS and a little vanilla JavaScript
- Colour palette
#0c0c0c#f5f5f4#e9c46a#525252
- What it builds
- Minimal navbar
- Full-screen hero
- Featured series
- Gallery with filters
- Services and packages
- About
- Client words
- Enquiry form
- Footer
Build the whole website step by step
15 prompts, in order. Paste step 1 into Claude, ChatGPT, Cursor or any AI coding tool, wait until that part works, then paste the next one in the same chat. Each step builds one piece: the project setup, every section of the home page, the extra pages a real Portfolio website needs, and finally polish, SEO and launch. Type your business name and colours in "Make it yours" first and every prompt updates for you. Tick off steps as you go; your progress is saved in this browser.
Make it yours
Fill in your own details and every prompt below updates, so you don't have to edit them by hand. All fields are optional.
Setup1 step
Set up the project and design systemUp next
A clean HTML file with CSS variables, fonts and base styles, ready for sections.
Copy step 1, paste it into your AI tool in the same chat, and you will get a result like the preview.
Show the prompt for step 1
Build a complete portfolio website for a wedding and portrait photographer called "Aarav Mehta Photography", based in Jaipur. We will build this step by step. In this first step, ONLY set up the project and the design system — do not build any page sections yet. Tech stack: plain HTML, CSS and a small amount of vanilla JavaScript (no frameworks), so it can be hosted anywhere. Visual style: dark and cinematic so the photos stand out. Near-black background (#0c0c0c), warm off-white text (#f5f5f4), soft gold (#e9c46a) for links and buttons, and grey (#525252) for secondary text. A refined serif for headings (such as Playfair Display) and a clean sans-serif for body text. Thin lines, wide margins and very little decoration. Do the following: 1. Create one index.html file with a <style> block and a <script> block at the end. 2. Define the colour palette (#0c0c0c, #f5f5f4, #e9c46a, #525252) as CSS custom properties on :root with clear names, plus spacing and radius variables. 3. Load at most two Google Fonts and set the base typography scale (h1–h4, body, small). 4. Add base styles: box-sizing reset, a .container class, .btn variants (primary, secondary), .card, and a .section spacing class. 5. Add empty, clearly commented placeholders for these sections in order: Minimal navbar, Hero, Featured series, Gallery, Services and packages, About, Client words, Enquiry form, Footer. Explain briefly what each file does. Keep the code clean and commented.
Home page10 steps
Minimal navbar
Name as a text logo, links (Work, Services, About, Contact) and an "Enquire" button.
Copy step 2, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 2
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 1 of 9: Minimal navbar. Requirements: name as a text logo, links (Work, Services, About, Contact) and an "Enquire" button. Fill in the "Minimal navbar" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Hero
One full-screen photo with the name, "Weddings · Portraits · Travel" and a scroll hint.
Copy step 3, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 3
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 2 of 9: Hero. Requirements: one full-screen photo with the name, "Weddings · Portraits · Travel" and a scroll hint. Fill in the "Hero" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Featured series
Three large story cards (A Rajasthani wedding, Monsoon in Udaipur, Studio portraits) with title, location and year.
Copy step 4, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 4
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 3 of 9: Featured series. Requirements: three large story cards (A Rajasthani wedding, Monsoon in Udaipur, Studio portraits) with title, location and year. Fill in the "Featured series" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Gallery
A masonry grid of 12 photos with filter buttons (All, Weddings, Portraits, Travel) and a keyboard-accessible lightbox…
Copy step 5, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 5
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 4 of 9: Gallery. Requirements: a masonry grid of 12 photos with filter buttons (All, Weddings, Portraits, Travel) and a keyboard-accessible lightbox with next/previous. Fill in the "Gallery" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Services and packages
Three packages (Portrait session, Pre-wedding shoot, Full wedding) with what is included and the starting price in…
Copy step 6, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 6
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 5 of 9: Services and packages. Requirements: three packages (Portrait session, Pre-wedding shoot, Full wedding) with what is included and the starting price in rupees. Fill in the "Services and packages" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
About
Portrait photo, a short personal story, gear list and the cities covered.
Copy step 7, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 7
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 6 of 9: About. Requirements: portrait photo, a short personal story, gear list and the cities covered. Fill in the "About" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Client words
Three short quotes from couples and clients.
Copy step 8, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 8
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 7 of 9: Client words. Requirements: three short quotes from couples and clients. Fill in the "Client words" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Enquiry form
Name, email, phone, event type, event date and message, with validation and a thank-you message.
Copy step 9, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 9
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 8 of 9: Enquiry form. Requirements: name, email, phone, event type, event date and message, with validation and a thank-you message. Fill in the "Enquiry form" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Footer
Instagram link, email, phone and copyright.
Copy step 10, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 10
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Now build ONLY section 9 of 9: Footer. Requirements: Instagram link, email, phone and copyright. Fill in the "Footer" placeholder in index.html. Put its CSS next to the other section styles and any JavaScript in the existing <script> block. Rules: - Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me. - Mobile-first and responsive at 375px, 768px and 1200px+. - Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields. - Realistic sample content for Aarav Mehta Photography (no lorem ipsum). - Show me the complete code for every file you create or change.
Interactions and animation
Hover states, scroll reveals and any interactive behaviour, without hurting performance.
Copy step 11, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 11
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. All sections are built. Now add the interactions and animation layer. Required behaviour: images lazy-load with a gentle fade; the lightbox closes with Escape and traps focus; filters animate the grid smoothly. Also: - Subtle hover and focus states on every link, button and card. - Elements fade and slide up slightly as they scroll into view (IntersectionObserver); run each animation once. - Smooth scrolling for in-page links, with an offset for the sticky header. - Every animation must be disabled when the user has prefers-reduced-motion set. - Do not add heavy animation libraries. Show the full code of each changed file.
More pages1 step
Optional extra sections
More content without leaving the single-file setup.
Copy step 12, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 12
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Suggest three extra sections that would make this page more useful for its visitors, explain why in one line each, then build the one I choose. Keep everything in the same single file, in the same style.
Polish and launch3 steps
Responsive and accessibility review
A page that works on every screen size and with a keyboard or screen reader.
Copy step 13, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 13
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Review the whole page and fix problems. Go through it at 360px, 768px, 1024px and 1440px widths and check: - No horizontal scrolling, nothing overlapping, text never cut off, tap targets at least 44px. - One h1 per page and a logical heading order; landmarks (header, nav, main, footer). - Every image has meaningful alt text (or empty alt if decorative); every form field has a label and error messages are announced. - Everything works with the keyboard alone, focus is always visible, and menus/accordions/modals manage focus and close with Escape. - Colour contrast of at least 4.5:1 for body text. List each issue you found and the fix, then show the changed code.
SEO and performance
Search-friendly metadata, social previews and fast loading.
Copy step 14, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 14
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. Prepare the page for search engines and fast loading: - <title>, meta description, canonical, Open Graph and Twitter card tags. - JSON-LD structured data that fits Aarav Mehta Photography. - Width/height on every image, loading="lazy" below the fold, and compressed images. - Defer non-critical JavaScript and inline only the critical CSS. Then tell me how to check the result with Lighthouse and what score to aim for.
Launch
The website live on the internet with your own domain.
Copy step 15, paste it into your AI tool in the same chat, and you will get a result like the preview, in your own colours and content.
Show the prompt for step 15
Project recap: we are building Aarav Mehta Photography — A dark, image-first portfolio for a wedding, portrait or travel photographer with filterable gallery, lightbox, packages and an enquiry form. Stack: HTML, CSS and a little vanilla JavaScript. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections. The page is ready. Walk me through launching it, step by step, for a beginner: 1. Deploy the files for free on Netlify (drag-and-drop) or GitHub Pages. 2. Connect a custom domain and set up HTTPS. 5. Submit the sitemap to Google Search Console. 6. A final pre-launch checklist: replace all sample text, images, prices and contact details with real ones, test every link and form, and check it on a real phone.
Or: the one-shot prompt
Prefer to generate the home page in one go? Copy everything in the box. It works best in tools that can write many files at once (Cursor, Claude Code, v0, Bolt). Text in quotes and the sample business details are meant to be replaced with your own.
Build a complete portfolio website for a wedding and portrait photographer called "Aarav Mehta Photography", based in Jaipur. Tech stack: plain HTML, CSS and a small amount of vanilla JavaScript (no frameworks), so it can be hosted anywhere. Visual style: dark and cinematic so the photos stand out. Near-black background (#0c0c0c), warm off-white text (#f5f5f4), soft gold (#e9c46a) for links and buttons, and grey (#525252) for secondary text. A refined serif for headings (such as Playfair Display) and a clean sans-serif for body text. Thin lines, wide margins and very little decoration. Sections, in order: 1. Minimal navbar: name as a text logo, links (Work, Services, About, Contact) and an "Enquire" button. 2. Hero: one full-screen photo with the name, "Weddings · Portraits · Travel" and a scroll hint. 3. Featured series: three large story cards (A Rajasthani wedding, Monsoon in Udaipur, Studio portraits) with title, location and year. 4. Gallery: a masonry grid of 12 photos with filter buttons (All, Weddings, Portraits, Travel) and a keyboard-accessible lightbox with next/previous. 5. Services and packages: three packages (Portrait session, Pre-wedding shoot, Full wedding) with what is included and the starting price in rupees. 6. About: portrait photo, a short personal story, gear list and the cities covered. 7. Client words: three short quotes from couples and clients. 8. Enquiry form: name, email, phone, event type, event date and message, with validation and a thank-you message. 9. Footer: Instagram link, email, phone and copyright. Interactions: images lazy-load with a gentle fade; the lightbox closes with Escape and traps focus; filters animate the grid smoothly. Quality bar: - Fully responsive: design mobile-first, then tablet (768px) and desktop (1200px). - Accessible: semantic HTML landmarks, one h1, alt text on images, visible keyboard focus, colour contrast of at least 4.5:1 for body text. - Fast: no heavy libraries, lazy-load images below the fold, system or two web fonts at most. - Use placeholder images from a neutral source and realistic sample copy (no lorem ipsum). - Respect prefers-reduced-motion for every animation. - Keep the code clean and commented so I can edit it by hand.
How to use these prompts
- 1
Open an AI coding tool. Use any capable assistant: Claude, ChatGPT, Cursor, v0, Bolt, Gemini. Tools that can create files (Cursor, Claude Code, v0, Bolt) are the most convenient because they write the project for you.
- 2
Replace the sample details. Copy the prompt and change the business name, location, colours and any section you do not need. The more specific your details, the better the result.
- 3
Paste the prompts one by one. Start with step 1 of the step-by-step build and send each next step only when the previous one works. If a reply is cut off, say “continue from where you stopped”. Or send the one-shot prompt if you want the whole home page at once.
- 4
Run it on your computer. Save the result as index.html and open it in your browser. No installation is needed.
- 5
Review and refine. Check it on a phone-width screen, fix anything that looks off by describing it in plain words, then use the follow-up prompts below to add features one at a time.
- 6
Replace placeholders and publish. Swap in your real text and images, then deploy. Vercel and Netlify both host this kind of site for free.
Follow-up prompts
Send these one at a time after the first version is working. Small, specific requests give much better results than one giant prompt.
Add a client gallery page protected by a simple access code (front-end only, for previews).
Convert images to responsive srcset with WebP versions for faster loading.
Add a testimonials carousel with autoplay that pauses on hover.
Add Person and LocalBusiness JSON-LD for local search.
Tips for a better result
- Pick only your best 12 photos for the gallery; a tight selection looks more professional than 100 average ones.
- Compress photos before uploading; large image files are the main reason photography sites feel slow.
- Want to hand-build a section instead? The Templates library has heroes, pricing tables, FAQs and more with full code.
