Homepage logo grid touch-up

josh-collinsworth · josh-collinsworth · commit e51115b1f565 · 2026-05-26T11:09:37.000-05:00
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
@@ -0,0 +1,24 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 579 133"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+	aria-hidden="true"
+>
+	<path
+		d="M136.554,70.281c-1.111,-1.037 -1.703,-2 -1.851,-3.481c7.776,-5.777 8.664,-9.628 8.664,-22.365l0,-33.919l-6.22,-0.666c-0,-1.481 -0.075,-3.111 0.592,-4.666l19.996,0c0.222,1.185 0.37,2.222 0.296,3.185c-0.519,0.962 -3.333,2.147 -6.147,2.221l-0,33.622c-0,17.7 -3.629,22.44 -15.33,26.069Zm42.361,-12.442c-9.998,-0 -16.959,-7.332 -16.959,-18.811c-0,-12.738 8.442,-20.662 18.959,-20.662c9.923,0 16.959,7.258 16.959,18.441c-0,13.034 -8.369,21.032 -18.959,21.032Zm1.777,-4.962c5.184,0 8.739,-4.073 8.739,-13.478c0,-10.591 -4.369,-16.071 -10.294,-16.071c-5.184,0 -8.739,4.073 -8.739,13.479c0,10.59 4.37,16.07 10.294,16.07Zm35.178,4.962c-4.888,-0 -9.924,-1.333 -12.812,-3.185c-0.222,-2.592 0.962,-5.702 2.962,-7.479c2.814,3.554 6.147,5.924 10.22,5.924c3.629,0 6.221,-2.073 6.221,-5.11c-0,-3.48 -3.703,-5.332 -7.776,-7.257c-4.888,-2.444 -10.368,-5.184 -10.442,-11.553c-0,-6.962 6.369,-10.813 13.848,-10.813c4.148,0 8.147,1.111 10.813,2.814c0.222,2.667 -1.037,5.999 -3.037,7.406c-2.369,-3.555 -5.48,-5.628 -8.59,-5.628c-3.259,-0 -5.406,1.851 -5.406,4.591c-0,3.111 3.48,4.814 7.479,6.666c5.11,2.443 11.035,5.258 11.109,12.293c0,7.628 -7.035,11.331 -14.589,11.331Zm55.839,-5.628l5.777,0.444c-0,1.407 0.074,2.814 -0.519,4.369l-18.662,0c-0.223,-1.111 -0.371,-2.37 -0.297,-2.962c0.519,-0.963 2.444,-2.148 5.481,-2.148l-0,-17.922c-0,-6.072 -2.222,-9.109 -6.814,-9.109c-2.962,0 -6.517,1.63 -8.738,4.222l-0,23.106l5.48,0.444c-0,1.407 0.074,2.814 -0.519,4.369l-18.588,0c-0.222,-1.111 -0.37,-2.37 -0.296,-2.962c0.518,-0.963 2.592,-2.148 5.702,-2.148l0,-45.693l-5.48,-0.889c-0.074,-0.518 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.777 0.296,-2.444c3.777,-1.037 6.813,-1.407 11.553,-1.481l1.926,0.37l-0,23.477c2.518,-2.889 6.739,-5.481 12.071,-5.481c7.035,0 11.701,4.814 11.701,14.812l0,19.033Zm-113.346,79.82c-14.811,0 -23.994,-10.442 -23.994,-25.624c-0,-17.403 11.849,-27.845 26.66,-27.845c4.444,-0 11.109,0.518 15.923,3.555c-0.371,3.777 -0.889,8.072 -1.481,12.071c-0.519,0.148 -1.111,0.222 -1.63,0.222c-1.777,0 -3.554,-0.666 -4.591,-1.703l-0,-7.776c-2.222,-0.593 -5.777,-1.037 -8.295,-1.037c-10.516,-0 -17.329,5.48 -17.329,20.514c-0,13.849 5.776,21.995 16.737,21.995c3.11,0 6.295,-0.37 8.591,-1.037l1.703,-10.516c0.37,-0.074 0.666,-0.074 1.037,-0.074c1.999,-0 4.073,0.666 4.887,1.703c0,3.777 -0.148,7.702 -0.296,11.257c-4.517,2.592 -11.405,4.295 -17.922,4.295Zm41.843,0.074c-9.998,0 -16.959,-7.331 -16.959,-18.81c-0,-12.738 8.442,-20.662 18.958,-20.662c9.924,-0 16.96,7.257 16.96,18.44c-0,13.034 -8.369,21.032 -18.959,21.032Zm1.777,-4.961c5.184,-0 8.739,-4.074 8.739,-13.479c0,-10.59 -4.369,-16.07 -10.294,-16.07c-5.184,-0 -8.739,4.073 -8.739,13.478c0,10.59 4.37,16.071 10.294,16.071Zm21.107,4.147c-0.223,-1.111 -0.371,-2.37 -0.297,-2.963c0.519,-0.962 2.592,-2.147 5.703,-2.147l-0,-45.694l-5.48,-0.888c-0.074,-0.519 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.778 0.296,-2.444c3.777,-1.037 6.813,-1.407 11.627,-1.482l1.851,0.371l0,51.84l5.777,0.444c-0,1.407 0.074,2.815 -0.519,4.37l-18.884,-0Zm23.18,-0c-0.223,-1.111 -0.371,-2.37 -0.297,-2.963c0.519,-0.962 2.592,-2.147 5.703,-2.147l-0,-45.694l-5.48,-0.888c-0.074,-0.519 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.778 0.296,-2.444c3.777,-1.037 6.813,-1.407 11.627,-1.482l1.851,0.371l0,51.84l5.777,0.444c-0,1.407 0.074,2.815 -0.519,4.37l-18.884,-0Zm32.659,-44.064c-3.259,-0 -5.258,-1.852 -5.258,-4.814c-0,-3.259 2.888,-5.629 5.925,-5.629c2.962,0 4.961,1.778 4.961,4.666c0,3.185 -2.592,5.777 -5.628,5.777Zm-8.887,44.064c-0.222,-1.111 -0.37,-2.37 -0.296,-2.963c0.444,-0.962 2.518,-2.147 5.702,-2.147l0,-26.957l-5.554,-0.889c-0.074,-0.518 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.777 0.296,-2.444c3.851,-1.037 6.888,-1.407 11.701,-1.481l1.852,0.37l-0,33.104l5.702,0.444c0.074,1.407 0.074,2.815 -0.518,4.37l-18.811,-0Zm61.69,-4.814l5.702,0.444c0.075,1.407 0.075,2.815 -0.518,4.37l-18.588,-0c-0.223,-1.111 -0.371,-2.37 -0.297,-2.963c0.445,-0.962 2.444,-2.147 5.481,-2.147l-0,-17.922c-0,-6.073 -2.222,-9.183 -6.814,-9.183c-2.888,-0 -6.443,1.703 -8.738,4.221l-0,23.18l5.48,0.444c-0,1.407 0.074,2.815 -0.519,4.37l-18.588,-0c-0.222,-1.111 -0.37,-2.37 -0.296,-2.963c0.444,-0.962 2.518,-2.147 5.702,-2.147l0,-26.957l-5.554,-0.889c-0.074,-0.518 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.777 0.296,-2.444c3.851,-1.037 6.739,-1.407 11.331,-1.481l1.851,0.37l0,5.258c2.444,-3.036 6.814,-5.998 12.442,-5.998c6.961,-0 11.701,4.814 11.701,14.811l0,19.033Zm21.773,5.628c-4.888,0 -9.924,-1.333 -12.812,-3.184c-0.222,-2.592 0.963,-5.702 2.962,-7.48c2.814,3.555 6.147,5.925 10.22,5.925c3.629,-0 6.221,-2.074 6.221,-5.11c0,-3.481 -3.703,-5.332 -7.776,-7.258c-4.888,-2.444 -10.368,-5.184 -10.442,-11.553c-0,-6.961 6.369,-10.812 13.849,-10.812c4.147,-0 8.146,1.111 10.812,2.814c0.222,2.666 -1.037,5.999 -3.036,7.406c-2.37,-3.555 -5.481,-5.629 -8.591,-5.629c-3.258,0 -5.406,1.852 -5.406,4.592c-0,3.11 3.481,4.814 7.48,6.665c5.11,2.444 11.034,5.258 11.108,12.294c0,7.628 -7.035,11.33 -14.589,11.33Zm78.649,-38.435c0.222,1.11 0.37,2.369 0.296,2.962c-0.444,0.963 -2.295,2.073 -5.184,2.148l-10.738,31.844c-1.555,0.889 -4.073,1.259 -6.295,1.259c-0.666,0 -1.333,0 -1.925,-0.074l-5.333,-16.663c-0.444,-1.407 -0.962,-2.814 -1.259,-4.295l-0.296,-0l-7.109,19.773c-1.556,0.889 -3.925,1.259 -6.221,1.259c-0.741,0 -1.407,0 -2.074,-0.074l-10.886,-33.326l-4.444,-0.444c0,-1.481 0,-2.814 0.297,-4.369l17.625,-0c0.222,1.11 0.371,2.369 0.296,2.962c-0.444,0.963 -2.295,2.073 -5.035,2.148l6.369,20.736c0.444,1.481 0.962,2.888 1.258,4.369l0.297,0l7.257,-20.292l-1.629,-5.11l-4.295,-0.444c-0,-1.481 -0.074,-2.814 0.222,-4.369l17.552,-0c0.148,1.11 0.296,2.369 0.222,2.962c-0.445,0.963 -2.222,2.073 -5.036,2.148l6.369,20.736c0.444,1.481 0.888,2.888 1.185,4.369l0.296,0l8.146,-25.402l-5.11,-0.444c0,-1.481 -0.074,-2.814 0.593,-4.369l14.589,-0Zm18.292,38.435c-9.997,0 -16.959,-7.331 -16.959,-18.81c0,-12.738 8.443,-20.662 18.959,-20.662c9.924,-0 16.959,7.257 16.959,18.44c0,13.034 -8.368,21.032 -18.959,21.032Zm1.778,-4.961c5.184,-0 8.738,-4.074 8.738,-13.479c0,-10.59 -4.369,-16.07 -10.294,-16.07c-5.184,-0 -8.738,4.073 -8.738,13.478c-0,10.59 4.369,16.071 10.294,16.071Zm48.73,-34.659c1.629,1.777 2.517,4.813 2.443,8.368c-5.628,-0.148 -11.923,2.148 -15.329,5.999l-0,19.625l7.183,0.444c0,1.407 0.074,2.815 -0.666,4.37l-20.144,-0c-0.222,-1.111 -0.37,-2.37 -0.296,-2.963c0.444,-0.962 2.518,-2.147 5.702,-2.147l0,-26.957l-5.554,-0.889c-0.074,-0.518 -0.074,-0.963 -0.074,-1.407c-0,-0.963 0.074,-1.777 0.296,-2.444c3.851,-1.037 6.739,-1.407 11.331,-1.481l1.851,0.37l0,8.887c2.592,-4.369 7.554,-8.22 13.257,-9.775Zm30.067,31.178c0.815,0.889 1.407,2.222 1.481,3.407c-2.444,3.332 -6.665,5.035 -11.035,5.035c-6.072,0 -10.294,-3.258 -10.294,-12.071l0,-21.106c-2.517,-0.074 -4.813,-0.593 -5.48,-1.185c0,-1.111 0.074,-2.74 0.371,-3.851l5.628,-0.667l1.629,-9.035c1.407,-0.518 2.666,-0.74 3.925,-0.74c0.741,-0 1.481,0.074 2.222,0.222l-0,9.998l10.812,-0.519c0.074,1.259 -0.074,3.851 -0.296,5.332l-10.516,0l-0.074,21.181c-0,4.073 1.481,6.221 4.888,6.221c2.444,-0 4.369,-0.889 6.739,-2.222Zm42.139,2.814l5.776,0.444c0,1.407 0.074,2.815 -0.518,4.37l-18.663,-0c-0.222,-1.111 -0.37,-2.37 -0.296,-2.963c0.518,-0.962 2.444,-2.147 5.48,-2.147l0,-17.922c0,-6.073 -2.221,-9.109 -6.813,-9.109c-2.962,-0 -6.517,1.629 -8.739,4.221l0,23.106l5.48,0.444c0,1.407 0.074,2.815 -0.518,4.37l-18.588,-0c-0.223,-1.111 -0.371,-2.37 -0.297,-2.963c0.519,-0.962 2.592,-2.147 5.703,-2.147l-0,-45.694l-5.48,-0.888c-0.075,-0.519 -0.075,-0.963 -0.075,-1.407c0,-0.963 0.075,-1.778 0.297,-2.444c3.777,-1.037 6.813,-1.407 11.553,-1.482l1.925,0.371l0,23.476c2.518,-2.888 6.739,-5.48 12.072,-5.48c7.035,-0 11.701,4.814 11.701,14.811l-0,19.033Z"
+		style="fill:currentColor;"
+	/>
+	<path
+		d="M18.013,23.257l0,90.071l27.022,-0l0,18.014l-45.035,-0l-0,-126.099l45.035,-0l0,18.014l-27.022,0Z"
+		style="fill:#a7a8aa;"
+	/>
+	<path
+		d="M108.085,131.342l-45.036,-0l-0,-18.014l27.021,-0l0,-90.071l-27.021,0l-0,-18.014l45.036,-0l-0,126.099Z"
+		style="fill:#ffd100;"
+	/>
+</svg>
diff --git a/src/lib/css/print.css b/src/lib/css/print.css
@@ -23,23 +23,23 @@
 	html,
 	body,
 	.layout,
