// sections.jsx — page sections for AlexHosein.com // Exports components to window so app.jsx can compose them. const { useEffect, useRef, useState } = React; /* ───────────────────────────── Shared primitives ───────────────────────────── */ function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) { setTimeout(() => el.classList.add("in"), delay); io.unobserve(el); } }), { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, [delay]); return {children}; } function Pill({ children, accent = false }) { return ( {accent && } {children} ); } function Tag({ children }) { return ( {children} ); } /* ───────────────────────────── Top Nav ───────────────────────────── */ function TopNav() { const [active, setActive] = useState("about"); const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const items = [ ["about", "About"], ["work", "Work"], ["projects", "Projects"], ["skills", "Skills"], ["notes", "Notes"], ["contact", "Contact"], ]; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const ids = items.map(([id]) => id); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: "-45% 0px -50% 0px", threshold: 0 }); ids.forEach(id => { const el = document.getElementById(id); if (el) io.observe(el); }); return () => io.disconnect(); }, []); return ( ); } /* ───────────────────────────── Portrait Slot ───────────────────────────── */ function PortraitSlot() { return (
Alex Hosein
); } /* ───────────────────────────── HERO ───────────────────────────── */ function Hero() { return (
A_HOSEIN / 01 — Index

Alex
Hosein.

Quant Developer· AI Systems Builder· Founder

I build software systems across finance, AI, fitness, and automation. My work focuses on turning complex workflows into clean, scalable tools.

Senior Quantitative Developer Founder of HoZyne Finance + AI + Software Systems Builder
{/* hero meta bar */}
Currently
Building HoZyne · Vitae
Domain
Fixed Income · AI · Product
Stack
C# · Python · TS · AWS
Status
● open to conversations
); } /* ───────────────────────────── ABOUT ───────────────────────────── */ function About() { const paragraphs = [ "I'm a Software Engineer and Senior Quantitative Developer with experience building financial systems, automation tools, and AI-enabled workflows. My background sits at the intersection of markets, engineering, and product thinking.", "Outside of my professional work, I'm building HoZyne, a technology company focused on practical software products. I'm also building Vitae, a workout tracking product focused on clean training execution, progress tracking, and performance analytics.", "I'm interested in systems that create leverage: financial infrastructure, AI agents, developer tools, fitness platforms, education systems, and products that help people perform better.", "When I'm not coding or building, I'm usually training, learning Spanish, studying markets, experimenting with AI tools, or planning the next product.", ]; const facets = [ ["LOCATION", "Remote · NYC orbit"], ["LANGUAGES", "English · Aprendiendo Español"], ["FOCUS", "Markets · AI · Product"], ["INTERESTS", "Training · Systems · Coding"], ]; return (
02 — About

Engineering at the intersection of markets, AI, and product.
{paragraphs.map((p, i) => (

{p}

))}
at_a_glance
{facets.map(([k, v]) => (
{k} {v}
))}
{["systems thinking", "calm execution", "AI-native"].map(t => {t})}
); } /* ───────────────────────────── TIMELINE / BACKGROUND ───────────────────────────── */ function Timeline() { const themes = [ "Financial systems", "Fixed income technology", "Automation", "Internal tools", "Quantitative development", "Production-grade software", "AI & agentic workflows", ]; const entries = [ { time: "Present", role: "Senior Quantitative Developer", org: "Fixed Income · FinTech", copy: "Building and maintaining software systems in the fixed income and financial technology space, with a focus on reliability, automation, data workflows, and scalable engineering.", tags: ["Production systems", "Data workflows", "Reliability"], }, { time: "Concurrent", role: "Founder · HoZyne", org: "Independent", copy: "Operating an AI-native software studio building practical products at the intersection of finance, fitness, and developer tooling. Shipping with small teams, AI-leveraged workflows, and strong systems thinking.", tags: ["Founder", "Product", "AI-native"], }, { time: "Building", role: "Builder · Vitae", org: "Workout Tracking · Performance", copy: "Designing and shipping Vitae — a workout tracking app focused on clean training execution, progressive overload, analytics, and athlete-first ergonomics. Solo-built with AI-leveraged engineering.", tags: ["Fitness Tech", "Mobile-first", "Analytics"], }, ]; return (
03 — Professional Background

A career compounding around markets, systems, and software.

Roles, themes, and the throughlines that connect them. Employer names withheld; the work is what matters.
{/* timeline column */}
{entries.map((e, i) => (
{e.time} · {e.org}

{e.role}

{e.copy}

{e.tags.map(t => {t})}
))}
{/* themes column */}
Throughlines
{themes.map((t, i) => (
{t} {String(i + 1).padStart(2, "0")}
))}
); } /* ───────────────────────────── SELECTED WORK (Bento) ───────────────────────────── */ function ProjectCard({ project, span, className = "" }) { return (
{project.glyph}
{project.status}

{project.title}

{project.copy}

{project.viz && (
{project.viz}
)}
{project.tags.map(t => {t})}
{project.href ? ( e.stopPropagation()} > {project.link} ) : (
{project.link || "Case study coming soon"}
)} ); } /* tiny visualizations for bento cards (CSS-only, no fake data slop) */ function VizGrid() { return (
{/* dotted path */}
); } function VizBars() { const bars = [40, 65, 50, 80, 70, 95, 75, 88, 60, 100, 92]; return (
{bars.map((h, i) => (
))}
); } function VizCode() { return (
// agent.run.ts
const plan = await claude.plan(brief)
const code = await codex.draft(plan)
const ui   = await v0.compose(code)
// → ship
); } function VizPhone() { return (
VITAE · TODAY
{["Squat", "Bench", "Deadlift"].map((n, i) => (
{n} 5×5
))}
); } function VizNodes() { return ( {[ [40, 30, "RATES"], [100, 60, "RISK"], [160, 30, "FLOW"], [100, 90, "PnL"], ].map(([x, y, label], i) => ( {label} ))} ); } function Work() { const projects = [ { title: "HoZyne", copy: "A technology company focused on building practical software systems, AI tools, and digital products.", tags: ["Software", "AI", "Systems", "Product"], glyph: "H", glyphBg: "var(--accent-soft)", glyphColor: "var(--accent)", status: "Operating", link: "HoZyne.com", href: "https://HoZyne.com", viz: , large: true, }, { title: "Vitae · Workout Tracker", copy: "A modern workout tracking app focused on training logs, progressive overload, analytics, exercise history, and clean client-side workout execution.", tags: ["Workout Tracker", "Fitness Tech", "Analytics", "Training Logs"], glyph: "V", glyphBg: "rgba(94,234,212,0.10)", glyphColor: "#5EEAD4", status: "Live · iOS", link: "View on App Store", href: "https://apps.apple.com/us/app/vitae-workout-tracker/id6761954056", viz: , }, { title: "Quant OS", copy: "A long-term learning and research system for institutional finance, quantitative research, derivatives, portfolio theory, optimization, and market structure.", tags: ["Finance", "Quant Research", "Learning System", "Python"], glyph: "Q", glyphBg: "rgba(177,151,252,0.12)", glyphColor: "#B197FC", status: "Ongoing", viz: , }, { title: "Research-Grade Prediction Engine", copy: "A Python-based modeling and GUI project for data collection, prediction, evaluation, backtesting, and visualization.", tags: ["Python", "Modeling", "Data", "Tkinter"], glyph: "P", glyphBg: "rgba(251,191,119,0.10)", glyphColor: "#FBBF77", status: "R & D", viz: , }, { title: "AI-Native Builder Workflow", copy: "Experiments and systems using AI tools like Claude, Codex, v0, and agentic development workflows to design, generate, test, and ship software faster.", tags: ["AI", "Claude", "Codex", "Automation", "Agentic"], glyph: "Ai", glyphBg: "rgba(109,217,255,0.10)", glyphColor: "var(--accent)", status: "Live system", viz: , }, ]; return (
04 — Selected Work

Things I've built, ship, and operate.

A bento of products, internal systems, and research projects — each optimized for leverage, clean execution, and real users.

); } /* ───────────────────────────── SKILLS ───────────────────────────── */ function Skills() { const groups = [ { title: "Engineering", icon: "{ }", copy: "Software architecture, full-stack development, API design, automation, data pipelines.", stack: ["C#", "Python", "TypeScript", "SQL", "React", "Angular", "Postgres", "Node"], }, { title: "Finance & Quant", icon: "Σ", copy: "Fixed income systems, financial workflows, market structure, risk and analytics, quantitative tooling.", stack: ["Fixed Income", "Risk", "Market Structure", "Quant Research"], }, { title: "AI & Product", icon: "✶", copy: "AI-assisted development, agentic workflows, prompt engineering, product strategy, internal tool design, developer productivity systems.", stack: ["Claude", "Codex", "OpenAI", "Agents", "Eval pipelines", "Prompt design"], }, { title: "Fitness & Personal Systems", icon: "▴", copy: "Coaching technology, training systems, performance tracking, health data, habit and progress analytics.", stack: ["Training Logs", "Progression", "Wearables", "Health Data", "Habits"], }, ]; return (
05 — Skills & Focus Areas

Where I work, and what I work in.
{groups.map((g, i) => (
{g.icon}

{g.title}

{g.copy}

{g.stack.map(s => {s})}
))}
); } /* ───────────────────────────── HOW I THINK ───────────────────────────── */ function HowIThink() { const cards = [ { label: "01", title: "Build", copy: "I like turning ideas into usable systems quickly, then refining them through real feedback.", glyph: ( ), }, { label: "02", title: "Learn", copy: "I study finance, AI, software, Spanish, and performance with a systems-first approach.", glyph: ( ), }, { label: "03", title: "Compound", copy: "I care about habits, infrastructure, and tools that create long-term leverage.", glyph: ( ), }, ]; return (
06 — How I Think

A personal operating system.

I'm drawn to systems that compound. Code, training, finance, language learning, and business all reward the same pattern: clear inputs, consistent execution, feedback loops, and iteration.

{cards.map((c, i) => (
{c.glyph}
/ {c.label}

{c.title}

{c.copy}

 ))}
); } /* ───────────────────────────── NOTES & IDEAS ───────────────────────────── */ function Notes() { const notes = [ { title: "Building AI-native software workflows", tag: "AI · Workflow", time: "Drafting" }, { title: "Why fitness coaching needs better tools", tag: "Fitness Tech", time: "Outlined" }, { title: "Quant finance from an engineer's perspective", tag: "Finance", time: "In progress" }, { title: "Turning learning into a personal operating system", tag: "Systems", time: "Drafting" }, { title: "The future of agentic development", tag: "AI · Agents", time: "Researching" }, ]; return (
07 — Notes & Ideas

Writing, in progress.

Long-form notes on the systems I work in. Not yet a blog — a working notebook of ideas in motion. Posts ship when they're sharp.

); } /* ───────────────────────────── CONTACT ───────────────────────────── */ function Contact() { const channels = [ { label: "LinkedIn", detail: "linkedin.com/in/alex-hosein", href: "https://linkedin.com/in/alex-hosein", primary: true, icon: }, { label: "Email", detail: "me@alexhosein.com", href: "mailto:me@AlexHosein.com", icon: }, { label: "GitHub", detail: "github.com/alexhosein", href: "https://github.com/Alex-Hosein/", icon: }, { label: "X · Twitter", detail: "@TheAlexHosein", href: "https://x.com/TheAlexHosein", icon: }, ]; return (
08 — Contact

Let's connect.

I'm always open to conversations around software, AI, finance, fitness technology, and interesting systems worth building.

{channels.map(c => (
{c.icon}
{c.label}
{c.detail}
 ))}
{/* footer */}
ALEXHOSEIN.COM © 2026
● AVAILABLE FOR CONVERSATIONS
); } /* expose */ Object.assign(window, { TopNav, Hero, About, Timeline, Work, Skills, HowIThink, Notes, Contact, });