Build a Portfolio Website with AI

Published February 28, 2026 · 9 min read

A portfolio website is one of the best first projects to build with an AI coding agent. The structure is well-defined, the content is personal to you, and the result is immediately useful. You do not need to know HTML or CSS. You need to know what you want to show the world, and how to describe it clearly.

This guide walks through the entire process: from writing the prompt to having a live portfolio at a public URL, using Claude Code as the agent and AccessAgent.ai for hosting. AccessAgent.ai's API was built for AI agents — your agent reads the guide and handles everything from upload to live URL, with no dashboard or browser needed.

Why Portfolios Are a Perfect AI Project

Portfolio websites have a few properties that make them ideal for AI-assisted development:

Predictable structure. Most portfolios follow the same pattern: a hero section with your name and role, an about section, a projects section, and contact information. The agent does not need to invent a novel layout.
Personal content. You supply the text, project descriptions, and style preferences. The agent handles the implementation. This division of labor plays to each side's strengths.
Visual feedback. You can immediately see if the result is right. There is no complex backend logic to debug, no database to configure, no authentication to wire up.
Fast iteration. If you do not like the color scheme or the layout of the projects section, you can describe the change and the agent applies it in seconds.

What Makes a Good Portfolio

Before you write a prompt, think about what your portfolio needs to communicate. The best portfolios are focused and easy to scan. They answer three questions quickly: who are you, what do you do, and how can someone work with you.

Essential Sections

Hero. Your name, your role or title, and a one-sentence description of what you do. This is the first thing visitors see.
About. A short paragraph or two about your background, skills, and what drives your work. Keep it concise. Visitors skim.
Projects. Three to six of your best projects, each with a title, a brief description, and optionally a link or image. Quality over quantity.
Contact. How to reach you. An email address, links to relevant profiles (GitHub, LinkedIn, Dribbble), or a simple contact form.

Optional Sections

Skills or tools. A visual list of technologies or tools you work with.
Testimonials. Short quotes from clients or colleagues.
Blog or writing. If you publish articles, linking to them adds depth.
Resume or CV. A downloadable PDF link for recruiters.

Step-by-Step: Building with Claude Code

Step 1: Install Claude Code

If you do not have Claude Code installed, set it up from the terminal:

npm install -g @anthropic-ai/claude-code

Then start a session in the directory where you want your portfolio files:

mkdir my-portfolio && cd my-portfolio
claude

Step 2: Write Your Prompt

The quality of your portfolio depends directly on the quality of your prompt. Include your real information, your actual projects, and your specific style preferences. Here is a detailed example:

Example Prompt

