VCard

A dark personal vcard with a profile sidebar, selected work, and short notes — open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in new tab

designs/vcard

← Back to Project

Paper trail

Avery ChenAugust 2023 — December 2023

Paper trail follows one layout from the screen onto paper. The marks in the margin are the part worth keeping.

This detail page is static sample text, not a markdown document.

Live

About

VCard is a single-page personal site: a sticky profile card, an about article, three project covers, and two writing notes. The dark sidebar and gold accent follow the classic vcard portfolio layout.

Use the live demo above to open Resume, Project, and Blog, then a detail page from a card. Scaffold a copy with the create command below, then replace the name, contacts, and sample pages in lib/profile.ts.

Get the template

Scaffold a local copy with your preferred package manager, or paste a prompt into a coding agent.

Terminal

pnpm create tawny@latest vcard my-app

Template source

Browse every file in templates/vcard.

templates/vcard

README.md

# VCard

A dark personal vcard — profile sidebar, selected work, and short notes.

The sidebar-and-article layout follows the [vcard personal portfolio](https://github.com/codewithsadee/vcard-personal-portfolio). Design adapted for Tawny by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app (recommended)

```bash
npx create-next-app@latest my-vcard \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/vcard"
```

### Option B — create-tawny CLI (interactive prompts)

```bash
npx create-tawny@latest vcard my-vcard
```

Then:

```bash
cd my-vcard
pnpm install   # or npm / yarn / bun
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Customize these files

| File | What to change |
|------|----------------|
| `lib/profile.ts` | Name, city, email, GitHub, bio, resume, projects, and notes |
| `public/images/` | Avatar and project covers |
| `app/layout.tsx` | Site title and metadata |
| `app/page.tsx` | Page composition (usually leave as-is) |

### Placeholders

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them, or use Option B which does this automatically.

## Stack

- Next.js 16 App Router & React
- Tailwind CSS v4
- Layout adapted from the vcard personal portfolio

## License

MIT — see [LICENSE](./LICENSE).