keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

🐞 fix: Update styles for proper background
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-08-18 16:37:55 -05:00
parent 81547254fc
commit d4df6d8678
12 changed files with 401 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acf/group_5fd3e006e5da5.json
+26 -64
View File
@@ -57,27 +57,6 @@
"append": "", "append": "",
"maxlength": "" "maxlength": ""
}, },
{
"key": "field_684ad36ebaf40",
"label": "Fax",
"name": "fax",
"aria-label": "",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"maxlength": "",
"allow_in_bindings": 1,
"placeholder": "",
"prepend": "",
"append": ""
},
{ {
"key": "field_5fd3e0437bff0", "key": "field_5fd3e0437bff0",
"label": "Address", "label": "Address",
@@ -97,26 +76,6 @@
"maxlength": "", "maxlength": "",
"rows": 3, "rows": 3,
"new_lines": "br" "new_lines": "br"
},
{
"key": "field_60381dcb082b5",
"label": "Hours",
"name": "hours",
"aria-label": "",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": 3,
"new_lines": "br"
} }
] ]
}, },
@@ -209,9 +168,9 @@
"placeholder": "" "placeholder": ""
}, },
{ {
"key": "field_677bf0e692d40", "key": "field_6a82713dd82d4",
"label": "Youtube", "label": "Github",
"name": "youtube", "name": "github",
"aria-label": "", "aria-label": "",
"type": "url", "type": "url",
"instructions": "", "instructions": "",
@@ -223,25 +182,7 @@
"id": "" "id": ""
}, },
"default_value": "", "default_value": "",
"allow_in_bindings": 1, "allow_in_bindings": 0,
"placeholder": ""
},
{
"key": "field_677bf0e692d3f",
"label": "Pinterest",
"name": "pinterest",
"aria-label": "",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"allow_in_bindings": 1,
"placeholder": "" "placeholder": ""
} }
] ]
@@ -286,6 +227,24 @@
"max_height": "", "max_height": "",
"max_size": "", "max_size": "",
"mime_types": "" "mime_types": ""
},
{
"key": "field_6a846bd4360da",
"label": "Resume Link",
"name": "resume_link",
"aria-label": "",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"allow_in_bindings": 0,
"placeholder": ""
} }
] ]
}, },
@@ -455,5 +414,8 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1749744328 "display_title": "",
"allow_ai_access": false,
"ai_description": "",
"modified": 1787063276
} }
archive-projects.php
+32 -35
View File
@@ -14,43 +14,40 @@ 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' ); $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"> <section class="archive-projects">
<?php get_template_part( 'views/partials/aura-bg' ); ?> <div class="container mx-auto my-section">
<div class="aura-bg__content"> <header class="archive-projects__head">
<div class="container mx-auto my-section"> <h1 class="archive-projects__title"><?php echo esc_html__( 'Project Archive', 'ks-portfolio' ); ?></h1>
<header class="archive-projects__head"> <p class="archive-projects__intro"><?php echo esc_html( $hero_intro ); ?></p>
<h1 class="archive-projects__title"><?php echo esc_html__( 'Project Archive', 'ks-portfolio' ); ?></h1> </header>
<p class="archive-projects__intro"><?php echo esc_html( $hero_intro ); ?></p>
</header>
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
<div class="archive-projects__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="archive-projects__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php <?php
while ( have_posts() ) : while ( have_posts() ) :
the_post(); the_post();
get_template_part( 'views/components/project-card' ); get_template_part( 'views/components/project-card' );
endwhile; endwhile;
?> ?>
</div> </div>
<div class="archive-projects__pagination"> <div class="archive-projects__pagination">
<?php <?php
the_posts_pagination( the_posts_pagination(
array( array(
'mid_size' => 2, 'mid_size' => 2,
'prev_text' => '&laquo; ' . esc_html__( 'Previous', 'ks-portfolio' ), 'prev_text' => '&laquo; ' . esc_html__( 'Previous', 'ks-portfolio' ),
'next_text' => esc_html__( 'Next', 'ks-portfolio' ) . ' &raquo;', 'next_text' => esc_html__( 'Next', 'ks-portfolio' ) . ' &raquo;',
) )
); );
?> ?>
</div> </div>
<?php else : ?> <?php else : ?>
<div class="archive-projects__empty"> <div class="archive-projects__empty">
<h2 class="archive-projects__empty-title"><?php echo esc_html__( 'Nothing here yet&hellip;', 'ks-portfolio' ); ?></h2> <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> <p class="archive-projects__empty-desc"><?php echo esc_html__( 'No published projects found.', 'ks-portfolio' ); ?></p>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div>
</div> </div>
</section> </section>
front-page.php
+14 -71
View File
@@ -1,6 +1,6 @@
<?php <?php
/** /**
* Front Page Template — Portfolio 2026 home * Front Page Template
* *
* @package KsPortfolio * @package KsPortfolio
*/ */
@@ -8,77 +8,20 @@
namespace KsPortfolio; namespace KsPortfolio;
get_header(); get_header();
$hero_heading = get_field( 'homepage_hero_heading' );
$hero_intro = get_field( 'homepage_hero_intro' );
$hero_cta_1 = get_field( 'homepage_hero_cta_1' ); // ACF link fields return shape: URL, title, target.
$hero_cta_2 = get_field( 'homepage_hero_cta_2' );
?> ?>
<section class="home-hero aura-bg">
<?php get_template_part( 'views/partials/aura-bg' ); ?>
<div class="aura-bg__content">
<div class="container mx-auto my-section">
<div class="home-hero__inner">
<?php if ( $hero_heading ) : ?>
<h1 class="home-hero__heading"><?php echo esc_html( $hero_heading ); ?></h1>
<?php endif; ?>
<?php if ( $hero_intro ) : ?>
<p class="home-hero__intro"><?php echo esc_html( $hero_intro ); ?></p>
<?php endif; ?>
<div class="home-hero__actions"> <div class="container my-section lg:my-0 mx-auto">
<?php if ( ! empty( $hero_cta_1['url'] ) && ! empty( $hero_cta_1['title'] ) ) : ?> <div>
<a class="button button--primary" href="<?php echo esc_url( $hero_cta_1['url'] ); ?>"<?php echo ! empty( $hero_cta_1['target'] ) ? ' target="_blank" rel="noopener noreferrer"' : ''; ?>> <?php
<?php echo esc_html( $hero_cta_1['title'] ); ?> // Content block
</a> if ( have_posts() ) {
<?php endif; ?> while ( have_posts() ) {
<?php if ( ! empty( $hero_cta_2['url'] ) && ! empty( $hero_cta_2['title'] ) ) : ?> the_post();
<a class="button button--outline" href="<?php echo esc_url( $hero_cta_2['url'] ); ?>"<?php echo ! empty( $hero_cta_2['target'] ) ? ' target="_blank" rel="noopener noreferrer"' : ''; ?>> the_content();
<?php echo esc_html( $hero_cta_2['title'] ); ?> }
</a> }
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<section class="home-recent container mx-auto my-section">
<header class="home-recent__head">
<h2 class="home-recent__title"><?php echo esc_html__( 'Recent Projects', 'ks-portfolio' ); ?></h2>
<a class="home-recent__view-all" href="<?php echo esc_url( get_post_type_archive_link( 'projects' ) ); ?>">
<?php echo esc_html__( 'View All', 'ks-portfolio' ); ?> &rarr;
</a>
</header>
<hr class="home-recent__divider" />
<?php
$recent = new \WP_Query(
array(
'post_type' => 'projects',
'posts_per_page' => 3,
'no_found_rows' => true,
)
);
if ( $recent->have_posts() ) :
?> ?>
<div class="home-recent__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> </div>
<?php </div>
while ( $recent->have_posts() ) :
$recent->the_post();
get_template_part( 'views/components/project-card' );
endwhile;
wp_reset_postdata();
?>
</div>
<?php else : ?>
<div class="home-recent__empty">
<h3><?php echo esc_html__( 'Nothing here yet&hellip;', 'ks-portfolio' ); ?></h3>
<p><?php echo esc_html__( 'No published projects found.', 'ks-portfolio' ); ?></p>
</div>
<?php endif; ?>
</section>
<?php <?php get_footer(); ?>
get_footer();
header.php
+7 -23
View File
@@ -11,6 +11,7 @@ namespace KsPortfolio;
global $views; global $views;
$headerLogo = getFieldValue( 'header.header_logo.url' ) ? getFieldValue( 'header.header_logo.url' ) : get_theme_file_uri( '/static/img/logo.svg' ); $headerLogo = getFieldValue( 'header.header_logo.url' ) ? getFieldValue( 'header.header_logo.url' ) : get_theme_file_uri( '/static/img/logo.svg' );
$linkResume = getFieldValue( 'header.resume_link' ) ? getFieldValue( 'header.resume_link' ) : '';
// Check conditions for displaying the hero section // Check conditions for displaying the hero section
$showHero = in_array( $showHero = in_array(
@@ -25,23 +26,6 @@ $showHero = in_array(
), ),
true true
); );
// Carbon Blue project templates render their own <h1> inside the .aura-bg
// hero, so suppress the page-hero partial on those templates to avoid
// duplicate <h1> elements on the page.
$projectTemplates = array( 'front-page', 'archive-projects', 'single-projects' );
$isProjectTemplate = in_array( get_page_template_slug( get_the_ID() ), $projectTemplates, true );
if ( ! $isProjectTemplate ) {
$isProjectTemplate = in_array( get_post_type(), array( 'projects' ), true ) && (
is_front_page()
|| is_archive( 'projects' )
|| is_singular( 'projects' )
);
}
if ( $isProjectTemplate ) {
$showHero = false;
}
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
@@ -60,19 +44,19 @@ if ( $isProjectTemplate ) {
<?php echo esc_html__( 'Skip to main content' ); ?> <?php echo esc_html__( 'Skip to main content' ); ?>
</a> </a>
<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start"> <?php get_template_part( 'views/partials/aura-bg' ); ?>
<?php get_template_part( 'views/components/nav-aux' ); ?>
<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start">
<div class="header__nav-main container py-4 items-center grid gap-x-8 gap-y-0 grid-cols-[auto_1fr_auto] grid-rows-[1fr] justify-between"> <div class="header__nav-main container py-4 items-center grid gap-x-8 gap-y-0 grid-cols-[auto_1fr_auto] grid-rows-[1fr] justify-between">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-header__logo block"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-header__logo m-0 p-0 flex gap-x-4 items-center justify-start text-white! text-45px font-bold leading-none hover:underline">
<img class="site-header__logo-img" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> logo" /> <img class="site-header__logo-img aspect-square h-full w-full max-h-12 max-w-12" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> logo" /> Keith Solomon
</a> </a>
<?php get_template_part( 'views/components/nav-main' ); ?> <?php get_template_part( 'views/components/nav-main' ); ?>
<div class="site-header__aux"> <div class="site-header__aux">
<a class="button button--outline" href="<?php echo esc_url( home_url( '/cv/' ) ); ?>"> <a class="button button--outline" href="<?php echo esc_url( $linkResume ); ?>">
<?php echo esc_html__( 'Download CV', 'ks-portfolio' ); ?> <?php echo esc_html__( 'Resume', 'ks-portfolio' ); ?>
</a> </a>
</div> </div>
</div> </div>
lib/extras.php
+7 -3
View File
@@ -65,16 +65,20 @@ add_filter(
/** /**
* Checks if the page should render a page header. * Checks if the page should render a page header.
* *
* Returns true only when the page heading ACF field is explicitly set to
* 'default'. When 'none' is selected, no page header should render (the
* page instead relies on its own hero block / template hero).
*
* @return bool true if page header should be rendered, false otherwise * @return bool true if page header should be rendered, false otherwise
*/ */
function hasPageHeader() { function hasPageHeader() {
global $post; global $post;
if ( get_field( 'hero_style' ) !== 'none' ) { if ( get_field( 'hero_style' ) === 'default' ) {
return false; return true;
} }
return true; return false;
} }
/** Create the Owner role. /** Create the Owner role.
single-projects.php
+125 -128
View File
@@ -27,138 +27,135 @@ while ( have_posts() ) :
$type_label = ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ? strtoupper( $type_terms[0]->name ) : ''; $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 ) : ''; $excerpt = has_excerpt( $project_id ) ? get_the_excerpt( $project_id ) : '';
?> ?>
<article class="single-project aura-bg"> <article class="single-project">
<?php get_template_part( 'views/partials/aura-bg' ); ?> <div class="container mx-auto my-section">
<div class="aura-bg__content">
<div class="container mx-auto my-section">
<header class="single-project__hero"> <header class="single-project__hero">
<p class="single-project__meta"> <p class="single-project__meta">
<span class="single-project__provider"><?php echo esc_html( $provider ); ?></span> <span class="single-project__provider"><?php echo esc_html( $provider ); ?></span>
<?php if ( $type_label ) : ?> <?php if ( $type_label ) : ?>
<span class="single-project__type"><?php echo esc_html( $type_label ); ?></span> <span class="single-project__type"><?php echo esc_html( $type_label ); ?></span>
<?php endif; ?> <?php endif; ?>
</p> </p>
<h1 class="single-project__title"> <h1 class="single-project__title">
<?php echo esc_html( get_the_title( $project_id ) ); ?> <?php echo esc_html( get_the_title( $project_id ) ); ?>
<?php if ( 'Unknown' !== $version ) : ?> <?php if ( 'Unknown' !== $version ) : ?>
<span class="single-project__version">v<?php echo esc_html( $version ); ?></span> <span class="single-project__version">v<?php echo esc_html( $version ); ?></span>
<?php endif; ?> <?php endif; ?>
</h1> </h1>
<?php if ( $excerpt ) : ?> <?php if ( $excerpt ) : ?>
<p class="single-project__excerpt"><?php echo esc_html( $excerpt ); ?></p> <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; ?> <?php endif; ?>
<div class="single-project__actions"> <section class="single-project__content" aria-label="<?php echo esc_attr__( 'Architecture and Implementation', 'ks-portfolio' ); ?>">
<?php if ( $release ) : ?> <h2><?php echo esc_html__( 'Architecture & Implementation', 'ks-portfolio' ); ?></h2>
<a class="button button--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow"> <?php the_content(); ?>
<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?> </section>
<?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>
<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> </div>
</article> </article>
styles/base/colors.css
+56 -56
View File
@@ -1,69 +1,69 @@
/* Theme color definitions */ /* Theme color definitions */
@theme { @theme {
--color-black: oklch(0% 0 0); --color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0); --color-white: oklch(100% 0 0);
--color-background: oklch(89.75% 0 0); --color-background: oklch(89.75% 0 0);
--color-text: var(--color-black); --color-text: var(--color-black);
--color-primary: oklch(0.57 0.203362 257.1706); --color-primary: oklch(0.57 0.203362 257.1706);
--color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white); --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
--color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white); --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
--color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white); --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
--color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white); --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
--color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white); --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
--color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white); --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
--color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white); --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white); --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white); --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-secondary: oklch(0.56 0.0176 257.23); --color-secondary: oklch(0.56 0.0176 257.23);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white); --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white); --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white); --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
--color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white); --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
--color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white); --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
--color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white); --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
--color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white); --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white); --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white); --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually /* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
* distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */ * distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */
--color-bodylinks: oklch(0.68 0.16 250); --color-bodylinks: oklch(0.68 0.16 250);
--color-footlinks: oklch(0.68 0.16 250); --color-footlinks: oklch(0.68 0.16 250);
--color-light: oklch(98.16% 0.0017 247.8); --color-light: oklch(98.16% 0.0017 247.8);
--color-dark: oklch(34.51% 0.0133 248.2); --color-dark: oklch(34.51% 0.0133 248.2);
/* Carbon Blue / dark surface tokens (Portfolio 2026) */ /* Carbon Blue / dark surface tokens (Portfolio 2026) */
--color-surface: #121318; --color-surface: #121318;
--color-surface-dim: #121318; --color-surface-dim: #121318;
--color-surface-bright: #38393f; --color-surface-bright: #38393f;
--color-surface-container-lowest: #0d0e13; --color-surface-container-lowest: #0d0e13;
--color-surface-container-low: #1a1b21; --color-surface-container-low: #1a1b21;
--color-surface-container: #1e1f25; --color-surface-container: #1e1f25;
--color-surface-container-high: #292a2f; --color-surface-container-high: #292a2f;
--color-surface-container-highest:#34343a; --color-surface-container-highest: #34343a;
--color-on-surface: #e3e1e9; --color-on-surface: #e3e1e9;
--color-on-surface-variant:#c5c5d3; --color-on-surface-variant: #c5c5d3;
--color-outline: #8f909d; --color-outline: #8f909d;
--color-outline-variant: #444651; --color-outline-variant: #444651;
--color-page-base: #100e0b; --color-page-base: #100e0b;
--color-backlight: rgba(96, 165, 250, 0.20); --color-backlight: rgba(96, 165, 250, 0.20);
--color-primary-fixed: #dce1ff; --color-primary-fixed: #dce1ff;
--color-primary-fixed-dim: #b6c4ff; --color-primary-fixed-dim: #b6c4ff;
--color-on-primary: #05297a; --color-on-primary: #05297a;
--color-on-primary-fixed: #00164e; --color-on-primary-fixed: #00164e;
--color-on-primary-fixed-variant: #264191; --color-on-primary-fixed-variant: #264191;
--color-primary-12: rgba(182, 196, 255, 0.12); --color-primary-12: rgba(182, 196, 255, 0.12);
--color-primary-87: #dce1ff; --color-primary-87: #dce1ff;
--color-success: #5ccf91; --color-success: #5ccf91;
--color-warning: #f4e04d; --color-warning: #f4e04d;
--color-danger: #cc3b3b; --color-danger: #cc3b3b;
--color-info: #3d7ab0; --color-info: #3d7ab0;
} }
styles/base/global.css
+9 -4
View File
@@ -84,12 +84,17 @@ main#maincontent {
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Carbon Blue atmospheric field (decorative — content must sit in z-index: 1) */ /* Carbon Blue atmospheric field — rendered once globally (in header.php)
* as a fixed-position layer behind all content. Decorative only; content
* stays clickable thanks to pointer-events: none. The body carries
* `background-color: #100e0b` so the gradient's mix-blend-mode layers
* have something to composite against. */
.aura-bg { .aura-bg {
position: relative; position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden; overflow: hidden;
min-height: 100vh;
isolation: isolate;
} }
.aura-layer-1 { .aura-layer-1 {
styles/base/typography.css
+30 -32
View File
@@ -40,40 +40,40 @@
*/ */
@theme { @theme {
--font-sans: "Raleway", sans-serif; --font-sans: "Raleway", sans-serif;
--font-headings: var(--font-sans); --font-headings: var(--font-sans);
--line-height: 1.6; --line-height: 1.6;
--text-base: 1rem; --text-base: 1rem;
--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem); --text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem);
--text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem); --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem); --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem); --text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem); --text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem); --text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem); --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem); --text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem); --text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem); --text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem); --text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem); --text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem); --text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem); --text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
--h1: calc(var(--text-base) * 2.25); --h1: calc(var(--text-base) * 2.25);
--h2: calc(var(--text-base) * 1.75); --h2: calc(var(--text-base) * 1.75);
--h3: calc(var(--text-base) * 1.5); --h3: calc(var(--text-base) * 1.5);
--h4: calc(var(--text-base) * 1.25); --h4: calc(var(--text-base) * 1.25);
--h5: calc(var(--text-base) * 1.125); --h5: calc(var(--text-base) * 1.125);
--h6: calc(var(--text-base) * 1.05); --h6: calc(var(--text-base) * 1.05);
} }
body { body {
background-color: #100e0b; background-color: #100e0b;
color: var(--color-on-surface, #e3e1e9); color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--line-height); line-height: var(--line-height);
} }
::selection { background: var(--color-warning); } ::selection { background: var(--color-warning); }
@@ -169,9 +169,7 @@ pre code {
padding: 0; padding: 0;
} }
code { code { @apply bg-black/30 px-0.25 py-0.5 font-mono text-black text-xs rounded-sm; }
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
}
hr { hr {
background-color: black; background-color: black;
taxonomy-project-type.php
+36 -39
View File
@@ -12,47 +12,44 @@ get_header();
$queried = get_queried_object(); $queried = get_queried_object();
$term_name = $queried && ! is_wp_error( $queried ) ? $queried->name : __( 'Projects', 'ks-portfolio' ); $term_name = $queried && ! is_wp_error( $queried ) ? $queried->name : __( 'Projects', 'ks-portfolio' );
?> ?>
<section class="archive-projects aura-bg"> <section class="archive-projects">
<?php get_template_part( 'views/partials/aura-bg' ); ?> <div class="container mx-auto my-section">
<div class="aura-bg__content"> <header class="archive-projects__head">
<div class="container mx-auto my-section"> <h1 class="archive-projects__title"><?php echo esc_html( $term_name ); ?></h1>
<header class="archive-projects__head"> <p class="archive-projects__intro">
<h1 class="archive-projects__title"><?php echo esc_html( $term_name ); ?></h1> <a class="archive-projects__back-link" href="<?php echo esc_url( get_post_type_archive_link( 'projects' ) ); ?>">
<p class="archive-projects__intro"> <?php echo esc_html__( '&larr; All Projects', 'ks-portfolio' ); ?>
<a class="archive-projects__back-link" href="<?php echo esc_url( get_post_type_archive_link( 'projects' ) ); ?>"> </a>
<?php echo esc_html__( '&larr; All Projects', 'ks-portfolio' ); ?> </p>
</a> </header>
</p>
</header>
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
<div class="archive-projects__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="archive-projects__grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php <?php
while ( have_posts() ) : while ( have_posts() ) :
the_post(); the_post();
get_template_part( 'views/components/project-card' ); get_template_part( 'views/components/project-card' );
endwhile; endwhile;
?> ?>
</div> </div>
<div class="archive-projects__pagination"> <div class="archive-projects__pagination">
<?php <?php
the_posts_pagination( the_posts_pagination(
array( array(
'mid_size' => 2, 'mid_size' => 2,
'prev_text' => '&laquo; ' . esc_html__( 'Previous', 'ks-portfolio' ), 'prev_text' => '&laquo; ' . esc_html__( 'Previous', 'ks-portfolio' ),
'next_text' => esc_html__( 'Next', 'ks-portfolio' ) . ' &raquo;', 'next_text' => esc_html__( 'Next', 'ks-portfolio' ) . ' &raquo;',
) )
); );
?> ?>
</div> </div>
<?php else : ?> <?php else : ?>
<div class="archive-projects__empty"> <div class="archive-projects__empty">
<h2 class="archive-projects__empty-title"><?php echo esc_html__( 'Nothing here yet&hellip;', 'ks-portfolio' ); ?></h2> <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 in this category.', 'ks-portfolio' ); ?></p> <p class="archive-projects__empty-desc"><?php echo esc_html__( 'No published projects found in this category.', 'ks-portfolio' ); ?></p>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div>
</div> </div>
</section> </section>
tests/aura-bg.spec.js
+58
View File
@@ -0,0 +1,58 @@
const { test, expect } = require('@playwright/test');
test.use({ viewport: { width: 1920, height: 1080 } });
test.describe('aura-bg Carbon Blue gradient (global, fixed background)', () => {
test('body carries the dark base color that the aura layers blend against', async ({ page }) => {
await page.goto('/');
// Without the body color, mix-blend-mode on the aura layers has nothing
// to composite against and the gradient disappears.
const bodyBg = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
// #100e0b = rgb(16, 14, 11)
expect(bodyBg).toBe('rgb(16, 14, 11)');
});
test('.aura-bg renders globally as a fixed viewport layer (not a per-template wrapper)', async ({ page }) => {
await page.goto('/');
// aura-bg is rendered once in header.php and must be position:fixed so
// it covers the entire viewport behind all content regardless of scroll.
const auraBg = page.locator('.aura-bg').first();
await expect(auraBg).toBeAttached();
const position = await auraBg.evaluate((el) => getComputedStyle(el).position);
expect(position).toBe('fixed');
// z-index: -1 puts the gradient behind page content. Content must sit
// on top via its own stacking context (which the body and main do not
// create, so the negative z-index is safe).
const zIndex = await auraBg.evaluate((el) => getComputedStyle(el).zIndex);
expect(zIndex).toBe('-1');
// pointer-events: none so clicks pass through to content underneath.
const pointerEvents = await auraBg.evaluate((el) => getComputedStyle(el).pointerEvents);
expect(pointerEvents).toBe('none');
});
test('.aura-layer-1 renders the Carbon Blue linear gradient', async ({ page }) => {
await page.goto('/');
const layer1 = page.locator('.aura-layer-1').first();
await expect(layer1).toBeAttached();
const bgImage = await layer1.evaluate((el) => getComputedStyle(el).backgroundImage);
expect(bgImage).toMatch(/linear-gradient/);
});
test('.aura-bg is not isolated (no stacking context traps blend modes)', async ({ page }) => {
await page.goto('/');
// isolation: isolate on the .aura-bg parent would trap mix-blend-mode
// children inside an empty container, preventing them from blending
// with the body's #100e0b beneath. The global fixed layer must let
// blend modes reach through to the body.
const isolation = await page.locator('.aura-bg').first().evaluate((el) => getComputedStyle(el).isolation);
expect(isolation).not.toBe('isolate');
});
});
tests/home.spec.js
+1 -1
View File
@@ -9,7 +9,7 @@ test.describe('home', () => {
await page.screenshot({ path: 'test-results/home.png', fullPage: true }); await page.screenshot({ path: 'test-results/home.png', fullPage: true });
// Hero region must be present. // Hero region must be present.
await expect(page.locator('.home-hero')).toBeVisible(); await expect(page.locator('.homepage-hero')).toBeVisible();
// Either the grid OR the empty state must be present. // Either the grid OR the empty state must be present.
const grid = page.locator('.home-recent__grid'); const grid = page.locator('.home-recent__grid');