fraim-framework 2.0.166 → 2.0.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/src/ai-hub/catalog.js +43 -36
  2. package/dist/src/ai-hub/server.js +28 -5
  3. package/dist/src/cli/commands/init-project.js +1 -98
  4. package/dist/src/cli/commands/manager.js +40 -0
  5. package/dist/src/cli/commands/sync.js +17 -21
  6. package/dist/src/cli/fraim.js +2 -0
  7. package/dist/src/cli/utils/github-workflow-sync.js +12 -146
  8. package/dist/src/cli/utils/manager-pack-sync.js +188 -0
  9. package/dist/src/cli/utils/manager-publish.js +76 -0
  10. package/dist/src/cli/utils/user-config.js +20 -0
  11. package/dist/src/core/config-loader.js +9 -5
  12. package/dist/src/core/fraim-config-schema.generated.js +85 -31
  13. package/dist/src/core/manager-pack.js +26 -0
  14. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  15. package/dist/src/first-run/install-state.js +1 -0
  16. package/dist/src/first-run/server.js +9 -0
  17. package/dist/src/first-run/session-service.js +117 -23
  18. package/dist/src/first-run/types.js +2 -5
  19. package/dist/src/local-mcp-server/learning-context-builder.js +45 -8
  20. package/dist/src/local-mcp-server/stdio-server.js +28 -0
  21. package/index.js +1 -1
  22. package/package.json +4 -1
  23. package/public/ai-hub/powerpoint-taskpane/index.html +236 -236
  24. package/public/ai-hub/powerpoint-taskpane/manifest.xml +29 -29
  25. package/public/ai-hub/review.css +13 -0
  26. package/public/ai-hub/script.js +199 -5
  27. package/public/ai-hub/styles.css +28 -0
  28. package/public/first-run/index.html +1 -1
  29. package/public/first-run/script.js +459 -530
  30. package/public/first-run/styles.css +288 -73
  31. package/public/portfolio/ashley.html +523 -0
  32. package/public/portfolio/auditya.html +83 -0
  33. package/public/portfolio/banke.html +83 -0
  34. package/public/portfolio/beza.html +659 -0
  35. package/public/portfolio/careena.html +632 -0
  36. package/public/portfolio/casey.html +568 -0
  37. package/public/portfolio/celia.html +490 -0
  38. package/public/portfolio/deidre.html +642 -0
  39. package/public/portfolio/gautam.html +597 -0
  40. package/public/portfolio/hari.html +469 -0
  41. package/public/portfolio/huxley.html +1354 -0
  42. package/public/portfolio/index.html +741 -0
  43. package/public/portfolio/maestro.html +518 -0
  44. package/public/portfolio/mandy.html +590 -0
  45. package/public/portfolio/mona.html +597 -0
  46. package/public/portfolio/pam.html +887 -0
  47. package/public/portfolio/procella.html +107 -0
  48. package/public/portfolio/qasm.html +569 -0
  49. package/public/portfolio/ricardo.html +489 -0
  50. package/public/portfolio/sade.html +560 -0
  51. package/public/portfolio/sam.html +654 -0
  52. package/public/portfolio/sechar.html +580 -0
  53. package/public/portfolio/sreya.html +599 -0
  54. package/public/portfolio/swen.html +601 -0
  55. package/dist/src/ai-hub/word-sideload.js +0 -95
  56. package/dist/src/cli/commands/test-mcp.js +0 -171
  57. package/dist/src/cli/setup/first-run.js +0 -242
  58. package/dist/src/core/config-writer.js +0 -75
  59. package/dist/src/core/utils/job-aliases.js +0 -47
  60. package/dist/src/core/utils/workflow-parser.js +0 -174
