🔴 Live Demo
🎯 Live Portfolio Available! The interactive portfolio is running live at /portfolio. Visit the live page to explore the full portfolio experience with real data and dynamic features.
⚙️ Portfolio Configuration
Data Structure
// config/portfolioData.yml
projects:
- id: project-1
title: Modern Web Application
description: Full-stack application with React and Node.js
category: Web Development
technologies: [React, TypeScript, Node.js, MongoDB]
image: /img/projects/project1.jpg
links:
- type: demo
url: https://demo.example.com
- type: github
url: https://github.com/user/project
categories:
- Web Development
- Mobile Apps
- Data Science
- Machine Learning✨ Key Features
🎯 Project Filtering
- Category-based filtering
- Technology stack search
- Interactive buttons
- Real-time results
🖼️ Visual Display
- Project thumbnails
- Technology badges
- Responsive grid layout
- Hover animations
🔗 Project Links
- Demo links
- Source code access
- Documentation
- External resources
💻 Usage Examples
Basic Implementation
// In your portfolio page
import Portfolio from '@site/src/components/Portfolio';
export default function PortfolioPage() {
return (
<Layout title='My Portfolio'>
<div className='container'>
<h1>My Projects</h1>
<Portfolio />
</div>
</Layout>
);
}🔗 Related Resources
Experience the live portfolio and learn about configuration