/* Resume site — dossier v2 component Full-viewport responsive layout. Not fixed width. */ const Dossier = () => { const repos = window.REPOS; const features = window.FEATURES || {}; const [query, setQuery] = React.useState(""); const [activeLang, setActiveLang] = React.useState(null); const [activeCat, setActiveCat] = React.useState(null); const [selected, setSelected] = React.useState(null); const [typed, setTyped] = React.useState(""); // Canonical category order const CATEGORIES = [ { id: "c2", name: "C2 & Implants", accent: "var(--red)", tag: "./c2-and-implants", shortDesc: "encrypted implants & frameworks", desc: "Command-and-control frameworks, encrypted implants, and stealth loaders." }, { id: "net", name: "Network & Tunneling", accent: "var(--teal)", tag: "./network-and-tunneling", shortDesc: "pivoting, SSH, relays", desc: "SSH servers, pivoting kits, relays, and custom transport layers." }, { id: "enum", name: "Enumeration & Analysis", accent: "var(--peach)", tag: "./enumeration-and-analysis", shortDesc: "AD, creds, forensics", desc: "AD auditing, credential work, forensics, and fuzzing tools." }, { id: "web", name: "Web & Dev Tools", accent: "var(--blue)", tag: "./web-and-dev-tools", shortDesc: "browser tooling & editors", desc: "Browser tooling, editors, PWAs, and research infrastructure." }, { id: "games", name: "Games", accent: "var(--yellow)", tag: "./games", shortDesc: "built between engagements", desc: "Browser games built for fun between engagements." }, { id: "meta", name: "Platforms & Meta", accent: "var(--mauve)", tag: "./platforms-and-meta", shortDesc: "umbrella platforms", desc: "Umbrella platforms and cross-cutting projects." }, ]; const catByName = { "C2 & Implants": "c2", "Network & Tunneling": "net", "Enumeration & Analysis": "enum", "Web & Dev Tools": "web", "Games": "games", "Platforms & Meta": "meta", }; const languages = [...new Set(repos.map(r => r.lang))]; const filtered = repos.filter(r => { const q = query.toLowerCase(); const mQ = !q || r.name.toLowerCase().includes(q) || r.desc.toLowerCase().includes(q) || r.topics.some(t => t.includes(q)); const mL = !activeLang || r.lang === activeLang; return mQ && mL; }); // Live-typed tagline const TAGLINE = "Offensive tooling. Red team ops. OPSEC-first design."; React.useEffect(() => { let i = 0; const id = setInterval(() => { i++; setTyped(TAGLINE.slice(0, i)); if (i >= TAGLINE.length) clearInterval(id); }, 28); return () => clearInterval(id); }, []); // Scroll-spy for sticky sub-nav React.useEffect(() => { const io = new IntersectionObserver((entries) => { const visible = entries.filter(e => e.isIntersecting) .sort((a,b) => b.intersectionRatio - a.intersectionRatio)[0]; if (visible) { const id = visible.target.getAttribute("data-cat-id"); if (id) setActiveCat(id); } }, { rootMargin: "-30% 0px -60% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] }); document.querySelectorAll("[data-cat-id]").forEach(el => io.observe(el)); return () => io.disconnect(); }, [filtered.length]); const jumpTo = (id) => { const el = document.getElementById(`cat-${id}`); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 72; window.scrollTo({ top, behavior: "smooth" }); } }; // Lock body scroll when drawer open React.useEffect(() => { if (selected) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } }, [selected]); // Close drawer on Escape React.useEffect(() => { const h = (e) => { if (e.key === "Escape") setSelected(null); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []); return (
{/* Sticky header */}
{CATEGORIES.map(c => { const count = repos.filter(r => catByName[r.category] === c.id).length; if (!count) return null; const active = activeCat === c.id; return ( ); })}
Real-Fruit-Snacks
{/* Hero */}

Matt.

{"//"} {typed}
→ github.com/Real-Fruit-Snacks
{/* Category matrix — doubles as table of contents */}
{CATEGORIES.map((cat, i) => { const count = repos.filter(r => catByName[r.category] === cat.id).length; return ( ); })}
{/* Filter rail */}
/ setQuery(e.target.value)} placeholder="search name, topic, description" style={{ flex: 1, background:"transparent", border:"none", outline:"none", color: "var(--text)", fontFamily: "inherit", fontSize: 12, }} /> {query && ( setQuery("")} style={{ cursor:"pointer", color:"var(--overlay0)", }}>× )}
│
setActiveLang(null)} style={{ padding: "5px 10px", borderRadius: 4, cursor: "pointer", background: !activeLang ? "var(--surface1)" : "transparent", color: !activeLang ? "var(--text)" : "var(--overlay1)", border: "1px solid " + (!activeLang ? "var(--surface2)" : "transparent"), }}>all {languages.map(l => ( setActiveLang(l===activeLang?null:l)} className={`lang-${l}`} style={{ padding: "5px 10px", borderRadius: 4, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, background: l === activeLang ? "var(--surface1)" : "transparent", color: l === activeLang ? "var(--text)" : "var(--overlay1)", border: "1px solid " + (l === activeLang ? "var(--surface2)" : "transparent"), }}> {l} ))}
{filtered.length} / {repos.length}
{/* Sections by category */}
{CATEGORIES.map(cat => { const items = filtered.filter(r => catByName[r.category] === cat.id); if (items.length === 0) return null; return (
{String(CATEGORIES.indexOf(cat)+1).padStart(2,"0")} //

{cat.name} .

{items.length} {items.length === 1 ? "project" : "projects"}
{"//"} {cat.desc}
{items.map((r, i) => ( setSelected(r)} /> ))}
); })} {filtered.length === 0 && (
no matches
try a different filter or clear the search
)}
— github.com/Real-Fruit-Snacks —
{selected && ( c.id === catByName[selected.category])?.accent} onClose={() => setSelected(null)} /> )}
); }; const ProjectCard = ({ repo, index, accent, onOpen }) => { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} > {/* accent stripe */}
{String(index+1).padStart(2,"0")}
{repo.name}
{repo.desc}
{repo.topics.slice(0, 4).map(t => ( #{t} ))} {repo.topics.length > 4 && ( +{repo.topics.length - 4} )}
★ {repo.stars} {repo.lang}
{hovered ? "details →" : "→"}
); }; const ProjectDrawer = ({ repo, features, accent, onClose }) => { return (
e.stopPropagation()} className="drawer" style={{ width: "min(720px, 100vw)", height: "100%", background: "var(--base)", borderLeft: "1px solid var(--surface0)", overflow: "auto", animation: "slideIn .28s cubic-bezier(.22,.61,.36,1)", }} > {/* Drawer header */}
● {repo.category.toLowerCase().replace(/ /g,"-")} / {repo.name}
{/* Title */}
{repo.lang} · {repo.license} · {repo.updated}

{repo.name}.

{repo.desc}

{/* Topics */}
{repo.topics.map(t => ( #{t} ))}
{/* Features */} {features.length > 0 && ( <>

## key features

    {features.map((f, i) => (
  • {String(i+1).padStart(2,"0")} {f}
    • ))}
)} {/* Install */}

## clone 

$ git clone {repo.url}
open on github →
); }; window.Dossier = Dossier;