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 -->
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.