<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { biography } from '@/data/biography'

const { t } = useI18n()
</script>

<template>
  <div class="biography-page">
    <h1>{{ t('biography.title') }}</h1>

    <div class="biography-section">
      <h2 class="biography-section-title">{{ t('biography.intro') }}</h2>
      <div class="biography-intro" v-html="biography.intro" />
    </div>
  </div>
</template>

<style scoped>
.biography-intro {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

.biography-intro p {
  margin-bottom: 0.8em;
}
</style>
