<script setup lang="ts">
import TheNav from '@/components/portfolio/TheNav.vue'
import HeroSection from '@/components/portfolio/HeroSection.vue'
import AboutSection from '@/components/portfolio/AboutSection.vue'
import WorkSection from '@/components/portfolio/WorkSection.vue'
import SkillsSection from '@/components/portfolio/SkillsSection.vue'
import ContactSection from '@/components/portfolio/ContactSection.vue'
import TheFooter from '@/components/portfolio/TheFooter.vue'
import { useTheme } from '@/composables/useTheme'
import { useReveal } from '@/composables/useReveal'

const { theme, toggle } = useTheme()
useReveal()
</script>

<template>
  <TheNav :theme="theme" @toggle="toggle" />
  <main>
    <HeroSection />
    <AboutSection />
    <WorkSection />
    <SkillsSection />
    <ContactSection />
  </main>
  <TheFooter />
</template>

<style scoped></style>
