<template>
  <div class="about-container">
    <section class="about-section">
      <h1 class="about-title">{{ content.about.title }}</h1>
      <div class="about-content">
        <p>{{ content.about.description }}</p>
      </div>
    </section>

    <section class="experience-section">
      <h2 class="experience-title">{{ content.about.experiences.title }}</h2>
      <div class="timeline">
        <AboutCard v-for="experience in experiences" :key="experience.id" :experience="experience"/>
      </div>
    </section>
  </div>
</template>

<script setup>
import { content } from '~/config/content'
import { experiences } from '~/config/experience';

definePageMeta({
  layout: 'default'
})
</script>

<style scoped>
@import '~/assets/css/pages/about';
</style>