{
  "html": "<section class='projects'><div class='projects__bg'><span class='projects__blob projects__blob--1'></span><span class='projects__blob projects__blob--2'></span><span class='projects__blob projects__blob--3'></span><span class='projects__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span><span class='projects__particle projects__particle--4'></span><span class='projects__particle projects__particle--5'></span><span class='projects__particle projects__particle--6'></span></div><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 10 10 0 0 0-10-10z'/><path d='M12 8v4l3 3'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для автоматизированного проектирования с использованием нейросетей.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации email-адресов в реальном времени.</p></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #f0fdff 100%); } .projects .projects__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; } .projects .projects__blob--1 { width: 380px; height: 380px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #22d3ee, transparent 70%); animation: projects-blob-float 14s ease-in-out infinite; } .projects .projects__blob--2 { width: 320px; height: 320px; bottom: -100px; right: -80px; background: radial-gradient(circle at 70% 70%, #38bdf8, transparent 70%); animation: projects-blob-float 18s ease-in-out infinite reverse; } .projects .projects__blob--3 { width: 260px; height: 260px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #67e8f9, transparent 70%); animation: projects-blob-float 22s ease-in-out infinite; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.5); opacity: 0.7; } .projects .projects__particle--1 { top: 18%; left: 12%; animation: projects-particle-float 9s ease-in-out infinite; } .projects .projects__particle--2 { top: 70%; left: 22%; width: 6px; height: 6px; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; animation: projects-particle-float 11s ease-in-out infinite 1s; } .projects .projects__particle--3 { top: 30%; right: 15%; width: 10px; height: 10px; background: #06b6d4; box-shadow: 0 0 14px #06b6d4; animation: projects-particle-float 13s ease-in-out infinite 2s; } .projects .projects__particle--4 { bottom: 20%; right: 25%; width: 5px; height: 5px; background: #67e8f9; box-shadow: 0 0 8px #67e8f9; animation: projects-particle-float 8s ease-in-out infinite 0.5s; } .projects .projects__particle--5 { top: 55%; left: 45%; width: 7px; height: 7px; background: #0ea5e9; box-shadow: 0 0 12px #0ea5e9; animation: projects-particle-float 12s ease-in-out infinite 1.5s; } .projects .projects__particle--6 { top: 10%; right: 40%; width: 6px; height: 6px; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: projects-particle-float 10s ease-in-out infinite 3s; } .projects .projects__title { position: relative; background: linear-gradient(90deg, #06b6d4, #38bdf8, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .projects .projects__title::after { content: ''; display: block; width: 80px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, #22d3ee, #38bdf8); box-shadow: 0 0 16px rgba(34, 211, 238, 0.8); animation: projects-underline-pulse 2.5s ease-in-out infinite; } .projects .projects__grid { perspective: 1200px; } .projects .projects__card { position: relative; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, 0.25); transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; animation: projects-card-pulse 4s ease-in-out infinite; } .projects .projects__card::before { content: ''; position: absolute; inset: -1px; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.6), rgba(56, 189, 248, 0.1), rgba(103, 232, 249, 0.6)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .projects .projects__card:hover { transform: translateY(-8px) rotateX(6deg) rotateY(-6deg) scale(1.02); box-shadow: 0 24px 48px rgba(6, 182, 212, 0.25), 0 0 0 1px rgba(34, 211, 238, 0.4); border-color: rgba(34, 211, 238, 0.6); animation-play-state: paused; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { background: linear-gradient(135deg, #e0f7ff, #cffafe); color: #06b6d4; box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6); animation: projects-icon-pulse 3s ease-in-out infinite; transition: transform 0.4s ease, box-shadow 0.4s ease; } .projects .projects__card:hover .projects__icon { transform: translateZ(30px) rotate(-6deg) scale(1.1); box-shadow: 0 0 24px rgba(34, 211, 238, 0.7); } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #06b6d4; } @keyframes projects-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(0.95); } } @keyframes projects-particle-float { 0%, 100% { transform: translate(0, 0); opacity: 0.7; } 50% { transform: translate(20px, -40px); opacity: 1; } } @keyframes projects-underline-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(34, 211, 238, 0.8); transform: scaleX(1); } 50% { box-shadow: 0 0 28px rgba(56, 189, 248, 1); transform: scaleX(1.15); } } @keyframes projects-card-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(6, 182, 212, 0.08); } 50% { box-shadow: 0 8px 32px rgba(34, 211, 238, 0.18); } } @keyframes projects-icon-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); } 50% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } }"
}