devrealm/README.md at main · shivrajcodez/devrealm

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

✨ 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://raw.githubusercontent.com/shivrajcodez/devrealm/main/DevRealm.html
open DevRealm.html

Option B — Clone & serve locally

git clone https://github.com/shivrajcodez/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)

Go to netlify.com/drop
Drag DevRealm.html into the browser
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://api.github.com/users/{username}
GET https://api.github.com/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

🤝 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ What is DevRealm?

🎬 Demo

🌟 Features

🏙️ 3D Isometric City

🧙 RPG Character System

📊 Stats & Analytics

🔥 Viral Features

🏆 Achievement System

⚡ Quick Start

Option A — Open directly (zero setup)

Option B — Clone & serve locally

Option C — Deploy to Vercel in 30 seconds

🚀 Deployment

🏗️ Architecture

📡 API Reference

🗺️ Roadmap

🤝 Contributing

📜 Changelog

🧑‍💻 Built By

📄 License

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

✨ What is DevRealm?

🎬 Demo

🌟 Features

🏙️ 3D Isometric City

🧙 RPG Character System

📊 Stats & Analytics

🔥 Viral Features

🏆 Achievement System

⚡ Quick Start

Option A — Open directly (zero setup)

Option B — Clone & serve locally

Option C — Deploy to Vercel in 30 seconds

🚀 Deployment

🏗️ Architecture

📡 API Reference

🗺️ Roadmap

🤝 Contributing

📜 Changelog

🧑‍💻 Built By

📄 License