Hugging Face's logo

Spaces:
Mohammedallyl
/
bitools
Running

App Files Community
bitools
File size: 14,771 Bytes
f4feab0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b22f6fd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PowerPath — Power BI Developer Roadmap</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>

<!-- ═══════════════════════════════════════════════════════════
     TOP NAVIGATION BAR
═══════════════════════════════════════════════════════════════ -->
<nav id="topnav" class="topnav">
  <div class="nav-brand">
    <span class="nav-logo">⬡</span>
    <span class="nav-title">PowerPath</span>
  </div>
  <ul class="nav-links" id="navLinks">
    <li><a href="#" class="nav-link active" data-target="overview">Overview</a></li>
    <li><a href="#" class="nav-link" data-target="coretools">Core Tools</a></li>
    <li><a href="#" class="nav-link" data-target="datasources">Data Sources</a></li>
    <li><a href="#" class="nav-link" data-target="transformation">Modeling</a></li>
    <li><a href="#" class="nav-link" data-target="dax">DAX</a></li>
    <li><a href="#" class="nav-link" data-target="visualization">Visuals</a></li>
    <li><a href="#" class="nav-link" data-target="performance">Performance</a></li>
    <li><a href="#" class="nav-link" data-target="deployment">Governance</a></li>
    <li><a href="#" class="nav-link" data-target="automation">Automation</a></li>
    <li><a href="#" class="nav-link" data-target="cloud">Cloud</a></li>
    <li><a href="#" class="nav-link" data-target="versioncontrol">Version Control</a></li>
    <li><a href="#" class="nav-link" data-target="hiring">Hiring</a></li>
  </ul>
  <div class="nav-progress-bar"><div class="nav-progress-fill" id="progressFill"></div></div>
</nav>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 1 — OVERVIEW / HERO
═══════════════════════════════════════════════════════════════ -->
<section id="overview" class="page active">
  <div class="hero-bg"></div>
  <div class="hero-content">
    <div class="hero-badge">Enterprise Learning Platform</div>
    <h1 class="hero-title">Power BI<span class="hero-accent">Developer</span><br/>Roadmap</h1>
    <p class="hero-sub">A comprehensive, job-ready learning path covering every tool, technique, and best practice a Power BI Developer needs — from first query to enterprise governance.</p>
    <div class="hero-stats">
      <div class="stat-card"><span class="stat-num">40+</span><span class="stat-label">Tools Covered</span></div>
      <div class="stat-card"><span class="stat-num">12</span><span class="stat-label">Learning Modules</span></div>
      <div class="stat-card"><span class="stat-num">3</span><span class="stat-label">Skill Levels</span></div>
      <div class="stat-card"><span class="stat-num">100%</span><span class="stat-label">Job-Ready</span></div>
    </div>
    <div class="hero-path">
      <div class="path-step active-step"><span class="path-icon">◆</span><span>Core Tools</span></div>
      <div class="path-arrow">→</div>
      <div class="path-step"><span class="path-icon">◆</span><span>Data & Modeling</span></div>
      <div class="path-arrow">→</div>
      <div class="path-step"><span class="path-icon">◆</span><span>DAX & Analytics</span></div>
      <div class="path-arrow">→</div>
      <div class="path-step"><span class="path-icon">◆</span><span>Enterprise</span></div>
    </div>
    <button class="hero-cta" data-target="coretools">Begin Your Roadmap →</button>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     HELPER: TOOL CARD TEMPLATE (used via JS)
     Each section injects cards dynamically for clean architecture
═══════════════════════════════════════════════════════════════ -->

<!-- ═══════════════════════════════════════════════════════════
     SECTION 2 — CORE POWER BI TOOLS
═══════════════════════════════════════════════════════════════ -->
<section id="coretools" class="page">
  <div class="page-header">
    <span class="page-badge">Module 01</span>
    <h2 class="page-title">Core Power BI Tools</h2>
    <p class="page-desc">The foundational applications every Power BI Developer must master before building anything enterprise-scale.</p>
  </div>
  <div class="cards-grid" id="coretoolsGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 3 — DATA SOURCES & DATABASES
═══════════════════════════════════════════════════════════════ -->
<section id="datasources" class="page">
  <div class="page-header">
    <span class="page-badge">Module 02</span>
    <h2 class="page-title">Data Sources & Databases</h2>
    <p class="page-desc">Connect, ingest, and understand the diverse data ecosystems Power BI pulls from in real enterprise environments.</p>
  </div>
  <div class="cards-grid" id="datasourcesGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 4 — DATA TRANSFORMATION & MODELING
═══════════════════════════════════════════════════════════════ -->
<section id="transformation" class="page">
  <div class="page-header">
    <span class="page-badge">Module 03</span>
    <h2 class="page-title">Transformation & Modeling</h2>
    <p class="page-desc">Shape raw data into clean, performant models. This is where Power BI separates analysts from developers.</p>
  </div>
  <div class="cards-grid" id="transformationGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 5 — DAX & ANALYTICS
