At A Glance 01

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

Tabbed “at a glance” list with a sticky media panel. Items activate on click or autoplay.

Mobile: the shared sticky media column is hidden. Each item shows its image under the text when that item is selected.

Config (blocks.ts → atAGlance)

atAGlance: {
    define: "numerical",
    width: "wide",
    imageBleed: true,
    imagePosition: "right",
    autoPlay: true,
    interval: 3000,
    heading: "At A Glance",
    subheading:
      "End-to-end web development — from first wireframe to production deploy. I partner with designers, agencies, and founders who value quality over shortcuts.",
    stickyTop: 150,
    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.",
      },
    ],
  },

Add to a page

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

<AtAGlance01 />

Props override matching keys from config:

<AtAGlance01
  width="wide"
  imagePosition="left"
  autoPlay={false}
/>

Props

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

Use photos.* for item images — see Images.

← At a glance versions · Images · Blocks overview