Project Title Here

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

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

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.

Embed videos using HTML5 video tag:

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 |

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:

Display multiple images in sequence:

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

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.