Quest Network Mapping: Comprehensive Learning Path Visualization
By IT-Journey Team
Demonstration of the enhanced quest hierarchy system with complete mapping examples and mermaid diagrams
Estimated reading time: 33 minutes
Table of Contents
Quest Network Mapping Examples
This document demonstrates the comprehensive quest hierarchy system with practical examples of how main quests, side quests, bonus quests, and epic quests interconnect to create cohesive learning experiences.
Complete Quest Line Example: Foundation Path
Terminal Mastery Path Series
graph TB
subgraph "Prerequisites"
HelloNoob[๐ฑ Hello n00b<br/>Entry Point]
ComputerLit[๐ฐ Computer Literacy<br/>Main Quest]
end
subgraph "Terminal Mastery Path"
TerminalNav[๐ฐ Terminal Navigation<br/>Main Quest]
OhMyZsh[โ๏ธ Oh-My-Zsh Setup<br/>Side Quest]
NerdFonts[โ๏ธ Nerd Font Enchantment<br/>Side Quest]
ProductivityHacks[๐ Terminal Productivity<br/>Bonus Quest]
ShellScript[๐ฐ Shell Scripting<br/>Main Quest]
TerminalEpic[๐ Terminal Automation<br/>Epic Quest]
end
subgraph "Unlocked Adventures"
GitMastery[๐ฐ Git Version Control<br/>Main Quest]
VSCodeMastery[๐ฐ VS Code Mastery<br/>Main Quest]
DevEnv[๐ฐ Dev Environment<br/>Main Quest]
end
HelloNoob --> ComputerLit
ComputerLit --> TerminalNav
TerminalNav --> OhMyZsh
TerminalNav --> NerdFonts
TerminalNav --> ProductivityHacks
OhMyZsh --> ShellScript
NerdFonts --> ShellScript
ShellScript --> TerminalEpic
TerminalNav --> GitMastery
TerminalNav --> VSCodeMastery
TerminalNav --> DevEnv
style TerminalNav fill:#87ceeb
style ShellScript fill:#87ceeb
style OhMyZsh fill:#ffd700
style NerdFonts fill:#ffd700
style ProductivityHacks fill:#ff69b4
style TerminalEpic fill:#9370db
Multi-Path Learning Network
Character Class Integration
graph TD
subgraph "Character Classes"
SoftwareDev[๐ป Software Developer]
SystemEng[๐๏ธ System Engineer]
DataSci[๐ Data Scientist]
Security[๐ก๏ธ Security Specialist]
end
subgraph "Foundation Skills"
Terminal[๐ฐ Terminal Mastery]
Git[๐ฐ Version Control]
Editor[๐ฐ Text Editor Mastery]
end
subgraph "Specialization Paths"
Frontend[๐จ Frontend Development]
Backend[โ๏ธ Backend Systems]
DevOps[๐ง DevOps Automation]
SecOps[๐ก๏ธ Security Operations]
DataPipe[๐ Data Pipelines]
end
subgraph "Advanced Integration"
FullStack[๐ Full-Stack Epic]
CloudArch[๐ Cloud Architecture Epic]
AIIntegration[๐ AI Development Epic]
end
SoftwareDev --> Terminal
SystemEng --> Terminal
DataSci --> Terminal
Security --> Terminal
Terminal --> Git
Terminal --> Editor
Git --> Frontend
Git --> Backend
Editor --> Frontend
Editor --> Backend
Terminal --> DevOps
Terminal --> SecOps
Terminal --> DataPipe
Frontend --> FullStack
Backend --> FullStack
DevOps --> CloudArch
SecOps --> CloudArch
DataPipe --> AIIntegration
Quest Type Integration Example
Complete Learning Campaign: Web Development Mastery
timeline
title Web Development Mastery Campaign
section Foundation (Levels 0000-0111)
Init World : ๐ฑ Hello n00b (Entry)
: ๐ฐ Computer Literacy (Main)
: ๐ฐ Terminal Navigation (Main)
: โ๏ธ Oh-My-Zsh Setup (Side)
: โ๏ธ Nerd Fonts (Side)
Development : ๐ฐ HTML/CSS Fundamentals (Main)
: โ๏ธ Bootstrap Integration (Side)
: ๐ฐ JavaScript Basics (Main)
: ๐ ES6+ Features (Bonus)
section Intermediate (Levels 1000-1111)
Frontend : ๐ฐ React Fundamentals (Main)
: โ๏ธ Component Libraries (Side)
: ๐ฐ State Management (Main)
: ๐ Performance Optimization (Bonus)
Backend : ๐ฐ Node.js & Express (Main)
: โ๏ธ API Documentation (Side)
: ๐ฐ Database Integration (Main)
: ๐ Caching Strategies (Bonus)
section Advanced (Levels 10000+)
Integration : ๐ฐ Full-Stack Architecture (Main)
: โ๏ธ Testing Strategies (Side)
: ๐ Portfolio Website Epic (Epic)
: ๐ AI Integration (Bonus)
Production : ๐ฐ Deployment Automation (Main)
: โ๏ธ Monitoring Setup (Side)
: ๐ E-commerce Platform Epic (Epic)
: ๐ Microservices Migration (Bonus)
Dependency Chain Visualization
Complex Prerequisite Network
graph TB
subgraph "Entry Level"
A[๐ฑ Hello n00b]
end
subgraph "Foundation Layer"
B[๐ฐ Computer Literacy]
C[๐ฐ Terminal Navigation]
D[๐ฐ Text Editor Mastery]
end
subgraph "Development Fundamentals"
E[๐ฐ HTML/CSS Fundamentals]
F[๐ฐ JavaScript Basics]
G[๐ฐ Version Control with Git]
end
subgraph "Enhancement Layer"
H[โ๏ธ Oh-My-Zsh Setup]
I[โ๏ธ Bootstrap Integration]
J[โ๏ธ Git Workflow Optimization]
K[๐ Advanced CSS Techniques]
L[๐ JavaScript ES6+ Features]
end
subgraph "Intermediate Skills"
M[๐ฐ Frontend Framework Mastery]
N[๐ฐ Backend Development]
O[๐ฐ Database Design]
end
subgraph "Advanced Integration"
P[๐ Full-Stack Portfolio Epic]
Q[๐ E-commerce Platform Epic]
end
A --> B
B --> C
B --> D
C --> E
C --> F
C --> G
D --> E
D --> F
C --> H
E --> I
G --> J
E --> K
F --> L
E --> M
F --> M
F --> N
G --> N
M --> O
N --> O
M --> P
N --> P
O --> P
P --> Q
style A fill:#90EE90
style B fill:#87ceeb
style C fill:#87ceeb
style D fill:#87ceeb
style E fill:#87ceeb
style F fill:#87ceeb
style G fill:#87ceeb
style H fill:#ffd700
style I fill:#ffd700
style J fill:#ffd700
style K fill:#ff69b4
style L fill:#ff69b4
style M fill:#87ceeb
style N fill:#87ceeb
style O fill:#87ceeb
style P fill:#9370db
style Q fill:#9370db
Learning Path Customization
Different Character Class Journeys
graph TD
subgraph "Common Foundation"
Start[๐ฑ Hello n00b]
Terminal[๐ฐ Terminal Navigation]
Git[๐ฐ Version Control]
end
subgraph "Software Developer Path"
DevHTML[๐ฐ HTML/CSS Fundamentals]
DevJS[๐ฐ JavaScript Mastery]
DevFramework[๐ฐ Frontend Framework]
DevBackend[๐ฐ Backend Development]
DevEpic[๐ Full-Stack Portfolio Epic]
end
subgraph "System Engineer Path"
SysLinux[๐ฐ Linux Administration]
SysNetwork[๐ฐ Network Configuration]
SysDocker[๐ฐ Container Management]
SysCloud[๐ฐ Cloud Platform Mastery]
SysEpic[๐ Infrastructure Automation Epic]
end
subgraph "Data Scientist Path"
DataPython[๐ฐ Python Programming]
DataAnalysis[๐ฐ Data Analysis]
DataML[๐ฐ Machine Learning]
DataViz[๐ฐ Data Visualization]
DataEpic[๐ ML Pipeline Epic]
end
Start --> Terminal
Terminal --> Git
Git --> DevHTML
DevHTML --> DevJS
DevJS --> DevFramework
DevFramework --> DevBackend
DevBackend --> DevEpic
Git --> SysLinux
SysLinux --> SysNetwork
SysNetwork --> SysDocker
SysDocker --> SysCloud
SysCloud --> SysEpic
Git --> DataPython
DataPython --> DataAnalysis
DataAnalysis --> DataML
DataML --> DataViz
DataViz --> DataEpic
style Start fill:#90EE90
style Terminal fill:#87ceeb
style Git fill:#87ceeb
style DevEpic fill:#9370db
style SysEpic fill:#9370db
style DataEpic fill:#9370db
Quest Progress Tracking System
Individual Quest Progress
graph LR
subgraph "Quest Status Indicators"
NotStarted[โช Not Started]
InProgress[๐ก In Progress]
Completed[โ
Completed]
Mastered[๐ Mastered]
end
subgraph "Quest Dependencies"
Locked[๐ Locked]
Available[๐ข Available]
Recommended[๐ต Recommended]
end
subgraph "Quest Types"
Main[๐ฐ Main Quest]
Side[โ๏ธ Side Quest]
Bonus[๐ Bonus Quest]
Epic[๐ Epic Quest]
end
Learning Path Progress Dashboard
graph TD
subgraph "Foundation Path Progress"
F1[โ
Hello n00b - Completed]
F2[โ
Terminal Navigation - Completed]
F3[๐ก Shell Scripting - In Progress]
F4[โช Version Control - Not Started]
F5[๐ Advanced Automation - Locked]
end
subgraph "Side Quest Completion"
S1[โ
Oh-My-Zsh Setup - Completed]
S2[โ
Nerd Fonts - Completed]
S3[๐ก Productivity Hacks - In Progress]
end
subgraph "Available Next Steps"
N1[๐ข Git Fundamentals - Available]
N2[๐ข VS Code Mastery - Available]
N3[๐ต Development Environment - Recommended]
end
F2 --> S1
F2 --> S2
F3 --> N1
S1 --> N2
S2 --> N2
Implementation Guidelines
Quest Creator Workflow
graph TD
Idea[๐ก Quest Idea] --> Analysis{Analyze Scope}
Analysis -->|60+ min, Multi-skill| EpicPath[๐ Epic Quest]
Analysis -->|60+ min, Single-skill| MainPath[๐ฐ Main Quest]
Analysis -->|15-60 min, Enhancement| SidePath[โ๏ธ Side Quest]
Analysis -->|Variable, Experimental| BonusPath[๐ Bonus Quest]
EpicPath --> EpicTemplate[Use Epic Template]
MainPath --> MainTemplate[Use Main Template]
SidePath --> SideTemplate[Use Side Template]
BonusPath --> BonusTemplate[Use Bonus Template]
EpicTemplate --> Dependencies{Map Dependencies}
MainTemplate --> Dependencies
SideTemplate --> Dependencies
BonusTemplate --> Dependencies
Dependencies --> Network[Create Network Diagram]
Network --> Validate[Validate Quest Network]
Validate --> Publish[Publish Quest]
Automated Quest Map Generation
graph TB
subgraph "Data Sources"
Frontmatter[๐ Quest Frontmatter]
Registry[๐พ Quest Registry]
UserProgress[๐ User Progress Data]
end
subgraph "Processing Engine"
Parser[๐ YAML Parser]
Validator[โ
Dependency Validator]
MapGenerator[๐บ๏ธ Map Generator]
end
subgraph "Output Formats"
StaticMap[๐ Static Mermaid Diagrams]
InteractiveMap[๐ฎ Interactive Web Map]
ProgressDash[๐ Progress Dashboard]
RecommendEngine[๐ค Recommendation Engine]
end
Frontmatter --> Parser
Registry --> Parser
UserProgress --> Parser
Parser --> Validator
Validator --> MapGenerator
MapGenerator --> StaticMap
MapGenerator --> InteractiveMap
MapGenerator --> ProgressDash
MapGenerator --> RecommendEngine
Practical Implementation Examples
Jekyll Collection Integration
<!-- _layouts/quest.html - Enhanced quest layout -->
<article class="quest side_quest">
<header class="quest-header">
<h1>Quest Network Mapping: Comprehensive Learning Path Visualization</h1>
<div class="quest-metadata">
<span class="quest-type side_quest">
โ๏ธ Side Quest
</span>
<span class="difficulty">๐ข Easy</span>
<span class="time">Variable</span>
</div>
</header>
<!-- Quest Network Visualization -->
<!-- Main quest content -->
<main class="quest-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
-->
<!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<!-- Sidebar visibility controlled by page.sidebar front matter -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar navigation with three standardized content modes
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Three navigation modes based on page.sidebar.nav:
* "auto": Auto-generated folder structure from collection documents
* "tree": YAML-defined hierarchical navigation from _data/navigation/
* "categories": Category-based navigation from site categories
Dependencies:
- sidebar-folders.html: Dynamic folder structure generation (auto mode)
- sidebar-categories.html: Category-based navigation (categories mode)
- nav-tree.html: YAML-based hierarchical tree (tree mode)
- Bootstrap 5 offcanvas component
Navigation Modes:
1. auto: Scans collection documents to build folder structure
2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
3. categories: Groups content by Jekyll categories
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<!-- ========================== -->
<!-- AUTO MODE: Collection Docs -->
<!-- ========================== -->
<!-- Auto-generates folder structure from collection documents -->
<nav class="w-100 nav-tree" data-nav-tree>
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/home/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-map me-2"></i>
<span>Quest Hub</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-quest-hub"
aria-expanded="false"
aria-controls="nav-quest-hub"
aria-label="Toggle Quest Hub submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-quest-hub">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/home/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Overworld Map</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Quest Index</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0000/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-emoji-sunglasses me-2"></i>
<span>Level 0000 - Foundation</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0000-foundation"
aria-expanded="false"
aria-controls="nav-level-0000-foundation"
aria-label="Toggle Level 0000 - Foundation submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0000-foundation">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0000/begin-your-it-journey"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Begin Your Journey</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0000/terminal-fundamentals"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Terminal Fundamentals</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0000/git-basics"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Git Basics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0000/markdown-mastery"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Markdown Mastery</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0000/vscode-mastery-quest"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>VS Code Mastery</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0001/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-feather me-2"></i>
<span>Level 0001 - Beginner</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0001-beginner"
aria-expanded="false"
aria-controls="nav-level-0001-beginner"
aria-label="Toggle Level 0001 - Beginner submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0001-beginner">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0001/github-pages-basics"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>GitHub Pages Basics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0001/jekyll-fundamentals"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Jekyll Fundamentals</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0001/yaml-configuration"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>YAML Configuration</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0001/liquid-templating"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Liquid Templating</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0001/git-workflow-mastery"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Git Workflow Mastery</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0010/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-tree me-2"></i>
<span>Level 0010 - Intermediate</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0010-intermediate"
aria-expanded="false"
aria-controls="nav-level-0010-intermediate"
aria-label="Toggle Level 0010 - Intermediate submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0010-intermediate">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0010/bash-scripting"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Bash Scripting</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0010/javascript-fundamentals"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>JavaScript Fundamentals</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0010/css-styling-basics"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>CSS Styling Basics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0010/bootstrap-framework"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Bootstrap Framework</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0010/prompt-engineering"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Prompt Engineering</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0011/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-lightning-charge me-2"></i>
<span>Level 0011 - Advanced</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0011-advanced"
aria-expanded="false"
aria-controls="nav-level-0011-advanced"
aria-label="Toggle Level 0011 - Advanced submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0011-advanced">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0011/advanced-git-workflows"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Advanced Git Workflows</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0011/jekyll-plugins"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Jekyll Plugins</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0011/seo-optimization"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>SEO Optimization</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0011/analytics-integration"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Analytics Integration</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0100/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-box-seam me-2"></i>
<span>Level 0100 - Container</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0100-container"
aria-expanded="false"
aria-controls="nav-level-0100-container"
aria-label="Toggle Level 0100 - Container submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0100-container">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0100/container-fundamentals"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Container Fundamentals</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0100/docker-compose-orchestration"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Docker Compose</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0100/frontend-docker"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Frontend Docker</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/quests/0101/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-rocket-takeoff me-2"></i>
<span>Level 0101 - CI/CD</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-level-0101-ci-cd"
aria-expanded="false"
aria-controls="nav-level-0101-ci-cd"
aria-label="Toggle Level 0101 - CI/CD submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-level-0101-ci-cd">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0101/cicd-fundamentals"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>CI/CD Fundamentals</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0101/github-actions-basics"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>GitHub Actions Basics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0101/deployment-pipelines"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Deployment Pipelines</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/0101/secrets-management"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Secrets Management</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<button class="btn btn-link nav-tree-toggle w-100 d-flex align-items-center text-start fw-semibold py-1 px-2 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-resources"
aria-expanded="false"
aria-controls="nav-resources">
<i class="bi-book me-2"></i>
<span class="flex-grow-1">Resources</span>
<i class="bi bi-chevron-down nav-tree-chevron"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-resources">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/codex/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Codex</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/inventory/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Inventory</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/quests/tools/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Tools</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation -->
<main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!-- Page introduction: title, breadcrumbs, metadata -->
<!--
file: _includes/intro.html
description: Enhanced intro section with improved share functionality and better button alignment
path: _includes/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Properly aligned action buttons at bottom right
- Improved accessibility with icons and labels
- Clean button grouping with consistent spacing
-->
<!-- Intro Section -->
<div class="bd-intro pt-5 ps-lg-2 position-relative" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assetsimages/previews/world-map-navigation-guide-to-the-it-journey-realm.png') no-repeat center center / cover;
color: #fff;">
<br>
<h1>๐บ๏ธ World Map: Navigation Guide to the IT-Journey Realm</h1>
<p>By IT-Journey Team</p>
<p>Your comprehensive guide to navigating the IT-Journey platform - quests, documentation, tutorials, and learning paths.</p>
<p>Estimated reading time: 9 minutes</p>
<!-- Action Buttons Group -->
<div class="position-absolute bottom-0 end-0 m-3 d-flex gap-2">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share"></i>
<span class="d-none d-sm-inline ms-1">Share</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Fcodex%2Fworld-map%2F&title=%F0%9F%97%BA%EF%B8%8F+World+Map%3A+Navigation+Guide+to+the+IT-Journey+Realm" target="_blank">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Fcodex%2Fworld-map%2F" target="_blank">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Fcodex%2Fworld-map%2F&text=%F0%9F%97%BA%EF%B8%8F+World+Map%3A+Navigation+Guide+to+the+IT-Journey+Realm" target="_blank">
<i class="bi bi-twitter me-2"></i>Share on Twitter
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button class="dropdown-item" onclick='navigator.clipboard.writeText("https://it-journey.dev/quests/codex/world-map/"); alert("Link copied to clipboard!");'>
<i class="bi bi-clipboard me-2"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Edit on Github Button -->
<a href="https://github.com/bamr87/it-journey/blob/master/pages/_quests/codex/world_map.md" class="btn btn-dark">
<i class="bi bi-github"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<!-- Right sidebar visibility also controlled by page.sidebar -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
-->
<!-- TOC button in mobile view - Floating Action Button pattern -->
<!-- Positioned above back-to-top button to prevent overlap -->
<div class="d-lg-none position-fixed bd-toc-fab" style="bottom: 90px; right: 20px; z-index: 1030;">
<button class="btn btn-primary rounded-circle shadow-lg bd-toc-toggle"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#tocContents"
aria-controls="tocContents"
aria-label="Toggle Table of Contents"
style="width: 56px; height: 56px;">
<i class="bi bi-list-ul fs-5"></i>
</button>
</div>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="tocLabel">Table of Contents</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#tocContents"></button>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3">
<strong class="d-flex align-items-center">
<i class="bi bi-file-text me-2"></i>
On this page
</strong>
</div>
<!-- TOC list -->
<!-- TOC list -->
<ul class="list-group-flush"><li class="list-group-item"><a href="#-realm-overview-the-four-sacred-domains" class="">๐ Realm Overview: The Four Sacred Domains</a></li><li class="list-group-item"><a href="#-quickstart-domain---your-launch-pad-to-digital-mastery" class="">๐ QuickStart Domain - Your Launch Pad to Digital Mastery</a><ul><li class="list-group-item"><a href="#๏ธ-core-territories" class="">๐๏ธ Core Territories</a></li><li class="list-group-item"><a href="#-quick-navigation-links" class="">๐ฏ Quick Navigation Links</a></li></ul></li><li class="list-group-item"><a href="#๏ธ-journey-domain---the-epic-quest-realm" class="">โ๏ธ Journey Domain - The Epic Quest Realm</a><ul><li class="list-group-item"><a href="#-chronicles-territory-posts" class="">๐ Chronicles Territory (/posts/)</a></li><li class="list-group-item"><a href="#๏ธ-quests-territory-quests" class="">โ๏ธ Quests Territory (/quests/)</a></li></ul></li><li class="list-group-item"><a href="#-library-domain---the-sacred-repository-of-knowledge" class="">๐ Library Domain - The Sacred Repository of Knowledge</a><ul><li class="list-group-item"><a href="#๏ธ-library-collections" class="">๐๏ธ Library Collections</a></li><li class="list-group-item"><a href="#๏ธ-documentation-categories" class="">๐๏ธ Documentation Categories</a></li></ul></li><li class="list-group-item"><a href="#-notebook-domain---your-personal-grimoire" class="">๐ Notebook Domain - Your Personal Grimoire</a><ul><li class="list-group-item"><a href="#-laboratory-sections" class="">๐งช Laboratory Sections</a></li><li class="list-group-item"><a href="#-interactive-learning-environments" class="">๐ฌ Interactive Learning Environments</a></li></ul></li><li class="list-group-item"><a href="#-configuration--repository-structure" class="">๐ง Configuration & Repository Structure</a><ul><li class="list-group-item"><a href="#-repository-architecture" class="">๐ Repository Architecture</a></li><li class="list-group-item"><a href="#๏ธ-navigation-configuration" class="">๐บ๏ธ Navigation Configuration</a></li><li class="list-group-item"><a href="#-critical-links--pathways" class="">๐ Critical Links & Pathways</a></li><li class="list-group-item"><a href="#๏ธ-authentication--access" class="">๐ก๏ธ Authentication & Access</a></li></ul></li><li class="list-group-item"><a href="#-quick-start-navigation-commands" class="">๐ Quick Start Navigation Commands</a><ul><li class="list-group-item"><a href="#-for-complete-beginners" class="">๐ฏ For Complete Beginners</a></li><li class="list-group-item"><a href="#-for-experienced-developers" class="">โก For Experienced Developers</a></li><li class="list-group-item"><a href="#-for-system-administrators" class="">๐ง For System Administrators</a></li></ul></li><li class="list-group-item"><a href="#-hidden-treasures--advanced-features" class="">๐ Hidden Treasures & Advanced Features</a><ul><li class="list-group-item"><a href="#-easter-eggs--special-content" class="">๐ฎ Easter Eggs & Special Content</a></li><li class="list-group-item"><a href="#-interactive-elements" class="">๐ฎ Interactive Elements</a></li></ul></li></ul>
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<p><em>Welcome, brave traveler, to the complete cartographical guide of the IT-Journey realm! This mystical map reveals every secret path, hidden treasure, and learning adventure across our digital kingdom.</em></p>
<h2 id="-realm-overview-the-four-sacred-domains">๐ Realm Overview: The Four Sacred Domains</h2>
<p>The IT-Journey realm is divided into four interconnected domains, each serving a unique purpose in your quest for IT mastery:</p>
<pre><code class="language-mermaid">graph TD
Start([๐๏ธ Central Hub<br/>it-journey.dev]) --> QuickStart[๐ QuickStart Domain<br/>Launch Pad]
Start --> Journey[โ๏ธ Journey Domain<br/>Adventures & Chronicles]
Start --> Library[๐ Library Domain<br/>Knowledge Repository]
Start --> Notebook[๐ Notebook Domain<br/>Personal Grimoire]
QuickStart --> Machine[๐ง Machine Setup]
QuickStart --> Tools[๐ ๏ธ Essential Tools]
QuickStart --> FirstSteps[๐ฃ First Steps]
Journey --> Posts[๐ Chronicles]
Journey --> Quests[โ๏ธ Epic Quests]
Journey --> Adventures[๐ก๏ธ Learning Adventures]
Library --> Docs[๐ Documentation]
Library --> Guides[๐ Comprehensive Guides]
Library --> References[๐ Quick References]
Notebook --> Notes[๐ Personal Notes]
Notebook --> Jupyter[๐ป Jupyter Labs]
Notebook --> Snippets[๐งฉ Code Collections]
</code></pre>
<h2 id="-quickstart-domain---your-launch-pad-to-digital-mastery">๐ QuickStart Domain - Your Launch Pad to Digital Mastery</h2>
<p><em>The realm where every hero begins their journey - quick tutorials and essential setups to get you moving fast.</em></p>
<p><strong>Location:</strong> <code class="language-plaintext highlighter-rouge">/quickstart/</code><br />
<strong>Purpose:</strong> Rapid deployment and essential environment setup</p>
<h3 id="๏ธ-core-territories">๐๏ธ Core Territories</h3>
<table>
<thead>
<tr>
<th>Territory</th>
<th>Path</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>๐ง Master Setup</strong></td>
<td><code class="language-plaintext highlighter-rouge">/quickstart/machine-setup/</code></td>
<td>Essential development environment configuration</td>
</tr>
<tr>
<td><strong>๐ ๏ธ Zer0-Mistakes Foundation</strong></td>
<td><code class="language-plaintext highlighter-rouge">/quests/level-0010-epic-quest-zer0-to-her0-cmstyle/</code></td>
<td>Core setup and fundamental tools</td>
</tr>
<tr>
<td><strong>โก Essential Tools Arsenal</strong></td>
<td><code class="language-plaintext highlighter-rouge">/quickstart/</code></td>
<td>Critical software and utilities</td>
</tr>
<tr>
<td><strong>๐ฃ First Steps Ceremony</strong></td>
<td><code class="language-plaintext highlighter-rouge">/quickstart/first-steps/</code></td>
<td>Gentle introductions for newcomers</td>
</tr>
</tbody>
</table>
<h3 id="-quick-navigation-links">๐ฏ Quick Navigation Links</h3>
<ul>
<li><a href="/quickstart/machine-setup/">Machine Setup Guide</a> - Configure your development fortress</li>
<li><a href="/quickstart/">Essential Tools</a> - Arm yourself with the right weapons</li>
<li><a href="/quests/level-0010-epic-quest-zer0-to-her0-cmstyle/">Zer0-Mistakes Starter</a> - Foundation principles and practices</li>
</ul>
<h2 id="๏ธ-journey-domain---the-epic-quest-realm">โ๏ธ Journey Domain - The Epic Quest Realm</h2>
<p><em>Your adventure unfolds through two interconnected paths: battle-tested wisdom and gamified learning experiences.</em></p>
<p><strong>Location:</strong> <code class="language-plaintext highlighter-rouge">/posts/</code> and <code class="language-plaintext highlighter-rouge">/quests/</code><br />
<strong>Purpose:</strong> Learning through experience, challenges, and real-world adventures</p>
<h3 id="-chronicles-territory-posts">๐ Chronicles Territory (<code class="language-plaintext highlighter-rouge">/posts/</code>)</h3>
<p>Battle-tested wisdom and real-world experiences from fellow code warriors whoโve survived production deployments.</p>
<h4 id="๏ธ-chronicle-categories">๐๏ธ Chronicle Categories</h4>
<table>
<thead>
<tr>
<th>Category</th>
<th>Path</th>
<th>Quest Count</th>
<th>Latest Adventures</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>๐ค AI Development</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/ai/</code></td>
<td>15+</td>
<td>GPT Integration, AI Automation</td>
</tr>
<tr>
<td><strong>๐ณ Containerization</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/docker/</code></td>
<td>8+</td>
<td>Docker Setups, Container Magic</td>
</tr>
<tr>
<td><strong>โ๏ธ Development Tools</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/tools/</code></td>
<td>12+</td>
<td>VS Code, Git, Automation</td>
</tr>
<tr>
<td><strong>๐จ Frontend Mastery</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/frontend/</code></td>
<td>10+</td>
<td>JavaScript, CSS, Frameworks</td>
</tr>
<tr>
<td><strong>๐๏ธ System Architecture</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/architecture/</code></td>
<td>6+</td>
<td>Design Patterns, Infrastructure</td>
</tr>
<tr>
<td><strong>๐ Data & Analytics</strong></td>
<td><code class="language-plaintext highlighter-rouge">/posts/tags/data/</code></td>
<td>8+</td>
<td>Python, Databases, Visualization</td>
</tr>
</tbody>
</table>
<h4 id="-recent-chronicles-2024-2025">๐
Recent Chronicles (2024-2025)</h4>
<ul>
<li><a href="/advanced-version-management-ai-implementation/">AI-Powered Development Workflows</a> - Advanced automation techniques</li>
<li><a href="/debugging-github-actions-workflows-ai-assisted/">GitHub Actions Mastery</a> - CI/CD optimization</li>
<li><a href="/posts/dockering-your-it-journey/">Docker for IT-Journey</a> - Containerization strategies</li>
<li>Jekyll Theming & Bootstrap (planned) - Site customization</li>
</ul>
<h3 id="๏ธ-quests-territory-quests">โ๏ธ Quests Territory (<code class="language-plaintext highlighter-rouge">/quests/</code>)</h3>
<p>Interactive challenges and adventures that transform learning into an epic RPG experience.</p>
<h4 id="๏ธ-quest-realm-structure">๐บ๏ธ Quest Realm Structure</h4>
<pre><code class="language-mermaid">graph TD
QuestHub[๐ฐ Quest Hub<br/>/quests/] --> InitWorld[๐ฑ Init World<br/>Character Creation]
QuestHub --> Levels[โก Level Progression<br/>000, 001, 010...]
QuestHub --> Frontend[๐จ Frontend Mastery<br/>UI/UX Adventures]
QuestHub --> Codex[๐ Quest Codex<br/>Reference Materials]
InitWorld --> HelloNoob[๐ถ Hello n00b]
InitWorld --> HelloWin[๐ช Hello Windows]
InitWorld --> HelloMac[๐ Hello macOS]
InitWorld --> HelloLinux[๐ง Hello Linux]
InitWorld --> HelloCloud[โ๏ธ Hello Cloud]
Levels --> Lvl000[๐ Level 000<br/>Bash & Scripting]
Levels --> Lvl001[๐ Level 001<br/>Web Technologies]
Levels --> Lvl010[๐๏ธ Level 010<br/>Complex Applications]
Frontend --> FrontendDocker[๐ณ Frontend Docker]
Frontend --> FrontendLevels[๐ Frontend Progression]
Codex --> WorldMap[๐บ๏ธ World Map]
Codex --> Glossary[๐ Glossary]
</code></pre>
<h4 id="-init-world---character-creation--foundation">๐ฐ Init World - Character Creation & Foundation</h4>
<p><strong>Location:</strong> <code class="language-plaintext highlighter-rouge">/quests/init_world/</code><br />
<strong>Purpose:</strong> Begin your journey and establish your digital identity</p>
<table>
<thead>
<tr>
<th>Quest</th>
<th>Difficulty</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/quests/lvl_000/begin-your-it-journey/">Begin Your IT Journey</a></td>
<td>๐ฑ n00b</td>
<td>The Heroโs Call</td>
</tr>
<tr>
<td><a href="/quests/character-building/">Character Building</a></td>
<td>๐ฑ n00b</td>
<td>Forge Your Identity</td>
</tr>
<tr>
<td><a href="/quests/lvl_000/it-fundamentals/">IT Fundamentals</a></td>
<td>๐ฑ n00b</td>
<td>Learn the Ancient Arts</td>
</tr>
<tr>
<td><a href="/quests/lvl_000/character-selection/">Character Selection</a></td>
<td>๐ข Easy</td>
<td>Choose Your Destiny</td>
</tr>
<tr>
<td><a href="/quests/lvl_000/os-selection/">OS Selection</a></td>
<td>๐ข Easy</td>
<td>Pick Your Realm</td>
</tr>
</tbody>
</table>
<p><strong>Platform-Specific Quests:</strong></p>
<ul>
<li><a href="/quests/init_world/hello-noob/">Hello n00b</a> - Your first steps into the digital realm</li>
<li><a href="/quests/hello-windows/">Hello Windows</a> - Mastering the Microsoft Kingdom</li>
<li><a href="/quests/hello-macos/">Hello macOS</a> - Conquering the Apple Empire</li>
<li><a href="/quests/hello-linux/linux-fundamentals/">Hello Linux</a> - Taming the Penguinโs Domain</li>
<li><a href="/quests/hello-cloud/">Hello Cloud</a> - Ascending to the Digital Heavens</li>
</ul>
<h4 id="-level-progression-system">โก Level Progression System</h4>
<p><strong>Level 000 - Apprentice Trials</strong> (<code class="language-plaintext highlighter-rouge">/quests/lvl_000/</code>)<br />
Basic scripting and automation magic</p>
<ul>
<li><a href="/quests/lvl_000/bash-run/">Bash Fundamentals</a> - Learn the Terminal Incantations</li>
<li><code class="language-plaintext highlighter-rouge">bash_crawl.sh</code> - Your First Automation Spell</li>
<li><code class="language-plaintext highlighter-rouge">calculator.sh</code> - Mathematical Magic Basics</li>
<li><code class="language-plaintext highlighter-rouge">profile.sh</code> - Customize Your Digital Presence</li>
</ul>
<p><strong>Level 001 - Journeyman Challenges</strong> (<code class="language-plaintext highlighter-rouge">/quests/lvl_001/</code>)<br />
Web technologies and advanced scripting</p>
<ul>
<li><a href="/quests/level-0001/personal-site/">Personal Site Creation</a> - Build Your Digital Castle</li>
<li><code class="language-plaintext highlighter-rouge">js-examples.js</code> - JavaScript Spell Components</li>
<li><code class="language-plaintext highlighter-rouge">js_testing.js</code> - Test Your Magical Constructs</li>
<li><code class="language-plaintext highlighter-rouge">python.py</code> - Pythonic Sorcery Basics</li>
</ul>
<p><strong>Level 010 - Master Tier Quests</strong> (<code class="language-plaintext highlighter-rouge">/quests/lvl_0010/</code>)<br />
Complex application development</p>
<ul>
<li>Bookstore Application (planned) - Craft a Complete Magical Marketplace</li>
</ul>
<h4 id="-frontend-mastery-path-questsfrontend">๐จ Frontend Mastery Path (<code class="language-plaintext highlighter-rouge">/quests/frontend/</code>)</h4>
<p>Become a master of user interfaces and digital aesthetics</p>
<ul>
<li><a href="/quests/frontend/">Frontend Fundamentals</a> - The Art of Digital Presentation</li>
<li><a href="/quests/frontend-docker/">Frontend Docker Adventures</a> - Containerized UI Magic</li>
<li><a href="/quests/level-0100-frontend-levels/">Frontend Level Progression</a> - Structured Learning Path</li>
<li><a href="/quests/level-0100/frontend-docker-level-000/">Level 000 Frontend</a> - Beginner Container Magic</li>
<li><a href="/quests/level-0100/frontend-docker-level-001/">Level 001 Frontend</a> - Intermediate UI Sorcery</li>
<li><a href="/quests/level-0100/frontend-docker-level-010/">Level 010 Frontend</a> - Advanced Interface Wizardry</li>
</ul>
<h4 id="-quest-codex-questscodex">๐ Quest Codex (<code class="language-plaintext highlighter-rouge">/quests/codex/</code>)</h4>
<p>Reference materials and navigation aids</p>
<ul>
<li><a href="/quests/codex/world-map/">๐บ๏ธ World Map</a> - This comprehensive navigation guide</li>
<li><a href="/quests/codex/glossary/">๐ Glossary</a> - Dictionary of Digital Spells and Terms</li>
</ul>
<h4 id="๏ธ-recent-quest-chronicles-2025">๐ฐ๏ธ Recent Quest Chronicles (2025)</h4>
<ul>
<li><a href="/quests/level-0010-django-and-git/">Django & Git Mastery</a> - Web Framework Sorcery</li>
<li><a href="/quests/level-0010-action-triggers/">Action Triggers</a> - Automation Spell Casting</li>
<li><a href="/quests/level-0010-branches-and-pull-requests/">Branches & Pull Requests</a> - Version Control Mastery</li>
<li><a href="/quests/level-0010-change-logs/">Change Log Chronicles</a> - Document Your Journey</li>
<li><a href="/quests/level-0010-commitments-to-clean-commits/">Clean Commit Commitments</a> - Perfect Your Git Ritual</li>
<li><a href="/quests/level-0010-revolutionizing-work-with-ai-automation/">AI Automation Revolution</a> - Summon AI Familiars</li>
<li><a href="/quests/level-0100-source-control-sorcery/">Sourcery Code Methods</a> - Advanced Coding Incantations</li>
</ul>
<h2 id="-library-domain---the-sacred-repository-of-knowledge">๐ Library Domain - The Sacred Repository of Knowledge</h2>
<p><em>Deep knowledge repositories and comprehensive documentation for when you need to go deeper.</em></p>
<p><strong>Location:</strong> <code class="language-plaintext highlighter-rouge">/docs/</code><br />
<strong>Purpose:</strong> Comprehensive guides, references, and architectural blueprints</p>
<h3 id="๏ธ-library-collections">๐๏ธ Library Collections</h3>
<table>
<thead>
<tr>
<th>Collection</th>
<th>Path</th>
<th>Content Type</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>๐ง Jekyll Mastery</strong></td>
<td><code class="language-plaintext highlighter-rouge">/docs/jekyll/</code></td>
<td>Site Framework</td>
<td>Building and customizing IT-Journey</td>
</tr>
<tr>
<td><strong>๐๏ธ Architecture Guides</strong></td>
<td><code class="language-plaintext highlighter-rouge">/docs/architecture/</code></td>
<td>System Design</td>
<td>Blueprints and patterns</td>
</tr>
<tr>
<td><strong>๐ Configuration Codex</strong></td>
<td><code class="language-plaintext highlighter-rouge">/docs/config/</code></td>
<td>Setup Guides</td>
<td>System and tool configurations</td>
</tr>
<tr>
<td><strong>๐ Reference Materials</strong></td>
<td><code class="language-plaintext highlighter-rouge">/docs/reference/</code></td>
<td>Quick Lookup</td>
<td>APIs, syntax, and commands</td>
</tr>
<tr>
<td><strong>๐ Comprehensive Guides</strong></td>
<td><code class="language-plaintext highlighter-rouge">/docs/guides/</code></td>
<td>Deep Dives</td>
<td>Step-by-step tutorials</td>
</tr>
</tbody>
</table>
<h3 id="๏ธ-documentation-categories">๐๏ธ Documentation Categories</h3>
<p>Access all categories at <code class="language-plaintext highlighter-rouge">/categories/</code> to explore content by topic:</p>
<ul>
<li><strong>Development Tools</strong> - IDE setup, Git workflows, automation</li>
<li><strong>Programming Languages</strong> - Python, JavaScript, Bash, and more</li>
<li><strong>Frameworks</strong> - Jekyll, Django, React, Angular</li>
<li><strong>Infrastructure</strong> - Docker, CI/CD, Cloud platforms</li>
<li><strong>Security</strong> - Best practices, authentication, encryption</li>
</ul>
<h2 id="-notebook-domain---your-personal-grimoire">๐ Notebook Domain - Your Personal Grimoire</h2>
<p><em>Your growing collection of interactive code environments, notes, and personal discoveries.</em></p>
<p><strong>Location:</strong> <code class="language-plaintext highlighter-rouge">/notes/</code><br />
<strong>Purpose:</strong> Personal learning space and code experimentation</p>
<h3 id="-laboratory-sections">๐งช Laboratory Sections</h3>
<table>
<thead>
<tr>
<th>Section</th>
<th>Path</th>
<th>Tools</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>๐ป Jupyter Labs</strong></td>
<td><code class="language-plaintext highlighter-rouge">/notes/jupyter/</code></td>
<td>Interactive Notebooks</td>
<td>Code experimentation and analysis</td>
</tr>
<tr>
<td><strong>๐ Personal Notes</strong></td>
<td><code class="language-plaintext highlighter-rouge">/notes/</code></td>
<td>Markdown Notes</td>
<td>Quick captures and reminders</td>
</tr>
<tr>
<td><strong>๐งฉ Code Collections</strong></td>
<td><code class="language-plaintext highlighter-rouge">/notes/snippets/</code></td>
<td>Reusable Code</td>
<td>Curated examples and patterns</td>
</tr>
<tr>
<td><strong>๐ Learning Logs</strong></td>
<td><code class="language-plaintext highlighter-rouge">/notes/progress/</code></td>
<td>Progress Tracking</td>
<td>Journey documentation</td>
</tr>
</tbody>
</table>
<h3 id="-interactive-learning-environments">๐ฌ Interactive Learning Environments</h3>
<ul>
<li><strong>Python Environments</strong> - Data analysis and scripting</li>
<li><strong>JavaScript Playgrounds</strong> - Frontend experimentation</li>
<li><strong>Bash Scripting Labs</strong> - System automation practice</li>
<li><strong>Data Science Workbenches</strong> - Analytics and visualization</li>
</ul>
<h2 id="-configuration--repository-structure">๐ง Configuration & Repository Structure</h2>
<h3 id="-repository-architecture">๐ Repository Architecture</h3>
<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>it-journey/
โโโ ๐ QuickStart Materials
โ โโโ _quickstart/ # Quick setup guides
โ โโโ scripts/ # Automation scripts
โโโ โ๏ธ Journey Content
โ โโโ pages/_posts/ # Chronicles (blog posts)
โ โโโ pages/_quests/ # Epic quests and challenges
โ โโโ pages/_about/ # Platform information
โโโ ๐ Library Resources
โ โโโ pages/_docs/ # Documentation collection
โ โโโ docs/ # Additional guides
โโโ ๐ Notebook Space
โ โโโ pages/_notes/ # Personal notes
โ โโโ pages/_notebooks/ # Jupyter environments
โโโ โ๏ธ Site Configuration
โ โโโ _config.yml # Main Jekyll config
โ โโโ _data/navigation/ # Site navigation
โ โโโ assets/ # Styles and media
โโโ ๐ณ Development Environment
โโโ Dockerfile # Container configuration
โโโ docker-compose.yml # Local development
โโโ .devcontainer/ # VS Code dev containers
</code></pre></div></div>
<h3 id="๏ธ-navigation-configuration">๐บ๏ธ Navigation Configuration</h3>
<p>Site navigation is managed through YAML files in <code class="language-plaintext highlighter-rouge">_data/navigation/</code>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">main.yml</code> - Primary navigation menu</li>
<li><code class="language-plaintext highlighter-rouge">quickstart.yml</code> - QuickStart section navigation</li>
<li><code class="language-plaintext highlighter-rouge">posts.yml</code> - Journey/Chronicles navigation</li>
<li><code class="language-plaintext highlighter-rouge">docs.yml</code> - Library documentation navigation</li>
<li><code class="language-plaintext highlighter-rouge">about.yml</code> - Platform information navigation</li>
</ul>
<h3 id="-critical-links--pathways">๐ Critical Links & Pathways</h3>
<h4 id="-central-hubs">๐ Central Hubs</h4>
<ul>
<li><a href="/">๐๏ธ Main Portal</a> - Primary entrance to IT-Journey</li>
<li><a href="/quests/">๐ฐ Quest Central</a> - Complete quest index and navigation</li>
<li><a href="/posts/">๐ Chronicle Archive</a> - All chronicles and blog posts</li>
<li><a href="/docs/">๐ Library Index</a> - Documentation and guides</li>
<li><a href="/notes/">๐ Personal Notebook</a> - Your learning space</li>
</ul>
<h4 id="-platform-management">๐ง Platform Management</h4>
<ul>
<li><a href="/about/config/">โ๏ธ Site Configuration</a> - Jekyll and site settings</li>
<li><a href="/about/theme/">๐จ Theme Customization</a> - Visual customization guide</li>
<li><a href="/about/contributing/">๐ค Contributing Guide</a> - How to contribute content</li>
<li><a href="/about/sitemap/">๐บ๏ธ Complete Sitemap</a> - Detailed site structure</li>
<li><a href="/about/features/">โจ Feature Overview</a> - Platform capabilities</li>
</ul>
<h4 id="-discovery-tools">๐ Discovery Tools</h4>
<ul>
<li><a href="/search/">๐ Site Search</a> - Find content across all domains</li>
<li><a href="/categories/">๐ท๏ธ All Categories</a> - Browse content by topic</li>
<li><a href="/progress/">๐ Progress Tracking</a> - Monitor your learning journey</li>
</ul>
<h3 id="๏ธ-authentication--access">๐ก๏ธ Authentication & Access</h3>
<ul>
<li><strong>Public Access</strong> - Most content freely available</li>
<li><strong>GitHub Integration</strong> - Authentication for interactive features</li>
<li><strong>Personal Spaces</strong> - Private notebook areas (logged-in users)</li>
<li><strong>Contribution Access</strong> - GitHub account required for content submission</li>
</ul>
<h2 id="-quick-start-navigation-commands">๐ Quick Start Navigation Commands</h2>
<h3 id="-for-complete-beginners">๐ฏ For Complete Beginners</h3>
<ol>
<li><strong>Start Here:</strong> <a href="/quests/init_world/hello-noob/">Hello n00b Quest</a></li>
<li><strong>Setup Environment:</strong> <a href="/quickstart/machine-setup/">Machine Setup Guide</a></li>
<li><strong>Choose Platform:</strong> <a href="/quests/lvl_000/os-selection/">OS Selection Quest</a></li>
<li><strong>Begin Journey:</strong> <a href="/quests/character-building/">Character Creation</a></li>
</ol>
<h3 id="-for-experienced-developers">โก For Experienced Developers</h3>
<ol>
<li><strong>Skill Assessment:</strong> <a href="/quests/#level-progression-system">Browse Quest Levels</a></li>
<li><strong>Specialization:</strong> <a href="/quests/frontend/">Choose Frontend</a> or <a href="/quests/lvl_001/">Backend Path</a></li>
<li><strong>Advanced Challenges:</strong> <a href="/quests/lvl_0010/">Level 010 Quests</a></li>
<li><strong>Contribute Content:</strong> <a href="/about/contributing/">Contributing Guide</a></li>
</ol>
<h3 id="-for-system-administrators">๐ง For System Administrators</h3>
<ol>
<li><strong>Platform Setup:</strong> <a href="/about/config/">Configuration Guide</a></li>
<li><strong>Docker Environment:</strong> <a href="/posts/dockering-your-it-journey/">Container Setup</a></li>
<li><strong>CI/CD Integration:</strong> <a href="/debugging-github-actions-workflows-ai-assisted/">GitHub Actions</a></li>
<li><strong>Monitoring:</strong> <a href="/about/features/">Site Analytics</a></li>
</ol>
<h2 id="-hidden-treasures--advanced-features">๐ Hidden Treasures & Advanced Features</h2>
<h3 id="-easter-eggs--special-content">๐ฎ Easter Eggs & Special Content</h3>
<ul>
<li><strong>Developer Tools</strong> - Hidden productivity enhancements</li>
<li><strong>Advanced Configurations</strong> - Power user customizations</li>
<li><strong>Experimental Features</strong> - Beta functionality and previews</li>
<li><strong>Community Challenges</strong> - Collaborative quests and competitions</li>
</ul>
<h3 id="-interactive-elements">๐ฎ Interactive Elements</h3>
<ul>
<li><strong>Progress Tracking</strong> - Automated quest completion monitoring</li>
<li><strong>Achievement System</strong> - Badges and recognition for milestones</li>
<li><strong>Community Features</strong> - Discussion and collaboration tools</li>
<li><strong>AI Integration</strong> - Smart content recommendations</li>
</ul>
<hr />
<p><em>This world map is a living document that evolves with the IT-Journey platform. Bookmark this page for quick navigation, and remember: every expert was once a beginner who refused to give up after their first segmentation fault.</em></p>
<p><strong>Legend:</strong></p>
<ul>
<li>๐ฑ = n00b (absolute beginner)</li>
<li>๐ข = Easy (basic knowledge required)</li>
<li>๐ก = Medium (some experience helpful)</li>
<li>๐ด = Hard (advanced skills needed)</li>
<li>โ๏ธ = Epic (expert-level challenges)</li>
</ul>
<p><em>May your code compile, your deployments succeed, and your documentation actually match your implementation!</em> โกโจ</p>
</div>
</main>
</div>
</main>
</article>
Quest Discovery and Recommendation System
// quest-engine.js - Quest recommendation and mapping system
class QuestEngine {
constructor(questData) {
this.quests = questData;
this.questMap = this.buildQuestMap();
}
buildQuestMap() {
const map = new Map();
this.quests.forEach(quest => {
map.set(quest.permalink, {
...quest,
prerequisites: this.resolveQuestReferences(quest.quest_dependencies?.required_quests || []),
unlocks: this.resolveQuestReferences(quest.quest_dependencies?.unlocks_quests || []),
children: this.resolveQuestReferences(quest.quest_relationships?.child_quests || []),
parent: quest.quest_relationships?.parent_quest || null
});
});
return map;
}
getAvailableQuests(completedQuests) {
return Array.from(this.questMap.values()).filter(quest => {
// Check if all prerequisites are completed
const prerequisitesMet = quest.prerequisites.every(prereq =>
completedQuests.includes(prereq.permalink)
);
// Not already completed
const notCompleted = !completedQuests.includes(quest.permalink);
return prerequisitesMet && notCompleted;
});
}
getRecommendedNextQuests(currentQuest, completedQuests) {
const quest = this.questMap.get(currentQuest);
if (!quest) return [];
// Get unlocked quests that are available
return quest.unlocks.filter(unlock => {
const unlockQuest = this.questMap.get(unlock.permalink);
return this.isQuestAvailable(unlockQuest, completedQuests);
});
}
generateQuestPath(startQuest, targetQuest) {
// Implement pathfinding algorithm to find learning path
// between any two quests in the network
}
validateQuestNetwork() {
// Check for circular dependencies, orphaned quests, etc.
const issues = [];
this.questMap.forEach((quest, permalink) => {
// Check for circular dependencies
if (this.hasCircularDependency(permalink)) {
issues.push(`Circular dependency detected for ${permalink}`);
}
// Check for broken references
quest.prerequisites.forEach(prereq => {
if (!this.questMap.has(prereq.permalink)) {
issues.push(`Broken prerequisite reference: ${prereq.permalink} in ${permalink}`);
}
});
});
return issues;
}
}
// Usage example
const questEngine = new QuestEngine(questData);
const availableQuests = questEngine.getAvailableQuests(userCompletedQuests);
const recommendations = questEngine.getRecommendedNextQuests(currentQuest, userCompletedQuests);
const networkIssues = questEngine.validateQuestNetwork();
CSS Styling for Quest Types
/* quest-styles.css - Visual styling for different quest types */
.quest {
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid;
}
.quest.main_quest {
border-left-color: #87ceeb;
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}
.quest.side_quest {
border-left-color: #ffd700;
background: linear-gradient(135deg, #fffacd 0%, #fff8dc 100%);
}
.quest.bonus_quest {
border-left-color: #ff69b4;
background: linear-gradient(135deg, #ffe4e1 0%, #ffc0cb 100%);
}
.quest.epic_quest {
border-left-color: #9370db;
background: linear-gradient(135deg, #f8f8ff 0%, #e6e6fa 100%);
box-shadow: 0 4px 8px rgba(147, 112, 219, 0.3);
}
.quest-network {
background: #f9f9f9;
padding: 1rem;
border-radius: 6px;
margin: 1rem 0;
}
.quest-metadata {
display: flex;
gap: 1rem;
align-items: center;
margin: 0.5rem 0;
}
.quest-type {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-weight: bold;
font-size: 0.9rem;
}
.quest-type.main_quest {
background: #87ceeb;
color: white;
}
.quest-type.side_quest {
background: #ffd700;
color: #333;
}
.quest-type.bonus_quest {
background: #ff69b4;
color: white;
}
.quest-type.epic_quest {
background: #9370db;
color: white;
}
This comprehensive example demonstrates how the enhanced quest hierarchy system creates a sophisticated, interconnected learning ecosystem that guides learners through structured progression while maintaining flexibility for different learning styles and goals. The combination of clear quest types, dependency mapping, and visual network diagrams transforms the IT-Journey platform into a truly gamified educational adventure.