{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title fx-projects-title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card fx-projects-card'><span class='fx-projects-card__glow' aria-hidden='true'></span><div class='projects__icon fx-projects-icon'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><circle cx='5' cy='6' r='2'/><circle cx='19' cy='6' r='2'/><circle cx='5' cy='18' r='2'/><circle cx='19' cy='18' r='2'/><path d='M7 7l3 3'/><path d='M17 7l-3 3'/><path d='M7 17l3-3'/><path d='M17 17l-3-3'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для быстрого проектирования и визуализации нейронных сетей прямо в браузере.</p><span class='fx-projects-card__cta'><span class='fx-projects-card__cta-label'>Открыть проект</span><span class='fx-projects-card__cta-icon' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg></span></span></a><a href='#' class='projects__card fx-projects-card'><span class='fx-projects-card__glow' aria-hidden='true'></span><div class='projects__icon fx-projects-icon'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/><path d='M16 17l2 2 3-3'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации адресов электронной почты с проверкой синтаксиса и домена в реальном времени.</p><span class='fx-projects-card__cta'><span class='fx-projects-card__cta-label'>Открыть проект</span><span class='fx-projects-card__cta-icon' aria-hidden='true'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg></span></span></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; background: #ffffff; } .projects::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.16), transparent 42%), radial-gradient(circle at 82% 78%, rgba(37, 99, 235, 0.14), transparent 46%), radial-gradient(circle at 55% 40%, rgba(103, 232, 249, 0.12), transparent 50%); animation: fx-projects-bg-drift 16s ease-in-out infinite alternate; } .projects::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E\"); background-size: 160px 160px; mix-blend-mode: multiply; animation: fx-projects-noise-reverse 1.4s steps(4) infinite; } .projects .projects__inner { position: relative; z-index: 1; } .projects .fx-projects-title { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); } .projects .fx-projects-title::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 64px; height: 4px; border-radius: 999px; transform: translateX(-50%); background: linear-gradient(90deg, #22d3ee, #38bdf8, #2563eb); background-size: 200% 100%; animation: fx-projects-underline 3s ease-in-out infinite; } .projects .fx-projects-card { position: relative; isolation: isolate; overflow: hidden; border: 2px solid transparent; background-image: linear-gradient(#f7faff, #f7faff), linear-gradient(135deg, #67e8f9, #38bdf8, #2563eb, #22d3ee); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 260% 260%; animation: fx-projects-border-flow 7s linear infinite; } .projects .fx-projects-card:hover { transform: translateY(-6px) scale(1.012); border-color: transparent; box-shadow: 0 22px 48px rgba(37, 99, 235, 0.22); } .projects .fx-projects-card:focus-visible { outline: none; box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #0ea5e9, 0 22px 48px rgba(37, 99, 235, 0.28); } .projects .fx-projects-card__glow { position: absolute; z-index: -1; top: -40%; left: -20%; width: 140%; height: 180%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.28), transparent 55%), radial-gradient(circle at 75% 70%, rgba(37, 99, 235, 0.22), transparent 55%); transition: opacity 0.35s ease; } .projects .fx-projects-card:hover .fx-projects-card__glow { opacity: 1; animation: fx-projects-glow-pulse 3.2s ease-in-out infinite; } .projects .fx-projects-icon { transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; } .projects .fx-projects-card:hover .fx-projects-icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); color: #0284c7; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22); } .projects .fx-projects-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: #2563eb; background: transparent; border: 2px solid #2563eb; border-radius: 999px; transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .projects .fx-projects-card__cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; transition: transform 0.25s ease; } .projects .fx-projects-card__cta-icon svg { width: 18px; height: 18px; } .projects .fx-projects-card:hover .fx-projects-card__cta { color: #ffffff; background: linear-gradient(135deg, #38bdf8, #2563eb); border-color: transparent; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3); transform: translateY(-1px); } .projects .fx-projects-card:hover .fx-projects-card__cta-icon { transform: translateX(4px); } .projects .fx-projects-card:focus-visible .fx-projects-card__cta { color: #ffffff; background: linear-gradient(135deg, #38bdf8, #2563eb); border-color: transparent; } @keyframes fx-projects-bg-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.06); } } @keyframes fx-projects-noise-reverse { 0% { background-position: 0 0; } 25% { background-position: -40px 30px; } 50% { background-position: 30px -50px; } 75% { background-position: -20px -20px; } 100% { background-position: 0 0; } } @keyframes fx-projects-border-flow { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } } @keyframes fx-projects-glow-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes fx-projects-underline { 0%, 100% { background-position: 0% 50%; width: 64px; } 50% { background-position: 100% 50%; width: 96px; } }"
}