Build a Free Portfolio Site with Antigravity and GitHub Pages — A Beginner's Guide

Setup and context — Building Your Portfolio with AI

For developers and designers, a portfolio site is one of the most powerful ways to showcase your skills and projects to the world. Yet many people put it off — setting up hosting feels tedious, designing from scratch is intimidating, and writing all that HTML and CSS takes time you'd rather spend building real projects.

Antigravity × GitHub Pages removes every one of those barriers. Antigravity's AI agent handles the design and code generation, while GitHub Pages provides rock-solid hosting completely free of charge. Aside from an optional custom domain, you can launch a polished, professional portfolio without spending a penny.

What Is GitHub Pages — Understanding Free Hosting

GitHub Pages is a static site hosting service provided by GitHub. Any HTML, CSS, and JavaScript files pushed to a repository are automatically published as a live website.

Here's what makes it ideal for portfolio sites:

Completely free: Public repositories get hosting at no cost whatsoever
Automatic deployment: Pushing to the main branch updates your site instantly
Custom domains: Use the default username.github.io subdomain or connect your own domain
Built-in HTTPS: SSL certificates are provisioned automatically for secure connections
GitHub Actions support: Integrate build pipelines for more advanced workflows

For a personal portfolio, you'll never hit the bandwidth or storage limits. It's the perfect platform for developers who want to demonstrate their skills.

Setting Up — Antigravity and GitHub Prerequisites

You only need three things to get started:

Antigravity IDE: Download and install from the official site
GitHub account: Create a free account at github.com
Git: Run git --version in your terminal to verify it's installed (Antigravity will guide you if it's missing)

Once Antigravity is installed, set up the GitHub integration. Open Antigravity's terminal and run:

# Configure your Git identity
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
 
# Create a new GitHub repository
gh repo create my-portfolio --public --clone
cd my-portfolio

This creates a GitHub repository linked to your Antigravity workspace. If you're new to Antigravity, check out our Getting Started with Antigravity IDE guide for a thorough introduction.

Generating Your Portfolio with Antigravity's Agent

This is where the magic happens. Simply describe what you want in natural language, and Antigravity's agent builds the entire site for you.

Open the chat panel and enter a prompt like this:

Create a portfolio website with these requirements:
 
- Single-page responsive design (HTML + CSS + JavaScript)
- Sections: hero, about me, skills, project showcase (3 projects), contact form
- Color scheme: dark theme (#0a0a0a base, #3b82f6 accent)
- Animations: scroll-triggered fade-in effects
- Performance: vanilla JS only, no external libraries
- File structure ready for GitHub Pages deployment

Antigravity's agent analyzes this prompt, designs the file structure, and generates the code. Within a few minutes, you'll have index.html, style.css, and script.js ready to go.

Preview the result using a local server:

# Start a local server for preview
npx serve .
# → Open http://localhost:3000 in your browser

Understanding the Generated Code

A typical portfolio structure generated by Antigravity looks like this:

my-portfolio/
  index.html        # Main HTML file
  style.css          # Stylesheet
  script.js          # JavaScript (animations, interactions)
  assets/
    images/          # Profile photo, project screenshots
    favicon.ico      # Favicon
  README.md          # Repository description

The core structure of index.html follows standard best practices:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Portfolio - Web Developer Skills & Projects">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar" id="navbar">
    <a href="#hero" class="nav-logo">Portfolio</a>
    <ul class="nav-links">
      <li><a href="#about">About</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
 
  <!-- Hero Section -->
  <section id="hero" class="hero">
    <h1>Hello, I'm <span class="accent">Your Name</span></h1>
    <p>Web Developer / Designer</p>
  </section>
 
  <!-- More sections... -->
  <script src="script.js"></script>
</body>
</html>

Pay special attention to the meta description tag — setting it properly helps search engines understand your site and improves discoverability.

Customizing the Design — Iterating with AI

Tweaking the generated design is effortless with Antigravity. Just send additional instructions through the chat panel, and the agent modifies the code for you.

Here are some common customization prompts:

# Change fonts
Apply Google Fonts "Inter" for headings and "Noto Sans JP" for body text
 
# Add gradient background
Add a purple-to-blue gradient background to the hero section,
going from bottom-left to top-right
 
# Redesign skills section
Convert the skills section to a card grid layout with icons.
Add a subtle lift effect on hover

Antigravity shows every change in Diff View, so you can see exactly what was modified. If a change doesn't look right, hit ⌘Z to undo and try a different approach.

A practical tip for design iteration: focus on one change at a time. Requesting multiple modifications simultaneously can lead to unintended side effects.

Crafting the Projects Section — Showcasing Your Work

The projects section is the heart of any portfolio. Use Antigravity to create visually compelling project cards:

Redesign the project cards with these specs:
 
- Thumbnail image (16:9 aspect ratio)
- Project name and brief description
- Technology tags in badge format
- Buttons linking to GitHub repo and live demo
- Thumbnail zoom animation on hover

Here's an example of the hover animation CSS that Antigravity generates:

/* Project card hover effects */
.project-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15);
}
 
