Home/Free versions of paid apps/Verdict

Can AI build me a free portfolio website?

Yes. An AI coding tool can build a clean one-page portfolio as a single HTML file, and free static hosts can put it online. You supply the work samples and words.

Verdict: Bot · AI does it well✓ Tested 2 times in Llama 3.3 70B · Oct 24, 2026Written for ChatGPT, Claude or Gemini

Jump to the prompt ↓

Bot

01Why bot

  • Simple static sites are well within what AI coding tools build reliably.
  • No monthly website-builder fee for a basic portfolio.
  • You'll need to handle updates yourself.
Sponsor slot · openFeatured tool for this task. A labeled card for one relevant tool.
Book this spot →

02The prompt

Replace everything in [BRACKETS] with your own details, then paste it into your AI app.

prompt.txt
You are a web developer. Build a one-page portfolio site.

My name and what I do: [NAME, ROLE]
Sections: [ABOUT, WORK, CONTACT]
Projects: [TITLE: ONE-LINE DESCRIPTION: IMAGE FILENAME]
Style: [MINIMAL, BOLD, A SITE I LIKE]

Requirements:
- MUST be a single index.html file with CSS inside, mobile-first and accessible.
- MUST use placeholders in [CAPS] for anything I didn't provide.
- NEVER include a contact form that needs a paid backend; use a mailto link.
- Don't add features I didn't list.

Then give me beginner steps to publish it free on a static host, and tell me to check its current free-plan terms.

03Steps

  1. Gather 3 to 6 project samples.
  2. Paste the prompt into an AI coding tool and save the file.
  3. Publish it on a free static host.

04What can go wrong

  • Don't post client work without permission.
  • Free plans can change; keep a copy of your file.

05What to use

Claude, ChatGPT, or an AI app builder like Lovable or Replit.

06Our test runs

2 runs, each with a different made-up sample. 1 of 2 passed every check.

Run 1 · Llama 3.3 70B · graded by GPT-OSS 120BOct 3, 2026Passed with a catch

The made-up sample:

  • [NAME, ROLE]Alex Rivera, Front‑End Web Developer
  • [ABOUT, WORK, CONTACT]ABOUT: Passionate front‑end developer who crafts clean, performant interfaces. WORK: Specializes in HTML, CSS, JavaScript, and React, with a focus on accessibility and mobile‑first design. CONTACT: alex.rivera@example.com – available for freelance and full‑time opportunities.
  • [TITLE: ONE-LINE DESCRIPTION: IMAGE FILENAME]TaskBoard: A minimalist Kanban board for personal projects: taskboard.png PixelPalette: A color‑scheme generator for designers: pixelpalette.png EcoMap: Interactive map showing local recycling centers: ecomap.png
  • [MINIMAL, BOLD, A SITE I LIKE]Minimal: Clean white space, simple typography. Bold: Strong headings, accent color #ff6600. A site I like: https://www.lapa.ninja – showcases bold, minimal portfolios with smooth scroll.
  • [CAPS]PLACEHOLDER TEXT – replace with your own content where needed.
  • Single index.html file with CSS inside
  • Mobile‑first and accessible design
  • Use mailto link instead of paid contact form
  • Do not add features not listed
  • Made up details we never gave it

Details it made up: “GitHub offers free hosting for static sites through GitHub Pages.”, “Create a new repository on GitHub and upload your `index.html` file to it.”

