// portfolio.jsx — Mahmoud Sadder, AI & Cybersecurity Engineer // Dark editorial single-page portfolio. Self-contained React component. /* ----------------------------------------------------------------- data */ const NAV_LINKS = [ { label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Experience", href: "#experience" }, { label: "Skills", href: "#skills" }, { label: "Contact", href: "#contact" }, ]; const PROJECTS = [ { tag: "AI · React", name: "Sanfoor", desc: "Bilingual AI academic assistant for ZU students. RAG pipeline over course material, answered in Arabic & English.", award: "Crown Prince Foundation Award Qualifier", stack: ["React", "TypeScript", "Gemini API", "RAG"], link: null, }, { tag: "Security · Tooling", name: "AirStrike", desc: "Modular Wi-Fi penetration-testing framework with an interactive web interface for orchestrating attacks.", award: null, stack: ["Python", "Flask", "Linux"], link: "https://airstrike.dev", }, { tag: "Full-Stack", name: "Joflix", desc: "Secure full-stack streaming platform with role-based access control and a complete admin panel.", award: null, stack: ["ASP.NET Core", "MySQL", "Entity Framework"], link: "https://github.com/mahmoud-sadder/Joflix", }, ]; const EXPERIENCE = [ { range: "Feb 2026 — Present", role: "AI Engineer", org: "Al-Hussein Technical University (HTU) · 9xAI", desc: "Nationally selected AI Engineer building production-grade AI for government and industry.", current: true, }, { range: "Apr 2025 — Present", role: "Security Researcher", org: "Yogosha Strike Force", desc: "Offensive security research and coordinated vulnerability disclosure on a private, vetted bug-bounty force.", current: true, }, { range: "Oct 2025 — Jan 2026", role: "SOC Analyst Intern", org: "Green Circle", desc: "Monitored, triaged and escalated security events; tuned detections across the SOC pipeline.", current: false, }, { range: "Apr — May 2025", role: "Cybersecurity Intern", org: "Central Bank of Jordan", desc: "Supported security operations and risk assessment for national financial infrastructure.", current: false, }, { range: "Feb — May 2025", role: "Cybersecurity Intern", org: "National Cyber Security Center (NCSC)", desc: "Threat analysis and hands-on defensive security practice at the national level.", current: false, }, ]; const SKILL_CLUSTERS = [ { label: "AI & ML", items: ["LLM Deployment", "RAG Pipelines", "Gemini / OpenAI APIs", "Prompt Engineering", "Fine-tuning"] }, { label: "Security", items: ["Penetration Testing", "SOC Operations", "Threat Analysis", "Vulnerability Research", "Incident Response"] }, { label: "Cloud", items: ["AWS", "Docker", "Linux", "CI / CD"] }, { label: "Development", items: ["React", "TypeScript", "Python", "ASP.NET Core", "Full-Stack"] }, ]; const CERTS = [ { name: "eJPT", issuer: "INE Security", url: "https://certs.ine.com/aa5b0e3b-63f2-4454-a45c-4ada9ce69baf#acc.q59EVSiF" }, { name: "ISC2 CC", issuer: "ISC2", url: "https://www.credly.com/badges/43d776f4-c5a9-4936-92ef-3a8ae72df507/linked_in_profile" }, { name: "ICCA", issuer: "INE Security", url: "https://certs.ine.com/e885af94-d4fa-4e2d-b521-494eb349934f#acc.q31EU5h9" }, { name: "AWS CCP", issuer: "Amazon Web Services", url: "https://cp.certmetrics.com/amazon/en/public/verify/credential/20e6c445c81a4b6f9d07e4a2ce90b014" }, { name: "Python Power-Up", issuer: "HTU · edX", url: "https://www.credential.net/1da9f363-89e0-4aaf-ab8c-ccb7b5e5cf8b#acc.rvqbi4AW" }, ]; const CONTACTS = { email: "mahmouds4dr@gmail.com", linkedin: "https://www.linkedin.com/in/mahmoud-sadder/", github: "https://github.com/mahmoud-sadder", }; const PHOTO_SRC = { grey: "assets/mahmoud-grey.png", formal: "assets/mahmoud-formal.png", "no-background": "assets/no-background.png" }; /* --------------------------------------------------------------- helpers */ const MUTED = "#888"; const BODY = "#e5e5e5"; const SURFACE = "#111111"; const BORDER = "#222222"; const BORDER_HI = "#2e2e2e"; const MONO = "'JetBrains Mono', ui-monospace, monospace"; function useReveal(options) { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px", ...(options || {}) } ); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ children, delay = 0, as = "div", style, className = "", ...rest }) { const ref = useReveal(); const Tag = as; return ( {children} ); } // monospace eyebrow label with angle-bracket framing function MonoLabel({ children, accent, style }) { return ( < {children} /> ); } function SectionHead({ index, kicker, title, accent, sub }) { return (
{index} {kicker}

