Why (and How) I Built a Personal Digital Business Card with Claude in 10 Minutes



I recently signed up for a business networking event, even though I don't own a business, because I wanted to meet people outside the usual tech meetups. The event confirmation email said to bring a business card.

A business card? I thought. It's just me — I'm not selling a business. But then I remembered a talk I went to early in my career, given by a powerhouse entrepreneur, about personal branding and how it's so vital for everyone to be able to sell themselves in their career.

I looked at what was already out there for digital business cards — scan a QR code and call it done.

Except that QR code points to someone else's server, someone else's branding, someone else's app they now have to download. I already have a website. I didn't want a third-party middleman standing between me and the person I just met.

So I built my own with Claude. It's a page on my own site — vanessahenson.com/businesscard — with a QR code that scans straight to it. No app, no login, no company logo I don't control.

Tap "Save Contact" and it doesn't just open a webpage — it drops my actual contact card into your phone: name, title, email, LinkedIn, even my photo, saved right into your Contacts app like you'd typed it in yourself.

Want to build your own? 

You don't need to know how to code. Paste this into Claude and fill in your own details:

The Prompt

Build me a digital business card page with a button that saves my contact info directly to someone's phone as a vCard file, plus a QR code that links to the page.

* Save the preview file to this folder: Desktop
* Name the preview file: business-card.html

  MY DETAILS
  - Name: [YOUR NAME]
  - Title: [YOUR JOB TITLE]
  - Email: [YOUR EMAIL]
  - Phone: [YOUR PHONE NUMBER]
  - LinkedIn: [YOUR LINKEDIN URL]
  - Photo: I'm pasting my photo into this chat. If it's a wide/landscape
    photo, crop it into a centered square automatically — no need to ask
    me first.
  - My website: [YOUR WEBSITE URL] — please match this page's colors,
    fonts, and overall style to that site.

  LAYOUT
  - Show my contact details as a short list with a small icon next to
    each one: email, phone, and LinkedIn should each get their own line.
  - Below the "Save Contact" button, add a separate "Connect on LinkedIn"
    button, so LinkedIn appears both in the contact list AND as its own
    button.

  BEFORE YOU GENERATE ANYTHING, ASK ME:
1. Where I'll be pasting this code once it's finished — WordPress,
     Squarespace, Wix, or a plain HTML file on my own hosting. The
     placement instructions and copy-paste code you give me at the end
     need to match this platform exactly.
2. The exact web address this page will live at once it's published —
   the QR code needs to point to this.
3. If I forgot to paste in my photo, stop and ask me for it before
   continuing. Do not invent or generate a placeholder photo for me.

FILE HANDLING (TESTING ONLY)
- Save the finished file as a local preview only, at:
  [FOLDER PATH] / [FILE NAME].html
- This saved file is just for me to double-click and preview in my own
  browser first — it is NOT what gets pasted into my real website.

BUILD IN THESE SPECIFIC REQUIREMENTS
1. vCard formatting: contact card files (vCards) follow an old
   formatting rule where no single line of text in the file can be
   longer than 75 characters — if a line is longer, it must be
   "folded" by breaking it and starting the continuation line with a
   single space, per the vCard/RFC 2426 spec. Apply this automatically
   so the saved contact never gets corrupted or rejected by someone's
   phone.
2. Hide my email address and phone number from the page's raw code —
   don't show them as plain, readable text anywhere a bot could scrape
   them. Scramble/encode them so they only turn into a normal,
   clickable, readable email link and phone link after the page has
   fully loaded in the visitor's browser.
3. Add plain-language comments throughout the code explaining what
   each part does, written for someone who isn't a programmer — or at
   minimum, comments that let me paste any section into Claude and ask
   "what does this part do?" for more detail.

WHAT I WANT BACK
Once you generate the code, don't just save the file and stop. In your
reply, also give me — so I never have to open the saved file to get
this:
1. A short summary of what you built and any assumptions you made.
2. Step-by-step instructions for testing the preview file, including
   how to open the saved contact file on a real phone to confirm it
   saves correctly.
3. The EXACT copy-paste code for the platform I told you I'm using,
   formatted for that platform specifically (a WordPress Custom HTML
   block, a Squarespace Code Block, a Wix HTML iframe/embed element,
   or a plain .html file to upload) — ready to paste with no further
   edits needed.
4. Any platform-specific caveats I should know about (for example,
   some page builders strip <script> tags or require an embed/iframe
   instead of inline code).

Please use plain, encouraging language throughout — I may not be a
programmer.

That prompt is all you need to get up and running. Claude will guide you though any steps that you may be missing and give you generated code to output into your own website (on whatever platform you use). 

* note: Keep your conversation with Claude open  until you are able to verify everything is working properly on your website. after you paste the code in, so you can troubleshoot together if anything looks off. Once it's live, pull it up on your phone and save your own contact.

I walked through the whole build in a video https://youtu.be/ocNQdRl7Gh8?si=XpuL-4kLJAcBsGoA

Popular posts from this blog

Add a fun Mario Bros sound on git commit

Image
I wanted to make my own day a little more fun so I added a Mario Bro's vine sound on all of my repos when I make commits. I'm sure there are many ways to go about it but here is how I did it on a Mac.   *Note this way works only when you do not have a local post-commit file in your repo if you need both global and local it looks like the steps are a little trickier see this   stack overflow  for more details.  You could always use a different git hook as well.  1. Enable git templates: git config --global init.templatedir '~/.git-templates' 2. Create a directory to hold the global hooks: mkdir -p ~/.git-templates/hooks 4. Add the hook file .   (post-commit or whatever git hook file you want) touch  ~/.git-templates/hooks/post-commit *Important do not add the .sh file type or it will run 5. Make sure the hook is executable. chmod a+x ~/.git-templates/hooks/post-commit 6. Add your sound file to the global hooks folder (~.git-template/hook...
Read more

LLM MCP and Agents Oh My.

Image
  LLMs, ML, NLP, MCPs, RAG, Agents, and MCP Servers . . . the list goes on and on and how the heck is anyone supposed to keep up? Every day a new model, tool or term is introduced it's daunting trying to understand how much you need to learn about them.  Don't worry it's not nearly as scary as it sounds! Once you grasp the fundamental concepts, you will start to see the patterns and how most of the new terms fall into general categories. Then you can pick and choose what works best in your workflow. So take a deep breath, and lets put this in very basic terms to help you grasp the foundational picture. Keep in mind that each of these terms and topics can go very deep, but for most of us, you really only need a general understanding of what these things do in order to become more proficient in AI.  LLM - Large Language Model:   This is where the magic happens  - the brains of the operation. They can be generalized knowledge ( Chat GPT ) or very specifically ...
Read more

Finding your voice at work.

Image
A lot of people have trouble finding their voice at work. Individuals that have people pleasing tendencies struggle to speak up because they don't want to appear mean or have issues with anxiety.  Recently I had a fellow programmer ask me how to address a situation that required the courage to speak up at work.  It got me thinking about my own journey into finding my voice.  Sadly it took me getting to the point of feeling burned out and completely undervalued to finally have the courage to speak up.  It really was a turning point for me in my career. I realized that I could no longer care if I failed, or had the wrong solution.  I was going to speak up and have my voice heard. It started out a little rough but it has certainly gotten easier over time. I was very much out of my comfort zone when I started (if I'm being honest there are still times when it's hard).  I struggled to articulate myself and it came across as rash and unrefined. I started research...
Read more