The Portfolio Site Kickoff Prompt

The tempting move is to type "build me a portfolio website" and hit enter. Claude Code would try, and the output from a vague prompt is unpredictable. You might get a React app when you wanted plain HTML, or a single-page layout when you wanted multiple sections.

This one is specific about four things: the technology, the structure, the features, and the constraints.

Before you run it: an empty folder, with your terminal sitting inside it.

Build a personal portfolio site using HTML, CSS, and vanilla JavaScript. 
No frameworks. 
Every line of code that Claude writes should be readable and understandable.

Structure: 
a home page with a hero section that has a headline and a short introduction, 
an about section with a bio, 
a projects gallery with placeholder cards, 
and a contact section with a form.

Features: 
a dark mode toggle that remembers the user's choice between visits, 
responsive navigation that collapses into a menu on mobile screens, 
smooth scroll between sections when you click a nav link, 
and a contact form with name, email, and message fields.

Constraints: 
semantic HTML for accessibility, 
mobile-first CSS so it looks right on phones before we think about desktops, 
and a clean file structure with separate folders for styles, scripts, and images.

Notice the shape more than the wording, because the shape is what transfers to every project after this one.

What to watch while it runs

Before it writes a line of code, Claude loads a design skill on its own. It recognises this as a design task and pulls that in without being asked. Then it commits to a direction: a typeface pairing, a colour palette, and a point of view on how the code should read.

The quality of those decisions ties directly to the quality of your instructions. When you specified mobile-first CSS and semantic HTML, Claude folded those constraints into every file it created. Had you written "build me a portfolio website", it would have guessed at every one of them.

A few words you will meet

A hero section is the big intro area at the top of a page, the part you see before scrolling. A framework is a pre-built starter kit like React or Vue. Boilerplate is the standard starter code that ships with one. Semantic HTML means using tags like header, nav and article that describe what each part of the page is, instead of generic divs everywhere. Mobile-first CSS means designing for the phone screen first, then scaling up.

We skip the framework and the boilerplate here, because we want every line Claude writes to be readable.

This resource is part of

Claude Code: From Beginner to Pro Agentic AI Engineer

by Arun Nagarathanam

Take your skills to the next level with

AI GEO 2026: Get Recommended by ChatGPT, Google, Perplexity

by Arun Nagarathanam