From d50902020a223a7cabc0c1be70c0a65046826c3f Mon Sep 17 00:00:00 2001
From: Corwin Marsh <corwinm@users.noreply.github.com>
Date: Tue, 25 Aug 2026 01:24:58 -0700
Subject: [PATCH] feat: explore signal console homepage

---
 src/pages/index.astro | 568 +-----------------------------------------
 1 file changed, 3 insertions(+), 565 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1bd1467..11df0a9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,565 +1,3 @@
----
-import Layout from "../layouts/Layout.astro";
-import { projects } from "../data/projects";
-
-const primaryLinks = [
-	{ label: "GitHub", href: "https://github.com/corwinm" },
-	{ label: "HaphazardDev", href: "https://github.com/HaphazardDev" },
-];
----
-
-<Layout
-	title="Haphazard.dev — developer tools by Corwin"
-	description="A dev-first home page for Corwin's projects: VS Code extensions, CLIs, tmux integrations, and pi ecosystem experiments."
->
-	<a class="skip-link" href="#projects">Skip to projects</a>
-
-	<span id="top" class="top-anchor" aria-hidden="true"></span>
-
-	<header class="site-header" aria-label="Site header">
-		<a class="brand" href="/" aria-label="Haphazard.dev home">
-			<span class="prompt" aria-hidden="true">~/</span>haphazard.dev
-		</a>
-		<nav class="top-nav" aria-label="Primary navigation">
-			<a href="#projects">projects</a>
-			{primaryLinks.map((link) => <a href={link.href}>{link.label}</a>)}
-		</nav>
-	</header>
-
-	<main>
-		<section class="hero" aria-labelledby="hero-title">
-			<div class="terminal" aria-label="Project directory terminal preview">
-				<div class="terminal-bar">
-					<span></span><span></span><span></span>
-				</div>
-				<div class="terminal-body mono">
-					<p><span class="muted">$</span> ls projects/</p>
-					{projects.map((project) => <p><a href={`#${project.slug}`}>{project.title}</a><span class="comment"> // {project.category}</span></p>)}
-					<p><span class="muted">$</span> open README.md</p>
-				</div>
-			</div>
-
-			<div class="hero-copy">
-				<p class="eyebrow mono">developer tools · workflow experiments · shipped utilities</p>
-				<h1 id="hero-title">Tools for people who live in editors, terminals, and Git worktrees.</h1>
-				<p class="lede">
-					Haphazard.dev is the home base for my projects: pragmatic extensions, CLIs, and integrations
-					built to make everyday development workflows faster and more keyboard friendly.
-				</p>
-				<div class="hero-actions">
-					<a class="button primary" href="#projects">Explore projects</a>
-					<a class="button" href="https://github.com/corwinm">View GitHub</a>
-				</div>
-			</div>
-		</section>
-
-		<section class="project-index" aria-label="Project quick links">
-			{projects.map((project, index) => (
-				<a class="index-card" href={`#${project.slug}`}>
-					<span class="mono">0{index + 1}</span>
-					<strong>{project.title}</strong>
-					<small>{project.category}</small>
-				</a>
-			))}
-		</section>
-
-		<section id="projects" class="projects" aria-labelledby="projects-title">
-			<div class="section-heading">
-				<p class="eyebrow mono">cat ./projects.json</p>
-				<h2 id="projects-title">Projects</h2>
-			</div>
-
-			<div class="project-list">
-				{projects.map((project, index) => (
-					<article class="project" id={project.slug}>
-						<div class="project-meta mono" aria-hidden="true">project:{String(index + 1).padStart(2, "0")}</div>
-						<div class="project-main">
-							<p class="category mono">{project.category}</p>
-							<h3>{project.title}</h3>
-							<p class="description">{project.description}</p>
-
-							<ul class="highlights" aria-label={`${project.title} highlights`}>
-								{project.highlights.map((highlight) => <li>{highlight}</li>)}
-							</ul>
-						</div>
-
-						<aside class="project-side" aria-label={`${project.title} details`}>
-							<div>
-								<h4 class="mono">stack</h4>
-								<div class="tags">
-									{project.technologies.map((tech) => <span>{tech}</span>)}
-								</div>
-							</div>
-
-							<div>
-								<h4 class="mono">links</h4>
-								<div class="links">
-									{project.links.map((link) => (
-										<a href={link.href} target="_blank" rel="noreferrer">
-											{link.label}<span aria-hidden="true">↗</span>
-										</a>
-									))}
-								</div>
-							</div>
-						</aside>
-					</article>
-				))}
-			</div>
-		</section>
-
-	</main>
-
-	<footer class="site-footer">
-		<p class="mono">© {new Date().getFullYear()} Haphazard.dev</p>
-		<a href="#top" aria-label="Back to top">back to top ↑</a>
-	</footer>
-</Layout>
-
-<style>
-	.top-anchor {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-	.skip-link {
-		position: fixed;
-		top: 1rem;
-		left: 1rem;
-		z-index: 10;
-		transform: translateY(-200%);
-		border: 1px solid var(--accent);
-		border-radius: 999px;
-		background: var(--bg);
-		padding: 0.7rem 1rem;
-		color: var(--accent);
-		text-decoration: none;
-	}
-
-	.skip-link:focus {
-		transform: translateY(0);
-	}
-
-	.site-header,
-	main,
-	.site-footer {
-		width: min(1120px, calc(100% - 2rem));
-		margin-inline: auto;
-	}
-
-	.site-header {
-		position: sticky;
-		top: 0;
-		z-index: 5;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 1rem;
-		padding: 1rem 0;
-		backdrop-filter: blur(18px);
-	}
-
-	.brand,
-	.top-nav a,
-	.button,
-	.index-card,
-	.links a,
-	.site-footer a {
-		text-decoration: none;
-	}
-
-	.brand {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.05rem;
-		font-weight: 800;
-		letter-spacing: -0.03em;
-	}
-
-	.prompt,
-	.muted,
-	.category,
-	.eyebrow {
-		color: var(--accent);
-	}
-
-	.top-nav {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-		gap: 0.4rem;
-	}
-
-	.top-nav a {
-		border: 1px solid transparent;
-		border-radius: 999px;
-		padding: 0.5rem 0.75rem;
-		color: var(--muted);
-		font-size: 0.92rem;
-	}
-
-	.top-nav a:hover {
-		border-color: var(--line);
-		color: var(--text);
-		background: rgba(101, 255, 159, 0.06);
-	}
-
-	.hero {
-		display: grid;
-		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
-		align-items: center;
-		gap: 2rem;
-		min-height: 76vh;
-		padding: 4rem 0 2rem;
-	}
-
-	.terminal,
-	.project,
-	.index-card {
-		border: 1px solid var(--line);
-		background: var(--panel);
-		box-shadow: var(--shadow);
-	}
-
-	.terminal {
-		overflow: hidden;
-		border-radius: 22px;
-		transform: rotate(-1deg);
-	}
-
-	.terminal-bar {
-		display: flex;
-		gap: 0.5rem;
-		border-bottom: 1px solid var(--line);
-		background: rgba(255, 255, 255, 0.03);
-		padding: 0.9rem 1rem;
-	}
-
-	.terminal-bar span {
-		width: 0.75rem;
-		height: 0.75rem;
-		border-radius: 50%;
-		background: var(--muted-2);
-	}
-
-	.terminal-bar span:first-child {
-		background: #ff5f57;
-	}
-
-	.terminal-bar span:nth-child(2) {
-		background: var(--warning);
-	}
-
-	.terminal-bar span:nth-child(3) {
-		background: var(--accent);
-	}
-
-	.terminal-body {
-		padding: 1.25rem;
-		font-size: clamp(0.9rem, 1.8vw, 1.02rem);
-		line-height: 1.9;
-	}
-
-	.terminal-body p {
-		margin: 0;
-	}
-
-	.terminal-body a {
-		color: var(--text);
-		text-decoration-color: rgba(101, 255, 159, 0.35);
-		text-underline-offset: 0.25em;
-	}
-
-	.comment {
-		color: var(--muted-2);
-	}
-
-	.eyebrow {
-		margin: 0 0 1rem;
-		font-size: 0.8rem;
-		font-weight: 700;
-		letter-spacing: 0.18em;
-		text-transform: uppercase;
-	}
-
-	h1,
-	h2,
-	h3,
-	p {
-		margin-top: 0;
-	}
-
-	h1 {
-		max-width: 12ch;
-		margin-bottom: 1.4rem;
-		font-size: clamp(3.2rem, 9vw, 7rem);
-		line-height: 0.88;
-		letter-spacing: -0.08em;
-	}
-
-	.lede {
-		max-width: 62ch;
-		color: var(--muted);
-		font-size: clamp(1.05rem, 2vw, 1.25rem);
-		line-height: 1.7;
-	}
-
-	.hero-actions {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.8rem;
-		margin-top: 2rem;
-	}
-
-	.button {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border: 1px solid var(--line-strong);
-		border-radius: 999px;
-		padding: 0.8rem 1.05rem;
-		color: var(--text);
-		font-weight: 700;
-	}
-
-	.button.primary {
-		border-color: transparent;
-		background: var(--accent);
-		color: #04210e;
-	}
-
-	.button:hover,
-	.index-card:hover,
-	.links a:hover {
-		transform: translateY(-1px);
-	}
-
-	.project-index {
-		display: grid;
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		gap: 0.8rem;
-		margin: 1rem 0 6rem;
-	}
-
-	.index-card {
-		display: grid;
-		gap: 0.35rem;
-		border-radius: 18px;
-		padding: 1rem;
-		transition: transform 180ms ease, border-color 180ms ease;
-	}
-
-	.index-card:hover {
-		border-color: var(--line-strong);
-	}
-
-	.index-card span,
-	.index-card small {
-		color: var(--muted-2);
-	}
-
-	.projects {
-		padding: 2rem 0 6rem;
-	}
-
-	.section-heading {
-		display: grid;
-		grid-template-columns: 0.85fr 1.15fr;
-		gap: 1.5rem;
-		align-items: end;
-		margin-bottom: 1.5rem;
-	}
-
-	.section-heading h2 {
-		margin-bottom: 0;
-		font-size: clamp(2.2rem, 5vw, 4rem);
-		line-height: 0.95;
-		letter-spacing: -0.06em;
-	}
-
-
-	.project-list {
-		display: grid;
-		gap: 1rem;
-	}
-
-	.project {
-		display: grid;
-		grid-template-columns: 8rem minmax(0, 1fr) 18rem;
-		gap: 1.4rem;
-		scroll-margin-top: 6rem;
-		border-radius: 26px;
-		padding: 1.2rem;
-	}
-
-	.project-meta {
-		color: var(--muted-2);
-		writing-mode: vertical-rl;
-	}
-
-	.project h3 {
-		margin-bottom: 0.8rem;
-		font-size: clamp(2rem, 4vw, 3.5rem);
-		line-height: 0.95;
-		letter-spacing: -0.05em;
-	}
-
-	.description,
-	.highlights {
-		color: var(--muted);
-		line-height: 1.7;
-	}
-
-	.highlights {
-		padding-left: 1.2rem;
-	}
-
-	.highlights li + li {
-		margin-top: 0.55rem;
-	}
-
-	.project-side {
-		display: flex;
-		flex-direction: column;
-		gap: 1.3rem;
-		border-left: 1px solid var(--line);
-		padding-left: 1.3rem;
-	}
-
-	h4 {
-		margin: 0 0 0.8rem;
-		color: var(--muted-2);
-		font-size: 0.76rem;
-		letter-spacing: 0.18em;
-		text-transform: uppercase;
-	}
-
-	.tags,
-	.links {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.tags span,
-	.links a,
-	code {
-		border: 1px solid var(--line);
-		border-radius: 999px;
-		background: rgba(101, 255, 159, 0.06);
-	}
-
-	.tags span,
-	.links a {
-		padding: 0.45rem 0.65rem;
-		font-size: 0.85rem;
-	}
-
-	.tags span {
-		color: var(--muted);
-	}
-
-	.links a {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.35rem;
-		color: var(--text);
-		transition: transform 180ms ease, border-color 180ms ease;
-	}
-
-	.links a:hover {
-		border-color: var(--accent);
-	}
-
-
-	code {
-		padding: 0.1rem 0.35rem;
-		color: var(--accent);
-		font-size: 0.9em;
-	}
-
-	.site-footer {
-		display: flex;
-		justify-content: space-between;
-		gap: 1rem;
-		border-top: 1px solid var(--line);
-		padding: 2rem 0 3rem;
-		color: var(--muted-2);
-	}
-
-	.site-footer p {
-		margin: 0;
-	}
-
-	.site-footer a {
-		color: var(--muted);
-	}
-
-	@media (max-width: 900px) {
-		.site-header,
-		.hero,
-		.section-heading,
-		.project {
-			grid-template-columns: 1fr;
-		}
-
-		.site-header {
-			display: grid;
-		}
-
-		.top-nav {
-			justify-content: flex-start;
-		}
-
-		.hero {
-			min-height: auto;
-			padding-top: 2rem;
-		}
-
-		.terminal {
-			order: 2;
-			transform: none;
-		}
-
-		.project-index {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-			margin-bottom: 4rem;
-		}
-
-		.project-meta {
-			writing-mode: initial;
-		}
-
-		.project-side {
-			border-top: 1px solid var(--line);
-			border-left: 0;
-			padding-top: 1.2rem;
-			padding-left: 0;
-		}
-	}
-
-	@media (max-width: 560px) {
-		.site-header,
-		main,
-		.site-footer {
-			width: min(100% - 1rem, 1120px);
-		}
-
-		h1 {
-			font-size: clamp(2.8rem, 18vw, 4.8rem);
-		}
-
-		.project-index {
-			grid-template-columns: 1fr;
-		}
-
-		.project {
-			border-radius: 20px;
-			padding: 1rem;
-		}
-
-		.site-footer {
-			flex-direction: column;
-		}
-	}
-</style>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex,nofollow"><title>Haphazard — Signal Console</title><style>
+*{box-sizing:border-box}body{margin:0;background:#080b0d;color:#e8edf0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.55;background-image:linear-gradient(rgba(94,255,170,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(94,255,170,.025) 1px,transparent 1px);background-size:32px 32px}.wrap{width:min(1240px,calc(100% - 32px));margin:auto}.top{height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #2a3338;font-size:.75rem}.top b{font-size:1rem;color:#72ffad}.top .right{text-align:right;color:#809099}.lights{display:flex;gap:6px}.lights i{display:block;width:7px;height:7px;background:#72ffad;box-shadow:0 0 10px #72ffad}.hero{padding:72px 0 58px;display:grid;grid-template-columns:1.35fr .65fr;gap:60px}.status{color:#72ffad;text-transform:uppercase;font-size:.72rem;letter-spacing:.16em}.hero h1{font-family:Arial,sans-serif;font-weight:800;font-size:clamp(4.4rem,10vw,9.4rem);line-height:.82;letter-spacing:-.075em;margin:32px 0 28px;max-width:9ch}.hero h1 span{color:#72ffad}.hero p{color:#95a3aa;max-width:62ch;font-size:1.05rem}.command{align-self:end;border:1px solid #39454b;background:#0d1215;padding:18px;box-shadow:inset 3px 0 #72ffad}.command small{color:#66747a}.command p{margin:8px 0 0;color:#d9e1e5}.prompt{color:#72ffad}.run{margin-top:18px;background:#72ffad;color:#031109;border:0;padding:10px 14px;font:800 .74rem ui-monospace,monospace;text-transform:uppercase;cursor:pointer}.metrics{border-top:1px solid #2a3338;border-bottom:1px solid #2a3338;display:grid;grid-template-columns:repeat(4,1fr)}.metric{padding:24px;border-right:1px solid #2a3338}.metric:last-child{border:0}.metric span{display:block;color:#75848a;font-size:.66rem;text-transform:uppercase;letter-spacing:.15em}.metric b{font:500 1.55rem Arial,sans-serif}.work{padding:66px 0 110px}.work-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.work h2{font:800 3rem Arial,sans-serif;letter-spacing:-.05em;margin:0}.filters{display:flex;gap:5px}.filters button{background:#101619;color:#7f8e94;border:1px solid #2f393e;padding:8px 10px;font:inherit;font-size:.7rem;cursor:pointer}.filters button.active,.filters button:hover{color:#72ffad;border-color:#72ffad}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.card{display:block;color:inherit;text-decoration:none;border:1px solid #2b353a;background:#0c1114;padding:26px;min-height:250px;position:relative;transition:.18s}.card:hover{border-color:#72ffad;transform:translateY(-2px)}.card .id{color:#65747b;font-size:.66rem}.card h3{font:800 2.3rem Arial,sans-serif;letter-spacing:-.05em;margin:45px 0 10px}.card p{color:#87969c;max-width:50ch}.tags{display:flex;gap:6px;flex-wrap:wrap;position:absolute;left:26px;bottom:24px}.tags span{border:1px solid #344147;padding:4px 7px;color:#8fa0a7;font-size:.62rem}.arrow{position:absolute;right:24px;top:20px;color:#72ffad}.toast{position:fixed;right:18px;bottom:18px;background:#72ffad;color:#041109;padding:12px 16px;font-weight:800;font-size:.75rem;transform:translateY(150%);transition:.25s}.toast.show{transform:translateY(0)}footer{border-top:1px solid #2a3338;padding:24px 0 60px;color:#637279;font-size:.7rem;display:flex;justify-content:space-between}@media(max-width:750px){.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(4rem,18vw,6rem)}.metrics{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.work-head{align-items:start;gap:20px;flex-direction:column}.top{grid-template-columns:1fr 1fr}.lights{display:none}}
+</style></head><body><header class="top wrap"><b>~/haphazard.dev</b><div class="lights"><i></i><i></i><i></i></div><div class="right">SYSTEMS ONLINE · 04 PROJECTS</div></header><main><section class="hero wrap"><div><div class="status">● Independent tools / active experiments</div><h1>Less ceremony.<br><span>Better leverage.</span></h1><p>Developer tools that compress multi-repo work, editor friction, and agent orchestration into simpler, faster moves.</p></div><div class="command"><small>haphazard — current mission</small><p><span class="prompt">❯</span> remove friction from high-context work</p><button class="run">Run principle</button></div></section><section class="metrics"><div class="metric"><span>focus</span><b>workflow leverage</b></div><div class="metric"><span>habitat</span><b>terminal + editor</b></div><div class="metric"><span>method</span><b>ship → learn</b></div><div class="metric"><span>status</span><b>deliberately useful</b></div></section><section class="work wrap"><div class="work-head"><div><div class="status">./projects</div><h2>Current systems</h2></div><div class="filters"><button class="active" data-filter="all">ALL</button><button data-filter="cli">CLI</button><button data-filter="editor">EDITOR</button><button data-filter="agent">AGENT</button></div></div><div class="grid"><a class="card" data-kind="cli" href="https://arashi.haphazard.dev"><span class="id">SYS_001 / CLI</span><span class="arrow">↗</span><h3>Arashi</h3><p>Coordinate worktrees across many repositories as one aligned workspace.</p><div class="tags"><span>TYPESCRIPT</span><span>GIT</span><span>NODE</span></div></a><a class="card" data-kind="editor" href="https://github.com/corwinm/oil.code"><span class="id">SYS_002 / EDITOR</span><span class="arrow">↗</span><h3>oil.code</h3><p>Edit the filesystem as text without breaking your keyboard-first flow.</p><div class="tags"><span>VSCODE</span><span>FILESYSTEM</span></div></a><a class="card" data-kind="agent" href="https://github.com/corwinm/coding-agents-tmux"><span class="id">SYS_003 / AGENT</span><span class="arrow">↗</span><h3>coding-agents-tmux</h3><p>Track, inspect, and jump between many coding-agent sessions.</p><div class="tags"><span>TMUX</span><span>AGENTS</span></div></a><a class="card" data-kind="agent" href="https://github.com/HaphazardDev/pi-extensions"><span class="id">SYS_004 / AGENT</span><span class="arrow">↗</span><h3>pi extensions</h3><p>Focused extensions that improve the daily ergonomics of pi.</p><div class="tags"><span>PI</span><span>EXPERIMENTS</span></div></a></div></section></main><footer class="wrap"><span>HAPHAZARD.DEV / CORWIN MARSH</span><span>BUILD SMALL. COMPOUND THE LEVERAGE.</span></footer><div class="toast">PRINCIPLE EXECUTED: one rough edge removed.</div><script>document.querySelector('.run').onclick=()=>{const t=document.querySelector('.toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)};document.querySelectorAll('[data-filter]').forEach(b=>b.onclick=()=>{document.querySelectorAll('[data-filter]').forEach(x=>x.classList.remove('active'));b.classList.add('active');document.querySelectorAll('.card').forEach(c=>c.style.display=b.dataset.filter==='all'||c.dataset.kind===b.dataset.filter?'block':'none')})</script></body></html>
\ No newline at end of file