Chat only → session context + generated outline · Deck only → slides + the deck's own outline · Deck + chat → deck sets the structure, session tailors it · Nothing → nothing is invented
);
const DIAGRAMS = {
'01': DiagramAIQSR,
'02': DiagramWes,
'03': DiagramMA,
'04': DiagramComp,
'05': DiagramZerpha,
'06': DiagramUlife,
'07': DiagramMini,
'08': DiagramDecks,
};
// ────────────────────────────────────────────────────────────────
// CASE STUDIES DATA
// ────────────────────────────────────────────────────────────────
const CASE_STUDIES = {
'01': {
summary: 'Greenfield monolithic platform tracking AI initiatives across the entire Constellation Software portfolio. Shipped from zero to production in a single dev cycle.',
stack: [
['Frontend', 'React · TypeScript · Next.js 14 · Chart.js'],
['Backend', 'Node.js · Express'],
['Database', 'Supabase (PostgreSQL) · Row-Level Security · 44 migrations'],
['AI Layer', 'Azure OpenAI · GPT-4 · context-grounded chat'],
['Infra', 'Docker · Azure Container Apps · Azure Container Registry · GitHub Actions CI/CD'],
],
approach: [
'Designed monolithic architecture (intentionally) — fast iteration, single dev cycle, zero infra overhead during rapid feature delivery.',
'CI/CD: GitHub Actions builds 3 Docker images, pushes to ACR, deploys on every merge to main.',
'Managed 44 PostgreSQL migrations across the project lifecycle with zero downtime.',
'Implemented Supabase RLS for domain-restricted access — 120+ approved org domains, admin / editor / viewer roles.',
'Diagnosed PKCE auth bug where code_verifier cookies failed across browser tabs → migrated to Supabase token_hash verification.',
'Discovered PostgreSQL NULL != NULL bug in triggers silently blocking admin removal for invited users.',
'Added client-side caching + request deduplication → 80% reduction in redundant API calls.',
],
outcomes: [
{ v: '957', l: 'AI initiatives tracked' },
{ v: '100+', l: 'operating companies' },
{ v: '120+', l: 'approved org domains' },
{ v: '44', l: 'database migrations · 0 downtime' },
{ v: '80%', l: 'fewer API calls (caching + dedup)' },
{ v: '< 1s', l: 'page transitions (from 2+ s)' },
],
},
'02': {
summary: 'Brownfield AI chatbot embedded into an existing .NET warehouse management system. Translated natural-language queries into SQL against the live ops database.',
stack: [
['Frontend', 'Angular · embedded chatbot module'],
['Backend', 'C# · .NET Framework · brownfield integration'],
['AI Pattern', 'Text-to-SQL · schema-validated · LLM-grounded'],
['Auth', 'RBAC across warehouse user roles'],
['Methodology', 'AWS AI-DLC'],
],
approach: [
'Embedded a net-new AI chatbot into a production .NET codebase without disrupting live warehouse operations.',
'Built a text-to-SQL translator: natural-language query → validated SQL against the warehouse schema → safe execution.',
'Implemented RBAC governing chatbot access across operator / supervisor / admin roles.',
'Delivered the full feature in 2 weeks against a 4-week plan — 2× velocity.',
'Applied AWS AI-DLC throughout: mob elaboration, semantic context building, adaptive rituals.',
],
outcomes: [
{ v: '20×', l: 'faster queries (1 min → 2.3 s)' },
{ v: '95%', l: 'accuracy on warehouse queries' },
{ v: '$150K', l: 'savings unlocked in 2 weeks' },
{ v: '2 wks', l: 'delivery (vs 4-week plan)' },
{ v: '0', l: 'production disruption' },
],
},
'03': {
summary: 'RAG-based due diligence platform for the Jonas Finance team. Grounded document Q&A with clickable in-line citations so analysts could verify every AI claim instantly.',
stack: [
['Frontend', 'Next.js 15 · React · TypeScript · Tailwind · shadcn/ui'],
['Server', 'Next.js Server Actions (no exposed API surface)'],
['Vector', 'Supabase + pgvector · text-embedding-3-large'],
['LLM', 'Azure OpenAI GPT-4.1 · LangChain'],
['Dev Loop', 'Supabase MCP server · Claude Code'],
],
approach: [
'Used Next.js Server Actions instead of REST endpoints — type-safe RPC, no exposed API surface, simpler auth.',
'RAG pipeline: text-embedding-3-large into pgvector on Supabase for semantic doc search.',
'Two-panel UX: document navigation on the left, AI response on the right. UX directive from finance stakeholders.',
'Clickable in-line citations link every claim back to its source passage — analysts verify in one click.',
'Deliberately no auto-generated summaries on doc load. AI only responds to explicit queries — analysts stay in control.',
'Iterated weekly with Brent, Zack, and Maria from finance leadership.',
'Used Supabase MCP server + Claude Code for accelerated delivery.',
],
outcomes: [
{ v: '$120K', l: 'yearly savings' },
{ v: 'RAG', l: 'on production M&A docs' },
{ v: '¹ ² ³', l: 'clickable inline citations' },
{ v: '3', l: 'finance stakeholders bought in' },
],
quote: {
text: 'Impressed Brent, Zack, and Maria from finance leadership — built iteratively with weekly direct stakeholder input.',
attr: 'Stakeholder feedback',
},
},
'04': {
summary: 'Consulting + coaching engagement. Designed the end-to-end AI chatbot architecture for Computrition\'s healthcare platform and coached the team through implementation via AWS AI-DLC.',
stack: [
['Role', 'AI Architect / Consultant / Coach'],
['Methodology', 'AWS AI-Driven Development Lifecycle (AI-DLC)'],
['Format', 'Daily standups + working sessions · ~2 weeks'],
['Domain', 'Healthcare software · brownfield integration'],
],
approach: [
'Designed the full chatbot architecture and provided implementation guidance throughout the project lifecycle.',
'Defined technical roadmap, best practices, and step-by-step integration approach.',
'Facilitated daily standups + working sessions to keep the team aligned and unblocked.',
'Coached AI-DLC rituals: mob elaboration, semantic context building, adaptive workflow.',
'Ensured every line of AI-generated code was understood by the team — quality alongside velocity.',
],
outcomes: [
{ v: '< 2 wks', l: 'team shipped to production' },
{ v: '+1 day', l: 'ahead of target deadline' },
{ v: '10+', l: 'team now using AI coding daily' },
{ v: 'AI-DLC', l: 'adopted as ongoing practice' },
],
quote: {
text: '10+ person team is now using AI coding in their work every day via AI-DLC — the methodology stuck.',
attr: 'Ongoing outcome',
},
},
'05': {
summary: 'Personal project. RAG-powered intelligence platform for tracking M&A deals at the initial-stage — compressing analyst research from hours to under three minutes.',
stack: [
['Frontend', 'React (Netlify) · static site at zerpha.ca'],
['Backend', 'Node.js · Express · Railway (deep dive into infra)'],
['Scraping', 'Modular multi-page scrapers · structured extraction'],
['AI', 'Claude · Gemini · semantic M&A queries · JSON correction logic'],
['Data', 'Supabase · MDE (model-driven entity tracking)'],
],
approach: [
'Architected modular services for discovery, multi-page scraping, and structured insight extraction.',
'Deployed split-stack: Netlify for static frontend, Railway for backend services — chose intentionally to learn the infra layer.',
'Built RAG pipeline grounding LLM responses in scraped deal documents.',
'Used model-driven entity tracking (MDE) to maintain a canonical deal-stage representation across noisy sources.',
'Service-oriented backend architecture enabled 4× faster development velocity vs initial monolith attempt.',
],
outcomes: [
{ v: '< 3 min', l: 'research cycle (from hours)' },
{ v: '4×', l: 'dev velocity (vs early monolith)' },
{ v: 'RAG', l: 'semantic M&A queries' },
{ v: 'MDE', l: 'deal-stage tracking' },
],
},
'06': {
summary: 'AI voice receptionist for healthcare and service-industry clients. Handles inbound calls end-to-end — appointment scheduling, intake, sales qualification.',
stack: [
['Frontend', 'React · client dashboard'],
['Voice Layer', 'Vapi · real-time speech-to-speech AI agent'],
['Backend', 'Node.js API · intent routing · sales scripts'],
['LLM', 'OpenAI API · conversational + intent classification'],
['Database', 'PostgreSQL · appointments · intake · client log'],
],
approach: [
'Used Vapi as the real-time voice layer — handles speech-to-text, agent turn-taking, and TTS without rolling our own.',
'Built intent routing and sales-qualification logic in Node.js — the agent does more than just book, it qualifies.',
'Integrated with PostgreSQL for appointment booking and client intake — the agent writes directly to the schedule.',
'Sold the platform via direct outreach + product demos in healthcare and service verticals.',
],
outcomes: [
{ v: '3', l: 'paid contracts closed' },
{ v: '30–50', l: 'qualified meetings generated' },
{ v: '24/7', l: 'lead capture · no human staffing' },
{ v: 'Healthcare', l: 'primary vertical · PMF signal' },
],
},
'07': {
summary: 'AI consulting + coaching engagement. Helping Minisoft (post-acquisition into Jonas/CSI) implement AI capabilities in their payments product via AWS AI-DLC.',
stack: [
['Role', 'AI Architect / Consultant / Coach'],
['Framework', 'AWS AI-DLC · translated to payments domain'],
['Tooling', 'Cursor · Claude Code · spec-driven dev'],
['Pattern', 'Brownfield integration into existing payments feature'],
],
approach: [
'Acting as primary AI architect, translating AWS AI-DLC into Minisoft\'s payments product context.',
'Hands-on guidance on AI coding tooling — Cursor, Claude Code, spec-driven workflows.',
'Educating the team on AI-DLC rituals: mob elaboration, semantic context building, adaptive sprints.',
'Same proven model that worked at Computrition — daily collaboration, architecture ownership, team enablement.',
'Coaching the team from AI-assisted to AI-native development practices.',
],
outcomes: [
{ v: '60%', l: 'time savings on delivery' },
{ v: 'CSI', l: 'AI standards onboarding' },
{ v: 'Brownfield', l: 'payments feature integration' },
{ v: 'Live', l: 'consulting · ongoing' },
],
},
'08': {
summary: 'watsonx Workshop can turn a seller\'s working session into a finished presentation through an agentic slide engine. I engineered the grounding layer: the part that decides what the engine actually sees — the chat, the seller\'s own slides, the focus — so the deck is about their deal and not a generic pitch. Built on a teammate\'s base integration with the engine\'s API, with the engine itself owned by a partner team, and merged to main on the planned release day.',
stack: [
['Backend', 'Python · FastAPI · SQLAlchemy · PostgreSQL'],
['Engine', 'Partner team\'s agentic slide builder · HTTP API · long-running runs'],
['Grounding', 'Session context builder · source assembler · LLM outline step'],
['Infra', 'OpenShift · one environment and one Postgres schema per branch · CI/CD'],
['Dev Loop', 'Two Claude Code agent sessions in parallel · written handoffs'],
['Testing', 'pytest · failing-first tests · real end-to-end runs'],
['Teams', 'Workshop engineering · the engine\'s team · internal testers'],
],
approach: [
'What it does: a seller clicks Generate and Workshop gathers their session, hands it to the engine as source documents plus a short goal, drives the run to completion in the background, and stores the finished .pptx and PDF, with an optional narrated video.',
'My part: the grounding layer and its release. I designed the rules for what gets sent, made session reads safe across environments, set how long Workshop waits for a run, and made the engine selectable per environment. I directed two AI coding agents in parallel, reviewed and approved every commit and push, and ran the real validation runs myself.',
'What does the engine see? Four cases, one rule each. Chat only: the session context plus an outline generated from it. Deck only: the slides and the deck\'s own outline. Deck and chat: the deck sets the structure and the session tailors it. Nothing: nothing is sent, and no outline is invented.',
'Why documents and not one big prompt? The engine takes source documents and a short goal, so the substance travels as size-capped documents and the goal stays a few lines: title, focus, and how to treat an uploaded deck.',
'Why never generate an outline from an empty session? Asked to outline nothing, an LLM writes a confident generic pitch and the engine follows it. An empty input now produces no outline, and says so in the logs.',
'How does it work in every environment? Each branch is deployed with its own Postgres schema. Raw SQL resolves bare table names through the default schema, so the session reader now names the environment\'s schema explicitly and rejects anything that is not a plain identifier.',
'How does a 15 to 20 minute job fit a web request? It doesn\'t. Generation runs as a background task that polls the engine every 8 seconds for up to 35 minutes, reports progress to the UI, answers the engine\'s own questions so no human is needed, and can be cancelled.',
'What happens when a piece fails? Each stage degrades on its own: an unreadable deck falls back to the session, a context failure still sends the deck, an outline failure is not fatal, and a timeout records which run it was and where it stopped. Every fallback is logged.',
'How do we know it works? Each rule has a test that failed before the change and passes after, and the logs record how much chat was read and what was sent. A real run on the test environment went from 0 to 11,600 characters of chat sent, and 21 of 25 specific details in the deck traced back to the conversation.',
'Who was involved? The engine is built by a separate team, so this ran in one shared channel with their engineers, our testers and my team lead. Each change shipped as its own small commit to the shared test environment so testers could retest while the next was in progress, and everything was reviewed and merged on release day.',
],
findings: [
{ v: '30 / 30', l: 'runs carried no chat before the change' },
{ v: '6', l: 'real chat sessions read as empty' },
{ v: '0', l: 'errors raised · it failed silently' },
{ v: '~2 KB', l: 'outline invented from an empty session' },
{ v: '95% vs 35%', l: 'faithful to the deck vs the session' },
{ v: '2', l: 'runs dropped at 20 min, engine still working' },
{ v: '5 on 2', l: 'runs queued on two engine workers' },
{ v: '4', l: 'design gaps, all on the Workshop side' },
],
outcomes: [
{ v: '4', l: 'grounding rules, one per input case' },
{ v: '0 → 11.6K', l: 'characters of chat reaching the engine' },
{ v: '12 → 12', l: 'uploaded slides in, same slides out' },
{ v: '21 / 25', l: 'deck details traced to the chat' },
{ v: '17 min', l: 'real deck built end to end' },
{ v: '35 min', l: 'run budget, up from 20' },
{ v: '74', l: 'tests passing · new ones fail-first' },
{ v: '1 day', l: 'design → merged, on release day' },
],
quote: {
text: 'A generator is only as good as what you hand it. Most of the engineering here is deciding what the engine gets to see.',
attr: 'Design principle',
},
},
};
// ────────────────────────────────────────────────────────────────
// MODAL
// ────────────────────────────────────────────────────────────────
const CaseStudyModal = ({ project, onClose }) => {
React.useEffect(() => {
if (!project) return;
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', onKey);
document.body.style.overflow = '';
};
}, [project, onClose]);
if (!project) return null;
const cs = CASE_STUDIES[project.n];
const Diagram = DIAGRAMS[project.n];
if (!cs) return null;
return (
{ if (e.target === e.currentTarget) onClose(); }}
>