From 353030d2dc2b3fdfc07e499f51f131f11125f3b6 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Sun, 16 Aug 2026 12:54:38 -0500
Subject: [PATCH] feat(projects): add single-projects detail template

---
 .gitignore                             |   1 +
 single-projects.php                    | 168 +++++++++++++++++++++++++
 style.css                              |   4 +-
 styles/components/project-card.css     |  86 +++++++++++++
 views/components/project-meta-row.php  |  18 ++-
 views/components/project-stat-card.php |  20 +--
 6 files changed, 282 insertions(+), 15 deletions(-)
 create mode 100644 single-projects.php

diff --git a/.gitignore b/.gitignore
index dc6d456..5b820b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ testimonials.class.php
 resource-filter/
 phpcs-results.txt
 .claude/
+notes/
 
 # Playwright
 /test-results/
diff --git a/single-projects.php b/single-projects.php
new file mode 100644
index 0000000..8013e7b
--- /dev/null
+++ b/single-projects.php
@@ -0,0 +1,168 @@
+<?php
+/**
+ * Single Project Template
+ *
+ * Renders the project detail page: Carbon Blue hero with provider,
+ * title, and version; Download / View Repo CTAs; two-column body with
+ * main content and a sidebar of owner, repository details, and stat
+ * cards.
+ *
+ * @package KsPortfolio
+ */
+
+namespace KsPortfolio;
+
+get_header();
+
+while ( have_posts() ) :
+	the_post();
+	$project_id = (int) get_the_ID();
+	$provider   = Projects::get_provider_label( $project_id );
+	$version    = Projects::get_latest_version( $project_id );
+	$release    = Projects::get_release_url( $project_id );
+	$repo       = Projects::get_repo_browse_url( $project_id );
+	$repo_data  = Projects::get_repo_data( $project_id );
+	$owner      = Projects::get_owner_data( $project_id );
+	$type_terms = get_the_terms( $project_id, 'project-type' );
+	$type_label = ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ? strtoupper( $type_terms[0]->name ) : '';
+	$excerpt    = has_excerpt( $project_id ) ? get_the_excerpt( $project_id ) : '';
+	?>
+	<article class="single-project aura-bg">
+		<div class="aura-bg__content">
+			<div class="container mx-auto my-section">
+
+				<header class="single-project__hero">
+					<p class="single-project__meta">
+						<span class="single-project__provider"><?php echo esc_html( $provider ); ?></span>
+						<?php if ( $type_label ) : ?>
+							<span class="single-project__type"><?php echo esc_html( $type_label ); ?></span>
+						<?php endif; ?>
+					</p>
+					<h1 class="single-project__title">
+						<?php echo esc_html( get_the_title( $project_id ) ); ?>
+						<?php if ( 'Unknown' !== $version ) : ?>
+							<span class="single-project__version">v<?php echo esc_html( $version ); ?></span>
+						<?php endif; ?>
+					</h1>
+					<?php if ( $excerpt ) : ?>
+						<p class="single-project__excerpt"><?php echo esc_html( $excerpt ); ?></p>
+					<?php endif; ?>
+
+					<div class="single-project__actions">
+						<?php if ( $release ) : ?>
+							<a class="button button--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow">
+								<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?>
+								<?php if ( 'Unknown' !== $version ) : ?>
+									v<?php echo esc_html( $version ); ?>
+								<?php endif; ?>
+							</a>
+						<?php endif; ?>
+						<?php if ( $repo ) : ?>
+							<a class="button button--outline" href="<?php echo esc_url( $repo ); ?>" target="_blank" rel="noopener noreferrer">
+								<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?>
+							</a>
+						<?php endif; ?>
+					</div>
+				</header>
+
+				<div class="single-project__layout">
+					<div class="single-project__body">
+						<?php if ( has_post_thumbnail( $project_id ) ) : ?>
+							<figure class="single-project__featured">
+								<?php echo get_the_post_thumbnail( $project_id, 'large' ); ?>
+							</figure>
+						<?php endif; ?>
+
+						<section class="single-project__content" aria-label="<?php echo esc_attr__( 'Architecture and Implementation', 'ks-portfolio' ); ?>">
+							<h2><?php echo esc_html__( 'Architecture & Implementation', 'ks-portfolio' ); ?></h2>
+							<?php the_content(); ?>
+						</section>
+					</div>
+
+					<aside class="single-project__sidebar" aria-label="<?php echo esc_attr__( 'Repository details', 'ks-portfolio' ); ?>">
+						<?php if ( $owner ) : ?>
+							<section class="single-project__maintainer">
+								<h3><?php echo esc_html__( 'Maintainer', 'ks-portfolio' ); ?></h3>
+								<div class="single-project__owner">
+									<?php if ( ! empty( $owner['avatar_url'] ) ) : ?>
+										<span class="single-project__owner-avatar" style="background-image: url('<?php echo esc_url( $owner['avatar_url'] ); ?>');" aria-hidden="true"></span>
+									<?php endif; ?>
+									<a class="single-project__owner-link" href="<?php echo esc_url( ! empty( $owner['html_url'] ) ? $owner['html_url'] : ( 'https://github.com/' . $owner['login'] ) ); ?>" target="_blank" rel="noopener noreferrer">
+										<?php echo esc_html( $owner['login'] ); ?>
+									</a>
+								</div>
+							</section>
+						<?php endif; ?>
+
+						<section class="single-project__details">
+							<h3><?php echo esc_html__( 'Repository Details', 'ks-portfolio' ); ?></h3>
+							<?php
+							$updated_at = is_array( $repo_data ) && ! empty( $repo_data['updated_at'] )
+								? human_time_diff( strtotime( $repo_data['updated_at'] ) ) . ' ' . __( 'ago', 'ks-portfolio' )
+								: '—';
+							$license    = is_array( $repo_data ) && ! empty( $repo_data['license']['name'] ) ? $repo_data['license']['name'] : __( 'None', 'ks-portfolio' );
+							$language   = is_array( $repo_data ) && ! empty( $repo_data['language'] ) ? $repo_data['language'] : '—';
+
+							$rows   = array();
+							$rows[] = array(
+								'label' => __( 'Version', 'ks-portfolio' ),
+								'value' => 'Unknown' !== $version ? 'v' . $version : __( 'Unknown', 'ks-portfolio' ),
+							);
+							$rows[] = array(
+								'label' => __( 'Last Updated', 'ks-portfolio' ),
+								'value' => $updated_at,
+							);
+							$rows[] = array(
+								'label' => __( 'License', 'ks-portfolio' ),
+								'value' => $license,
+							);
+							$rows[] = array(
+								'label' => __( 'Language', 'ks-portfolio' ),
+								'value' => $language,
+							);
+
+							foreach ( $rows as $row ) :
+								set_query_var( 'label', $row['label'] );
+								set_query_var( 'value', $row['value'] );
+								get_template_part( 'views/components/project-meta-row' );
+							endforeach;
+							?>
+						</section>
+
+						<section class="single-project__stats" aria-label="<?php echo esc_attr__( 'Repository statistics', 'ks-portfolio' ); ?>">
+							<?php
+							$stats   = array();
+							$stats[] = array(
+								'label' => __( 'Downloads', 'ks-portfolio' ),
+								'value' => Projects::format_stat( get_post_meta( $project_id, '_projects_portfolio_download_count', true ) ),
+							);
+							$stats[] = array(
+								'label' => __( 'Stars', 'ks-portfolio' ),
+								'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['stargazers_count'] ?? 0 ) : 0 ),
+							);
+							$stats[] = array(
+								'label' => __( 'Forks', 'ks-portfolio' ),
+								'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['forks_count'] ?? 0 ) : 0 ),
+							);
+							$stats[] = array(
+								'label' => __( 'Issues', 'ks-portfolio' ),
+								'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['open_issues_count'] ?? 0 ) : 0 ),
+							);
+
+							foreach ( $stats as $stat ) :
+								set_query_var( 'label', $stat['label'] );
+								set_query_var( 'value', $stat['value'] );
+								get_template_part( 'views/components/project-stat-card' );
+							endforeach;
+							?>
+						</section>
+					</aside>
+				</div>
+			</div>
+		</div>
+	</article>
+	<?php
+endwhile;
+
+get_template_part( 'views/partials/aura-bg' );
+get_footer();
diff --git a/style.css b/style.css
index 5d20fb2..aca996a 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 /*
  * Theme Name: Portfolio 2026
- * Description: A clean and modern portfolio theme for showcasing your work.
+ * Description: A clean and modern portfolio theme for showcasing my work.
  * Version: 1.0
  * Author: Keith Solomon
- * Text Domain: sf-evo
+ * Text Domain: ks-portfolio
  */
