⚔  Transform your GitHub profile into a living 3D RPG world  ⚔
    Repos → Skyscrapers  ·  Stars → Height  ·  Languages → Class

🚀 Live Demo · 📸 Screenshots · ⚡ Quick Start · 🤝 Contributing

---

✨ What is DevRealm?

"Every commit is a stone. Every repo is a tower. Every dev is a legend."

DevRealm is a zero-dependency, single-file web experience that ingests any GitHub username and renders it as a fully interactive 3D city powered by Three.js — complete with an RPG character, achievement system, AI roast generator, and shareable holographic profile cards.

No framework. No npm install. No build step. Just drop the HTML file in a browser.

# That's it. Seriously.
open DevRealm.html

🎬 Demo

🏙️ 3D City View	🧙 RPG Character	🔥 Viral Zone
Repos as skyscrapers, drag to orbit	Language-forged class & live stats	AI roast + holographic share card

Try it live → Enter torvalds, gaearon, or sindresorhus to see the magic

🌟 Features

🏙️ 3D Isometric City Three.js WebGL renderer with ACES filmic tone mapping Buildings grow animated from the ground up with cubic easing Raycaster hit detection — hover any building for repo stats Click buildings to open the repo on GitHub Drag to orbit, scroll to zoom, drag to pan Auto-spin with Spin / Reset / Night mode controls Dynamic point lights pulse at rooftop level Blinking antenna beacons on starred repos Road network, star field, exponential fog atmosphere

🧙 RPG Character System Language Class Description JavaScript Shadow Rogue Async ninja of the DOM Python Arcane Mage Master of data sorcery Java Iron Warrior Type-safe berserker TypeScript Typed Paladin Guardian of safety Go Concurrent Ranger Goroutine tracker Rust Memory Sentinel Borrow checker C++ Low-Level Berserker Raw power destroyer Ruby Elegant Bard DSL crafter

📊 Stats & Analytics 5 live stat bars — ATK / DEF / SPD / MAG / CHA All derived from real GitHub metrics (stars, forks, followers) XP progress bar with shimmer animation Level 1–99 progression system Language mastery index with animated bars 52-week contribution heatmap 6 analytics cards with key metrics

🔥 Viral Features AI Roast Generator — 5 brutal, personalized roast templates Holographic Share Card — scanlines, glow orbs, stats grid Copy-to-clipboard text card for easy sharing Demo user chips — one click to explore legends 🎲 Random Dev Explorer button Animated stat counters on the landing page

🏆 Achievement System

Unlock badges based on your real GitHub activity:

Badge	Name	Requirement	Rarity
🌱	First Repo	1+ repository	Common
📦	Repo Hoarder	10+ repositories	Uncommon
🏰	Legendary Coder	50+ repositories	Rare
⭐	First Star	1+ star received	Common
💫	Star Collector	100+ total stars	Uncommon
🌟	Open Source Hero	1,000+ total stars	Epic
👥	Influential	10+ followers	Uncommon
🌐	Polyglot	5+ languages	Rare
🍴	Fork Master	50+ total forks	Rare

⚡ Quick Start

Option A — Open directly (zero setup)

# Download and open — that's the entire install process
curl -O https://github.com/raw/yourusername/devrealm/main/DevRealm.html
open DevRealm.html

Option B — Clone & serve locally

git clone https://github.com/yourusername/devrealm.git
cd devrealm

# Python
python3 -m http.server 8080

# Node.js
npx serve .

# Then open → http://localhost:8080/DevRealm.html

Option C — Deploy to Vercel in 30 seconds

npm i -g vercel
vercel DevRealm.html
# → https://devrealm-xyz.vercel.app ✓

🚀 Deployment

▶ Vercel (Recommended — free, instant)

npm i -g vercel
vercel DevRealm.html

Or drag-and-drop DevRealm.html to vercel.com/new.

▶ Netlify (Drag & Drop)

1. Go to netlify.com/drop
2. Drag DevRealm.html into the browser
3. Done — live in ~10 seconds with a public URL

▶ GitHub Pages

# Rename to index.html for root serving
cp DevRealm.html index.html
git add index.html
git commit -m "🚀 Deploy DevRealm"
git push origin main
# Enable Pages: Settings → Pages → Deploy from main

▶ Docker

FROM nginx:alpine
COPY DevRealm.html /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker build -t devrealm .
docker run -p 8080:80 devrealm
# → http://localhost:8080

▶ Optional: GitHub Token for higher rate limits

The app works without authentication (60 req/hour). To increase to 5,000 req/hour, add your token inside DevRealm.html:

// In the fetchGH() function, update headers:
const h = {
  'Accept': 'application/vnd.github.v3+json',
  'Authorization': `token YOUR_GITHUB_PAT`
};

