Important

This is a level 2 heading (h2) that starts a new major section. IMPORTANT: Wrap each h2 section and its content with <Section> tags for proper navigation tracking.

This is a level 2 heading (h2) that starts a new major section. IMPORTANT: Wrap each h2 section and its content with <Section> tags for proper navigation tracking.

Inline Code

This is a regular paragraph with normal text. You can include bold text for emphasis, italic text for subtle emphasis, and inline code for technical terms or code snippets.

External Link

Here's another paragraph with a link to an external site and some more bold text with nested italic text to show the combination.

Unordered Lists

You can create unordered lists:

• First item in the list
• Second item with bold text
• Third item with code snippet
• Fourth item with a link

Ordered Lists

Or ordered lists:

1. First numbered item
2. Second numbered item with emphasis
3. Third numbered item with italic text
4. Fourth numbered item

Image with Caption

Use <ProjectImage> to wrap images with optional captions:

Image without Caption

For images without captions, you can still use <ProjectImage> for consistent spacing:

Syntax Highlighting

For longer code snippets, use fenced code blocks with syntax highlighting:

// TypeScript code example
interface ProjectMetadata {
  id: string;
  title: string;
  year: number;
}

const project: ProjectMetadata = {
  id: "W00",
  title: "Template Project",
  year: 2025,
};

// JavaScript code example
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

Definition List Pattern

This section demonstrates a definition list pattern using bold text:

• Feature Name: Description of the feature and what it does
• Another Feature: Detailed explanation of this feature's benefits
• Third Feature: How this feature solves a specific problem
• Fourth Feature: Technical implementation or user benefit

Quote Example

This is a blockquote. Use it for testimonials, important callouts, or quoted text from other sources.

Blockquotes can span multiple paragraphs and include formatting too.

Unscalable Design System

The existing design system was fragmented across multiple tools and lacked consistency. Components were duplicated, naming conventions varied, and there was no single source of truth.

Technical Debt

Years of rapid iteration had accumulated significant technical debt, making new feature development slow and error-prone.

Unified Component Library

We built a centralized component library with clear documentation, versioning, and automated testing to ensure consistency across all products.

Incremental Refactoring

Rather than a complete rewrite, we adopted an incremental approach—refactoring components as they were touched, gradually reducing debt while maintaining velocity.

HTML5 Video

Embed videos using HTML5 video tag:

Stack Details

Here's a mixed list with technical details:

• Frontend: React 19, Next.js 15, TypeScript
• Styling: Tailwind CSS 4, CSS Variables
• State Management: React Context API
• Animation: Framer Motion
• Testing: Jest, React Testing Library

Table Example

You can also include tables (if your MDX setup supports them):

| Technology | Purpose | Version | | ------------- | -------------------------- | ------- | | Next.js | Framework | 15.x | | React | UI Library | 19.x | | TypeScript | Type Safety | 5.x | | Tailwind CSS | Styling | 4.x |

Key Outcomes

Use this section to highlight measurable outcomes:

• Adopted by 100+ users in the first month
• Reduced processing time by 60%
• Winner of 2025 Design Award
• Featured in TechCrunch and Product Hunt

Horizontal Rule

You can add visual breaks with horizontal rules:

Multiple Images

Display multiple images in sequence with captions:

Formatting Options

This section shows all inline formatting options:

• Bold text using double asterisks
• Italic text using single asterisks
• Bold and italic using triple asterisks
• Inline code using backticks
• ~~Strikethrough~~ using double tildes
• Link text using brackets and parentheses

Multi-level Lists

You can create nested lists:

1. First main item
   • Nested unordered item
   • Another nested item
     • Even deeper nesting
2. Second main item
   • Nested item with bold
   • Nested item with code

Final Thoughts

End your project documentation with a summary, lessons learned, or next steps. This is your chance to reflect on the project's success and future direction.

Note: This template demonstrates the <Section> and <SubSection> component usage. Each major section should be wrapped in <Section title="Your Title"> tags, and content within each section should be organized using <SubSection title="Label"> for consistent horizontal layouts.