Portfolio Expansion System

This system uses a combination of Eleventy data, Nunjucks templating, vanilla CSS, and minimal JavaScript to create a performant hover-expand interaction for the portfolio list.

Data Model

All portfolio data is stored in _data/portfolio.json.

{
  "name": "Ansa Biotechnologies",
  "url": "https://www.ansabio.com/",
  "detail": "Enzymatic DNA synthesis that eliminates the length and accuracy ceiling of phosphoramidite chemistry.",
  "press": {
    "label": "press",
    "url": "https://www.biospace.com/article/releases/ansa-biotechnologies-closes-oversubscribed-68-million-series-a-financing-to-power-the-next-era-of-dna-enabled-industries/?s=80"
  },
  "acquired": true,
  "tba": true
}

• detail: The description that appears on expansion. If missing, the item won't be expandable.
• acquired: Adds an "(Acquired)" badge.
• tba: Adds a "(TBA)" badge and mutes the styling.

Templating

The list is rendered in index.html using a Nunjucks loop. Each item with a detail property receives:

• class="portfolio-item"
• aria-expanded="false"
• A hidden .portfolio-detail div.

The loop also generates the Structured Data (JSON-LD) block at the bottom of the page, ensuring the SEO metadata is always in sync with the visible list.

CSS Implementation (css/styles.css)

• Accessibility: Styles are pegged to aria-expanded="true" and aria-hidden="false".
• Stable Rotation: The chevron symbol is placed in a fixed-size 1em square flexbox to ensure rotate(90deg) doesn't cause visual drift.
• Performance: Avoids will-change on all elements to conserve GPU memory, as the number of items is small (~15).

Collapse Animation: The 0fr Grid Pattern

The expand/collapse animation uses grid-template-rows: 0fr → 1fr, which is the modern way to animate content to/from an unknown intrinsic height. The structure is:

.portfolio-detail          ← grid container, transitions grid-template-rows
  .portfolio-detail-text   ← grid child, overflow: hidden

How it works: When grid-template-rows is 0fr, the row track collapses to the minimum size of its children. Because .portfolio-detail-text has overflow: hidden, its automatic minimum size resolves to 0 (per CSS Grid spec), so the track can fully collapse.

Critical constraint: The grid child (.portfolio-detail-text) must have zero box-model contribution — no padding, no margin, no border — in its collapsed state. Any of these would create a non-zero minimum height that the grid track cannot shrink below, causing the list item to be taller than items without a detail section.

This is why padding-top is set to 0 by default on .portfolio-detail-text and only applied when .is-open is active:

.portfolio-detail-text {
  overflow: hidden;    /* allows grid track to collapse to 0 */
  padding-top: 0;      /* no box-model contribution when collapsed */
}

.portfolio-detail.is-open .portfolio-detail-text {
  padding-top: 0.3rem; /* spacing restored when expanded */
}

If you add padding, margin, or border to .portfolio-detail-text, always guard it behind .is-open. Otherwise the collapsed detail will leak height and break the vertical rhythm of the list.

JavaScript Interaction (js/portfolio.js)

The interaction is split into two modes:

1. Desktop (Hover)

• Uses mouseenter and mouseleave triggers.
• Measures the "true" expanded height via offsetHeight once at initialization and caches it in a Map.
• This avoids layout thrashing by not re-measuring during the animation.

2. Mobile / Touch (Full-Row Tap)

• Automatic Injection: Only on (hover: none) devices, a monospace chevron (▶) is injected via JS.
• Broad Tap Target: The entire <li> row (number + chevron + text) acts as the toggle trigger for expansion.
• Clickable Prefix: To ensure the list number (index) is part of the tap target, list-style-position: inside is applied to #portfolio-list on mobile.
• Visual Chevron: The chevron button has tabindex="-1" to prevent it from becoming a redundant focus stop.
• Link Exclusion: Tapping on an <a> tag within the row still navigates normally; the expansion toggle only triggers if the tap occurs on the number, chevron, or non-link text.
• State management: Tapping one item automatically closes any other open items to keep the mobile view compact.

Performance Notes

• Zero Dependencies: No libraries like pretext or esbuild are required.
• Pixel-Perfect: Uses browser-reported heights for exact alignment.
• Debounced Resize: Recalculates heights on window resize with a 150ms debounce.