<script>
import { mapState } from "vuex";

export default {
  data: () => {
    return {
    };
  },
  computed: {
    ...mapState(["aboutMe"]),
  },
};
</script>

<template>
  <div class="block sm:flex sm:gap-6 mt-10 sm:mt-20">
    <!-- About profile image -->
    <div class="md:w-2/4 mb-6">
      <img src="/profile.jpg" class="rounded-lg w-96" alt="Profile pic" />
    </div>

    <!-- About details -->
    <div class="w-full sm:w-2/4 text-left">

      <p
        v-for="(bio, index) in aboutMe"
        :key="index"
        class="
          font-general-regular
          clear-left
          mb-4
          text-white
          text-xl
        "
      >
        {{ bio }}
      </p>
    </div>
  </div>
</template>
