get_avatar() Returning a Number

your code will pretty much produce errors like missing ; at the end

this code for example

<?php esc_url( the_author_meta( 'user_url' ) ) ?>

the correct code should be

<?php echo esc_url( get_the_author_meta( 'user_url' ) ); ?>

or

<?php the_author_meta( 'user_url' ); ?>

Why does the author ID number appear?

The number that appears above is the user ID number, why does it appear? Because it is used in the string ($) :

<?php $author_id = the_author_meta( 'ID' ); ?>

If you want to determine the author ID in a string ($) then use get_ for example like this:

<?php $author_id = get_the_author_meta( 'ID' ); ?>

Please note that the above code only generates the user id number.

no echo for avatar function call

<?php $author_id = the_author_meta( 'ID' ); ?>
<?php esc_html( get_avatar( $author_id, 96 ) ); ?>

the code for calling the avatar function should be

<?php $author_id = get_the_author_meta( 'ID' ); ?>
<?php echo get_avatar( $author_id, 96 ); ?>

This will make the avatar visible.

esc_html() is only used in certain codes, for example strings generated from user-inputted Options

In your case, calling an avatar does not require using esc_html()

WordPress functions, with the get_ prefix or directly the_ prefix, to call the get_ function, you must use echo, while the_ is generally without echo, that’s why when you put the_author_meta(‘ID); in the string it will be triggered immediately.

example get_

<a class="button" href="<?php echo esc_url( get_the_author_meta( 'user_url' ) ); ?>">Website &#8250;</a>

example the_

<a class="button" href="<?php the_author_meta( 'user_url' ); ?>">Website &#8250;</a>

Code result

<div class="contributor-card">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 96 ); ?>
    <h1><?php esc_html( the_author_meta( 'display_name' ) ); ?></h1>
    <p><?php esc_html( the_author_meta( 'description' ) ); ?></p>
    <a class="button" href="<?php echo esc_url( get_the_author_meta( 'user_url' ) ) ?>">Website &#8250;</a>
</div>

or if you want to use the author ID for a specific purpose

<?php $author_id = get_the_author_meta( 'ID' ); ?>
<?php esc_html( get_avatar( $author_id, 96 ) ); ?>
    <h1><?php esc_html( the_author_meta( 'display_name' ) ); ?></h1>
    <p><?php esc_html( the_author_meta( 'description' ) ); ?></p>
    <a class="button" href="<?php echo esc_url( get_the_author_meta( 'user_url' ) ); ?>">Website &#8250;</a>
</div>