From 1caef627a09d2f5b9fb1cc56cc655626acfb58ed Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Sun, 16 Aug 2026 12:41:50 -0500
Subject: [PATCH] feat(projects): add archive-projects template

---
 archive-projects.php               | 58 ++++++++++++++++++++++++++++++
 styles/components/project-card.css | 47 ++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 archive-projects.php

diff --git a/archive-projects.php b/archive-projects.php
new file mode 100644
index 0000000..4d5dd4d
--- /dev/null
+++ b/archive-projects.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Project Archive Template
+ *
+ * @package KsPortfolio
+ */
+
+namespace KsPortfolio;
+
+get_header();
+
+$hero_intro = get_field( 'archive_intro', (int) get_queried_object_id() );
+if ( ! $hero_intro ) {
+	$hero_intro = __( 'A comprehensive catalog of WordPress plugins, custom themes, and open-source contributions developed for scalable enterprise environments. Focused on modern development practices, performant architectures, and secure integrations.', 'ks-portfolio' );
+}
+?>
+<section class="archive-projects aura-bg">
+	<div class="aura-bg__content">
+		<div class="container mx-auto my-section">
+			<header class="archive-projects__head">
+				<h1 class="archive-projects__title"><?php echo esc_html__( 'Project Archive', 'ks-portfolio' ); ?></h1>
+				<p class="archive-projects__intro"><?php echo esc_html( $hero_intro ); ?></p>
+			</header>
+
+			<?php if ( have_posts() ) : ?>
+				<div class="archive-projects__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					<?php
+					while ( have_posts() ) :
+						the_post();
+						get_template_part( 'views/components/project-card' );
+					endwhile;
+					?>
+				</div>
+
+				<div class="archive-projects__pagination">
+					<?php
+					the_posts_pagination(
+						array(
+							'mid_size'  => 2,
+							'prev_text' => '&laquo; ' . esc_html__( 'Previous', 'ks-portfolio' ),
+							'next_text' => esc_html__( 'Next', 'ks-portfolio' ) . ' &raquo;',
+						)
+					);
+					?>
+				</div>
+			<?php else : ?>
+				<div class="archive-projects__empty">
+					<h2 class="archive-projects__empty-title"><?php echo esc_html__( 'Nothing here yet&hellip;', 'ks-portfolio' ); ?></h2>
+					<p class="archive-projects__empty-desc"><?php echo esc_html__( 'No published projects found.', 'ks-portfolio' ); ?></p>
+				</div>
+			<?php endif; ?>
+		</div>
+	</div>
+</section>
+
+<?php
+get_template_part( 'views/partials/aura-bg', null, array( 'blur' => 'desktop' ) );
+get_footer();
diff --git a/styles/components/project-card.css b/styles/components/project-card.css
index f72e84f..57a9ea9 100644
--- a/styles/components/project-card.css
+++ b/styles/components/project-card.css
@@ -159,3 +159,50 @@
 .meta-row__label { color: var(--color-on-surface-variant, #c5c5d3); display: inline-flex; align-items: center; gap: 0.5rem; }
 .meta-row__value { color: var(--color-on-surface, #e3e1e9); font-weight: 600; }
 .meta-row__icon { color: var(--color-on-surface-variant, #c5c5d3); }
+
+.archive-projects { padding-top: 2rem; padding-bottom: 4rem; }
+
+.archive-projects__head {
+	padding-left: 1rem;
+	border-left: 4px solid var(--color-primary, #b6c4ff);
+	margin-bottom: 2rem;
+}
+
+.archive-projects__title {
+	font-family: var(--font-sans);
+	font-weight: 700;
+	font-size: 2.25rem;
+	line-height: 1.2;
+	margin: 0 0 0.5rem;
+	color: var(--color-on-surface, #e3e1e9);
+}
+
+.archive-projects__intro {
+	color: var(--color-on-surface-variant, #c5c5d3);
+	font-size: 1rem;
+	line-height: 1.6;
+	max-width: 70ch;
+	margin: 0;
+}
+
+.archive-projects__empty {
+	text-align: center;
+	padding: 4rem 1rem;
+	color: var(--color-on-surface-variant, #c5c5d3);
+}
+
+.archive-projects__empty-title {
+	font-weight: 700;
+	font-size: 1.5rem;
+	margin: 0 0 0.5rem;
+	color: var(--color-on-surface, #e3e1e9);
+}
+
+/* Pagination links on dark surface */
+.archive-projects__pagination a,
+.archive-projects__pagination span {
+	background: var(--color-surface-container, #1e1f25);
+	color: var(--color-on-surface, #e3e1e9);
+	border: 1px solid var(--color-outline-variant, #444651);
+	border-radius: 4px;
+}