Build a useful HTML vCard and personal profile page

An HTML “vCard” website is usually a compact personal profile, while a vCard file is a structured contact record. They can complement each other, but they are not the same format. Give visitors a readable webpage first and an optional .vcf download second.

This replaces the historical collection of 15 visual examples with an original, practical design guide. It does not bundle those old templates or their assets.

Decide what belongs on the page

Use your name, a short description of what you do, a small selection of work, and one clear contact route. A concise profile is more useful than a long list of tools with no context. Link directly to public work where possible.

For a static implementation, Astro is one option; plain HTML is sufficient for a single page. A profile should still be useful without JavaScript. Prefer real links and headings over a full-screen animation that delays access to the content.

A readable structure

<main>
  <header>
    <h1>Your name</h1>
    <p>What you do, and who you do it for.</p>
  </header>
  <section aria-labelledby="work-title">
    <h2 id="work-title">Selected work</h2>
    <!-- Add genuine project links with useful descriptions. -->
  </section>
  <a href="/contact.vcf" download>Download my contact card</a>
</main>

Create the linked file before shipping the page. Do not publish a download control whose destination has not been tested.

Offer a contact file carefully

Include only details you intend to make public. A basic contact card needs a name and a chosen contact method; it does not require your home address or personal phone number. Follow the vCard format specification and test imports in the address-book applications you expect visitors to use.

Test the small details

Open the page on a phone, enlarge the text, and navigate using only a keyboard. Confirm that contact links work and a downloaded file has the intended name. Use an actual portrait or omit the image; an empty photo placeholder adds nothing.

If you also print business cards, make the website address easy to type. Keep it stable so the printed card remains useful even after your design changes. See our business-card guide for practical print considerations.