<script lang="ts">
  import NamePlate from "./NamePlate.svelte";
  import selfie from "$lib/zhen/cv-comps/VRNerd.jpg";
</script>

<div class="nameAndImageContainer">
  <NamePlate />
  <div
    class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center"
  >
    <img src={selfie} class="selfie-constraints object-cover" alt="Selfie" />
  </div>
</div>

<style>
  .nameAndImageContainer {
    display: grid;
    place-items: center;
  }

  .selfie-constraints {
    max-width: 100%;
  }
</style>
