Portfolio Hero with Avatar
<!-- wp:group {"metadata":{"name":"Hero"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"1.6rem"}},"layout":{"type":"constrained","contentSize":"800px"}} -->
<div class="wp-block-group alignwide"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","align":"center","style":{"border":{"radius":"999px"}}} -->
<figure class="wp-block-image aligncenter size-large has-custom-border"><img src="https://blocklayouts.com/wp-content/uploads/2024/05/user-1.png" alt="" style="border-radius:999px;aspect-ratio:1;object-fit:cover" /></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"lineHeight":"1.2","fontStyle":"normal","fontWeight":"700","fontSize":"3rem"}}} -->
<h1 class="wp-block-heading has-text-align-center" style="font-size:3rem;font-style:normal;font-weight:700;line-height:1.2">I'm <span style="color: #4f46e5">John Doe</span>, and I craft visual stories with a creative touch.</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#6b7280"}}},"typography":{"lineHeight":1.4},"color":{"text":"#6b7280"}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#6b7280;line-height:1.4">I'm a UI/UX designer with a love for simplicity and a knack for solving complex design challenges. Whether creating intuitive interfaces or designing seamless user journeys, I thrive on bringing ideas to life through clean, user-centric design.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"align":"wide","style":{"spacing":{"blockGap":"0.8rem"}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"style":{"color":{"background":"#4f46e5"},"spacing":{"padding":{"left":"1.6rem","right":"1.6rem","top":"0.9rem","bottom":"0.9rem"}},"typography":{"fontSize":"16px"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#4f46e5;padding-top:0.9rem;padding-right:1.6rem;padding-bottom:0.9rem;padding-left:1.6rem">Get In Touch</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#eef2ff","text":"#4f46e5"},"spacing":{"padding":{"left":"1.6rem","right":"1.6rem","top":"0.9rem","bottom":"0.9rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#4f46e5"}}}}} -->
<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="color:#4f46e5;background-color:#eef2ff;padding-top:0.9rem;padding-right:1.6rem;padding-bottom:0.9rem;padding-left:1.6rem">Download CV</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
Info:
This block pattern is fully customizable, responsive, and easy to use. Simply copy and paste it into your website for seamless integration. It’s designed to enhance user engagement and improve overall user experience.