I built DevCard 3D: Turn GitHub profiles into holographic trading cards 🎴✨

TL;DR

I just launched DevCard 3D — a tool that turns GitHub profiles into holographic trading cards.

Try it: devcard-3d.vercel.app

Repo: github.com/MeHalogen/devcard-3d

The Idea 💡

I have always loved trading cards (Pokémon, Yu-Gi-Oh!, Magic). And I have always thought GitHub stats were... kinda boring.

What if your GitHub profile was a rare holographic card instead?

• HP = Total Contributions
• ATK = Public Repos
• DEF = Followers
• LVL = Years Active

Plus holographic foil effects, 3D animations, and a global leaderboard.

That's DevCard 3D.

Features ✨

🎴 5 Premium Themes

• Classic Foil (rainbow holographic)
• Neon Cyber (pink/blue gradients)
• Solar Gold (warm gold shimmer)
• Obsidian Shadow (dark matte)
• Ethereal Glass (glassmorphism)

🏆 Global Leaderboard

• OAuth-verified (anti-cheat)
• Real-time rankings
• Compete with devs worldwide

💾 Share Anywhere

• Download as PNG
• Embed in portfolio/README
• Share on social media

🎨 Full Customization

• Adjust stats manually
• Custom bio/title
• Pick languages (element affinities)

Tech Stack 🛠️

Total dependencies: 3 (Supabase, html2canvas, Lucide icons)

Total cost: $0/month

The CSS 3D Deep Dive 🎨

Holographic Foil Effect

The shimmer is pure CSS gradients that move with your mouse:

.card-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.4) 45%,
    transparent 50%
  );
  background-size: 200% 200%;
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  transition: background-position 0.3s ease;
}


JavaScript updates background-position based on mouse coordinates:

card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
foil.style.backgroundPosition = ${x}% ${y}%;
});

3D Card Flip
The flip uses preserve-3d and rotateY:

.card-container {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-container.flipped {
  transform: rotateY(180deg);
}

.card-front { backface-visibility: hidden; }
.card-back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}


No JavaScript animations — pure CSS.

GitHub API Integration 🔗
Fetching stats is straightforward:

async function fetchGitHubStats(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();

  return {
    hp: estimateContributions(data.created_at, data.public_repos),
    atk: data.public_repos,
    def: data.followers,
    lvl: calculateYears(data.created_at),
    name: data.name || data.login,
    bio: data.bio || '',
    avatar: data.avatar_url
  };
}

Rate limiting is handled with a local cache of popular devs.

Anti-Cheat Leaderboard 🏆
The leaderboard only accepts OAuth-verified GitHub accounts:

// Sign in with GitHub (Supabase handles OAuth)
const { user } = await supabase.auth.signInWithOAuth({
  provider: 'github'
});

// Register on leaderboard (row-level security enforced)
await supabase.from('devcard_leaderboard').insert({
  github_login: user.user_metadata.user_name,
  total_score: calculateScore(stats),
  verified: true  // Only possible via OAuth
});

Can't fake stats = fair rankings.

What I Learned 📚

1. CSS is Underrated
   I thought I would need Three.js for the 3D effects. CSS transforms + gradients + blend modes are powerful enough.

2. Vanilla JS is Fast
   No React means no virtual DOM overhead. The card renders in <50ms.

3. Supabase is Fast
   GitHub OAuth setup was quick. Database queries are highly responsive. The free tier is sufficient.

4. Vercel is Efficient
   Deploying is fast and requires no complex configuration files.

Try It Yourself 🚀
Generate your card: 👉 What I Learned 📚

1. CSS is Underrated
   I thought I would need Three.js for the 3D effects. CSS transforms + gradients + blend modes are powerful enough.

2. Vanilla JS is Fast
   No React means no virtual DOM overhead. The card renders in <50ms.

3. Supabase is Fast
   GitHub OAuth setup was quick. Database queries are highly responsive. The free tier is sufficient.

4. Vercel is Efficient
   Deploying is fast and requires no complex configuration files.

Try It Yourself 🚀
Generate your card: 👉 devcard-3d.vercel.app

Try these developers first:

torvalds — Linus Torvalds (Linux creator)
gaearon — Dan Abramov (React core)
yyx990803 — Evan You (Vue creator)
Then make your own and share it.

Open Source 💜
The entire project is open source (MIT license): 👉 github.com/MeHalogen/devcard-3d

PRs are welcome. Feature ideas:

More themes
Animated backgrounds
Team leaderboards
Custom color picker
What's Next? 🔮
v1.1 planned features:

More holographic themes
Card animation presets
Team leaderboards (for bootcamps/companies)
Physical cards (print-on-demand)
Feedback Wanted 💬
Drop a comment:

What features should I add?
Any bugs you found?
What's your card's rarity tier?
Let's see who has the most legendary card.

P.S. If you enjoyed this, star the repository on GitHub.

Try these developers first:

torvalds — Linus Torvalds (Linux creator)
gaearon — Dan Abramov (React core)
yyx990803 — Evan You (Vue creator)
Then make your own and share it.

Open Source 💜
The entire project is open source (MIT license): 👉 github.com/MeHalogen/devcard-3d

PRs are welcome. Feature ideas:

More themes
Animated backgrounds
Team leaderboards
Custom color picker

What's Next? 🔮
v1.1 planned features:

More holographic themes
Card animation presets
Team leaderboards (for bootcamps/companies)
Physical cards (print-on-demand)

Feedback Wanted 💬
Drop a comment:

What features should I add?
Any bugs you found?
What's your card's rarity tier?
Let's see who has the most legendary card.

P.S. If you enjoyed this, star the repository on GitHub.