fraim-framework 2.0.166 → 2.0.167

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 (42) hide show
  1. package/dist/src/ai-hub/catalog.js +20 -27
  2. package/dist/src/ai-hub/server.js +418 -2
  3. package/dist/src/config/ai-manager-hiring.js +121 -0
  4. package/dist/src/config/compat.js +16 -0
  5. package/dist/src/config/feature-flags.js +25 -0
  6. package/dist/src/config/persona-capability-bundles.js +273 -0
  7. package/dist/src/config/persona-hiring.js +270 -0
  8. package/dist/src/config/portfolio-slug-overrides.js +17 -0
  9. package/dist/src/config/pricing.js +37 -0
  10. package/dist/src/config/stripe.js +43 -0
  11. package/dist/src/core/config-loader.js +9 -5
  12. package/dist/src/core/fraim-config-schema.generated.js +0 -21
  13. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  14. package/package.json +5 -1
  15. package/public/ai-hub/index.html +81 -0
  16. package/public/ai-hub/review.css +13 -0
  17. package/public/ai-hub/script.js +414 -4
  18. package/public/ai-hub/styles.css +56 -0
  19. package/public/portfolio/ashley.html +523 -0
  20. package/public/portfolio/auditya.html +83 -0
  21. package/public/portfolio/banke.html +83 -0
  22. package/public/portfolio/beza.html +659 -0
  23. package/public/portfolio/careena.html +632 -0
  24. package/public/portfolio/casey.html +568 -0
  25. package/public/portfolio/celia.html +490 -0
  26. package/public/portfolio/deidre.html +642 -0
  27. package/public/portfolio/gautam.html +597 -0
  28. package/public/portfolio/hari.html +469 -0
  29. package/public/portfolio/huxley.html +1354 -0
  30. package/public/portfolio/index.html +741 -0
  31. package/public/portfolio/maestro.html +518 -0
  32. package/public/portfolio/mandy.html +590 -0
  33. package/public/portfolio/mona.html +597 -0
  34. package/public/portfolio/pam.html +887 -0
  35. package/public/portfolio/procella.html +107 -0
  36. package/public/portfolio/qasm.html +569 -0
  37. package/public/portfolio/ricardo.html +489 -0
  38. package/public/portfolio/sade.html +560 -0
  39. package/public/portfolio/sam.html +654 -0
  40. package/public/portfolio/sechar.html +580 -0
  41. package/public/portfolio/sreya.html +599 -0
  42. package/public/portfolio/swen.html +601 -0
