Simple profile card written with Geist UI React. License: https://chand1012.mit-license.org/

ProfileCard.jsx

import React from "react";
import { Card, Grid, Link, Text, Avatar } from "@geist-ui/react";

const ProfileCard = ({
  displayName,
  username,
  imageUrl,
  description,
  profileLink,
  size,
}) => {
  return (
    <Card hoverable>
      <Grid.Container justify="center">
        <Grid>
          <Avatar height={size + "px"} width={size + "px"} src={imageUrl} />
        </Grid>
      </Grid.Container>
      <Grid.Container justify="center">
        <Grid>
          <Text b>{displayName}</Text>
        </Grid>
      </Grid.Container>
      <Grid.Container justify="center">
        <Grid>
          <Text small>{description}</Text>
        </Grid>
      </Grid.Container>
      <Card.Footer>
        <Grid.Container justify="center">
          <Grid>
            <Link target="_blank" block href={profileLink}>
              @{username}
            </Link>
          </Grid>
        </Grid.Container>
      </Card.Footer>
    </Card>
  );
};

export default ProfileCard;