Minimal About Me

[onuro]

Category: About Tag: Pattern Pattern Meta: is_web

Screenshot:

Markup:

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"250px"} -->
<div class="wp-block-column" style="flex-basis:250px"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:600;text-transform:uppercase">About Me</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"layout":{"type":"constrained","justifyContent":"left","contentSize":"45%"}} -->
<div class="wp-block-column"><!-- wp:image {"id":9108,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/avatar.jpg?w=500" alt="" class="wp-image-9108"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"1.2"}}} -->
<h2 class="wp-block-heading" style="font-style:normal;font-weight:700;line-height:1.2">Hi, My name is Alice. I am a music composer based in Cape Town</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I love what I do. I’m a detail oriented person and my work focuses on precision, usability and simplicity.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=9101&preview=true

@iamtakashi @alaczek

[iamtakashi]

It needs more work on this pattern.

• There must be a better image for the subject. It's not working well. The background, the lighting, and the angle the subject is looking at don't work with this concept.
• I'm not sure the layout. The space between the image and the text on the right feels off.
• Missing period at the heading. Does the M for "My name" need to be uppercase?
• The body text doesn't make sense with what the heading says.
• No thoughts on the category, the tag and the pattern meta are missing.

[onuro]

I'm not sure the layout. The space between the image and the text on the right feels off.

I've thought of this pattern as a complementary one to other patterns like big covers, and that may be the reason why it didn't make sense at first. What do you think about adding a cover to this to make it clearer?

Something like this:

[iamtakashi]

Thanks for adding context. Yes, a pattern can look sometime strange without context.

I'm still not sure about it, though. I don't get the space between the image and the text column with the size of the image. If you have a design reference that you were inspired by, let me know.