Frontmatter Structure
Every project file starts with frontmatter enclosed by---:
Required Fields
These fields must be present in every project file:title
The project name displayed on cards and the project page.Validation: Non-empty string
Schema:
Schema:
z.string()description
A concise summary of the project. Appears on project cards and for SEO.Validation: Non-empty string
Schema:
Format: UseMulti-line:
Schema:
z.string()Format: Use
| for multi-line descriptionsSingle line:publishDate
The project publication date. Used for sorting projects (newest first).Validation: Valid date string
Schema:
Format:
Schema:
z.coerce.date()Format:
YYYY-MM-DD HH:MM:SStags
An array of tags categorizing the project by technology, domain, or type.Validation: Array of strings
Schema:Domain tags:Mixed tags:
Schema:
z.array(z.string())Technology tags:img
Path to the project thumbnail image.Validation: String (path)
Schema:
Format: Path relative to
Schema:
z.string()Format: Path relative to
public/ directory, starting with /Optional Fields
img_alt
Alternative text for the project image (accessibility).Validation: String
Schema:
Best Practice: Always provide for accessibility
Schema:
z.string().optional()Best Practice: Always provide for accessibility
Alt text should describe the image content for screen readers and when images fail to load.
Real-World Examples
Example 1: AudioGPT Project
src/content/work/audiogpt.md
- Multi-line description using
| - Clear, descriptive tags
- Descriptive alt text
- ISO date format
Example 2: VST Plugins Project
src/content/work/vst-plugins.md
- Technical domain tags (DSP, C++)
- Domain-specific description
- Professional image alt text
Example 3: Personal Portfolio Project
src/content/work/portfolio-personal.md
- Mix of technical and conceptual tags
- Recent publication date
- Engaging description
Field Format Reference
Date Formats
Accepted date formats (all converted to JavaScript Date objects):String Formats
Array Formats
Validation Rules
The Zod schema enforces these validation rules:- Must be a non-empty string
- No minimum or maximum length
- Cannot be null or undefined
- Must be a non-empty string
- Can be multi-line
- Cannot be null or undefined
- Must be a valid date string
- Automatically coerced to Date object
- Used for sorting (DESC order)
- Must be an array of strings
- Cannot be empty array
- Each element must be a string
- Must be a string (path)
- Should start with
/assets/ - File must exist in
public/assets/
- Optional field
- Must be a string if provided
- Recommended for accessibility
Common Errors and Solutions
Missing required field
Missing required field
Error:
title: RequiredSolution: Add the missing field to frontmatter:Invalid date format
Invalid date format
Error:
publishDate: Expected date, received stringSolution: Use a valid date format:Tags not an array
Tags not an array
Empty tags array
Empty tags array
Testing Frontmatter
Validate your frontmatter:Next Steps
- Adding Projects - Create new project files
- Content Collections - Understand schema validation
- Building - Build your portfolio for production