cu-sanjay · cu-sanjay · Jun 15, 2026 · Jun 14, 2026
diff --git a/Projects/XP Quest/README.MD b/Projects/XP Quest/README.MD
@@ -0,0 +1,41 @@
+# ⭐ XP Quest
+
+## Description
+
+Added XP Quest, a gamified progression system where users earn experience points (XP) by completing educational and productivity activities. Every achievement contributes to user growth, encouraging continuous learning and engagement.
+
+## Features
+
+* XP rewards for solving questions
+* XP rewards for learning new words
+* XP rewards for completing tasks
+* Real-time XP tracking
+* Level progression system
+* Achievement-based motivation
+
+## Benefits
+
+* Encourages consistent learning habits
+* Increases user engagement
+* Makes education more interactive and rewarding
+* Provides a clear sense of progress and accomplishment
+
+## Future Improvements
+
+* Achievement badges
+* Daily XP challenges
+* Leaderboard system
+* Skill-specific XP categories
+* Streak rewards
+* Progress analytics dashboard
+
+## Use Cases
+
+* Educational platforms
+* Vocabulary learning apps
+* Productivity tools
+* Gamified learning systems
+
+## Learning Outcome
+
+Users stay motivated to learn and complete activities by earning XP, tracking progress, and advancing through levels.
diff --git a/Projects/XP Quest/index.html b/Projects/XP Quest/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Skill Quest — Global XP Dashboard</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="dashboard">
+        <header>
+            <div class="avatar">👤</div>
+            <div class="user-info">
+                <span class="rank-tag" id="rank-name">Novice Scholar</span>
+                <h1 id="user-name">Gamer_01</h1>
+                <div class="progress-track" style="margin-top: 10px; height: 4px;"><div id="global-bar" class="progress-fill" style="background: var(--xp-color); width: 40%;"></div></div>
+            </div>
+            <div class="global-xp-container">
+                <div class="level-badge">LV <span id="global-lv">1</span></div>
+            </div>
+        </header>
+
+        <div class="skills-grid" id="skill-container">
+            <!-- Skill cards will be generated here -->
+        </div>
+
+        <div class="activity-section">
+            <h2>Recent Achievements</h2>
+            <div class="log-list" id="activity-log">
+                <div class="log-item"><span>Dashboard initialized</span><span style="color: var(--accent)">+0 XP</span></div>
+            </div>
+        </div>
+
+        <button class="gain-xp-btn" onclick="simulateGain()">Simulate XP Gain</button>
+    </div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/XP Quest/project.json b/Projects/XP Quest/project.json
@@ -0,0 +1,16 @@
+{
+  "title": "XP Quest",
+  "description": "An interactive dashboard to track and visualize your global XP across various platforms.",
+  "author": {
+    "name": "Priya Kalamkar",
+    "github": "priyakalamkar555-art"
+  },
+  "tags": [
+    "XP tracking dashboard",
+    "data-visualization",
+    "interactive-dashboard",
+    "vanilla-js"
+  ],
+  "entry": "index.html",
+  "thumbnail": null
+}
diff --git a/Projects/XP Quest/script.js b/Projects/XP Quest/script.js
@@ -0,0 +1,88 @@
+ const SKILLS = [
+            { id: 'logic', name: 'Logic', color: 'var(--logic)', icon: '🧩' },
+            { id: 'verbal', name: 'Verbal', color: 'var(--verbal)', icon: '📖' },
+            { id: 'memory', name: 'Memory', color: 'var(--memory)', icon: '🧠' },
+            { id: 'knowledge', name: 'Knowledge', color: 'var(--knowledge)', icon: '🌍' },
+            { id: 'productivity', name: 'Productivity', color: 'var(--productivity)', icon: '⚡' }
+        ];
+
+        // Initialize XP from LocalStorage or 0
+        let xpState = JSON.parse(localStorage.getItem('global_xp_system')) || {
+            logic: 0, verbal: 0, memory: 0, knowledge: 0, productivity: 0
+        };
+
+        function save() {
+            localStorage.setItem('global_xp_system', JSON.stringify(xpState));
+        }
+
+        function getLevel(xp) {
+            return Math.floor(Math.sqrt(xp / 100)) + 1;
+        }
+
+        function getXPProgress(xp) {
+            const lv = getLevel(xp);
+            const currentLvStart = Math.pow(lv - 1, 2) * 100;
+            const nextLvStart = Math.pow(lv, 2) * 100;
+            return ((xp - currentLvStart) / (nextLvStart - currentLvStart)) * 100;
+        }
+
+        function render() {
+            const container = document.getElementById('skill-container');
+            container.innerHTML = '';
+
+            let totalXP = 0;
+            SKILLS.forEach(skill => {
+                const xp = xpState[skill.id];
+                totalXP += xp;
+                const lv = getLevel(xp);
+                const progress = getXPProgress(xp);
+
+                container.innerHTML += `
+                    <div class="skill-card">
+                        <div class="skill-header">
+                            <span class="skill-name">${skill.icon} ${skill.name}</span>
+                            <span class="skill-lv" style="color: ${skill.color}">LV ${lv}</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill" style="width: ${progress}%; background: ${skill.color}; color: ${skill.color}"></div>
+                        </div>
+                        <div class="xp-val">${xp} Total XP</div>
+                    </div>
+                `;
+            });
+
+            // Update Global
+            const globalLv = getLevel(totalXP / 2); // Global scales slower
+            document.getElementById('global-lv').innerText = globalLv;
+            document.getElementById('global-bar').style.width = getXPProgress(totalXP / 2) + "%";
+
+            const ranks = ["Novice", "Apprentice", "Adept", "Expert", "Master", "Grandmaster", "Legend"];
+            document.getElementById('rank-name').innerText = ranks[Math.min(globalLv - 1, ranks.length - 1)] + " Scholar";
+        }
+
+        function addXP(skillId, amount, reason) {
+            xpState[skillId] += amount;
+            save();
+            render();
+
+            const log = document.getElementById('activity-log');
+            const div = document.createElement('div');
+            div.className = 'log-item';
+            div.innerHTML = `<span>${reason}</span><span style="color: var(--xp-color)">+${amount} XP</span>`;
+            log.prepend(div);
+            if(log.children.length > 5) log.lastChild.remove();
+        }
+
+        function simulateGain() {
+            const reasons = [
+                { s: 'logic', r: 'Solved Complex Puzzle', v: 150 },
+                { s: 'verbal', r: 'Mastered New Word', v: 50 },
+                { s: 'memory', r: 'Perfect Room Recall', v: 200 },
+                { s: 'knowledge', r: 'Identified Fake Fact', v: 75 },
+                { s: 'productivity', r: 'Completed Focus Session', v: 300 }
+            ];
+            const pick = reasons[Math.floor(Math.random() * reasons.length)];
+            addXP(pick.s, pick.v, pick.r);
+        }
+
+        render();
diff --git a/Projects/XP Quest/style.css b/Projects/XP Quest/style.css
@@ -0,0 +1,152 @@
+ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@500;700&display=swap');
+
+        :root {
+            --bg: #020617;
+            --card: rgba(15, 23, 42, 0.6);
+            --border: rgba(255, 255, 255, 0.1);
+            --accent: #22d3ee;
+            --xp-color: #facc15;
+            --logic: #818cf8;
+            --verbal: #f472b6;
+            --memory: #34d399;
+            --knowledge: #fb923c;
+            --productivity: #a78bfa;
+            --text: #f8fafc;
+        }
+
+        body {
+            margin: 0;
+            font-family: 'Outfit', sans-serif;
+            background: var(--bg);
+            background: radial-gradient(circle at center, #1e1b4b 0%, #020617 100%);
+            color: var(--text);
+            min-height: 100vh;
+            padding: 2rem;
+            display: flex;
+            justify-content: center;
+        }
+
+        .dashboard {
+            width: 100%;
+            max-width: 900px;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        /* Header & Profile */
+        header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            background: var(--card);
+            backdrop-filter: blur(10px);
+            padding: 2rem;
+            border-radius: 32px;
+            border: 1px solid var(--border);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+        }
+
+        .avatar {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, var(--accent), var(--logic));
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
+        }
+
+        .user-info { flex: 1; }
+        .user-info h1 { margin: 0; font-size: 1.5rem; letter-spacing: 1px; }
+        .rank-tag { color: var(--accent); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; }
+
+        .global-xp-container { width: 300px; }
+        .level-badge { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: var(--xp-color); text-align: right; }
+
+        /* Skill Grid */
+        .skills-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .skill-card {
+            background: var(--card);
+            border: 1px solid var(--border);
+            padding: 1.5rem;
+            border-radius: 24px;
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .skill-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+        }
+
+        .skill-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .skill-name { font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }
+        .skill-lv { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
+
+        .progress-track {
+            height: 8px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            width: 0%;
+            transition: width 1s ease-out;
+            box-shadow: 0 0 10px currentColor;
+        }
+
+        .xp-val { font-size: 0.8rem; margin-top: 8px; color: #94a3b8; text-align: right; }
+
+        /* Activity Log */
+        .activity-section {
+            background: var(--card);
+            border: 1px solid var(--border);
+            padding: 1.5rem;
+            border-radius: 24px;
+        }
+
+        .activity-section h2 { font-size: 1rem; text-transform: uppercase; margin-top: 0; color: #94a3b8; }
+
+        .log-list { display: flex; flex-direction: column; gap: 10px; }
+        .log-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 15px;
+            background: rgba(255,255,255,0.02);
+            border-radius: 12px;
+            font-size: 0.9rem;
+            animation: slideIn 0.3s ease-out;
+        }
+
+        @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
+
+        .gain-xp-btn {
+            background: var(--accent);
+            color: var(--bg);
+            border: none;
+            padding: 10px 20px;
+            border-radius: 12px;
+            font-weight: 800;
+            cursor: pointer;
+            margin-top: 20px;
+            align-self: center;
+        }
+
+        .gain-xp-btn:hover { filter: brightness(1.2); }