Build a Portfolio Site

Build the public portfolio home page and work gallery for [YOUR NAME OR STUDIO], a [TYPE OF CREATIVE] who wants to be hired by [TYPE OF CLIENT] for [TYPE OF WORK]. The first screen should say [SHORT DESCRIPTION OF WHAT YOU DO] and lead directly into the work. The main action should be [PRIMARY ACTION, e.g. View selected work].

Build the visual direction around these words: [THREE VISUAL ADJECTIVES]. Use [YOUR COLOR DIRECTION] and [YOUR TYPOGRAPHY DIRECTION]. Keep the palette restrained, the spacing deliberate and the text secondary to the work. Do not use glowing gradients, decorative blobs, rows of identical floating cards, fake statistics, generic creative-business slogans or other stock AI-builder patterns.

Use only the real portfolio files I provide here: [UPLOADS OR LINKS TO YOUR REAL WORK]. Do not generate portfolio images from scratch, and do not invent, replace or fabricate client work, logos, people, places or results. Editing my own real files is fine — I may have improved my photos' lighting, crop, background or sharpness before uploading, and that is welcome; what matters is that every image represents work I actually did. Where a real file is missing, show a clearly labelled placeholder that says [REAL WORK FILE NEEDED: PROJECT NAME AND FILE TYPE]. A placeholder must never look like finished work.

Organize the gallery using [YOUR PROJECT CATEGORIES] and show [PROJECT TITLE], [TYPE OF WORK] and [ONE-LINE CONTEXT] for each item. Give the strongest projects more visual weight instead of putting everything into one repeated card size. Keep the order intentional, with [YOUR LEAD PROJECT] first. Let visitors filter only if the categories genuinely help; do not hide a small portfolio behind unnecessary controls.

Make web-sized copies of large images so the site does not send the full original file to every visitor. Load only what is visible at first, then load later images as the visitor scrolls. Keep images sharp at the size they are shown, preserve their intended proportions and never crop a finished piece without my approval. Add alternative text, which is a short description read aloud by screen readers, using the factual descriptions I provide: [DESCRIPTIONS OF THE WORK].

For video, show a real preview image from the project and a clear play button. Do not autoplay video, do not load a full video before someone chooses to play it and do not generate preview images. Use [MY VIDEO LINKS OR FILES] and keep sound off until the visitor starts playback.

On a phone, use a clear reading order, comfortable tap targets and no sideways scrolling. The first useful view must appear quickly on a slow connection, later images must arrive without making the page jump, and the gallery must remain easy to browse with one hand.

Add simple navigation for Work, About and Contact, but leave About and Contact as clearly labelled pages to complete in later steps. Do not build project case studies yet. When finished, tell me which files were resized for the web, which placeholders remain and which choices make this layout specific to my work rather than a reusable template.

Add individual project or case-study pages to the portfolio for [PROJECTS TO FEATURE]. Each gallery item for those projects should open its own page, and every page should lead back to the same place in the gallery.

Use only the facts I provide for each project: [PROJECT TITLE], [CLIENT NAME OR CONFIDENTIAL DESCRIPTION], [BRIEF], [MY ROLE], [COLLABORATOR NAMES AND ROLES], [CONSTRAINT], [PROCESS DETAIL], [DELIVERABLES] and [REAL OUTCOME]. Do not invent client quotes, awards, measurements, results or process steps. If a detail is confidential or unknown, omit it or use the wording [APPROVED CONFIDENTIAL WORDING].

Give each project a visual sequence that helps someone understand the work. Start with [REAL LEAD IMAGE OR VIDEO], then place [REAL SUPPORTING FILES] beside short explanations and factual captions. Preserve the intended proportions of every piece. For writing projects, use readable excerpts and a link or clear instruction for viewing the full sample. For video projects, use a real preview image, manual playback and [CAPTION OR TRANSCRIPT INFORMATION].

Make the pages feel related to the gallery but not identical to one another. Let the needs of the work decide whether a page is image-led, video-led or text-led. Keep the same restrained colors, typography and spacing from step one, and do not add decorative effects that compete with the project.

Add previous project, next project and back to work controls. Make every control easy to use on a phone and with a keyboard. Keep the gallery speed work from the previous step intact.

Give me a simple private owner area where I can add, edit, reorder, publish and unpublish projects without redesigning the site. A project should remain hidden until I deliberately publish it. Use the same fields and image rules for every new project, and never create sample portfolio work automatically.

