Hack Your Life: How to make your own Digital Business Card
[Update 29 Sep 2018: Liwei and I released https://firstnamebasis.app/ — a free service to generate your personal digital business card]
Business cards are quite a pain to carry around.
You never quite know how many to bring along to a meeting or a work-related event. And there’s that awkward moment mid-handshake when you’ve realized that you’re out of business cards.
Despite all the fuss, business cards still remain a great tool for exchanging contact information. But can we do this without needing physical business cards?
Scan and save
What if all it took to exchange contact information was a simple scan and save?
Imagine this: you are trying to obtain contact information from person A. Person A displays a QR code on their phone, and all you have to do is scan their phone using your iPhone camera. Their contact information is automatically displayed on your phone and you hit the save button. Voila, now you have their contact information in your Contacts list.
If you’re currently on your desktop/laptop, you might want to grab your phone to give this a go.
All the fields in the mobile website are interactive. If you tapped on the contact number field, you would automatically dial the number shown (not my actual mobile number).
After clicking on the download button, a Virtual Contact File (VCF) will be downloaded and synced into your Contacts app instantly.
Simple enough, isn’t it?
Tutorial: 7 easy steps
Now you get to create your own digital business card! You don’t need to have any coding experience to do this — I will explain what exactly to do. Please feel free to leave comments if you do get stuck!
Step 1: Create a GitHub account (if you don’t already have one)
Let’s start off by creating a GitHub account and logging in. Most of our work will be done in GitHub.
What is GitHub?
GitHub is a platform traditionally used by software engineers to store their code and keep track of the changes that have been made over time (a.k.a. version control).But for our purposes, let’s just treat GitHub as a gigantic Word Document that stores all of our contact information. This is also where we will be making changes in the code.
Step 2: Fork from my code repository (repo)
In this step, we are going to make a fork — a copy — of my repo. We want to do this so that you can replace my contact information with your own.
What is a repo?
A repository, or repo for short, is a place where files are held. Imagine it as a bucket or folder that holds a bunch of code documents.What is a fork?
A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.
Open your browser window and go to the following url (make sure that you have logged into your GitHub account): https://github.com/prestonlimlianjie/digital-namecard
Click on the ‘Fork’ button on the top right of the page. Wait a few moments!
You should then see an identical repo — but instead of having a name of prestonlimlianjie/digital-namecard on the top left, the repo will now be [your_username]/digital-namecard. In my case, it is preston-test/digital-namecard. You have now created a fork that belongs only to you!
Congrats, you’ve created a fork from my repo! Now we only have one last preparatory step before we jump into the code.
Step 3: Upload your profile picture and company logo
You will need to prepare a profile picture and company logo — either in .png, or .jpg, or .svg.
Click on the ‘Upload files’ button on the top right.
You will arrive at the upload screen. Drag and drop your profile picture and company logo!
My profile picture is user.png and my company logo is icon.png.
Once the files have been uploaded onto the page, click on the ‘Commit changes’ button to save the files to the repository.
You should see your files in the main page of the repo now.
And now we are ready to dive into the code. But before we do so, let’s take a short detour into how the digital business card works. There are 3 main components:
- The QR code that, once scanned, brings the user to your digital business card website
- The main mobile website displaying the digital business card with your contact information — this is created mainly using HTML.
- The Virtual Contact File (VCF) that will be downloaded from the mobile website and saved into the Contacts app on the phone.
We will need to make changes to all 3 components in order to make the digital business card your own.
But let’s take it one step at a time — starting with the HTML.
Step 4: Edit the HTML
What is HTML?
HyperText Markup Language (HTML) is the language that is responsible for websites.When you use a browser (Chrome, Firefox, Safari etc.) to access a website, the browser actually receives HTML — which is a bunch of code. The browser then reads the HTML and creates the visually appealing websites that we are used to seeing.
Let’s start by opening index.html in GitHub. You do this by clicking on the words index.html in the repo.
You will now see the HTML file in its full glory.
In order to make edits to it, we have to click on the edit button—the one with the pen icon on the top left.
There are a few things that we have to edit in the HTML. I have highlighted the areas in the code that you should replace!
Note:
Most coding languages, including HTML, are pretty particular about syntax. So try your very best to only replace parts of the code that I specify.If you do accidentally delete one character too many, keep this rule in mind: code works like a door — if you open something, you have to close it. For example, if there was an opening angular brace <, there would have to be a closing one as well >.
The profile picture (preston.jpg) and logo (assets/govtech-logo-blue.svg)
Replace preston.jpg with the name of your profile picture that you want to use.
Replace assets/govtech-logo-blue.svg with the name of your logo file.
The name (Preston Lim), the title (Associate Software Engineer), and the company name (Data Science Division, GovTech)
Replace Preston Lim with your name.
Replace Associate Software Engineer with your title.
Replace Data Science Division, GovTech with your company name.
Now comes a slightly tricky part. You have to do each of these steps twice. Pay close attention!
The email address (preston@data.gov.sg), the phone number (+65 9123–4567), the website URL (tech.gov.sg), and the company address (1 Fusionopolis, Sandcrawler, #09–01, 135877)
Replace preston@data.gov.sg with your email address. Do this in the two places highlighted below.
Replace +6591234567 with your phone number. Do this in the two places highlighted below. (I know they are slightly different, but it doesn’t really matter)
Replace https://www.tech.gov.sg with your website URL. Do this in the two places highlighted below.
And now pay close attention. We will replace 1 Fusionopolis, Sandcrawler, #09–01, 135877 with your company address (this is the second thing that is highlighted).
The first highlighted block is the URL to a Google Maps search of your company’s address. What you want to do now is go to Google Maps and enter your company address, and copy and paste the resulting URL. Replace the highlighted block of code with the URL.
Scroll to the bottom of the page and hit ‘Commit change’!
Now we’re done with editing the HTML!
Step 5: Create your website using GitHub Pages
We are now done editing the main mobile website! However, we have a problem — the website currently just sits in the GitHub repo as an HTML file. How do we make it such that the HTML file is shown to anyone who wants to see it?
We have to host our site.
What is hosting?
Hosting is the process of connecting your HTML files (and hence your website) to the Internet. Your website gets a URL — an address that people can go to on the Internet if they wanted to access your website.
Thankfully, GitHub has a hosting service called GitHub Pages. Let’s proceed to get our HTML file hosted!
Let’s click on the Settings button somewhere in the top and center of the page.
You should see a page similar to that shown below. Scroll down until you see ‘GitHub Pages’.
Click on the ‘None’ button in the Source field. You should see a drop down menu.
Select ‘master branch’. In doing so, you are telling GitHub pages to turn your repo into a live website!
Click on Save. A URL will be generated. This is the URL of your mobile site containing the digital business card.
Click on the URL — you should see a website filled with your contact details!
Step 6: Edit the VCF
Now, we proceed to modify the VCF.
The VCF is the file that is downloaded and saved into the Contacts app when someone clicks on the ‘Download’ button on the website.
Go back to the main page of the repo. Click on the user.vcf file.
You should arrive at the preview page for the VCF. Click on the edit button (the pen icon at the top right of the page).
I have highlighted the regions that should be replaced with your contact information. Be very careful not to delete the semi-colons!
Note on VCF syntax:
If you want to insert a newline, you need to add \n into the line.
If you want to insert a comma, you need to add \, into the line.
Here are the fields that should be edited, and what they stand for:
N: Name
FN: Full Name
ORG: Organization
TITLE: Job Title (\n is the syntax for a newline)
EMAIL: Email Address
TEL: Mobile Number
item1.ADR: Address
item2.URL: Website URL
Click the ‘Commit changes’ button to save the VCF!
Now that we’re done with 2 of the 3 major steps — editing the HTML and the VCF — all we have left to do is create the QR code that guides your users to your website!
Step 6: Create the QR code for your Digital Business Card
Go to any free QR code generator website — I used qr-code-generator.com.
Once you are there, enter the URL of your GitHub pages website and generate the QR code. Remember to download it and save it!
Now that you have the QR code, give it a scan using your mobile phone. Your digital business card is now ready for use! Take a photo of it, or download it onto your phone/computer.
Congratulations, you have your very own digital business card! That wasn’t so bad was it? If you found that easy, you might want to take a look at the next optional step below: further customization!
Step 7 (optional): Make it your own!
This is for you if you want to go the extra mile and further customize your digital business card. You can change the color of the website by making edits to the main.css file in the same repo — I will leave you to figure this out, and you should use Google to look up the documentation for CSS.
What is CSS?
Cascading Style Sheets or CSS is a language that determines how your HTML website looks.Here’s a fun analogy. If a website was a human being, the HTML is the skeletal structure of human, and the CSS is the skin and hair of the human being.
Just to give you a sense of what can be done: I have made some variations of the digital business card design you see above using a design tool called Figma.
Closing thoughts
Now that you’ve got your digital business card up and running so effortlessly, I challenge you to imagine what else you can build with the same tools!
Thanks for giving this tutorial a stab! I hope you enjoyed going through the tutorial and got a kick out of creating a personalized digital business card just as much as I did!
If you have any comments or questions, please drop me a message! It’s my first time writing a tutorial, and I’m looking forward to hearing what you guys think!
