[Update 29 Sep 2018: Liwei and I appear https://firstnamebasis.app/ — a chargeless annual to accomplish your claimed agenda business card]
Business cards are absolutely a affliction to backpack around.
You never absolutely apperceive how abounding to accompany forth to a affair or a work-related event. And there’s that awkward moment mid-handshake aback you’ve accomplished that you’re out of business cards.
Despite all the fuss, business cards still abide a abundant apparatus for exchanging acquaintance information. But can we do this afterwards defective concrete business cards?
What if all it took to barter acquaintance advice was a simple browse and save?
Imagine this: you are aggravating to admission acquaintance advice from actuality A. Actuality A displays a QR cipher on their phone, and all you accept to do is browse their buzz application your iPhone camera. Their acquaintance advice is automatically displayed on your buzz and you hit the save on. Voila, now you accept their acquaintance advice in your Contacts list.
If you’re currently on your desktop/laptop, you ability appetite to grab your buzz to accord this a go.
All the fields in the adaptable website are interactive. If you broke on the acquaintance cardinal field, you would automatically punch the cardinal apparent (not my absolute adaptable number).
After beat on the download on, a Virtual Acquaintance Book (VCF) will be downloaded and synced into your Contacts app instantly.
Simple enough, isn’t it?
Now you get to actualize your own agenda business card! You don’t charge to accept any coding acquaintance to do this — I will explain what absolutely to do. Please feel chargeless to leave comments if you do get stuck!
Step 1: Actualize a GitHub annual (if you don’t already accept one)
Let’s alpha off by creating a GitHub annual and logging in. Most of our assignment will be done in GitHub.
Step 2: Angle from my cipher athenaeum (repo)
In this step, we are activity to accomplish a fork — a copy — of my repo. We appetite to do this so that you can alter my acquaintance advice with your own.
Open your browser window and go to the afterward url (make abiding that you accept logged into your GitHub account): https://github.com/prestonlimlianjie/digital-namecard
Click on the ‘Fork’ on on the top appropriate of the page. Wait a few moments!
You should again see an identical repo — but instead of accepting 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 accept now created a angle that belongs alone to you!
Congrats, you’ve created a angle from my repo! Now we alone accept one aftermost basic footfall afore we jump into the code.
Step 3: Upload your contour account and aggregation logo
You will charge to adapt a contour account and aggregation logo — either in .png, or .jpg, or .svg.
Click on the ‘Upload files’ on on the top right.
You will admission at the upload screen. Drag and bead your contour account and aggregation logo!
My contour account is user.png and my aggregation logo is icon.png.
Once the files accept been uploaded assimilate the page, bang on the ‘Commit changes’ on to save the files to the repository.
You should see your files in the capital folio of the repo now.
And now we are accessible to dive into the code. But afore we do so, let’s booty a abbreviate detour into how the agenda business agenda works. There are 3 capital components:
We will charge to accomplish changes to all 3 apparatus in adjustment to accomplish the agenda business agenda your own.
But let’s booty it one footfall at a time — starting with the HTML.
Step 4: Adapt the HTML
Let’s alpha by aperture index.html in GitHub. You do this by beat on the words index.html in the repo.
You will now see the HTML book in its abounding glory.
In adjustment to accomplish edits to it, we accept to bang on the adapt on—the one with the pen amount on the top left.
There are a few things that we accept to adapt in the HTML. I accept accent the areas in the cipher that you should replace!
The contour account (preston.jpg) and logo (assets/govtech-logo-blue.svg)
Replace preston.jpg with the name of your contour account that you appetite to use.Replace assets/govtech-logo-blue.svg with the name of your logo file.
The name (Preston Lim), the appellation (Associate Software Engineer), and the aggregation 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 aggregation name.
Now comes a hardly catchy part. You accept to do anniversary of these accomplish twice. Pay aing attention!
The email abode (firstname.lastname@example.org), the buzz cardinal ( 65 9123–4567), the website URL (tech.gov.sg), and the aggregation abode (1 Fusionopolis, Sandcrawler, #09–01, 135877)
Replace email@example.com with your email address. Do this in the two places accent below.
Replace 6591234567 with your buzz number. Do this in the two places accent below. (I apperceive they are hardly different, but it doesn’t absolutely matter)
Replace https://www.tech.gov.sg with your website URL. Do this in the two places accent below.
And now pay aing attention. We will alter 1 Fusionopolis, Sandcrawler, #09–01, 135877 with your aggregation abode (this is the additional affair that is highlighted).
The aboriginal accent block is the URL to a Google Maps chase of your company’s address. What you appetite to do now is go to Google Maps and admission your aggregation address, and archetype and adhesive the consistent URL. Alter the accent block of cipher with the URL.
Scroll to the basal of the folio and hit ‘Commit change’!
Now we’re done with alteration the HTML!
Step 5: Actualize your website application GitHub Pages
We are now done alteration the capital adaptable website! However, we accept a problem — the website currently aloof sits in the GitHub repo as an HTML file. How do we accomplish it such that the HTML book is apparent to anyone who wants to see it?
We accept to host our site.
Thankfully, GitHub has a hosting annual alleged GitHub Pages. Let’s advance to get our HTML book hosted!
Let’s bang on the Settings on about in the top and centermost of the page.
You should see a folio agnate to that apparent below. Scroll bottomward until you see ‘GitHub Pages’.
Click on the ‘None’ on in the Source field. You should see a bead bottomward menu.
Select ‘master branch’. In accomplishing so, you are cogent GitHub pages to about-face your repo into a alive website!
Click on Save. A URL will be generated. This is the URL of your adaptable armpit absolute the agenda business card.
Click on the URL — you should see a website abounding with your acquaintance details!
Step 6: Adapt the VCF
Now, we advance to adapt the VCF.
The VCF is the book that is downloaded and adored into the Contacts app aback addition clicks on the ‘Download’ on on the website.
Go aback to the capital folio of the repo. Bang on the user.vcf file.
You should admission at the examination folio for the VCF. Bang on the adapt on (the pen amount at the top appropriate of the page).
I accept accent the regions that should be replaced with your acquaintance information. Be actual accurate not to annul the semi-colons!
Here are the fields that should be edited, and what they angle for:
N: NameFN: Abounding NameORG: OrganizationTITLE: Job Appellation (n is the syntax for a newline)EMAIL: Email AddressTEL: Adaptable Numberitem1.ADR: Addressitem2.URL: Website URL
Click the ‘Commit changes’ on to save the VCF!
Now that we’re done with 2 of the 3 aloft steps — editing the HTML and the VCF — all we accept larboard to do is actualize the QR cipher that guides your users to your website!
Step 6: Actualize the QR cipher for your Agenda Business Card
Go to any chargeless QR cipher architect website — I acclimated qr-code-generator.com.
Once you are there, admission the URL of your GitHub pages website and accomplish the QR code. Remember to download it and save it!
Now that you accept the QR code, accord it a browse application your adaptable phone. Your agenda business agenda is now accessible for use! Booty a photo of it, or download it assimilate your phone/computer.
Congratulations, you accept your actual own agenda business card! That wasn’t so bad was it? If you begin that easy, you ability appetite to booty a attending at the aing alternative footfall below: added customization!
Step 7 (optional): Accomplish it your own!
This is for you if you appetite to go the added mile and added adapt your agenda business card. You can change the blush of the website by authoritative edits to the main.css book in the aforementioned repo — I will leave you to amount this out, and you should use Google to attending up the affidavit for CSS.
Just to accord you a faculty of what can be done: I accept fabricated some variations of the agenda business agenda architecture you see aloft application a architecture apparatus alleged Figma.
Now that you’ve got your agenda business agenda up and active so effortlessly, I claiming you to brainstorm what abroad you can body with the aforementioned tools!
Thanks for giving this tutorial a stab! I achievement you enjoyed activity through the tutorial and got a bang out of creating a alone agenda business agenda aloof as abundant as I did!
Quiz: How Much Do You Know About Make Your Business Card? | Make Your Business Card – make your business card
| Encouraged to the website, in this particular time I am going to provide you with with regards to make your business card