What came back (excerpt):

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Read the full answer
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Rivera - Front-End Web Developer</title>
    <style>
        /* Global Styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
            scroll-behavior: smooth;
        }
        h1, h2, h3 {
            font-weight: bold;
            color: #ff6600;
        }
        a {
            text-decoration: none;
            color: #ff6600;
        }
        a:hover {
            text-decoration: underline;
        }
        /* Section Styles */
        .section {
            padding: 40px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .section:last-child {
            border-bottom: none;
        }
        /* About Section */
        #about {
            text-align: center;
        }
        #about h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        #about p {
            font-size: 18px;
        }
        /* Work Section */
        #work {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #work h2 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        #work p {
            font-size: 16px;
        }
        /* Projects Section */
        #projects {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #projects h2 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .project {
            margin-bottom: 20px;
            text-align: center;
        }
        .project img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        /* Contact Section */
        #contact {
            text-align: center;
        }
        #contact h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        #contact a {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#work">Work</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about" class="section">
            <h1>Alex Rivera</h1>
            <p>Passionate front-end developer who crafts clean, performant interfaces.</p>
        </section>
        <section id="work" class="section">
            <h2>What I Do</h2>
            <p>Specializes in HTML, CSS, JavaScript, and React, with a focus on accessibility and mobile-first design.</p>
        </section>
        <section id="projects" class="section">
            <h2>My Projects</h2>
            <div class="project">
                <img src="taskboard.png" alt="TaskBoard">
                <p>TaskBoard: A minimalist Kanban board for personal projects</p>
            </div>
            <div class="project">
                <img src="pixelpalette.png" alt="PixelPalette">
                <p>PixelPalette: A color-scheme generator for designers</p>
            </div>
            <div class="project">
                <img src="ecomap.png" alt="EcoMap">
                <p>EcoMap: Interactive map showing local recycling centers</p>
            </div>
        </section>
        <section id="contact" class="section">
            <h2>Get in Touch</h2>
            <p><a href="mailto:alex.rivera@example.com">alex.rivera@example.com</a> – available for freelance and full-time opportunities</p>
        </section>
    </main>
</body>
</html>
```

To publish your portfolio site for free on a static host, follow these beginner steps:

1. **Create a GitHub account**: If you don't already have one, sign up for a GitHub account. GitHub offers free hosting for static sites through GitHub Pages.
2. **Create a new repository**: Create a new repository on GitHub and upload your `index.html` file to it.
3. **Enable GitHub Pages**: Go to your repository settings and enable GitHub Pages. Select the branch that contains your `index.html` file (usually `main` or `master`).
4. **Set up a custom domain (optional)**: If you want to use a custom domain for your portfolio site, you can set it up in your GitHub repository settings.
5. **Check the current free-plan terms**: Before publishing, make sure to check the current free-plan terms for GitHub Pages to ensure you understand any limitations or restrictions.

Note: GitHub Pages has some limitations on the free plan, such as limited bandwidth and storage. Be sure to review the terms before publishing your site.

Check that no unexpected extra features were added beyond the brief.

Run 2 · Llama 3.3 70B · graded by GPT-OSS 120BOct 24, 2026Passed

The made-up sample (a messier one):

  • [NAME, ROLE]Alex Rivera, Freelance UI/UX Designer
  • [ABOUT, WORK, CONTACT]ABOUT: UI/UX designer focused on clean, user‑first interfaces, based in Austin. WORK: Projects include a nonprofit app, a craft brewery brand refresh, and a boutique studio website. CONTACT: alex.rivera@example.com • LinkedIn in/alexrivera.
  • [TITLE: ONE-LINE DESCRIPTION: IMAGE FILENAME]EcoTrack: Simple app to log personal carbon footprint: ecotrack.png BrewBrand: Rebranding for a local craft brewery, logo and site: brewbrand.jpg
  • [MINIMAL, BOLD, A SITE I LIKE]Minimal, Bold, inspired by https://dribbble.com/shots/1234567-Clean-Portfolio (clean lines, strong headings, generous whitespace).
  • [CAPS][PROJECTS], [SOCIAL LINKS], [AVATAR IMAGE]
  • Provide a single index.html file with internal CSS
  • Use placeholders for missing items like [AVATAR IMAGE]
  • Do not include a contact form; use mailto link only
  • Include publishing steps and reminder to check free‑plan terms
  • Didn't make up details we never gave it

What came back (excerpt):

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Read the full answer
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Rivera - Freelance UI/UX Designer</title>
    <style>
        /* Global Styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }
        h1, h2, h3 {
            font-weight: bold;
            color: #000;
        }
        a {
            text-decoration: none;
            color: #337ab7;
        }
        a:hover {
            color: #23527c;
        }
        
        /* Container Styles */
        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* About Section Styles */
        .about {
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }
        .about h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .about p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        
        /* Work Section Styles */
        .work {
            padding-top: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }
        .work h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .projects {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .project {
            width: calc(50% - 10px);
            margin: 10px;
            padding: 20px;
            background-color: #f7f7f7;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .project img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }
        .project h3 {
            font-size: 18px;
            margin-top: 10px;
        }
        
        /* Contact Section Styles */
        .contact {
            padding-top: 20px;
        }
        .contact h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .contact p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .contact a {
            font-size: 18px;
            margin-bottom: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="about">
            <h1>Alex Rivera</h1>
            <p>UI/UX designer focused on clean, user‑first interfaces, based in Austin.</p>
            <img src="[AVATAR IMAGE]" alt="Alex Rivera" width="100" height="100" style="border-radius: 50%; margin-bottom: 20px;">
        </div>
        <div class="work">
            <h2>My Work</h2>
            <div class="projects">
                <div class="project">
                    <img src="ecotrack.png" alt="EcoTrack">
                    <h3>EcoTrack</h3>
                    <p>Simple app to log personal carbon footprint</p>
                </div>
                <div class="project">
                    <img src="brewbrand.jpg" alt="BrewBrand">
                    <h3>BrewBrand</h3>
                    <p>Rebranding for a local craft brewery, logo and site</p>
                </div>
                <!-- Add more projects here -->
            </div>
        </div>
        <div class="contact">
            <h2>Get in Touch</h2>
            <p>Want to discuss a project or say hello?</p>
            <a href="mailto:alex.rivera@example.com">alex.rivera@example.com</a>
            <a href="https://www.linkedin.com/in/alexrivera" target="_blank">LinkedIn: in/alexrivera</a>
            <!-- Add more social links here -->
        </div>
    </div>
</body>
</html>
```