Generate a token at github.com/settings/tokens — no scopes required for public repos.

🏗️ Architecture

DevRealm is intentionally a single HTML file. Here's what lives inside:

DevRealm.html
│
├── <head>
│   ├── Google Fonts  (Orbitron · Exo 2 · VT323)
│   └── Three.js r128 (CDN — only external dependency)
│
├── <style>  (~350 lines)
│   ├── CSS custom properties (design tokens)
│   ├── Landing page  — glitch logo, search, feature cards
│   ├── Loading screen — triple-ring orbital animation
│   ├── Dashboard layout — sticky sidebar + tabbed main
│   ├── RPG character card — conic avatar ring, stat bars, XP
│   ├── Analytics panel — lang bars, heatmap, metrics
│   └── Viral zone — roast box, holographic share card
│
└── <script>  (~550 lines)
    ├── Custom cursor    — physics-lagged ring + dot
    ├── Particle network — WebGL 2D canvas background
    ├── Floating runes   — emoji ambient particles
    ├── GitHub API       — fetchGH() with mock fallback
    ├── RPG engine       — calcLvl, calcXP, genTitle, CLS map
    ├── THREE.js city    — full 3D scene, orbit, raycaster
    │   ├── Scene setup  — fog, lighting, star field, roads
    │   ├── Buildings    — BoxGeometry per repo, animated growth
    │   ├── Windows      — per-face plane meshes
    │   ├── Antennas     — CylinderGeometry + beacon spheres
    │   ├── Interaction  — drag orbit, scroll zoom, click-open
    │   └── Controls     — spin toggle, night mode, reset
    ├── Analytics        — heatmap, language bars, metrics
    └── Viral            — roast engine, share card, clipboard

📡 API Reference

DevRealm uses two public GitHub REST API v3 endpoints — no auth required:

GET https://github.com/api/users/{username}
GET https://github.com/api/users/{username}/repos?per_page=100&sort=stars

Rate limits:

Mode	Limit	How to increase
Unauthenticated	60 req / hour / IP	Add a GitHub PAT
Authenticated (PAT)	5,000 req / hour	See Quick Start
If rate limited	Falls back to mock data automatically	—

🗺️ Roadmap

• Three.js isometric 3D city with orbit controls
• RPG character system with 14 language classes
• Achievement system with 9 unlockable badges
• AI roast generator
• Holographic share card
• Night mode toggle
• Mock data fallback when rate limited
• GitHub OAuth for authenticated requests (5k rate limit)
• Export share card as PNG via html2canvas
• Multiplayer city — compare two GitHub profiles side by side
• GitHub GraphQL API for real commit counts
• Flying commits between buildings (particle trails)
• Boss battle mode — challenge another dev
• Mobile touch controls for 3D city (pinch to zoom)
• Embeddable <iframe> widget for personal sites

🤝 Contributing

Contributions are what make the open source community extraordinary. Any contributions you make are greatly appreciated.

# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/AmazingFeature

# 3. Commit your changes
git commit -m 'feat: add AmazingFeature'

# 4. Push to the branch
git push origin feature/AmazingFeature

# 5. Open a Pull Request

Good first issues:

• 🌍 Add more language → class mappings
• 🏆 Add new achievements
• 🌐 Add i18n support
• 📱 Improve mobile responsiveness
• 🎨 Add new building architectural styles

📜 Changelog

v2.0.0 — The 3D Update

• ✨ Complete Three.js rewrite of city visualization
• ✨ Full orbit camera controls (drag, scroll, auto-spin)
• ✨ Per-building point lights and beacon animations
• ✨ Night mode toggle
• ✨ Road network and star field atmosphere
• ✨ Raycaster hover with per-repo tooltips
• ✨ Building growth animation with cubic easing

v1.1.0 — The Visual Overhaul

• ✨ Custom physics-lagged cursor
• ✨ Animated gradient border on search
• ✨ Glitch effect on logo (chromatic aberration)
• ✨ Particle network background
• ✨ Floating rune ambient particles
• ✨ Scanline and vignette overlay
• ✨ Holographic share card with glow orbs

v1.0.0 — Initial Release

• ✨ GitHub profile → 2D city visualization
• ✨ RPG character system
• ✨ Achievement badges
• ✨ Roast generator
• ✨ Mock data fallback

🧑‍💻 Built By

Made with 💀 caffeine and ✨ obsession

If DevRealm made you smile, please consider giving it a ⭐ It helps other developers discover this project.

📄 License

Distributed under the MIT License. See LICENSE for more information.

MIT License — do whatever you want, just keep the attribution.

---

_{Built with Three.js · Powered by the GitHub API · Zero dependencies · Single file}

⬆ Back to Top