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": "",
"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",
"label": "Address",
@@ -97,26 +76,6 @@
"maxlength": "",
"rows": 3,
"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": ""
},
{
"key": "field_677bf0e692d40",
"label": "Youtube",
"name": "youtube",
"key": "field_6a82713dd82d4",
"label": "Github",
"name": "github",
"aria-label": "",
"type": "url",
"instructions": "",
@@ -223,25 +182,7 @@
"id": ""
},
"default_value": "",
"allow_in_bindings": 1,
"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,
"allow_in_bindings": 0,
"placeholder": ""
}
]
@@ -286,6 +227,24 @@
"max_height": "",
"max_size": "",
"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,
"description": "",
"show_in_rest": 0,
"modified": 1749744328
"display_title": "",
"allow_ai_access": false,
"ai_description": "",
"modified": 1787063276
}
archive-projects.php
+1 -4
View File
@@ -14,9 +14,7 @@ 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">
<?php get_template_part( 'views/partials/aura-bg' ); ?>
<div class="aura-bg__content">
<section class="archive-projects">
<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>
@@ -51,7 +49,6 @@ if ( ! $hero_intro ) {
</div>
<?php endif; ?>
</div>
</div>
</section>
<?php
front-page.php
+12 -69
View File
@@ -1,6 +1,6 @@
<?php
/**
* Front Page Template — Portfolio 2026 home
* Front Page Template
*
* @package KsPortfolio
*/
@@ -8,77 +8,20 @@
namespace KsPortfolio;
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">
<?php if ( ! empty( $hero_cta_1['url'] ) && ! empty( $hero_cta_1['title'] ) ) : ?>
<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 echo esc_html( $hero_cta_1['title'] ); ?>
</a>
<?php endif; ?>
<?php if ( ! empty( $hero_cta_2['url'] ) && ! empty( $hero_cta_2['title'] ) ) : ?>
<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"' : ''; ?>>
<?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" />
<div class="container my-section lg:my-0 mx-auto">
<div>
<?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">
<?php
while ( $recent->have_posts() ) :
$recent->the_post();
get_template_part( 'views/components/project-card' );
endwhile;
wp_reset_postdata();
// Content block
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</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>
</div>
<?php
get_footer();
<?php get_footer(); ?>
header.php
+7 -23
View File
@@ -11,6 +11,7 @@ namespace KsPortfolio;
global $views;
$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
$showHero = in_array(
@@ -25,23 +26,6 @@ $showHero = in_array(
),
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>
@@ -60,19 +44,19 @@ if ( $isProjectTemplate ) {
<?php echo esc_html__( 'Skip to main content' ); ?>
</a>
<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start">
<?php get_template_part( 'views/components/nav-aux' ); ?>
<?php get_template_part( 'views/partials/aura-bg' ); ?>
<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">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-header__logo block">
<img class="site-header__logo-img" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> logo" />
<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 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>
<?php get_template_part( 'views/components/nav-main' ); ?>
<div class="site-header__aux">
<a class="button button--outline" href="<?php echo esc_url( home_url( '/cv/' ) ); ?>">
<?php echo esc_html__( 'Download CV', 'ks-portfolio' ); ?>
<a class="button button--outline" href="<?php echo esc_url( $linkResume ); ?>">
<?php echo esc_html__( 'Resume', 'ks-portfolio' ); ?>
</a>
</div>
</div>
lib/extras.php
+7 -3
View File
@@ -65,16 +65,20 @@ add_filter(
/**
* 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
*/
function hasPageHeader() {
global $post;
if ( get_field( 'hero_style' ) !== 'none' ) {
return false;
if ( get_field( 'hero_style' ) === 'default' ) {
return true;
}
return true;
return false;
}
/** Create the Owner role.
single-projects.php
+1 -4
View File
@@ -27,9 +27,7 @@ while ( have_posts() ) :
$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">
<?php get_template_part( 'views/partials/aura-bg' ); ?>
<div class="aura-bg__content">
<article class="single-project">
<div class="container mx-auto my-section">
<header class="single-project__hero">
@@ -160,7 +158,6 @@ while ( have_posts() ) :
</aside>
</div>
</div>
</div>
</article>
<?php
endwhile;
styles/base/colors.css
+2 -2
View File
@@ -45,9 +45,9 @@
--color-surface-container-low: #1a1b21;
--color-surface-container: #1e1f25;
--color-surface-container-high: #292a2f;
--color-surface-container-highest:#34343a;
--color-surface-container-highest: #34343a;
--color-on-surface: #e3e1e9;
--color-on-surface-variant:#c5c5d3;
--color-on-surface-variant: #c5c5d3;
--color-outline: #8f909d;
--color-outline-variant: #444651;
--color-page-base: #100e0b;
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 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 {
position: relative;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
min-height: 100vh;
isolation: isolate;
}
.aura-layer-1 {
styles/base/typography.css
+1 -3
View File
@@ -169,9 +169,7 @@ pre code {
padding: 0;
}
code {
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
}
code { @apply bg-black/30 px-0.25 py-0.5 font-mono text-black text-xs rounded-sm; }
hr {
background-color: black;
taxonomy-project-type.php
+1 -4
View File
@@ -12,9 +12,7 @@ get_header();
$queried = get_queried_object();
$term_name = $queried && ! is_wp_error( $queried ) ? $queried->name : __( 'Projects', 'ks-portfolio' );
?>
<section class="archive-projects aura-bg">
<?php get_template_part( 'views/partials/aura-bg' ); ?>
<div class="aura-bg__content">
<section class="archive-projects">
<div class="container mx-auto my-section">
<header class="archive-projects__head">
<h1 class="archive-projects__title"><?php echo esc_html( $term_name ); ?></h1>
@@ -53,7 +51,6 @@ $term_name = $queried && ! is_wp_error( $queried ) ? $queried->name : __( 'Proje
</div>
<?php endif; ?>
</div>
</div>
</section>
<?php
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 });
// 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.
const grid = page.locator('.home-recent__grid');