🔄 Data Loading Options
- 📁 Static Data
- 🌐 HTTP API
- 🔀 Hybrid Loading
📁 Static Data Loading
Projects loaded from static JSON/YAML files. Best for:
- Personal portfolios
- Static documentation sites
- Small to medium project collections
- Fast loading and offline support
🎯 Live Projects Available! The interactive Projects component is running live at /projects with real data. See real-time data loading and filtering in action! This demo shows the configuration and usage patterns.
⚡ Component Features
🔍 Search & Filtering
- ✅ Real-time text search across all fields
- ✅ Category-based filtering
- ✅ Tag-based filtering
- ✅ Status filtering (Active, Development, Archived)
- ✅ Featured projects highlighting
🎨 Display Options
- ✅ Grid and list view options
- ✅ Responsive design
- ✅ Customizable card layouts
- ✅ Theme-aware styling
- ✅ Loading states and error handling
⚙️ Configuration Options
Basic Configuration
import Projects from '@site/src/components/Projects';
// Static data example
<Projects
projectsData={staticProjectsData}
enableSearch={true}
enableFiltering={true}
showCategories={true}
gridColumns={3}
/>
// HTTP API example
<Projects
apiEndpoint="/api/projects"
fallbackToStatic={true}
cacheTimeout={300000} // 5 minutes
enableSearch={true}
enableFiltering={true}
/>
// Minimal configuration
<Projects projectsData={projects} />Data Schema (projects.yml)
projects:
- id: "project-id"
name: "Project Name"
description: "Project description"
url: "https://github.com/user/repo"
tags: ["React", "TypeScript"]
category: "library"
featured: true
status: "active"
# ... more fields🔗 Integration & Documentation
Learn more about implementing and customizing the Projects component