sscoble/speckl
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Landing page polish: favicon, OG tags, inline diagram, mobile responsiveness, canonical URL, CTA

Browse source
This commit is contained in:
Scott Scoble 2026-04-29 14:42:52 -07:00
parent 707185a203
commit 9bcbb3d77c
2 changed files with 78 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
landing/favicon.svg Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4a9eff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="64" height="64" rx="12" fill="url(#grad1)"/>
<path d="M18 22 L32 12 L46 22 L46 42 L32 52 L18 42 Z" fill="white" opacity="0.9"/>
<circle cx="32" cy="32" r="6" fill="#0a0a0f"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 511 B

67
landing/index.html
View file

@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speckl — Spec-First Development with Dark Provenance</title>
<meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is a specification-first development system for regulated industries.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="canonical" href="https://speckl.scoble.me/">
<meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
<meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://speckl.scoble.me/">
<meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
<style>
:root {
--bg: #0a0a0f;
@ -116,6 +123,15 @@
.code-block .st { color: #f1fa8c; }
.code-block .cm { color: #6272a4; }
.diagram-container { margin: 2rem 0; }
.diagram-container h3 {
text-align: center;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text);
}
.philosophy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@ -161,6 +177,17 @@
.roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
.roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
}
@media (max-width: 375px) {
.hero { padding: 4rem 1rem 3rem; }
.hero h1 { font-size: 2rem; }
.hero-tagline { font-size: 1rem; }
.btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
section { padding: 3.5rem 1rem; }
.code-block { padding: 1rem; }
.code-block pre { font-size: 0.8rem; }
h2 { font-size: 1.5rem; }
}
</style>
</head>
<body>
@ -172,6 +199,7 @@
<div class="hero-cta">
<a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
<a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
<a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord Community</a>
</div>
</div>
</header>
@ -180,6 +208,45 @@
<h2>What is Speckl?</h2>
<p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
<div class="diagram-container">
<h3>System Architecture</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
<defs>
<marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
<polygon points="0 0, 10 3.5, 0 7"/>
</marker>
</defs>
<!-- Orchestrator -->
<rect x="170" y="15" width="260" height="65" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
<text x="300" y="45" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="15" font-weight="bold">Orchestrator</text>
<text x="300" y="63" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="11">Accepts Specks, decomposes tasks</text>
<!-- Arrow: Orchestrator → Team Lead Verification -->
<line x1="220" y1="80" x2="165" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
<!-- Arrow: Orchestrator → Team Lead Codegen -->
<line x1="380" y1="80" x2="435" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
<!-- Team Lead: Verification -->
<rect x="60" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="2"/>
<text x="165" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
<text x="165" y="197" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="12">Verification</text>
<!-- Team Lead: Codegen -->
<rect x="330" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="2"/>
<text x="435" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
<text x="435" y="197" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="12">Codegen</text>
<!-- Arrow: Team Lead Verification → Z3 SME -->
<line x1="165" y1="210" x2="165" y2="250" stroke="#f59e0b" stroke-width="2" marker-end="url(#arr)"/>
<!-- Arrow: Team Lead Codegen → TypeScript SME -->
<line x1="435" y1="210" x2="435" y2="250" stroke="#10b981" stroke-width="2" marker-end="url(#arr)"/>
<!-- SME: Z3 -->
<rect x="60" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="1.5"/>
<text x="165" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Z3 SME</text>
<text x="165" y="295" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="11">(verify)</text>
<!-- SME: TypeScript -->
<rect x="330" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="1.5"/>
<text x="435" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">TypeScript SME</text>
<text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
</svg>
</div>
<div class="features">
<div class="feature-card">
<h3>🎯 Specification-First</h3>