Projects and lists

Altair keeps repeating content in content collections: one file per project, and one YAML file per list. Each entry is checked against the rules in src/content.config.ts, so a missing field gives you a clear error instead of a broken page.

Projects

Each project is a Markdown file in src/content/projects/. The file name doesn’t appear anywhere, so call it whatever helps you, such as ledger.md.

---
title: Ledger
summary: A finance dashboard that turned a 40-tab spreadsheet into one screen accountants enjoy opening.
role: Product design, React
year: "2025"
cover: ../../assets/work/ledger.svg
tone: "#e8f0e4"
url: https://example.com/ledger
order: 1
---

Field	Required	What it does
title	Yes	Project name.
summary	Yes	One or two sentences under the title.
role	Yes	What you did, shown with the arrow.
year	Yes	Shown next to the title. Keep the quotes so it stays text.
cover	Yes	Path to the cover image, relative to the Markdown file.
tone	No	Background color behind the cover. Defaults to a warm grey.
url	No	Where the card links: a live site, a case study or a Dribbble shot.
order	No	Lower numbers come first. Defaults to 99.
draft	No	true hides the project.

Cover images

Put covers in src/assets/work/. JPG, PNG, WebP and SVG all work. Photos and screenshots are resized and converted to AVIF and WebP automatically; SVGs are used as they are. Cards are cropped to 4:3, so a cover of at least 1200×900 pixels looks sharp on every screen.

Two cards sit side by side on wide screens, and every second card sits a little lower. An even number of projects, such as 4 or 6, gives the neatest grid.

Services

src/data/services.yaml. Shown in order, numbered automatically. Three items fill one row.

- id: product-design
  title: Product design
  text: Research, flows, wireframes and polished UI for web and mobile products.

Experience

src/data/experience.yaml. Put the newest role first.

- id: northwind
  period: 2019 — 2022
  role: Lead product designer
  company: Northwind
  text: Grew the design team from one to six and launched the Northwind design system.

Testimonials

src/data/testimonials.yaml. Two quotes sit side by side; more continue in rows of two.

- id: priya
  quote: Noa took a product nobody wanted to touch and made it the one our customers mention first.
  name: Priya Raman
  role: CEO, Ledger

Articles published elsewhere

src/data/writing.yaml lists articles on other sites, such as Medium, dev.to or a company blog. They appear in the Writing section next to your own blog posts, sorted by date, and open in a new tab.

- id: second-visit
  title: Designing for the second visit
  date: 2026-09-12
  url: https://medium.com/@you/designing-for-the-second-visit
  meta: Guest post

meta is optional: use it for the publication name or the reading time.

The id field

Every YAML entry needs an id that is unique within its file. It is never shown on the page; any short word works.

Removing a list

Delete every entry from a list to hide its section. An empty list must be written as [], for example:

[]

Astro then prints a warning that the collection is empty. That’s expected and harmless.

See Sections for more on hiding and reordering sections.