vCard Pro - Responsive One-Page Contact Website

vCard Pro is a responsive one-page digital business card, hand-coded for easy customisation and fast deployment - ideal for freelancers, WordPress users, and small business owners.

Home
>
Custom Code
>
vCard Pro - Responsive One-Page Contact Website
Project Overview

vCard Pro is a bespoke, mobile-first contact website designed as a modern digital business card for professionals and small business owners.

Built using clean HTML, CSS, and vanilla JavaScript, it delivers fast performance, full control, and effortless personalisation.

Fully responsive and optimised for self-hosted environments and WordPress-based platforms, it uses a central cardData object for easy customisation - letting users update names, roles, links, and branding in one place without editing the layout.

Explore the Live Demos:

Key features include:

  • Live QR code generator for instant contact sharing
  • Automatically generated .vcf file for adding to mobile or desktop contacts
  • Modular CSS with fully customisable styles for each section and button
  • Clean, semantic HTML structure optimised for performance and accessibility
  • Mobile-first responsive layout that looks great on all devices
  • Seamless deployment on WordPress or any self-hosted environment
  • Built-in Content Security Policy (CSP) for enhanced security and production readiness

‍

Get the Ultimate vCard Kit on Gumroad – Fully customisable for your own brand or ready to resell to your clients.

Client:
Self-Initiated Project
Platform:
Custom Code
Client Website:
Client Logo:
Two smartphones displaying a digital business card and scannable QR code using vCard Pro, a responsive self-hosted contact solution for professionals.
Services Provided

The first version of vCard Pro was created for my wife’s business as a simple, mobile-friendly contact site. Based on that foundation, I expanded the concept into a fully-featured and standalone solution.

I improved the codebase, structured it for easy editing, and added a central cardData object to manage all content and styling from one place. I also included two ready-made templates and layered PSD files to help users brand and launch quickly.

While this version is tailored for WordPress and self-hosted environments, I also create similar solutions for Webflow clients, adapting the setup to suit each platform.

Today, vCard Pro is available as both a client add-on and a standalone kit:

Get The Ultimate Digital vCard Kit for WordPress & Self-Hosted Sites
Project Challenge

The key challenge was to develop a powerful yet flexible digital business card without using external frameworks or third-party services. I wanted something lean, portable, and fully under the user’s control.

Just as importantly, I wanted it to be easy to update - even for non-technical users. That’s why I designed a centralised configuration model (cardData) that handles all text, links, and contact info in one place.

To support custom branding, I included two layout options and bundled layered PSD files for easy visual updates like logos, graphics, and header images.

The goal was to offer a solution that’s technically robust but still intuitive and brand-friendly.

Collection of mobile phones displaying various branded versions of vCard Pro digital business card templates for professionals and small businesses.
Design Approach

To bring this vision to life, I built vCard Pro as a fully self-contained, dependency-free product. By avoiding frameworks and plugins, the code remains fast, stable, and easy to host anywhere.

Every design decision supported ease of customisation: a single cardData file controls content, two layout templates offer flexibility, and modular CSS variables allow for fast visual tweaks.

The structure is fully mobile-first, accessible, and cleanly organised for developers and non-developers alike.

From the shareable QR modal to the downloadable contact file, every feature was built to deliver a professional experience with minimal setup.

Google Pixel phone displaying a branded digital business card for Purespace Property Care using vCard Pro, a customisable self-hosted contact page for service professionals.
Results & Impact

vCard Pro has become a trusted add-on for my WordPress clients and a valuable product for fellow designers and freelancers. Its ease of setup, custom branding options, and standalone nature make it ideal for a wide range of professional uses.

Thanks to its clean codebase and configuration-first design, even non-technical users can quickly adapt it for their needs.

It’s already helped clients create a polished online presence - and enabled resellers to deliver high-quality contact pages without starting from scratch.

The project proves that with the right structure, a simple idea like a digital business card can offer both usability and long-term value.