Developer ID Card

developer / 024available

Ada Park

Senior Software Engineer

React
TypeScript
Node
Postgres

Seoul, Koreagithub.com/ada-dev

<DeveloperIdCard variant="minimal" />Clean surfaces and measured motion.

Installation

Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion and uqr, plus the Ovio theme, world, motion, toy, qr-code, avatar items.

npx shadcn add JanaSundar/ovio/developer-id-card

↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.

Usage

Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.

TSXvariant="minimal"

import { DeveloperIdCard } from "@/components/ovio/developer-id-card/developer-id-card"

<DeveloperIdCard
  variant="minimal"
  name="Ada Park"
  title="Senior Software Engineer"
  stack={["React", "TypeScript", "Node"]}
  github="ada-dev"
  available
/>

Built with: SVG · Motion for React (hover)
Motion in Minimal: Small springs, opacity and layout shifts that show state.

Props

Control the data, selected world, animation behavior, and callbacks.

Prop	Type	Description
name	string	Printed name.
variant	\| "minimal" \| "craft" \| "retro" \| "toy"	Which world to render. Defaults to the nearest OvioProvider, then minimal.
title	string	Job title.
stack	string[]	Technologies, most important first.
github	string	GitHub handle without the @. The QR code opens this profile.
url	string	What the QR code opens instead.
website	string	Personal site, printed without https.
location	string	For example "Chennai, India".
available	boolean	Open to work. The status is hidden when left out.
avatarUrl	string	Photo. Initials show without it.
serial	string	Card number, e.g. "024".
since	number	Year they started, printed in Craft.
className	string	Merged onto the root.