Merge pull request #23 from m8rmclaren/main

Rework profile, change Projects -> Experience, headings

Author: m8rmclaren

static/HaydenJRoszell.pdf

@@ -272,6 +272,9 @@
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }
@@ -401,9 +404,6 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .gap-14 {
-    gap: calc(var(--spacing) * 14);
-  }
   .gap-16 {
     gap: calc(var(--spacing) * 16);
   }
@@ -529,9 +529,15 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -812,6 +818,16 @@
       gap: calc(var(--spacing) * 2);
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:inline {
+    @media (width >= 48rem) {
+      display: inline;
+    }
+  }
   .md\:h-96 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 96);
@@ -847,6 +863,11 @@
       gap: calc(var(--spacing) * 4);
     }
   }
+  .md\:pl-6 {
+    @media (width >= 48rem) {
+      padding-left: calc(var(--spacing) * 6);
+    }
+  }
   .dark\:border-stone-900 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-stone-900);

static/output.css

@@ -3,11 +3,15 @@ package components
 templ OpenCloseBracketSection(title string, component templ.Component) {
 	<div class="flex flex-col gap-8">
 		<!-- Title & Open bracket -->
-		<h2 class="text-3xl font-bold">{ title }<span class="font-normal text-3xl text-[#4876A2] font-mono text-accent-1 leading-none select-none">&#123;</span></h2>
-		<div class="flex flex-col pl-6 gap-14">
+		<h2 class="text-3xl font-bold">
+			{ title }<span class="hidden md:inline pl-4 font-normal text-3xl text-[#4876A2] font-mono text-accent-1 leading-none select-none">&#123;</span>
+		</h2>
+		<div class="pl-0 md:pl-6">
 			@component
 		</div>
 		<!-- Close bracket -->
-		<div class="text-3xl text-[#4876A2] font-mono text-accent-1 leading-none select-none">&#125;</div>
+		<div class="hidden md:block text-3xl text-[#4876A2] font-mono text-accent-1 leading-none select-none">
+			&#125;
+		</div>
 	</div>
 }

template/components/open_close_bracket_section.templ

@@ -35,7 +35,9 @@ templ keyfactorIntegrationEngineerDescription() {
 		@components.InlineBold("40+ nodes,")
 		handling 
 		@components.InlineBold("1.8M+ daily")
-		HTTP requests and ingesting 68M+ log records per day.
+		HTTP requests and ingesting 
+		@components.InlineBold("68M+")
+		log records per day.
 	</p>
 	<p>
 		Recognized widespread frustration from customers and engineers caused by inconsistent documentation across 100+ integrations. Developed a standardized documentation format and parser that separated content from presentation, allowing engineers to focus on code while ensuring customers received clear, uniform docs. Championed the approach within the team and 
@@ -91,7 +93,7 @@ templ erauSoftwareEngineeringDescription() {
 templ Experience() {
 	<div class="flex flex-col md:flex-row gap-8">
 		<div class="min-w-40 shrink-0">
-			<h2 class="text-3xl font-bold">Industry</h2>
+			<h2 class="text-3xl font-bold">Experience</h2>
 		</div>
 		<div class="flex flex-col gap-8">
 			@experienceCard(

template/view/experience.templ

@@ -21,10 +21,10 @@ templ profile() {
 			Hi, I'm Hayden. I’m a mission-driven problem solver with a curious mind.
 		</p>
 		<p>
-			When there’s purpose behind the mission, I go all in. That’s when I produce my best work: diving deep, adapting quickly, and exceeding expectations. I thrive when I’m working on problems I care about deeply.
+			No matter the challenge, I'm all in. I bring the same commitment and curiosity to every problem I face, whether it’s routine, complex, or uncharted.
 		</p>
 		<p>
-			Whether it’s engineering, product ownership, or bridging business goals with technical execution, my approach is the same: I commit fully, stay relentlessly curious, and deliver meaningful results.
+			In engineering, product ownership, or bridging business goals with technical execution, my approach never changes: commit fully, remain curious, and deliver meaningful results.
 		</p>
 	</div>
 }

template/view/profile.templ

@@ -7,25 +7,25 @@ import (
 
 templ Projects() {
 	<div class="flex flex-col">
-		<h2 class="text-3xl font-bold">Projects I'm Proud of</h2>
+		<h2 class="text-3xl font-bold">Highlights</h2>
 		<div class="flex flex-col gap-8">
 			@projectCard(project{
-				projectName:       "EagleSat-2 (3U CubeSat)",
+				projectName:       "EagleSat-2 (3U CubeSat; actual flight structure)",
 				tagline:           "Testing memory resilience in the harshness of Earth orbit",
 				imageSrc:          "/images/eaglesat/eaglesat-2-orbiting-earth.png",
 				imagePlaceholder:  "EagleSat-2 Orbiting Earth Render",
 				articleHref:       "https://www.linkedin.com/feed/update/urn:li:activity:7379209278949289985/",
 				articleButtonText: "Read the Post",
-				currentStatusText: "Launched on September 14, 2025 aboard the Cygnus XL NG-23 mission, propelled by a SpaceX Falcon 9",
+				currentStatusText: "Status: Launched on Sep 14, 2025 aboard the Cygnus XL NG-23 mission. Currently at the ISS, deployment scheduled soon.",
 			})
 			@projectCard(project{
 				projectName:       "Simple Environment Service",
-				tagline:           "Scalable, on-demand application provisioning using Kubernetes",
+				tagline:           "Hours to minutes: Deploy batteries-included lab environments instantly",
 				imageSrc:          "/images/ses/framed_ses_dashboard_browser_2.png",
 				imagePlaceholder:  "SES Dashboard Markup",
 				articleHref:       "/blog/simple-environment-service",
 				articleButtonText: "Read the Article",
-				currentStatusText: "",
+				currentStatusText: "Status: Actively in use across Keyfactor",
 			})
 		</div>
 	</div>
@@ -40,21 +40,21 @@ templ projectCard(project project) {
 		<h2 class="pt-10 w-4/5 text-2xl font-medium">
 			{ project.tagline }
 		</h2>
-		<h3 class="pt-4 text-base font-medium">
-			{ project.projectName }
-		</h3>
+		if project.currentStatusText != "" {
+			<p class="pt-4 w-3/5 text-base font-medium">
+				{ project.currentStatusText }
+			</p>
+		}
 		<div class="pt-12 w-3/5 flex justify-center">
 			@components.Image(
 				project.imageSrc,
 				project.imagePlaceholder,
 				"rounded-2xl",
 			)
 		</div>
-		if project.currentStatusText != "" {
-			<p class="pt-4 w-4/5 text-base font-medium">
-				{ project.currentStatusText }
-			</p>
-		}
+		<h3 class="pt-4 text-base font-medium">
+			{ project.projectName }
+		</h3>
 		<div class="pt-8 pb-4">
 			<a
 				href={ project.articleHref }

template/view/projects.templ

@@ -11,7 +11,7 @@ templ skills() {
 	<div class="flex flex-col md:flex-row justify-stretch gap-8">
 		<div class="flex flex-col gap-4 md:w-96">
 			<p>
-				I’m a full-stack engineer and I take ideas from concept to reality. I thrive on understanding how things work at a fundamental level and build with best practices, not quick hacks.
+				I’m a full-stack engineer, and I take ideas from concept to reality. I thrive on understanding how things work at a fundamental level and build with best practices, not quick hacks.
 			</p>
 			<p>
 				I work comfortably across infrastructure and application layers, from managing Linux systems to implementing authentication flows and configuring complex networking.