class CustomSkills extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
Frontend
- React
- Vue.js
- Svelte
- Next.js
- Nuxt.js
- TypeScript
- Tailwind
- SCSS
Backend
- Node.js
- Express
- Python
- Django
- PostgreSQL
- MongoDB
- REST APIs
- GraphQL
DevOps & Cloud
- AWS
- Azure
- GCP
- Docker
- Kubernetes
- CI/CD
- GitHub Actions
- Terraform
`;
}
initFilter() {
const filterBtns = this.shadowRoot.querySelectorAll('.filter-btn');
const skillCards = this.shadowRoot.querySelectorAll('.skill-card');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
const filter = btn.dataset.filter;
// Update active button
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Filter cards
skillCards.forEach(card => {
if (filter === 'all' || card.dataset.category === filter) {
card.classList.remove('hidden');
card.style.animation = 'fadeIn 0.5s ease forwards';
} else {
card.classList.add('hidden');
}
});
});
});
}
}
customElements.define('custom-skills', CustomSkills);