═══════════════════════════════════════════════════════════════ -->
<section id="dax" class="page">
  <div class="page-header">
    <span class="page-badge">Module 04</span>
    <h2 class="page-title">DAX & Analytics</h2>
    <p class="page-desc">Master the Data Analysis Expressions language — the analytical backbone of Power BI. Where logic meets data.</p>
  </div>
  <div class="cards-grid" id="daxGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 6 — VISUALIZATION & UI
═══════════════════════════════════════════════════════════════ -->
<section id="visualization" class="page">
  <div class="page-header">
    <span class="page-badge">Module 05</span>
    <h2 class="page-title">Visualization & UI</h2>
    <p class="page-desc">Turn numbers into stories. Build visuals that communicate insight clearly and beautifully to stakeholders.</p>
  </div>
  <div class="cards-grid" id="visualizationGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 7 — PERFORMANCE OPTIMIZATION
═══════════════════════════════════════════════════════════════ -->
<section id="performance" class="page">
  <div class="page-header">
    <span class="page-badge">Module 06</span>
    <h2 class="page-title">Performance Optimization</h2>
    <p class="page-desc">Enterprise reports must load in seconds, not minutes. Master every lever available to tune Power BI for scale.</p>
  </div>
  <div class="cards-grid" id="performanceGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 8 — DEPLOYMENT & GOVERNANCE
═══════════════════════════════════════════════════════════════ -->
<section id="deployment" class="page">
  <div class="page-header">
    <span class="page-badge">Module 07</span>
    <h2 class="page-title">Deployment & Governance</h2>
    <p class="page-desc">Move beyond personal dashboards. Learn how enterprises deploy, secure, and govern Power BI at scale.</p>
  </div>
  <div class="cards-grid" id="deploymentGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 9 — AUTOMATION & DEVOPS
═══════════════════════════════════════════════════════════════ -->
<section id="automation" class="page">
  <div class="page-header">
    <span class="page-badge">Module 08</span>
    <h2 class="page-title">Automation & DevOps</h2>
    <p class="page-desc">Automate workflows, integrate APIs, and bring CI/CD practices into your Power BI development lifecycle.</p>
  </div>
  <div class="cards-grid" id="automationGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 10 — CLOUD & MICROSOFT ECOSYSTEM
═══════════════════════════════════════════════════════════════ -->
<section id="cloud" class="page">
  <div class="page-header">
    <span class="page-badge">Module 09</span>
    <h2 class="page-title">Cloud & Microsoft Ecosystem</h2>
    <p class="page-desc">Power BI doesn't live alone. Understand the Azure and Microsoft 365 services that power enterprise BI platforms.</p>
  </div>
  <div class="cards-grid" id="cloudGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 11 — VERSION CONTROL & COLLABORATION
═══════════════════════════════════════════════════════════════ -->
<section id="versioncontrol" class="page">
  <div class="page-header">
    <span class="page-badge">Module 10</span>
    <h2 class="page-title">Version Control & Collaboration</h2>
    <p class="page-desc">Modern Power BI development is a team sport. Learn how to version, branch, review, and collaborate like a pro developer.</p>
  </div>
  <div class="cards-grid" id="versioncontrolGrid"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     SECTION 12 — MUST-LEARN TOOLS TO GET HIRED
═══════════════════════════════════════════════════════════════ -->
<section id="hiring" class="page">
  <div class="page-header">
    <span class="page-badge">Final Module</span>
    <h2 class="page-title">Must-Learn Tools to Get Hired</h2>
    <p class="page-desc">Hiring insights from real enterprise companies. Know exactly what interviewers look for — ranked by importance and frequency.</p>
  </div>
  <div class="hiring-layout">
    <div class="hiring-tier tier-must" id="tierMust">
      <div class="tier-header"><span class="tier-icon">★</span><span>Must Know</span></div>
      <div class="tier-items" id="tierMustItems"></div>
    </div>
    <div class="hiring-tier tier-nice" id="tierNice">
      <div class="tier-header"><span class="tier-icon">◆</span><span>Nice to Have</span></div>
      <div class="tier-items" id="tierNiceItems"></div>
    </div>
    <div class="hiring-tier tier-edge" id="tierEdge">
      <div class="tier-header"><span class="tier-icon">◇</span><span>Competitive Edge</span></div>
      <div class="tier-items" id="tierEdgeItems"></div>
    </div>
  </div>
  <div class="hiring-insights">
    <h3 class="insights-title">Real Company Hiring Signals</h3>
    <div class="insights-grid" id="insightsGrid"></div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     MODAL — Tool Detail Expansion
═══════════════════════════════════════════════════════════════ -->
<div class="modal-overlay" id="modalOverlay">
  <div class="modal-box" id="modalBox">
    <button class="modal-close" id="modalClose">✕</button>
    <div class="modal-content" id="modalContent"></div>
  </div>
</div>

<script src="app.js"></script>
</body>
</html>