diff --git a/site/index.html b/site/index.html index 520996b..d4d1404 100644 --- a/site/index.html +++ b/site/index.html @@ -792,7 +792,110 @@ gap: 0; } } + /* ============================================ + TECH STACK ITEMS + ============================================ */ + .tech-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1rem 1.25rem; + background: var(--witch-moon); + border-radius: 12px; + border: 2px solid transparent; + transition: all 0.3s ease; + min-width: 100px; + } + + .tech-item:hover { + transform: translateY(-4px); + border-color: var(--witch-plum); + box-shadow: 0 8px 20px rgba(43, 27, 61, 0.15); + } + + .tech-item i { + font-size: 2.5rem; + } + + .tech-item span { + font-size: 0.9rem; + font-weight: 600; + color: var(--witch-purple); + } + + @media (max-width: 480px) { + .tech-item { + min-width: 80px; + padding: 0.75rem 1rem; + } + + .tech-item i { + font-size: 2rem; + } + + .tech-item span { + font-size: 0.8rem; + } + } + + /* ============================================ + TECH STACK COLLAPSIBLE SECTIONS + ============================================ */ + .tech-category { + border: 2px solid var(--witch-mauve); + border-radius: 12px; + overflow: hidden; + background: rgba(255, 255, 255, 0.3); + } + + .tech-category summary { + padding: 1rem 1.5rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + font-size: 1.1rem; + font-weight: 600; + color: var(--witch-plum); + background: rgba(255, 255, 255, 0.5); + transition: background 0.3s ease; + list-style: none; + } + + .tech-category summary::-webkit-details-marker { + display: none; + } + + .tech-category summary::marker { + display: none; + content: ""; + } + + .tech-category summary .dropdown-icon { + transition: transform 0.3s ease; + font-size: 0.9rem; + } + + .tech-category[open] summary .dropdown-icon { + transform: rotate(90deg); + } + + .tech-category summary:hover { + background: rgba(255, 255, 255, 0.7); + } + + .tech-category-content { + padding: 1.5rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + } + +
Skip to main content @@ -1336,6 +1439,279 @@ })(); + ++ The languages, frameworks, and tools we use to bring your projects to life. +
+ +