How to make a portfolio project demo video that hiring managers watch

A portfolio project demo video is a short screen recording, usually 60 to 120 seconds, that shows a side project, case study or bootcamp app actually working, with a sentence or two on what you built and why. It gives reviewers proof without making them clone a repo, wait for a sleeping free-tier server, or create an account. Here's what to include, a simple structure, and where to put the video so it gets seen.

Why a portfolio project demo video helps

People reviewing portfolios usually have many to get through. Every obstacle between them and your work costs you attention:

• Live links break. Free hosting tiers spin down, APIs change, domains expire.
• Sign-up walls. Few reviewers will create an account to try a to-do app.
• Repos don't show behavior. Code shows how you write; it doesn't show what the product does.
• Context gets lost. A video lets you say, in your own voice, what the hard part was.

A demo video doesn't replace the repo or the live link. It's the thing that makes someone want to click them.

A 90-second structure

Show the interesting part

This segment is what separates your project from a tutorial clone. Pick one thing and make it visible:

• A real-time update arriving in two browser windows at once.
• Offline mode working with the network disabled.
• A search that stays fast over a large dataset.
• An accessibility detail, such as full keyboard navigation.
• For designers: the before-and-after of a flow you redesigned, with the reasoning.

Then mention briefly how you did it. Save the deep explanation for the README or case study.

What to leave out

Skip the sign-up form, the settings page and the footer unless they are the point of the project. Skip a long tour of the folder structure too; reviewers who care about code will open the repo. And avoid apologizing on camera for unfinished parts. If something is incomplete, simply do not show it, and note known limitations in the README instead.

Recording your portfolio project demo video

Prepare the project

• Seed realistic data. "Test test 123" makes a good app look unfinished.
• Fix the obvious visual bugs on the screens you'll show. Reviewers notice.
• Size the browser to about 1920 by 1080, or narrower with browser zoom at 110 to 125 percent so UI is readable.
• Hide localhost. Either record on the deployed version or replace the URL bar in editing.

Record

For a web project, recording a single browser tab gives the cleanest result. For mobile or desktop apps, record the simulator or app window. Detailed capture setup is in how to record a software demo.

Click & Record is a good free fit for this: it's a Chrome extension with no account and no watermark, which matters when the video represents you professionally (see free screen recorders with no watermark). It records a tab, any window or the full screen, logs your clicks in web pages and turns them into zooms afterwards, so small UI details are readable. You can retime, adjust or delete each zoom, and add manual zooms for moments in non-browser apps, where automatic zoom isn't available.

Narrate, briefly

Your voice is part of the pitch: it shows how you explain technical work, which matters in interviews. Keep it conversational, and talk about decisions rather than narrating clicks: "I cached search results on the client so filtering feels instant" says more about you than "now I click the filter." If you'd rather not narrate, captions can carry the explanation. Click & Record generates subtitles on your device, and you can also write your own cues.

Polish without overdoing it

• Trim the start and end, and cut any fumbles.
• Speed up waits, like builds or slow API calls, with per-clip speed up to 4x.
• Add a background, padding, rounded corners and a browser frame. It's a small touch that makes a side project look intentional.
• If you include your webcam, keep it small. Click & Record records it as a separate track, so you can resize or hide it after recording.

Already have a raw recording? The free browser editor handles trimming, manual zooms, subtitles, backgrounds and export without installing anything.

Where to put the video

1. Portfolio site: embed it at the top of each project page, above the write-up. Export MP4 for broad browser support, or WebM for smaller files; see MP4 vs WebM.
2. GitHub README: GitHub lets you drag a video into a Markdown file in the web editor and renders a player. Upload size limits apply and can change, so check GitHub's current documentation. A short GIF or a thumbnail image linking to the video are alternatives.
3. Resume and applications: link to the video directly, not just the repo.
4. LinkedIn and social: export a square 1:1 or vertical 9:16 version so it fills the feed.

For documentation-style videos in a repo, the guide to video for developer documentation goes further.

Summary

A portfolio project demo video gives reviewers a fast, reliable look at your work: what it does, the one thing that makes it interesting, and where to find the code. Keep it short, use real-looking data, and put it where reviewers land first. Click & Record lets you record and polish it for free, with no watermark and no account.