Skip to content
BranchesTags

Repository files navigation

🌳 Skill Quest - Gamified Skill Tree Progress Tracker

Skill Quest DemoOpen SourcePRs Welcome

Table of Contents

🎯 What is This Project?

Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:

  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories

Try the project here.

Skill Quest Dashboard

🔗 Connection to MakerSkillTree

Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.

This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.

📊 Current Project Status

✅ What Works Today

  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:
    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices

🏗️ Architecture

FrontendStorageStylingGraphics

🚀 Project Vision & Future Goals

Current State: Local Progress Tracking Tool

Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:

  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally

Future Vision: Online Gamified Learning Community

We envision transforming Skill Quest into a collaborative learning platform where users can:

🎮 Enhanced Gamification

  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources

🤝 Social & Collaborative Features

  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners

📚 Resource Sharing System

  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill

☁️ Cloud & Sync Features

  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn

🚧 Roadmap

Phase 1: Foundation (Current)

  • Local progress tracking
  • Basic gamification
  • SVG skill tree support
  • Responsive design

Phase 2: Community Features (In Progress)

  • User authentication
  • Cloud sync
  • Public profiles
  • Basic resource sharing

Phase 3: Advanced Platform

  • Learning resource database
  • Community challenges
  • Advanced analytics
  • Mobile application

Phase 4: Ecosystem

  • API for third-party integrations
  • Learning platform partnerships
  • Certification system
  • Marketplace for learning resources

👥 Contributing

We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:

  • Designers:

    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.

  • Developers:

    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.

  • Content Creators: We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:

    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)

It can be resources already created or you can help us create them.

How to Contribute

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Please read our Contributing Guidelines for details.

🛠️ Getting Started

Prerequisites

Installation

  1. Clone the repository:

    git clone https://github.com/ivanr3d/skill-quest.git

  2. Navigate to the project directory:

    cd skill-quest

  3. Open index.html in your browser.

  4. Start adding and tracking your skills!

Basic Usage

  1. Add Your First Skill Tree:

    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree

  2. Track Your Progress:

    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase

  3. Monitor Your Stats:

    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak

📖 Documentation

For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.

🌟 Features in Detail

Gamification System

  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments

Skill Tree Management

  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree

Data Management

  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities

🤝 Community

[Future plans]

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration

📬 Contact

Project Maintainer: [Iván R. Artiles]

Made with ❤️ for the learning community. Level up your skills, one node at a time!

If you find this project useful, please consider giving it a ⭐ on GitHub!

About

A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree

Resources

Readme

Contributing

Contributing
Activity

Stars

10 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - IvanR3D/skill-quest: A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree · GitHub
Skip to content
BranchesTags
Repository files navigation
🌳 Skill Quest - Gamified Skill Tree Progress Tracker
Skill Quest DemoOpen SourcePRs Welcome
Table of Contents
🎯 What is This Project?
Skill Quest is an interactive, gamified web application that helps you visualize and track your learning progress through skill trees. Designed to work with MakerSkillTree SVG files, it takes the concept of skill trees — visual learning paths — and adds gamification elements to make learning more engaging and rewarding. Think of it as a "RPG for real-life skills" where you:
  • Visualize your learning path as interactive skill trees
  • Track progress with XP, levels, and achievements
  • Stay motivated with streaks, badges, and activity tracking
  • Manage multiple skill trees across various categories
Try the project here.
Skill Quest Dashboard
🔗 Connection to MakerSkillTree
Maker Skill Trees are printable templates that can you can use to visualize your skill progress, identify skill gaps and get inspired to try new things. Skill Quest attempts to digitalize the process of creating and sharing skill trees.
This tool is specifically designed to work with SVG files generated by the MakerSkillTree Generator, creating a seamless workflow from skill tree creation to progress tracking.
📊 Current Project Status
✅ What Works Today
  • Local Progress Tracking: Full-featured offline-first application using LocalStorage
  • Skill Tree Management: Import, organize, and categorize SVG skill trees
  • Gamification System:

    • XP & Level progression
    • Achievement unlocking
    • Daily streaks
    • Visual effects (particles, confetti)
  • Interactive Viewer: Click-to-complete skills with customizable colors
  • Dashboard Analytics: Comprehensive stats and activity tracking
  • Data Management: Import/export functionality and profile customization
  • Responsive Design: Works on desktop and mobile devices
🏗️ Architecture
FrontendStorageStylingGraphics
🚀 Project Vision & Future Goals
Current State: Local Progress Tracking Tool
Today, Skill Quest is a personal tool that helps individuals track their learning progress locally. Users can:
  • Import skill trees from MakerSkillTree
  • Track personal learning metrics
  • Visualize their progress
  • Maintain their data locally
Future Vision: Online Gamified Learning Community
We envision transforming Skill Quest into a collaborative learning platform where users can:
🎮 Enhanced Gamification
  • Community Leaderboards: Compare progress with others
  • Collaborative Challenges: Team-based learning quests
  • Skill-based Matchmaking: Connect with peers learning similar skills
  • Reward Marketplace: Exchange XP for learning resources
