// markflord — landing page sections (editorial register). // Reuses the Spine maker's mark from monograms.jsx. Dark default; paper toggle. const { useState, useEffect, useRef } = React; const isLight = () => document.documentElement.getAttribute('data-theme') === 'light'; // theme-aware mark wrapper (Spine is the lead direction) function Mark({ size, forged }) { const [, force] = useState(0); useEffect(() => { const o = new MutationObserver(() => force((n) => n + 1)); o.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); return () => o.disconnect(); }, []); return ; } function Kicker({ children, style, className }) { return
{children}
; } // ── Masthead ──────────────────────────────────────────────────────────────── const PRESENTATIONS = [ ['Forge — Investor Deck', '/forge · interactive', '/forge'], ['Forge — One-pager', '/onepage · web', '/onepage'], ['Forge — The Thesis', '/thesis · XVI chapters', '/thesis'], ]; function Masthead({ theme, toggle }) { const [pres, setPres] = useState(false); const [menu, setMenu] = useState(false); useEffect(() => { const h = (e) => { if (!e.target.closest('.pres-wrap')) setPres(false); }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, []); const close = () => { setPres(false); setMenu(false); }; return (
MARK LORD
Contact
{menu && (
The Maker Hyperion Work
Presentations
{PRESENTATIONS.map(([t, sub, href]) => ( {t}{sub} ))} Contact
)}
); } // ── Hero ──────────────────────────────────────────────────────────────────── // Hero monogram — EXACTLY variant IV (Molten L) from the Monogram Motion page: // Cinzel M (steel) + L (molten ember), looping forge via the shared .amk-* classes. function HeroMark() { const u = 'heromk'; const M = (fill, cls) => M; const L = (fill, cls) => L; return ( {M(`url(#${u}-steel)`)} {L(`url(#${u}-ember)`)} {M('#FFF6E8')}{L('#FFF6E8')} ); } function Hero() { return (
{/* left — copy */}
Founder · Systems Architect · Maker

I build the systems
businesses run on.

— and the software factory behind them.

Forged, not printed · Owned software, not rented tools
{/* right — the mark, struck */}
); } // ── The Maker ───────────────────────────────────────────────────────────── function Stat({ v, k }) { return (
{v} {k}
); } function VenturePlate({ name, role, href, ext }) { return ( {name} {role} {ext} ); } function Maker() { return (
{/* portrait */}
Mark Lord
{[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h],i) => ( ))}
MARK LORD ALBUQUERQUE · NM
{/* connect — LinkedIn, directly under the portrait */} CONNECT ON LINKEDIN {/* facts ledger — under the portrait, to balance the column */}
{/* bio */}
i. The Maker

An operator long before I was a founder.

I started in storefronts, not server rooms — two Cold Stone Creamery shops in Albuquerque before I was old enough to know better. Then eighteen months in the labs, on the team that helped bring LED lighting into the world we now take for granted.

Most of the years since I spent in sales and business development — learning, in a few hundred rooms, exactly what the work needs and what the tools keep getting wrong. In 2025 I built two companies to answer it: CalLord, a commercial security & AV integration firm, and Dominus Foundry, the software factory behind the trade. CalLord is the proving ground; the Foundry is where the tools get forged.

Built alongside Bri Lord, steward of the work — Fide et Familia. By faith and family.

{/* ventures */}
Ventures
); } // ── Hyperion — proprietary instrument, counterweight to The Maker ────────── function HyperionScan() { const w = 440, h = 372, rows = 22, cols = 19; const seed = (i) => { const x = Math.sin(i * 9301 + 49297) * 233280; return x - Math.floor(x); }; const dots = []; for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) { const u = c / (cols - 1), v = r / (rows - 1); const px = u * w, pitch = Math.abs(u - 0.5) * -h * 0.16, py = v * h * 0.66 + h * 0.18 + pitch; const dx = u - 0.5, dy = v - 0.5, dist = Math.sqrt(dx * dx + dy * dy), fall = Math.max(0, 1 - dist * 1.35); const j = (seed(r * cols + c) - 0.5) * 4, a = Math.pow(fall, 1.2) * (0.32 + seed(r * cols + c + 1) * 0.55); dots.push(); } const hi = [[0.30, 0.40, 'VENT'], [0.63, 0.35, 'HVAC'], [0.78, 0.58, 'SKYLIGHT']]; return ( {dots} {hi.map(([x, y, l], i) => ( {l} ))} ); } // Loads the LiDAR clip via fetch→blob→object URL so it plays even where the // static host doesn't serve HTTP range requests (and offline once bundled). function HyperionVideo() { const ref = React.useRef(null); React.useEffect(() => { let url; const el = ref.current; let off = false; fetch('assets/hyperion-lidar.mp4').then((r) => r.blob()).then((b) => { if (off) return; url = URL.createObjectURL(b); if (el) { el.src = url; el.play && el.play().catch(() => {}); } }).catch(() => {}); return () => { off = true; if (url) URL.revokeObjectURL(url); }; }, []); return