How can I create a custom user profile page without overlapping the registration and login pages? I'd like to create a custom user profile page, but if I use /user/% path then it will also overlap /user/registration, /user/login and so on...

Is there any ways to avoid it?
One approach is to create a custom template file for the user.

add a bit of code to your .theme file:

MYTHEME.theme:

function MYTHEME_theme_suggestions_user(&amp;$suggestions, $variables, $hook) {

  // Define the view mode.
  $mode = $variables['elements']['#view_mode'];
  // Create a theme hook suggestion which has the view mode name in it.
  $suggestions[] = 'user__' . $mode;

}


The above tells Drupal to look for template files that fit the new naming conventions.

Then create a twig template file in MYTHEME/templates:

user--full.html.twig

&lt;div class="user-full-wrapper"&gt;

    {% if content.user_picture | render %}
          {{ content.user_picture }}
    {% endif %}

    {% if content.field_name | render %}
          &lt;p&gt;{{ content.field_name }}&lt;/p&gt;
    {% endif %}

&lt;/div&gt;


The above html is just an example.

Now you have unique markup for just the user profile page in Drupal. From there it's just a matter of choosing fields, and adding styling.

Make sure to clear cache so Drupal will register your new twig file!