Cardforge

CardForge is a calm, premium React design tool for creating, previewing, and exporting print-ready business cards.

Status
Live
Updated
Sep 2026
Tools
Shell, JavaScript, HTML, TypeScript, CSS

The problem

CardForge is a calm, premium React design tool for creating, previewing, and exporting print-ready business cards.

What I built

CardForge is a local-first React studio for designing, previewing, and exporting print-ready and digital business cards — from buttoned-up professional layouts to bold gradient/neon/oversized-type cards.

How it works

  • Freeform editor — add, delete, duplicate, drag, resize, rotate, layer, align, and lock text, shapes, images, and QR codes. Whole drags are a single undo step.
  • Real typography — 10 self-hosted typefaces (via @fontsource) with curated heading/body pairings, so every template renders in its true typeface, online or offline.
  • True card geometry — the canvas tracks each preset's real aspect ratio (US, EU, JP, UK, square, mini; landscape/portrait) instead of forcing everything into a landscape box.
  • Digital cards — share a link or QR that opens a tappable digital card and saves the recipient's contact. New links keep the filtered design in the URL fragment so ordinary hosting requests do not receive it.
  • Private sharing controls — choose exactly which contact fields, pronouns, tagline, and images enter a link; optionally expire the card and disable vCard downloads.

Tradeoffs and limits

The live build is a portfolio demonstration. Availability and external services can vary, and the repository remains the source of truth.

What I learned

It runs anonymous-first in the browser, saves designs locally, and exports PDF (with bleed + crop marks), PNG, SVG, vCard, QR, and .cardforge.json files without requiring an account.

Documents

Resume

Download PDF
Preview of Aden Ramirez's technical resume