{/* backdrop */}
{/* modal */}
);
}
// ─────────────────────────────────────────────────────────────
// TIME-AWARE GREETING
// ─────────────────────────────────────────────────────────────
function useGreeting() {
const h = new Date().getHours();
if (h < 5) return 'LATE NIGHT';
if (h < 12) return 'GOOD MORNING';
if (h < 17) return 'GOOD AFTERNOON';
if (h < 21) return 'GOOD EVENING';
return 'LATE NIGHT';
}
// ─────────────────────────────────────────────────────────────
// TYPEWRITER EFFECT
// ─────────────────────────────────────────────────────────────
function Typewriter({ text, speed = 35, delay = 0 }) {
const [displayed, setDisplayed] = useState('');
const [started, setStarted] = useState(false);
useEffect(() => {
const t = setTimeout(() => setStarted(true), delay);
return () => clearTimeout(t);
}, [delay]);
useEffect(() => {
if (!started) return;
if (displayed.length >= text.length) return;
const t = setTimeout(() => setDisplayed(text.slice(0, displayed.length + 1)), speed);
return () => clearTimeout(t);
}, [started, displayed, text, speed]);
return (
{displayed}
);
}
// ─────────────────────────────────────────────────────────────
// AMBIENT PIXEL PARTICLES
// ─────────────────────────────────────────────────────────────
function PixelParticles() {
const particles = useRef([]);
if (particles.current.length === 0) {
particles.current = Array.from({ length: 18 }, (_, i) => ({
id: i,
left: Math.random() * 100,
size: 2 + Math.random() * 4,
duration: 12 + Math.random() * 18,
delay: Math.random() * 15,
opacity: 0.15 + Math.random() * 0.3,
}));
}
return (
{/* close button */}
{/* top bar */}
{/* identity row */}
{!isMobile && (
)}
{/* two column layout */}
CLASSIFIED DOSSIER
STATUS: ACTIVE
MAROUN ABOU MAROUN
Engineer · Leader · Builder
Call Sign: MAVERICK
Sydney, Australia · Global Operations
P1
COMMANDING
OFFICER
OFFICER
{/* left — service record */}
{/* right — stats, clearance, comms */}
{/* bottom rule */}
SERVICE RECORD
{aboutText.map((p, i) => (
{p}
))}
{/* stats */}
))}
{/* clearance */}
{/* comms */}
STATS
{dossierStats.map((s, i) => (
{s.value}
{s.label}
{i < dossierStats.length - 1 && }
CLEARANCE
{dossierCerts.map(c => (
{c.icon} {c.label}
))}
COMMS
{dossierComms.map(c => (
{c.icon} {c.label}
))}
// END OF DOSSIER
CLASSIFICATION: OPEN
{particles.current.map(p => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// MOUSE PARALLAX HOOK
// ─────────────────────────────────────────────────────────────
function useMouseParallax(strength = 15) {
const [offset, setOffset] = useState({ x: 0, y: 0 });
useEffect(() => {
function onMove(e) {
const cx = (e.clientX / window.innerWidth - 0.5) * 2;
const cy = (e.clientY / window.innerHeight - 0.5) * 2;
setOffset({ x: -cx * strength, y: -cy * strength });
}
window.addEventListener('mousemove', onMove);
return () => window.removeEventListener('mousemove', onMove);
}, [strength]);
return offset;
}
// ─────────────────────────────────────────────────────────────
// COMMAND PALETTE
// ─────────────────────────────────────────────────────────────
function CommandPalette({ onNavigate, onClose }) {
const [query, setQuery] = useState('');
const inputRef = useRef(null);
const commands = [
{ key: 'home', label: 'HOME', desc: 'Back to the front page', icon: '⌂' },
{ key: 'work', label: 'WORK', desc: 'Career log · 20+ years', icon: '◆' },
{ key: 'about', label: 'ABOUT', desc: '$ whoami --verbose', icon: '◈' },
{ key: 'origin', label: 'ORIGIN', desc: 'Signal history · era selector', icon: '◉' },
{ key: 'blog', label: 'WRITING', desc: 'Articles · LinkedIn · long-form', icon: '▤' },
{ key: 'lens', label: 'LENS', desc: 'Instagram · curated feed', icon: '◎' },
{ key: 'comms', label: 'COMMS', desc: 'Say hi · open channel', icon: '▸' },
];
const filtered = commands.filter(c =>
c.label.toLowerCase().includes(query.toLowerCase()) ||
c.desc.toLowerCase().includes(query.toLowerCase())
);
const [selected, setSelected] = useState(0);
useEffect(() => {
inputRef.current?.focus();
const onKey = e => {
if (e.key === 'Escape') onClose();
if (e.key === 'ArrowDown') { e.preventDefault(); setSelected(s => Math.min(s + 1, filtered.length - 1)); }
if (e.key === 'ArrowUp') { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
if (e.key === 'Enter' && filtered[selected]) { onNavigate(filtered[selected].key); onClose(); }
};
window.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
}, [filtered.length, selected]);
useEffect(() => { setSelected(0); }, [query]);
return (
{/* input */}
/
setQuery(e.target.value)} placeholder="type a command..." style={{
flex: 1, background: 'transparent', border: 'none', outline: 'none',
color: PAPER, fontFamily: 'var(--mono)', fontSize: 15, letterSpacing: '0.05em',
}} />
ESC
{/* results */}
{filtered.map((c, i) => (
{/* hint bar */}
{ onNavigate(c.key); onClose(); }}
onMouseEnter={() => setSelected(i)}
style={{
display: 'flex', alignItems: 'center', gap: 14, padding: '12px 18px',
cursor: 'pointer', transition: 'background 100ms',
background: i === selected ? `${ACCENT}22` : 'transparent',
borderLeft: i === selected ? `3px solid ${ACCENT}` : '3px solid transparent',
}}>
{c.icon}
))}
{filtered.length === 0 && (
{c.label}
{c.desc}
↵
no matching commands
)}
↑↓ navigate↵ selectesc close
{/* scanline wipe */}
{/* ink flash */}
);
}
// ─────────────────────────────────────────────────────────────
// FAVICON ANIMATION
// ─────────────────────────────────────────────────────────────
function useFaviconAnimation() {
useEffect(() => {
const frames = [
{ char: 'M', color: '#ff2bd6' },
{ char: '▸', color: '#00e5ff' },
{ char: '◆', color: '#ff2bd6' },
{ char: '_', color: '#76ff03' },
];
let i = 0;
const link = document.getElementById('favicon');
if (!link) return;
const id = setInterval(() => {
i = (i + 1) % frames.length;
const f = frames[i];
link.href = `data:image/svg+xml,`;
}, 2000);
return () => clearInterval(id);
}, []);
}
// ─────────────────────────────────────────────────────────────
// VISITOR COUNTER (localStorage-based)
// ─────────────────────────────────────────────────────────────
function useVisitorCount() {
const [count, setCount] = useState(0);
useEffect(() => {
const key = 'maroun_au_visits';
const stored = parseInt(localStorage.getItem(key) || '0');
const isNew = !sessionStorage.getItem('maroun_au_counted');
const next = isNew ? stored + 1 : stored;
if (isNew) {
localStorage.setItem(key, next);
sessionStorage.setItem('maroun_au_counted', '1');
}
setCount(next);
}, []);
return count;
}
// ─────────────────────────────────────────────────────────────
// ANIMATED SLIDE COUNTER
// ─────────────────────────────────────────────────────────────
function SlideCounter({ value, total }) {
const [displayVal, setDisplayVal] = useState(value);
const [rolling, setRolling] = useState(false);
useEffect(() => {
setRolling(true);
const t = setTimeout(() => { setDisplayVal(value); setRolling(false); }, 150);
return () => clearTimeout(t);
}, [value]);
return (
{String(displayVal + 1).padStart(2, '0')}
{' / '}
{String(total).padStart(2, '0')}
);
}
// ─────────────────────────────────────────────────────────────
// FILM GRAIN OVERLAY
// ─────────────────────────────────────────────────────────────
function FilmGrain() {
return (
);
}
// ─────────────────────────────────────────────────────────────
// KONAMI CODE EASTER EGG
// ─────────────────────────────────────────────────────────────
const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
function useKonamiCode() {
const [triggered, setTriggered] = useState(false);
const pos = useRef(0);
useEffect(() => {
function onKey(e) {
if (e.key === KONAMI[pos.current]) {
pos.current++;
if (pos.current === KONAMI.length) {
setTriggered(true);
pos.current = 0;
}
} else {
pos.current = e.key === KONAMI[0] ? 1 : 0;
}
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
return [triggered, () => setTriggered(false)];
}
function KonamiEasterEgg({ onDismiss }) {
const [lines, setLines] = useState([]);
const bootSequence = [
' **** COMMODORE 64 BASIC V2 ****',
'',
' 64K RAM SYSTEM 38911 BASIC BYTES FREE',
'',
'READY.',
'LOAD "MAROUN.AU",8,1',
'',
'SEARCHING FOR MAROUN.AU',
'LOADING',
'READY.',
'RUN',
'',
'> HELLO, WORLD.',
'> YOU FOUND THE SECRET.',
'> MAROUN HAS BEEN CODING SINCE THE C64 ERA.',
'> THAT\'S NOT A METAPHOR. HE ACTUALLY HAD ONE.',
'',
'> PRESS ANY KEY TO RETURN...',
];
useEffect(() => {
let i = 0;
const id = setInterval(() => {
if (i < bootSequence.length) {
setLines(l => [...l, bootSequence[i]]);
i++;
} else {
clearInterval(id);
}
}, 180);
const onKey = (e) => {
if (i >= bootSequence.length) onDismiss();
};
window.addEventListener('keydown', onKey);
return () => { clearInterval(id); window.removeEventListener('keydown', onKey); };
}, []);
return (
{lines.map((l, i) => (
);
}
function Hero({ onNavigate, introDone = true }) {
const isMobile = useIsMobile();
const [media, setMedia] = useState([]);
const [current, setCurrent] = useState(0);
const [showAbout, setShowAbout] = useState(false);
const [glitching, setGlitching] = useState(false);
const greeting = useGreeting();
// const parallax = useMouseParallax(isMobile ? 0 : 12);
const parallax = { x: 0, y: 0 };
useEffect(() => {
Promise.all([
fetch('img/manifest.json').then(r => r.json()).catch(() => []),
fetch('video/manifest.json').then(r => r.json()).catch(() => []),
]).then(([imgList, vidList]) => {
const videoMap = {};
vidList.forEach(v => { if (v.replaces) videoMap[v.replaces] = v; });
const merged = imgList.map(imgSrc => {
if (videoMap[imgSrc]) return { type: 'video', src: videoMap[imgSrc].src, webm: videoMap[imgSrc].webm, poster: imgSrc };
return { type: 'image', src: imgSrc };
});
vidList.forEach(v => {
if (!v.replaces) merged.push({ type: 'video', src: v.src, webm: v.webm });
});
const c64Idx = merged.findIndex(m => m.src && m.src.includes('hero-c64'));
const first = c64Idx >= 0 ? merged.splice(c64Idx, 1)[0] : null;
const v2Idx = merged.findIndex(m => m.src && m.src.includes('hero-vid-2'));
const second = v2Idx >= 0 ? merged.splice(v2Idx, 1)[0] : null;
for (let i = merged.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[merged[i], merged[j]] = [merged[j], merged[i]];
}
if (second) merged.unshift(second);
if (first) merged.unshift(first);
setMedia(merged);
});
}, []);
useEffect(() => {
if (introDone) setCurrent(0);
}, [introDone]);
// Glitch transition on slide change
function glitchTransition(next) {
setGlitching(true);
setTimeout(() => {
setCurrent(next);
setTimeout(() => setGlitching(false), 200);
}, 150);
}
useEffect(() => {
if (!introDone || media.length < 2) return;
const item = media[current];
const duration = item && item.type === 'video' ? 7000 : 10000;
const id = setTimeout(() => setCurrent(c => (c + 1) % media.length), duration);
return () => clearTimeout(id);
}, [media, current, introDone]);
const heroSubtitle = 'I build teams that build platforms. 25 years from a Commodore 64 to cloud-native, AI-augmented, globally distributed.';
const mediaStyle = (i) => ({
position: 'absolute', inset: -20, width: 'calc(100% + 40px)', height: 'calc(100% + 40px)',
objectFit: 'cover',
opacity: i === current ? 1 : 0,
transition: 'opacity 1.2s ease-in-out',
transform: `translate(${parallax.x}px, ${parallax.y}px)`,
});
return (
<>
') ? '#fff' : '#a0a0ff' }}>{l || '\u00A0'}
))}
█
{/* hero background media — with parallax */}
{media.map((item, i) => (
item.type === 'video' ? (
) : (
)
))}
{/* vignette + bottom fade */}
{/* CRT scanlines */}
{/* film grain */}
► 00:00:12:04
● REC
CH.01
LAT -33.86 · LON 151.20
MAROUN.AU / 2026
)}
{/* corner ticks */}
{!isMobile && ['tl', 'tr', 'bl', 'br'].map(c => {
const pos = {
tl: { top: 10, left: 10, borderTop: `2px solid ${ACCENT}`, borderLeft: `2px solid ${ACCENT}` },
tr: { top: 10, right: 10, borderTop: `2px solid ${ACCENT}`, borderRight: `2px solid ${ACCENT}` },
bl: { bottom: 10, left: 10, borderBottom: `2px solid ${ACCENT}`, borderLeft: `2px solid ${ACCENT}` },
br: { bottom: 10, right: 10, borderBottom: `2px solid ${ACCENT}`, borderRight: `2px solid ${ACCENT}` },
}[c];
return ;
})}
{/* bottom-left H1 + CTA */}
MAROUN.AU / 2026
INDEX / 001 · {greeting} ░░
ENGINEER LEADER BUILDER
{!isMobile && (
{heroSubtitle}
)}
{ e.preventDefault(); setShowAbout(true); }} onMouseEnter={() => retroAudio.click()} style={{ ...primaryCta, padding: isMobile ? '14px 18px' : '18px 26px', fontSize: isMobile ? 12 : 14 }}>GET TO KNOW ME →
{num}
{title}
//
{sub}
);
}
// ─────────────────────────────────────────────────────────────
// WORK — career log
// ─────────────────────────────────────────────────────────────
const employers = [
{
company: 'FDJ United', years: '2016 → Present', logo: 'img/logos/fdj.png',
summary: 'A decade-long journey from team lead to directing 300+ engineers across five cities. Built a cloud-native sportsbook platform, led the pivot to AI-native operations, and scaled through a major acquisition.',
roles: [
{ t: '2024 →', role: 'Director of Engineering', note: '300+ people across Sydney / Stockholm / Paris / London / Balkans. Building a cloud-native, multi-region Sportsbook platform.', stack: 'cloud-native · ai-augmented' },
{ t: '2022-24', role: 'Head of Engineering', note: 'Led 200+ engineers across global locations. Shipping innovative products for regulated markets. Pioneered the pivot towards AI and agentic AI, optimising delivery and operations.', stack: 'leadership · delivery · ai' },
{ t: '2020-22', role: 'Head of Technology', note: 'Global strategic technology leadership across engineering org.', stack: 'platform · strategy · global' },
{ t: '2018-20', role: 'IT Operations Manager', note: 'Global operational leadership across engineering & infrastructure.', stack: 'infra · ops · global' },
{ t: '2016-18', role: 'Technology Team Lead', note: 'Tech-lead role in what would become a 10-year journey.', stack: 'team · delivery' },
],
},
{
company: 'MicroChannel Services', years: '2015 — 2016', logo: 'img/logos/microchannel.png',
summary: 'Technology leadership across MSP client engagements throughout APAC.',
roles: [
{ t: '2015-16', role: 'Technology Manager', note: 'Led technology across client-delivery engagements for clients within MicroChannel\'s MSP business throughout APAC.', stack: 'consulting' },
],
},
{
company: 'Caterpillar Inc.', years: '2010 — 2015', logo: 'img/logos/caterpillar.png',
summary: 'Engineering leadership in the heavy-industry software space. Asset management and forecasting systems deployed to CAT suppliers and operators globally.',
roles: [
{ t: '2011-15', role: 'Engineering Manager', note: 'Engineering management in the heavy-industry software space.', stack: 'systems · teams' },
{ t: '2010-11', role: 'Senior Technical Lead', note: 'Implementation of asset management and forecasting systems to CAT suppliers and operators across the globe.', stack: 'tech-lead' },
],
},
{
company: 'Brilliance Financial Technology', years: '2009 — 2010', logo: 'img/logos/brilliance.png',
summary: 'Pricing and risk systems in the fintech space.',
roles: [
{ t: '2009-10', role: 'Senior Business Analyst', note: 'Pricing & risk systems.', stack: 'fintech · risk' },
],
},
{
company: 'Reckon', years: '2003 — 2010', logo: 'img/logos/reckon.png',
summary: 'Where it all started. Seven years growing from software engineer to presales technical consultant across the APAC region.',
roles: [
{ t: '2006-10', role: 'Presales Technical Consultant', note: 'Technical presales across the APAC region.', stack: 'presales' },
{ t: '2004-06', role: 'Technical Consultant', note: 'Client-facing technical consulting.', stack: 'consulting' },
{ t: '2003-04', role: 'Software Engineer', note: 'Where it all started.', stack: 'engineering' },
],
},
];
function Work() {
const isMobile = useIsMobile();
const [open, setOpen] = useState(0);
return (
<>
{/* employer header */}
{/* expanded roles */}
);
})}
{p.n}.JPG
{p.tag && {p.tag}
}
{p.kind}
{p.title}
{p.blurb}
READ · CASE STUDY
↗
))}
{history.map((h, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// ABOUT — $ whoami terminal
// ─────────────────────────────────────────────────────────────
function About() {
const isMobile = useIsMobile();
return (
<>
> {h.q}
{h.a}
> cat ./summary.txt
I grew up on the analog-to-digital seam. Mechanical engineering first, then systems, the internet, cloud, and now a generation of software that writes, reasons, and operates alongside us. Twenty-plus years in, and I'm as comfortable in the engine room as I am in the boardroom. Today I'm focused on streamlining teams, processes, and businesses through Agentic workflows and automation.
{/* portrait + terminal — 2-column layout */}
{/* portrait */}
{/* terminal card */}
{/* beliefs row */}
LIVE
{[
{ top: 8, left: 8, bt: 2, bl: 2 },
{ top: 8, right: 8, bt: 2, br: 2 },
{ bottom: 44, left: 8, bb: 2, bl: 2 },
{ bottom: 44, right: 8, bb: 2, br: 2 },
].map((c, i) => (
))}
PORTRAIT.001
SYD / AU
maroun@au : ~/about
● LIVE
$ whoami --verbose
{`> name : Maroun Maroun
> based : sydney, au ( -33.86, 151.20 )
> role : director of engineering
> @ : fdj united · la française des jeux
> leading : data, product, engineering,
technology, delivery across
sydney, london, stockholm,
paris and the balkans
> building : cloud-native, cloud-agnostic
platforms. streamlining processes
and business units with agentic
tooling and automation.
> status : `}building_and_leading{`
> languages : arabic · english · limited spanish
> origin : mech eng → systems → internet →
cloud → agentic ai
> belief : the technology is the easy part.
people build the culture.
> ask : `}say hi ↗
{[
{ k: 'ON LEADING', v: 'I read the code. I sit with the on-call engineer when something is on fire. I open the dashboards myself.' },
{ k: 'ON AI', v: 'I\'ve built through every transition — analog to digital, on-prem to cloud, monolith to micro. AI makes good engineers dangerous. I ship it, not demo it.' },
{ k: 'ON CULTURE', v: 'The technology is the easy part. People build the culture, and the culture builds the products worth being part of.' },
].map(({ k, v }, i) => (
))}
{/* tech radar */}
// {k}
{v}
// TECH RADAR
{techStack.map(t => (
retroAudio.blip()} style={{
fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.08em',
padding: '3px 8px', border: `1px solid ${INK}`,
background: t.level >= 5 ? INK : t.level >= 4 ? `${INK}cc` : `${INK}55`,
color: t.level >= 4 ? PAPER : INK,
opacity: 0.4 + t.level * 0.12,
transition: 'all 150ms', cursor: 'default',
}}>{t.name}
))}
[INSTAGRAM]
{posts.length} posts · @maroun.au · follow to see more
SAY HI.
[ARTICLES]
{articles.length} published · linkedin
{/* spacer */}
{/* content backdrop */}
{/* era info */}
{/* end content backdrop */}
SELECT YOUR ERA
{/* era progress bar */}
{['I','II','III','IV','V'].map((n, i) => (
switchEra(i)} style={{
fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.1em', cursor: 'pointer',
color: i === era ? e.color : `${PAPER}44`,
textShadow: i === era ? `0 0 6px ${e.color}66` : 'none',
transition: 'all 0.2s',
}}>{n}
))}
{/* year + label */}
{/* dot nav */}
{e.year}
{e.label}
{/* description */}
{e.desc}
{/* tags */}
{e.tags.map(t => (
{t}
))}
{originEras.map((_, i) => (
))}
{/* manifesto line */}
The analog world taught discipline. The digital world unlocked scale. AI is redefining leverage.{' '} Two worlds made me. I'm building the third.
enter(true)} style={{
position: 'fixed', inset: 0, zIndex: 200, background: INK,
overflow: 'hidden', cursor: 'pointer',
animation: exiting ? 'introFadeOut 1.2s ease forwards' : undefined,
}}>
);
}
// ─────────────────────────────────────────────────────────────
function App() {
const [showIntro, setShowIntro] = useState(() => !window.location.hash || window.location.hash === '#');
const [page, setPage] = useState('home');
const [showPalette, setShowPalette] = useState(false);
const [konami, dismissKonami] = useKonamiCode();
const [transitioning, setTransitioning] = useState(false);
useFaviconAnimation();
function navigate(p) {
if (p === page) return;
setPage(p);
window.scrollTo(0, 0);
window.history.pushState(null, '', p === 'home' ? '#' : `#${p}`);
}
// Handle browser back/forward
useEffect(() => {
function onHash() {
const h = window.location.hash.slice(1);
setPage(h && ['work', 'about', 'origin', 'blog', 'lens', 'comms'].includes(h) ? h : 'home');
}
window.addEventListener('hashchange', onHash);
onHash();
return () => window.removeEventListener('hashchange', onHash);
}, []);
// Command palette shortcut: / or Ctrl+K
useEffect(() => {
function onKey(e) {
if (e.key === '/' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
e.preventDefault();
setShowPalette(true);
}
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
setShowPalette(p => !p);
}
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
const pages = { work: Work, about: About, origin: Origin, blog: Blog, lens: Lens, comms: Comms };
const PageComponent = pages[page];
return (
<>
{showIntro &&