How can get author box similar to a website

Hi there,

For the specific things:

To make the author image rounded and be placed on the left, add this css:

.author .page-header .avatar {
    width: 100px;
    border-radius: 50%;
    float: left;
}

.author .page-header .page-title{
    display:block;
}

To insert the socials, you can hook in your icons with a Hook Element or a Block Element using generate_after_archive_title hook.