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

feat(home): rebuild front-page template to match Carbon Blue mockup

Browse Source
This commit is contained in:
Keith Solomon
2026-08-16 13:00:32 -05:00
parent 353030d2dc
commit 664e227f15
2 changed files with 119 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front-page.php
+72 -16
View File
@@ -1,27 +1,83 @@
<?php
/**
* Front Page Template
* Front Page Template — Portfolio 2026 home
*
* @package SoloFrameEvo
* @package KsPortfolio
*/
namespace SoloFrameEvo;
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' ); // array( url, title, target )
$hero_cta_2 = get_field( 'homepage_hero_cta_2' );
?>
<section class="home-hero 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="container my-section lg:my-0 mx-auto">
<div>
<?php
// Content block
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
<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>
</div>
</section>
<?php get_footer(); ?>
<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">
<?php
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
get_template_part( 'views/partials/aura-bg' );
get_footer();
styles/components/project-card.css
+47
View File
@@ -299,3 +299,50 @@
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.home-hero { min-height: 60vh; display: flex; align-items: center; padding: 4rem 0; }
.home-hero__inner { max-width: 50rem; }
.home-hero__heading {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.1;
color: var(--color-on-surface, #e3e1e9);
margin: 0 0 1rem;
}
.home-hero__intro {
color: var(--color-on-surface-variant, #c5c5d3);
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.6;
max-width: 50ch;
margin: 0 0 1.5rem;
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-recent__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.home-recent__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.75rem;
color: var(--color-on-surface, #e3e1e9);
margin: 0;
}
.home-recent__view-all {
color: var(--color-primary, #b6c4ff);
font-weight: 600;
text-decoration: none;
}
.home-recent__view-all:hover { text-decoration: underline; }
.home-recent__divider {
border: 0;
border-top: 1px solid var(--color-outline-variant, #444651);
margin: 0 0 1.5rem;
}
.home-recent__empty { text-align: center; padding: 4rem 1rem; color: var(--color-on-surface-variant, #c5c5d3); }