Refactor

Slide Deck Architecture: Modular Components, Citations & Production Pages

Extracted 33 individual slide section components from strategy and thesis narratives, created PageAsDeckWrapper layout with double-click navigation, ported citation system with popovers, and promoted reassembled pages to production index.

Team, Claude
Claude Claude
Slide-DeckComponent-ArchitectureNarrative-SectionsDouble-Click-NavigationScroll-SnapCitationsPopover

Changelog - 2025-12-27 (#1)

Slide Deck Architecture: Modular Components, Citations & Production Pages

Overview

This update introduces a modular slide deck architecture for the strategy and thesis narrative pages. Each section that was preceded by a badge and header has been extracted into its own reusable component. A new PageAsDeckWrapper layout provides double-click navigation between sections, making the pages function like a presentation deck while maintaining the flowing scroll experience.

Key deliverables:

  • 17 Strategy Section Components: Extracted from strategy/to-carve.astro
  • 16 Thesis Section Components: Extracted from thesis/to-carve.astro
  • PageAsDeckWrapper Layout: Double-click and keyboard navigation between sections
  • Production Pages: Reassembled pages promoted to index, previous index archived
  • Citation System: Popover-based citations ported to both strategy and thesis pages

Production Page Promotion

The reassembled component-based pages have been promoted to production:

Change Before After
Strategy main page strategy/index.astro (monolithic) strategy/archive.astro
Strategy production strategy/reassembled.astro strategy/index.astro
Thesis main page thesis/index.astro (monolithic) thesis/archive.astro
Thesis production thesis/reassembled.astro thesis/index.astro

The modular component-based versions are now the primary pages served at /strategy and /thesis.

Citation System with Popovers

Ported the citation system from the original pages to the modular slide components. Citations use HTML popover elements for inline source attribution.

Implementation

Citations are integrated directly into slide components using the popover pattern:

<sup>
  <a class="citation-link" popovertarget="cite-source-name">[1]</a>
</sup>
<div id="cite-source-name" popover class="citation-popover">
  <p class="citation-text">Source Name, "Title," Year</p>
  <a href="https://source-url.com" target="_blank">View Source</a>
</div>

Content Corrections & Cosmetic Improvements

Various slides received content corrections and cosmetic touch-ups:

  • T02-TrillionDollarDiseases: Updated disease cost statistics with citations
  • T03-HealthspanGap: Refined healthspan vs lifespan visualization
  • T04-USDemographics: Corrected demographic figures
  • T05-CostReality: Updated medical cost data
  • T08-DemographicStats: Added citation popovers for UN data
  • T10-LongevityEconomy: Market size corrections
  • T11-ExitPotentialHero: Improved exit path messaging
  • T12-IPOPath: Updated IPO statistics
  • T13-MAPath: Corrected M&A deal values
  • T14-MarketGrowth: Updated market growth projections
  • T15-DealStructure: Refined deal structure example
  • T16-Closing: Redesigned with card layout, smaller header, emphasized subheader

Component Extraction

Strategy Sections (17 components)

Located in src/layouts/sections/narratives/slides/strategy/:

Component Section Title Purpose
S01-WhyNowHero.astro Why Now. Why Us. Opening hero with 10× compression stat
S02-TimingWindow.astro The Timing Window Bioscience convergence (CRISPR, AI, FDA)
S03-DataAsSenseOrgan.astro Data as a Sense Organ Health as live data problem
S04-UnfairAdvantage.astro Our Unfair Advantage Trusted networks, Stanford/Cedars-Sinai
S05-DifferentiationHero.astro Our Differentiation Hero transition slide
S06-FourPillarsOverview.astro Four Pillars of Differentiation Overview grid with icons
S07-ScientificExpertise.astro Deep Scientific Expertise Pillar detail
S08-ProprietaryDealFlow.astro Proprietary Deal Flow Stanford/Cedars partnerships
S09-LongevityNetwork.astro Longevity Leader Network Greenfield, Johnson, Attia
S10-IPProtected.astro IP-Protected, Scalable Solutions Defensible platforms
S11-Team.astro Team-Enabled Advantages Team summary
S12-FundStrategyHero.astro Fund Strategy Portfolio construction hero
S13-Economics.astro LP-GP Alignment 2% / 20-25% economics
S14-StageAllocation.astro Stage Allocation 50/30/20 bar chart
S15-GeographicFocus.astro Geographic Focus 70/30 US-Europe split
S16-CheckSizes.astro Check Sizes & Follow-on Investment approach
S17-LPBenefits.astro How This Serves LPs Benefits list and closing

Thesis Sections (16 components)

Located in src/layouts/sections/narratives/slides/thesis/:

Component Section Title Purpose
T01-AgingCrisisHero.astro The Aging Crisis $1T+ cost hero
T02-TrillionDollarDiseases.astro Trillion-Dollar Diseases CVD, Diabetes, Cancer grid
T03-HealthspanGap.astro Healthspan vs Lifespan 15-year gap visualization
T04-USDemographics.astro Silver Tsunami 55M+ Americans 65+
T05-CostReality.astro Medical Inflation Structural cost drivers
T06-BiotechOpportunity.astro Biotech Can Bend the Curve Transition to opportunity
T07-GlobalAgingHero.astro The Global Aging Wave 2B people by 2050 hero
T08-DemographicStats.astro A Defining Global Trend UN demographic statistics
T09-ScienceInflection.astro Science at Inflection CRISPR, Senolytics, AI
T10-LongevityEconomy.astro The Longevity Economy $7T+ market opportunity
T11-ExitPotentialHero.astro Exit Potential Two paths to liquidity
T12-IPOPath.astro IPOs in Public Markets Biotech IPO analysis
T13-MAPath.astro Acquisitions by Big Pharma M&A as return driver
T14-MarketGrowth.astro Anti-Aging Therapeutics Market $5.7B → $34.6B growth
T15-DealStructure.astro Example Deal Structure Pharma-Senolytics model
T16-Closing.astro The Opportunity Closing arguments

PageAsDeckWrapper Layout

A new wrapper layout that enables presentation-style navigation while preserving smooth scrolling.

Location: src/layouts/PageAsDeckWrapper.astro

Features

Feature Description
Double-click Navigation Click in upper half → previous section; lower half → next section
Keyboard Navigation Arrow keys, Page Up/Down, Home/End
Section Indicator Current/total count displayed in bottom-right corner
Navigation Hints Animated hints shown on page load (auto-hide after 3s)
Scroll Snap CSS scroll-snap for clean section alignment
Boundary Awareness Visual feedback when at first/last section

Props

interface Props {
  enableScrollSnap?: boolean;     // Default: true
  showNavigationHints?: boolean;  // Default: true
  hintDuration?: number;          // Default: 3000 (ms), 0 = always show
}

Usage

<PageAsDeckWrapper enableScrollSnap={true} showNavigationHints={true}>
  <SlideComponent1 />
  <SlideComponent2 />
  <SlideComponent3 />
</PageAsDeckWrapper>

The wrapper automatically detects <section> elements within the slotted content and enables navigation between them.

Technical Implementation

Vanilla JavaScript (Not TypeScript/TSX)

The navigation script uses pure vanilla JavaScript for maximum Astro compatibility:

// Double-click handler
wrapper.addEventListener('dblclick', function(event) {
  var viewportHeight = window.innerHeight;
  var clickY = event.clientY;
  var isUpperHalf = clickY < viewportHeight / 2;

  if (isUpperHalf) {
    navigateToPrevious();
  } else {
    navigateToNext();
  }
});

Key decision: Avoided TypeScript class syntax and arrow functions in favor of vanilla JS function declarations for reliable Astro script handling.

Reveal Animation System

Each section component uses the reveal animation system from the original pages:

.reveal-item {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

Animation types:

  • data-reveal="fade-up" - Translate up 40px
  • data-reveal="slide-right" - Translate from -60px
  • data-reveal="slide-left" - Translate from +60px
  • data-reveal="scale-up" - Scale from 0.85

IntersectionObserver for Reveals

The reassembled pages include an IntersectionObserver script that triggers reveal animations:

var observer = new IntersectionObserver(
  function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var delay = parseInt(target.style.getPropertyValue('--delay') || '0', 10);
        setTimeout(function() {
          target.classList.add('revealed');
        }, delay);
      }
    });
  },
  { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
);