To publish your portfolio site for free on a static host, follow these beginner steps:

1. **Create a GitHub account**: If you don't already have one, sign up for a GitHub account at [github.com](https://github.com). GitHub offers free hosting for static sites through GitHub Pages.
2. **Create a new repository**: Click the "+" button in the top right corner of your GitHub dashboard and select "New repository". Name your repository (e.g., "alex-rivera-portfolio") and initialize it with a README file.
3. **Upload your index.html file**: Drag and drop your `index.html` file into the repository, or use the "Upload files" button.
4. **Set up GitHub Pages**: Go to your repository's settings (click the gear icon) and scroll down to the "GitHub Pages" section. Select the branch that contains your `index.html` file (usually "main") and click "Save".
5. **Check the current free-plan terms**: Review GitHub's free plan terms to ensure you understand the limitations and requirements. Currently, GitHub Pages offers free hosting for static sites with some limitations on bandwidth and storage.

Your site should now be live at `https://your-username.github.io/your-repository-name`. Replace "your-username" and "your-repository-name" with your actual GitHub username and repository name.

Verify that the page truly follows a mobile‑first accessible design.

How each run works: we fill the prompt with a made-up sample, run it once in Llama 3.3 70B, and GPT-OSS 120B grades the answer against the prompt's own rules. Word limits are counted by code, and every quote flagged as made up is checked against the full answer. Your results can differ. How we test.

Prompt packReplace Paid Apps 10 step-by-step prompts that go further than this one, $19.
See what’s inside →

More in Free versions of paid apps

All 16 →
Free versions of paid appsBot

Can AI build me a free link-in-bio page instead of paying for one?

Yes. AI writes a single-page site with your links, and you can host it for free. Takes about an evening the first time.

Read the verdict →
Free versions of paid appsBot

Can AI build me a free budget tracker instead of a budgeting app?

Yes. AI can set up a Google Sheets or Excel budget tracker with formulas, so you stop paying for an app.

Read the verdict →
Free versions of paid appsBot

Can AI build me a free habit tracker?

Yes. A simple habit tracker page or spreadsheet is well within what AI builds reliably, and it saves the subscription.

Read the verdict →