How to plan and build your portfolio

Plan your portfolio, build it with your coding agent, add a fun feature that shows your personality, and save it to GitHub.

Series: Build your website on AWS (4 articles)

1
How to create your AWS account and first project
…
3
How to plan and build your portfolio This article
4
How to put your website online

Ana Cunha

Developer Advocate @ AWS

Published Oct 29, 2026

Last modified Oct 29, 2026

A coding agent can build your website in a few minutes (or less), but deciding what that website says and looks like is still up to you. If you just ask for "a developer portfolio," you will end up with a generic page like every other developer who asked for the same thing.
To make your portfolio look and feel like you, we'll start with a plan: what you want people to know about you, the skills you want to highlight, the projects you want to show, and a fun (or just curious) fact that visitors can discover on the page. Then we'll give that plan to your agent to build a simple site with HTML, CSS, and JavaScript, test it on your computer, and save it to GitHub.
You can use the coding agent you prefer. If you don't have one yet, you can  download Kiro , which has a free plan.
Write the plan for your websiteOpen your  portfolio  folder in your agent, or create one if you don't have one yet.
Your agent doesn't know which projects you're proud of or what you want people to remember about you. Writing that down before you start gives the agent what it needs to build your portfolio, and gives you something to check the site against when the agent is done.
Create a  plan.md  file in your  portfolio  folder with this template:
Markdown
# My portfolio
﻿
## Introduction
The first thing visitors see: your name and what you do, in one sentence.
﻿
## About me
Who you are and what you're working on now, in a few sentences.
﻿
## Skills
Skills you have or are learning.
﻿
## Projects
Two or three projects or achievements (from school, work, or on your own). For each one: what it is, what you did, and a link if you have one.
﻿
## Fun fact
Something about you that visitors can discover on the page (the first thing you ever built, a hobby, a place you've lived).
﻿
## Style
A style you like (minimal, colorful, retro, playful), or websites whose style you like.
﻿
## Other sections
Anything else you want on your page.
Replace each description with your own words. The plan doesn't need to be polished, just clear about what you want. Everything in your plan ends up on a public website, so only include what you're comfortable sharing.
Here's my plan, so you can see what a filled-in one looks like. Some parts aren't decided yet, like the style, and that's okay. Write what you know, and you can change it afterwards. Don't overthink it!
Markdown
# My portfolio
﻿
## Introduction
Ana Cunha, Senior Developer Advocate at AWS.
﻿
## About me
Brazilian, living in Mexico City (tacos!). Used to be a software engineer at Amazon.com, now I help other devs build on AWS because I like teaching way more than being on call. Right now I'm trying to make AWS easier to get started with, so people can build their apps instead of learning 200 different service names.
﻿
Master's in Computer Science (Northeastern), bachelor's in Information Systems (PUCRS).
﻿
## Skills
Java, TypeScript, AWS, AI coding agents. Also writing tutorials and making videos.
﻿
## Projects
- Build your portfolio on AWS: a blog series that goes from creating an AWS account to a deployed portfolio. https://builder.aws.com/content/3K0hPixvikMqQ93vuL1Oyu5vym5/how-to-create-your-aws-account-and-first-project
- Getting Started with Kiro: a YouTube series for AWS Developers LATAM about Kiro. https://www.youtube.com/playlist?list=PLQHh55hXC4ypajJTYTf7eSq3N-dD63gtO
- Calaveritas: a web app that writes a calaverita literaria (a Day of the Dead poem) for your pet from a photo, using Amazon Bedrock. Built with Next.js and TypeScript. https://github.com/anacunha/calaveritas
﻿
## Fun fact
I'm learning to skateboard, even though I'm afraid I'll break my teeth.
﻿
## Style
Retro video games, like SNES? Or typewriter vibes, dunno. Pixel art. I like plain colors, white on black or black on white.
﻿
## Other sections
Maybe something about Star Wars (but not episodes 7, 8, and 9).
Build it with your agentNow give your plan to your agent. Paste this prompt in the same folder where you saved  plan.md :
Build my portfolio website from  plan.md . Use plain HTML, CSS, and JavaScript, with no frameworks, packages, build step, or backend. Put  index.html ,  styles.css , and  script.js  in this folder. Only use what's in my plan and don't make up details about me. Don't create or change anything in AWS. Before you start, ask me about anything in the plan that isn't clear.
Your agent might come back with a few questions first, like which style to go with or what to do with something your plan leaves open. Answer what you know, and if you haven't decided, let the agent pick. You can change it later. It might also ask your permission before creating files.
﻿
When the agent is done, your  portfolio  folder has three new files:
 index.html  has the content of your page: your introduction, about me, skills, and projects.
 styles.css  controls how your page looks: colors, fonts, and layout.
 script.js  makes the page interactive, like buttons and animations.
﻿
Refine itOpen  index.html  in your browser to see your site. Compare it to your plan: some things will look different from what you imagined, and that's normal. Ask your agent for one change at a time, so you can see what each change does before you ask for the next one. For example:
Show my projects as cards instead of a list.
Make your fun fact interactiveRight now your fun fact is probably just text on the page. Turn it into something visitors discover by interacting with your site. Add a visible hint so visitors know there's something to find, and make sure it doesn't get in the way of the rest of your portfolio, so people can still get to your projects without playing first.
If you're not sure what to make, here are a few ideas:
A button that switches your whole site to a different style
A card visitors scratch or flip to reveal your fun fact
A small terminal where visitors type a command to find it
A mini game where visitors guess something about you
Pick something that fits you, or come up with your own. Then ask your agent:
Turn my fun fact into an interactive feature: [describe your idea]. Add a visible hint so visitors know there's something to find. Keep the rest of the site easy to navigate, and don't change anything else.
Here's the prompt I used for mine:
Turn my fun fact into an interactive feature: a pixel-art girl on a skateboard who tries a trick when visitors click her, falls, and loses a tooth, and then a stats card shows up, like "Skateboarding: LVL 1 · Fear of losing teeth: MAX". Add a visible hint so visitors know there's something to find. Keep the rest of the site easy to navigate, and don't change anything else.
﻿
Test it locallyOpen  index.html  in your browser and go through your site the way a visitor would. Check that:
Your About me, Skills, and Projects sections say what you meant, and there's nothing the agent made up.
The menu takes you to each section, and your project links open the right pages.
The hint for your fun fact is easy to spot, and the interaction works.
Your site still reads well when you make the browser window narrow, about the width of a phone.
Then ask your agent to check the technical parts:
Review my site against  plan.md . Check that all links work, that everything works with a keyboard, that the page reads well on mobile, and that there's nothing on the page that isn't in my plan. Tell me what you'd fix before you change anything, and don't redesign the site.
Your agent might ask you questions or suggest fixes. Pick the fixes you want, ask for them one at a time, and open  index.html  again to check them.
Save it to GitHubYour site works on your computer, but it only exists there. GitHub keeps a copy of your code online, in a repository: a project folder on GitHub that stores your files and every change you make to them. Since the repository is public, you can also share it so people see how you built your site.
Sign in to  GitHub , or create an account if you don't have one. Then:
In the upper-right corner, choose +, then New repository.
In Repository name, enter  portfolio .
Leave Choose visibility on Public, then choose Create repository.
﻿
On your new repository's page, choose uploading an existing file.
﻿
Drag  index.html ,  styles.css , and  script.js  into the page, plus any images your site uses. Leave out  plan.md  and any other files in the folder that aren't part of your site.
Every time you save changes to a repository, GitHub records them as a commit: a snapshot of your files, with a message that says what changed. Under Commit changes, write a message that describes the change, like  Add my portfolio site , then choose Commit changes.
﻿
When the upload finishes, check your repository's page.  index.html  should be in the file list, not inside a folder, and there should be nothing in the list you didn't mean to share.
When you change your site later, upload the changed files the same way. GitHub replaces them and keeps the earlier versions in the repository's history.
What you builtYou started with a plan in your own words, and your agent turned it into a site that looks and feels like you. Your site works on your computer, and it's saved on GitHub, so you can keep changing it without losing what you had before.