Build me a portfolio website as a single HTML file with inline CSS. About me: - Name: Alex Rivera - Role: Full-Stack Developer - Bio: I build web applications and developer tools. 5 years of experience working with startups and open-source projects. Based in Austin, TX. Projects (show as cards in a grid): 1. "DevMetrics" - Real-time analytics dashboard for developer teams. Built with React and D3. Link: github.com/arivera/devmetrics 2. "QuickDeploy" - CLI tool for deploying static sites to any cloud provider. Written in Rust. Link: github.com/arivera/quickdeploy 3. "Mealplan" - Meal planning app with grocery list generation. React Native. Link: mealplan.app 4. "SQLight" - Browser-based SQL editor with syntax highlighting and query history. Link: github.com/arivera/sqlight Style: - Dark background (#0a0a0f), white headings, gray body text (#a0a0b8) - Blue accent color (#3b82f6) for links and hover states - Clean, minimal, lots of whitespace - System font stack (no external fonts) - Mobile responsive (single column on small screens) - No JavaScript required Sections: hero with name and role, about paragraph, project cards in a 2-column grid, and a contact section with email (alex@rivera.dev) and GitHub link. Put the file at ./index.html

Notice how this prompt specifies everything the agent needs: the content, the structure, the visual style, the tech constraints, and the output location. There is no ambiguity about what "professional" or "clean" means, because the colors, layout, and typography are defined explicitly.

Step 3: Review the Output

The agent will create your index.html file. Open it in a browser to review. Look for:

Is the content accurate? Check that your name, role, project descriptions, and links are correct.
Does the layout work on both desktop and mobile? Resize the browser window to test.
Are the colors and spacing what you expected?
Do all the links point to the right places?

Step 4: Deploy to AccessAgent.ai

Once you are happy with the result, deploy it. You can ask the agent to handle this too:

Deployment Prompt

Deploy this portfolio to AccessAgent.ai: 1. Create a zip of index.html 2. Upload: curl -X POST https://accessagent.ai/api/sites \ -F "name=alex-rivera" -F "file=@site.zip" 3. Save the secret key from the response 4. Tell me the live URL

Your portfolio is now live at alex-rivera.accessagent.ai. The whole process, from writing the prompt to having a public URL, takes about five minutes.

Or do it all in one prompt — your agent reads the guide, builds the site, and deploys it automatically:

Try It — Copy This Prompt

Build a portfolio website for a full-stack developer. Include a hero with name and title, an about section, a projects grid with 4 placeholder cards, and a contact section with email. Dark theme, clean minimal design, responsive, single HTML file. Read the guide at https://accessagent.ai/api/guide and follow it to create and deploy the site.

Step 5: Share Your URL

Add the URL to your email signature, your social media profiles, and your resume. It is a real, publicly accessible website with a clean subdomain.

Customization Tips

The initial build is just the starting point. Here are common customizations and how to prompt for them:

Colors and Fonts

Be specific about what you want changed: "Change the accent color from blue (#3b82f6) to teal (#14b8a6). Change headings to use Georgia serif font." Vague requests like "make the colors warmer" require the agent to interpret your preferences, which introduces guesswork.

Layout Adjustments

Describe the change structurally: "Move the about section below the projects. Make the project grid 3 columns on desktop instead of 2." Agents handle layout instructions well when the structure is described in concrete terms.

Adding Sections

New sections are straightforward: "Add a skills section between About and Projects. Show these skills as pills/tags: TypeScript, React, Rust, PostgreSQL, AWS, Docker. Use a subtle border and the accent color for the text."

Adding Images

If you have project screenshots or a headshot, you can add them in a follow-up: "Add a headshot image at the top of the about section. The image is at ./headshot.jpg. Make it circular, 120px, with a subtle border." Then include the image in your deployment zip.

Updating Your Portfolio Later

When you finish a new project or change roles, updating your portfolio is simple. Start a new Claude Code session in the same directory and describe the changes:

Open index.html and make these changes:
- Add a new project card: "Beacon" - open-source notification
  service for web apps. Built with Go. Link: github.com/arivera/beacon
- Update my role from "Full-Stack Developer" to "Senior Full-Stack
  Developer"
- Update the bio to mention 6 years of experience

Then redeploy with the update endpoint:

zip -r site.zip index.html
curl -X PUT https://alex-rivera.accessagent.ai/api/sites/alex-rivera \
  -H "Authorization: Bearer sk_YOUR_KEY" \
  -F "file=@site.zip"

The update is live immediately. No build steps, no CI pipeline, no waiting.

Adding a Custom Domain

If you want your portfolio at your own domain (like alexrivera.dev), you can upgrade to Pro and connect a custom domain. Set a CNAME record pointing to accessagent.ai, then tell the API:

curl -X POST https://accessagent.ai/api/sites/alex-rivera/domain \
  -H "Authorization: Bearer sk_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"domain": "alexrivera.dev"}'

SSL is provisioned automatically. Your portfolio is now at https://alexrivera.dev with a proper certificate.

Summary

Building a portfolio with an AI agent is fast, iterative, and requires no coding knowledge. The key is writing a detailed prompt with your real information, concrete style preferences, and clear structural requirements. Start with the essential sections, deploy quickly, and refine from there.

Your portfolio is a living document. With an AI agent and a hosting service that supports instant updates, keeping it current takes minutes, not hours.