Soha85 commited on
Commit
6effa3f
·
verified ·
1 Parent(s): 2ce1696

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +1450 -18
index.html CHANGED
@@ -1,19 +1,1451 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PM Pro — Project Management Visual Learning Guide</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --ink: #0d0d0d;
12
+ --paper: #f5f0e8;
13
+ --cream: #ede7d9;
14
+ --accent: #c8410a;
15
+ --gold: #d4a017;
16
+ --teal: #1a7a6e;
17
+ --blue: #1a3a6e;
18
+ --muted: #7a6e60;
19
+ --card: #ffffff;
20
+ --border: rgba(13,13,13,0.12);
21
+ --shadow: 0 4px 30px rgba(13,13,13,0.08);
22
+ }
23
+
24
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
25
+
26
+ html { scroll-behavior: smooth; }
27
+
28
+ body {
29
+ background: var(--paper);
30
+ color: var(--ink);
31
+ font-family: 'DM Sans', sans-serif;
32
+ font-weight: 400;
33
+ line-height: 1.6;
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ /* ── NAV ── */
38
+ nav {
39
+ position: fixed; top: 0; left: 0; right: 0; z-index: 100;
40
+ background: rgba(245,240,232,0.92);
41
+ backdrop-filter: blur(12px);
42
+ border-bottom: 2px solid var(--ink);
43
+ display: flex; align-items: center; justify-content: space-between;
44
+ padding: 0 2rem; height: 56px;
45
+ }
46
+ .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 2px; color: var(--accent); }
47
+ .nav-links { display: flex; gap: 1.5rem; list-style: none; }
48
+ .nav-links a { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); text-decoration: none; opacity: 0.7; transition: opacity .2s; }
49
+ .nav-links a:hover { opacity: 1; color: var(--accent); }
50
+
51
+ /* ── HERO ── */
52
+ .hero {
53
+ min-height: 100vh;
54
+ display: grid; place-items: center;
55
+ padding: 6rem 2rem 3rem;
56
+ background: var(--ink);
57
+ color: var(--paper);
58
+ position: relative;
59
+ overflow: hidden;
60
+ }
61
+ .hero-grid {
62
+ position: absolute; inset: 0;
63
+ background-image: linear-gradient(rgba(245,240,232,0.04) 1px, transparent 1px),
64
+ linear-gradient(90deg, rgba(245,240,232,0.04) 1px, transparent 1px);
65
+ background-size: 48px 48px;
66
+ }
67
+ .hero-inner { max-width: 900px; text-align: center; position: relative; z-index: 1; }
68
+ .hero-tag {
69
+ display: inline-block;
70
+ font-family: 'JetBrains Mono', monospace;
71
+ font-size: 0.72rem;
72
+ letter-spacing: 3px;
73
+ text-transform: uppercase;
74
+ color: var(--gold);
75
+ border: 1px solid var(--gold);
76
+ padding: 4px 14px;
77
+ border-radius: 2px;
78
+ margin-bottom: 1.5rem;
79
+ }
80
+ .hero h1 {
81
+ font-family: 'Bebas Neue', sans-serif;
82
+ font-size: clamp(4rem, 10vw, 8rem);
83
+ line-height: 0.95;
84
+ letter-spacing: 2px;
85
+ margin-bottom: 1.5rem;
86
+ }
87
+ .hero h1 span { color: var(--accent); }
88
+ .hero p { font-size: 1.1rem; color: rgba(245,240,232,0.65); max-width: 560px; margin: 0 auto 2.5rem; }
89
+ .hero-cta {
90
+ display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
91
+ }
92
+ .btn {
93
+ display: inline-block;
94
+ padding: 12px 28px;
95
+ border-radius: 3px;
96
+ font-size: 0.82rem;
97
+ font-weight: 600;
98
+ letter-spacing: 1px;
99
+ text-transform: uppercase;
100
+ text-decoration: none;
101
+ transition: transform .2s, box-shadow .2s;
102
+ }
103
+ .btn:hover { transform: translateY(-2px); }
104
+ .btn-primary { background: var(--accent); color: white; }
105
+ .btn-outline { border: 2px solid var(--paper); color: var(--paper); }
106
+ .hero-scroll {
107
+ position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
108
+ font-family: 'JetBrains Mono', monospace;
109
+ font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
110
+ color: rgba(245,240,232,0.35);
111
+ display: flex; flex-direction: column; align-items: center; gap: 8px;
112
+ }
113
+ .scroll-line { width: 1px; height: 40px; background: rgba(245,240,232,0.2); animation: scrollPulse 2s ease-in-out infinite; }
114
+ @keyframes scrollPulse { 0%,100%{opacity:.2} 50%{opacity:.8} }
115
+
116
+ /* ── SECTION COMMON ── */
117
+ section { padding: 6rem 2rem; }
118
+ .section-inner { max-width: 1100px; margin: 0 auto; }
119
+ .section-tag {
120
+ font-family: 'JetBrains Mono', monospace;
121
+ font-size: 0.68rem;
122
+ letter-spacing: 3px;
123
+ text-transform: uppercase;
124
+ color: var(--accent);
125
+ margin-bottom: 0.5rem;
126
+ display: block;
127
+ }
128
+ .section-title {
129
+ font-family: 'DM Serif Display', serif;
130
+ font-size: clamp(2rem, 4vw, 3.2rem);
131
+ line-height: 1.15;
132
+ margin-bottom: 1rem;
133
+ }
134
+ .section-desc { font-size: 1rem; color: var(--muted); max-width: 640px; margin-bottom: 3rem; line-height: 1.7; }
135
+ .divider { width: 48px; height: 3px; background: var(--accent); margin: 1rem 0 2rem; }
136
+
137
+ /* ── WHAT IS PM ── */
138
+ #foundation { background: var(--paper); }
139
+ .triangle-grid {
140
+ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 3rem;
141
+ }
142
+ .triangle-card {
143
+ background: var(--card);
144
+ border: 2px solid var(--ink);
145
+ border-radius: 4px;
146
+ padding: 2rem;
147
+ position: relative;
148
+ overflow: hidden;
149
+ transition: transform .25s;
150
+ }
151
+ .triangle-card:hover { transform: translateY(-4px); }
152
+ .triangle-card::before {
153
+ content: '';
154
+ position: absolute; top: 0; left: 0;
155
+ width: 100%; height: 4px;
156
+ }
157
+ .triangle-card:nth-child(1)::before { background: var(--accent); }
158
+ .triangle-card:nth-child(2)::before { background: var(--teal); }
159
+ .triangle-card:nth-child(3)::before { background: var(--gold); }
160
+ .tc-icon { font-size: 2.4rem; margin-bottom: 0.8rem; }
161
+ .tc-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 1px; margin-bottom: 0.6rem; }
162
+ .tc-body { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
163
+
164
+ /* ITO Model */
165
+ .ito-wrap {
166
+ background: var(--ink);
167
+ color: var(--paper);
168
+ border-radius: 8px;
169
+ padding: 3rem;
170
+ display: flex; align-items: center; gap: 0;
171
+ overflow: hidden;
172
+ }
173
+ .ito-block {
174
+ flex: 1;
175
+ padding: 1.5rem;
176
+ text-align: center;
177
+ position: relative;
178
+ }
179
+ .ito-block + .ito-block::before {
180
+ content: '→';
181
+ position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
182
+ font-size: 2rem; color: var(--accent);
183
+ }
184
+ .ito-label {
185
+ font-family: 'JetBrains Mono', monospace;
186
+ font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase;
187
+ color: var(--gold); margin-bottom: 0.5rem;
188
+ }
189
+ .ito-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 1px; margin-bottom: 0.5rem; }
190
+ .ito-example { font-size: 0.8rem; color: rgba(245,240,232,0.5); font-style: italic; }
191
+
192
+ /* ── PROCESS GROUPS ── */
193
+ #process { background: var(--cream); }
194
+ .timeline {
195
+ position: relative;
196
+ padding-left: 3rem;
197
+ }
198
+ .timeline::before {
199
+ content: '';
200
+ position: absolute; left: 11px; top: 0; bottom: 0;
201
+ width: 2px;
202
+ background: linear-gradient(var(--accent), var(--teal));
203
+ }
204
+ .tl-item {
205
+ position: relative;
206
+ padding: 0 0 3rem 2rem;
207
+ opacity: 0;
208
+ transform: translateX(-20px);
209
+ transition: opacity .6s, transform .6s;
210
+ }
211
+ .tl-item.visible { opacity: 1; transform: translateX(0); }
212
+ .tl-dot {
213
+ position: absolute; left: -30px; top: 4px;
214
+ width: 24px; height: 24px; border-radius: 50%;
215
+ border: 3px solid var(--ink);
216
+ display: grid; place-items: center;
217
+ font-family: 'Bebas Neue', sans-serif;
218
+ font-size: 0.75rem;
219
+ }
220
+ .tl-dot-1 { background: var(--accent); color: white; }
221
+ .tl-dot-2 { background: var(--gold); color: var(--ink); }
222
+ .tl-dot-3 { background: var(--teal); color: white; }
223
+ .tl-dot-4 { background: var(--blue); color: white; }
224
+ .tl-dot-5 { background: var(--muted); color: white; }
225
+ .tl-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
226
+ .tl-num { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 2px; color: var(--muted); }
227
+ .tl-name { font-family: 'DM Serif Display', serif; font-size: 1.5rem; }
228
+ .tl-sub { font-size: 0.8rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
229
+ .tl-body { font-size: 0.9rem; color: var(--muted); margin: 0.5rem 0 1rem; }
230
+ .outputs-list {
231
+ display: flex; flex-wrap: wrap; gap: 8px;
232
+ }
233
+ .output-tag {
234
+ background: white;
235
+ border: 1.5px solid var(--border);
236
+ padding: 4px 12px;
237
+ border-radius: 20px;
238
+ font-size: 0.75rem;
239
+ font-weight: 600;
240
+ color: var(--ink);
241
+ }
242
+
243
+ /* ── EVM ── */
244
+ #evm { background: var(--ink); color: var(--paper); }
245
+ #evm .section-title { color: var(--paper); }
246
+ #evm .section-desc { color: rgba(245,240,232,.6); }
247
+ #evm .divider { background: var(--gold); }
248
+ .evm-grid {
249
+ display: grid;
250
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
251
+ gap: 1px;
252
+ background: rgba(245,240,232,0.1);
253
+ border: 1px solid rgba(245,240,232,0.1);
254
+ border-radius: 6px;
255
+ overflow: hidden;
256
+ margin-bottom: 3rem;
257
+ }
258
+ .evm-card {
259
+ background: rgba(255,255,255,0.04);
260
+ padding: 1.5rem;
261
+ transition: background .2s;
262
+ }
263
+ .evm-card:hover { background: rgba(255,255,255,0.09); }
264
+ .evm-acronym { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: 1px; }
265
+ .evm-full { font-size: 0.72rem; color: rgba(245,240,232,.4); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8rem; }
266
+ .evm-formula {
267
+ font-family: 'JetBrains Mono', monospace;
268
+ font-size: 0.85rem;
269
+ background: rgba(245,240,232,0.08);
270
+ padding: 6px 10px;
271
+ border-radius: 4px;
272
+ margin-bottom: 0.8rem;
273
+ color: var(--gold);
274
+ }
275
+ .evm-good { font-size: 0.78rem; color: #5fd48a; }
276
+ .evm-bad { font-size: 0.78rem; color: #f05e5e; }
277
+ .evm-interp { font-size: 0.8rem; color: rgba(245,240,232,.55); margin-top: 0.4rem; }
278
+ .evm-legend {
279
+ display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;
280
+ padding: 1.5rem;
281
+ background: rgba(255,255,255,0.04);
282
+ border-radius: 6px;
283
+ border: 1px solid rgba(245,240,232,0.1);
284
+ }
285
+ .leg-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
286
+ .leg-dot { width: 10px; height: 10px; border-radius: 50%; }
287
+
288
+ /* ── RISK ── */
289
+ #risk { background: var(--paper); }
290
+ .risk-matrix {
291
+ display: grid;
292
+ grid-template-columns: 40px repeat(4, 1fr);
293
+ grid-template-rows: repeat(4, 1fr) 40px;
294
+ gap: 3px;
295
+ width: 100%;
296
+ max-width: 520px;
297
+ aspect-ratio: 1;
298
+ margin: 0 auto 2rem;
299
+ }
300
+ .rm-cell {
301
+ border-radius: 3px;
302
+ display: grid; place-items: center;
303
+ font-size: 0.7rem; font-weight: 700;
304
+ color: white;
305
+ text-align: center;
306
+ }
307
+ .rm-label { background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 600; }
308
+ .rm-low { background: #5fd48a; color: #0a2e14; }
309
+ .rm-med { background: var(--gold); color: #2e1a00; }
310
+ .rm-high { background: var(--accent); }
311
+ .rm-crit { background: #8b0000; }
312
+ .rm-axis-y {
313
+ writing-mode: vertical-lr;
314
+ transform: rotate(180deg);
315
+ text-align: center;
316
+ font-size: 0.68rem;
317
+ font-weight: 700;
318
+ letter-spacing: 2px;
319
+ text-transform: uppercase;
320
+ color: var(--muted);
321
+ grid-column: 1;
322
+ grid-row: 1 / 5;
323
+ }
324
+ .rm-axis-x {
325
+ font-size: 0.68rem; font-weight: 700; letter-spacing: 2px;
326
+ text-transform: uppercase; color: var(--muted); text-align: center;
327
+ grid-column: 2 / 6;
328
+ }
329
+ .risk-responses {
330
+ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
331
+ }
332
+ .resp-card {
333
+ background: var(--card);
334
+ border: 2px solid var(--border);
335
+ border-radius: 6px;
336
+ padding: 1.5rem;
337
+ }
338
+ .resp-card h4 {
339
+ font-family: 'Bebas Neue', sans-serif;
340
+ font-size: 1.1rem; letter-spacing: 1px;
341
+ margin-bottom: 1rem;
342
+ padding-bottom: 0.5rem;
343
+ border-bottom: 2px solid;
344
+ }
345
+ .resp-card.threats h4 { border-color: var(--accent); color: var(--accent); }
346
+ .resp-card.opps h4 { border-color: var(--teal); color: var(--teal); }
347
+ .resp-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0.7rem; font-size: 0.85rem; }
348
+ .resp-icon { font-size: 1rem; flex-shrink: 0; }
349
+ .resp-name { font-weight: 700; display: block; }
350
+ .resp-desc { color: var(--muted); font-size: 0.78rem; }
351
+
352
+ /* ── AGILE ── */
353
+ #agile { background: var(--cream); }
354
+ .scrum-board {
355
+ display: grid;
356
+ grid-template-columns: 1fr 1fr 1fr;
357
+ gap: 1rem;
358
+ margin-bottom: 3rem;
359
+ }
360
+ .scrum-col {
361
+ background: white;
362
+ border-radius: 6px;
363
+ overflow: hidden;
364
+ border: 2px solid var(--border);
365
+ }
366
+ .scrum-col-header {
367
+ padding: 1rem;
368
+ font-family: 'Bebas Neue', sans-serif;
369
+ font-size: 1rem; letter-spacing: 1px;
370
+ text-align: center;
371
+ }
372
+ .col-roles .scrum-col-header { background: var(--blue); color: white; }
373
+ .col-events .scrum-col-header { background: var(--teal); color: white; }
374
+ .col-artifacts .scrum-col-header { background: var(--accent); color: white; }
375
+ .scrum-item {
376
+ padding: 0.75rem 1rem;
377
+ border-top: 1px solid var(--border);
378
+ font-size: 0.85rem;
379
+ }
380
+ .scrum-item strong { display: block; font-weight: 700; font-size: 0.82rem; }
381
+ .scrum-item span { font-size: 0.75rem; color: var(--muted); }
382
+
383
+ /* Sprint cycle */
384
+ .sprint-cycle {
385
+ display: flex;
386
+ gap: 0;
387
+ border: 2px solid var(--ink);
388
+ border-radius: 6px;
389
+ overflow: hidden;
390
+ margin-bottom: 3rem;
391
+ }
392
+ .sprint-step {
393
+ flex: 1; padding: 1.2rem 0.8rem; text-align: center;
394
+ position: relative;
395
+ }
396
+ .sprint-step + .sprint-step { border-left: 1px solid var(--border); }
397
+ .sprint-step::after {
398
+ content: '→';
399
+ position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
400
+ font-size: 1.2rem; color: var(--muted); z-index: 1;
401
+ }
402
+ .sprint-step:last-child::after { display: none; }
403
+ .ss-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
404
+ .ss-name { font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 0.3rem; }
405
+ .ss-time { font-size: 0.68rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
406
+
407
+ /* Burndown SVG */
408
+ .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
409
+ .chart-card {
410
+ background: white;
411
+ border: 2px solid var(--border);
412
+ border-radius: 6px;
413
+ padding: 1.5rem;
414
+ }
415
+ .chart-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 1rem; }
416
+ .chart-svg { width: 100%; }
417
+
418
+ /* ── PERFORMANCE DOMAINS ── */
419
+ #domains { background: var(--ink); color: var(--paper); }
420
+ #domains .section-title { color: var(--paper); }
421
+ #domains .section-desc { color: rgba(245,240,232,.6); }
422
+ #domains .divider { background: var(--teal); }
423
+ .domains-grid {
424
+ display: grid;
425
+ grid-template-columns: repeat(4, 1fr);
426
+ gap: 1px;
427
+ background: rgba(245,240,232,0.1);
428
+ border: 1px solid rgba(245,240,232,0.1);
429
+ border-radius: 8px;
430
+ overflow: hidden;
431
+ }
432
+ .domain-card {
433
+ padding: 1.8rem 1.2rem;
434
+ background: rgba(255,255,255,0.03);
435
+ transition: background .25s;
436
+ cursor: default;
437
+ }
438
+ .domain-card:hover { background: rgba(255,255,255,0.08); }
439
+ .domain-num {
440
+ font-family: 'Bebas Neue', sans-serif;
441
+ font-size: 3rem; line-height: 1;
442
+ color: rgba(245,240,232,0.06);
443
+ margin-bottom: 0.5rem;
444
+ }
445
+ .domain-icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
446
+ .domain-name { font-family: 'DM Serif Display', serif; font-size: 1rem; margin-bottom: 0.5rem; }
447
+ .domain-desc { font-size: 0.78rem; color: rgba(245,240,232,.45); line-height: 1.5; }
448
+
449
+ /* ── QUALITY ── */
450
+ #quality { background: var(--paper); }
451
+ .quality-funnel {
452
+ display: flex; flex-direction: column; align-items: center; gap: 0; margin: 2rem auto;
453
+ max-width: 560px;
454
+ }
455
+ .qf-layer {
456
+ width: 100%;
457
+ padding: 1.2rem 2rem;
458
+ text-align: center;
459
+ border-radius: 4px;
460
+ transition: transform .2s;
461
+ }
462
+ .qf-layer:hover { transform: scale(1.02); }
463
+ .qf-layer-1 { background: var(--blue); color: white; width: 100%; }
464
+ .qf-layer-2 { background: var(--teal); color: white; width: 85%; }
465
+ .qf-layer-3 { background: var(--accent); color: white; width: 70%; }
466
+ .qf-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 1px; }
467
+ .qf-sub { font-size: 0.78rem; opacity: 0.75; margin-top: 2px; }
468
+ .qf-arrow { font-size: 1.5rem; color: var(--muted); margin: 2px 0; }
469
+
470
+ .coq-grid {
471
+ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
472
+ }
473
+ .coq-card {
474
+ border-radius: 6px; overflow: hidden; border: 2px solid var(--border);
475
+ }
476
+ .coq-head {
477
+ padding: 1rem 1.2rem;
478
+ font-family: 'Bebas Neue', sans-serif;
479
+ font-size: 1rem; letter-spacing: 1px;
480
+ display: flex; align-items: center; gap: 0.5rem;
481
+ }
482
+ .coq-conf .coq-head { background: #e8f4ed; color: var(--teal); }
483
+ .coq-nonconf .coq-head { background: #fceae8; color: var(--accent); }
484
+ .coq-items { padding: 1rem; }
485
+ .coq-item {
486
+ display: flex; align-items: center; gap: 8px;
487
+ padding: 0.4rem 0; font-size: 0.85rem;
488
+ border-bottom: 1px solid var(--border);
489
+ }
490
+ .coq-item:last-child { border-bottom: none; }
491
+ .coq-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
492
+
493
+ /* ── CONTRACTS ── */
494
+ #contracts { background: var(--cream); }
495
+ .contract-table {
496
+ width: 100%; border-collapse: collapse; background: white;
497
+ border-radius: 8px; overflow: hidden;
498
+ box-shadow: var(--shadow);
499
+ margin-top: 2rem;
500
+ }
501
+ .contract-table th {
502
+ background: var(--ink); color: var(--paper);
503
+ padding: 1rem; font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 1px;
504
+ text-align: left;
505
+ }
506
+ .contract-table td { padding: 0.9rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
507
+ .contract-table tr:last-child td { border-bottom: none; }
508
+ .contract-table tr:nth-child(even) td { background: #fafafa; }
509
+ .risk-badge {
510
+ display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700;
511
+ }
512
+ .risk-low { background: #e8f4ed; color: var(--teal); }
513
+ .risk-med { background: #fef3e2; color: #b45309; }
514
+ .risk-high { background: #fceae8; color: var(--accent); }
515
+
516
+ /* ── STAKEHOLDER ── */
517
+ #stakeholder { background: var(--paper); }
518
+ .engagement-matrix {
519
+ display: grid;
520
+ grid-template-columns: 80px 1fr;
521
+ gap: 0;
522
+ max-width: 700px;
523
+ margin: 2rem 0;
524
+ border: 2px solid var(--ink);
525
+ border-radius: 6px;
526
+ overflow: hidden;
527
+ }
528
+ .em-axis {
529
+ background: var(--ink); color: var(--paper);
530
+ display: grid; place-items: center;
531
+ writing-mode: vertical-lr; transform: rotate(180deg);
532
+ font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 2px;
533
+ }
534
+ .em-rows { }
535
+ .em-row {
536
+ display: flex; align-items: stretch;
537
+ border-bottom: 1px solid var(--border);
538
+ }
539
+ .em-row:last-child { border-bottom: none; }
540
+ .em-level {
541
+ width: 120px; flex-shrink: 0;
542
+ padding: 1rem; font-weight: 700; font-size: 0.82rem;
543
+ display: flex; align-items: center;
544
+ border-right: 1px solid var(--border);
545
+ }
546
+ .em-desc { padding: 1rem; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; }
547
+ .em-dot {
548
+ width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex-shrink: 0;
549
+ }
550
+ /* Communication formula */
551
+ .comm-formula {
552
+ background: var(--ink);
553
+ color: var(--paper);
554
+ border-radius: 8px;
555
+ padding: 2rem;
556
+ display: flex; align-items: center; justify-content: center; gap: 2rem;
557
+ flex-wrap: wrap;
558
+ margin-top: 2rem;
559
+ }
560
+ .cf-part { text-align: center; }
561
+ .cf-big { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--gold); }
562
+ .cf-small { font-size: 0.72rem; color: rgba(245,240,232,.5); letter-spacing: 1px; text-transform: uppercase; }
563
+ .cf-op { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: rgba(245,240,232,.3); }
564
+
565
+ /* ── FOOTER ── */
566
+ footer {
567
+ background: var(--ink); color: rgba(245,240,232,.5);
568
+ padding: 3rem 2rem; text-align: center;
569
+ font-size: 0.82rem;
570
+ }
571
+ footer strong { color: var(--paper); }
572
+ footer .footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; }
573
+
574
+ /* ── RESPONSIVE ── */
575
+ @media (max-width: 768px) {
576
+ .triangle-grid { grid-template-columns: 1fr; }
577
+ .ito-wrap { flex-direction: column; gap: 1rem; }
578
+ .ito-block + .ito-block::before { content: '↓'; left: 50%; top: -18px; }
579
+ .risk-responses { grid-template-columns: 1fr; }
580
+ .scrum-board { grid-template-columns: 1fr; }
581
+ .domains-grid { grid-template-columns: 1fr 1fr; }
582
+ .charts-row { grid-template-columns: 1fr; }
583
+ .coq-grid { grid-template-columns: 1fr; }
584
+ .nav-links { display: none; }
585
+ .sprint-cycle { flex-direction: column; }
586
+ .sprint-step::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -14px; }
587
+ .sprint-step { border-left: none !important; border-top: 1px solid var(--border); }
588
+ .sprint-step:first-child { border-top: none; }
589
+ }
590
+
591
+ /* ── ANIMATIONS ── */
592
+ .fade-up {
593
+ opacity: 0; transform: translateY(30px);
594
+ transition: opacity .7s ease, transform .7s ease;
595
+ }
596
+ .fade-up.visible { opacity: 1; transform: translateY(0); }
597
+ [class*="delay-1"] { transition-delay: 0.1s !important; }
598
+ [class*="delay-2"] { transition-delay: 0.2s !important; }
599
+ [class*="delay-3"] { transition-delay: 0.3s !important; }
600
+ [class*="delay-4"] { transition-delay: 0.4s !important; }
601
+ </style>
602
+ </head>
603
+ <body>
604
+
605
+ <!-- NAV -->
606
+ <nav>
607
+ <span class="nav-logo">PM·PRO</span>
608
+ <ul class="nav-links">
609
+ <li><a href="#foundation">Foundation</a></li>
610
+ <li><a href="#process">Process</a></li>
611
+ <li><a href="#domains">Domains</a></li>
612
+ <li><a href="#evm">EVM</a></li>
613
+ <li><a href="#risk">Risk</a></li>
614
+ <li><a href="#agile">Agile</a></li>
615
+ <li><a href="#quality">Quality</a></li>
616
+ <li><a href="#contracts">Contracts</a></li>
617
+ </ul>
618
+ </nav>
619
+
620
+ <!-- HERO -->
621
+ <section class="hero">
622
+ <div class="hero-grid"></div>
623
+ <div class="hero-inner">
624
+ <div class="hero-tag">// Visual Learning Guide</div>
625
+ <h1>Project<br>Management<br><span>Pro</span></h1>
626
+ <p>A visual, interactive reference for modern project leaders — from ITO models to Earned Value, Agile to Risk. Built for learners, by a learner.</p>
627
+ <div class="hero-cta">
628
+ <a href="#foundation" class="btn btn-primary">Start Learning</a>
629
+ <a href="#evm" class="btn btn-outline">Jump to EVM</a>
630
+ </div>
631
+ </div>
632
+ <div class="hero-scroll">
633
+ <span>Scroll</span>
634
+ <div class="scroll-line"></div>
635
+ </div>
636
+ </section>
637
+
638
+ <!-- ── FOUNDATION ── -->
639
+ <section id="foundation">
640
+ <div class="section-inner">
641
+ <span class="section-tag">// 01 — Foundation</span>
642
+ <h2 class="section-title">What is Project<br>Management?</h2>
643
+ <div class="divider"></div>
644
+ <p class="section-desc">The application of knowledge, skills, tools, and techniques to project activities to meet requirements. Every project is <strong>Temporary</strong>, <strong>Unique</strong>, and subject to <strong>Progressive Elaboration</strong>.</p>
645
+
646
+ <div class="triangle-grid">
647
+ <div class="triangle-card fade-up">
648
+ <div class="tc-icon">⏱️</div>
649
+ <div class="tc-title">Temporary</div>
650
+ <div class="tc-body">Every project has a definite start and a definite end. Unlike operations, it does not go on indefinitely.</div>
651
+ </div>
652
+ <div class="triangle-card fade-up delay-2">
653
+ <div class="tc-icon">✦</div>
654
+ <div class="tc-title">Unique</div>
655
+ <div class="tc-body">Creates a specific product, service, or result that has never been created in exactly the same way before.</div>
656
+ </div>
657
+ <div class="triangle-card fade-up delay-3">
658
+ <div class="tc-icon">🌊</div>
659
+ <div class="tc-title">Progressive Elaboration</div>
660
+ <div class="tc-body">Details become clearer as the project advances. Plans are refined in waves as understanding deepens.</div>
661
+ </div>
662
+ </div>
663
+
664
+ <!-- ITO Model -->
665
+ <span class="section-tag" style="margin-top:3rem; display:block;">// The I-T-O Model — DNA of Every Process</span>
666
+ <h3 class="section-title" style="font-size:1.8rem; margin-bottom:1.5rem;">Inputs → Tools & Techniques → Outputs</h3>
667
+ <div class="ito-wrap fade-up">
668
+ <div class="ito-block">
669
+ <div class="ito-label">Component A</div>
670
+ <div class="ito-title">INPUT</div>
671
+ <div class="ito-example">Business Case · Agreements · EEFs · OPAs</div>
672
+ </div>
673
+ <div class="ito-block">
674
+ <div class="ito-label">Component B</div>
675
+ <div class="ito-title">TOOLS &amp;<br>TECHNIQUES</div>
676
+ <div class="ito-example">Expert Judgment · Data Gathering · Meetings</div>
677
+ </div>
678
+ <div class="ito-block">
679
+ <div class="ito-label">Component C</div>
680
+ <div class="ito-title">OUTPUT</div>
681
+ <div class="ito-example">Project Charter · Assumption Log · Stakeholder Register</div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </section>
686
+
687
+ <!-- ── PROCESS GROUPS ── -->
688
+ <section id="process">
689
+ <div class="section-inner">
690
+ <span class="section-tag">// 02 — The Lifecycle</span>
691
+ <h2 class="section-title">Five Process Groups</h2>
692
+ <div class="divider"></div>
693
+ <p class="section-desc">Process groups are <em>not</em> phases — they are logical groupings of processes that may occur at any point during the project lifecycle.</p>
694
+
695
+ <div class="timeline">
696
+
697
+ <div class="tl-item">
698
+ <div class="tl-dot tl-dot-1">1</div>
699
+ <div class="tl-header">
700
+ <span class="tl-num">INITIATING</span>
701
+ <span class="tl-name">The "Why" &amp; "Who"</span>
702
+ </div>
703
+ <div class="tl-sub">Authorization • Strategic Alignment</div>
704
+ <div class="tl-body">Formally authorizes the project and assigns the Project Manager. Identifies all stakeholders who can influence or be influenced by the project.</div>
705
+ <div class="outputs-list">
706
+ <span class="output-tag">Project Charter</span>
707
+ <span class="output-tag">Stakeholder Register</span>
708
+ <span class="output-tag">Assumption Log</span>
709
+ </div>
710
+ </div>
711
+
712
+ <div class="tl-item">
713
+ <div class="tl-dot tl-dot-2">2</div>
714
+ <div class="tl-header">
715
+ <span class="tl-num">PLANNING</span>
716
+ <span class="tl-name">The "How" — Most Intensive</span>
717
+ </div>
718
+ <div class="tl-sub">Performance Measurement Baseline (Scope + Schedule + Cost)</div>
719
+ <div class="tl-body">Creates the integrated PMB — the standard against which all project performance is measured. Planning is iterative, not a one-time event.</div>
720
+ <div class="outputs-list">
721
+ <span class="output-tag">WBS + WBS Dictionary</span>
722
+ <span class="output-tag">Schedule Baseline</span>
723
+ <span class="output-tag">Cost Baseline (S-Curve)</span>
724
+ <span class="output-tag">Project Management Plan</span>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="tl-item">
729
+ <div class="tl-dot tl-dot-3">3</div>
730
+ <div class="tl-header">
731
+ <span class="tl-num">EXECUTING</span>
732
+ <span class="tl-name">The "Do"</span>
733
+ </div>
734
+ <div class="tl-sub">Team Development • Quality Assurance • Stakeholder Engagement</div>
735
+ <div class="tl-body">Leading and performing the work, building team competence, managing communications, and ensuring quality processes are appropriate.</div>
736
+ <div class="outputs-list">
737
+ <span class="output-tag">Deliverables</span>
738
+ <span class="output-tag">Work Performance Data</span>
739
+ <span class="output-tag">Change Requests</span>
740
+ </div>
741
+ </div>
742
+
743
+ <div class="tl-item">
744
+ <div class="tl-dot tl-dot-4">4</div>
745
+ <div class="tl-header">
746
+ <span class="tl-num">MONITORING &amp; CONTROLLING</span>
747
+ <span class="tl-name">The "Check" — Runs in Parallel</span>
748
+ </div>
749
+ <div class="tl-sub">EVM • Integrated Change Control • Risk Monitoring</div>
750
+ <div class="tl-body">Runs concurrently with all other process groups. Compares actual results to baselines and evaluates every change request against scope, schedule, cost, and quality.</div>
751
+ <div class="outputs-list">
752
+ <span class="output-tag">Work Performance Information</span>
753
+ <span class="output-tag">Change Requests</span>
754
+ <span class="output-tag">Corrective/Preventive Actions</span>
755
+ </div>
756
+ </div>
757
+
758
+ <div class="tl-item">
759
+ <div class="tl-dot tl-dot-5">5</div>
760
+ <div class="tl-header">
761
+ <span class="tl-num">CLOSING</span>
762
+ <span class="tl-name">The "Finish"</span>
763
+ </div>
764
+ <div class="tl-sub">Administrative Closure • Lessons Learned • Knowledge Transfer</div>
765
+ <div class="tl-body">The bridge between this project and future success. Archive records, transfer deliverables, and capture the most valuable asset — experience.</div>
766
+ <div class="outputs-list">
767
+ <span class="output-tag">Final Report</span>
768
+ <span class="output-tag">Lessons Learned Register</span>
769
+ <span class="output-tag">Updated OPAs</span>
770
+ </div>
771
+ </div>
772
+
773
+ </div>
774
+ </div>
775
+ </section>
776
+
777
+ <!-- ── PERFORMANCE DOMAINS ── -->
778
+ <section id="domains">
779
+ <div class="section-inner">
780
+ <span class="section-tag">// 03 — PMBOK 7th Edition</span>
781
+ <h2 class="section-title">8 Performance Domains</h2>
782
+ <div class="divider"></div>
783
+ <p class="section-desc">Modern PM shifts from rigid process-based guidance to outcome-focused, adaptable frameworks. These domains describe the essential activities that drive project success.</p>
784
+
785
+ <div class="domains-grid fade-up">
786
+ <div class="domain-card">
787
+ <div class="domain-num">01</div>
788
+ <div class="domain-icon">🤝</div>
789
+ <div class="domain-name">Stakeholder</div>
790
+ <div class="domain-desc">Identify, analyze, plan, and continuously engage all stakeholders. Projects fail because of people, not technology.</div>
791
+ </div>
792
+ <div class="domain-card">
793
+ <div class="domain-num">02</div>
794
+ <div class="domain-icon">👥</div>
795
+ <div class="domain-name">Team</div>
796
+ <div class="domain-desc">Build high-performing teams through psychological safety, servant leadership, emotional intelligence, and conflict resolution.</div>
797
+ </div>
798
+ <div class="domain-card">
799
+ <div class="domain-num">03</div>
800
+ <div class="domain-icon">🔄</div>
801
+ <div class="domain-name">Development Approach &amp; Life Cycle</div>
802
+ <div class="domain-desc">Select the right blend — predictive, adaptive, or hybrid — based on uncertainty, complexity, and constraints.</div>
803
+ </div>
804
+ <div class="domain-card">
805
+ <div class="domain-num">04</div>
806
+ <div class="domain-icon">📋</div>
807
+ <div class="domain-name">Planning</div>
808
+ <div class="domain-desc">Progressive elaboration, rolling wave planning, scenario planning — planning is continuous, not a one-time event.</div>
809
+ </div>
810
+ <div class="domain-card">
811
+ <div class="domain-num">05</div>
812
+ <div class="domain-icon">⚙️</div>
813
+ <div class="domain-name">Project Work</div>
814
+ <div class="domain-desc">Prioritize work using MoSCoW, manage knowledge, distinguish issues from risks, and make data-driven decisions.</div>
815
+ </div>
816
+ <div class="domain-card">
817
+ <div class="domain-num">06</div>
818
+ <div class="domain-icon">🎯</div>
819
+ <div class="domain-name">Delivery</div>
820
+ <div class="domain-desc">Focus on value realization — not just scope completion. Elicit requirements, manage quality, and ensure stakeholders receive what they need.</div>
821
+ </div>
822
+ <div class="domain-card">
823
+ <div class="domain-num">07</div>
824
+ <div class="domain-icon">📊</div>
825
+ <div class="domain-name">Measurement</div>
826
+ <div class="domain-desc">EVM, velocity, burndowns, KPIs. What gets measured gets managed. Tailor dashboards to audience — strategic vs. operational.</div>
827
+ </div>
828
+ <div class="domain-card">
829
+ <div class="domain-num">08</div>
830
+ <div class="domain-icon">🌫️</div>
831
+ <div class="domain-name">Uncertainty</div>
832
+ <div class="domain-desc">Navigate ambiguity, volatility, and complexity through risk management, experimentation, iteration, and resilience.</div>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </section>
837
+
838
+ <!-- ── EVM ── -->
839
+ <section id="evm">
840
+ <div class="section-inner">
841
+ <span class="section-tag">// 04 — Technical Pillar</span>
842
+ <h2 class="section-title">Earned Value<br>Management</h2>
843
+ <div class="divider"></div>
844
+ <p class="section-desc">EVM answers: <em>"How much value have we earned for what we spent?"</em> It integrates scope, schedule, and cost into a single performance framework.</p>
845
+
846
+ <div class="evm-grid fade-up">
847
+ <div class="evm-card">
848
+ <div class="evm-acronym" style="color:#5fd48a">CV</div>
849
+ <div class="evm-full">Cost Variance</div>
850
+ <div class="evm-formula">EV − AC</div>
851
+ <div class="evm-good">✓ Positive = Under Budget</div>
852
+ <div class="evm-bad">✗ Negative = Over Budget</div>
853
+ </div>
854
+ <div class="evm-card">
855
+ <div class="evm-acronym" style="color:#5fd48a">SV</div>
856
+ <div class="evm-full">Schedule Variance</div>
857
+ <div class="evm-formula">EV − PV</div>
858
+ <div class="evm-good">✓ Positive = Ahead of Schedule</div>
859
+ <div class="evm-bad">✗ Negative = Behind Schedule</div>
860
+ </div>
861
+ <div class="evm-card">
862
+ <div class="evm-acronym" style="color:var(--gold)">CPI</div>
863
+ <div class="evm-full">Cost Performance Index</div>
864
+ <div class="evm-formula">EV / AC</div>
865
+ <div class="evm-good">✓ > 1.0 = Efficient Spending</div>
866
+ <div class="evm-bad">✗ &lt; 1.0 = Over Spending</div>
867
+ <div class="evm-interp">e.g. CPI 1.1 = $1.10 per $1 spent</div>
868
+ </div>
869
+ <div class="evm-card">
870
+ <div class="evm-acronym" style="color:var(--gold)">SPI</div>
871
+ <div class="evm-full">Schedule Performance Index</div>
872
+ <div class="evm-formula">EV / PV</div>
873
+ <div class="evm-good">✓ > 1.0 = Ahead of Plan</div>
874
+ <div class="evm-bad">✗ &lt; 1.0 = Behind Plan</div>
875
+ <div class="evm-interp">e.g. SPI 0.8 = 80% of planned rate</div>
876
+ </div>
877
+ <div class="evm-card">
878
+ <div class="evm-acronym" style="color:#c8a2e8">EAC</div>
879
+ <div class="evm-full">Estimate at Completion</div>
880
+ <div class="evm-formula">BAC / CPI</div>
881
+ <div class="evm-good">✓ Lower = Favorable forecast</div>
882
+ <div class="evm-bad">✗ Higher = Cost overrun ahead</div>
883
+ <div class="evm-interp">Typical variance formula</div>
884
+ </div>
885
+ <div class="evm-card">
886
+ <div class="evm-acronym" style="color:#c8a2e8">ETC</div>
887
+ <div class="evm-full">Estimate to Complete</div>
888
+ <div class="evm-formula">EAC − AC</div>
889
+ <div class="evm-good">✓ Lower = Less remaining cost</div>
890
+ <div class="evm-bad">✗ Higher = More to spend</div>
891
+ <div class="evm-interp">Remaining cost needed</div>
892
+ </div>
893
+ <div class="evm-card">
894
+ <div class="evm-acronym" style="color:#f4a261">VAC</div>
895
+ <div class="evm-full">Variance at Completion</div>
896
+ <div class="evm-formula">BAC − EAC</div>
897
+ <div class="evm-good">✓ Positive = Budget surplus</div>
898
+ <div class="evm-bad">✗ Negative = Budget deficit</div>
899
+ <div class="evm-interp">Final budget over/under</div>
900
+ </div>
901
+ <div class="evm-card">
902
+ <div class="evm-acronym" style="color:#f4a261">TCPI</div>
903
+ <div class="evm-full">To-Complete Perf. Index</div>
904
+ <div class="evm-formula">(BAC−EV)/(BAC−AC)</div>
905
+ <div class="evm-good">✓ &lt; 1.0 = Easier to hit budget</div>
906
+ <div class="evm-bad">✗ > 1.0 = Harder efficiency needed</div>
907
+ <div class="evm-interp">Future efficiency required</div>
908
+ </div>
909
+ </div>
910
+
911
+ <div class="evm-legend">
912
+ <div class="leg-item"><div class="leg-dot" style="background:#5fd48a"></div><span><strong>PV</strong> — Planned Value: budgeted cost for scheduled work</span></div>
913
+ <div class="leg-item"><div class="leg-dot" style="background:var(--gold)"></div><span><strong>EV</strong> — Earned Value: budgeted cost for work performed</span></div>
914
+ <div class="leg-item"><div class="leg-dot" style="background:#f05e5e"></div><span><strong>AC</strong> — Actual Cost: actual cost incurred</span></div>
915
+ <div class="leg-item"><div class="leg-dot" style="background:#c8a2e8"></div><span><strong>BAC</strong> — Budget at Completion: total approved budget</span></div>
916
+ </div>
917
+ </div>
918
+ </section>
919
+
920
+ <!-- ── RISK ── -->
921
+ <section id="risk">
922
+ <div class="section-inner">
923
+ <span class="section-tag">// 05 — Technical Pillar</span>
924
+ <h2 class="section-title">Risk Management</h2>
925
+ <div class="divider"></div>
926
+ <p class="section-desc">Risk is <em>uncertainty that matters</em>. Effective risk management is not about eliminating risk — it's about making informed decisions under uncertainty.</p>
927
+
928
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; flex-wrap:wrap;">
929
+ <div>
930
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin-bottom:1rem;">Probability × Impact Matrix</h3>
931
+ <div class="risk-matrix">
932
+ <div class="rm-axis-y">PROBABILITY</div>
933
+ <!-- Row 1: High probability -->
934
+ <div class="rm-cell rm-med" style="grid-column:2">Med</div>
935
+ <div class="rm-cell rm-high" style="grid-column:3">High</div>
936
+ <div class="rm-cell rm-crit" style="grid-column:4">CRITICAL</div>
937
+ <div class="rm-cell rm-crit" style="grid-column:5">CRITICAL</div>
938
+ <!-- Row 2 -->
939
+ <div class="rm-cell rm-low" style="grid-column:2">Low</div>
940
+ <div class="rm-cell rm-med" style="grid-column:3">Med</div>
941
+ <div class="rm-cell rm-high" style="grid-column:4">High</div>
942
+ <div class="rm-cell rm-crit" style="grid-column:5">CRITICAL</div>
943
+ <!-- Row 3 -->
944
+ <div class="rm-cell rm-low" style="grid-column:2">Low</div>
945
+ <div class="rm-cell rm-low" style="grid-column:3">Low</div>
946
+ <div class="rm-cell rm-med" style="grid-column:4">Med</div>
947
+ <div class="rm-cell rm-high" style="grid-column:5">High</div>
948
+ <!-- Row 4: Low probability -->
949
+ <div class="rm-cell rm-low" style="grid-column:2">Min</div>
950
+ <div class="rm-cell rm-low" style="grid-column:3">Low</div>
951
+ <div class="rm-cell rm-low" style="grid-column:4">Low</div>
952
+ <div class="rm-cell rm-med" style="grid-column:5">Med</div>
953
+ <!-- X axis -->
954
+ <div class="rm-axis-x rm-label" style="grid-column:2/6; grid-row:5">← IMPACT →</div>
955
+ </div>
956
+ <!-- Legend -->
957
+ <div style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-size:0.78rem; font-weight:600;">
958
+ <span style="display:flex;align-items:center;gap:6px;"><span style="width:14px;height:14px;background:#5fd48a;border-radius:2px;display:inline-block"></span>Low</span>
959
+ <span style="display:flex;align-items:center;gap:6px;"><span style="width:14px;height:14px;background:var(--gold);border-radius:2px;display:inline-block"></span>Medium</span>
960
+ <span style="display:flex;align-items:center;gap:6px;"><span style="width:14px;height:14px;background:var(--accent);border-radius:2px;display:inline-block"></span>High</span>
961
+ <span style="display:flex;align-items:center;gap:6px;"><span style="width:14px;height:14px;background:#8b0000;border-radius:2px;display:inline-block"></span>Critical</span>
962
+ </div>
963
+ </div>
964
+ <div>
965
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin-bottom:1rem;">Reserves</h3>
966
+ <div style="display:flex;flex-direction:column;gap:1rem; margin-bottom:2rem;">
967
+ <div style="background:var(--ink);color:var(--paper);border-radius:6px;padding:1.2rem;">
968
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.3rem;">CONTINGENCY RESERVE</div>
969
+ <div style="font-size:0.82rem;color:rgba(245,240,232,.65);">For <strong style="color:white">known unknowns</strong> — identified risks with defined responses. Managed by the <strong style="color:white">Project Manager</strong>.</div>
970
+ </div>
971
+ <div style="background:var(--blue);color:var(--paper);border-radius:6px;padding:1.2rem;">
972
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.3rem;">MANAGEMENT RESERVE</div>
973
+ <div style="font-size:0.82rem;color:rgba(245,240,232,.65);">For <strong style="color:white">unknown unknowns</strong> — unforeseeable events. Managed by <strong style="color:white">Senior Leadership</strong>.</div>
974
+ </div>
975
+ </div>
976
+ <div style="background:var(--cream);border-radius:6px;padding:1.2rem;border:2px solid var(--border);">
977
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:0.9rem;letter-spacing:1px;margin-bottom:0.5rem;color:var(--teal);">EMV FORMULA</div>
978
+ <div style="font-family:'JetBrains Mono',monospace;font-size:1.1rem;margin-bottom:0.5rem;">EMV = P × I</div>
979
+ <div style="font-size:0.78rem;color:var(--muted);">Expected Monetary Value = Probability × Impact (in currency). Used for decision trees and budget reserves.</div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+
984
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.4rem; margin:3rem 0 1.5rem;">Response Strategies</h3>
985
+ <div class="risk-responses">
986
+ <div class="resp-card threats">
987
+ <h4>⚠️ For Threats</h4>
988
+ <div class="resp-item"><span class="resp-icon">↑</span><div><span class="resp-name">Escalate</span><span class="resp-desc">Risk exceeds project authority — elevate to appropriate level</span></div></div>
989
+ <div class="resp-item"><span class="resp-icon">🚫</span><div><span class="resp-name">Avoid</span><span class="resp-desc">Eliminate the threat by changing the project plan entirely</span></div></div>
990
+ <div class="resp-item"><span class="resp-icon">↔️</span><div><span class="resp-name">Transfer</span><span class="resp-desc">Shift impact to third party via insurance, contracts, or warranties</span></div></div>
991
+ <div class="resp-item"><span class="resp-icon">⬇️</span><div><span class="resp-name">Mitigate</span><span class="resp-desc">Reduce probability or impact before the risk occurs</span></div></div>
992
+ <div class="resp-item"><span class="resp-icon">✓</span><div><span class="resp-name">Accept</span><span class="resp-desc">Active (contingency reserve) or Passive (monitor only)</span></div></div>
993
+ </div>
994
+ <div class="resp-card opps">
995
+ <h4>✨ For Opportunities</h4>
996
+ <div class="resp-item"><span class="resp-icon">↑</span><div><span class="resp-name">Escalate</span><span class="resp-desc">Opportunity exceeds project scope — elevate to capture more value</span></div></div>
997
+ <div class="resp-item"><span class="resp-icon">🎯</span><div><span class="resp-name">Exploit</span><span class="resp-desc">Eliminate uncertainty by ensuring the opportunity occurs</span></div></div>
998
+ <div class="resp-item"><span class="resp-icon">🤝</span><div><span class="resp-name">Share</span><span class="resp-desc">Allocate ownership to a partner best positioned to capture it</span></div></div>
999
+ <div class="resp-item"><span class="resp-icon">⬆️</span><div><span class="resp-name">Enhance</span><span class="resp-desc">Increase probability or positive impact of the opportunity</span></div></div>
1000
+ <div class="resp-item"><span class="resp-icon">✓</span><div><span class="resp-name">Accept</span><span class="resp-desc">Take advantage if it occurs without actively pursuing it</span></div></div>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ </section>
1005
+
1006
+ <!-- ── AGILE ── -->
1007
+ <section id="agile">
1008
+ <div class="section-inner">
1009
+ <span class="section-tag">// 06 — Adaptive Practices</span>
1010
+ <h2 class="section-title">Agile &amp; Scrum</h2>
1011
+ <div class="divider"></div>
1012
+ <p class="section-desc">Agile is not a methodology — it is a <em>mindset</em>: iterative delivery, continuous feedback, and responsiveness to change. Scrum is the most widely applied agile framework.</p>
1013
+
1014
+ <!-- Scrum Board -->
1015
+ <div class="scrum-board fade-up">
1016
+ <div class="scrum-col col-roles">
1017
+ <div class="scrum-col-header">⚙️ Roles</div>
1018
+ <div class="scrum-item"><strong>Product Owner</strong><span>Maximizes value; manages & prioritizes the product backlog; voice of the stakeholder</span></div>
1019
+ <div class="scrum-item"><strong>Scrum Master</strong><span>Servant leader; removes impediments; coaches agile practices; facilitates events</span></div>
1020
+ <div class="scrum-item"><strong>Development Team</strong><span>Self-organizing, cross-functional group that delivers a potentially releasable increment each sprint</span></div>
1021
+ </div>
1022
+ <div class="scrum-col col-events">
1023
+ <div class="scrum-col-header">📅 Events</div>
1024
+ <div class="scrum-item"><strong>Sprint</strong><span>1–4 week time-box producing a usable increment</span></div>
1025
+ <div class="scrum-item"><strong>Sprint Planning</strong><span>Team selects backlog items and plans delivery</span></div>
1026
+ <div class="scrum-item"><strong>Daily Scrum</strong><span>15-min sync to inspect progress toward sprint goal</span></div>
1027
+ <div class="scrum-item"><strong>Sprint Review</strong><span>Demo increment; gather stakeholder feedback</span></div>
1028
+ <div class="scrum-item"><strong>Sprint Retrospective</strong><span>Reflect on process; identify improvements</span></div>
1029
+ </div>
1030
+ <div class="scrum-col col-artifacts">
1031
+ <div class="scrum-col-header">📦 Artifacts</div>
1032
+ <div class="scrum-item"><strong>Product Backlog</strong><span>Ordered list of everything needed; dynamically managed by Product Owner</span></div>
1033
+ <div class="scrum-item"><strong>Sprint Backlog</strong><span>Selected items + plan to deliver them during the sprint</span></div>
1034
+ <div class="scrum-item"><strong>Increment</strong><span>Sum of completed items; must be "Done" and potentially releasable</span></div>
1035
+ </div>
1036
+ </div>
1037
+
1038
+ <!-- Sprint Cycle -->
1039
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">The Sprint Cycle</h3>
1040
+ <div class="sprint-cycle fade-up">
1041
+ <div class="sprint-step" style="background:#f0f4ff">
1042
+ <div class="ss-icon">📋</div>
1043
+ <div class="ss-name">Sprint Planning</div>
1044
+ <div class="ss-time">Start of Sprint</div>
1045
+ </div>
1046
+ <div class="sprint-step" style="background:#f0fbf8">
1047
+ <div class="ss-icon">🔨</div>
1048
+ <div class="ss-name">Sprint Execution</div>
1049
+ <div class="ss-time">Daily + Daily Scrum</div>
1050
+ </div>
1051
+ <div class="sprint-step" style="background:#fff7e6">
1052
+ <div class="ss-icon">🎯</div>
1053
+ <div class="ss-name">Sprint Review</div>
1054
+ <div class="ss-time">End of Sprint</div>
1055
+ </div>
1056
+ <div class="sprint-step" style="background:#fdf0ee">
1057
+ <div class="ss-icon">🔁</div>
1058
+ <div class="ss-name">Retrospective</div>
1059
+ <div class="ss-time">Continuous Improvement</div>
1060
+ </div>
1061
+ </div>
1062
+
1063
+ <!-- Charts -->
1064
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">Agile Metrics — Visual Reference</h3>
1065
+ <div class="charts-row fade-up">
1066
+ <div class="chart-card">
1067
+ <div class="chart-title">📉 Burndown Chart — Remaining Work Over Time</div>
1068
+ <svg class="chart-svg" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg">
1069
+ <defs>
1070
+ <linearGradient id="burnGrad" x1="0" y1="0" x2="0" y2="1">
1071
+ <stop offset="0%" stop-color="#c8410a" stop-opacity="0.25"/>
1072
+ <stop offset="100%" stop-color="#c8410a" stop-opacity="0"/>
1073
+ </linearGradient>
1074
+ </defs>
1075
+ <!-- Grid -->
1076
+ <line x1="40" y1="20" x2="40" y2="150" stroke="#e0d8cc" stroke-width="1"/>
1077
+ <line x1="40" y1="150" x2="290" y2="150" stroke="#e0d8cc" stroke-width="1"/>
1078
+ <line x1="40" y1="60" x2="290" y2="60" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/>
1079
+ <line x1="40" y1="105" x2="290" y2="105" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/>
1080
+ <!-- Ideal line -->
1081
+ <line x1="40" y1="20" x2="290" y2="150" stroke="#1a7a6e" stroke-width="1.5" stroke-dasharray="6,4" opacity="0.6"/>
1082
+ <!-- Actual burndown area -->
1083
+ <path d="M40,20 L90,35 L140,55 L165,90 L200,100 L240,120 L290,145 L290,150 L40,150 Z" fill="url(#burnGrad)"/>
1084
+ <!-- Actual burndown line -->
1085
+ <path d="M40,20 L90,35 L140,55 L165,90 L200,100 L240,120 L290,145" fill="none" stroke="#c8410a" stroke-width="2.5"/>
1086
+ <!-- Points -->
1087
+ <circle cx="40" cy="20" r="3.5" fill="#c8410a"/>
1088
+ <circle cx="90" cy="35" r="3" fill="#c8410a"/>
1089
+ <circle cx="140" cy="55" r="3" fill="#c8410a"/>
1090
+ <circle cx="165" cy="90" r="3" fill="#c8410a"/>
1091
+ <circle cx="200" cy="100" r="3" fill="#c8410a"/>
1092
+ <circle cx="240" cy="120" r="3" fill="#c8410a"/>
1093
+ <circle cx="290" cy="145" r="3.5" fill="#c8410a"/>
1094
+ <!-- Labels -->
1095
+ <text x="36" y="154" text-anchor="end" font-size="9" fill="#7a6e60">Day 1</text>
1096
+ <text x="290" y="162" text-anchor="middle" font-size="9" fill="#7a6e60">Day 14</text>
1097
+ <text x="14" y="25" font-size="8" fill="#7a6e60" text-anchor="middle">100</text>
1098
+ <text x="14" y="155" font-size="8" fill="#7a6e60" text-anchor="middle">0</text>
1099
+ <text x="25" y="90" font-size="8" fill="#1a7a6e" transform="rotate(-90 25 90)" text-anchor="middle">Work Remaining</text>
1100
+ <!-- Legend -->
1101
+ <line x1="45" y1="168" x2="65" y2="168" stroke="#c8410a" stroke-width="2"/>
1102
+ <text x="68" y="171" font-size="8" fill="#0d0d0d">Actual</text>
1103
+ <line x1="110" y1="168" x2="130" y2="168" stroke="#1a7a6e" stroke-width="1.5" stroke-dasharray="4,3"/>
1104
+ <text x="133" y="171" font-size="8" fill="#0d0d0d">Ideal</text>
1105
+ </svg>
1106
+ </div>
1107
+ <div class="chart-card">
1108
+ <div class="chart-title">📈 Burnup Chart — Completed Work Over Time</div>
1109
+ <svg class="chart-svg" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg">
1110
+ <defs>
1111
+ <linearGradient id="burnupGrad" x1="0" y1="0" x2="0" y2="1">
1112
+ <stop offset="0%" stop-color="#1a7a6e" stop-opacity="0.3"/>
1113
+ <stop offset="100%" stop-color="#1a7a6e" stop-opacity="0.05"/>
1114
+ </linearGradient>
1115
+ </defs>
1116
+ <line x1="40" y1="20" x2="40" y2="150" stroke="#e0d8cc" stroke-width="1"/>
1117
+ <line x1="40" y1="150" x2="290" y2="150" stroke="#e0d8cc" stroke-width="1"/>
1118
+ <line x1="40" y1="60" x2="290" y2="60" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/>
1119
+ <line x1="40" y1="105" x2="290" y2="105" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/>
1120
+ <!-- Scope line -->
1121
+ <line x1="40" y1="30" x2="200" y2="30" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="5,4"/>
1122
+ <line x1="200" y1="30" x2="200" y2="22" stroke="#d4a017" stroke-width="1.5"/>
1123
+ <line x1="200" y1="22" x2="290" y2="22" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="5,4"/>
1124
+ <text x="205" y="19" font-size="7" fill="#d4a017">Scope added</text>
1125
+ <!-- Completed area -->
1126
+ <path d="M40,150 L90,135 L140,115 L180,90 L230,65 L290,30 L290,150 Z" fill="url(#burnupGrad)"/>
1127
+ <!-- Completed line -->
1128
+ <path d="M40,150 L90,135 L140,115 L180,90 L230,65 L290,30" fill="none" stroke="#1a7a6e" stroke-width="2.5"/>
1129
+ <circle cx="40" cy="150" r="3.5" fill="#1a7a6e"/>
1130
+ <circle cx="290" cy="30" r="3.5" fill="#1a7a6e"/>
1131
+ <text x="36" y="154" text-anchor="end" font-size="9" fill="#7a6e60">Day 1</text>
1132
+ <text x="290" y="162" text-anchor="middle" font-size="9" fill="#7a6e60">Day 14</text>
1133
+ <text x="14" y="25" font-size="8" fill="#7a6e60" text-anchor="middle">100</text>
1134
+ <text x="14" y="155" font-size="8" fill="#7a6e60" text-anchor="middle">0</text>
1135
+ <text x="25" y="90" font-size="8" fill="#1a7a6e" transform="rotate(-90 25 90)" text-anchor="middle">Work Completed</text>
1136
+ <line x1="45" y1="168" x2="65" y2="168" stroke="#1a7a6e" stroke-width="2"/>
1137
+ <text x="68" y="171" font-size="8" fill="#0d0d0d">Completed</text>
1138
+ <line x1="118" y1="168" x2="138" y2="168" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="4,3"/>
1139
+ <text x="141" y="171" font-size="8" fill="#0d0d0d">Scope</text>
1140
+ </svg>
1141
+ </div>
1142
+ </div>
1143
+
1144
+ <!-- Approaches comparison -->
1145
+ <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">Choosing Your Approach</h3>
1146
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="fade-up">
1147
+ <div style="background:var(--blue);color:white;border-radius:8px;padding:1.5rem;">
1148
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">PREDICTIVE</div>
1149
+ <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Sequential · Waterfall · Plan-Driven</div>
1150
+ <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;">
1151
+ <li>Clear, stable requirements</li>
1152
+ <li>Low uncertainty</li>
1153
+ <li>Compliance-heavy projects</li>
1154
+ <li>Safety-critical environments</li>
1155
+ </ul>
1156
+ </div>
1157
+ <div style="background:var(--teal);color:white;border-radius:8px;padding:1.5rem;">
1158
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">ADAPTIVE</div>
1159
+ <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Iterative · Agile · Feedback-Driven</div>
1160
+ <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;">
1161
+ <li>Evolving requirements</li>
1162
+ <li>High stakeholder collaboration</li>
1163
+ <li>Rapid market changes</li>
1164
+ <li>Innovation projects</li>
1165
+ </ul>
1166
+ </div>
1167
+ <div style="background:var(--accent);color:white;border-radius:8px;padding:1.5rem;">
1168
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">HYBRID</div>
1169
+ <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Blended · Context-Aware</div>
1170
+ <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;">
1171
+ <li>Legal contracts + rapid dev</li>
1172
+ <li>Legacy systems + new features</li>
1173
+ <li>Mixed team maturity</li>
1174
+ <li>Most real-world projects</li>
1175
+ </ul>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+ </section>
1180
+
1181
+ <!-- ── QUALITY ── -->
1182
+ <section id="quality">
1183
+ <div class="section-inner">
1184
+ <span class="section-tag">// 07 — Quality Management</span>
1185
+ <h2 class="section-title">Quality is Not<br>Gold-Plating</h2>
1186
+ <div class="divider"></div>
1187
+ <p class="section-desc">Quality is meeting the right standards consistently. The earlier a defect is caught, the lower the cost to fix it.</p>
1188
+
1189
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;">
1190
+ <div>
1191
+ <h3 style="font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:1.5rem;">Three Integrated Processes</h3>
1192
+ <div class="quality-funnel">
1193
+ <div class="qf-layer qf-layer-1">
1194
+ <div class="qf-title">01 — Plan Quality Management</div>
1195
+ <div class="qf-sub">Define standards, criteria, and how they'll be demonstrated</div>
1196
+ </div>
1197
+ <div class="qf-arrow">↓</div>
1198
+ <div class="qf-layer qf-layer-2">
1199
+ <div class="qf-title">02 — Manage Quality</div>
1200
+ <div class="qf-sub">Ensure processes are adequate and appropriate — Quality Audits</div>
1201
+ </div>
1202
+ <div class="qf-arrow">↓</div>
1203
+ <div class="qf-layer qf-layer-3">
1204
+ <div class="qf-title">03 — Control Quality</div>
1205
+ <div class="qf-sub">Inspect specific deliverables and identify defects</div>
1206
+ </div>
1207
+ </div>
1208
+ </div>
1209
+ <div>
1210
+ <h3 style="font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:1.5rem;">Cost of Quality (COQ)</h3>
1211
+ <div class="coq-grid">
1212
+ <div class="coq-card coq-conf">
1213
+ <div class="coq-head">✅ Conformance Costs</div>
1214
+ <div class="coq-items">
1215
+ <div class="coq-item"><div class="coq-dot" style="background:var(--teal)"></div><span>Prevention: Training, documentation, quality planning</span></div>
1216
+ <div class="coq-item"><div class="coq-dot" style="background:#1a7a6e80"></div><span>Appraisal: Testing, inspections, audits, reviews</span></div>
1217
+ </div>
1218
+ </div>
1219
+ <div class="coq-card coq-nonconf">
1220
+ <div class="coq-head">❌ Non-Conformance</div>
1221
+ <div class="coq-items">
1222
+ <div class="coq-item"><div class="coq-dot" style="background:var(--accent)"></div><span>Internal Failure: Rework, scrap, delays before delivery</span></div>
1223
+ <div class="coq-item"><div class="coq-dot" style="background:#8b0000"></div><span>External Failure: Warranty, returns, lost business, reputation</span></div>
1224
+ </div>
1225
+ </div>
1226
+ </div>
1227
+ <div style="background:var(--cream);border-radius:6px;padding:1.2rem;margin-top:1rem;border-left:4px solid var(--teal);">
1228
+ <div style="font-size:0.85rem;color:var(--muted);font-style:italic;">💡 Investing in prevention and appraisal is almost always cheaper than paying for failures. Prevention costs → ↓ Failure costs.</div>
1229
+ </div>
1230
+ </div>
1231
+ </div>
1232
+ </div>
1233
+ </section>
1234
+
1235
+ <!-- ── CONTRACTS ── -->
1236
+ <section id="contracts">
1237
+ <div class="section-inner">
1238
+ <span class="section-tag">// 08 — Procurement</span>
1239
+ <h2 class="section-title">Contract Types &amp;<br>Risk Allocation</h2>
1240
+ <div class="divider"></div>
1241
+ <p class="section-desc">Contract type selection is a risk management decision. Understand who carries the cost risk before signing anything.</p>
1242
+
1243
+ <table class="contract-table fade-up">
1244
+ <thead>
1245
+ <tr>
1246
+ <th>Contract Type</th>
1247
+ <th>Description</th>
1248
+ <th>Risk to Buyer</th>
1249
+ <th>Best For</th>
1250
+ </tr>
1251
+ </thead>
1252
+ <tbody>
1253
+ <tr>
1254
+ <td><strong>Fixed Price (FFP)</strong></td>
1255
+ <td>Set price for defined scope</td>
1256
+ <td><span class="risk-badge risk-low">Low</span></td>
1257
+ <td>Clear scope, cost certainty needed</td>
1258
+ </tr>
1259
+ <tr>
1260
+ <td><strong>Fixed Price + EPA</strong></td>
1261
+ <td>Fixed price with economic adjustment clauses</td>
1262
+ <td><span class="risk-badge risk-low">Low–Med</span></td>
1263
+ <td>Long-duration, inflation-sensitive contracts</td>
1264
+ </tr>
1265
+ <tr>
1266
+ <td><strong>Cost Plus Fixed Fee (CPFF)</strong></td>
1267
+ <td>Actual costs + fixed fee</td>
1268
+ <td><span class="risk-badge risk-high">High</span></td>
1269
+ <td>Unclear scope, R&amp;D, early-stage projects</td>
1270
+ </tr>
1271
+ <tr>
1272
+ <td><strong>Cost Plus Incentive Fee (CPIF)</strong></td>
1273
+ <td>Actual costs + incentive for performance</td>
1274
+ <td><span class="risk-badge" style="background:#fef3e2;color:#b45309">Medium</span></td>
1275
+ <td>Motivate seller while sharing risk</td>
1276
+ </tr>
1277
+ <tr>
1278
+ <td><strong>Time &amp; Materials (T&amp;M)</strong></td>
1279
+ <td>Hourly rate + materials</td>
1280
+ <td><span class="risk-badge" style="background:#fef3e2;color:#b45309">Med–High</span></td>
1281
+ <td>Unclear scope, staff augmentation</td>
1282
+ </tr>
1283
+ <tr>
1284
+ <td><strong>Cost Plus Award Fee (CPAF)</strong></td>
1285
+ <td>Actual costs + award based on subjective evaluation</td>
1286
+ <td><span class="risk-badge risk-high">High</span></td>
1287
+ <td>Performance difficult to quantify objectively</td>
1288
+ </tr>
1289
+ </tbody>
1290
+ </table>
1291
+
1292
+ <div style="background:var(--ink);color:var(--paper);border-radius:8px;padding:2rem;margin-top:2rem;display:flex;gap:2rem;align-items:center;flex-wrap:wrap;">
1293
+ <div style="font-size:2.5rem;">⚖️</div>
1294
+ <div>
1295
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.3rem;">The Risk Transfer Principle</div>
1296
+ <div style="font-size:0.85rem;color:rgba(245,240,232,.65);max-width:600px;">Fixed-price contracts transfer cost risk to the seller but may result in higher prices to compensate. Cost-reimbursable contracts share risk but demand strong oversight to prevent overruns. Always match contract type to scope clarity and risk appetite.</div>
1297
+ </div>
1298
+ </div>
1299
+ </div>
1300
+ </section>
1301
+
1302
+ <!-- ── STAKEHOLDER ── -->
1303
+ <section id="stakeholder" style="background:var(--paper)">
1304
+ <div class="section-inner">
1305
+ <span class="section-tag">// 09 — Stakeholder Management</span>
1306
+ <h2 class="section-title">Engagement &amp;<br>Communication</h2>
1307
+ <div class="divider"></div>
1308
+ <p class="section-desc">Projects do not fail because of technical problems — they fail because stakeholders were misunderstood, ignored, or misaligned.</p>
1309
+
1310
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;">
1311
+ <div>
1312
+ <h3 style="font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:1rem;">Engagement Assessment Matrix</h3>
1313
+ <div class="engagement-matrix">
1314
+ <div class="em-axis">ENGAGEMENT LEVEL</div>
1315
+ <div class="em-rows">
1316
+ <div class="em-row">
1317
+ <div class="em-level"><div class="em-dot" style="background:#8b0000"></div>Unaware</div>
1318
+ <div class="em-desc">Not aware of the project or its potential impacts</div>
1319
+ </div>
1320
+ <div class="em-row">
1321
+ <div class="em-level"><div class="em-dot" style="background:var(--accent)"></div>Resistant</div>
1322
+ <div class="em-desc">Aware but actively opposed to change</div>
1323
+ </div>
1324
+ <div class="em-row">
1325
+ <div class="em-level"><div class="em-dot" style="background:var(--gold)"></div>Neutral</div>
1326
+ <div class="em-desc">Aware but neither supportive nor opposed</div>
1327
+ </div>
1328
+ <div class="em-row">
1329
+ <div class="em-level"><div class="em-dot" style="background:var(--teal)"></div>Supportive</div>
1330
+ <div class="em-desc">Aware and supportive of the project and its outcomes</div>
1331
+ </div>
1332
+ <div class="em-row">
1333
+ <div class="em-level"><div class="em-dot" style="background:#1a3a6e"></div>Leading</div>
1334
+ <div class="em-desc">Actively champions the initiative and drives success</div>
1335
+ </div>
1336
+ </div>
1337
+ </div>
1338
+ </div>
1339
+ <div>
1340
+ <h3 style="font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:1rem;">Communication Channel Formula</h3>
1341
+ <div class="comm-formula">
1342
+ <div class="cf-part">
1343
+ <div class="cf-big">n(n−1)</div>
1344
+ <div style="border-top:2px solid var(--gold);margin:6px 0;"></div>
1345
+ <div class="cf-big" style="font-size:2rem;">2</div>
1346
+ <div class="cf-small">Channels</div>
1347
+ </div>
1348
+ <div class="cf-op">=</div>
1349
+ <div class="cf-part">
1350
+ <div class="cf-big" style="font-size:2.5rem;">?</div>
1351
+ <div class="cf-small">Where n = stakeholders</div>
1352
+ </div>
1353
+ </div>
1354
+ <div style="margin-top:1rem;display:flex;flex-direction:column;gap:0.6rem;">
1355
+ <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;">
1356
+ <span>5 stakeholders</span><strong>10 channels</strong>
1357
+ </div>
1358
+ <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;">
1359
+ <span>10 stakeholders</span><strong>45 channels</strong>
1360
+ </div>
1361
+ <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;">
1362
+ <span>20 stakeholders</span><strong>190 channels</strong>
1363
+ </div>
1364
+ </div>
1365
+ <div style="background:var(--cream);border-radius:6px;padding:1rem;margin-top:1rem;">
1366
+ <div style="font-size:0.82rem;font-weight:700;margin-bottom:0.5rem;">Communication Methods</div>
1367
+ <div style="display:flex;flex-direction:column;gap:0.4rem;font-size:0.78rem;color:var(--muted);">
1368
+ <div><strong style="color:var(--ink)">Interactive</strong> — Meetings, calls (real-time, two-way)</div>
1369
+ <div><strong style="color:var(--ink)">Push</strong> — Emails, reports (one-way, sender-controlled)</div>
1370
+ <div><strong style="color:var(--ink)">Pull</strong> — Portals, dashboards (receiver-controlled access)</div>
1371
+ </div>
1372
+ </div>
1373
+ </div>
1374
+ </div>
1375
+ </div>
1376
+ </section>
1377
+
1378
+ <!-- ── MODERN PM ── -->
1379
+ <section style="background:var(--ink);color:var(--paper);padding:6rem 2rem;">
1380
+ <div class="section-inner">
1381
+ <span class="section-tag" style="color:var(--gold)">// 10 — The Modern PM</span>
1382
+ <h2 class="section-title" style="color:var(--paper)">The Modern Project<br>Manager</h2>
1383
+ <div class="divider" style="background:var(--teal)"></div>
1384
+ <p class="section-desc" style="color:rgba(245,240,232,.6)">No longer a taskmaster with a Gantt chart. A strategic leader, relationship architect, and adaptive practitioner.</p>
1385
+
1386
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="fade-up">
1387
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1388
+ <div style="font-size:2rem;margin-bottom:0.5rem;">🧭</div>
1389
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Methodology-Agnostic</div>
1390
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Selects the right blend of predictive, adaptive, and hybrid approaches for each context.</div>
1391
+ </div>
1392
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1393
+ <div style="font-size:2rem;margin-bottom:0.5rem;">❤️</div>
1394
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Emotionally Intelligent</div>
1395
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Leads with empathy and servant leadership rather than authority and control.</div>
1396
+ </div>
1397
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1398
+ <div style="font-size:2rem;margin-bottom:0.5rem;">🌊</div>
1399
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Resilient by Design</div>
1400
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Manages uncertainty as a constant, building resilience into plans and teams.</div>
1401
+ </div>
1402
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1403
+ <div style="font-size:2rem;margin-bottom:0.5rem;">🎯</div>
1404
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Value-Focused</div>
1405
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Prioritizes stakeholder engagement and value delivery over rigid adherence to plans.</div>
1406
+ </div>
1407
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1408
+ <div style="font-size:2rem;margin-bottom:0.5rem;">🌱</div>
1409
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Sustainability-Minded</div>
1410
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Integrates ESG and ethical considerations into every decision, beyond short-term deliverables.</div>
1411
+ </div>
1412
+ <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;">
1413
+ <div style="font-size:2rem;margin-bottom:0.5rem;">📚</div>
1414
+ <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Knowledge Steward</div>
1415
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Treats lessons learned as organizational capital and actively contributes to the knowledge base.</div>
1416
+ </div>
1417
+ </div>
1418
+
1419
+ <div style="margin-top:3rem;padding:2rem;border:1px solid rgba(212,160,23,.3);border-radius:6px;text-align:center;">
1420
+ <div style="font-family:'DM Serif Display',serif;font-size:1.4rem;font-style:italic;color:var(--gold);margin-bottom:0.5rem;">"Mastery comes not from memorizing processes, but from understanding principles, adapting practices, and delivering value."</div>
1421
+ <div style="font-size:0.8rem;color:rgba(245,240,232,.35);letter-spacing:1px;text-transform:uppercase;">— Project Management Professional Learning Guide</div>
1422
+ </div>
1423
+ </div>
1424
+ </section>
1425
+
1426
+ <!-- FOOTER -->
1427
+ <footer>
1428
+ <div class="footer-logo">PM·PRO</div>
1429
+ <p>A visual learning resource for aspiring project managers.<br>Built with ❤️ as a personal contribution to the PM learning community.</p>
1430
+ <p style="margin-top:1rem;font-size:0.72rem;opacity:.4;">Content based on PMBOK® concepts and Agile practices. Not affiliated with PMI®.</p>
1431
+ </footer>
1432
+
1433
+ <script>
1434
+ // Intersection Observer for animations
1435
+ const observer = new IntersectionObserver((entries) => {
1436
+ entries.forEach(el => {
1437
+ if (el.isIntersecting) {
1438
+ el.target.classList.add('visible');
1439
+ }
1440
+ });
1441
+ }, { threshold: 0.12 });
1442
+
1443
+ document.querySelectorAll('.fade-up, .tl-item').forEach(el => observer.observe(el));
1444
+
1445
+ // Stagger timeline items
1446
+ document.querySelectorAll('.tl-item').forEach((el, i) => {
1447
+ el.style.transitionDelay = `${i * 0.12}s`;
1448
+ });
1449
+ </script>
1450
+ </body>
1451
  </html>