159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
import { ChevronDown } from 'lucide-vue-next'
|
|
import { Button } from '@nychthemeron/library'
|
|
|
|
import LaurelSpinner from '@/components/design/LaurelSpinner.vue'
|
|
import LaurelDivider from '@/components/design/LaurelDivider.vue'
|
|
|
|
import { useTypewriter } from '@/composables/useTypewriter'
|
|
import { scrollToSection } from '@/composables/scrollToSection'
|
|
|
|
import type { ComponentProps } from '@/data/portfolio'
|
|
|
|
const { portfolioData } = defineProps<ComponentProps>()
|
|
|
|
let { displayed, done } = { displayed: ref(''), done: ref(false) }
|
|
const visible = ref(true)
|
|
|
|
onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
|
|
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
|
|
|
|
const onScroll = () => {
|
|
visible.value = window.scrollY < window.innerHeight * 0.6
|
|
}
|
|
|
|
watch(
|
|
() => portfolioData,
|
|
(data) => {
|
|
if (data) {
|
|
const typeWriter = useTypewriter(data.tagline)
|
|
displayed = typeWriter.displayed
|
|
done = typeWriter.done
|
|
}
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="port-hero">
|
|
<div class="port-hero-watermark" aria-hidden="true">
|
|
<LaurelSpinner :size="580" :spinning="false" />
|
|
</div>
|
|
<div class="port-hero-content">
|
|
<div class="port-hero-status">{{ portfolioData?.status }}</div>
|
|
<h1 class="port-hero-name">{{ portfolioData?.name }}</h1>
|
|
<div class="port-hero-rule" />
|
|
<p class="port-hero-role">{{ portfolioData?.role }}</p>
|
|
<p class="port-hero-tagline">
|
|
{{ displayed
|
|
}}<span class="port-hero-cursor" :class="{ 'port-hero-cursor--done': done }">|</span>
|
|
</p>
|
|
<div class="port-hero-actions">
|
|
<Button @click="scrollToSection('work')">View Work</Button>
|
|
<Button variant="secondary" @click="scrollToSection('contact')">Get in Touch</Button>
|
|
</div>
|
|
<LaurelDivider />
|
|
</div>
|
|
<div class="port-hero-chevron" :class="{ 'port-hero-chevron--visible': visible }">
|
|
<ChevronDown :size="18" style="color: var(--text-dim)" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.port-hero-watermark {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
color: var(--primary);
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.port-hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 660px;
|
|
width: 100%;
|
|
}
|
|
|
|
.port-hero-status {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--primary);
|
|
margin-bottom: 2rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.port-hero-name {
|
|
font-family: var(--font-serif);
|
|
font-weight: 700;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-high);
|
|
line-height: 1.05;
|
|
margin: 0 0 0.8rem;
|
|
font-size: clamp(2.5rem, 8vw, 5.5rem);
|
|
text-shadow: 0 0 80px rgba(212, 178, 120, 0.2);
|
|
}
|
|
|
|
.port-hero-rule {
|
|
height: 1px;
|
|
background: var(--primary);
|
|
max-width: 180px;
|
|
margin: 0 auto 1.4rem;
|
|
}
|
|
|
|
.port-hero-role {
|
|
font-family: var(--font-sans);
|
|
font-size: 1.05rem;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 0.9rem;
|
|
}
|
|
|
|
.port-hero-tagline {
|
|
font-family: var(--font-sans);
|
|
font-size: 1rem;
|
|
color: var(--text-dim);
|
|
max-width: 460px;
|
|
margin: 0 auto 2.8rem;
|
|
line-height: 1.7;
|
|
text-wrap: pretty;
|
|
min-height: 1.7rem;
|
|
}
|
|
|
|
.port-hero-cursor {
|
|
color: var(--primary);
|
|
animation: blink 0.75s step-end infinite;
|
|
}
|
|
|
|
.port-hero-cursor--done {
|
|
opacity: 0;
|
|
animation: none;
|
|
}
|
|
|
|
.port-hero-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.port-hero-chevron {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
opacity: 0;
|
|
animation: bob 2.5s ease-in-out infinite;
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
|
|
.port-hero-chevron--visible {
|
|
opacity: 0.4 !important;
|
|
}
|
|
</style>
|