{
  "html": "<section class='projects'><div class='projects__blob projects__blob--1'></div><div class='projects__blob projects__blob--2'></div><div class='projects__blob projects__blob--3'></div><div class='projects__particles'><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></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 6v6l4 2'/></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'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></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__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 0; } .projects .projects__blob--1 { width: 400px; height: 400px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); top: -100px; left: -100px; animation: projects-float 12s ease-in-out infinite; } .projects .projects__blob--2 { width: 350px; height: 350px; background: radial-gradient(circle, #38bdf8 0%, transparent 70%); bottom: -80px; right: -80px; animation: projects-float 15s ease-in-out infinite reverse; } .projects .projects__blob--3 { width: 300px; height: 300px; background: radial-gradient(circle, #67e8f9 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: projects-pulse 10s ease-in-out infinite; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; background: #22d3ee; border-radius: 50%; opacity: 0.6; box-shadow: 0 0 10px #22d3ee; } .projects .projects__particle:nth-child(1) { top: 10%; left: 10%; animation: projects-particle-float 8s ease-in-out infinite; } .projects .projects__particle:nth-child(2) { top: 20%; left: 80%; animation: projects-particle-float 10s ease-in-out infinite 1s; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; } .projects .projects__particle:nth-child(3) { top: 70%; left: 15%; animation: projects-particle-float 12s ease-in-out infinite 2s; background: #67e8f9; box-shadow: 0 0 10px #67e8f9; } .projects .projects__particle:nth-child(4) { top: 80%; left: 85%; animation: projects-particle-float 9s ease-in-out infinite 0.5s; } .projects .projects__particle:nth-child(5) { top: 40%; left: 50%; animation: projects-particle-float 11s ease-in-out infinite 1.5s; background: #0ea5e9; box-shadow: 0 0 10px #0ea5e9; } .projects .projects__particle:nth-child(6) { top: 60%; left: 30%; animation: projects-particle-float 13s ease-in-out infinite 2.5s; } .projects .projects__particle:nth-child(7) { top: 30%; left: 70%; animation: projects-particle-float 7s ease-in-out infinite 0.8s; background: #06b6d4; box-shadow: 0 0 10px #06b6d4; } .projects .projects__particle:nth-child(8) { top: 90%; left: 40%; animation: projects-particle-float 14s ease-in-out infinite 3s; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, 0.3); box-shadow: 0 4px 12px rgba(34, 211, 238, 0.1); transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; transform-style: preserve-3d; perspective: 1000px; } .projects .projects__card:hover { box-shadow: 0 20px 40px rgba(34, 211, 238, 0.3), 0 0 20px rgba(34, 211, 238, 0.2); transform: translateY(-8px) rotateX(5deg) rotateY(5deg) scale(1.02); border-color: #22d3ee; } .projects .projects__icon { background: linear-gradient(135deg, #22d3ee, #38bdf8); color: #ffffff; box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); transition: transform 0.3s, box-shadow 0.3s; } .projects .projects__card:hover .projects__icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 0 25px rgba(34, 211, 238, 0.8); } @keyframes projects-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes projects-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; } } @keyframes projects-particle-float { 0%, 100% { transform: translate(0, 0); opacity: 0.6; } 25% { transform: translate(20px, -30px); opacity: 1; } 50% { transform: translate(-10px, -60px); opacity: 0.8; } 75% { transform: translate(-30px, -20px); opacity: 0.4; } }"
}