A useful portfolio should tell a visitor what you do, show a small number of relevant projects and provide a clear contact route. This example includes all three. Its category buttons filter project cards in the browser, so you can verify that the JavaScript works before you export it.
Open the source and demo
Change the identity first
- Replace the sample name and role in the hero section.
- Write a specific one-sentence description of the work you want.
- Replace the email link with an address you monitor.
- Update each project title, result and category.
Keep project cards factual
Each card should state the problem, your contribution and a result you can support. Remove invented metrics and client names. If a project is a practice exercise, label it clearly. Honest context makes a small portfolio stronger than vague claims.
<article class="project" data-category="web">
<p class="tag">Web</p>
<h2>Accessible event page</h2>
<p>A practice build focused on keyboard navigation.</p>
</article>Test the filter and keyboard flow
Select each category and confirm that only matching cards remain visible. Then use the Tab key from the top of the page. The navigation, filter buttons and contact link should receive focus in a logical order. Repeat the test at mobile width and confirm that headings do not overflow.
Export and publish
Export the project as a ZIP, extract it and open index.html. A ZIP is ready to hand to a static host, but it is not online until you deploy it. Keep a clean copy of the exported source before adding analytics, forms or third-party scripts.