Spaces:
Running
Running
| ```javascript | |
| class TechStack extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| margin: 3rem 0; | |
| } | |
| .tech-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 1.5rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .tech-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 1.5rem; | |
| border-radius: 1rem; | |
| background: rgba(30, 41, 59, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tech-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, #4f46e5, #ec4899); | |
| z-index: -1; | |
| border-radius: 1rem; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .tech-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .tech-item:hover::before { | |
| opacity: 0.5; | |
| } | |
| .tech-icon { | |
| width: 48px; | |
| height: 48px; | |
| object-fit: contain; | |
| filter: drop-shadow(0 0 10px rgba(79, 70, 229, 0.5)); | |
| } | |
| .tech-name { | |
| font-weight: 600; | |
| color: white; | |
| text-align: center; | |
| } | |
| </style> | |
| <div class="tech-grid"> | |
| <div class="tech-item"> | |
| <img src="/tech/react.svg" class="tech-icon" alt="React"> | |
| <span class="tech-name">React</span> | |
| </div> | |
| <div class="tech-item"> |