Workshop / 20 minutes

Vibe Code
Your Portfolio.

Build a live, public portfolio website in 20 minutes.
No coding. No installs. 100% free.

Jiawen Wang NYU · SEA v0.1

/ By the end

You'll have this.

A real, public portfolio website, live at a URL you can send anyone.

jwwwwwang.github.io/portfolio-starter/demo.html

↳ Open the demo  ·  open it on your phone too

/ The 20-minute flow

Five steps.

01Copy template 02Enable pages 03Fill markdown 04Feed gemini 05Paste & publish 06Iterate

Every step is spelled out in the walk-through doc — keep it open on your laptop.

github.com/JWWWWWANG/portfolio-starter → WALKTHROUGH.md

01 Copy the template · 30 sec

One click to fork.

  • Open portfolio-starter
  • Click the green Use this template button
  • Name it portfolio, set Public
  • Click Create repository
The portfolio-starter repo with the Use this template button highlighted in the top right
Top-right of the repo page.

02 Turn on pages · 1 min

Settings → Pages.

  • Inside your new repo (not mine)
  • Open Settings → Pages in the left sidebar
  • Branch: main / (root)
  • Click Save
GitHub Pages settings showing Branch set to main with Save button highlighted
Settings → Pages → Branch → Save.

02 Write down your URL

It goes live.

Refresh the Pages page after a minute. A green banner shows your live URL.

https://<your-username>.github.io/portfolio/

Write it down. Opening it now shows the placeholder — that's fine. We fill it in Step 5.

GitHub Pages settings showing the live site URL banner with a Visit site button
Green banner: your site is live.

03 Fill the template · 5 min

Pick one. Hit Raw. Copy it all.

  • template-general.md — universal
  • template-actor.md — actors
  • template-filmmaker.md — filmmakers
  • template-musician.md — musicians

Open the file, click Raw (top-right), Cmd+A / Cmd+C. Replace every [[placeholder]] with your content.

Short on time? Fill just Hero + About + one project.

Images → assets/. Videos → YouTube / Vimeo. Audio → SoundCloud / Spotify.

GitHub file view of template-general.md in the templates folder, with the Raw button highlighted in the top-right of the file toolbar
Raw → then Cmd+A, Cmd+C.

04 Feed gemini · 3 min · the core moment

Three messages, in order.

  • 4.1 — drag your style reference screenshot into Gemini. Say: "Remember this visual style — colors, typography, layout, vibe."
  • 4.2 — paste the system prompt from gemini-system-prompt.md
  • 4.3 — paste your filled markdown template. Send.

No reference image? Describe it in words: "minimal Swiss / brutalist / Y2K / editorial vintage."

04 Copy the HTML

One click.

Gemini replies with one big HTML code block.

Hover over it. A Copy button appears in the top-right corner of the code block. Click it.

The copy button gives you pure HTML — no ` ``` ` wrappers to clean up.

Gemini chat window showing an HTML code block output with the Copy button highlighted in the top-right corner
Top-right of the code block.

04 Preview first · optional, but fast

See it before you commit.

Open jsfiddle.net → paste Gemini's HTML into the HTML panel → hit Run.

Instant render, no GitHub wait. Happy? → Step 5. Not happy? → back to Gemini.

Same trick in Step 6 — iterate in JSFiddle, only commit when you love it.

05 Paste & publish · 3 min

Paste. Commit. Refresh.

  • In your repo, click index.html
  • Click the pencil icon (top-right)
  • Cmd+A → delete → Cmd+V paste the Gemini HTML
  • Click green Commit changes… → confirm
  • Open your Pages URL → refresh

Your site is live.

GitHub web editor showing index.html being edited with the Commit changes dialog open
Pencil → paste → commit.

06 Iterate · 3 min · the fun part

Direct Gemini with your voice.

Back in Gemini, try:

"Make the hero darker with a subtle gradient."
"Use Playfair Display for the headings."
"Add a fade-in animation when scrolling."
"Make it more brutalist / Y2K / editorial."
"Make it fully responsive on mobile."
"Add a dark mode toggle."

Copy → preview in JSFiddle → happy? → paste into index.html → commit → refresh.
Repeat until you love it.

/ If you get stuck

Plan B: Netlify Drop.

No GitHub account? GitHub stuck? 30-second backup:

  • Open netlify.com/drop
  • Save Gemini's HTML as index.html on your desktop
  • Drag that file into the browser window
  • Netlify gives you a live URL immediately

Trade-off: random URL, manual updates. But it always works.

Other issues? Troubleshooting section of the walk-through doc

/ After today

Keep going at home.

Iterate

  • Add more projects via Gemini
  • Try new styles — re-commit in GitHub's web editor

Custom domain

Go deeper

  • Glossary — 10 layout patterns + 10 motion effects, each with a ready-to-paste Gemini prompt and a live demo

/ Share your URL

Turn to your neighbor.

Open each other's sites on your phones.

Same 20 minutes. Totally different results. That's the point.