{
  "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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2L2 7L12 12L22 7L12 2Z' stroke='#2563EB' stroke-width='1.5' stroke-linejoin='round'/><path d='M2 17L12 22L22 17' stroke='#2563EB' stroke-width='1.5' stroke-linejoin='round'/><path d='M2 12L12 17L22 12' stroke='#2563EB' stroke-width='1.5' stroke-linejoin='round'/></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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='4' width='20' height='16' rx='2' stroke='#2563EB' stroke-width='1.5'/><path d='M22 7L13 12L2 7' stroke='#2563EB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации электронных адресов в реальном времени.</p></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 50%, #ffffff 100%); } .projects .projects__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; 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; will-change: transform; } .projects .projects__blob--1 { width: 380px; height: 380px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #2563EB, transparent 70%); animation: projects-blob-float 14s ease-in-out infinite; } .projects .projects__blob--2 { width: 320px; height: 320px; bottom: -120px; right: -80px; background: radial-gradient(circle at 70% 70%, #7c3aed, 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%, #06b6d4, transparent 70%); animation: projects-blob-float 22s ease-in-out infinite; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2563EB; box-shadow: 0 0 12px rgba(37, 99, 235, 0.8); opacity: 0.7; will-change: transform; } .projects .projects__particle--1 { top: 20%; left: 10%; animation: projects-particle-float 9s ease-in-out infinite; } .projects .projects__particle--2 { top: 70%; left: 20%; width: 6px; height: 6px; background: #7c3aed; box-shadow: 0 0 12px rgba(124, 58, 237, 0.8); animation: projects-particle-float 11s ease-in-out infinite 1s; } .projects .projects__particle--3 { top: 30%; left: 80%; width: 10px; height: 10px; background: #06b6d4; box-shadow: 0 0 14px rgba(6, 182, 212, 0.8); animation: projects-particle-float 13s ease-in-out infinite 2s; } .projects .projects__particle--4 { top: 80%; left: 70%; animation: projects-particle-float 10s ease-in-out infinite 0.5s; } .projects .projects__particle--5 { top: 50%; left: 45%; width: 5px; height: 5px; background: #7c3aed; box-shadow: 0 0 10px rgba(124, 58, 237, 0.8); animation: projects-particle-float 12s ease-in-out infinite 1.5s; } .projects .projects__particle--6 { top: 15%; left: 60%; width: 7px; height: 7px; background: #06b6d4; box-shadow: 0 0 12px rgba(6, 182, 212, 0.8); animation: projects-particle-float 8s ease-in-out infinite 2.5s; } .projects .projects__title { position: relative; background: linear-gradient(90deg, #1e293b, #2563EB, #7c3aed, #1e293b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: projects-title-shine 6s linear 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(255, 255, 255, 0.7); transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, background 0.4s; overflow: hidden; } .projects .projects__card::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.6), rgba(124, 58, 237, 0.6), rgba(6, 182, 212, 0.6)); opacity: 0; transition: opacity 0.4s; z-index: -1; filter: blur(12px); } .projects .projects__card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%); transform: translateX(-100%) rotate(0deg); transition: transform 0.8s; pointer-events: none; } .projects .projects__card:hover { transform: translateY(-6px) rotateX(6deg) rotateY(-6deg) scale(1.02); box-shadow: 0 24px 48px rgba(37, 99, 235, 0.25), 0 0 0 1px rgba(37, 99, 235, 0.15); background: rgba(255, 255, 255, 0.75); } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__card:hover::after { transform: translateX(100%) rotate(0deg); } .projects .projects__icon { position: relative; transition: transform 0.4s, box-shadow 0.4s; animation: projects-icon-pulse 3s ease-in-out infinite; } .projects .projects__card:hover .projects__icon { transform: translateZ(30px) scale(1.1) rotate(-6deg); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15), 0 0 24px rgba(37, 99, 235, 0.4); } .projects .projects__card-title { transition: color 0.3s; } .projects .projects__card:hover .projects__card-title { color: #2563EB; } @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.3; } 50% { transform: translate(20px, -40px); opacity: 1; } } @keyframes projects-title-shine { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes projects-icon-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } }"
}