DevCard

Your GitHub profile + CV in one beautiful static portfolio

Features

• 🎨 3 Templates — GitHub-style, Bento grid, or Minimal CV
• 📊 GitHub Stats — Contributions, languages, pinned repos
• 📄 JSON Resume — Full CV integration with work, education, projects
• 🌐 Social Links — LinkedIn, Telegram, Twitter support
• 📸 PNG Export — Download your portfolio as image
• 🔄 Auto-Sync — Scheduled builds keep data fresh
• 🚀 GitHub Pages — Free hosting with one-click deploy

Quick Start

1. Fork & Clone

git clone https://github.com/InzGIBA/devcard.git
cd devcard
npm install

2. Configure

Create .env file:

GH_TOKEN=ghp_your_token_here
GH_USERNAME=your-username
JSONRESUME_URL=https://raw.githubusercontent.com/user/repo/main/resume.json
LINKEDIN_USERNAME=your-linkedin
TELEGRAM_USERNAME=your-telegram

Get your GitHub token: github.com/settings/tokens (scope: read:user)

3. Run

npm run dev

Open localhost:5173

Deploy to GitHub Pages

Setup

1. Add Secrets — Go to Settings → Secrets and variables → Actions

   Secret	Required	Description
   GH_TOKEN	✅	GitHub Personal Access Token
   GH_USERNAME	✅	Your GitHub username
   JSONRESUME_URL	❌	URL to JSON Resume file
   LINKEDIN_USERNAME	❌	LinkedIn username
   TELEGRAM_USERNAME	❌	Telegram username
   BASE_PATH	❌	Base path for subdirectory
   CUSTOM_DOMAIN	❌	Custom domain

2. Enable Pages — Settings → Pages → Source: "GitHub Actions"

3. Deploy — Push to main or trigger manually in Actions tab

Your site: https://username.github.io or https://username.github.io/repo-name

Custom Domain

1. Add CUSTOM_DOMAIN secret with your domain
2. Configure DNS: CNAME → username.github.io
3. Wait for DNS propagation (up to 24h)

JSON Resume

DevCard supports JSON Resume format for CV data.

Hosting options:

• GitHub repository (raw file URL)
• registry.jsonresume.org
• GitHub Gist

Example structure:

{
  "basics": {
    "name": "John Doe",
    "label": "Full Stack Developer",
    "email": "john@example.com",
    "summary": "Passionate developer..."
  },
  "work": [
    {
      "name": "Company",
      "position": "Senior Developer",
      "startDate": "2020-01-01",
      "highlights": ["Achievement 1", "Achievement 2"]
    }
  ],
  "education": [...],
  "skills": [...],
  "projects": [...]
}

Full schema: jsonresume.org/schema

Templates

Switch templates via URL parameter:

?template=github   # Default GitHub-style layout
?template=bento    # Modern grid layout
?template=minimal  # Clean CV layout

Or set default in site.config.js:

defaultTemplate: 'github';

Auto-Updates

Site rebuilds automatically daily at 00:00 UTC to keep GitHub data fresh.

Custom schedule — Edit .github/workflows/deploy.yml:

schedule:
  - cron: '0 */6 * * *' # Every 6 hours
  - cron: '0 0 * * 1' # Weekly on Monday

Manual trigger — Actions tab → "Deploy to GitHub Pages" → Run workflow

Configuration

Environment Variables

# Required
GH_TOKEN=ghp_xxx              # GitHub API token
GH_USERNAME=username          # GitHub username

# Optional
JSONRESUME_URL=https://...    # JSON Resume URL
LINKEDIN_USERNAME=username    # LinkedIn profile
TELEGRAM_USERNAME=username    # Telegram handle
BASE_PATH=/repo-name          # For subdirectory deployment
CUSTOM_DOMAIN=example.com     # Custom domain

Site Config

Edit site.config.js:

export default {
	username: process.env.GH_USERNAME || 'your-username',
	defaultTemplate: 'github',
	basePath: process.env.BASE_PATH || '',
	customDomain: process.env.CUSTOM_DOMAIN || '',
	siteTitle: 'DevCard - Developer Portfolio',
	siteDescription: 'GitHub profile + CV in one portfolio'
};

Tech Stack

• Framework — SvelteKit 2 + Svelte 5 Runes
• Styling — Tailwind CSS 4
• Data — GitHub GraphQL API + JSON Resume
• Deploy — GitHub Pages + Actions
• Export — html-to-image

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview build
npm run preview

# Lint & format
npm run lint
npm run format

Troubleshooting

Build fails with "GH_TOKEN is required"

• Add GH_TOKEN secret in repository settings

Build fails with "User not found"

• Check GH_USERNAME is valid

Site shows 404

• Verify Pages is enabled (Settings → Pages)
• Check workflow completed successfully (Actions tab)

Data not updating

• Check Actions tab for failed runs
• Manually trigger workflow to force update

Custom domain not working

• Verify DNS records are correct
• Wait up to 24h for DNS propagation
• Check CUSTOM_DOMAIN secret is set

License

MIT License with commercial restriction — see LICENSE for details.

---

About

DevCard is built with modern web technologies and open source tools:

• Based on CheckMyGit by @whoisyurii
• CV data powered by JSON Resume open standard
• Built with SvelteKit and Tailwind CSS
• Deployed on GitHub Pages

Special thanks to the open source community for making this possible.