diff --git a/styles/components/project-card.css b/styles/components/project-card.css
index b433611..12d2a58 100644
--- a/styles/components/project-card.css
+++ b/styles/components/project-card.css
@@ -213,3 +213,89 @@
 	font-weight: 600;
 }
 .archive-projects__back-link:hover { text-decoration: underline; }
+
+.single-project__hero {
+	background: var(--color-surface-container-low, #1a1b21);
+	border: 1px solid var(--color-outline-variant, #444651);
+	border-radius: 1rem;
+	padding: 2rem;
+	margin-bottom: 2rem;
+}
+
+.single-project__meta {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin: 0 0 0.5rem;
+	color: var(--color-on-surface-variant, #c5c5d3);
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+
+.single-project__title {
+	font-family: var(--font-sans);
+	font-weight: 700;
+	font-size: 2.25rem;
+	line-height: 1.2;
+	color: var(--color-on-surface, #e3e1e9);
+	margin: 0 0 0.75rem;
+}
+
+.single-project__version { color: var(--color-on-surface-variant, #c5c5d3); font-weight: 400; font-size: 1.5rem; margin-left: 0.5rem; }
+
+.single-project__excerpt {
+	color: var(--color-on-surface-variant, #c5c5d3);
+	font-size: 1rem;
+	line-height: 1.6;
+	max-width: 70ch;
+	margin: 0 0 1.5rem;
+}
+
+.single-project__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+
+.single-project__layout {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+	.single-project__layout {
+		grid-template-columns: 2fr 1fr;
+		gap: 4rem;
+	}
+}
+
+.single-project__body h2,
+.single-project__sidebar h3 { color: var(--color-on-surface, #e3e1e9); font-family: var(--font-sans); font-weight: 700; }
+
+.single-project__maintainer,
+.single-project__details,
+.single-project__stats {
+	background: var(--color-surface-container, #1e1f25);
+	border: 1px solid var(--color-outline-variant, #444651);
+	border-radius: 1rem;
+	padding: 1.25rem;
+	margin-bottom: 1rem;
+}
+
+.single-project__owner { display: flex; align-items: center; gap: 0.75rem; }
+.single-project__owner-avatar {
+	width: 40px;
+	height: 40px;
+	background-size: 40px 40px;
+	background-repeat: no-repeat;
+	background-position: center;
+	border-radius: 0.5rem;
+	background-color: var(--color-surface-container-high, #292a2f);
+}
+
+.single-project__owner-link { color: var(--color-on-surface, #e3e1e9); font-weight: 600; text-decoration: none; }
+.single-project__owner-link:hover { color: var(--color-primary, #b6c4ff); }
+
+.single-project__stats {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.75rem;
+}
diff --git a/views/components/project-meta-row.php b/views/components/project-meta-row.php
index 1a96d1c..02f2468 100644
--- a/views/components/project-meta-row.php
+++ b/views/components/project-meta-row.php
@@ -3,23 +3,29 @@
  * Project Meta Row Component
  *
  * Renders one row of the Repository Details table on the project detail
- * page. Expects $label, $value, and $icon (optional decorative SVG) in
- * scope.
+ * page. Reads $label, $value, and optional $icon from get_query_var(),
+ * because get_template_part() does not forward its $args parameter into
+ * the partial's local scope.
  *
  * @package KsPortfolio
  */
 
 namespace KsPortfolio;
 
-if ( ! isset( $label ) || ! isset( $value ) ) {
+$row_label = get_query_var( 'label' );
+$row_value = get_query_var( 'value' );
+$icon      = get_query_var( 'icon' );
+
+if ( ! isset( $row_label ) || ! isset( $row_value ) ) {
 	return;
 }
-$row_label = (string) $label;
-$row_value = (string) $value;
+
+$row_label = (string) $row_label;
+$row_value = (string) $row_value;
 ?>
 <div class="meta-row">
 	<span class="meta-row__label">
-		<?php if ( isset( $icon ) && $icon ) : ?>
+		<?php if ( ! empty( $icon ) ) : ?>
 			<span class="meta-row__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
 		<?php endif; ?>
 		<?php echo esc_html( $row_label ); ?>
diff --git a/views/components/project-stat-card.php b/views/components/project-stat-card.php
index d4312b7..c8e17b4 100644
--- a/views/components/project-stat-card.php
+++ b/views/components/project-stat-card.php
@@ -2,23 +2,29 @@
 /**
  * Project Stat Card Component
  *
- * Renders one stat tile. Expects $label, $value, and $icon (optional SVG
- * markup) in scope. $icon MUST be aria-hidden decorative markup; the label
- * is the accessible name.
+ * Renders one stat tile. Reads $label, $value, and optional $icon from
+ * get_query_var(), because get_template_part() does not forward its $args
+ * parameter into the partial's local scope. $icon MUST be aria-hidden
+ * decorative markup; the label is the accessible name.
  *
  * @package KsPortfolio
  */
 
 namespace KsPortfolio;
 
-if ( ! isset( $label ) || ! isset( $value ) ) {
+$stat_label = get_query_var( 'label' );
+$stat_value = get_query_var( 'value' );
+$icon       = get_query_var( 'icon' );
+
+if ( ! isset( $stat_label ) || ! isset( $stat_value ) ) {
 	return;
 }
-$stat_label = (string) $label;
-$stat_value = (string) $value;
+
+$stat_label = (string) $stat_label;
+$stat_value = (string) $stat_value;
 ?>
 <div class="stat-card" role="group" aria-label="<?php echo esc_attr( $stat_label ); ?>">
-	<?php if ( isset( $icon ) && $icon ) : ?>
+	<?php if ( ! empty( $icon ) ) : ?>
 		<span class="stat-card__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
 	<?php endif; ?>
 	<span class="stat-card__value"><?php echo esc_html( $stat_value ); ?></span>