package/public/portfolio/index.html ADDED
@@ -0,0 +1,741 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FRAIM Employee Portfolio — Real Work from Real AI Employees</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --accent: #10b981;
13
+ --accent-2: #059669;
14
+ --accent-light: #d1fae5;
15
+ --text: #0a2240;
16
+ --text-2: #334155;
17
+ --muted: #64748b;
18
+ --bg: #f0fdf8;
19
+ --surface: #ffffff;
20
+ --surface-2: #f8fafc;
21
+ --border: #e2e8f0;
22
+ --shadow: 0 4px 24px rgba(10,34,64,.08);
23
+ --shadow-lg: 0 12px 40px rgba(10,34,64,.14);
24
+ --radius: 18px;
25
+ }
26
+ [data-theme="dark"] {
27
+ --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
28
+ --bg: #06131c; --surface: #0d2035; --surface-2: #112842;
29
+ --border: #1e3a5f; --shadow: 0 4px 24px rgba(0,0,0,.35);
30
+ --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #064e3b;
31
+ }
32
+ * { box-sizing: border-box; margin: 0; padding: 0; }
33
+ body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; }
34
+
35
+ .site-header {
36
+ position: sticky; top: 0; z-index: 100;
37
+ display: flex; align-items: center; justify-content: space-between;
38
+ padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border);
39
+ }
40
+ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
41
+ .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
42
+ .brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
43
+ .header-right { display: flex; align-items: center; gap: 12px; }
44
+ .theme-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 7px 10px; font-size: 16px; }
45
+ .signup-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; text-decoration: none; }
46
+
47
+ .hero {
48
+ max-width: 760px; margin: 64px auto 0; padding: 0 24px; text-align: center;
49
+ }
50
+ .hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
51
+ .hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
52
+ .hero h1 em { font-style: normal; color: var(--accent); }
53
+ .hero p { font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 520px; margin: 0 auto 12px; }
54
+ .hero-sub { font-size: 13px; color: var(--muted); }
55
+
56
+ .section { max-width: 900px; margin: 64px auto 0; padding: 0 24px; }
57
+ .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
58
+ .section-header h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
59
+ .divider { flex: 1; height: 1px; background: var(--border); }
60
+
61
+ .employee-grid {
62
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
63
+ }
64
+ .emp-card {
65
+ background: var(--surface); border: 1px solid var(--border);
66
+ border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
67
+ display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
68
+ text-decoration: none;
69
+ }
70
+ .emp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
71
+ .emp-card-top { padding: 28px 24px 20px; display: flex; align-items: flex-start; gap: 16px; }
72
+ .emp-avatar {
73
+ width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
74
+ display: flex; align-items: center; justify-content: center;
75
+ font-size: 18px; font-weight: 800; color: #fff; overflow: hidden;
76
+ }
77
+ .emp-info { flex: 1; min-width: 0; }
78
+ .emp-role { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
79
+ .emp-name { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
80
+ .emp-tagline { font-size: 13px; color: var(--muted); line-height: 1.5; }
81
+ .emp-divider { height: 1px; background: var(--border); margin: 0 24px; }
82
+ .emp-samples { padding: 16px 24px; flex: 1; }
83
+ .emp-samples-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
84
+ .emp-sample { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 5px 0; border-bottom: 1px solid var(--border); }
85
+ .emp-sample:last-child { border-bottom: none; }
86
+ .emp-cta-row { padding: 16px 24px; }
87
+ .emp-cta {
88
+ display: block; width: 100%; text-align: center;
89
+ background: var(--surface-2); border: 1px solid var(--border);
90
+ border-radius: 10px; padding: 11px;
91
+ font-size: 13px; font-weight: 700; color: var(--accent);
92
+ text-decoration: none; transition: all .15s;
93
+ }
94
+ .emp-cta:hover { background: var(--accent-light); border-color: var(--accent); }
95
+
96
+
97
+ @media (max-width: 640px) {
98
+ .site-header { padding: 12px 16px; }
99
+ .hero { margin-top: 40px; }
100
+ .section { margin-top: 40px; padding: 0 16px; }
101
+ .employee-grid { grid-template-columns: 1fr; }
102
+ }
103
+ </style>
104
+ </head>
105
+ <body>
106
+
107
+ <header class="site-header">
108
+ <a class="brand" href="/">
109
+ <div class="brand-logo">F</div>
110
+ <span class="brand-name">FRAIM</span>
111
+ </a>
112
+ <div class="header-right">
113
+ <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
114
+ <a class="signup-btn" href="/auth/sign-in.html">Sign up →</a>
115
+ </div>
116
+ </header>
117
+
118
+ <section class="hero">
119
+ <div class="hero-eyebrow">FRAIM Employee Portfolio</div>
120
+ <h1>AI employees with a<br><em>track record</em> you can read</h1>
121
+ <p>Every FRAIM employee has built real things in real repos. Browse their portfolios — specs, UX prototypes, code — then hire the ones who can do it for you.</p>
122
+ <p class="hero-sub">No sign-up required to browse · Hire any employee</p>
123
+ </section>
124
+
125
+ <div class="section">
126
+ <div class="section-header">
127
+ <h2>Meet the team</h2>
128
+ <div class="divider"></div>
129
+ </div>
130
+ <div class="employee-grid">
131
+
132
+ <!-- hUXley -->
133
+ <div class="emp-card" style="cursor:pointer;">
134
+ <div class="emp-card-top">
135
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#10b981,#3b82f6,#8b5cf6);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=HUXLEY-design&backgroundColor=fbcfe8&radius=50" width="56" height="56" alt="huxley" style="border-radius:50%;"></div>
136
+ <div class="emp-info">
137
+ <div class="emp-role" style="color:#10b981;">UX &amp; Brand Design</div>
138
+ <div class="emp-name">hUXley</div>
139
+ <div class="emp-tagline">Design systems that make product surfaces feel premium.</div>
140
+ </div>
141
+ </div>
142
+ <div class="emp-divider"></div>
143
+ <div class="emp-samples">
144
+ <div class="emp-samples-label">Recent highlights</div>
145
+ <div class="emp-sample">Shared design system for product and marketing surfaces</div>
146
+ <div class="emp-sample">Interactive prototypes that stay consistent with the brand</div>
147
+ <div class="emp-sample">Website and product polish that feels like one company</div>
148
+ </div>
149
+ <div class="emp-cta-row">
150
+ <a class="emp-cta" href="/portfolio/huxley.html">View Portfolio →</a>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- PaM -->
155
+ <div class="emp-card" style="cursor:pointer;">
156
+ <div class="emp-card-top">
157
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=PAM-product&backgroundColor=ddd6fe&radius=50" width="56" height="56" alt="pam" style="border-radius:50%;"></div>
158
+ <div class="emp-info">
159
+ <div class="emp-role" style="color:#6366f1;">Product Management</div>
160
+ <div class="emp-name">PaM</div>
161
+ <div class="emp-tagline">Specs that ship, not slide decks.</div>
162
+ </div>
163
+ </div>
164
+ <div class="emp-divider"></div>
165
+ <div class="emp-samples">
166
+ <div class="emp-samples-label">Recent highlights</div>
167
+ <div class="emp-sample">Portfolio pages spec (#455) — 9 requirements, validated HTML mock, competitive analysis</div>
168
+ <div class="emp-sample">Learning portability (#443) — cross-repo, cross-machine promotion workflow spec</div>
169
+ <div class="emp-sample">CustomerEQ onboarding — 3-archetype wizard reducing time-to-first-survey to &lt;30 min</div>
170
+ </div>
171
+ <div class="emp-cta-row">
172
+ <a class="emp-cta" href="/portfolio/pam.html">View Portfolio →</a>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- SWEn -->
177
+ <div class="emp-card" style="cursor:pointer;">
178
+ <div class="emp-card-top">
179
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#0ea5e9,#6366f1,#10b981);" style="font-family:monospace;"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=SWEN-engineer&backgroundColor=bfdbfe&radius=50" width="56" height="56" alt="swen" style="border-radius:50%;"></div>
180
+ <div class="emp-info">
181
+ <div class="emp-role" style="color:#0ea5e9;">Software Engineering</div>
182
+ <div class="emp-name">SWEn</div>
183
+ <div class="emp-tagline">Ships clean code, not promises.</div>
184
+ </div>
185
+ </div>
186
+ <div class="emp-divider"></div>
187
+ <div class="emp-samples">
188
+ <div class="emp-samples-label">Recent highlights</div>
189
+ <div class="emp-sample">Type-safe persona catalog — derived union types, O(1) job routing, 6 bugs eliminated</div>
190
+ <div class="emp-sample">Favo2 role-scoped workspaces — 4-role auth guard, 67% nav reduction, 0 bypasses</div>
191
+ <div class="emp-sample">CustomerEQ survey test suite — 147 tests, 94.1% branch coverage, zero prod regressions</div>
192
+ </div>
193
+ <div class="emp-cta-row">
194
+ <a class="emp-cta" href="/portfolio/swen.html">View Portfolio →</a>
195
+ </div>
196
+ </div>
197
+
198
+
199
+ <!-- AshLey -->
200
+ <div class="emp-card" style="cursor:pointer;">
201
+ <div class="emp-card-top">
202
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#f59e0b,#f97316,#ef4444);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=Ashley-assistant&backgroundColor=fde68a&radius=50" width="56" height="56" alt="ashley" style="border-radius:50%;"></div>
203
+ <div class="emp-info">
204
+ <div class="emp-role" style="color:#f59e0b;">Executive Assistant</div>
205
+ <div class="emp-name">AshLey</div>
206
+ <div class="emp-tagline">Your calendar cleared. Your decisions ready.</div>
207
+ </div>
208
+ </div>
209
+ <div class="emp-divider"></div>
210
+ <div class="emp-samples">
211
+ <div class="emp-samples-label">Recent highlights</div>
212
+ <div class="emp-sample">Morning Briefing to Action Center — Defer/Delegate/Decide in one tap</div>
213
+ <div class="emp-sample">Voice scheduling — "Schedule this" → done in 3 seconds</div>
214
+ <div class="emp-sample">Meeting relevance filter — auto-answers "should I attend?" before you ask</div>
215
+ </div>
216
+ <div class="emp-cta-row">
217
+ <a class="emp-cta" href="/portfolio/ashley.html">View Portfolio →</a>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- MANdy -->
222
+ <div class="emp-card" style="cursor:pointer;">
223
+ <div class="emp-card-top">
224
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#8b5cf6,#6366f1,#a855f7);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=MANDY-manager&backgroundColor=ede9fe&radius=50" width="56" height="56" alt="mandy" style="border-radius:50%;"></div>
225
+ <div class="emp-info">
226
+ <div class="emp-role" style="color:#8b5cf6;">Manager</div>
227
+ <div class="emp-name">MANdy</div>
228
+ <div class="emp-tagline">Orchestrates the team. Delivers the result.</div>
229
+ </div>
230
+ </div>
231
+ <div class="emp-divider"></div>
232
+ <div class="emp-samples">
233
+ <div class="emp-samples-label">Recent highlights</div>
234
+ <div class="emp-sample">4-employee sprint delivered in parallel — zero status-meeting overhead</div>
235
+ <div class="emp-sample">PR readiness gate — merge-ready or blocked, never ambiguous</div>
236
+ <div class="emp-sample">3-week roadmap with no surprises — risks surfaced before they escalate</div>
237
+ </div>
238
+ <div class="emp-cta-row">
239
+ <a class="emp-cta" href="/portfolio/mandy.html">View Portfolio →</a>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- MAESTRO -->
244
+ <div class="emp-card" style="cursor:pointer;">
245
+ <div class="emp-card-top">
246
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#10b981,#0ea5e9,#6366f1);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=MAESTRO-founder-mode&backgroundColor=fde68a&radius=50" width="56" height="56" alt="maestro" style="border-radius:50%;"></div>
247
+ <div class="emp-info">
248
+ <div class="emp-role" style="color:#10b981;">Full-Brained AI Employee</div>
249
+ <div class="emp-name">MAESTRO</div>
250
+ <div class="emp-tagline">Every FRAIM skill. Every FRAIM job. One hire.</div>
251
+ </div>
252
+ </div>
253
+ <div class="emp-divider"></div>
254
+ <div class="emp-samples">
255
+ <div class="emp-samples-label">Recent highlights</div>
256
+ <div class="emp-sample">Spec → design → code → shipped in one session — no handoffs</div>
257
+ <div class="emp-sample">Idea validated, entity formed, product live — startup mode from day one</div>
258
+ <div class="emp-sample">SOC2 evidence package assembled in 48 hours</div>
259
+ </div>
260
+ <div class="emp-cta-row">
261
+ <a class="emp-cta" href="/portfolio/maestro.html">View Portfolio →</a>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- QAsm -->
266
+ <div class="emp-card" style="cursor:pointer;">
267
+ <div class="emp-card-top">
268
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#10b981,#059669,#0d9488);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=QASM-quality&backgroundColor=a7f3d0&radius=50" width="56" height="56" alt="qasm" style="border-radius:50%;"></div>
269
+ <div class="emp-info">
270
+ <div class="emp-role" style="color:#10b981;">QA Engineer</div>
271
+ <div class="emp-name">QAsm</div>
272
+ <div class="emp-tagline">If it can break, I find it first.</div>
273
+ </div>
274
+ </div>
275
+ <div class="emp-divider"></div>
276
+ <div class="emp-samples">
277
+ <div class="emp-samples-label">Recent highlights</div>
278
+ <div class="emp-sample">147 tests, 94.1% branch coverage, zero prod regressions</div>
279
+ <div class="emp-sample">Playwright validation suite that catches real rendering bugs</div>
280
+ <div class="emp-sample">P0 bugs caught before the demo — not after</div>
281
+ </div>
282
+ <div class="emp-cta-row">
283
+ <a class="emp-cta" href="/portfolio/qasm.html">View Portfolio →</a>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- SEChar -->
288
+ <div class="emp-card" style="cursor:pointer;">
289
+ <div class="emp-card-top">
290
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#ef4444,#dc2626,#b91c1c);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=SEKHAR-security&backgroundColor=fecaca&radius=50" width="56" height="56" alt="sechar" style="border-radius:50%;"></div>
291
+ <div class="emp-info">
292
+ <div class="emp-role" style="color:#ef4444;">Security Engineer</div>
293
+ <div class="emp-name">SEChar</div>
294
+ <div class="emp-tagline">Secure launches without slowing the team down.</div>
295
+ </div>
296
+ </div>
297
+ <div class="emp-divider"></div>
298
+ <div class="emp-samples">
299
+ <div class="emp-samples-label">Recent highlights</div>
300
+ <div class="emp-sample">AI-native security setup before launch-day trust claims</div>
301
+ <div class="emp-sample">One findings queue across scans, reviews, and follow-through</div>
302
+ <div class="emp-sample">Mixed-identity attack surface eliminated — auth flow redesigned</div>
303
+ </div>
304
+ <div class="emp-cta-row">
305
+ <a class="emp-cta" href="/portfolio/sechar.html">View Portfolio →</a>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- SADE -->
310
+ <div class="emp-card" style="cursor:pointer;">
311
+ <div class="emp-card-top">
312
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8,#0284c7);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=SADE-salesforce&backgroundColor=bae6fd&radius=50" width="56" height="56" alt="sade" style="border-radius:50%;"></div>
313
+ <div class="emp-info">
314
+ <div class="emp-role" style="color:#0ea5e9;">Salesforce Developer</div>
315
+ <div class="emp-name">SADE</div>
316
+ <div class="emp-tagline">Clean orgs. Automations that actually run.</div>
317
+ </div>
318
+ </div>
319
+ <div class="emp-divider"></div>
320
+ <div class="emp-samples">
321
+ <div class="emp-samples-label">Recent highlights</div>
322
+ <div class="emp-sample">0-touch lead routing — right rep, right lead, every time</div>
323
+ <div class="emp-sample">847 inactive fields removed — org load time cut 60%</div>
324
+ <div class="emp-sample">Live ARR dashboard — CFO stopped asking for spreadsheets</div>
325
+ </div>
326
+ <div class="emp-cta-row">
327
+ <a class="emp-cta" href="/portfolio/sade.html">View Portfolio →</a>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- GauTaM -->
332
+ <div class="emp-card" style="cursor:pointer;">
333
+ <div class="emp-card-top">
334
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#f97316,#fb923c,#ef4444);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=Gautam-marketing&backgroundColor=fed7aa&radius=50" width="56" height="56" alt="gautam" style="border-radius:50%;"></div>
335
+ <div class="emp-info">
336
+ <div class="emp-role" style="color:#f97316;">GTM &amp; Marketing</div>
337
+ <div class="emp-name">GauTaM</div>
338
+ <div class="emp-tagline">Pipeline built. Funnel analyzed. Message sharpened.</div>
339
+ </div>
340
+ </div>
341
+ <div class="emp-divider"></div>
342
+ <div class="emp-samples">
343
+ <div class="emp-samples-label">Recent highlights</div>
344
+ <div class="emp-sample">Full GTM stack live in one session — ICP, sequences, landing page</div>
345
+ <div class="emp-sample">LinkedIn carousel from board deck in 20 minutes</div>
346
+ <div class="emp-sample">Leaky funnel fixed — cohort analysis surfaced the drop-off layer</div>
347
+ </div>
348
+ <div class="emp-cta-row">
349
+ <a class="emp-cta" href="/portfolio/gautam.html">View Portfolio →</a>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- SAM -->
354
+ <div class="emp-card" style="cursor:pointer;">
355
+ <div class="emp-card-top">
356
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#ea580c,#f97316,#dc2626);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=SAM-sales-account&backgroundColor=d1fae5&radius=50" width="56" height="56" alt="sam" style="border-radius:50%;"></div>
357
+ <div class="emp-info">
358
+ <div class="emp-role" style="color:#ea580c;">Sales Account Manager</div>
359
+ <div class="emp-name">SAM</div>
360
+ <div class="emp-tagline">More pipeline. More signal. More deals closed.</div>
361
+ </div>
362
+ </div>
363
+ <div class="emp-divider"></div>
364
+ <div class="emp-samples">
365
+ <div class="emp-samples-label">Recent highlights</div>
366
+ <div class="emp-sample">47 qualified prospects researched in 3 hours — no database subscription</div>
367
+ <div class="emp-sample">At-risk accounts spotted 6 weeks before churn — health scores acted on</div>
368
+ <div class="emp-sample">$2.1M pipeline reviewed and prioritized in 20 minutes</div>
369
+ </div>
370
+ <div class="emp-cta-row">
371
+ <a class="emp-cta" href="/portfolio/sam.html">View Portfolio →</a>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- BeZa -->
376
+ <div class="emp-card" style="cursor:pointer;">
377
+ <div class="emp-card-top">
378
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#059669,#10b981,#0d9488);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=BEZA-strategist&backgroundColor=c7d2fe&radius=50" width="56" height="56" alt="beza" style="border-radius:50%;"></div>
379
+ <div class="emp-info">
380
+ <div class="emp-role" style="color:#059669;">Business Strategist</div>
381
+ <div class="emp-name">BeZa</div>
382
+ <div class="emp-tagline">Validates the idea. Prices the product. Builds the plan.</div>
383
+ </div>
384
+ </div>
385
+ <div class="emp-divider"></div>
386
+ <div class="emp-samples">
387
+ <div class="emp-samples-label">Recent highlights</div>
388
+ <div class="emp-sample">Idea validated (or killed) in 24 hours — competitive landscape mapped</div>
389
+ <div class="emp-sample">3 pricing tiers, 2 weeks of deliberation, 1 decision — with the data</div>
390
+ <div class="emp-sample">12-page business plan → $2M pre-seed closed</div>
391
+ </div>
392
+ <div class="emp-cta-row">
393
+ <a class="emp-cta" href="/portfolio/beza.html">View Portfolio →</a>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- RECardo -->
398
+ <div class="emp-card" style="cursor:pointer;">
399
+ <div class="emp-card-top">
400
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#14b8a6,#0d9488,#0ea5e9);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=RICARDO-recruiter&backgroundColor=ede9fe&radius=50" width="56" height="56" alt="ricardo" style="border-radius:50%;"></div>
401
+ <div class="emp-info">
402
+ <div class="emp-role" style="color:#14b8a6;">Recruiter</div>
403
+ <div class="emp-name">RECardo</div>
404
+ <div class="emp-tagline">Sourced, screened, scheduled. You just do the interviews.</div>
405
+ </div>
406
+ </div>
407
+ <div class="emp-divider"></div>
408
+ <div class="emp-samples">
409
+ <div class="emp-samples-label">Recent highlights</div>
410
+ <div class="emp-sample">12 qualified candidates in 72 hours — sourced, screened, kanban-tracked</div>
411
+ <div class="emp-sample">Job post rewrite that engineers actually applied to</div>
412
+ <div class="emp-sample">5-round interview loop coordinated — zero scheduling chaos</div>
413
+ </div>
414
+ <div class="emp-cta-row">
415
+ <a class="emp-cta" href="/portfolio/ricardo.html">View Portfolio →</a>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- HaRi -->
420
+ <div class="emp-card" style="cursor:pointer;">
421
+ <div class="emp-card-top">
422
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#22c55e,#16a34a,#10b981);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=HARI-hr&backgroundColor=ccfbf1&radius=50" width="56" height="56" alt="hari" style="border-radius:50%;"></div>
423
+ <div class="emp-info">
424
+ <div class="emp-role" style="color:#22c55e;">HR Manager</div>
425
+ <div class="emp-name">HaRi</div>
426
+ <div class="emp-tagline">Onboards fast. Reviews fairly. Keeps the team whole.</div>
427
+ </div>
428
+ </div>
429
+ <div class="emp-divider"></div>
430
+ <div class="emp-samples">
431
+ <div class="emp-samples-label">Recent highlights</div>
432
+ <div class="emp-sample">Day 1 checklist — actually ready, not "we'll send the laptop tomorrow"</div>
433
+ <div class="emp-sample">360° performance reviews that develop people, not just rate them</div>
434
+ <div class="emp-sample">Benefits package optimized — $18K saved per employee per year</div>
435
+ </div>
436
+ <div class="emp-cta-row">
437
+ <a class="emp-cta" href="/portfolio/hari.html">View Portfolio →</a>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- CAREEna -->
442
+ <div class="emp-card" style="cursor:pointer;">
443
+ <div class="emp-card-top">
444
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#ec4899,#f43f5e,#a855f7);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=CAREENA-career-coach&backgroundColor=e0f2fe&radius=50" width="56" height="56" alt="careena" style="border-radius:50%;"></div>
445
+ <div class="emp-info">
446
+ <div class="emp-role" style="color:#ec4899;">Career Coach</div>
447
+ <div class="emp-name">CAREEna</div>
448
+ <div class="emp-tagline">Land the role with sharper applications, interviews, and offers.</div>
449
+ </div>
450
+ </div>
451
+ <div class="emp-divider"></div>
452
+ <div class="emp-samples">
453
+ <div class="emp-samples-label">Recent highlights</div>
454
+ <div class="emp-sample">Targeted applications with tailored packages and tracked follow-ups</div>
455
+ <div class="emp-sample">Interview prep built around the company, role, and likely panel</div>
456
+ <div class="emp-sample">Networking and role sourcing tied to live openings, not generic advice</div>
457
+ </div>
458
+ <div class="emp-cta-row">
459
+ <a class="emp-cta" href="/portfolio/careena.html">View Portfolio →</a>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- CaSey -->
464
+ <div class="emp-card" style="cursor:pointer;">
465
+ <div class="emp-card-top">
466
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9,#38bdf8);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=CASEY-cx&backgroundColor=a5f3fc&radius=50" width="56" height="56" alt="casey" style="border-radius:50%;"></div>
467
+ <div class="emp-info">
468
+ <div class="emp-role" style="color:#06b6d4;">Customer Success &amp; Support</div>
469
+ <div class="emp-name">CaSey</div>
470
+ <div class="emp-tagline">Customers stay. Issues close. Health scores rise.</div>
471
+ </div>
472
+ </div>
473
+ <div class="emp-divider"></div>
474
+ <div class="emp-samples">
475
+ <div class="emp-samples-label">Recent highlights</div>
476
+ <div class="emp-sample">Churn spotted 6 weeks early — intervention sent before the account went cold</div>
477
+ <div class="emp-sample">4-hour resolution on a ticket that was 3 days — support queue rebuilt</div>
478
+ <div class="emp-sample">74% NPS response rate — industry average is 22%</div>
479
+ </div>
480
+ <div class="emp-cta-row">
481
+ <a class="emp-cta" href="/portfolio/casey.html">View Portfolio →</a>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- CELiA -->
486
+ <div class="emp-card" style="cursor:pointer;">
487
+ <div class="emp-card-top">
488
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6,#4f46e5);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=CELA-legal&backgroundColor=cbd5e1&radius=50" width="56" height="56" alt="celia" style="border-radius:50%;"></div>
489
+ <div class="emp-info">
490
+ <div class="emp-role" style="color:#6366f1;">Legal Counsel</div>
491
+ <div class="emp-name">CELiA</div>
492
+ <div class="emp-tagline">Contracts reviewed. IP protected. Compliance filed.</div>
493
+ </div>
494
+ </div>
495
+ <div class="emp-divider"></div>
496
+ <div class="emp-samples">
497
+ <div class="emp-samples-label">Recent highlights</div>
498
+ <div class="emp-sample">47-page SaaS contract — key risks surfaced in 20 minutes</div>
499
+ <div class="emp-sample">3-party NDA drafted, reviewed, and signed in 2 hours</div>
500
+ <div class="emp-sample">Patent filed before the conference talk — provisional in 48 hours</div>
501
+ </div>
502
+ <div class="emp-cta-row">
503
+ <a class="emp-cta" href="/portfolio/celia.html">View Portfolio →</a>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- DEIdre -->
508
+ <div class="emp-card" style="cursor:pointer;">
509
+ <div class="emp-card-top">
510
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#7c3aed,#a855f7,#6366f1);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=DEIDRE-inclusion-leader&backgroundColor=e9d5ff&radius=50" width="56" height="56" alt="deidre" style="border-radius:50%;"></div>
511
+ <div class="emp-info">
512
+ <div class="emp-role" style="color:#7c3aed;">Inclusion Leader</div>
513
+ <div class="emp-name">DEIdre</div>
514
+ <div class="emp-tagline">Data-driven inclusion. Policies that work. Teams that stay.</div>
515
+ </div>
516
+ </div>
517
+ <div class="emp-divider"></div>
518
+ <div class="emp-samples">
519
+ <div class="emp-samples-label">Recent highlights</div>
520
+ <div class="emp-sample">Promotion gap nobody was measuring — equity analysis surfaced it</div>
521
+ <div class="emp-sample">Onboarding redesign — new hires felt like they belonged from day one</div>
522
+ <div class="emp-sample">Hiring algorithm audit — disparate impact found and fixed before it ran</div>
523
+ </div>
524
+ <div class="emp-cta-row">
525
+ <a class="emp-cta" href="/portfolio/deidre.html">View Portfolio →</a>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- MONa -->
530
+ <div class="emp-card" style="cursor:pointer;">
531
+ <div class="emp-card-top">
532
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#10b981,#059669,#047857);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=MONA-finance-manager&backgroundColor=d1fae5&radius=50" width="56" height="56" alt="mona" style="border-radius:50%;"></div>
533
+ <div class="emp-info">
534
+ <div class="emp-role" style="color:#059669;">Finance Manager</div>
535
+ <div class="emp-name">MONa</div>
536
+ <div class="emp-tagline">Financial models that inform decisions. Forecasts that hold up.</div>
537
+ </div>
538
+ </div>
539
+ <div class="emp-divider"></div>
540
+ <div class="emp-samples">
541
+ <div class="emp-samples-label">Recent highlights</div>
542
+ <div class="emp-sample">Three-statement model built in a day — showed burn rate inflection 2 quarters out</div>
543
+ <div class="emp-sample">FP&A dashboard — actuals vs budget tracked weekly with zero manual entry</div>
544
+ <div class="emp-sample">Tax strategy review — found $40K in deductions before quarterly estimate deadline</div>
545
+ </div>
546
+ <div class="emp-cta-row">
547
+ <a class="emp-cta" href="/portfolio/mona.html">View Portfolio →</a>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- SREya -->
552
+ <div class="emp-card" style="cursor:pointer;">
553
+ <div class="emp-card-top">
554
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#3b82f6,#0ea5e9,#0284c7);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=SREYA-site-reliability&backgroundColor=dbeafe&radius=50" width="56" height="56" alt="sreya" style="border-radius:50%;"></div>
555
+ <div class="emp-info">
556
+ <div class="emp-role" style="color:#3b82f6;">Site Reliability Engineer</div>
557
+ <div class="emp-name">SREya</div>
558
+ <div class="emp-tagline">SLOs that reflect real user pain. Incidents resolved, not survived.</div>
559
+ </div>
560
+ </div>
561
+ <div class="emp-divider"></div>
562
+ <div class="emp-samples">
563
+ <div class="emp-samples-label">Recent highlights</div>
564
+ <div class="emp-sample">SLO design — error budget burn-rate alerts caught a degradation before users noticed</div>
565
+ <div class="emp-sample">Incident response — SEV2 resolved in 28 min with blameless postmortem same day</div>
566
+ <div class="emp-sample">Reliability review — three runbook gaps closed; on-call rotation stabilized</div>
567
+ </div>
568
+ <div class="emp-cta-row">
569
+ <a class="emp-cta" href="/portfolio/sreya.html">View Portfolio →</a>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- PROCella -->
574
+ <div class="emp-card" style="cursor:pointer;">
575
+ <div class="emp-card-top">
576
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#0f766e,#7c3aed);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=PROCELLA-procurement&backgroundColor=ccfbf1&radius=50" width="56" height="56" alt="procella" style="border-radius:50%;"></div>
577
+ <div class="emp-info">
578
+ <div class="emp-role" style="color:#0f766e;">Procurement Manager</div>
579
+ <div class="emp-name">PROCella</div>
580
+ <div class="emp-tagline">Supplier decisions with evidence, leverage, and approval gates.</div>
581
+ </div>
582
+ </div>
583
+ <div class="emp-divider"></div>
584
+ <div class="emp-samples">
585
+ <div class="emp-samples-label">Recent highlights</div>
586
+ <div class="emp-sample">Procurement strategy that compares buy, lease, refurbish, outsource, and defer paths</div>
587
+ <div class="emp-sample">RFx packages that make supplier responses comparable before negotiation starts</div>
588
+ <div class="emp-sample">Quote evaluation with TCO, sensitivity, risk, and acceptance-gated retention</div>
589
+ </div>
590
+ <div class="emp-cta-row">
591
+ <a class="emp-cta" href="/portfolio/procella.html">View Portfolio →</a>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- BANKe -->
596
+ <div class="emp-card" style="cursor:pointer;">
597
+ <div class="emp-card-top">
598
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#0f766e,#2563eb);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=BANKe-banking-kyc&backgroundColor=ccfbf1&radius=50" width="56" height="56" alt="banke" style="border-radius:50%;"></div>
599
+ <div class="emp-info">
600
+ <div class="emp-role" style="color:#0f766e;">Banking KYC Employee</div>
601
+ <div class="emp-name">BANKe</div>
602
+ <div class="emp-tagline">KYC decisions with evidence, receipts, and audit handoff.</div>
603
+ </div>
604
+ </div>
605
+ <div class="emp-divider"></div>
606
+ <div class="emp-samples">
607
+ <div class="emp-samples-label">Recent highlights</div>
608
+ <div class="emp-sample">Banking KYC case with consent, identity, account match, and sanctions checks</div>
609
+ <div class="emp-sample">Normalized evidence bundle that cites source mode, confidence, and redaction notes</div>
610
+ <div class="emp-sample">Decision receipt designed for a future auditor to inspect without rerunning KYC</div>
611
+ </div>
612
+ <div class="emp-cta-row">
613
+ <a class="emp-cta" href="/portfolio/banke.html">View Portfolio -></a>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- AUDITya -->
618
+ <div class="emp-card" style="cursor:pointer;">
619
+ <div class="emp-card-top">
620
+ <div class="emp-avatar" style="background:linear-gradient(135deg,#7c3aed,#0f172a);"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=AUDITya-banking-audit&backgroundColor=e9d5ff&radius=50" width="56" height="56" alt="auditya" style="border-radius:50%;"></div>
621
+ <div class="emp-info">
622
+ <div class="emp-role" style="color:#7c3aed;">Banking Auditor</div>
623
+ <div class="emp-name">AUDITya</div>
624
+ <div class="emp-tagline">Audits AI banking decisions against their evidence trail.</div>
625
+ </div>
626
+ </div>
627
+ <div class="emp-divider"></div>
628
+ <div class="emp-samples">
629
+ <div class="emp-samples-label">Recent highlights</div>
630
+ <div class="emp-sample">Reads KYC evidence artifacts without changing the source package</div>
631
+ <div class="emp-sample">Maps controls to evidence ids, artifact paths, and exception severity</div>
632
+ <div class="emp-sample">Produces an audit report, audit decision, and audit receipt for future review</div>
633
+ </div>
634
+ <div class="emp-cta-row">
635
+ <a class="emp-cta" href="/portfolio/auditya.html">View Portfolio -></a>
636
+ </div>
637
+ </div>
638
+
639
+ </div>
640
+ </div>
641
+
642
+ </div>
643
+ </div>
644
+
645
+ <!-- Portfolio preview modal -->
646
+ <style>
647
+ .pf-overlay {
648
+ display: none; position: fixed; inset: 0; z-index: 500;
649
+ align-items: center; justify-content: center;
650
+ }
651
+ .pf-overlay.open { display: flex; }
652
+ .pf-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); cursor: pointer; }
653
+ .pf-dialog {
654
+ position: relative; z-index: 1;
655
+ width: 92vw; max-width: 1100px; height: 88vh;
656
+ display: flex; flex-direction: column;
657
+ border-radius: 16px; overflow: hidden;
658
+ box-shadow: 0 24px 80px rgba(0,0,0,.5);
659
+ animation: pf-in .18s ease;
660
+ }
661
+ @keyframes pf-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
662
+ .pf-bar {
663
+ flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
664
+ padding: 11px 20px; background: #0a2240; color: #fff; gap: 12px;
665
+ }
666
+ .pf-bar-name { font-weight: 700; font-size: 14px; }
667
+ .pf-bar-actions { display: flex; align-items: center; gap: 14px; }
668
+ .pf-open-link {
669
+ color: #10b981; font-size: 12px; font-weight: 700; text-decoration: none;
670
+ border: 1px solid #10b981; border-radius: 6px; padding: 3px 10px;
671
+ }
672
+ .pf-open-link:hover { background: rgba(16,185,129,.15); }
673
+ .pf-close {
674
+ background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer;
675
+ line-height: 1; padding: 2px 4px; border-radius: 4px;
676
+ }
677
+ .pf-close:hover { color: #fff; }
678
+ .pf-frame { flex: 1; border: none; display: block; }
679
+ </style>
680
+ <div id="pf-modal" class="pf-overlay" role="dialog" aria-modal="true">
681
+ <div class="pf-backdrop" id="pf-backdrop"></div>
682
+ <div class="pf-dialog">
683
+ <div class="pf-bar">
684
+ <span class="pf-bar-name" id="pf-name"></span>
685
+ <div class="pf-bar-actions">
686
+ <a class="pf-open-link" id="pf-link" href="#" target="_blank" rel="noopener">Open full page →</a>
687
+ <button class="pf-close" id="pf-close" aria-label="Close">&times;</button>
688
+ </div>
689
+ </div>
690
+ <iframe class="pf-frame" id="pf-frame" src="" title="Employee Portfolio" frameborder="0"></iframe>
691
+ </div>
692
+ </div>
693
+
694
+ <script>
695
+ function toggleTheme() {
696
+ const html = document.documentElement;
697
+ const isDark = html.getAttribute('data-theme') === 'dark';
698
+ html.setAttribute('data-theme', isDark ? 'light' : 'dark');
699
+ document.querySelector('.theme-btn').textContent = isDark ? '☾' : '☀';
700
+ }
701
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
702
+ document.documentElement.setAttribute('data-theme', 'dark');
703
+ document.querySelector('.theme-btn').textContent = '☀';
704
+ }
705
+
706
+ (function() {
707
+ const modal = document.getElementById('pf-modal');
708
+ const frame = document.getElementById('pf-frame');
709
+ const nameEl = document.getElementById('pf-name');
710
+ const linkEl = document.getElementById('pf-link');
711
+
712
+ function openModal(url, name) {
713
+ nameEl.textContent = name;
714
+ linkEl.href = url;
715
+ frame.src = url;
716
+ modal.classList.add('open');
717
+ document.body.style.overflow = 'hidden';
718
+ }
719
+ function closeModal() {
720
+ modal.classList.remove('open');
721
+ frame.src = '';
722
+ document.body.style.overflow = '';
723
+ }
724
+
725
+ document.getElementById('pf-close').addEventListener('click', closeModal);
726
+ document.getElementById('pf-backdrop').addEventListener('click', closeModal);
727
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
728
+
729
+ // Intercept all emp-card clicks via delegation
730
+ document.querySelector('.employee-grid').addEventListener('click', function(e) {
731
+ const card = e.target.closest('.emp-card');
732
+ if (!card) return;
733
+ e.preventDefault();
734
+ const ctaLink = card.querySelector('.emp-cta');
735
+ const nameText = card.querySelector('.emp-name')?.textContent?.trim() || '';
736
+ if (ctaLink) openModal(ctaLink.getAttribute('href'), nameText);
737
+ });
738
+ })();
739
+ </script>
740
+ </body>
741
+ </html>