VCard
VCard joins the design catalog
1 min read
VCard is a dark personal site. A sticky profile card sits beside an article, and the frosted nav opens About, Resume, Project, and Blog.
About Me
Avery Chen builds quiet web tools and keeps a short log of how they came together.
Most weeks split between a studio project and a walk with a camera. The notes below are the ones worth keeping.
Selected work
Field notes
Night studio
Paper trail
See More Projects
Writing
A notebook that stays out of the way
How a small writing layout keeps the title, the date, and one paragraph in view.
Margins left on purpose
A second notes card so the category filter has more than one match.
✨ View All My Writings
Frontend
TypeScriptReactNext.jsTools
PythonDocker
Open the pages
About keeps selected work, a see-more pill, and writing cards beside a tech-stack column. Resume is a timeline: a gold dot and a hairline connect each institution card. Project and Blog filter in place, and each card opens a detail page.
Scaffold a copy, then replace the name, contacts, and sample pages in lib/profile.ts.
npx create-tawny@latest vcard my-vcardImprovements
- Added the VCard template to
create-tawny - Added a live demo at
/designs/vcardand a full preview at/view/vcard - About, Resume, Project, and Blog share one article width, including each detail page
- Writing on the home page is gradient cards plus a tech-stack column
- Resume uses the dotted timeline list
- Testimonials, tilted photos, and lifestyle cards are in the component gallery