<?php
/**
 * Title: Portfolio Header
 * Slug: technicalistic/portfolio-header
 * Categories: technicalistic-portfolio, technicalistic
 * Description: Portfolio page header with profile image.
 */
?>
<!-- wp:group {"align":"full","className":"portfolio-header","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"constrained","contentSize":"80rem"}} -->
<div class="wp-block-group alignfull portfolio-header" style="padding-top:4rem;padding-bottom:4rem">

	<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"2rem"}}}} -->
	<div class="wp-block-columns">

		<!-- wp:column {"width":"66%"} -->
		<div class="wp-block-column" style="flex-basis:66%">

			<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"3rem","fontWeight":"700"}},"textColor":"white"} -->
			<h1 class="wp-block-heading has-white-color has-text-color" style="font-size:3rem;font-weight:700"><?php esc_html_e( 'Portfolio', 'technicalistic' ); ?></h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.25rem"}},"textColor":"slate-400"} -->
			<p class="has-slate-400-color has-text-color" style="font-size:1.25rem"><?php esc_html_e( 'A curated selection of projects showcasing creative work, professional expertise, and measurable results.', 'technicalistic' ); ?></p>
			<!-- /wp:paragraph -->

		</div>
		<!-- /wp:column -->

		<!-- wp:column {"width":"34%","verticalAlignment":"center"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:34%">

			<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
			<div class="wp-block-group">

				<!-- wp:image {"className":"profile-img-wrap","sizeSlug":"medium"} -->
				<figure class="wp-block-image size-medium profile-img-wrap"><img src="<?php echo esc_url( technicalistic_get_theme_image( 'technicalistic_portfolio_image', 'technicalist-example-headshot-sm.png' ) ); ?>" alt="<?php esc_attr_e( 'Profile photo', 'technicalistic' ); ?>"/></figure>
				<!-- /wp:image -->

				<?php if ( get_theme_mod( 'technicalistic_show_portfolio_connect', true ) ) : ?>
				<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.95rem","fontWeight":"600"}},"textColor":"cyan-400"} -->
				<p class="has-cyan-400-color has-text-color" style="font-size:0.95rem;font-weight:600"><a href="<?php echo esc_url( get_theme_mod( 'technicalistic_portfolio_connect_url', '/contact/' ) ); ?>" style="color:inherit;text-decoration:none;"><?php esc_html_e( 'Connect', 'technicalistic' ); ?> &#8594;</a></p>
				<!-- /wp:paragraph -->
				<?php endif; ?>

			</div>
			<!-- /wp:group -->

		</div>
		<!-- /wp:column -->

	</div>
	<!-- /wp:columns -->

</div>
<!-- /wp:group -->
