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.
Studio
Avery ChenJanuary 2024 — June 2024
Night studio is a layout for work that happens after the room goes quiet. One column, one cover, and a short record of what changed.
Dates and the tech row are sample data so the card and the detail page have something to show.
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).