/* Styles for the project cards */
.project-card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
margin: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.project-card img {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 5px;
}
.project-card h2 {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.project-card p {
font-size: 14px;
margin-top: 5px;
}
.project-card a {
display: block;
margin-top: 10px;
}
// JavaScript code for filtering projects by category
const filterBtns = document.querySelectorAll('.filter-btn');
const projectCards = document.querySelectorAll('.project-card');
filterBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
const category = e.target.getAttribute('data-category');
projectCards.forEach(card => {
if (category === 'all' || card.getAttribute('data-category') === category) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