🤝 Social & Collaborative Features
  • Skill Completion Sharing: Post when you complete skills with resources used
  • Learning Resource Database: Crowd-sourced links, tutorials, and materials
  • Study Groups: Create or join groups for specific skill trees
  • Mentor Matching: Connect beginners with experienced learners
📚 Resource Sharing System
  • Resource Attribution: Tag resources (videos, articles, courses) to specific skills
  • Quality Voting: Community-voted best resources for each skill
  • Learning Path Recommendations: AI-suggested resources based on your progress
  • Progress Journals: Document your learning journey for each skill
☁️ Cloud & Sync Features
  • Cloud Backup: Sync progress across devices
  • Public Profiles: Share your skill tree progress publicly
  • API Access: For developers to build integrations
  • Data Export: To portfolio websites or LinkedIn
🚧 Roadmap
Phase 1: Foundation (Current)
  •  Local progress tracking
  •  Basic gamification
  •  SVG skill tree support
  •  Responsive design
Phase 2: Community Features (In Progress)
  •  User authentication
  •  Cloud sync
  •  Public profiles
  •  Basic resource sharing
Phase 3: Advanced Platform
  •  Learning resource database
  •  Community challenges
  •  Advanced analytics
  •  Mobile application
Phase 4: Ecosystem
  •  API for third-party integrations
  •  Learning platform partnerships
  •  Certification system
  •  Marketplace for learning resources
👥 Contributing
We are actively seeking developers, designers, and content creators to help us make Skill Quest the best learning tool it can be. If you're interested, please check out our Contributing Guidelines for more details. Depending your profile, here is a list of ideas we are looking for:
  • Designers:
    • UI/UX improvements. As you will notice, it is currently very miniamlist and colorless, there are plenty opportunities to make it more visually appealing and interesting.
  • Developers:
    • Frontend development. We are currently using pure HTML, CSS, and JS for the frontend to make it accesible to any developer with the basic knowledge of web tech. We welcome any contribution to implement design ideas or new features.
    • Backend development. We are currently using LocalStorage for data management, but in order to accomplish future goals, we need help to develop a backend system to handle user accounts, data sync, and API integrations.
  • Content Creators:
We still don't have the infraestructure to link learning resources to specific skills but you can help us create a comprehensive resource database where users can find the best resources for each skill. Here are some ideas we are looking for:
    • Tutorials and guides for specific skills
    • Video tutorials and guides
    • Blog posts and articles
    • Learning resources (books, courses, etc.)
It can be resources already created or you can help us create them.
How to Contribute
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Please read our Contributing Guidelines for details.
🛠️ Getting Started
Prerequisites
Installation
  1. Clone the repository:
    git clone https://github.com/ivanr3d/skill-quest.git
  2. Navigate to the project directory:
    cd skill-quest
  3. Open index.html in your browser.
  4. Start adding and tracking your skills!
Basic Usage
  1. Add Your First Skill Tree:
    • Go to "Skill Library"
    • Click "Add Skill Tree"
    • Upload an SVG from MakerSkillTree
    • Categorize and describe your skill tree
  2. Track Your Progress:
    • Click "View" on any skill tree
    • Click skill nodes to mark them as completed
    • Watch your XP and level increase
  3. Monitor Your Stats:
    • Check the Dashboard for overall progress
    • View badges and achievements
    • Track your daily streak
📖 Documentation
For detailed technical documentation, architecture overview, and code explanations, see PROJECT_DOCS.md.
🌟 Features in Detail
Gamification System
  • Progressive Leveling: XP requirements increase as you level up
  • Achievement Badges: Unlock badges for milestones
  • Daily Streaks: Maintain consistency with streak tracking
  • Visual Rewards: Confetti and particle effects for accomplishments
Skill Tree Management
  • Multiple Categories: Programming, Design, Language, Music, Fitness, Other
  • Search & Filter: Easily find specific skill trees
  • Progress Visualization: Color-coded completion status
  • Score Tracking: XP earned per tree
Data Management
  • LocalStorage: All data persists in your browser
  • Import/Export: Backup and restore your progress
  • Profile Customization: Personalize your experience
  • Activity Log: Timeline of all your learning activities
🤝 Community
[Future plans]
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
  • MakerSkillTree for the inspiration and SVG format
  • All contributors who help improve this tool
  • The open-source community for invaluable resources and inspiration
📬 Contact
Project Maintainer: [Iván R. Artiles]
Made with ❤️ for the learning community. Level up your skills, one node at a time!
If you find this project useful, please consider giving it a ⭐ on GitHub!
About
A gamified skill-tracking web tool that helps users visualize and track their learning progress through skill trees from MakerSkillTree
Resources
Readme
Contributing
Contributing
Activity
Stars
10 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages