45 lines
2.0 KiB
Vue
45 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { PortfolioContent } from '@/content/types';
|
|
import NameParticles from './NameParticles.vue';
|
|
|
|
withDefaults(defineProps<{
|
|
identity: Readonly<PortfolioContent['identity']>;
|
|
allowMotion?: boolean;
|
|
/** Where a returning visitor left the road (client-only, after mount). */
|
|
resume?: { id: string; exit: string; label: string } | null;
|
|
}>(), { allowMotion: false, resume: null });
|
|
|
|
const emit = defineEmits<{
|
|
explore: [event: MouseEvent];
|
|
contact: [event: MouseEvent];
|
|
resume: [event: MouseEvent];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<section id="start" class="hero-journey" data-layout="hero" data-exit="01" aria-labelledby="start-heading">
|
|
<div class="hero-journey__content">
|
|
<h1 id="start-heading" class="hero-name" tabindex="-1"><span class="hero-name__text" :data-name="identity.name">{{ identity.name }}</span><NameParticles :allow-motion="allowMotion" :name="identity.name" /></h1>
|
|
<p class="hero-journey__role">{{ identity.role }}</p>
|
|
<p class="hero-journey__value">{{ identity.valueProposition }}</p>
|
|
<p class="hero-journey__availability">{{ identity.availability }}</p>
|
|
<div class="hero-journey__actions">
|
|
<a class="hero-journey__action hero-journey__action--primary" href="#contact" @click="emit('contact', $event)">Contact Me</a>
|
|
<a class="hero-journey__action" href="#selected-builds" @click="emit('explore', $event)">Explore work</a>
|
|
</div>
|
|
<!-- The visible label is CSS generated content, so the hydrated text stays
|
|
identical to the server document; the accessible name is the aria-label. -->
|
|
<a
|
|
v-if="resume"
|
|
class="hero-journey__resume"
|
|
:href="`#${resume.id}`"
|
|
:data-exit="resume.exit"
|
|
:data-label="resume.label"
|
|
:aria-label="`Resume the drive at ${resume.label}, exit ${resume.exit}`"
|
|
@click="emit('resume', $event)"
|
|
></a>
|
|
</div>
|
|
<p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
|
|
</section>
|
|
</template>
|