Files
SKELETONKEY/docs/og.svg
T
leviathan 5071ad4ba9 site: marketing-grade redesign with --explain showcase + animated hero
Full rewrite of docs/index.html + style.css + new app.js + OG card.

Hero
  - Animated gradient mesh background (3 drifting blurred blobs;
    respects prefers-reduced-motion).
  - Space Grotesk display wordmark with subtle white→gray gradient.
  - Eyebrow chip with pulsing dot showing current release.
  - Type-on-load install command with blinking cursor in a faux-terminal
    chrome (traffic-light dots, title bar, copy button).
  - Stats row that counts up from 0 on first paint: 31 modules, 10 KEV,
    119 detection rules, 88 tests.
  - Primary CTA + secondary 'See --explain in action' + GitHub link.

Trust strip
  - 'Grounded in authoritative sources' row: CISA KEV, NVD CVE API,
    MITRE ATT&CK, kernel.org stable tree, Debian Security Tracker,
    NIST CWE. Establishes the federal-data-source provenance.

--explain showcase (flagship section)
  - Big terminal mockup that types out a real --explain nf_tables run
    line-by-line on scroll-into-view (45-95ms per line, easing).
  - Four annotation cards explaining each part: triage metadata,
    host fingerprint, detect() trace, OPSEC footprint.

Bento grid (8 feature cards in a varied 3-col layout)
  - Auto-pick safest exploit (large card with code sample)
  - 119 detection rules (with animated per-format coverage bars)
  - CISA KEV prioritized (red-accented)
  - OPSEC notes per exploit
  - One host fingerprint, every module (large card with struct excerpt)
  - JSON for pipelines
  - No SaaS, no telemetry
  - Verifier ready (Vagrant + Parallels)

Module corpus
  - Same green/yellow split as before, but every KEV-listed module pill
    now carries a ★ prefix + red-tinted border so 'actively exploited
    in the wild' is visible at a glance.

Audience
  - 4 colored cards (red/blue/gray/purple) — pentesters, SOC, sysadmins,
    researchers — each with a deep link to the right doc.

Verified-vs-claimed honesty callout
  - Featured gradient-bordered card restating the no-fabricated-offsets
    bar. ✓ icon, project's defining trust claim.

Quickstart
  - Tabbed: install / scan / explain / auto / detect-rules. Each tab is
    a short, copy-ready snippet with inline comments.

Roadmap timeline
  - Three columns: shipped / in flight / next. Shipped lists every
    feature from the last several sessions (--explain, OPSEC, CWE/
    ATT&CK/KEV pipeline, 119 rules, host refactor, 88 tests, drift
    detector, VM scaffold). Next lists arm64 musl, mass-fleet
    aggregator, SIEM query templates, CI hardening.

Footer
  - Four-column gradient footer (Brand / Project / Docs / Ethics) +
    bottom bar with credits to original PoC authors + license + repo
    link.

