GitHub - tomlin7/monocard: Show your work. Beautifully.

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
app		app
lib		lib
public		public
.gitignore		.gitignore
README		README
bun.lock		bun.lock
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
postcss.config.mjs		postcss.config.mjs
template.svg		template.svg
tsconfig.json		tsconfig.json

Repository files navigation

╔══════════════════════════════════════════════════════════════════════════════╗
║  MONOCARD                                                                    ║
║  Animated SVG showcase cards for GitHub READMEs.                             ║
╚══════════════════════════════════════════════════════════════════════════════╝

WHAT
────────────────────────────────────────────────────────────────────────────────
  Monocard generates animated SVG cards that display your pinned GitHub
  repositories. Drop a single image tag into any README and visitors see a
  live, dark-themed showcase of your work — no JavaScript, no iframes, just
  a self-contained SVG rendered by GitHub's image pipeline.

EMBED
────────────────────────────────────────────────────────────────────────────────
  Markdown:

    ![Monocard](https://monocard.tomlin7.com/api/card?r=username)

  Raw URL:

    https://monocard.tomlin7.com/api/card?r=<github-username>&speed=<value>

  Parameters:

    r        GitHub username (required)
    speed    Animation speed preset (optional, default: normal)

SPEEDS
────────────────────────────────────────────────────────────────────────────────
  Preset      Value    Description
  ─────────   ──────   ──────────────────────────────────────────────────────
  fast        1        Snappy — good for quick demos
  normal      2        Default — balanced pacing
  slow        3        Relaxed — easier on the eyes
  glacial     4        Nearly frozen — cinematic feel

SELF-HOST
────────────────────────────────────────────────────────────────────────────────
  1.  Clone the repository

        git clone https://github.com/<you>/monocard.git && cd monocard

  2.  Install dependencies

        npm install

  3.  Create a GitHub personal access token

      Settings > Developer settings > Personal access tokens > Fine-grained
      Required scopes: public_repo (read-only)

  4.  Set environment variables

        cp .env.local.example .env.local
        # Edit .env.local — set GITHUB_TOKEN=<your-token>

  5.  Start the development server

        npm run dev

  6.  Deploy to Vercel

        npx vercel --prod
        # Add GITHUB_TOKEN in Project > Settings > Environment Variables

RATE LIMITS
────────────────────────────────────────────────────────────────────────────────
  GitHub API imposes rate limits on unauthenticated and authenticated requests.

  Mode              Requests / hour   Notes
  ───────────────   ───────────────   ──────────────────────────────────────
  No token          60                Shared across your server's IP
  With token        5 000             Per authenticated user

  Responses are cached at the edge for 60 seconds to reduce API usage.

STACK
────────────────────────────────────────────────────────────────────────────────
  Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Vercel Edge

LICENSE
────────────────────────────────────────────────────────────────────────────────
  MIT