{title}

{sub &&

{sub}

} ); } /* ------------------------------------------------------------------- nav */ function Nav({ accent }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
); } /* ----------------------------------------------------------------- hero */ function Hero({ accent, pattern }) { const patternStyle = pattern === "none" ? {} : pattern === "grid" ? { backgroundImage: "linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px)", backgroundSize: "46px 46px", } : { backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px)", backgroundSize: "28px 28px", }; return (
{/* animated faint pattern */}
); } /* ---------------------------------------------------------------- shells */ function Section({ id, children, padY }) { return (
{children}
); } /* ----------------------------------------------------------------- about */ function About({ accent, photo }) { return (
Mahmoud Sadder
Who is Mahmoud

Mahmoud Sadder

AI & Cybersecurity Engineer · Amman, Jordan

I work at the intersection of national security and intelligent systems — a nationally selected AI Engineer in Jordan's 9xAI program, building production-grade AI for government and industry. My background spans LLM deployment, RAG pipelines, SOC operations, penetration testing, and full-stack development.

I'm focused on the MENA region's digital transformation — making government systems smarter and more secure.

Experience at
{["Central Bank of Jordan", "National Cyber Security Center", "HTU · 9xAI", "Yogosha Strike Force", "Green Circle"].map((org) => ( {org} ))}
); } /* -------------------------------------------------------------- projects */ function ProjectCard({ p, accent, i }) { const [hov, setHov] = React.useState(false); return ( setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: "flex", flexDirection: "column", height: "100%", background: SURFACE, border: `1px solid ${hov ? BORDER_HI : BORDER}`, borderRadius: 16, padding: "28px 26px 24px", transition: "border-color .3s, transform .3s, box-shadow .3s", transform: hov ? "translateY(-4px)" : "none", boxShadow: hov ? "0 24px 60px -28px rgba(0,0,0,0.9)" : "none", }}>
{p.tag}

{p.name}

{p.desc}

{p.award && (
★{p.award}
)}
{p.stack.map((s) => ( {s} ))}
); } function Projects({ accent }) { return (
{PROJECTS.map((p, i) => )}
); } /* ------------------------------------------------------------ experience */ function Experience({ accent }) { return (
{/* vertical line */} ); } /* ---------------------------------------------------------------- skills */ function Skills({ accent }) { return (
capabilities
{SKILL_CLUSTERS.map((c, i) => (
{c.label}
{c.items.map((s) => ( (ev.currentTarget.style.borderColor = BORDER_HI)} onMouseLeave={(ev) => (ev.currentTarget.style.borderColor = BORDER)}> {s} ))}
))}
certifications
); } /* --------------------------------------------------------------- contact */ function ContactIcon({ type, accent }) { const common = { width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" }; if (type === "email") return (); if (type === "linkedin") return (); return (); } function Contact({ accent }) { const links = [ { type: "email", label: "Email", value: "mahmouds4dr@gmail.com", href: `mailto:${CONTACTS.email}` }, { type: "linkedin", label: "LinkedIn", value: "mahmoud-sadder", href: CONTACTS.linkedin }, { type: "github", label: "GitHub", value: "mahmoud-sadder", href: CONTACTS.github }, ]; return (
get in touch

Let's work together.

Open to opportunities in AI engineering, cybersecurity, and public-sector technology.

); } /* ----------------------------------------------------------------- foot */ function Footer({ accent }) { return (
Mahmoud Sadder — Amman, Jordan
© {new Date().getFullYear()} · Designed & built with care
); } /* ------------------------------------------------------------------ app */ function Portfolio() { const accent = "#3b82f6"; const padY = 116; return (
); } window.Portfolio = Portfolio;