Mehal Srivastava

Posted on May 26

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

#webdev #javascript #opensource #css

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 🛠️

Layer	Technology	Why?
Frontend	Vanilla JS	Lightweight, no build step
3D Effects	CSS transforms	No Three.js needed
Auth	Supabase	Easy GitHub OAuth
Database	Supabase	Free tier is generous
Hosting	Vercel	Zero-config deploys
Export	html2canvas	PNG screenshots

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 📚

CSS is Underrated
I thought I would need Three.js for the 3D effects. CSS transforms + gradients + blend modes are powerful enough.
Vanilla JS is Fast
No React means no virtual DOM overhead. The card renders in <50ms.
Supabase is Fast
GitHub OAuth setup was quick. Database queries are highly responsive. The free tier is sufficient.
Vercel is Efficient
Deploying is fast and requires no complex configuration files.

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

CSS is Underrated
I thought I would need Three.js for the 3D effects. CSS transforms + gradients + blend modes are powerful enough.
Vanilla JS is Fast
No React means no virtual DOM overhead. The card renders in <50ms.
Supabase is Fast
GitHub OAuth setup was quick. Database queries are highly responsive. The free tier is sufficient.
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.