Build a portfolio or online resume with AI and host it free
A portfolio in five parts, a ready prompt, a free site named after you on BrewInTH, a resume PDF, and the personal details to keep off the web.
Applying for a job, pitching for freelance work or applying to study: the reader usually wants to see real work, not just one PDF. But building a portfolio site yourself sounds like a chore: pick a theme, pay a site builder every month, or hire someone.
AI can now write a good-looking portfolio site in minutes. This guide builds a portfolio or online resume with AI: preparing the content, prompting the AI, going live for free on BrewInTH under your own name, and what personal details to keep off the page.
In short
✅ A portfolio is a static site: it runs on the free plan and never sleeps, so a recruiter's click always opens at once
✅ Name the site after yourself for free, e.g.pim-design.host.brewinth.net(set once, so choose well)
✅ Give each project its own page in the same site, e.g./work/coffee-app/
✅ Put your resume PDF on the site to open or download
✅ Keep your phone number, home address and ID number off a public site
What a portfolio site needs
A good portfolio is not long. It answers the reader's questions fast: who is this, what can they do, and how do I reach them?
- Home: your name and one sentence on what you do, e.g. "UI designer who has built restaurant apps for 3 years".
- 3-6 featured projects: pick the ones closest to the work you want, rather than everything.
- A page per project: briefly, the brief, the part you did and how it turned out.
- Short resume: education, experience and skills, with a button to open the PDF.
- Contact: email, LinkedIn or GitHub.
Step 1: Prepare the content
AI lays pages out nicely, but the content has to come from you. Put it in one plain text file:
- The name to use on the site and a one- or two-line introduction
- 3-6 projects: title, year, your role, the brief, what you did, the result (real numbers if you have them)
- 1-3 pictures per project
- Your resume text and resume PDF
- Contact links
For work done for clients or a former employer, check that you may show it. If unsure, remove the client's name and anything internal, and describe only your thinking and your part.
Step 2: Ask the AI to build it
Open ChatGPT, Claude or Gemini and paste this prompt (with your own details):
Build a personal portfolio site in plain HTML + CSS, no framework, that works well on phones.
About me:
- Name: Pim (UI/UX designer, 3 years of experience)
- Introduction: I design apps people understand the first time they use them
- Projects: (paste 3-6 projects: title, year, role, brief, what I did, result)
- Resume: (paste education, experience, skills)
- Contact: email pim@example.com, LinkedIn (paste link)
Structure:
- index.html home: name, introduction, cards for featured projects, contact button
- work/<project-name>/index.html one page per project
- about/index.html resume with an "Open resume (PDF)" button linking to resume.pdf
- 404.html not-found page with a link back home (links start with /)
- Pictures live in images/ with the file names I give you
- A title, meta description and og:image on every page
- White and light grey with a blue accent, easy-to-read type
- Do not invent projects, numbers or praise I did not give you
- No phone number or addressAsking for each page as a folder with an index.html inside gives tidy addresses such as /work/coffee-app/, so you can send someone a link to a single project.
Want changes? Say so in the same chat, e.g. "bigger project cards" or "add a dark mode".
Step 3: Go live on BrewInTH
Name the site
- Sign up at brewinth.com and create a project, naming the site after yourself, e.g.
pim-design. The site lives atpim-design.host.brewinth.net. - If the project already exists with a random
brew-…name, press Name your site (free) on the project page.
The free site name can be set only once. Pick one that will last, such as your real name or professional name, not one tied to your current employer.
Send the files
Option 1: no coding agent. Open Upload and go live (BETA), choose the project and send a ZIP file with index.html at the top level, plus the work/, about/ and images/ folders and resume.pdf. Use the ZIP tab, because a portfolio has pictures and several folders.
Option 2: a coding agent (Claude Code, Codex, Cursor, Windsurf). Press Create the AI link and token (automatic) and paste the ready-made message into the agent. It uploads every file in its folder and checks the live site for you. See how to set up your agent.
Shrink the pictures first
The free plan has 20 MB of file storage for the whole site. Pictures from a camera or Figma can be several MB each. Resize them to about 1,600 px wide and convert to WebP first; pages load faster too, which matters because people often open the link on a phone.
Your resume PDF on the site
Put resume.pdf in the site and link a button to it; the browser opens the PDF straight away. To make the button download the file instead, have the AI add download to the link, e.g. <a href="/resume.pdf" download>.
When you update your resume, keep the same file name, so links you have already sent always get the new version.
Personal details: what stays off the site
A paper resume goes to a few people; a website can be opened by anyone and is picked up by search engines. Use this rule:
- Fine: name, a work email, LinkedIn or GitHub, the province you live in, projects you may publish
- Keep off: personal phone number, home address, date of birth, ID number, photos of ID cards or official documents, clients' internal information
The same goes for the PDF. Make a web version without your phone number and address, and send the full version directly to companies that contact you.
One more thing: the BrewInTH portal. When you create a project there is a switch, List this site on the brewInTH portal — free promotion, on by default. The site then appears on portal.brewinth.com once it is live and approved by the team. If you would rather keep a personal site out of a public directory, switch it off when creating the project, or later on the project page at any time.
Check before you send the link
- Open it on a phone and scroll every page: no squashed pictures, no tiny text
- Press every link: project cards, the resume button and contact links
- Mistype an address, e.g.
/abc, and make sure your 404 page appears - Send the link to yourself in a chat and check that a picture and description show up
- Re-read every number and company name: all of it must be real
A shorter address or your own domain
The free address is perfectly fine for job applications. For a shorter one, buy it once: pim-design.w.brewinth.net for ฿49 or pim-design.brewinth.net for ฿99. The old name keeps working and forwards to the new one.
If you freelance seriously, your own domain such as pimdesign.com looks the most professional. Custom domains come with the paid plans, from Starter at ฿99 a month; see the domain guide.
Adding new work
Finished a new project? Ask the AI in the same chat to add a card and a page, then send the complete set of files to the same project on Upload and go live. It will say Update the existing site and the address stays the same.
Careful: a static site is replaced by the new set of files as a whole. Anything you leave out of that upload, such as old pictures or resume.pdf, disappears from the site.
Frequently asked questions
Does the free plan work?
Yes. The free plan has 1 project, 20 MB of file storage and 1 GB of bandwidth a month, enough for a portfolio with resized pictures. Static sites never sleep, so they always open at once.
Can I change the site name later?
The free name is set once. For another name later, buy a short address (฿49 or ฿99) with the new name. The old name keeps working and forwards to the new address, so links you have already sent do not break.
Can I show videos of my work?
Yes, but video files take a lot of space. Upload them to YouTube and have the AI embed them in the page.
Can I have English and Thai versions?
Yes. Ask the AI for English pages in an en/ folder with a language switch on every page. It stays a static site.
Can I do this from a phone?
Status and settings work from a phone, but sending files and letting the AI deploy are not stable on a phone yet. Use a computer for those steps.
Summary
A good portfolio has just five parts. Gather 3-6 real projects, let the AI lay them out in folders, name the site after yourself, put it on BrewInTH for free, and check it on a phone before sending the link. And keep unnecessary personal details off both the site and the PDF.
Start your first project for free →