Build your portfolio site with AI agents
Today you direct AI agents, one Role at a time, to build your own portfolio site. Before you leave, it is live on the web at an address you can share.
What you build today
By the end of the workshop you have three things:
- A live portfolio site at
https://YOUR-USERNAME.github.io/portfolio/, with your bio, your projects, your links and your CV, in a style of your own. - Your own repo (the folder with your site's files, on GitHub). You keep it and grow it at home.
- A way of working with AI agents that you can use on your next project.
See what that looks like: the Demo site is the Instructor's own portfolio, built with the same steps you follow today. If it still shows Ada Example, that is the sample person your own copy starts with.
What you need
You need nothing installed beforehand. Check these five points before Setup starts:
Read-do checklist: read an item, do it, then the next
- A laptop with macOS, Windows or Linux on which you may install apps, and its charger. A Chromebook, a tablet, or a laptop where you cannot install apps? Tell the Instructor at the start: there is a browser-only way.
- Google Chrome on that laptop. Get it from google.com/chrome if it is missing.
- A GitHub account, or an email address to create one in Setup.
- A personal Google account. A work or school account may be blocked in Antigravity IDE, the editor we use.
- You are 18 or older. Antigravity IDE requires it.
Optional, and it saves you typing: the text of your LinkedIn profile, or your CV as a file such as a PDF.
How the day works
- One Role per Block. A Role is a job that people did in every web project: Analyst, Designer, Developer, QA, Lawyer and Ops. Each Block (a timed part of the workshop) fills one Role. An agent does the work; you lead and decide.
- The room moves together. We work in Lockstep: when a Block's time is up, everyone starts the next one, and the projector shows how much time is left. Not done? One command catches you up: a checkpoint brings your site to where the room is, and your own content stays. Each Role's page shows how, in its card Fell behind?
- You keep everything. The slides are linked in the menu, under Help and reference. This guide stays online after today, and your site, its code and the agent skills live in your own GitHub account.
- Stuck? Ask your agent first. In a fresh chat, type
Where am I?and it tells you what is done and what comes next. Want to understand something it built? TypeExplainand the file or the idea. - A fresh chat for every Role. Each Role starts in a new agent chat. The files in your repo carry the work from one Role to the next.
- Seven common mistakes. Each Block shows one mistake at the moment you could make it. The last slides sum up all seven.
Run of show
The times are planned per Block. Under each time box you see the minutes from the start of the workshop, so the clock tells you where the room is. Your Instructor keeps the clock.
| O | 20 minmin 0–20 |
OpeningSlides, no live demos: the Demo site, what makes a good website, vibe or agentic coding, how professionals build a website, how agents work, Modern Web Guidance and Chrome DevTools. |
| 1 | 15 minmin 20–35 |
SetupOutcome: your own repo, your tools installed, Antigravity IDE open. No checkpoint: your repo is the outcome. |
| 2 | 15 minmin 35–50 |
AnalystOutcome: your content file and a short spec. Checkpoint: |
| 3 | 15 minmin 50–65 |
DesignerOutcome: your design brief. Checkpoint: |
| 4 | 25 minmin 65–90 |
DeveloperOutcome: your site, running on your laptop. Checkpoint: |
| 5 | 10 minmin 90–100 |
QAOutcome: your site, checked and fixed. Checkpoint: |
| 6 | 10 minmin 100–110 |
LawyerOutcome: a privacy page, and no private data in your repo. Checkpoint: |
| 7 | 5 minmin 110–115 |
OpsOutcome: your site live, and the link shared. Checkpoint: |
| 8 | 5 minmin 115–120 |
FeedbackOutcome: your feedback, sent from the guide. Then six to eight of your sites side by side on the projector, the seven mistakes, and Thank you. |
Vibe coding or agentic coding?
AI can build you an excellent website or a poor one. Which one you get depends on you: how well you know what a good website needs, and how well you know how to work with AI. Today you practise both.
Vibe coding
You type "build me a website" and accept whatever comes back. No plan, no checks. The agent guesses your content, your audience and your look.
Agentic coding
You direct the agent through a plan, small steps, rules and checks. You read what it did before you accept it. You stay the lead.
How professionals build a website
Professional teams take every change along the same road, from idea to production. Today you walk a short version of it:
- SpecWhat to build and why, written down before any code. Today: the Analyst.
- DesignHow it looks: colours, fonts and layout, agreed before anyone builds it. Today: the Designer.
- TicketsSmall tasks, one clear goal each. Today: one Block per Role.
- Feature branchYour own copy of the code in git, one per ticket. At home.
- Merge requestAsk to merge your branch; someone, or an agent, reviews it. On GitHub: a pull request. At home.
- CI pipelineOn every push, robots run the tests and checks. Today: GitHub Actions publishes your site.
- QACheck it like a user would. Today: the QA Role.
- PublishMerge to main, and it goes live. Today: the Ops Role.
Want agents to help with every step at home? The page Agentic coding systems shows flows you can install in your repo.