Complete the About page for this portfolio and add a short About section on the home page.

Write in the first person using only the information I provide: [SHORT BIOGRAPHY], [RELEVANT EXPERIENCE], [POINT OF VIEW], [HOW I WORK], [TYPES OF CLIENT OR PROJECT], [LOCATION OR REMOTE AVAILABILITY] and [WHAT I WANT TO BE HIRED FOR NEXT]. Keep it specific and natural. Do not turn it into a long résumé and do not invent a personal story, credentials, clients, publications or awards.

Show my selected proof only where it is true and useful: [REAL CLIENTS I MAY NAME], [REAL PUBLICATIONS OR EXHIBITIONS], [REAL AWARDS], [REAL QUALIFICATIONS] and [REAL TESTIMONIALS I HAVE PERMISSION TO USE]. If I provide none, leave those sections out. Never create placeholder praise that could be mistaken for a real testimonial.

Use [MY REAL PORTRAIT] if I supply one — including one I have already edited or retouched myself, which is fine as long as it is genuinely me. Otherwise place a clear label saying [REAL PORTRAIT NEEDED] and leave it visibly unfinished. Do not generate a face from scratch, and do not substitute a different face, studio, team or working scene for the real one.

Add a concise description of the work I take on: [SERVICES OR COMMISSIONS], and make [HOW TO START A CONVERSATION] visible at the end of the page. Until the enquiry form is built in the next step, link that action to [YOUR EMAIL].

Keep the gallery, project pages, media performance and owner tools exactly as they are. The About page should feel like the same person made it, not a separate business template.

Complete the Contact page and connect every [PRIMARY CONTACT BUTTON LABEL] button on the portfolio to it.

Add a short enquiry form that asks for name, email, the kind of project, a short message and [ONE OR TWO OTHER DETAILS I GENUINELY NEED]. Make [OPTIONAL DETAILS, e.g. timing and budget range] optional. Do not require a phone number, a full brief or an account before someone can contact me. If a person needs to share reference material, ask for a link rather than a large file upload.

Above the form, show [MY CURRENT AVAILABILITY MESSAGE], [THE WORK I AM OPEN TO] and [MY USUAL RESPONSE TIME]. Also show [YOUR EMAIL] as a plain alternative in case the form fails.

When someone submits, store the enquiry, email the complete enquiry to [YOUR EMAIL], show a clear confirmation on screen and send the person a short automatic receipt using [YOUR CONFIRMATION WORDING]. Storing and emailing must both happen so one missed email does not erase a possible project.

Protect the form from basic automated spam with a hidden field that real visitors do not see and a limit on repeated submissions. Add a short plain-language note saying what happens to the contact details. Use a reliable email delivery service and tell me what I need to connect, without exposing any private key or password on a public page.

Keep the visual style restrained and consistent with the portfolio. Preserve the gallery, project pages, About page and all media performance work from the earlier steps.

Add optional private client galleries to this portfolio without changing the public gallery.

Give me an owner-only area where I can create a gallery for [CLIENT OR PROJECT], add only [REAL CLIENT FILES], set a title and message, choose whether downloads are allowed using [DOWNLOAD RULE], and set [EXPIRY DATE OR NO EXPIRY]. Do not generate, replace or alter client work. Missing files must remain labelled [REAL CLIENT FILE NEEDED].

Let me invite only the intended client using [CLIENT ACCESS METHOD: AN ACCOUNT OR A PRIVATE EXPIRING LINK]. Explain that a private link can be forwarded and is not enough for highly sensitive material. For sensitive work, require a client account and make the owner assign access deliberately.

Enforce access on every gallery and every original file, not only by hiding the gallery from the menu. A logged-out visitor must not reach it. Client A must never be able to see Client B's gallery or files by changing or pasting an address, using search, or opening a previously copied file address. Private galleries must stay out of public search results and the public portfolio.

Let me revoke access immediately, change the expiry and remove a file. After access expires or is revoked, an old gallery link and an old direct file address must stop working. Show the client a clear sign-in or unavailable message rather than revealing whether another client's gallery exists.

Keep private files separate from public portfolio files. Preserve the public gallery, project pages, About page, enquiry form and their existing behavior. When finished, give me a plain-language test using two client accounts and one logged-out browser so I can prove the separation myself.