Programmatic Business Card Design

Professional Print-Ready Cards Built with Pure HTML/CSS/JavaScript

Project Overview

A fully programmatic approach to business card design, eliminating the need for graphic design software like Adobe Illustrator or Photoshop. The cards are built entirely with web technologies, making them easy to modify, version control, and reproduce.

No Design Software

Built entirely with HTML, CSS, and JavaScript. No Photoshop or Illustrator required.

Print-Ready Output

Includes bleed margins and trim marks for professional printing at FedEx, Staples, etc.

Dynamic QR Code

Auto-generated QR code using qrcode.js, linking directly to portfolio.

Version Controlled

Design stored in Git, making updates and collaboration simple.

Live Preview

Hover over the cards to see the interactive effect

Front

Duy Nguyen

MS Data Science Student

Seattle University

✉ dnguyen44@seattleu.edu
🔗 linkedin.com/in/duwe-ng
💻 github.com/dcnguyen060899
Duy Nguyen

Back

View My Portfolio

duyng-portfolio.com

Building Data-Driven Solutions

Print Specifications

Property Value
Card Size 3.5" x 2" (88.9mm x 50.8mm) - Standard US Size
Bleed Margin 0.125" (3.175mm) on all sides
Safe Zone 0.125" from trim edge
Recommended Paper 300-350 GSM cardstock, matte finish
Color Mode RGB (converts well to CMYK)
Primary Color #AA0000 (Seattle University Red)

Code Implementation

The entire design is built with semantic HTML and CSS. Here's a snippet of the card structure:

/* Business Card CSS - Key Styles */
.business-card {
    width: 3.5in;
    height: 2in;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden;
}

.card-header {
    background-color: #AA0000;  /* Seattle Red */
    padding: 8px 16px;
}

/* QR Code Generation */
new QRCode(document.getElementById("qrcode"), {
    text: 'https://duyng-portfolio.com',
    width: 100,
    colorDark: "#AA0000"
});

Technologies Used

HTML5 CSS3 JavaScript QRCode.js CSS Print Media Flexbox Layout CSS Variables Web Fonts

Get the Cards

Ready to print? Choose your preferred version:

View Design Version Print-Ready (FedEx)

Printing Instructions

  1. Open the Print-Ready version in your browser
  2. Press Ctrl/Cmd + P to open print dialog
  3. Set scale to 100% (Actual Size)
  4. Enable "Background graphics" in settings
  5. Save as PDF or print directly to cardstock
  6. Cut along the trim marks for perfect sizing

Contact

Email: dcnguyen060899@gmail.com

LinkedIn: linkedin.com/in/duwe-ng

GitHub: github.com/dcnguyen060899