Dark portfolio hero section
<!-- wp:group {"metadata":{"name":"Hero"},"align":"full","style":{"color":{"background":"#080808"},"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#080808"><!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"2rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontSize":"14px"},"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}}}} -->
<p class="has-text-color has-link-color" style="color:#ffffff;font-size:14px;text-transform:uppercase">Hi! Welcome to my portfolio</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","fontSize":"3.5rem"},"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}}}} -->
<h2 class="wp-block-heading has-text-color has-link-color" style="color:#ffffff;font-size:3.5rem;font-style:normal;font-weight:400">I'm Connie, Software Developer from California</h2>
<!-- /wp:heading -->
<!-- wp:buttons {"align":"wide","style":{"spacing":{"blockGap":"1.1rem"}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"style":{"color":{"background":"#ffffff","text":"#000000"},"border":{"radius":"6px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#000000"}}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px"><a class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="border-radius:6px;color:#000000;background-color:#ffffff;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Contact me</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#ffffff00","text":"#fefeff"},"border":{"radius":"6px","color":"#ffffff","width":"1px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#fefeff"}}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px"><a class="wp-block-button__link has-text-color has-background has-link-color has-border-color wp-element-button" style="border-color:#ffffff;border-width:1px;border-radius:6px;color:#fefeff;background-color:#ffffff00;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Explore Portfolio →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"stretch"} -->
<div class="wp-block-column is-vertically-aligned-stretch"><!-- wp:image {"id":1461,"width":"430px","align":"center","style":{"color":[]}} -->
<figure class="wp-block-image aligncenter is-resized"><img src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="wp-image-1461" style="width:430px" /></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Key Features:
Compatibility: Works seamlessly with any Gutenberg-supported WordPress theme.
Easy to Use: Copy the pattern, paste it into the WordPress editor, and you’re good to go.
Customizable: Fully editable blocks to match your branding and style.
Responsive Design: Looks great on desktop, tablet, and mobile devices.