Bug Fixes During Development

Issue: Content Not Visible

Symptom: Scroll-snap worked but content was invisible.

Root Cause: The reveal animation script was looking for .slide-deck .reveal-item but the wrapper class was .deck-wrapper.

Fix: Updated selector to .deck-wrapper .reveal-item in both reassembled pages.

Issue: TypeScript Syntax in Script Block

Symptom: Arrow functions and type assertions not processing correctly.

Fix: Converted all script code to vanilla JavaScript:

// Before (TypeScript)
const delay = parseInt((entry.target as HTMLElement).style.getPropertyValue('--delay') || '0');

// After (Vanilla JS)
var target = entry.target;
var delay = parseInt(target.style.getPropertyValue('--delay') || '0', 10);

File Structure

src/layouts/
├── PageAsDeckWrapper.astro           # Deck navigation wrapper
└── sections/narratives/slides/
    ├── strategy/                     # 17 strategy slides
    │   ├── S01-WhyNowHero.astro
    │   ├── S02-TimingWindow.astro
    │   └── ... (S03-S17)
    └── thesis/                       # 16 thesis slides
        ├── T01-AgingCrisisHero.astro
        ├── T02-TrillionDollarDiseases.astro
        └── ... (T03-T16)

src/pages/
├── strategy/
│   ├── index.astro                   # Production page (modular components)
│   └── archive.astro                 # Previous monolithic version
└── thesis/
    ├── index.astro                   # Production page (modular components)
    └── archive.astro                 # Previous monolithic version

Future Enhancements

The modular architecture enables several future possibilities:

  1. Custom Deck Compositions: Mix and match sections from strategy and thesis
  2. Presentation Mode: Full-screen with progress bar
  3. Export to PDF: Server-side rendering of slides
  4. Slide Thumbnails: Navigation via thumbnail strip
  5. Transition Effects: Custom animations between sections

Summary

This refactor transforms the monolithic to-carve.astro files into a composable slide system and promotes the modular pages to production:

  1. 33 Reusable Slide Components: Each section is independently usable
  2. PageAsDeckWrapper: Presentation-style navigation with scroll-snap
  3. Production Promotion: Modular pages now serve as main /strategy and /thesis routes
  4. Citation Popovers: Inline source attribution with popover UI
  5. Content Corrections: Updated statistics, market data, and messaging across thesis slides
  6. Cosmetic Improvements: Card layouts, refined typography, and visual hierarchy

The slide components can now be imported individually for custom page compositions or reassembled in any order for different presentation contexts.