Active experiments

{experiments.map(([title, body], i) => (

{String(i + 1).padStart(2, '0')}

{title}

{body}

))}

); } function CapabilityRail() { const items = ['CRM transformation', 'Customer engagement', 'Marketing technology', 'Automation', 'AI agents', 'Knowledge systems', 'Prototyping', 'Change delivery']; return (

{[...items, ...items].map((item, i) => ( {item} ))}

); } function Features() { const cards = [ { label: 'Transform', title: 'Customer operations that stop leaking energy.', body: 'CRM and engagement work usually fails in the joins: data, process, ownership, tooling and decision-making. I help make those joins visible, then workable.', items: ['CRM transformation', 'Engagement strategy', 'Operating model clarity'] }, { label: 'Prototype', title: 'AI systems with a job, not a halo.', body: 'The useful work is not “adding AI”. It is finding the repeated judgement, retrieval or coordination problem — then building a small system that proves the point.', items: ['Internal tools', 'Knowledge workflows', 'Practical automation'] }, { label: 'Simplify', title: 'Complexity translated into something humans can run.', body: 'The output should be a clearer brief, a better sequence, a sharper operating rhythm, or fewer haunted spreadsheets. Preferably all four.', items: ['Clearer decisions', 'Better briefs', 'Reusable systems'] } ]; return (

Profile / Operating Layer

{cards.map((card, i) => )}

Current signal

Less theatre. More working systems.

I am interested in the practical edge: where transformation stops being a deck and becomes an operating rhythm, a prototype, a usable workflow, or a decision someone can make faster.

); } /* ---------------- OPERATING LAYER PROTOTYPE ---------------- */ function OperatingLayerWindow({ eyebrow, title, children, className = '', dark = false }) { return (

{eyebrow}

{title}

{children}

); } function OperatingLayerChapter({ index, label, title, problem, intervention, output }) { return (

{String(index + 1).padStart(2, '0')} {label}

{[ ['Symptom', problem], ['Intervention', intervention], ['Afterwards', output] ].map(([k, v]) => (

{k}

{v}

))} ); } function OperatingLayerArtifact({ index, title, body, tags }) { return (

{String(index + 1).padStart(2, '0')} Specimen

{title}

{body}

{tags.map((tag) => ( {tag} ))}

); } function OperatingLayerPostHero() { const chapters = [ { label: 'The Fog', title: 'Mess made visible.', problem: 'Customer data, campaigns, handoffs and ownership drift apart until nobody can see where the work is leaking.', intervention: 'Map the joins: source, decision, owner, action, feedback loop. Name what is actually broken before adding tools.', output: 'A shared diagnostic view: fewer opinions, clearer constraints, and a first useful brief.' }, { label: 'The Joins', title: 'The operating model takes shape.', problem: 'CRM, marketing technology and delivery teams each hold part of the truth, but not enough to act cleanly.', intervention: 'Translate the messy edge into journeys, states, rules, handoffs and evidence the team can reason about.', output: 'A workable model of how customer engagement should actually run.' }, { label: 'The Prototype', title: 'Build the smallest system that proves it.', problem: 'Big platforms and vague AI ideas hide whether the operating rhythm is sound.', intervention: 'Build a thin tool, workflow or agentic sequence that does one useful job and can be observed failing safely.', output: 'A tangible artefact: prototype, workflow, evaluation checklist, or private knowledge layer.' }, { label: 'The Rhythm', title: 'Make it repeatable.', problem: 'Good interventions decay when they live in decks, meetings or one person’s head.', intervention: 'Embed the sequence into cadence, ownership, documentation, automation and decision habits.', output: 'A clearer way of working that teams can run without theatrical supervision.' } ]; const artifacts = [ ['CRM leakage map', 'A practical view of where customer data, campaign activity and team ownership stop lining up.', ['journey', 'ownership', 'risk']], ['Prototype workflow', 'A thin working sequence for retrieval, decision support or automation before committing to platform weight.', ['prototype', 'AI', 'workflow']], ['Operating rhythm brief', 'A decision-ready description of who does what, when, with which signal, and what happens next.', ['cadence', 'handoff', 'brief']], ['Private knowledge layer', 'A local-first way to preserve source material, context and recommendations without throwing raw content into random systems.', ['local-first', 'retrieval', 'trust']] ]; return (

); } /* ---------------- OPERATING LAYER V2: CINEMATIC CASE BOARD ---------------- */ function CaseBoardSignal({ x, y, label, detail, tone = 'cream' }) { const bg = tone === 'dark' ? 'rgba(13,15,18,0.82)' : 'rgba(236,235,230,0.88)'; const fg = tone === 'dark' ? '#F2EEDB' : '#18140F'; const muted = tone === 'dark' ? '#D6C0A8' : '#6D553F'; return (

{label}

{detail}

); } function CaseBoardRow({ index, verb, text }) { return (

{String(index).padStart(2, '0')}

{verb}

{text}

); } function OperatingLayerV2PostHero() { const specimenRows = [ ['CRM leakage map', 'Where customer data, ownership and action stop lining up.', 'journey / ownership / risk'], ['Prototype workflow', 'One thin sequence that proves whether AI or automation has a real job.', 'prototype / run log / evaluation'], ['Operating rhythm brief', 'Who does what, when, using which signal, and what changes afterwards.', 'cadence / decision / handoff'], ['Private knowledge layer', 'Source-preserving retrieval and recommendations without spraying raw context everywhere.', 'local-first / retrieval / trust'] ]; return (

); } /* ---------------- CONTACT / HOLDING CLOSE ---------------- */ function ContactClose() { return (

Inquiries / Holding pattern

Useful systems, clearer change, and fewer haunted spreadsheets.

This is a holding page for now. The next version will add selected work, experiments, and practical notes from the edge of CRM transformation, automation and local-first AI.

Start a conversation Back to profile

); } /* ---------------- Scroll scrub + screen-handoff controller ---------------- */ function useHeroScrub() { useEffect(() => { const video = document.getElementById('hero-video'); const idleVideo = document.getElementById('hero-idle-video'); const track = document.getElementById('hero-track'); const ui = document.getElementById('hero-ui'); const cue = document.getElementById('scroll-cue'); const boot = document.getElementById('boot-flash'); const heroWhite = document.getElementById('hero-white'); const heroAbout = document.getElementById('hero-about-preview'); if (!video || !track) return; const clamp = (x, a, b) => Math.min(b, Math.max(a, x)); const smooth = (e0, e1, x) => { const t = clamp((x - e0) / (e1 - e0), 0, 1); return t * t * (3 - 2 * t); }; let target = 0, current = 0, raf = 0, lastSeekAt = 0; function compute() { const vh = window.innerHeight; const range = track.offsetHeight - vh; const scrolled = clamp(-track.getBoundingClientRect().top, 0, range); const p = range > 0 ? scrolled / range : 0; target = p * SCRUB_END; // At rest, play the ambient idle loop. As soon as the user scrolls, crossfade // to the scrubbed laptop video so one element is never asked to both loop and seek. const scrubIn = smooth(0.002, 0.035, p); if (idleVideo) { idleVideo.style.opacity = String(1 - scrubIn); if (p < 0.004 && idleVideo.paused) { if (idleVideo.currentTime >= IDLE_LOOP_END) { try { idleVideo.currentTime = 0; } catch (e) {} } const idlePlay = idleVideo.play(); if (idlePlay && idlePlay.catch) idlePlay.catch(() => {}); } if (p > 0.06 && !idleVideo.paused) idleVideo.pause(); } video.style.opacity = String(scrubIn); // Final stretch dissolves to a whole-white screen, then reveals the About // copy inside the hero before the separate About section takes over. if (heroWhite) heroWhite.style.opacity = String(smooth(WHITE_START, WHITE_END, p)); if (heroAbout) { const aboutIn = smooth(0.88, 0.98, p); heroAbout.style.opacity = String(aboutIn); heroAbout.style.transform = 'translateY(' + ((1 - aboutIn) * 24) + 'px)'; } // Branding fades + drifts up as the camera pushes in (kept on screen longer) const uiHide = smooth(0.08, 0.56, p); if (ui) { ui.style.opacity = String(1 - uiHide); ui.style.transform = 'translateY(' + (-uiHide * 36) + 'px)'; ui.style.pointerEvents = uiHide > 0.9 ? 'none' : ''; } if (cue) cue.style.opacity = String(1 - smooth(0.02, 0.12, p)); // The About preview now provides the handoff. Keep the old white flash // disabled so it doesn't blank out the laptop-screen content at the seam. if (boot) boot.style.opacity = '0'; } function loop(ts = 0) { current += (target - current) * 0.18; // lerp → smooth, eased scrub if (Math.abs(target - current) < 0.006) current = target; if (idleVideo && !idleVideo.paused && idleVideo.currentTime >= IDLE_LOOP_END) { try { idleVideo.currentTime = 0; } catch (e) {} } if (video.readyState >= 1) { const diff = Math.abs(video.currentTime - current); const canSeek = !video.seeking || diff > 0.22; if (diff > 0.016 && canSeek && (ts - lastSeekAt > 30 || diff > 0.18)) { try { video.currentTime = current; lastSeekAt = ts; } catch (e) {} } } raf = requestAnimationFrame(loop); } // Prime decoding on first interaction (helps mobile seek smoothly) let primed = false; const prime = () => { if (primed) return; primed = true; const pr = video.play(); if (pr && pr.then) pr.then(() => video.pause()).catch(() => {}); }; ['wheel', 'touchstart', 'pointerdown', 'keydown'].forEach((e) => window.addEventListener(e, prime, { once: true, passive: true })); const showFirst = () => { try { video.currentTime = 0; } catch (e) {} }; if (video.readyState >= 1) showFirst(); else video.addEventListener('loadeddata', showFirst, { once: true }); if (idleVideo) { const idlePlay = idleVideo.play(); if (idlePlay && idlePlay.catch) idlePlay.catch(() => {}); } compute(); window.addEventListener('scroll', compute, { passive: true }); window.addEventListener('resize', compute); raf = requestAnimationFrame(loop); return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', compute); window.removeEventListener('resize', compute); }; }, []); } function App() { useHeroScrub(); const sectionTest = new URLSearchParams(window.location.search).get('sectionTest'); const useOperatingLayer = sectionTest === 'operating-layer'; const useOperatingLayerV2 = sectionTest === 'operating-layer-v2'; useEffect(() => { window.__hanmatSectionDebug = { sectionTest: useOperatingLayerV2 ? 'operating-layer-v2' : (useOperatingLayer ? 'operating-layer' : 'default'), operatingLayerPresent: !!document.body.innerText.includes('Inside the working layer'), operatingLayerV2Present: !!document.body.innerText.includes('Make the mess visible.'), defaultFeaturesTextPresent: !!document.body.innerText.includes('Customer operations that stop leaking energy.'), }; }, [useOperatingLayer, useOperatingLayerV2]); return ( {useOperatingLayerV2 ? : (useOperatingLayer ? : )} {/* White "screen-on" beat that the portfolio emerges from (fixed, JS-driven opacity) */}

); } ReactDOM.createRoot(document.getElementById('root')).render();

Self-confessed geek, let loose with AI.

{title}

{title}

Less theatre. More working systems.

{title}

{title}

Inside the working layer.

Evidence, not another capability grid.

Make the mess visible.

Show the working, not the brochure.

{title}

Useful systems, clearer change, and fewer haunted spreadsheets.