From ca958f0e29d6147e4bb8ed194fc60b2469e9bbc8 Mon Sep 17 00:00:00 2001
From: Corwin Marsh <corwinm@users.noreply.github.com>
Date: Tue, 25 Aug 2026 01:25:00 -0700
Subject: [PATCH] feat: explore field notes 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..8814d0e 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 — Field Notes</title><style>
+*{box-sizing:border-box}body{margin:0;background:#fff9e9;color:#152519;font-family:Arial,sans-serif;background-image:radial-gradient(#dccfb5 1px,transparent 1px);background-size:18px 18px}.wrap{width:min(1160px,calc(100% - 36px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-weight:800}.logo{font-size:1.3rem;letter-spacing:-.05em}.logo span{background:#ff5b35;color:#fff;padding:2px 5px;transform:rotate(-2deg);display:inline-block}.nav{display:flex;gap:8px}.nav a{color:inherit;text-decoration:none;border:2px solid #17251b;border-radius:100px;padding:8px 12px;font-size:.75rem}.hero{display:grid;grid-template-columns:1fr .65fr;gap:60px;align-items:center;padding:60px 0 90px}.hero h1{font-size:clamp(4rem,9vw,8.8rem);line-height:.83;letter-spacing:-.085em;margin:0}.scribble{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#ff5b35}.note{background:#ffe06a;padding:28px;box-shadow:8px 9px 0 #17251b;transform:rotate(2deg);font-family:Georgia,serif;font-size:1.28rem;line-height:1.45;position:relative}.note:before{content:"NOTE TO SELF";display:block;font:900 .65rem Arial,sans-serif;letter-spacing:.18em;margin-bottom:18px}.note button{border:0;border-bottom:2px solid #17251b;background:transparent;font:800 .75rem Arial,sans-serif;cursor:pointer;padding:5px 0}.tape{position:absolute;background:rgba(220,205,168,.7);height:24px;width:110px;top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg)}.marquee{overflow:hidden;background:#152519;color:#fff9e9;border-block:3px solid #152519;transform:rotate(-.5deg);width:100%;margin-left:0}.track{display:flex;gap:42px;white-space:nowrap;padding:13px 0;font-weight:900;text-transform:uppercase;letter-spacing:.12em;animation:move 22s linear infinite}.track span{color:#ffb928}@keyframes move{to{transform:translateX(-50%)}}.projects{padding:100px 0}.projects-head{display:grid;grid-template-columns:.6fr 1fr;gap:30px;margin-bottom:40px}.projects-head p{font-family:Georgia,serif;font-size:1.35rem;max-width:38ch;margin:0}.eyebrow{font-weight:900;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase}.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{color:inherit;text-decoration:none;border:3px solid #152519;padding:24px;min-height:280px;position:relative;transition:.15s}.card:hover{transform:rotate(-1deg) translateY(-5px);box-shadow:7px 7px 0 #152519}.card:nth-child(1){grid-column:span 7;background:#9fe1c0}.card:nth-child(2){grid-column:span 5;background:#ff8a65}.card:nth-child(3){grid-column:span 5;background:#a9c8ff}.card:nth-child(4){grid-column:span 7;background:#ffe06a}.card small{font-weight:900;letter-spacing:.12em}.card h2{font-size:clamp(2rem,4vw,4rem);line-height:.9;letter-spacing:-.06em;margin:52px 0 14px}.card p{max-width:45ch;line-height:1.55}.card .go{position:absolute;right:20px;top:18px;border:2px solid #152519;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-weight:900}.principles{border-top:3px solid #152519;border-bottom:3px solid #152519;display:grid;grid-template-columns:repeat(3,1fr)}.principle{padding:44px;border-right:3px solid #152519}.principle:last-child{border:0}.principle b{font-family:Georgia,serif;font-size:2rem;display:block;margin-bottom:10px}.principle p{line-height:1.5}.footer{padding:35px 0 80px;display:flex;justify-content:space-between;font-weight:800;font-size:.8rem}.chooser{position:fixed;left:16px;bottom:16px;background:#fff;border:3px solid #152519;padding:12px;z-index:4;box-shadow:4px 4px 0 #ff5b35;max-width:360px}.chooser label{font-weight:900;font-size:.66rem;letter-spacing:.12em}.chooser select{display:block;margin-top:7px;width:100%;border:0;background:#fff;font:700 .82rem Arial;padding:4px}@media(max-width:760px){.hero{grid-template-columns:1fr}.projects-head{grid-template-columns:1fr}.card:nth-child(n){grid-column:span 12}.principles{grid-template-columns:1fr}.principle{border-right:0;border-bottom:3px solid #152519}.nav a:first-child{display:none}.hero h1{font-size:clamp(4rem,19vw,6.5rem)}}
+</style></head><body><header class="wrap"><div class="logo"><span>haphazard</span>.dev</div><nav class="nav"><a href="#projects">The things</a><a href="https://github.com/HaphazardDev">GitHub ↗</a></nav></header><main><section class="hero wrap"><h1>Software for the <span class="scribble">awkward</span> parts.</h1><aside class="note"><i class="tape"></i><p id="note-text">Most tools start with a grand vision. These start with “why is this still annoying?”</p><button id="shuffle">Another thought ↻</button></aside></section><div class="marquee"><div class="track">WORKTREES <span>✦</span> EDITORS <span>✦</span> TERMINALS <span>✦</span> CODING AGENTS <span>✦</span> SMALL SHARP TOOLS <span>✦</span> WORKTREES <span>✦</span> EDITORS <span>✦</span> TERMINALS <span>✦</span> CODING AGENTS <span>✦</span></div></div><section class="projects wrap" id="projects"><div class="projects-head"><span class="eyebrow">Things that escaped the workshop</span><p>Experiments and utilities built because a workflow had one too many papercuts.</p></div><div class="cards"><a class="card" href="https://arashi.haphazard.dev"><span class="go">↗</span><small>01 / WORKTREES</small><h2>Arashi</h2><p>For when “just open the other repo” stops being a reasonable development strategy.</p></a><a class="card" href="https://github.com/corwinm/oil.code"><span class="go">↗</span><small>02 / EDITOR</small><h2>oil.code</h2><p>Your filesystem is editable. Act accordingly.</p></a><a class="card" href="https://github.com/corwinm/coding-agents-tmux"><span class="go">↗</span><small>03 / AGENTS</small><h2>coding-agents-tmux</h2><p>Keep many coding agents close without opening many more windows.</p></a><a class="card" href="https://github.com/HaphazardDev/pi-extensions"><span class="go">↗</span><small>04 / EXPERIMENTS</small><h2>pi extensions</h2><p>Small modifications to a capable agent, each aimed at one daily irritation.</p></a></div></section><section class="principles"><div class="principle"><b>Start with friction.</b><p>A concrete annoyance is a better brief than a trend.</p></div><div class="principle"><b>Stay composable.</b><p>Fit the tools people already chose instead of replacing everything.</p></div><div class="principle"><b>Ship the useful bit.</b><p>Small, legible, and real beats impressive in theory.</p></div></section></main><footer class="footer wrap"><span>Made by Corwin Marsh</span><span>Haphazard on purpose.</span></footer><div class="chooser"><label for="line">TRY THE HERO AS</label><select id="line"><option value="awkward">Software for the awkward parts.</option><option value="rough">Better tools for the rough edges.</option><option value="itchy">Built for workflows that itch.</option><option value="haphazard">Haphazard on purpose.</option></select></div><script>const copy={awkward:['Software for the ','awkward',' parts.'],rough:['Better tools for the ','rough',' edges.'],itchy:['Built for workflows that ','itch','y.'],haphazard:['','Haphazard',' on purpose.']};document.querySelector('#line').onchange=e=>{const x=copy[e.target.value];document.querySelector('h1').innerHTML=x[0]+'<span class="scribble">'+x[1]+'</span>'+x[2]};const notes=['Most tools start with a grand vision. These start with “why is this still annoying?”','A good workflow tool should feel obvious a week later.','The experiment can be playful. The result still has to work.','There is usually leverage hiding in the seams.'];let n=0;document.querySelector('#shuffle').onclick=()=>{n=(n+1)%notes.length;document.querySelector('#note-text').textContent=notes[n]}</script></body></html>
\ No newline at end of file