feat: render semantic portfolio document

src/components/AppShell.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import ContactDestination from './ContactDestination.vue';
+import ExperienceTimeline from './ExperienceTimeline.vue';
+import InfrastructureDiagram from './InfrastructureDiagram.vue';
+import PortfolioSection from './PortfolioSection.vue';
+import ProjectCard from './ProjectCard.vue';
+import ProjectCaseStudy from './ProjectCaseStudy.vue';
+import SiteNavigation from './SiteNavigation.vue';
+import ToolkitGrid from './ToolkitGrid.vue';
+import type { PortfolioContent } from '@/content/types';
+
+defineProps<{ content: Readonly<PortfolioContent> }>();
+</script>
+
+<template>
+  <a class="skip-link" href="#portfolio-content">Skip to portfolio content</a>
+  <header>
+    <h1>{{ content.identity.name }}</h1>
+    <p>{{ content.identity.role }}</p>
+    <SiteNavigation :items="content.navigation" />
+  </header>
+
+  <main id="portfolio-content">
+    <PortfolioSection id="start" :index="1" :eyebrow="content.navigation[0]!.label.toUpperCase()" :heading="content.navigation[0]!.label.toUpperCase()">
+      <p>{{ content.identity.valueProposition }}</p>
+    </PortfolioSection>
+
+    <PortfolioSection id="profile" :index="2" :eyebrow="content.navigation[1]!.label.toUpperCase()" :heading="content.navigation[1]!.label.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="content.navigation[2]!.label.toUpperCase()" :heading="content.navigation[2]!.label.toUpperCase()">
+      <ExperienceTimeline :experience="content.experience" :systems-operations="content.systemsOperations" />
+    </PortfolioSection>
+
+    <PortfolioSection id="infrastructure" :index="4" :eyebrow="content.navigation[3]!.label.toUpperCase()" :heading="content.navigation[3]!.label.toUpperCase()">
+      <InfrastructureDiagram :infrastructure="content.infrastructure" />
+    </PortfolioSection>
+
+    <PortfolioSection id="selected-builds" :index="5" :eyebrow="content.navigation[4]!.label.toUpperCase()" :heading="content.navigation[4]!.label.toUpperCase()">
+      <ProjectCaseStudy v-for="project in content.projects.selected" :key="project.id" :project="project" />
+    </PortfolioSection>
+
+    <PortfolioSection id="additional-work" :index="6" :eyebrow="content.navigation[5]!.label.toUpperCase()" :heading="content.navigation[5]!.label.toUpperCase()">
+      <ProjectCard v-for="project in content.projects.additional" :key="project.id" :project="project" />
+    </PortfolioSection>
+
+    <PortfolioSection id="toolkit" :index="7" :eyebrow="content.navigation[6]!.label.toUpperCase()" :heading="content.navigation[6]!.label.toUpperCase()">
+      <ToolkitGrid :groups="content.toolkit" />
+    </PortfolioSection>
+
+    <PortfolioSection id="contact" :index="8" :eyebrow="content.navigation[7]!.label.toUpperCase()" :heading="content.navigation[7]!.label.toUpperCase()">
+      <footer>
+        <ContactDestination :contact="content.contact" :identity="content.identity" />
+      </footer>
+    </PortfolioSection>
+  </main>
+</template>