-	#app { 
-		height: auto !important; 
+	#app {
+		height: auto !important;
 		min-height: unset !important;
 	}
 
 	.layout {
 		margin: 0 auto;
 		width: 100%;
-		max-width: 5in;
 		break-inside: avoid;
+		padding-inline: 1in;
 	}
 
 	.loader + div {
-		display: none!important;
+		display: none !important;
 	}
 
 	* {
 		break-inside: avoid !important;
 	}
-}
+}
diff --git a/src/lib/css/utilities.css b/src/lib/css/utilities.css
@@ -7,7 +7,8 @@
 }
 
 .sr,
-input[type=checkbox] {
+.sr-only,
+input[type='checkbox'] {
 	position: absolute;
 	left: -100vw;
 	opacity: 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -326,18 +326,20 @@
 	.icons {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: var(--quarter-note);
+		gap: var(--dotted-quarter-note);
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		max-width: 32rem;
+		max-width: 16rem;
 		margin-block-start: var(--half-note);
 
 		@media (min-width: 32rem) {
+			max-width: 32rem;
 			grid-template-columns: repeat(5, minmax(0, 1fr));
 			grid-column-start: 1;
 			grid-column: 1 / -1;
 			grid-row: 9 / 10;
+			gap: var(--quarter-note);
 		}
 
 		@media (min-width: 96rem) {
diff --git a/src/routes/resume/+page.svelte b/src/routes/resume/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Logo from '$lib/components/Logo.svelte'
 	import Main from '$lib/components/Main.svelte'
 
 	// I don't want these values public on the internet, so I'm just populating them locally when printing only. This way keeps linter errors from popping up.
@@ -7,11 +8,12 @@
 </script>
 
 <svelte:head>
-	<title>Josh Collinsworth | Résumé</title>
+	<title>Josh Collinsworth | Resume</title>
 	<meta
 		data-key="description"
 		name="description"
-		content="My professional resume"
+		content="Josh Collinsworth — design engineer and frontend
+  developer. Resume, experience, and selected work."
 	/>
 	<meta
 		property="og:image"
@@ -22,9 +24,9 @@
 
 <Main>
 	<div class="resume compressed-content">
-		<h1>
-			<img src="/images/2026.svg" alt="Josh Collinsworth" class="resume-logo" />
-		</h1>
+		<div class="resume-logo">
+			<Logo />
+		</div>
 		{#if MY_EMAIL && MY_PHONE}
 			<ul class="hidden-contact">
 				<li>
@@ -66,7 +68,7 @@
 
 		<ul>
 			<li>
-				Lead frontend development and design across Deno sites, products, and
+				Led frontend development and design across Deno sites, products, and
 				documentation
 			</li>
 			<li>
@@ -76,6 +78,11 @@
 				redesign correlated with the Deno 2.0, launch and helped to achieve a
 				permanent 200% increase in web traffic and Deno monthly active users
 			</li>
+			<li>
+				Led design and launch of <a href="https://clawpatrol.dev">Claw Patrol</a
+				>, an open-source firewall for AI agents, including brand identity,
+				dashboard UI, landing page, and launch marketing
+			</li>
 			<li>
 				Complete redesign of <a href="https://deno.com/deploy">Deno Deploy</a>,
 				including full rebrand with app and marketing rebuild
@@ -104,10 +111,9 @@
 
 		<ul>
 			<li>
-				Led the comprehensive redesign and rebuild of all marketing pages for
-				Shopify’s <a href="https://shopify.com/pos">point of sale</a> and retail products
-				in Remix for over 30 locales, resulting in an 18% increase in customer conversion
-				rate
+				Led a comprehensive redesign and rebuild of all marketing pages for
+				Shopify <a href="https://shopify.com/pos">point of sale</a> and retail products
+				in over 30 locales, resulting in an 18% increase in customer conversion
 			</li>
 			<li>
 				Developed marketing landing pages for major initiatives including
@@ -387,10 +393,6 @@
 </Main>
 
 <style>
-	:global(.page-head) {
-		display: none !important;
-	}
-
 	:global(main) {
 		position: relative;
 	}
@@ -408,29 +410,18 @@
 		}
 	}
 
-	.compressed-content {
-		width: 100%;
-		max-width: 69ch; /* Nice */ /* I genuinely didn't do this just for the joke; it's just the width that matched print width the best */
-		padding: 0;
-		margin: 0;
-		position: relative;
-	}
-
 	.resume-logo {
-		display: inline-block;
+		display: none;
 		margin: 0;
 		width: 100%;
-		max-width: 14rem;
+		max-width: 12rem;
 		height: auto;
 	}
 
-	h1 {
-		margin: 0;
-	}
-
 	.resume {
 		display: block;
 		width: 100%;
+		max-width: 69ch; /* Nice */
 		margin: 0 auto;
 		margin-block-start: var(--whole-note);
 
@@ -516,30 +507,30 @@
 	}
 
 	@media print {
+		:global(.page-head) {
+			display: none !important;
+		}
+
 		:global(.layout) {
 			max-width: 7.5in;
-			padding: 0 1in;
 			margin-inline: auto;
 			break-inside: auto !important;
 		}
 
 		:global(.compressed-content) {
-			max-width: unset !important;
-			padding-top: 0.5in;
-		}
-
-		.compressed-content {
-			padding-top: 0;
+			max-width: unset;
+			/* padding-top: 0.5in; */
 		}
 
-		h1 {
-			margin: 0;
+		:global(main) {
+			max-width: unset !important;
 		}
 
 		.resume {
 			--quarter-note: 9pt;
 			font-size: 9pt;
 			margin: 0;
+			max-width: unset;
 
 			.resume-logo {
 				display: inline-block;

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,8 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.sr,`
`10`		`-input[type=checkbox] {`
	`10`	`+.sr-only,`
	`11`	`+input[type='checkbox'] {`
`11`	`12`	`position: absolute;`
`12`	`13`	`left: -100vw;`
`13`	`14`	`opacity: 0;`