From 6724356e1ce814cc5d173c92b8e073bdf4fc754c Mon Sep 17 00:00:00 2001
From: Corwin Marsh <corwinm@users.noreply.github.com>
Date: Tue, 25 Aug 2026 01:24:54 -0700
Subject: [PATCH] feat: explore workshop editorial 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..698f78f 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 — Workshop Editorial</title><style>
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3efe5;color:#182019;font-family:Georgia,'Times New Roman',serif;line-height:1.5}.shell{width:min(1180px,calc(100% - 40px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid #26322a}.brand{font-family:Arial,sans-serif;font-weight:900;letter-spacing:-.05em;font-size:1.25rem}.brand i{color:#e94d28;font-style:normal}.nav{display:flex;gap:22px;font:700 .78rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}.nav a{color:inherit;text-decoration:none}.hero{min-height:74vh;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding:70px 0}.kicker,.number,.label{font:800 .72rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em}.kicker{color:#d94620;margin:0 0 22px}.hero h1{font-size:clamp(4rem,8.7vw,8.6rem);line-height:.82;letter-spacing:-.075em;font-weight:500;margin:0;max-width:9ch}.hero h1 em{font-style:italic;font-weight:400}.intro{align-self:end;padding-bottom:18px}.intro p{font-size:1.25rem;max-width:36ch}.actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}.btn{border:1px solid #26322a;background:transparent;color:inherit;padding:12px 16px;text-decoration:none;font:800 .72rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.btn.primary{background:#182019;color:#f3efe5}.line{border-top:1px solid #26322a}.manifesto{display:grid;grid-template-columns:.36fr 1fr;gap:40px;padding:60px 0}.manifesto blockquote{font-size:clamp(2.2rem,4vw,4.6rem);line-height:1.02;margin:0;letter-spacing:-.04em}.projects{padding:60px 0 100px}.project{display:grid;grid-template-columns:70px 1fr .85fr auto;gap:28px;align-items:start;padding:30px 0;border-top:1px solid #7d817b}.project:last-child{border-bottom:1px solid #7d817b}.project h2{margin:0;font-size:2.2rem;line-height:1}.project p{margin:0;color:#4a514a}.project a{color:inherit;font:800 .72rem Arial,sans-serif;text-transform:uppercase}.stamp{border:1px solid #26322a;border-radius:50%;width:92px;height:92px;display:grid;place-items:center;text-align:center;transform:rotate(8deg);font:800 .63rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:#f2b444}.switcher{position:fixed;right:18px;bottom:18px;background:#182019;color:#f3efe5;padding:14px;width:min(340px,calc(100% - 36px));box-shadow:8px 8px 0 #e94d28;z-index:4}.switcher strong{font:800 .68rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}.switcher p{font-size:1rem;margin:8px 0}.switcher button{background:transparent;border:1px solid #738078;color:#fff;padding:7px 10px;cursor:pointer;font-weight:bold}.switcher button:hover{background:#fff;color:#182019}footer{display:flex;justify-content:space-between;padding:30px 0 110px;font:700 .8rem Arial,sans-serif}@media(max-width:760px){.hero{grid-template-columns:1fr;gap:25px}.hero h1{font-size:clamp(3.8rem,17vw,6rem)}.manifesto{grid-template-columns:1fr}.project{grid-template-columns:42px 1fr}.project p,.project .stamp{grid-column:2}.nav{display:none}.shell{width:min(100% - 24px,1180px)}}
+</style></head><body><header class="shell"><div class="brand">haphazard<i>.</i>dev</div><nav class="nav"><a href="#work">Work</a><a href="https://github.com/HaphazardDev">Lab notes ↗</a></nav></header><main><section class="hero shell"><div><p class="kicker">Independent developer workshop · Pacific Northwest</p><h1 id="hero">Small tools for <em>unruly</em> workflows.</h1></div><div class="intro"><p>I build sharp, practical software for the awkward parts of making software—worktrees, terminals, editors, and the seams between them.</p><div class="actions"><a class="btn primary" href="#work">See the work</a><a class="btn" href="https://github.com/corwinm">GitHub ↗</a></div></div></section><section class="line"><div class="manifesto shell"><div class="label">Working principle</div><blockquote>Good tools don’t need to change everything. They just need to remove the right bit of friction.</blockquote></div></section><section class="projects shell" id="work"><p class="kicker">On the bench</p><article class="project"><span class="number">01</span><h2>Arashi</h2><p>A worktree manager that makes a polyrepo behave like a monorepo while you work.</p><a href="https://arashi.haphazard.dev">Docs ↗</a></article><article class="project"><span class="number">02</span><h2>oil.code</h2><p>File operations inside VS Code, using the same editing habits you already have.</p><a href="https://github.com/corwinm/oil.code">Project ↗</a></article><article class="project"><span class="number">03</span><h2>coding-agents-tmux</h2><p>A control surface for many coding-agent sessions without leaving tmux.</p><a href="https://github.com/corwinm/coding-agents-tmux">Project ↗</a></article><article class="project"><span class="number">04</span><h2>pi extensions</h2><p>Small experiments that make a capable coding agent friendlier day to day.</p><div class="stamp">Built in<br>small batches</div></article></section></main><footer class="shell"><span>© Haphazard.dev</span><span>Make the rough edges useful.</span></footer><aside class="switcher"><strong>Try another headline</strong><p id="alt">Small tools for unruly workflows.</p><button id="next">Next line →</button></aside><script>const lines=['Small tools for unruly workflows.','Useful software, built the slightly hard way.','Tools for the parts of development that still feel awkward.','Make the rough edges useful.'];let i=0;document.querySelector('#next').onclick=()=>{i=(i+1)%lines.length;document.querySelector('#alt').textContent=lines[i];document.querySelector('#hero').innerHTML=lines[i].replace(/(unruly|slightly hard|awkward|rough edges)/,'<em>$1</em>')}</script></body></html>
\ No newline at end of file