@@ -0,0 +1,632 @@
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>CAREEna | AI Career Coach | FRAIM Portfolio</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@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --accent: #ec4899;
13
+ --accent-2: #be185d;
14
+ --accent-soft: #fce7f3;
15
+ --bg: #fff7fb;
16
+ --surface: #ffffff;
17
+ --surface-2: #fff1f8;
18
+ --text: #25111c;
19
+ --text-2: #4b5563;
20
+ --muted: #6b7280;
21
+ --border: #f2d6e6;
22
+ --shadow: 0 16px 40px rgba(116, 24, 72, 0.12);
23
+ }
24
+ [data-theme="dark"] {
25
+ --bg: #190c13;
26
+ --surface: #27131f;
27
+ --surface-2: #321726;
28
+ --text: #f8e8f1;
29
+ --text-2: #d8c4d0;
30
+ --muted: #b79aaa;
31
+ --border: #4a2037;
32
+ --shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
33
+ }
34
+ * { box-sizing: border-box; }
35
+ body {
36
+ margin: 0;
37
+ font-family: 'Inter', sans-serif;
38
+ background: radial-gradient(circle at top, rgba(236,72,153,0.12), transparent 30%), var(--bg);
39
+ color: var(--text);
40
+ }
41
+ .site-header {
42
+ position: sticky;
43
+ top: 0;
44
+ z-index: 20;
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ padding: 16px 24px;
49
+ background: rgba(255,255,255,0.86);
50
+ backdrop-filter: blur(12px);
51
+ border-bottom: 1px solid var(--border);
52
+ }
53
+ [data-theme="dark"] .site-header { background: rgba(25,12,19,0.86); }
54
+ .brand {
55
+ display: inline-flex;
56
+ align-items: center;
57
+ gap: 10px;
58
+ text-decoration: none;
59
+ color: var(--text);
60
+ font-weight: 700;
61
+ }
62
+ .brand-logo {
63
+ width: 34px;
64
+ height: 34px;
65
+ border-radius: 10px;
66
+ display: grid;
67
+ place-items: center;
68
+ background: linear-gradient(135deg, #ec4899, #8b5cf6);
69
+ color: #fff;
70
+ }
71
+ .theme-btn {
72
+ border: 1px solid var(--border);
73
+ background: var(--surface);
74
+ color: var(--text);
75
+ border-radius: 999px;
76
+ padding: 8px 12px;
77
+ cursor: pointer;
78
+ }
79
+ .hero,
80
+ .section,
81
+ .footer {
82
+ width: min(1080px, calc(100% - 32px));
83
+ margin: 0 auto;
84
+ }
85
+ .hero {
86
+ padding: 56px 0 28px;
87
+ }
88
+ .hero-grid {
89
+ display: grid;
90
+ grid-template-columns: 1.15fr 0.85fr;
91
+ gap: 24px;
92
+ }
93
+ .hero-panel,
94
+ .summary-panel,
95
+ .card,
96
+ .artifact-shell {
97
+ background: var(--surface);
98
+ border: 1px solid var(--border);
99
+ box-shadow: var(--shadow);
100
+ border-radius: 28px;
101
+ }
102
+ .hero-panel {
103
+ padding: 32px;
104
+ }
105
+ .hero-chip,
106
+ .eyebrow {
107
+ display: inline-flex;
108
+ align-items: center;
109
+ gap: 8px;
110
+ padding: 7px 12px;
111
+ border-radius: 999px;
112
+ background: var(--accent-soft);
113
+ color: var(--accent-2);
114
+ font-size: 12px;
115
+ font-weight: 700;
116
+ letter-spacing: 0.04em;
117
+ text-transform: uppercase;
118
+ }
119
+ .hero h1 {
120
+ margin: 18px 0 14px;
121
+ font-size: clamp(34px, 5vw, 64px);
122
+ line-height: 0.98;
123
+ letter-spacing: -0.05em;
124
+ }
125
+ .hero p {
126
+ margin: 0;
127
+ color: var(--text-2);
128
+ line-height: 1.7;
129
+ font-size: 16px;
130
+ }
131
+ .hero-metrics {
132
+ display: grid;
133
+ grid-template-columns: repeat(3, 1fr);
134
+ gap: 12px;
135
+ margin-top: 24px;
136
+ }
137
+ .metric {
138
+ padding: 16px;
139
+ border-radius: 20px;
140
+ background: var(--surface-2);
141
+ }
142
+ .metric strong {
143
+ display: block;
144
+ font-size: 22px;
145
+ margin-bottom: 6px;
146
+ }
147
+ .summary-panel {
148
+ padding: 28px;
149
+ }
150
+ .summary-list {
151
+ display: grid;
152
+ gap: 12px;
153
+ margin-top: 18px;
154
+ }
155
+ .summary-item {
156
+ padding: 14px 16px;
157
+ border-radius: 18px;
158
+ background: var(--surface-2);
159
+ color: var(--text-2);
160
+ }
161
+ .summary-item strong {
162
+ display: block;
163
+ color: var(--text);
164
+ margin-bottom: 4px;
165
+ }
166
+ .section {
167
+ padding: 20px 0 72px;
168
+ }
169
+ .section-head {
170
+ display: flex;
171
+ align-items: center;
172
+ gap: 16px;
173
+ margin: 0 0 18px;
174
+ }
175
+ .section-head h2 {
176
+ margin: 0;
177
+ font-size: 13px;
178
+ letter-spacing: 0.12em;
179
+ text-transform: uppercase;
180
+ color: var(--muted);
181
+ }
182
+ .section-line {
183
+ flex: 1;
184
+ height: 1px;
185
+ background: var(--border);
186
+ }
187
+ .card-stack {
188
+ display: grid;
189
+ gap: 18px;
190
+ }
191
+ .card-header {
192
+ display: flex;
193
+ align-items: flex-start;
194
+ gap: 16px;
195
+ padding: 24px 24px 0;
196
+ cursor: pointer;
197
+ }
198
+ .card-icon {
199
+ width: 52px;
200
+ height: 52px;
201
+ border-radius: 16px;
202
+ display: grid;
203
+ place-items: center;
204
+ background: var(--accent-soft);
205
+ color: var(--accent-2);
206
+ font-family: 'JetBrains Mono', monospace;
207
+ font-size: 14px;
208
+ font-weight: 700;
209
+ }
210
+ .card-meta { flex: 1; }
211
+ .card-tag {
212
+ color: var(--accent-2);
213
+ text-transform: uppercase;
214
+ font-size: 12px;
215
+ font-weight: 700;
216
+ letter-spacing: 0.08em;
217
+ }
218
+ .card-title {
219
+ margin: 8px 0 6px;
220
+ font-size: 25px;
221
+ line-height: 1.08;
222
+ }
223
+ .card-subtitle {
224
+ color: var(--muted);
225
+ font-size: 13px;
226
+ }
227
+ .card-toggle {
228
+ font-size: 28px;
229
+ color: var(--muted);
230
+ }
231
+ .card-body {
232
+ display: none;
233
+ padding: 22px 24px 24px;
234
+ }
235
+ .card.open .card-body { display: block; }
236
+ .card.open .card-toggle { transform: rotate(90deg); }
237
+ .context {
238
+ margin: 0 0 16px;
239
+ padding: 16px 18px;
240
+ border-radius: 18px;
241
+ background: var(--surface-2);
242
+ color: var(--text-2);
243
+ line-height: 1.7;
244
+ }
245
+ .proof-grid {
246
+ display: grid;
247
+ grid-template-columns: repeat(3, 1fr);
248
+ gap: 12px;
249
+ margin-bottom: 16px;
250
+ }
251
+ .proof-block {
252
+ padding: 16px;
253
+ border-radius: 18px;
254
+ background: var(--surface-2);
255
+ }
256
+ .proof-label {
257
+ font-size: 11px;
258
+ text-transform: uppercase;
259
+ letter-spacing: 0.1em;
260
+ color: var(--muted);
261
+ font-weight: 700;
262
+ }
263
+ .proof-block p {
264
+ margin: 8px 0 0;
265
+ color: var(--text-2);
266
+ line-height: 1.6;
267
+ font-size: 14px;
268
+ }
269
+ .artifact-label {
270
+ margin: 0 0 12px;
271
+ text-transform: uppercase;
272
+ letter-spacing: 0.08em;
273
+ color: var(--muted);
274
+ font-size: 12px;
275
+ font-weight: 700;
276
+ }
277
+ .artifact-shell {
278
+ padding: 18px;
279
+ }
280
+ .tracker,
281
+ .watch-table {
282
+ width: 100%;
283
+ border-collapse: collapse;
284
+ font-size: 14px;
285
+ }
286
+ .tracker th,
287
+ .tracker td,
288
+ .watch-table th,
289
+ .watch-table td {
290
+ padding: 12px 10px;
291
+ text-align: left;
292
+ border-bottom: 1px solid var(--border);
293
+ }
294
+ .tracker th,
295
+ .watch-table th {
296
+ color: var(--muted);
297
+ text-transform: uppercase;
298
+ letter-spacing: 0.08em;
299
+ font-size: 11px;
300
+ }
301
+ .badge {
302
+ display: inline-flex;
303
+ align-items: center;
304
+ padding: 5px 10px;
305
+ border-radius: 999px;
306
+ font-size: 12px;
307
+ font-weight: 700;
308
+ }
309
+ .badge-pink { background: var(--accent-soft); color: var(--accent-2); }
310
+ .badge-blue { background: #dbeafe; color: #1d4ed8; }
311
+ .badge-amber { background: #fef3c7; color: #b45309; }
312
+ .badge-green { background: #dcfce7; color: #166534; }
313
+ .artifact-grid-2 {
314
+ display: grid;
315
+ grid-template-columns: 1fr 1fr;
316
+ gap: 14px;
317
+ }
318
+ .artifact-note {
319
+ margin-top: 14px;
320
+ color: var(--muted);
321
+ font-size: 12px;
322
+ }
323
+ .footer {
324
+ padding: 0 0 44px;
325
+ color: var(--muted);
326
+ text-align: center;
327
+ font-size: 13px;
328
+ }
329
+ .footer a { color: var(--accent-2); text-decoration: none; }
330
+ @media (max-width: 820px) {
331
+ .hero-grid,
332
+ .artifact-grid-2,
333
+ .proof-grid,
334
+ .hero-metrics {
335
+ grid-template-columns: 1fr;
336
+ }
337
+ }
338
+ </style>
339
+ </head>
340
+ <body>
341
+ <header class="site-header">
342
+ <a class="brand" href="/">
343
+ <span class="brand-logo">F</span>
344
+ <span>FRAIM</span>
345
+ </a>
346
+ <button class="theme-btn" type="button" onclick="toggleTheme()">Theme</button>
347
+ </header>
348
+
349
+ <section class="hero">
350
+ <div class="hero-grid">
351
+ <div class="hero-panel">
352
+ <div class="hero-chip">AI Career Coach</div>
353
+ <h1>Land the role with stronger applications, sharper interviews, and better timing.</h1>
354
+ <p>CAREEna helps candidates turn a loose job search into a disciplined campaign: better-targeted openings, tighter application packages, stronger networking moves, and interview prep grounded in the actual company and role.</p>
355
+ <div class="hero-metrics">
356
+ <div class="metric">
357
+ <strong>5</strong>
358
+ live proof modules across the search funnel
359
+ </div>
360
+ <div class="metric">
361
+ <strong>1 queue</strong>
362
+ for roles, referrals, interviews, and follow-ups
363
+ </div>
364
+ <div class="metric">
365
+ <strong>Role complete</strong>
366
+ from discovery to signed offer
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <aside class="summary-panel">
371
+ <div class="eyebrow">What you hire</div>
372
+ <div class="summary-list">
373
+ <div class="summary-item">
374
+ <strong>Application execution</strong>
375
+ Prioritized openings, tailored packaging, and submission ops.
376
+ </div>
377
+ <div class="summary-item">
378
+ <strong>Role sourcing and timing</strong>
379
+ Fresh openings, hiring signals, and better decisions about when to apply or network first.
380
+ </div>
381
+ <div class="summary-item">
382
+ <strong>Interview and negotiation close</strong>
383
+ Interviewer mapping, story prep, and final-offer leverage.
384
+ </div>
385
+ </div>
386
+ </aside>
387
+ </div>
388
+ </section>
389
+
390
+ <section class="section">
391
+ <div class="section-head">
392
+ <h2>Selected Work</h2>
393
+ <div class="section-line"></div>
394
+ </div>
395
+ <div class="card-stack">
396
+ <article class="card open" id="card1">
397
+ <div class="card-header" onclick="toggleCard(1)">
398
+ <div class="card-icon">CV</div>
399
+ <div class="card-meta">
400
+ <div class="card-tag">Positioning</div>
401
+ <div class="card-title">Resume rewrite that translates hidden work into hiring proof</div>
402
+ <div class="card-subtitle">FRAIM | resume-creation</div>
403
+ </div>
404
+ <div class="card-toggle">&rsaquo;</div>
405
+ </div>
406
+ <div class="card-body">
407
+ <p class="context">A senior engineer had real leadership signal, but her resume read like task ownership instead of business impact. CAREEna reframed the raw work into proof that a recruiter or hiring manager could actually screen for.</p>
408
+ <div class="proof-grid">
409
+ <div class="proof-block">
410
+ <div class="proof-label">Problem</div>
411
+ <p>The existing resume hid scale, ownership, and measurable outcomes.</p>
412
+ </div>
413
+ <div class="proof-block">
414
+ <div class="proof-label">What CAREEna did</div>
415
+ <p>Extracted impact numbers, rewrote bullets around ownership, and aligned the profile to the target role family.</p>
416
+ </div>
417
+ <div class="proof-block">
418
+ <div class="proof-label">Outcome</div>
419
+ <p>The candidate entered applications and interviews with a story strong enough to survive the first screen.</p>
420
+ </div>
421
+ </div>
422
+ <div class="artifact-label">Live Artifact | Before and after bullets</div>
423
+ <div class="artifact-shell">
424
+ <div class="artifact-grid-2">
425
+ <div class="proof-block">
426
+ <div class="proof-label">Before</div>
427
+ <p>"Responsible for backend APIs."<br>"Managed engineers."<br>"Worked on reliability improvements."</p>
428
+ </div>
429
+ <div class="proof-block">
430
+ <div class="proof-label">After</div>
431
+ <p>"Reduced p95 API latency 62% across 2M requests/day."<br>"Scaled team from 2 to 7 engineers."<br>"Led incident recovery for 40K affected users."</p>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </article>
437
+
438
+ <article class="card" id="card2">
439
+ <div class="card-header" onclick="toggleCard(2)">
440
+ <div class="card-icon">OPS</div>
441
+ <div class="card-meta">
442
+ <div class="card-tag">Job Application Execution</div>
443
+ <div class="card-title">One operating queue for target roles, packaging, and follow-ups</div>
444
+ <div class="card-subtitle">FRAIM | job-application-execution</div>
445
+ </div>
446
+ <div class="card-toggle">&rsaquo;</div>
447
+ </div>
448
+ <div class="card-body">
449
+ <p class="context">The candidate had 14 saved openings, 4 half-finished applications, and no consistent rule for which ones deserved real effort. CAREEna turned the pile into an execution system.</p>
450
+ <div class="proof-grid">
451
+ <div class="proof-block">
452
+ <div class="proof-label">Problem</div>
453
+ <p>High-fit roles were buried beside low-signal ones and follow-ups were getting missed.</p>
454
+ </div>
455
+ <div class="proof-block">
456
+ <div class="proof-label">What CAREEna did</div>
457
+ <p>Ranked openings by fit and urgency, matched each to a tailored application package, and defined next-action dates.</p>
458
+ </div>
459
+ <div class="proof-block">
460
+ <div class="proof-label">Outcome</div>
461
+ <p>The user moved from passive browsing to an application pipeline with momentum and accountability.</p>
462
+ </div>
463
+ </div>
464
+ <div class="artifact-label">Live Artifact | Application tracker</div>
465
+ <div class="artifact-shell">
466
+ <table class="tracker">
467
+ <thead>
468
+ <tr><th>Company</th><th>Role</th><th>Apply path</th><th>Status</th><th>Next action</th></tr>
469
+ </thead>
470
+ <tbody>
471
+ <tr><td>Figma</td><td>Senior Product Engineer</td><td>Referral first</td><td><span class="badge badge-blue">Package ready</span></td><td>Send referral brief Tue</td></tr>
472
+ <tr><td>Notion</td><td>Platform Engineer</td><td>Direct apply</td><td><span class="badge badge-pink">Submitted</span></td><td>Recruiter follow-up Fri</td></tr>
473
+ <tr><td>Linear</td><td>Engineering Manager</td><td>Referral first</td><td><span class="badge badge-amber">Research hold</span></td><td>Confirm compensation floor</td></tr>
474
+ <tr><td>Ramp</td><td>Staff Engineer</td><td>Direct apply</td><td><span class="badge badge-green">Prioritized</span></td><td>Finalize targeted resume tonight</td></tr>
475
+ </tbody>
476
+ </table>
477
+ </div>
478
+ </div>
479
+ </article>
480
+
481
+ <article class="card" id="card3">
482
+ <div class="card-header" onclick="toggleCard(3)">
483
+ <div class="card-icon">NET</div>
484
+ <div class="card-meta">
485
+ <div class="card-tag">Networking</div>
486
+ <div class="card-title">Warm-path outreach tied directly to active roles</div>
487
+ <div class="card-subtitle">FRAIM | career-networking</div>
488
+ </div>
489
+ <div class="card-toggle">&rsaquo;</div>
490
+ </div>
491
+ <div class="card-body">
492
+ <p class="context">Networking is only useful when it connects to a live role or a real team. CAREEna treats outreach as part of the same job-search operating loop instead of as disconnected advice.</p>
493
+ <div class="proof-grid">
494
+ <div class="proof-block">
495
+ <div class="proof-label">Tier 1</div>
496
+ <p>Hiring managers and team leads with a visible opening or team signal.</p>
497
+ </div>
498
+ <div class="proof-block">
499
+ <div class="proof-label">Tier 2</div>
500
+ <p>Employees adjacent to the team who can validate fit and unlock referrals.</p>
501
+ </div>
502
+ <div class="proof-block">
503
+ <div class="proof-label">Tier 3</div>
504
+ <p>Thought leaders whose public posts create a lower-friction path into the relationship.</p>
505
+ </div>
506
+ </div>
507
+ <div class="artifact-label">Live Artifact | Outreach cadence</div>
508
+ <div class="artifact-shell">
509
+ <div class="artifact-grid-2">
510
+ <div class="proof-block">
511
+ <div class="proof-label">This week</div>
512
+ <p>Tuesday: send intro ask for Figma EM referral.<br>Wednesday: engage on Linear engineering lead post.<br>Thursday: recruiter check-in for Notion application.</p>
513
+ </div>
514
+ <div class="proof-block">
515
+ <div class="proof-label">Rule</div>
516
+ <p>Every target company gets a recommendation: apply first, referral first, or relationship build first. No more parallel guessing.</p>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </article>
522
+
523
+ <article class="card" id="card4">
524
+ <div class="card-header" onclick="toggleCard(4)">
525
+ <div class="card-icon">INT</div>
526
+ <div class="card-meta">
527
+ <div class="card-tag">Interview Prep</div>
528
+ <div class="card-title">Interviewer map even when the names are missing</div>
529
+ <div class="card-subtitle">FRAIM | pitch-and-interview-prep</div>
530
+ </div>
531
+ <div class="card-toggle">&rsaquo;</div>
532
+ </div>
533
+ <div class="card-body">
534
+ <p class="context">A lot of interview loops start with partial context: a recruiter note, a calendar invite, maybe a team name. CAREEna infers the likely interviewer set and preps the candidate against that actual loop shape.</p>
535
+ <div class="proof-grid">
536
+ <div class="proof-block">
537
+ <div class="proof-label">Known</div>
538
+ <p>Recruiter screen on Tuesday, team listed as "Core Platform", no interviewer names yet.</p>
539
+ </div>
540
+ <div class="proof-block">
541
+ <div class="proof-label">Inference</div>
542
+ <p>Likely loop: recruiter, hiring manager, peer engineer, and skip-level EM.</p>
543
+ </div>
544
+ <div class="proof-block">
545
+ <div class="proof-label">Prep output</div>
546
+ <p>Question bank, stories, and likely focus areas by seat instead of generic answers.</p>
547
+ </div>
548
+ </div>
549
+ <div class="artifact-label">Live Artifact | Interviewer coverage map</div>
550
+ <div class="artifact-shell">
551
+ <table class="tracker">
552
+ <thead>
553
+ <tr><th>Seat</th><th>Likely focus</th><th>Story to lead with</th></tr>
554
+ </thead>
555
+ <tbody>
556
+ <tr><td>Recruiter</td><td>Motivation, compensation, role fit</td><td>Why this company now</td></tr>
557
+ <tr><td>Hiring manager</td><td>Scope, ownership, cross-functional leverage</td><td>Latency reduction plus team growth</td></tr>
558
+ <tr><td>Peer engineer</td><td>Technical depth and collaboration</td><td>Incident response leadership</td></tr>
559
+ <tr><td>Skip-level</td><td>Trajectory, judgment, business impact</td><td>Operating at staff-level before title</td></tr>
560
+ </tbody>
561
+ </table>
562
+ </div>
563
+ </div>
564
+ </article>
565
+
566
+ <article class="card" id="card5">
567
+ <div class="card-header" onclick="toggleCard(5)">
568
+ <div class="card-icon">WIN</div>
569
+ <div class="card-meta">
570
+ <div class="card-tag">Role Sourcing</div>
571
+ <div class="card-title">Fresh openings and trigger events before the crowd shows up</div>
572
+ <div class="card-subtitle">FRAIM | job-application-execution</div>
573
+ </div>
574
+ <div class="card-toggle">&rsaquo;</div>
575
+ </div>
576
+ <div class="card-body">
577
+ <p class="context">The best application is often the one that reaches the right team at the right moment. CAREEna tracks live openings and company signals so the candidate knows whether to apply now, warm the path first, or wait for a stronger entry point.</p>
578
+ <div class="proof-grid">
579
+ <div class="proof-block">
580
+ <div class="proof-label">Signals watched</div>
581
+ <p>New postings, org changes, fundraising, launches, and peer movement into target teams.</p>
582
+ </div>
583
+ <div class="proof-block">
584
+ <div class="proof-label">Decision modes</div>
585
+ <p>`apply now`, `network first`, `hold`, or `skip` based on fit and urgency.</p>
586
+ </div>
587
+ <div class="proof-block">
588
+ <div class="proof-label">Close-stage link</div>
589
+ <p>Strong openings move directly into tailored application packaging and role-specific interview prep.</p>
590
+ </div>
591
+ </div>
592
+ <div class="artifact-label">Live Artifact | Target-role queue</div>
593
+ <div class="artifact-shell">
594
+ <table class="watch-table">
595
+ <thead>
596
+ <tr><th>Company</th><th>Trigger</th><th>Opportunity</th><th>Recommendation</th></tr>
597
+ </thead>
598
+ <tbody>
599
+ <tr><td>Linear</td><td>New platform team post</td><td>Staff Engineer opening live for 36 hours</td><td><span class="badge badge-green">Apply now</span></td></tr>
600
+ <tr><td>Figma</td><td>Hiring manager promoted</td><td>Backfill likely within 2 weeks</td><td><span class="badge badge-blue">Network first</span></td></tr>
601
+ <tr><td>Ramp</td><td>Infra launch announced</td><td>Team expansion signal without posted role yet</td><td><span class="badge badge-amber">Hold</span></td></tr>
602
+ </tbody>
603
+ </table>
604
+ <div class="artifact-note">CAREEna connects sourcing, application packaging, networking, and interview prep so the search keeps moving.</div>
605
+ </div>
606
+ </div>
607
+ </article>
608
+ </div>
609
+ </section>
610
+
611
+ <footer class="footer">
612
+ Part of <a href="/">FRAIM</a> | <a href="/portfolio/index.html">View all employees</a>
613
+ </footer>
614
+
615
+ <script>
616
+ function toggleTheme() {
617
+ const html = document.documentElement;
618
+ html.setAttribute('data-theme', html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
619
+ }
620
+
621
+ function toggleCard(num) {
622
+ const card = document.getElementById('card' + num);
623
+ const willOpen = !card.classList.contains('open');
624
+ document.querySelectorAll('.card').forEach((item) => item.classList.remove('open'));
625
+ if (willOpen) {
626
+ card.classList.add('open');
627
+ card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
628
+ }
629
+ }
630
+ </script>
631
+ </body>
632
+ </html>