.project-card .thumbnail {
  transition: transform 0.4s ease;
}
 
.project-card:hover .thumbnail {
  transform: scale(1.05); /* Subtle zoom on thumbnail */
}

When writing project descriptions, go beyond listing what you built. Focus on what problem you solved — hiring managers and potential clients look for problem-solving ability, not just technical proficiency.

Deploying to GitHub Pages — Three Steps to Go Live

Once your site is ready, it's time to share it with the world. Deploying to GitHub Pages takes just three steps:

# Step 1: Commit your changes
git add .
git commit -m "Initial portfolio site"
 
# Step 2: Push to GitHub
git push origin main
 
# Step 3: Enable GitHub Pages (first time only)
# Go to your repo's Settings → Pages → Source → select "main" branch

Visit https://your-username.github.io/my-portfolio/ in your browser, and your portfolio is live.

You can also verify the deployment URL from Antigravity's terminal:

# Check deployment status
gh api repos/{owner}/{repo}/pages --jq '.html_url'
# Output: https://your-username.github.io/my-portfolio/

Setting Up Automatic Deployment with GitHub Actions

Manual deployment works fine, but GitHub Actions lets you automate the process so your site updates on every push. Ask Antigravity to generate the workflow:

Create a GitHub Actions workflow file that automatically deploys
to GitHub Pages whenever I push to the main branch.

Here's what the generated workflow looks like:

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
 
on:
  push:
    branches: [main]
 
permissions:
  contents: read
  pages: write
  id-token: write
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/configure-pages@v4
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'  # Deploy from repository root
      - id: deployment
        uses: actions/deploy-pages@v4

Push this workflow file, and from now on every commit to main triggers an automatic deployment. For more on Antigravity's GitHub integration, see our GitHub Integration Guide.

Adding a Custom Domain (Optional)

If you'd prefer your own domain over the default username.github.io subdomain, here's how to set it up:

# Create a CNAME file
echo "portfolio.example.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push origin main

Then configure your DNS provider with the following records:

A records: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
CNAME record (for subdomains): your-username.github.io

DNS propagation typically takes a few minutes to a few hours, though it can take up to 24 hours in some cases.

Summary

Antigravity × GitHub Pages is the fastest path to launching a professional portfolio site. The AI agent handles design and code generation while GitHub Pages provides free, reliable hosting — it's a combination that's hard to beat.

Here's a recap of the workflow covered in this guide:

Describe your ideal portfolio to Antigravity's agent and let it generate the entire site
Preview and refine the design through iterative prompts
Push to GitHub and your site goes live instantly
Add GitHub Actions for fully automated deployments

If you've been putting off building your portfolio, there's no better time to start. With Antigravity, you can have a polished, professional site up and running in under 30 minutes. For more advanced development workflows, check out the Antigravity Best Practices Collection.