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)

• Transitions: Uses height and opacity transitions for a smooth expansion.
• 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).

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.