Tech
  - Typography: Inter (UI) + JetBrains Mono (code) + Space Grotesk
    (display wordmark), all via Google Fonts with display=swap.
  - Palette: deep purple-tinted dark (#07070d) + emerald accent
    (#10b981) + cyan secondary (#06b6d4) + KEV-red (#ef4444) +
    violet (#a855f7) for threat-intel framing.
  - CSS: ~28KB unminified, custom-properties driven; gracefully
    degrades to single-column on every grid section at narrow widths.
  - JS: ~8KB vanilla, no frameworks. Respects prefers-reduced-motion
    everywhere. IntersectionObserver-driven scroll reveal and
    stat-count-up.
  - OG image: hand-authored SVG → rsvg-convert → 1200x630 PNG
    (121KB). Renders cleanly when shared on Twitter/LinkedIn/Slack.
  - 4 new files: app.js, og.svg, og.png; rewrites: index.html, style.css.

Refreshed content:
  - v0.5.0 → v0.6.0 throughout.
  - '28 verified modules' → 31.
  - Adds KEV cross-ref, --explain, OPSEC, ATT&CK/CWE callouts that
    didn't exist in the previous version.

HTML structure validated balanced (Python html.parser smoke test).
2026-05-23 11:42:56 -04:00

81 lines
3.6 KiB
XML

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#07070d"/>
<stop offset="1" stop-color="#0c0c16"/>
</linearGradient>
<linearGradient id="brand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#10b981"/>
<stop offset="1" stop-color="#06b6d4"/>
</linearGradient>
<radialGradient id="glow1" cx="0.2" cy="0.3" r="0.6">
<stop offset="0" stop-color="#10b981" stop-opacity="0.18"/>
<stop offset="1" stop-color="#10b981" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glow2" cx="0.85" cy="0.8" r="0.5">
<stop offset="0" stop-color="#a855f7" stop-opacity="0.16"/>
<stop offset="1" stop-color="#a855f7" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- backgrounds -->
<rect width="1200" height="630" fill="url(#bg)"/>
<rect width="1200" height="630" fill="url(#glow1)"/>
<rect width="1200" height="630" fill="url(#glow2)"/>
<!-- diamond mark -->
<g transform="translate(80,140)">
<rect x="0" y="0" width="36" height="36" transform="rotate(45 18 18)" fill="url(#brand)"/>
</g>
<!-- wordmark -->
<text x="142" y="170" font-family="'Space Grotesk','Inter',sans-serif" font-weight="700" font-size="68" fill="#ecedf7" letter-spacing="-2">
SKELETONKEY
</text>
<!-- tagline -->
<text x="80" y="240" font-family="'Inter',sans-serif" font-size="32" fill="#c5c5d3" font-weight="500">
Curated Linux LPE corpus.
</text>
<text x="80" y="282" font-family="'Inter',sans-serif" font-size="32" fill="#c5c5d3" font-weight="500">
SOC-ready detection in the box.
</text>
<!-- stat chips -->
<g transform="translate(80,360)">
<!-- 31 modules -->
<rect x="0" y="0" width="220" height="58" rx="29" fill="#161628" stroke="#25253c"/>
<text x="32" y="38" font-family="'JetBrains Mono',monospace" font-weight="700" font-size="22" fill="#ecedf7">31</text>
<text x="68" y="37" font-family="'Inter',sans-serif" font-size="16" fill="#8a8a9d">modules</text>
<!-- 10 KEV -->
<rect x="238" y="0" width="220" height="58" rx="29" fill="#161628" stroke="#ef4444" stroke-opacity="0.4"/>
<text x="270" y="38" font-family="'JetBrains Mono',monospace" font-weight="700" font-size="22" fill="#ef4444">10</text>
<text x="306" y="37" font-family="'Inter',sans-serif" font-size="16" fill="#8a8a9d">★ in CISA KEV</text>
<!-- 119 rules -->
<rect x="476" y="0" width="240" height="58" rx="29" fill="#161628" stroke="#25253c"/>
<text x="508" y="38" font-family="'JetBrains Mono',monospace" font-weight="700" font-size="22" fill="#ecedf7">119</text>
<text x="554" y="37" font-family="'Inter',sans-serif" font-size="16" fill="#8a8a9d">detection rules</text>
</g>
<!-- terminal mockup -->
<g transform="translate(80,478)">
<rect x="0" y="0" width="1040" height="92" rx="12" fill="#0a0a14" stroke="#25253c"/>
<!-- bar -->
<circle cx="22" cy="22" r="6" fill="#ff5f57"/>
<circle cx="42" cy="22" r="6" fill="#febc2e"/>
<circle cx="62" cy="22" r="6" fill="#28c840"/>
<line x1="0" y1="44" x2="1040" y2="44" stroke="#1c1c2d"/>
<text x="24" y="78" font-family="'JetBrains Mono',monospace" font-size="20" fill="#ecedf7">
<tspan fill="#10b981">$</tspan> skeletonkey --explain nf_tables <tspan fill="#5b5b75"># operator briefing in one command</tspan>
</text>
</g>
<!-- subtle url at very bottom -->
<text x="1120" y="610" font-family="'JetBrains Mono',monospace" font-size="14" fill="#5b5b75" text-anchor="end">
karazajac.github.io/SKELETONKEY
</text>
</svg>