A resume lists claims. A deployed demo is evidence. When I want to show that I can do something, I build a tiny project around that one skill, ship it to a public URL, and write a README that explains the decisions.

This post is the pattern I use to do that.

The idea: one skill, one demo

The biggest mistake I see in portfolio projects is scope creep. A "simple search demo" turns into a full app with auth, dashboards, and a database before anything ships. The skill gets buried under features.

I avoid that by picking one skill and one constraint. For this example, the skill is client-side filtering and the constraint is no external libraries.

That means no React, no Lodash, no build tools. Just an HTML file, some data, and a search box.

Career progression checkpoint illustration for this section.

The demo

Here is the entire project. It fits in one file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skill Proof: Search</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
    input { padding: 10px; width: 100%; box-sizing: border-box; margin-bottom: 20px; font-size: 16px; }
    .item { padding: 10px; border-bottom: 1px solid #eee; }
  </style>
</head>
<body>
  <h1>Employee Directory</h1>
  <input type="text" id="search" placeholder="Type to filter names...">
  <div id="results"></div>


  <script>
    const data = Array.from({ length: 500 }, (_, i) => ({
      id: i,
      name: `Employee ${i + 1}`,
      role: i % 3 === 0 ? 'Engineer' : 'Designer'
    }));


    const list = document.getElementById('results');
    const input = document.getElementById('search');


    function render(items) {
      list.innerHTML = items.map(i =>
        `<div class="item"><strong>${i.name}</strong> - ${i.role}</div>`
      ).join('');
    }


    render(data);


    input.addEventListener('input', (e) => {
      const term = e.target.value.toLowerCase();
      const filtered = data.filter(item =>
        item.name.toLowerCase().includes(term)
      );
      render(filtered);
    });
  </script>
</body>
</html>

That is the whole thing. It demonstrates data generation, DOM updates, and event handling without any framework.

How I deploy it

I push the file to GitHub, then deploy it to a static host like Vercel or Netlify. The exact host does not matter much. What matters is that the code is running somewhere I do not control.

Code on my hard drive is invisible. A live URL proves it works outside my machine.

How I document it

My READMEs follow this shape:

# Skill Proof: Client-Side Search


**Live demo:** [URL]
**Source code:** [URL]


## Goal
Demonstrate performant array filtering on 500 records using vanilla JavaScript.


## Constraint
No external libraries.


## What I learned
- Native `filter` is fast enough for this size of dataset.
- Re-rendering the full list on every keystroke is acceptable at 500 items but would need virtualization at larger sizes.

Closing

If you want to prove a skill, build the smallest possible demo that exercises it, ship it, and write down what you learned. One skill. One URL. One note. That is more useful than a feature list no one reads.