Project Title Here

Project Overview

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 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.

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

Subsection Title

This is a level 3 heading (h3) for subsections within a major section. Use h3 to break down h2 sections into smaller parts.

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

Or ordered lists:

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

Images and Media

Images

You can add images with alt text and captions:

For project images, reference them from your project folder:

Code Blocks

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);
}

Key Features

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

Blockquotes

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.

Demo Video

Embed videos using HTML5 video tag:

Technology Stack

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

Tables

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 |

Impact & Results

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:

Gallery

Display multiple images in sequence:

Text Formatting Reference

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

Nested 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

Conclusion

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> component usage for proper navigation tracking. Each major h2 section and its content should be wrapped in <Section title="Your Title"> tags where the title matches your h2 heading text.