255 lines
9.9 KiB
Vue
255 lines
9.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';
|
|
import ContactDestination from './ContactDestination.vue';
|
|
import DriveControls from './DriveControls.vue';
|
|
import ExperienceTimeline from './ExperienceTimeline.vue';
|
|
import InfrastructureDiagram from './InfrastructureDiagram.vue';
|
|
import JourneyHud from './JourneyHud.vue';
|
|
import PortfolioSection from './PortfolioSection.vue';
|
|
import ProjectCard from './ProjectCard.vue';
|
|
import ProjectCaseStudy from './ProjectCaseStudy.vue';
|
|
import SceneCanvas from './SceneCanvas.vue';
|
|
import SiteNavigation from './SiteNavigation.vue';
|
|
import ToolkitGrid from './ToolkitGrid.vue';
|
|
import { useAdaptiveQuality } from '@/composables/useAdaptiveQuality';
|
|
import { useAudioEngine } from '@/composables/useAudioEngine';
|
|
import { useJourneySections } from '@/composables/useJourneySections';
|
|
import { useKeyboardNavigation } from '@/composables/useKeyboardNavigation';
|
|
import { useMotionPreferences } from '@/composables/useMotionPreferences';
|
|
import type { PortfolioContent, SectionId } from '@/content/types';
|
|
import type { SceneHostState } from '@/composables/useSceneController';
|
|
import type { MotionPolicy } from '@/journey/motion-policy';
|
|
|
|
declare const __PORTFOLIO_TEST_BUILD__: boolean;
|
|
const TEST_BUILD = typeof __PORTFOLIO_TEST_BUILD__ !== 'undefined' && __PORTFOLIO_TEST_BUILD__;
|
|
|
|
const props = defineProps<{ content: Readonly<PortfolioContent> }>();
|
|
|
|
const canonicalSectionIds = [
|
|
'start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact',
|
|
] as const satisfies readonly SectionId[];
|
|
|
|
const navigationById = computed(() => new Map(props.content.navigation.map((item) => [item.id, item])));
|
|
|
|
const sectionLabel = (id: SectionId): string => {
|
|
const item = navigationById.value.get(id);
|
|
if (item === undefined) {
|
|
throw new Error(`Missing canonical navigation label: ${id}`);
|
|
}
|
|
return item.label;
|
|
};
|
|
|
|
const canonicalNavigation = computed(() => canonicalSectionIds.map((id) => ({ id, label: sectionLabel(id) })));
|
|
const motion = useMotionPreferences();
|
|
const navigation = useKeyboardNavigation(canonicalSectionIds);
|
|
const journey = useJourneySections(
|
|
canonicalSectionIds,
|
|
navigation.state,
|
|
computed(() => motion.policy.value.allowSceneRequest),
|
|
);
|
|
const audio = useAudioEngine({
|
|
intensity: computed(() => journey.value.acceleration),
|
|
volume: motion.volume,
|
|
setVolume: motion.setVolume,
|
|
});
|
|
const sceneState = shallowRef<SceneHostState>('idle');
|
|
const pageLifecycle = shallowRef<'active' | 'frozen' | 'disposed'>('active');
|
|
const controlsReady = shallowRef(false);
|
|
const adaptive = useAdaptiveQuality({
|
|
maximum: computed(() => motion.policy.value.maximumTier),
|
|
sceneState,
|
|
pageLifecycle,
|
|
});
|
|
const requestedPerformanceTier = TEST_BUILD
|
|
? new URL(window.location.href).searchParams.get('__portfolio_tier')
|
|
: null;
|
|
const pinnedPerformanceTier = requestedPerformanceTier === 'high' || requestedPerformanceTier === 'low'
|
|
? requestedPerformanceTier
|
|
: null;
|
|
const actualQuality = computed(() => pinnedPerformanceTier ?? adaptive.snapshot.value.actual);
|
|
const activeSectionLabel = computed(() => sectionLabel(journey.value.activeSectionId));
|
|
const serverDefaultPolicy: MotionPolicy = {
|
|
allowSceneRequest: false,
|
|
allowAutomaticVideo: false,
|
|
maximumTier: 'high',
|
|
reason: 'full',
|
|
};
|
|
const displayedPolicy = computed(() => controlsReady.value ? motion.policy.value : serverDefaultPolicy);
|
|
const displayedSceneState = computed(() => controlsReady.value ? sceneState.value : 'running');
|
|
let removePageListeners = (): void => {};
|
|
|
|
const sampleSceneFrame = (start: number, end: number): void => {
|
|
if (pinnedPerformanceTier === null) adaptive.sampleFrame(start, end);
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordSceneFrame(start, end);
|
|
};
|
|
|
|
const updateSceneState = (state: SceneHostState): void => {
|
|
sceneState.value = state;
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordSceneState(state);
|
|
};
|
|
|
|
watch(
|
|
() => journey.value.activeSectionId,
|
|
(id) => navigation.notePassiveSection(id),
|
|
);
|
|
|
|
watch(
|
|
() => motion.policy.value.maximumTier,
|
|
(tier, previous) => {
|
|
if (tier !== previous) {
|
|
adaptive.setMaximum(tier, controlsReady.value ? 'resize' : 'manual');
|
|
}
|
|
},
|
|
{ flush: 'sync' },
|
|
);
|
|
|
|
const setQuality = (tier: import('@/journey/motion-policy').QualityTier): void => {
|
|
motion.setMaximumQuality(tier);
|
|
adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
|
|
};
|
|
|
|
const enableMotion = (): void => {
|
|
const tier = motion.maximumQuality.value === 'static' ? 'high' : motion.maximumQuality.value;
|
|
motion.setMaximumQuality(tier);
|
|
motion.setPaused(false);
|
|
adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
|
|
};
|
|
|
|
const resumeMotion = (): void => {
|
|
motion.setPaused(false);
|
|
adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordActionMutation('resume');
|
|
};
|
|
|
|
const pauseMotion = (): void => {
|
|
motion.setPaused(true);
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordActionMutation('pause');
|
|
};
|
|
|
|
const startDrive = (): void => {
|
|
audio.startFromGesture();
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordActionMutation('start');
|
|
};
|
|
|
|
const toggleAudioMuted = (): void => {
|
|
const action = audio.muted.value ? 'unmute' : 'mute';
|
|
audio.toggleMuted();
|
|
if (TEST_BUILD) window.__PORTFOLIO_PERFORMANCE__?.recordActionMutation(action);
|
|
};
|
|
|
|
const updateAudioVolume = (value: number): void => {
|
|
audio.setVolume(value);
|
|
if (TEST_BUILD && value === 0.35) window.__PORTFOLIO_PERFORMANCE__?.recordActionMutation('volume');
|
|
};
|
|
|
|
onMounted(() => {
|
|
controlsReady.value = true;
|
|
const onPageHide = (event: PageTransitionEvent): void => {
|
|
pageLifecycle.value = event.persisted ? 'frozen' : 'disposed';
|
|
};
|
|
const onPageShow = (): void => { pageLifecycle.value = 'active'; };
|
|
window.addEventListener('pagehide', onPageHide);
|
|
window.addEventListener('pageshow', onPageShow);
|
|
removePageListeners = () => {
|
|
window.removeEventListener('pagehide', onPageHide);
|
|
window.removeEventListener('pageshow', onPageShow);
|
|
};
|
|
});
|
|
|
|
onUnmounted(() => removePageListeners());
|
|
</script>
|
|
|
|
<template>
|
|
<a class="skip-link" href="#portfolio-content">Skip to portfolio content</a>
|
|
<SceneCanvas
|
|
:journey="journey"
|
|
:policy="motion.policy.value"
|
|
:quality="actualQuality"
|
|
:scene-description="content.sceneDescription"
|
|
:sample-frame="sampleSceneFrame"
|
|
@state-change="updateSceneState"
|
|
/>
|
|
<JourneyHud
|
|
:journey="journey"
|
|
:section-label="activeSectionLabel"
|
|
/>
|
|
<header class="site-header">
|
|
<h1>{{ content.identity.name }}</h1>
|
|
<p>{{ content.identity.role }}</p>
|
|
<p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
|
|
<SiteNavigation
|
|
:items="canonicalNavigation"
|
|
:journey="journey"
|
|
:on-section-link-click="navigation.onSectionLinkClick"
|
|
/>
|
|
</header>
|
|
|
|
<main id="portfolio-content" class="portfolio-main" tabindex="-1">
|
|
<PortfolioSection id="start" :index="1" :eyebrow="sectionLabel('start').toUpperCase()" :heading="sectionLabel('start').toUpperCase()">
|
|
<p>{{ content.identity.valueProposition }}</p>
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="profile" :index="2" :eyebrow="sectionLabel('profile').toUpperCase()" :heading="sectionLabel('profile').toUpperCase()">
|
|
<p>{{ content.profile.introduction }}</p>
|
|
<dl>
|
|
<template v-for="fact in content.profile.screeningFacts" :key="fact.label">
|
|
<dt>{{ fact.label }}</dt>
|
|
<dd>{{ fact.value }}</dd>
|
|
</template>
|
|
</dl>
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="experience" :index="3" :eyebrow="sectionLabel('experience').toUpperCase()" :heading="sectionLabel('experience').toUpperCase()">
|
|
<ExperienceTimeline :experience="content.experience" :systems-operations="content.systemsOperations" />
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="infrastructure" :index="4" :eyebrow="sectionLabel('infrastructure').toUpperCase()" :heading="sectionLabel('infrastructure').toUpperCase()">
|
|
<InfrastructureDiagram :infrastructure="content.infrastructure" />
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="selected-builds" :index="5" :eyebrow="sectionLabel('selected-builds').toUpperCase()" :heading="sectionLabel('selected-builds').toUpperCase()">
|
|
<ProjectCaseStudy
|
|
v-for="project in content.projects.selected"
|
|
:key="project.id"
|
|
:project="project"
|
|
:allow-automatic-video="motion.policy.value.allowAutomaticVideo"
|
|
/>
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="additional-work" :index="6" :eyebrow="sectionLabel('additional-work').toUpperCase()" :heading="sectionLabel('additional-work').toUpperCase()">
|
|
<ProjectCard
|
|
v-for="project in content.projects.additional"
|
|
:key="project.id"
|
|
:project="project"
|
|
:allow-automatic-video="motion.policy.value.allowAutomaticVideo"
|
|
/>
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="toolkit" :index="7" :eyebrow="sectionLabel('toolkit').toUpperCase()" :heading="sectionLabel('toolkit').toUpperCase()">
|
|
<ToolkitGrid :groups="content.toolkit" />
|
|
</PortfolioSection>
|
|
|
|
<PortfolioSection id="contact" :index="8" :eyebrow="sectionLabel('contact').toUpperCase()" :heading="sectionLabel('contact').toUpperCase()">
|
|
<footer>
|
|
<ContactDestination :contact="content.contact" :identity="content.identity" />
|
|
</footer>
|
|
</PortfolioSection>
|
|
</main>
|
|
<DriveControls
|
|
:policy="displayedPolicy"
|
|
:maximum-quality="controlsReady ? motion.maximumQuality.value : 'high'"
|
|
:scene-status="displayedSceneState"
|
|
:audio-state="audio.state.value"
|
|
:audio-muted="audio.muted.value"
|
|
:audio-volume="controlsReady ? motion.volume.value : 0.4"
|
|
@pause="pauseMotion"
|
|
@resume="resumeMotion"
|
|
@enable="enableMotion"
|
|
@quality-change="setQuality"
|
|
@audio-start="startDrive"
|
|
@audio-resume="audio.resumeFromGesture"
|
|
@audio-mute-toggle="toggleAudioMuted"
|
|
@audio-volume-change="updateAudioVolume"
|
|
/>
|
|
</template>
|