Download index.html from Soha85/pm_guide: direct link, hf CLI and curl.
- Browser
- Download file 71.2 kB
-
https://huggingface.co/spaces/Soha85/pm_guide/resolve/main/index.html
- Command line
-
hf download hf://spaces/Soha85/pm_guide/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Soha85/pm_guide/resolve/main/index.html
71.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PM - Project Management Visual Learning Guide</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <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"> | |
| <style> | |
| :root { | |
| --ink: #0d0d0d; | |
| --paper: #f5f0e8; | |
| --cream: #ede7d9; | |
| --accent: #c8410a; | |
| --gold: #d4a017; | |
| --teal: #1a7a6e; | |
| --blue: #1a3a6e; | |
| --muted: #7a6e60; | |
| --card: #ffffff; | |
| --border: rgba(13,13,13,0.12); | |
| --shadow: 0 4px 30px rgba(13,13,13,0.08); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: 'DM Sans', sans-serif; | |
| font-weight: 400; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* ── NAV ── */ | |
| nav { | |
| position: fixed; top: 0; left: 0; right: 0; z-index: 100; | |
| background: rgba(245,240,232,0.92); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 2px solid var(--ink); | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 0 2rem; height: 56px; | |
| } | |
| .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 2px; color: var(--accent); } | |
| .nav-links { display: flex; gap: 1.5rem; list-style: none; } | |
| .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; } | |
| .nav-links a:hover { opacity: 1; color: var(--accent); } | |
| /* ── HERO ── */ | |
| .hero { | |
| min-height: 100vh; | |
| display: grid; place-items: center; | |
| padding: 6rem 2rem 3rem; | |
| background: var(--ink); | |
| color: var(--paper); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-grid { | |
| position: absolute; inset: 0; | |
| background-image: linear-gradient(rgba(245,240,232,0.04) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(245,240,232,0.04) 1px, transparent 1px); | |
| background-size: 48px 48px; | |
| } | |
| .hero-inner { max-width: 900px; text-align: center; position: relative; z-index: 1; } | |
| .hero-tag { | |
| display: inline-block; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.72rem; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| border: 1px solid var(--gold); | |
| padding: 4px 14px; | |
| border-radius: 2px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero h1 { | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: clamp(4rem, 10vw, 8rem); | |
| line-height: 0.95; | |
| letter-spacing: 2px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero h1 span { color: var(--accent); } | |
| .hero p { font-size: 1.1rem; color: rgba(245,240,232,0.65); max-width: 560px; margin: 0 auto 2.5rem; } | |
| .hero-cta { | |
| display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 28px; | |
| border-radius: 3px; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| transition: transform .2s, box-shadow .2s; | |
| } | |
| .btn:hover { transform: translateY(-2px); } | |
| .btn-primary { background: var(--accent); color: white; } | |
| .btn-outline { border: 2px solid var(--paper); color: var(--paper); } | |
| .hero-scroll { | |
| position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; | |
| color: rgba(245,240,232,0.35); | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| } | |
| .scroll-line { width: 1px; height: 40px; background: rgba(245,240,232,0.2); animation: scrollPulse 2s ease-in-out infinite; } | |
| @keyframes scrollPulse { 0%,100%{opacity:.2} 50%{opacity:.8} } | |
| /* ── SECTION COMMON ── */ | |
| section { padding: 6rem 2rem; } | |
| .section-inner { max-width: 1100px; margin: 0 auto; } | |
| .section-tag { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .section-title { | |
| font-family: 'DM Serif Display', serif; | |
| font-size: clamp(2rem, 4vw, 3.2rem); | |
| line-height: 1.15; | |
| margin-bottom: 1rem; | |
| } | |
| .section-desc { font-size: 1rem; color: var(--muted); max-width: 640px; margin-bottom: 3rem; line-height: 1.7; } | |
| .divider { width: 48px; height: 3px; background: var(--accent); margin: 1rem 0 2rem; } | |
| /* ── WHAT IS PM ── */ | |
| #foundation { background: var(--paper); } | |
| .triangle-grid { | |
| display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 3rem; | |
| } | |
| .triangle-card { | |
| background: var(--card); | |
| border: 2px solid var(--ink); | |
| border-radius: 4px; | |
| padding: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform .25s; | |
| } | |
| .triangle-card:hover { transform: translateY(-4px); } | |
| .triangle-card::before { | |
| content: ''; | |
| position: absolute; top: 0; left: 0; | |
| width: 100%; height: 4px; | |
| } | |
| .triangle-card:nth-child(1)::before { background: var(--accent); } | |
| .triangle-card:nth-child(2)::before { background: var(--teal); } | |
| .triangle-card:nth-child(3)::before { background: var(--gold); } | |
| .tc-icon { font-size: 2.4rem; margin-bottom: 0.8rem; } | |
| .tc-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 1px; margin-bottom: 0.6rem; } | |
| .tc-body { font-size: 0.88rem; color: var(--muted); line-height: 1.6; } | |
| /* ITO Model */ | |
| .ito-wrap { | |
| background: var(--ink); | |
| color: var(--paper); | |
| border-radius: 8px; | |
| padding: 3rem; | |
| display: flex; align-items: center; gap: 0; | |
| overflow: hidden; | |
| } | |
| .ito-block { | |
| flex: 1; | |
| padding: 1.5rem; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .ito-block + .ito-block::before { | |
| content: '→'; | |
| position: absolute; left: -18px; top: 50%; transform: translateY(-50%); | |
| font-size: 2rem; color: var(--accent); | |
| } | |
| .ito-label { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; | |
| color: var(--gold); margin-bottom: 0.5rem; | |
| } | |
| .ito-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 1px; margin-bottom: 0.5rem; } | |
| .ito-example { font-size: 0.8rem; color: rgba(245,240,232,0.5); font-style: italic; } | |
| /* ── PROCESS GROUPS ── */ | |
| #process { background: var(--cream); } | |
| .timeline { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; left: 11px; top: 0; bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(var(--accent), var(--teal)); | |
| } | |
| .tl-item { | |
| position: relative; | |
| padding: 0 0 3rem 2rem; | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| transition: opacity .6s, transform .6s; | |
| } | |
| .tl-item.visible { opacity: 1; transform: translateX(0); } | |
| .tl-dot { | |
| position: absolute; left: -30px; top: 4px; | |
| width: 24px; height: 24px; border-radius: 50%; | |
| border: 3px solid var(--ink); | |
| display: grid; place-items: center; | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: 0.75rem; | |
| } | |
| .tl-dot-1 { background: var(--accent); color: white; } | |
| .tl-dot-2 { background: var(--gold); color: var(--ink); } | |
| .tl-dot-3 { background: var(--teal); color: white; } | |
| .tl-dot-4 { background: var(--blue); color: white; } | |
| .tl-dot-5 { background: var(--muted); color: white; } | |
| .tl-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; } | |
| .tl-num { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 2px; color: var(--muted); } | |
| .tl-name { font-family: 'DM Serif Display', serif; font-size: 1.5rem; } | |
| .tl-sub { font-size: 0.8rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; } | |
| .tl-body { font-size: 0.9rem; color: var(--muted); margin: 0.5rem 0 1rem; } | |
| .outputs-list { | |
| display: flex; flex-wrap: wrap; gap: 8px; | |
| } | |
| .output-tag { | |
| background: white; | |
| border: 1.5px solid var(--border); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| /* ── EVM ── */ | |
| #evm { background: var(--ink); color: var(--paper); } | |
| #evm .section-title { color: var(--paper); } | |
| #evm .section-desc { color: rgba(245,240,232,.6); } | |
| #evm .divider { background: var(--gold); } | |
| .evm-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 1px; | |
| background: rgba(245,240,232,0.1); | |
| border: 1px solid rgba(245,240,232,0.1); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| margin-bottom: 3rem; | |
| } | |
| .evm-card { | |
| background: rgba(255,255,255,0.04); | |
| padding: 1.5rem; | |
| transition: background .2s; | |
| } | |
| .evm-card:hover { background: rgba(255,255,255,0.09); } | |
| .evm-acronym { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: 1px; } | |
| .evm-full { font-size: 0.72rem; color: rgba(245,240,232,.4); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8rem; } | |
| .evm-formula { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.85rem; | |
| background: rgba(245,240,232,0.08); | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| margin-bottom: 0.8rem; | |
| color: var(--gold); | |
| } | |
| .evm-good { font-size: 0.78rem; color: #5fd48a; } | |
| .evm-bad { font-size: 0.78rem; color: #f05e5e; } | |
| .evm-interp { font-size: 0.8rem; color: rgba(245,240,232,.55); margin-top: 0.4rem; } | |
| .evm-legend { | |
| display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; | |
| padding: 1.5rem; | |
| background: rgba(255,255,255,0.04); | |
| border-radius: 6px; | |
| border: 1px solid rgba(245,240,232,0.1); | |
| } | |
| .leg-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; } | |
| .leg-dot { width: 10px; height: 10px; border-radius: 50%; } | |
| /* ── RISK ── */ | |
| #risk { background: var(--paper); } | |
| .risk-matrix { | |
| display: grid; | |
| grid-template-columns: 40px repeat(4, 1fr); | |
| grid-template-rows: repeat(4, 1fr) 40px; | |
| gap: 3px; | |
| width: 100%; | |
| max-width: 520px; | |
| aspect-ratio: 1; | |
| margin: 0 auto 2rem; | |
| } | |
| .rm-cell { | |
| border-radius: 3px; | |
| display: grid; place-items: center; | |
| font-size: 0.7rem; font-weight: 700; | |
| color: white; | |
| text-align: center; | |
| } | |
| .rm-label { background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 600; } | |
| .rm-low { background: #5fd48a; color: #0a2e14; } | |
| .rm-med { background: var(--gold); color: #2e1a00; } | |
| .rm-high { background: var(--accent); } | |
| .rm-crit { background: #8b0000; } | |
| .rm-axis-y { | |
| writing-mode: vertical-lr; | |
| transform: rotate(180deg); | |
| text-align: center; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| grid-column: 1; | |
| grid-row: 1 / 5; | |
| } | |
| .rm-axis-x { | |
| font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; | |
| text-transform: uppercase; color: var(--muted); text-align: center; | |
| grid-column: 2 / 6; | |
| } | |
| .risk-responses { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; | |
| } | |
| .resp-card { | |
| background: var(--card); | |
| border: 2px solid var(--border); | |
| border-radius: 6px; | |
| padding: 1.5rem; | |
| } | |
| .resp-card h4 { | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: 1.1rem; letter-spacing: 1px; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid; | |
| } | |
| .resp-card.threats h4 { border-color: var(--accent); color: var(--accent); } | |
| .resp-card.opps h4 { border-color: var(--teal); color: var(--teal); } | |
| .resp-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0.7rem; font-size: 0.85rem; } | |
| .resp-icon { font-size: 1rem; flex-shrink: 0; } | |
| .resp-name { font-weight: 700; display: block; } | |
| .resp-desc { color: var(--muted); font-size: 0.78rem; } | |
| /* ── AGILE ── */ | |
| #agile { background: var(--cream); } | |
| .scrum-board { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| } | |
| .scrum-col { | |
| background: white; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| border: 2px solid var(--border); | |
| } | |
| .scrum-col-header { | |
| padding: 1rem; | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: 1rem; letter-spacing: 1px; | |
| text-align: center; | |
| } | |
| .col-roles .scrum-col-header { background: var(--blue); color: white; } | |
| .col-events .scrum-col-header { background: var(--teal); color: white; } | |
| .col-artifacts .scrum-col-header { background: var(--accent); color: white; } | |
| .scrum-item { | |
| padding: 0.75rem 1rem; | |
| border-top: 1px solid var(--border); | |
| font-size: 0.85rem; | |
| } | |
| .scrum-item strong { display: block; font-weight: 700; font-size: 0.82rem; } | |
| .scrum-item span { font-size: 0.75rem; color: var(--muted); } | |
| /* Sprint cycle */ | |
| .sprint-cycle { | |
| display: flex; | |
| gap: 0; | |
| border: 2px solid var(--ink); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| margin-bottom: 3rem; | |
| } | |
| .sprint-step { | |
| flex: 1; padding: 1.2rem 0.8rem; text-align: center; | |
| position: relative; | |
| } | |
| .sprint-step + .sprint-step { border-left: 1px solid var(--border); } | |
| .sprint-step::after { | |
| content: '→'; | |
| position: absolute; right: -10px; top: 50%; transform: translateY(-50%); | |
| font-size: 1.2rem; color: var(--muted); z-index: 1; | |
| } | |
| .sprint-step:last-child::after { display: none; } | |
| .ss-icon { font-size: 1.8rem; margin-bottom: 0.3rem; } | |
| .ss-name { font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 0.3rem; } | |
| .ss-time { font-size: 0.68rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; } | |
| /* Burndown SVG */ | |
| .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } | |
| .chart-card { | |
| background: white; | |
| border: 2px solid var(--border); | |
| border-radius: 6px; | |
| padding: 1.5rem; | |
| } | |
| .chart-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 1rem; } | |
| .chart-svg { width: 100%; } | |
| /* ── PERFORMANCE DOMAINS ── */ | |
| #domains { background: var(--ink); color: var(--paper); } | |
| #domains .section-title { color: var(--paper); } | |
| #domains .section-desc { color: rgba(245,240,232,.6); } | |
| #domains .divider { background: var(--teal); } | |
| .domains-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1px; | |
| background: rgba(245,240,232,0.1); | |
| border: 1px solid rgba(245,240,232,0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .domain-card { | |
| padding: 1.8rem 1.2rem; | |
| background: rgba(255,255,255,0.03); | |
| transition: background .25s; | |
| cursor: default; | |
| } | |
| .domain-card:hover { background: rgba(255,255,255,0.08); } | |
| .domain-num { | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: 3rem; line-height: 1; | |
| color: rgba(245,240,232,0.06); | |
| margin-bottom: 0.5rem; | |
| } | |
| .domain-icon { font-size: 1.6rem; margin-bottom: 0.5rem; } | |
| .domain-name { font-family: 'DM Serif Display', serif; font-size: 1rem; margin-bottom: 0.5rem; } | |
| .domain-desc { font-size: 0.78rem; color: rgba(245,240,232,.45); line-height: 1.5; } | |
| /* ── QUALITY ── */ | |
| #quality { background: var(--paper); } | |
| .quality-funnel { | |
| display: flex; flex-direction: column; align-items: center; gap: 0; margin: 2rem auto; | |
| max-width: 560px; | |
| } | |
| .qf-layer { | |
| width: 100%; | |
| padding: 1.2rem 2rem; | |
| text-align: center; | |
| border-radius: 4px; | |
| transition: transform .2s; | |
| } | |
| .qf-layer:hover { transform: scale(1.02); } | |
| .qf-layer-1 { background: var(--blue); color: white; width: 100%; } | |
| .qf-layer-2 { background: var(--teal); color: white; width: 85%; } | |
| .qf-layer-3 { background: var(--accent); color: white; width: 70%; } | |
| .qf-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 1px; } | |
| .qf-sub { font-size: 0.78rem; opacity: 0.75; margin-top: 2px; } | |
| .qf-arrow { font-size: 1.5rem; color: var(--muted); margin: 2px 0; } | |
| .coq-grid { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; | |
| } | |
| .coq-card { | |
| border-radius: 6px; overflow: hidden; border: 2px solid var(--border); | |
| } | |
| .coq-head { | |
| padding: 1rem 1.2rem; | |
| font-family: 'Bebas Neue', sans-serif; | |
| font-size: 1rem; letter-spacing: 1px; | |
| display: flex; align-items: center; gap: 0.5rem; | |
| } | |
| .coq-conf .coq-head { background: #e8f4ed; color: var(--teal); } | |
| .coq-nonconf .coq-head { background: #fceae8; color: var(--accent); } | |
| .coq-items { padding: 1rem; } | |
| .coq-item { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 0.4rem 0; font-size: 0.85rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .coq-item:last-child { border-bottom: none; } | |
| .coq-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } | |
| /* ── CONTRACTS ── */ | |
| #contracts { background: var(--cream); } | |
| .contract-table { | |
| width: 100%; border-collapse: collapse; background: white; | |
| border-radius: 8px; overflow: hidden; | |
| box-shadow: var(--shadow); | |
| margin-top: 2rem; | |
| } | |
| .contract-table th { | |
| background: var(--ink); color: var(--paper); | |
| padding: 1rem; font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 1px; | |
| text-align: left; | |
| } | |
| .contract-table td { padding: 0.9rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--border); } | |
| .contract-table tr:last-child td { border-bottom: none; } | |
| .contract-table tr:nth-child(even) td { background: #fafafa; } | |
| .risk-badge { | |
| display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; | |
| } | |
| .risk-low { background: #e8f4ed; color: var(--teal); } | |
| .risk-med { background: #fef3e2; color: #b45309; } | |
| .risk-high { background: #fceae8; color: var(--accent); } | |
| /* ── STAKEHOLDER ── */ | |
| #stakeholder { background: var(--paper); } | |
| .engagement-matrix { | |
| display: grid; | |
| grid-template-columns: 80px 1fr; | |
| gap: 0; | |
| max-width: 700px; | |
| margin: 2rem 0; | |
| border: 2px solid var(--ink); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .em-axis { | |
| background: var(--ink); color: var(--paper); | |
| display: grid; place-items: center; | |
| writing-mode: vertical-lr; transform: rotate(180deg); | |
| font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 2px; | |
| } | |
| .em-rows { } | |
| .em-row { | |
| display: flex; align-items: stretch; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .em-row:last-child { border-bottom: none; } | |
| .em-level { | |
| width: 120px; flex-shrink: 0; | |
| padding: 1rem; font-weight: 700; font-size: 0.82rem; | |
| display: flex; align-items: center; | |
| border-right: 1px solid var(--border); | |
| } | |
| .em-desc { padding: 1rem; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; } | |
| .em-dot { | |
| width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; | |
| } | |
| /* Communication formula */ | |
| .comm-formula { | |
| background: var(--ink); | |
| color: var(--paper); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| display: flex; align-items: center; justify-content: center; gap: 2rem; | |
| flex-wrap: wrap; | |
| margin-top: 2rem; | |
| } | |
| .cf-part { text-align: center; } | |
| .cf-big { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--gold); } | |
| .cf-small { font-size: 0.72rem; color: rgba(245,240,232,.5); letter-spacing: 1px; text-transform: uppercase; } | |
| .cf-op { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: rgba(245,240,232,.3); } | |
| /* ── FOOTER ── */ | |
| footer { | |
| background: var(--ink); color: rgba(245,240,232,.5); | |
| padding: 3rem 2rem; text-align: center; | |
| font-size: 0.82rem; | |
| } | |
| footer strong { color: var(--paper); } | |
| footer .footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| .triangle-grid { grid-template-columns: 1fr; } | |
| .ito-wrap { flex-direction: column; gap: 1rem; } | |
| .ito-block + .ito-block::before { content: '↓'; left: 50%; top: -18px; } | |
| .risk-responses { grid-template-columns: 1fr; } | |
| .scrum-board { grid-template-columns: 1fr; } | |
| .domains-grid { grid-template-columns: 1fr 1fr; } | |
| .charts-row { grid-template-columns: 1fr; } | |
| .coq-grid { grid-template-columns: 1fr; } | |
| .nav-links { display: none; } | |
| .sprint-cycle { flex-direction: column; } | |
| .sprint-step::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -14px; } | |
| .sprint-step { border-left: none ; border-top: 1px solid var(--border); } | |
| .sprint-step:first-child { border-top: none; } | |
| } | |
| /* ── ANIMATIONS ── */ | |
| .fade-up { | |
| opacity: 0; transform: translateY(30px); | |
| transition: opacity .7s ease, transform .7s ease; | |
| } | |
| .fade-up.visible { opacity: 1; transform: translateY(0); } | |
| [class*="delay-1"] { transition-delay: 0.1s ; } | |
| [class*="delay-2"] { transition-delay: 0.2s ; } | |
| [class*="delay-3"] { transition-delay: 0.3s ; } | |
| [class*="delay-4"] { transition-delay: 0.4s ; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav> | |
| <span class="nav-logo">PM</span> | |
| <ul class="nav-links"> | |
| <li><a href="#foundation">Foundation</a></li> | |
| <li><a href="#process">Process</a></li> | |
| <li><a href="#domains">Domains</a></li> | |
| <li><a href="#evm">EVM</a></li> | |
| <li><a href="#risk">Risk</a></li> | |
| <li><a href="#agile">Agile</a></li> | |
| <li><a href="#quality">Quality</a></li> | |
| <li><a href="#contracts">Contracts</a></li> | |
| </ul> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="hero-grid"></div> | |
| <div class="hero-inner"> | |
| <div class="hero-tag">// Visual Learning Guide</div> | |
| <h1>Project Management</h1> | |
| <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> | |
| <div class="hero-cta"> | |
| <a href="#foundation" class="btn btn-primary">Start Learning</a> | |
| <a href="#evm" class="btn btn-outline">Jump to EVM</a> | |
| </div> | |
| </div> | |
| <div class="hero-scroll"> | |
| <span>Scroll</span> | |
| <div class="scroll-line"></div> | |
| </div> | |
| </section> | |
| <!-- ── FOUNDATION ── --> | |
| <section id="foundation"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 01 — Foundation</span> | |
| <h2 class="section-title">What is Project<br>Management?</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div class="triangle-grid"> | |
| <div class="triangle-card fade-up"> | |
| <div class="tc-icon">⏱️</div> | |
| <div class="tc-title">Temporary</div> | |
| <div class="tc-body">Every project has a definite start and a definite end. Unlike operations, it does not go on indefinitely.</div> | |
| </div> | |
| <div class="triangle-card fade-up delay-2"> | |
| <div class="tc-icon">✦</div> | |
| <div class="tc-title">Unique</div> | |
| <div class="tc-body">Creates a specific product, service, or result that has never been created in exactly the same way before.</div> | |
| </div> | |
| <div class="triangle-card fade-up delay-3"> | |
| <div class="tc-icon">🌊</div> | |
| <div class="tc-title">Progressive Elaboration</div> | |
| <div class="tc-body">Details become clearer as the project advances. Plans are refined in waves as understanding deepens.</div> | |
| </div> | |
| </div> | |
| <!-- ITO Model --> | |
| <span class="section-tag" style="margin-top:3rem; display:block;">// The I-T-O Model — DNA of Every Process</span> | |
| <h3 class="section-title" style="font-size:1.8rem; margin-bottom:1.5rem;">Inputs → Tools & Techniques → Outputs</h3> | |
| <div class="ito-wrap fade-up"> | |
| <div class="ito-block"> | |
| <div class="ito-label">Component A</div> | |
| <div class="ito-title">INPUT</div> | |
| <div class="ito-example">Business Case · Agreements · EEFs · OPAs</div> | |
| </div> | |
| <div class="ito-block"> | |
| <div class="ito-label">Component B</div> | |
| <div class="ito-title">TOOLS &<br>TECHNIQUES</div> | |
| <div class="ito-example">Expert Judgment · Data Gathering · Meetings</div> | |
| </div> | |
| <div class="ito-block"> | |
| <div class="ito-label">Component C</div> | |
| <div class="ito-title">OUTPUT</div> | |
| <div class="ito-example">Project Charter · Assumption Log · Stakeholder Register</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── PROCESS GROUPS ── --> | |
| <section id="process"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 02 — The Lifecycle</span> | |
| <h2 class="section-title">Five Process Groups</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div class="timeline"> | |
| <div class="tl-item"> | |
| <div class="tl-dot tl-dot-1">1</div> | |
| <div class="tl-header"> | |
| <span class="tl-num">INITIATING</span> | |
| <span class="tl-name">The "Why" & "Who"</span> | |
| </div> | |
| <div class="tl-sub">Authorization • Strategic Alignment</div> | |
| <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> | |
| <div class="outputs-list"> | |
| <span class="output-tag">Project Charter</span> | |
| <span class="output-tag">Stakeholder Register</span> | |
| <span class="output-tag">Assumption Log</span> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-dot tl-dot-2">2</div> | |
| <div class="tl-header"> | |
| <span class="tl-num">PLANNING</span> | |
| <span class="tl-name">The "How" — Most Intensive</span> | |
| </div> | |
| <div class="tl-sub">Performance Measurement Baseline (Scope + Schedule + Cost)</div> | |
| <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> | |
| <div class="outputs-list"> | |
| <span class="output-tag">WBS + WBS Dictionary</span> | |
| <span class="output-tag">Schedule Baseline</span> | |
| <span class="output-tag">Cost Baseline (S-Curve)</span> | |
| <span class="output-tag">Project Management Plan</span> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-dot tl-dot-3">3</div> | |
| <div class="tl-header"> | |
| <span class="tl-num">EXECUTING</span> | |
| <span class="tl-name">The "Do"</span> | |
| </div> | |
| <div class="tl-sub">Team Development • Quality Assurance • Stakeholder Engagement</div> | |
| <div class="tl-body">Leading and performing the work, building team competence, managing communications, and ensuring quality processes are appropriate.</div> | |
| <div class="outputs-list"> | |
| <span class="output-tag">Deliverables</span> | |
| <span class="output-tag">Work Performance Data</span> | |
| <span class="output-tag">Change Requests</span> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-dot tl-dot-4">4</div> | |
| <div class="tl-header"> | |
| <span class="tl-num">MONITORING & CONTROLLING</span> | |
| <span class="tl-name">The "Check" — Runs in Parallel</span> | |
| </div> | |
| <div class="tl-sub">EVM • Integrated Change Control • Risk Monitoring</div> | |
| <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> | |
| <div class="outputs-list"> | |
| <span class="output-tag">Work Performance Information</span> | |
| <span class="output-tag">Change Requests</span> | |
| <span class="output-tag">Corrective/Preventive Actions</span> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-dot tl-dot-5">5</div> | |
| <div class="tl-header"> | |
| <span class="tl-num">CLOSING</span> | |
| <span class="tl-name">The "Finish"</span> | |
| </div> | |
| <div class="tl-sub">Administrative Closure • Lessons Learned • Knowledge Transfer</div> | |
| <div class="tl-body">The bridge between this project and future success. Archive records, transfer deliverables, and capture the most valuable asset — experience.</div> | |
| <div class="outputs-list"> | |
| <span class="output-tag">Final Report</span> | |
| <span class="output-tag">Lessons Learned Register</span> | |
| <span class="output-tag">Updated OPAs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── PERFORMANCE DOMAINS ── --> | |
| <section id="domains"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 03 — PMBOK 7th Edition</span> | |
| <h2 class="section-title">8 Performance Domains</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div class="domains-grid fade-up"> | |
| <div class="domain-card"> | |
| <div class="domain-num">01</div> | |
| <div class="domain-icon">🤝</div> | |
| <div class="domain-name">Stakeholder</div> | |
| <div class="domain-desc">Identify, analyze, plan, and continuously engage all stakeholders. Projects fail because of people, not technology.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">02</div> | |
| <div class="domain-icon">👥</div> | |
| <div class="domain-name">Team</div> | |
| <div class="domain-desc">Build high-performing teams through psychological safety, servant leadership, emotional intelligence, and conflict resolution.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">03</div> | |
| <div class="domain-icon">🔄</div> | |
| <div class="domain-name">Development Approach & Life Cycle</div> | |
| <div class="domain-desc">Select the right blend — predictive, adaptive, or hybrid — based on uncertainty, complexity, and constraints.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">04</div> | |
| <div class="domain-icon">📋</div> | |
| <div class="domain-name">Planning</div> | |
| <div class="domain-desc">Progressive elaboration, rolling wave planning, scenario planning — planning is continuous, not a one-time event.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">05</div> | |
| <div class="domain-icon">⚙️</div> | |
| <div class="domain-name">Project Work</div> | |
| <div class="domain-desc">Prioritize work using MoSCoW, manage knowledge, distinguish issues from risks, and make data-driven decisions.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">06</div> | |
| <div class="domain-icon">🎯</div> | |
| <div class="domain-name">Delivery</div> | |
| <div class="domain-desc">Focus on value realization — not just scope completion. Elicit requirements, manage quality, and ensure stakeholders receive what they need.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">07</div> | |
| <div class="domain-icon">📊</div> | |
| <div class="domain-name">Measurement</div> | |
| <div class="domain-desc">EVM, velocity, burndowns, KPIs. What gets measured gets managed. Tailor dashboards to audience — strategic vs. operational.</div> | |
| </div> | |
| <div class="domain-card"> | |
| <div class="domain-num">08</div> | |
| <div class="domain-icon">🌫️</div> | |
| <div class="domain-name">Uncertainty</div> | |
| <div class="domain-desc">Navigate ambiguity, volatility, and complexity through risk management, experimentation, iteration, and resilience.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── EVM ── --> | |
| <section id="evm"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 04 — Technical Pillar</span> | |
| <h2 class="section-title">Earned Value<br>Management</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div class="evm-grid fade-up"> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#5fd48a">CV</div> | |
| <div class="evm-full">Cost Variance</div> | |
| <div class="evm-formula">EV − AC</div> | |
| <div class="evm-good">✓ Positive = Under Budget</div> | |
| <div class="evm-bad">✗ Negative = Over Budget</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#5fd48a">SV</div> | |
| <div class="evm-full">Schedule Variance</div> | |
| <div class="evm-formula">EV − PV</div> | |
| <div class="evm-good">✓ Positive = Ahead of Schedule</div> | |
| <div class="evm-bad">✗ Negative = Behind Schedule</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:var(--gold)">CPI</div> | |
| <div class="evm-full">Cost Performance Index</div> | |
| <div class="evm-formula">EV / AC</div> | |
| <div class="evm-good">✓ > 1.0 = Efficient Spending</div> | |
| <div class="evm-bad">✗ < 1.0 = Over Spending</div> | |
| <div class="evm-interp">e.g. CPI 1.1 = $1.10 per $1 spent</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:var(--gold)">SPI</div> | |
| <div class="evm-full">Schedule Performance Index</div> | |
| <div class="evm-formula">EV / PV</div> | |
| <div class="evm-good">✓ > 1.0 = Ahead of Plan</div> | |
| <div class="evm-bad">✗ < 1.0 = Behind Plan</div> | |
| <div class="evm-interp">e.g. SPI 0.8 = 80% of planned rate</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#c8a2e8">EAC</div> | |
| <div class="evm-full">Estimate at Completion</div> | |
| <div class="evm-formula">BAC / CPI</div> | |
| <div class="evm-good">✓ Lower = Favorable forecast</div> | |
| <div class="evm-bad">✗ Higher = Cost overrun ahead</div> | |
| <div class="evm-interp">Typical variance formula</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#c8a2e8">ETC</div> | |
| <div class="evm-full">Estimate to Complete</div> | |
| <div class="evm-formula">EAC − AC</div> | |
| <div class="evm-good">✓ Lower = Less remaining cost</div> | |
| <div class="evm-bad">✗ Higher = More to spend</div> | |
| <div class="evm-interp">Remaining cost needed</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#f4a261">VAC</div> | |
| <div class="evm-full">Variance at Completion</div> | |
| <div class="evm-formula">BAC − EAC</div> | |
| <div class="evm-good">✓ Positive = Budget surplus</div> | |
| <div class="evm-bad">✗ Negative = Budget deficit</div> | |
| <div class="evm-interp">Final budget over/under</div> | |
| </div> | |
| <div class="evm-card"> | |
| <div class="evm-acronym" style="color:#f4a261">TCPI</div> | |
| <div class="evm-full">To-Complete Perf. Index</div> | |
| <div class="evm-formula">(BAC−EV)/(BAC−AC)</div> | |
| <div class="evm-good">✓ < 1.0 = Easier to hit budget</div> | |
| <div class="evm-bad">✗ > 1.0 = Harder efficiency needed</div> | |
| <div class="evm-interp">Future efficiency required</div> | |
| </div> | |
| </div> | |
| <div class="evm-legend"> | |
| <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> | |
| <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> | |
| <div class="leg-item"><div class="leg-dot" style="background:#f05e5e"></div><span><strong>AC</strong> — Actual Cost: actual cost incurred</span></div> | |
| <div class="leg-item"><div class="leg-dot" style="background:#c8a2e8"></div><span><strong>BAC</strong> — Budget at Completion: total approved budget</span></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── RISK ── --> | |
| <section id="risk"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 05 — Technical Pillar</span> | |
| <h2 class="section-title">Risk Management</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; flex-wrap:wrap;"> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin-bottom:1rem;">Probability × Impact Matrix</h3> | |
| <div class="risk-matrix"> | |
| <div class="rm-axis-y">PROBABILITY</div> | |
| <!-- Row 1: High probability --> | |
| <div class="rm-cell rm-med" style="grid-column:2">Med</div> | |
| <div class="rm-cell rm-high" style="grid-column:3">High</div> | |
| <div class="rm-cell rm-crit" style="grid-column:4">CRITICAL</div> | |
| <div class="rm-cell rm-crit" style="grid-column:5">CRITICAL</div> | |
| <!-- Row 2 --> | |
| <div class="rm-cell rm-low" style="grid-column:2">Low</div> | |
| <div class="rm-cell rm-med" style="grid-column:3">Med</div> | |
| <div class="rm-cell rm-high" style="grid-column:4">High</div> | |
| <div class="rm-cell rm-crit" style="grid-column:5">CRITICAL</div> | |
| <!-- Row 3 --> | |
| <div class="rm-cell rm-low" style="grid-column:2">Low</div> | |
| <div class="rm-cell rm-low" style="grid-column:3">Low</div> | |
| <div class="rm-cell rm-med" style="grid-column:4">Med</div> | |
| <div class="rm-cell rm-high" style="grid-column:5">High</div> | |
| <!-- Row 4: Low probability --> | |
| <div class="rm-cell rm-low" style="grid-column:2">Min</div> | |
| <div class="rm-cell rm-low" style="grid-column:3">Low</div> | |
| <div class="rm-cell rm-low" style="grid-column:4">Low</div> | |
| <div class="rm-cell rm-med" style="grid-column:5">Med</div> | |
| <!-- X axis --> | |
| <div class="rm-axis-x rm-label" style="grid-column:2/6; grid-row:5">← IMPACT →</div> | |
| </div> | |
| <!-- Legend --> | |
| <div style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-size:0.78rem; font-weight:600;"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin-bottom:1rem;">Reserves</h3> | |
| <div style="display:flex;flex-direction:column;gap:1rem; margin-bottom:2rem;"> | |
| <div style="background:var(--ink);color:var(--paper);border-radius:6px;padding:1.2rem;"> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.3rem;">CONTINGENCY RESERVE</div> | |
| <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> | |
| </div> | |
| <div style="background:var(--blue);color:var(--paper);border-radius:6px;padding:1.2rem;"> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.3rem;">MANAGEMENT RESERVE</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div style="background:var(--cream);border-radius:6px;padding:1.2rem;border:2px solid var(--border);"> | |
| <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> | |
| <div style="font-family:'JetBrains Mono',monospace;font-size:1.1rem;margin-bottom:0.5rem;">EMV = P × I</div> | |
| <div style="font-size:0.78rem;color:var(--muted);">Expected Monetary Value = Probability × Impact (in currency). Used for decision trees and budget reserves.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.4rem; margin:3rem 0 1.5rem;">Response Strategies</h3> | |
| <div class="risk-responses"> | |
| <div class="resp-card threats"> | |
| <h4>⚠️ For Threats</h4> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="resp-card opps"> | |
| <h4>✨ For Opportunities</h4> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── AGILE ── --> | |
| <section id="agile"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 06 — Adaptive Practices</span> | |
| <h2 class="section-title">Agile & Scrum</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <!-- Scrum Board --> | |
| <div class="scrum-board fade-up"> | |
| <div class="scrum-col col-roles"> | |
| <div class="scrum-col-header">⚙️ Roles</div> | |
| <div class="scrum-item"><strong>Product Owner</strong><span>Maximizes value; manages & prioritizes the product backlog; voice of the stakeholder</span></div> | |
| <div class="scrum-item"><strong>Scrum Master</strong><span>Servant leader; removes impediments; coaches agile practices; facilitates events</span></div> | |
| <div class="scrum-item"><strong>Development Team</strong><span>Self-organizing, cross-functional group that delivers a potentially releasable increment each sprint</span></div> | |
| </div> | |
| <div class="scrum-col col-events"> | |
| <div class="scrum-col-header">📅 Events</div> | |
| <div class="scrum-item"><strong>Sprint</strong><span>1–4 week time-box producing a usable increment</span></div> | |
| <div class="scrum-item"><strong>Sprint Planning</strong><span>Team selects backlog items and plans delivery</span></div> | |
| <div class="scrum-item"><strong>Daily Scrum</strong><span>15-min sync to inspect progress toward sprint goal</span></div> | |
| <div class="scrum-item"><strong>Sprint Review</strong><span>Demo increment; gather stakeholder feedback</span></div> | |
| <div class="scrum-item"><strong>Sprint Retrospective</strong><span>Reflect on process; identify improvements</span></div> | |
| </div> | |
| <div class="scrum-col col-artifacts"> | |
| <div class="scrum-col-header">📦 Artifacts</div> | |
| <div class="scrum-item"><strong>Product Backlog</strong><span>Ordered list of everything needed; dynamically managed by Product Owner</span></div> | |
| <div class="scrum-item"><strong>Sprint Backlog</strong><span>Selected items + plan to deliver them during the sprint</span></div> | |
| <div class="scrum-item"><strong>Increment</strong><span>Sum of completed items; must be "Done" and potentially releasable</span></div> | |
| </div> | |
| </div> | |
| <!-- Sprint Cycle --> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">The Sprint Cycle</h3> | |
| <div class="sprint-cycle fade-up"> | |
| <div class="sprint-step" style="background:#f0f4ff"> | |
| <div class="ss-icon">📋</div> | |
| <div class="ss-name">Sprint Planning</div> | |
| <div class="ss-time">Start of Sprint</div> | |
| </div> | |
| <div class="sprint-step" style="background:#f0fbf8"> | |
| <div class="ss-icon">🔨</div> | |
| <div class="ss-name">Sprint Execution</div> | |
| <div class="ss-time">Daily + Daily Scrum</div> | |
| </div> | |
| <div class="sprint-step" style="background:#fff7e6"> | |
| <div class="ss-icon">🎯</div> | |
| <div class="ss-name">Sprint Review</div> | |
| <div class="ss-time">End of Sprint</div> | |
| </div> | |
| <div class="sprint-step" style="background:#fdf0ee"> | |
| <div class="ss-icon">🔁</div> | |
| <div class="ss-name">Retrospective</div> | |
| <div class="ss-time">Continuous Improvement</div> | |
| </div> | |
| </div> | |
| <!-- Charts --> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">Agile Metrics — Visual Reference</h3> | |
| <div class="charts-row fade-up"> | |
| <div class="chart-card"> | |
| <div class="chart-title">📉 Burndown Chart — Remaining Work Over Time</div> | |
| <svg class="chart-svg" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="burnGrad" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#c8410a" stop-opacity="0.25"/> | |
| <stop offset="100%" stop-color="#c8410a" stop-opacity="0"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Grid --> | |
| <line x1="40" y1="20" x2="40" y2="150" stroke="#e0d8cc" stroke-width="1"/> | |
| <line x1="40" y1="150" x2="290" y2="150" stroke="#e0d8cc" stroke-width="1"/> | |
| <line x1="40" y1="60" x2="290" y2="60" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/> | |
| <line x1="40" y1="105" x2="290" y2="105" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/> | |
| <!-- Ideal line --> | |
| <line x1="40" y1="20" x2="290" y2="150" stroke="#1a7a6e" stroke-width="1.5" stroke-dasharray="6,4" opacity="0.6"/> | |
| <!-- Actual burndown area --> | |
| <path d="M40,20 L90,35 L140,55 L165,90 L200,100 L240,120 L290,145 L290,150 L40,150 Z" fill="url(#burnGrad)"/> | |
| <!-- Actual burndown line --> | |
| <path d="M40,20 L90,35 L140,55 L165,90 L200,100 L240,120 L290,145" fill="none" stroke="#c8410a" stroke-width="2.5"/> | |
| <!-- Points --> | |
| <circle cx="40" cy="20" r="3.5" fill="#c8410a"/> | |
| <circle cx="90" cy="35" r="3" fill="#c8410a"/> | |
| <circle cx="140" cy="55" r="3" fill="#c8410a"/> | |
| <circle cx="165" cy="90" r="3" fill="#c8410a"/> | |
| <circle cx="200" cy="100" r="3" fill="#c8410a"/> | |
| <circle cx="240" cy="120" r="3" fill="#c8410a"/> | |
| <circle cx="290" cy="145" r="3.5" fill="#c8410a"/> | |
| <!-- Labels --> | |
| <text x="36" y="154" text-anchor="end" font-size="9" fill="#7a6e60">Day 1</text> | |
| <text x="290" y="162" text-anchor="middle" font-size="9" fill="#7a6e60">Day 14</text> | |
| <text x="14" y="25" font-size="8" fill="#7a6e60" text-anchor="middle">100</text> | |
| <text x="14" y="155" font-size="8" fill="#7a6e60" text-anchor="middle">0</text> | |
| <text x="25" y="90" font-size="8" fill="#1a7a6e" transform="rotate(-90 25 90)" text-anchor="middle">Work Remaining</text> | |
| <!-- Legend --> | |
| <line x1="45" y1="168" x2="65" y2="168" stroke="#c8410a" stroke-width="2"/> | |
| <text x="68" y="171" font-size="8" fill="#0d0d0d">Actual</text> | |
| <line x1="110" y1="168" x2="130" y2="168" stroke="#1a7a6e" stroke-width="1.5" stroke-dasharray="4,3"/> | |
| <text x="133" y="171" font-size="8" fill="#0d0d0d">Ideal</text> | |
| </svg> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title">📈 Burnup Chart — Completed Work Over Time</div> | |
| <svg class="chart-svg" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="burnupGrad" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#1a7a6e" stop-opacity="0.3"/> | |
| <stop offset="100%" stop-color="#1a7a6e" stop-opacity="0.05"/> | |
| </linearGradient> | |
| </defs> | |
| <line x1="40" y1="20" x2="40" y2="150" stroke="#e0d8cc" stroke-width="1"/> | |
| <line x1="40" y1="150" x2="290" y2="150" stroke="#e0d8cc" stroke-width="1"/> | |
| <line x1="40" y1="60" x2="290" y2="60" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/> | |
| <line x1="40" y1="105" x2="290" y2="105" stroke="#e0d8cc" stroke-width="0.5" stroke-dasharray="3,3"/> | |
| <!-- Scope line --> | |
| <line x1="40" y1="30" x2="200" y2="30" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="5,4"/> | |
| <line x1="200" y1="30" x2="200" y2="22" stroke="#d4a017" stroke-width="1.5"/> | |
| <line x1="200" y1="22" x2="290" y2="22" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="5,4"/> | |
| <text x="205" y="19" font-size="7" fill="#d4a017">Scope added</text> | |
| <!-- Completed area --> | |
| <path d="M40,150 L90,135 L140,115 L180,90 L230,65 L290,30 L290,150 Z" fill="url(#burnupGrad)"/> | |
| <!-- Completed line --> | |
| <path d="M40,150 L90,135 L140,115 L180,90 L230,65 L290,30" fill="none" stroke="#1a7a6e" stroke-width="2.5"/> | |
| <circle cx="40" cy="150" r="3.5" fill="#1a7a6e"/> | |
| <circle cx="290" cy="30" r="3.5" fill="#1a7a6e"/> | |
| <text x="36" y="154" text-anchor="end" font-size="9" fill="#7a6e60">Day 1</text> | |
| <text x="290" y="162" text-anchor="middle" font-size="9" fill="#7a6e60">Day 14</text> | |
| <text x="14" y="25" font-size="8" fill="#7a6e60" text-anchor="middle">100</text> | |
| <text x="14" y="155" font-size="8" fill="#7a6e60" text-anchor="middle">0</text> | |
| <text x="25" y="90" font-size="8" fill="#1a7a6e" transform="rotate(-90 25 90)" text-anchor="middle">Work Completed</text> | |
| <line x1="45" y1="168" x2="65" y2="168" stroke="#1a7a6e" stroke-width="2"/> | |
| <text x="68" y="171" font-size="8" fill="#0d0d0d">Completed</text> | |
| <line x1="118" y1="168" x2="138" y2="168" stroke="#d4a017" stroke-width="1.5" stroke-dasharray="4,3"/> | |
| <text x="141" y="171" font-size="8" fill="#0d0d0d">Scope</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Approaches comparison --> | |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.3rem; margin:2.5rem 0 1rem;">Choosing Your Approach</h3> | |
| <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="fade-up"> | |
| <div style="background:var(--blue);color:white;border-radius:8px;padding:1.5rem;"> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">PREDICTIVE</div> | |
| <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Sequential · Waterfall · Plan-Driven</div> | |
| <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;"> | |
| <li>Clear, stable requirements</li> | |
| <li>Low uncertainty</li> | |
| <li>Compliance-heavy projects</li> | |
| <li>Safety-critical environments</li> | |
| </ul> | |
| </div> | |
| <div style="background:var(--teal);color:white;border-radius:8px;padding:1.5rem;"> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">ADAPTIVE</div> | |
| <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Iterative · Agile · Feedback-Driven</div> | |
| <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;"> | |
| <li>Evolving requirements</li> | |
| <li>High stakeholder collaboration</li> | |
| <li>Rapid market changes</li> | |
| <li>Innovation projects</li> | |
| </ul> | |
| </div> | |
| <div style="background:var(--accent);color:white;border-radius:8px;padding:1.5rem;"> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:0.5rem;">HYBRID</div> | |
| <div style="font-size:0.8rem;opacity:.75;margin-bottom:1rem;">Blended · Context-Aware</div> | |
| <ul style="font-size:0.82rem;opacity:.85;padding-left:1rem;display:flex;flex-direction:column;gap:0.4rem;"> | |
| <li>Legal contracts + rapid dev</li> | |
| <li>Legacy systems + new features</li> | |
| <li>Mixed team maturity</li> | |
| <li>Most real-world projects</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── QUALITY ── --> | |
| <section id="quality"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 07 — Quality Management</span> | |
| <h2 class="section-title">Quality is Not<br>Gold-Plating</h2> | |
| <div class="divider"></div> | |
| <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> | |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;"> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:1.5rem;">Three Integrated Processes</h3> | |
| <div class="quality-funnel"> | |
| <div class="qf-layer qf-layer-1"> | |
| <div class="qf-title">01 — Plan Quality Management</div> | |
| <div class="qf-sub">Define standards, criteria, and how they'll be demonstrated</div> | |
| </div> | |
| <div class="qf-arrow">↓</div> | |
| <div class="qf-layer qf-layer-2"> | |
| <div class="qf-title">02 — Manage Quality</div> | |
| <div class="qf-sub">Ensure processes are adequate and appropriate — Quality Audits</div> | |
| </div> | |
| <div class="qf-arrow">↓</div> | |
| <div class="qf-layer qf-layer-3"> | |
| <div class="qf-title">03 — Control Quality</div> | |
| <div class="qf-sub">Inspect specific deliverables and identify defects</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:1.5rem;">Cost of Quality (COQ)</h3> | |
| <div class="coq-grid"> | |
| <div class="coq-card coq-conf"> | |
| <div class="coq-head">✅ Conformance Costs</div> | |
| <div class="coq-items"> | |
| <div class="coq-item"><div class="coq-dot" style="background:var(--teal)"></div><span>Prevention: Training, documentation, quality planning</span></div> | |
| <div class="coq-item"><div class="coq-dot" style="background:#1a7a6e80"></div><span>Appraisal: Testing, inspections, audits, reviews</span></div> | |
| </div> | |
| </div> | |
| <div class="coq-card coq-nonconf"> | |
| <div class="coq-head">❌ Non-Conformance</div> | |
| <div class="coq-items"> | |
| <div class="coq-item"><div class="coq-dot" style="background:var(--accent)"></div><span>Internal Failure: Rework, scrap, delays before delivery</span></div> | |
| <div class="coq-item"><div class="coq-dot" style="background:#8b0000"></div><span>External Failure: Warranty, returns, lost business, reputation</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="background:var(--cream);border-radius:6px;padding:1.2rem;margin-top:1rem;border-left:4px solid var(--teal);"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── CONTRACTS ── --> | |
| <section id="contracts"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 08 — Procurement</span> | |
| <h2 class="section-title">Contract Types &<br>Risk Allocation</h2> | |
| <div class="divider"></div> | |
| <p class="section-desc">Contract type selection is a risk management decision. Understand who carries the cost risk before signing anything.</p> | |
| <table class="contract-table fade-up"> | |
| <thead> | |
| <tr> | |
| <th>Contract Type</th> | |
| <th>Description</th> | |
| <th>Risk to Buyer</th> | |
| <th>Best For</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Fixed Price (FFP)</strong></td> | |
| <td>Set price for defined scope</td> | |
| <td><span class="risk-badge risk-low">Low</span></td> | |
| <td>Clear scope, cost certainty needed</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Fixed Price + EPA</strong></td> | |
| <td>Fixed price with economic adjustment clauses</td> | |
| <td><span class="risk-badge risk-low">Low–Med</span></td> | |
| <td>Long-duration, inflation-sensitive contracts</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Cost Plus Fixed Fee (CPFF)</strong></td> | |
| <td>Actual costs + fixed fee</td> | |
| <td><span class="risk-badge risk-high">High</span></td> | |
| <td>Unclear scope, R&D, early-stage projects</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Cost Plus Incentive Fee (CPIF)</strong></td> | |
| <td>Actual costs + incentive for performance</td> | |
| <td><span class="risk-badge" style="background:#fef3e2;color:#b45309">Medium</span></td> | |
| <td>Motivate seller while sharing risk</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Time & Materials (T&M)</strong></td> | |
| <td>Hourly rate + materials</td> | |
| <td><span class="risk-badge" style="background:#fef3e2;color:#b45309">Med–High</span></td> | |
| <td>Unclear scope, staff augmentation</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Cost Plus Award Fee (CPAF)</strong></td> | |
| <td>Actual costs + award based on subjective evaluation</td> | |
| <td><span class="risk-badge risk-high">High</span></td> | |
| <td>Performance difficult to quantify objectively</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <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;"> | |
| <div style="font-size:2.5rem;">⚖️</div> | |
| <div> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── STAKEHOLDER ── --> | |
| <section id="stakeholder" style="background:var(--paper)"> | |
| <div class="section-inner"> | |
| <span class="section-tag">// 09 — Stakeholder Management</span> | |
| <h2 class="section-title">Engagement &<br>Communication</h2> | |
| <div class="divider"></div> | |
| <p class="section-desc">Projects do not fail because of technical problems — they fail because stakeholders were misunderstood, ignored, or misaligned.</p> | |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;"> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:1rem;">Engagement Assessment Matrix</h3> | |
| <div class="engagement-matrix"> | |
| <div class="em-axis">ENGAGEMENT LEVEL</div> | |
| <div class="em-rows"> | |
| <div class="em-row"> | |
| <div class="em-level"><div class="em-dot" style="background:#8b0000"></div>Unaware</div> | |
| <div class="em-desc">Not aware of the project or its potential impacts</div> | |
| </div> | |
| <div class="em-row"> | |
| <div class="em-level"><div class="em-dot" style="background:var(--accent)"></div>Resistant</div> | |
| <div class="em-desc">Aware but actively opposed to change</div> | |
| </div> | |
| <div class="em-row"> | |
| <div class="em-level"><div class="em-dot" style="background:var(--gold)"></div>Neutral</div> | |
| <div class="em-desc">Aware but neither supportive nor opposed</div> | |
| </div> | |
| <div class="em-row"> | |
| <div class="em-level"><div class="em-dot" style="background:var(--teal)"></div>Supportive</div> | |
| <div class="em-desc">Aware and supportive of the project and its outcomes</div> | |
| </div> | |
| <div class="em-row"> | |
| <div class="em-level"><div class="em-dot" style="background:#1a3a6e"></div>Leading</div> | |
| <div class="em-desc">Actively champions the initiative and drives success</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 style="font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:1rem;">Communication Channel Formula</h3> | |
| <div class="comm-formula"> | |
| <div class="cf-part"> | |
| <div class="cf-big">n(n−1)</div> | |
| <div style="border-top:2px solid var(--gold);margin:6px 0;"></div> | |
| <div class="cf-big" style="font-size:2rem;">2</div> | |
| <div class="cf-small">Channels</div> | |
| </div> | |
| <div class="cf-op">=</div> | |
| <div class="cf-part"> | |
| <div class="cf-big" style="font-size:2.5rem;">?</div> | |
| <div class="cf-small">Where n = stakeholders</div> | |
| </div> | |
| </div> | |
| <div style="margin-top:1rem;display:flex;flex-direction:column;gap:0.6rem;"> | |
| <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;"> | |
| <span>5 stakeholders</span><strong>10 channels</strong> | |
| </div> | |
| <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;"> | |
| <span>10 stakeholders</span><strong>45 channels</strong> | |
| </div> | |
| <div style="background:var(--cream);border-radius:4px;padding:0.8rem;font-size:0.82rem;display:flex;justify-content:space-between;"> | |
| <span>20 stakeholders</span><strong>190 channels</strong> | |
| </div> | |
| </div> | |
| <div style="background:var(--cream);border-radius:6px;padding:1rem;margin-top:1rem;"> | |
| <div style="font-size:0.82rem;font-weight:700;margin-bottom:0.5rem;">Communication Methods</div> | |
| <div style="display:flex;flex-direction:column;gap:0.4rem;font-size:0.78rem;color:var(--muted);"> | |
| <div><strong style="color:var(--ink)">Interactive</strong> — Meetings, calls (real-time, two-way)</div> | |
| <div><strong style="color:var(--ink)">Push</strong> — Emails, reports (one-way, sender-controlled)</div> | |
| <div><strong style="color:var(--ink)">Pull</strong> — Portals, dashboards (receiver-controlled access)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── MODERN PM ── --> | |
| <section style="background:var(--ink);color:var(--paper);padding:6rem 2rem;"> | |
| <div class="section-inner"> | |
| <span class="section-tag" style="color:var(--gold)">// 10 — The Modern PM</span> | |
| <h2 class="section-title" style="color:var(--paper)">The Modern Project<br>Manager</h2> | |
| <div class="divider" style="background:var(--teal)"></div> | |
| <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> | |
| <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="fade-up"> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">🧭</div> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Methodology-Agnostic</div> | |
| <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> | |
| </div> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">❤️</div> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Emotionally Intelligent</div> | |
| <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Leads with empathy and servant leadership rather than authority and control.</div> | |
| </div> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">🌊</div> | |
| <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> | |
| <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Manages uncertainty as a constant, building resilience into plans and teams.</div> | |
| </div> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">🎯</div> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Value-Focused</div> | |
| <div style="font-size:0.8rem;color:rgba(245,240,232,.5);">Prioritizes stakeholder engagement and value delivery over rigid adherence to plans.</div> | |
| </div> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">🌱</div> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Sustainability-Minded</div> | |
| <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> | |
| </div> | |
| <div style="padding:1.5rem;border:1px solid rgba(245,240,232,.1);border-radius:6px;"> | |
| <div style="font-size:2rem;margin-bottom:0.5rem;">📚</div> | |
| <div style="font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--gold);margin-bottom:0.4rem;">Knowledge Steward</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div style="margin-top:3rem;padding:2rem;border:1px solid rgba(212,160,23,.3);border-radius:6px;text-align:center;"> | |
| <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> | |
| <div style="font-size:0.8rem;color:rgba(245,240,232,.35);letter-spacing:1px;text-transform:uppercase;">— Project Management Professional Learning Guide</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="footer-logo">PM·PRO</div> | |
| <p>A visual learning resource for aspiring project managers.<br>Built with ❤️ as a personal contribution to the PM learning community.</p> | |
| <p style="margin-top:1rem;font-size:0.72rem;opacity:.4;">Content based on PMBOK® concepts and Agile practices. Not affiliated with PMI®.</p> | |
| </footer> | |
| <script> | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(el => { | |
| if (el.isIntersecting) { | |
| el.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.12 }); | |
| document.querySelectorAll('.fade-up, .tl-item').forEach(el => observer.observe(el)); | |
| // Stagger timeline items | |
| document.querySelectorAll('.tl-item').forEach((el, i) => { | |
| el.style.transitionDelay = `${i * 0.12}s`; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |