Running my site off a business card

Welcome to my new site, and yes, I absolutely refreshed my website just for the sake of a business card. Granted, this particular piece of pseudo-professional pandering isn’t merely parchment. So, let’s see Paul Allen’s card

Aside: Some inspirations

This represents the latest in the line of many, many a novelty business card. I was a wee teen when I came across mitxela’s StyloCard on YouTube, a amazingly functional little MIDI stylophone with an embedded USB connector. Amusingly, the next time I saw a similarly beautiful business card, it was mitxela’s beautiful fluid sim pendant that served as the basis for Nick Johnson’s flip-card.

This project of mine was kicked off by AnasMalas’s USB-C PCB edge connector, which immediately reminded me of the StyloCard. Now, I’ve already seen cards that play snake, cards as survival tools, and quite a few NFC business cards. However, most of these developers are hardware-first, and I’m coming from the other direction as a software engineer. Thus, a business card with enough processing juice to host a personal website.

The Card

This is my custom-made webserver business card, designed as a test to see if I could extend my burgeoning electrical engineering skills to create a device that satisfies the modern software developer side of me. Thus, the requirements take form: this card needs to be connected to the internet somehow, respond to incoming requests with <100kB of plaintext in a reasonable timeframe, and still do the job of a business card in both information and form factor.

As I stated above, I was inspired to start this project based off AnasMalas’s USB-C PCB edge connector, which recreated the innards of a USB-C female connector with all 24 pins on a 0.6mm PCB. In the same article, it stated that a 0.8mm board would be closer to the USB-C spec, so I went with that as my target thickness. I also took their advice and went for a ENIG (gold plated) finish for connector longevity and board aesthetics, which ended up costing a pretty penny going through JLCPCB.

I picked the Espressif ESP32-C3 as my microcontroller of choice, choosing the FH4 model with built-in flash to minimize components. The ESP32 series is fairly well known in the embedded space as the go-to choice for cheap WiFi connectivity, and the budget C3 line worked well to keep the target BOM (Bill of Materials) of this device under $5. They’ve already got detailed documentation on turning their chips into webservers for all the IOT thermostats and home security systems* out there, so it made for an easy pick.

Remember folks, the S in IOT stands for security!*

I designed the business card graphics in Figma, then selected which to expose as copper ground and which to leave in the silkscreen. The copper graphics on the back needed to avoid crossing into traces and antenna areas, where I painstakingly chopped up continuous lines to avoid creating disruptive current loops.

The Code

This portion was much more straightforward. Espressif’s IOT Development Framework has built-in webserver support, and for rapid prototyping even has an officially supported Arduino Framework wrapper. That made it especially easy to spin up a PlatformIO project, paste in the example webserver code, and modify from there.

Serving a static webpage is fairly easy: if you receive a request for the webserver root /, return the plaintext content of an HTML file. Now, I could paste all 14kB of my website into a giant string literal and call it a day. However, for a more sustainable approach, PlatformIO natively supports LittleFS, a microcontroller optimized filesystem. I can put the contents of my website into data/index.html and files in data can be flashed onto my microcontroller as a LittleFS partition.

However, serving straight Unicode misses out on a wonderful and unnoticed feature of the modern web: gzip compression. All modern hosting providers default to serving files after compressing the contents, which usually reduces the size of text files like HTML or JS by more than half. That can be a notable speed difference on microcontroller’s slow WiFi radio, but one that’d be quickly negated by the processing necessary to compress files on the fly. So, let’s compress my website beforehand.

With enough compute on its USB controller alone to make Seymour Cray weep, my Apple Silicon M2 Max thought less about gzipping a 14kB file than it did rendering my cursor. Shrunk down to 5kB, I can load it into my microcontroller’s data partition and let Espressif’s web server automatically add the Content-Encoding: gzip header that allows any browser since Netscape Navigator 4 to decode the page.

The Result

For those coming from my website, the statement “This <14kB website is running on my business card” is slightly misleading.

While the thought of scattering business cards across the globe to create edge nodes amuses me, this fun use case for a single-threaded microcontroller does not replace a proper hosting network. Thus, while a copy of that exact website is in fact running on my business card, https://kevinsun.dev is still hosted via GitHub Pages.

Now, it doesn’t mean this is merely a localhost gimmick, I’ve still pointed a Cloudflare Tunnel at a ESP32 web-server I’ve got running 24/7. This has the added benefit of adding HTTPS and an SSL certificate without putting additional encryption/decryption load onto the poor microcontroller.

My microcontroller website will instead be served on https://card.kevinsun.dev, and you can check on its uptime at https://card.kevinsun.dev/status. If this inspires you to start a similar project, you’ll find the KiCad files and firmware I wrote at https://github.com/kevinsun-dev/ESP32-Business-Card.