<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Yandex.Metrika counter (defer) -->
  <script type="text/javascript"
    defer> (function (m, e, t, r, i, k, a) { m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0]; k.async = 1; k.src = r; a.parentNode.insertBefore(k, a) })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym'); ym(104700560, 'init', { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true }); </script>
  <noscript>
    <div><img src="https://mc.yandex.ru/watch/104700560" style="position:absolute; left:-9999px;" alt="" /></div>
  </noscript> <!-- /Yandex.Metrika counter -->

  <title> Заболоцкий Денис — разработчик сайтов и игр, 3D-визуализация | Denis Zabolotskiy — Web and Game Developer, 3D
    Visualization </title>
  <meta name="description"
    content="Разрабатываю сайты, игры и 3D визуализации. Пишите: @zabolotskiy_d, zabolotskiy.space@yandex.ru">

  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://zabolotskiy.space/">

  <link rel="icon" href="/favicon.ico">





  <!-- Оптимизация подключения -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap">
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap" rel="stylesheet">

  <!-- Importmap -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
      }
    }
  </script>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #000;
      font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    #three-container {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    #text-overlay {
      position: absolute;
      left: 48px;
      bottom: 48px;
      max-width: min(900px, 85vw);
      color: #fff;
      font-weight: 300;
      font-size: clamp(22px, 2.8vw, 36px);
      line-height: 1.25;
      letter-spacing: 0.3px;
      z-index: 20;
    }

    #text-overlay h1 {
      margin: 0 0 8px 0;
      font-size: clamp(26px, 3.2vw, 42px);
      line-height: 1.15;
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    #text-overlay p {
      margin: 4px 0;
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 1s ease, transform 1.2s ease;
    }

    #text-overlay.animate p {
      opacity: 1;
      transform: translateY(0);
    }

    #text-overlay.animate p:nth-child(2) {
      transition-delay: 0.2s;
    }

    #text-overlay.animate p:nth-child(3) {
      transition-delay: 0.6s;
    }

    #text-overlay.animate p:nth-child(4) {
      transition-delay: 0.8s;
    }

    #text-overlay.animate p:nth-child(5) {
      transition-delay: 1.0s;
    }

    #text-overlay strong {
      font-weight: 500;
      color: #ff4d4d;
    }

    #text-overlay a {
      color: #ff4d4d;
      text-decoration: none;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
      font-weight: 400;
      transition: color 0.3s, border-bottom-color 0.3s;
    }

    #text-overlay a:hover {
      color: #ff8888;
      border-bottom-color: rgba(255, 255, 255, 0.6);
    }

    #loading-screen {
      --fade-duration: 1400ms;
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 1000;
      opacity: 1;
      pointer-events: none;
      transition: opacity var(--fade-duration) cubic-bezier(0.08, 0, 0.12, 1);
    }

    #loading-screen.is-hidden {
      opacity: 0.1;
    }

    .visually-offscreen {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>


</head>

<body>
  <div id="three-container"></div>
  <div id="loading-screen" data-fade="1200"></div>

  <div id="text-overlay">
    <h1>Привет, я <strong>Заболоцкий Денис</strong>.</h1>
    <p>Разрабатываю сайты, игры и создаю 3D-визуализации.</p>
    <p>Занимаюсь цифровыми проектами и экспериментами.</p>
    <p>Если интересно — свяжитесь со мной:</p>
    <p>
      <a href="https://t.me/zabolotskiy_d" target="_blank" rel="noopener">@zabolotskiy_d</a>
      <a href="mailto:zabolotskiy.space@gmail.com">zabolotskiy.space@yandex.ru</a><br>
    </p>
  </div>

  <section class="visually-offscreen">
    <h2>Создание сайтов, игр и 3D-визуализаций</h2>
    <p>Разрабатываю веб-сайты и игровые проекты, создаю 3D-сцены и визуализации с использованием современных технологий
      — JavaScript, Three.js и интерактивных интерфейсов.</p>
  </section>

  <script type="module" src="/main.js"></script>

  <script>
    const loading = document.getElementById('loading-screen');
    const overlay = document.getElementById('text-overlay');

    function runFadeOut() {
      const ms = parseInt(loading.dataset.fade, 10) || 1200;
      loading.style.setProperty('--fade-duration', ms + 'ms');
      loading.classList.add('is-hidden');

      const textStartDelay = ms * 0.9;
      setTimeout(() => overlay.classList.add('animate'), textStartDelay);

      loading.addEventListener('transitionend', (e) => {
        if (e.propertyName === 'opacity') loading.style.display = 'none';
      }, { once: true });
    }

    window.addEventListener('scene-ready', () => {
      if (!window.__fadeStarted) {
        window.__fadeStarted = true;
        runFadeOut();
      }
    });

    window.addEventListener('load', () => {
      setTimeout(() => {
        if (!window.__fadeStarted) {
          window.__fadeStarted = true;
          runFadeOut();
        }
      }, 2500);
    });
  </script>
</body>

</html>