Briefing Claude to Build Your Portfolio

Complete Writing Your Portfolio Copy with Claude first; this lesson uses the copy you wrote there.

A brief that names five things (your role, sections in order, visual direction, real content, and "self-contained HTML file") is what turns Claude from a fragment generator into a deployable portfolio on the first try. Claude does not build websites by default. It builds whatever you describe. The difference between a generic result and a result you would actually use comes down to how specific your brief is.

A strong brief tells Claude five things: what kind of creative you are, the exact sections you need in order, the visual direction (dark or light, one dominant color), the actual content for each section (your real Vimeo URL, your bio text, your software list), and the output format. That last one, output format, is the most important and most often forgotten. The output you want is a single HTML file (HyperText Markup Language, the plain text file every web page is built from), with all the styling included inside it.

Here is the before and after: A weak brief ("Build me a portfolio website") returns a template with a hero, an about section, and a contact form: it looks like every other AI-generated site. A strong brief that ends with "give me a complete, self-contained HTML file with all CSS in a style block, ready to save as index.html and open in a browser" returns something deployable (ready to put live on the web) in one drag-and-drop. CSS here means Cascading Style Sheets, the rules that set colors, fonts, and spacing, kept inside the same file so there is nothing extra to upload.

Without that instruction, Claude returns code fragments you would need to assemble yourself. Adding `data-netlify="true"` to the contact form tag (a small label that tells Netlify, your future web host, to catch each message and email it to you) makes the form actually send email. Leave it out and the form silently fails.

Now try it: run the exercise prompt below with your Portfolio Brief pasted at the top and all five inputs filled in: type of work, sections in order, visual direction, actual content, output format instruction. Click the Preview button inside Claude before downloading to catch any layout problems. When the preview looks right, download the file. That is your portfolio, ready to drag onto Netlify.

[Paste your Portfolio Brief here: the paragraph you wrote in Lesson 0]

---

Build me a complete, self-contained portfolio website as a single HTML file with all styling included. I have my copy ready from the previous lesson. No external files needed, no programming tools needed. I should be able to save it as index.html and open it in a browser.

Here's what I need:

**Type of work:** [video editor / photographer / motion designer / your specific role]

**My copy (use this exactly):**
- Hero tagline: [paste your tagline from the copy lesson]
- Short bio: [paste your short bio]
- Long bio: [paste your long bio for the About section]

**Sections (in this order):**
1. Header with my name and navigation links to each section
2. Showreel section: embed this video: [your Vimeo or YouTube URL]
3. Project grid: [number] projects in a 3-column grid. Titles: [list your project titles]
4. Project descriptions: [paste your project descriptions, or ask Claude to use placeholder descriptions in the 3-sentence format from the previous lesson]
5. About section: use my long bio above
6. Contact section: a form with name, email, and message. Add data-netlify="true" to the form tag so Netlify processes submissions automatically.

**Images:** [If you have hosted image URLs, list them here. If not, write: "Use color-block placeholders with the project title as a label"]

**Visual direction:**
- Theme: [dark background with light text / light background with dark text]
- Accent color: [one color, e.g., "warm amber yellow" / "#FCB116" / "the same green as Spotify"]
- Typography: clean and modern, good for creative work

**Important:** Make it fully responsive for mobile. Use only CSS, no JavaScript. Self-contained single file. After generating, I will use the Preview button to check it before downloading.

What good looks like

• You clicked the Preview button and saw your portfolio rendered as a live page inside Claude
• The preview shows your actual tagline and bio, not placeholder text
• The showreel section shows your actual video URL (not a broken link)
• The contact form has data-netlify='true' in the opening form tag (you can check by looking at the code Claude generated)
• You downloaded the file, opened it in a browser, and it looks like a real website