<div class="col-sm-12">
      <header>
        <h2> My Profile </h2>
      </header>
      <div class="row">
        <div class="col-sm-8">
           <h4>About Me</h4>
           <ul class="profile-list">
              <li> Email:&nbsp;&nbsp;{{ user.mail.value }}  </li>
              <li> Name:&nbsp;&nbsp;{{ user.name.value }}  </li>
           </ul>
        </div>
      </div>
</div>

function mymodule_entity_base_field_info_alter(&$fields, $entity_type) {
  if ($entity_type->id() == 'user') {
    if (isset($fields['mail'])) {
      $fields['mail']->setDisplayConfigurable('view', TRUE);
    }
  }
}

<article{{ attributes.addClass('profile') }}>
  {% if content %}
    <div class="field field--name-email field--label-above">
        <div class="field__label">{% trans %}Email{% endtrans %}</div>
        <div class="field__item"><a href="mailto:{{ user.mail.value }}">{{ user.mail.value }}</a></div>
    </div>
    {{- content -}}
  {% endif %}
</article>