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.
Notes
Avery ChenFebruary 2, 20243 min read
Empty margin is part of the layout. The filter chip for Notes should keep this card next to the notebook.
Swap the date and the paragraph when you add your own writing.
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.
Scaffold a local copy with your preferred package manager, or paste a prompt into a coding agent.
pnpm create tawny@latest vcard my-appBrowse every file in templates/vcard.
templates/vcard
# 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).