At A Glance 02

File: src/blocks/at-a-glance/AtAGlance02.astro

Scroll-synced list with sticky media. As the page scrolls, the nearest list item becomes active and updates the media panel.

Mobile: sticky media is hidden; each item shows its own image.

Config (blocks.ts → atAGlanceScroller)

atAGlanceScroller: {
    define: "alphabetical",
    width: "wide",
    imageBleed: false,
    imagePosition: "left",
    heading: "How it works",
    subheading:
      "Scroll through each capability — the preview stays pinned while the active item updates as you move down the list.",
    stickyTop: 150,
    activeTrigger: 60, // viewport height % where the active item switches (0–100)
    items: [
      {
        image: photos.interior,
        imageAlt: "Developer workspace with laptop",
        meta: "Core skill",
        title: "Frontend Development",
        description:
          "Pixel-perfect implementations with Astro, React, and Tailwind. Performance budgets, accessibility, and responsive design baked in.",
      },
      {
        image: photos.karla,
        imageAlt: "Marketing site preview",
        meta: "Deliverable",
        title: "Marketing Sites",
        description:
          "High-converting landing pages and multi-page marketing sites. SEO-ready, CMS-connected, and easy for your team to update.",
      },
      {
        image: photos.edgar,
        imageAlt: "Headless CMS workflow",
        meta: "Integration",
        title: "Headless CMS",
        description:
          "Sanity, Contentful, or Markdown — structured content models, preview workflows, and editor-friendly Studio setups.",
      },
      {
        image: photos.interior,
        imageAlt: "Performance and SEO metrics",
        meta: "Outcome",
        title: "Performance & SEO",
        description:
          "Core Web Vitals optimization, semantic markup, structured data, and sitemaps. Sites that rank and load fast.",
      },
      {
        image: photos.edgar,
        imageAlt: "Headless CMS workflow",
        meta: "Integration",
        title: "Headless CMS",
        description:
          "Sanity, Contentful, or Markdown — structured content models, preview workflows, and editor-friendly Studio setups.",
      },
      {
        image: photos.interior,
        imageAlt: "Performance and SEO metrics",
        meta: "Outcome",
        title: "Performance & SEO",
        description:
          "Core Web Vitals optimization, semantic markup, structured data, and sitemaps. Sites that rank and load fast.",
      },
    ],
  },

Add to a page

---
import AtAGlance02 from "@/blocks/at-a-glance/AtAGlance02.astro";
---

<AtAGlance02 />

Props override matching keys from config:

<AtAGlance02
  width="wide"
  imagePosition="left"
  heading="Custom headline"
/>

Props

Also include: AtAGlanceLayout.astro. Returns null if items is empty.

← At a glance versions · Images · Blocks overview