Сайт-визитка: главная, архитектура, проекты

- Главная: фото, факты, соцсети, форма связи, анимации - Архитектура: карточки проектов и отдельные страницы (Тихий двор, павильон, «Лофт») - Проекты: Aman's World (скриншоты, описание) и хоумлаб - Меню из config.json, шаблон новых страниц, черновики training/work/fixed - Чистый HTML/CSS/JS без сборки, шрифты и картинки локально Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-11-04 16:35:52 +05:00
commit 152f1d60b5
94 changed files with 1517 additions and 0 deletions
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Aman&#x27;s World: Аман Ибраш</title>
+<meta name="description" content="Aman&#x27;s World: 3D-игра с паркуром и гонками, которая запускается прямо в браузере. Неоновый хаб, гонки Sector 3 Run и Ascend Only.">
+<meta name="theme-color" content="#f4f6fb">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="ru_RU">
+<meta property="og:title" content="Aman&#x27;s World: Аман Ибраш">
+<meta property="og:description" content="Aman&#x27;s World: 3D-игра с паркуром и гонками, которая запускается прямо в браузере. Неоновый хаб, гонки Sector 3 Run и Ascend Only.">
+<meta property="og:image" content="https://example.com/og/projects-amans-world.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Aman&#x27;s World: Аман Ибраш">
+<meta name="twitter:description" content="Aman&#x27;s World: 3D-игра с паркуром и гонками, которая запускается прямо в браузере. Неоновый хаб, гонки Sector 3 Run и Ascend Only.">
+<meta name="twitter:image" content="https://example.com/og/projects-amans-world.jpg">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/fonts/onest-cyrillic-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/css/style.css">
+<script src="/js/boot.js"></script>
+</head>
+<body class="doc has-nav">
+<div class="blob blob--a" aria-hidden="true"></div>
+<div class="blob blob--b" aria-hidden="true"></div>
+<nav class="topnav" id="topnav" aria-label="Страницы"></nav>
+
+<main class="page page--wide">
+  <p class="back"><a href="/projects/">← Проекты</a></p>
+  <header class="case-head">
+    <ul class="meta"><li>3D</li><li>в браузере</li><li>только на ПК</li><li>Godot 4</li></ul>
+    <h1>Aman&#x27;s World</h1>
+    <p class="lead">Паркур и гонки в неоновом городе. Запускается прямо в браузере.</p>
+    <div class="actions"><a class="btn btn--primary" href="https://grid.ibrash.duckdns.org/" target="_blank" rel="noopener">Играть</a><p class="note">Работает только на компьютере. Можно играть с геймпадом (Xbox).</p></div>
+  </header>
+
+  <div class="gallery gallery--one">
+      <figure class="shot shot--cover shot--lead">
+        <a href="/img/proj/game-ascend.webp" target="_blank" rel="noopener" aria-label="Открыть крупно: Ascend Only: старт трассы вверх, 13 чекпоинтов"><img src="/img/proj/game-ascend-md.webp" srcset="/img/proj/game-ascend-sm.webp 640w, /img/proj/game-ascend-md.webp 960w, /img/proj/game-ascend.webp 1600w" sizes="(min-width: 62rem) 62rem, calc(100vw - 2.2rem)" width="1600" height="900" alt="Ascend Only: старт трассы вверх, 13 чекпоинтов" fetchpriority="high"></a>
+        <figcaption>Ascend Only: старт трассы вверх, 13 чекпоинтов</figcaption>
+      </figure>
+  </div>
+
+  <ul class="case-stats"><li class="stat"><b data-count="5">5</b><span>порталов в хабе</span></li><li class="stat"><b data-count="8">8</b><span>чекпоинтов, Sector 3 Run</span></li><li class="stat"><b data-count="13">13</b><span>чекпоинтов, Ascend Only</span></li><li class="stat"><b data-count="40">40</b><span>МБ при первом запуске</span></li></ul>
+
+  <section class="case-body">
+    <p class="intro">Игра, в которую можно зайти по ссылке. Без установки и без регистрации.</p>
+    <h2>Неоновый хаб</h2><p>Ты начинаешь в хабе: зал с неоновыми колоннами, вращающейся скульптурой-атомом и порталами на карты. Над гоночными порталами висят таблицы рекордов. Перед входом вводишь ник до 16 символов.</p><h2>Паркур</h2><p>Движение собрано под паркур: бег, прыжок, двойной прыжок, рывок, скольжение, бег по стенам, прыжок от стены и подтягивание на уступы. На трассах лежат полосы-ускорители.</p><h2>Две гоночные трассы</h2><p>Sector 3 Run гонит по вечернему оранжевому городу, на трассе 8 чекпоинтов. Ascend Only ведёт всё выше по фиолетовому ночному городу, там 13 чекпоинтов. Перед стартом нажимаешь R, то есть «готов», а счётчик (0/1) показывает, сколько игроков готово. Время идёт, и побеждает самый быстрый.</p><h2>На чём играть</h2><p>Игра работает только на компьютере, на телефоне она не запустится. Управлять можно клавиатурой и мышью или геймпадом вроде Xbox.</p><h2>Песочница и Backrooms</h2><p>Ещё из хаба можно уйти в песочницу, где просто отрабатываешь движение, и на карту Backrooms.</p><h2>Под капотом</h2><p>Игру я сделал сам на движке Godot 4 и выложил на свой сервер. При первом запуске браузер загружает около 40 МБ, зато потом всё работает быстро.</p>
+  </section>
+
+  <section class="case-block" aria-label="Кадры из игры">
+    <h2 class="block-title">Кадры из игры</h2>
+    <div class="gallery">
+      <figure class="shot">
+        <a href="/img/proj/game-sector3.webp" target="_blank" rel="noopener" aria-label="Открыть крупно: Sector 3 Run: старт трассы, 8 чекпоинтов"><img src="/img/proj/game-sector3-md.webp" srcset="/img/proj/game-sector3-sm.webp 640w, /img/proj/game-sector3-md.webp 960w, /img/proj/game-sector3.webp 1600w" sizes="(min-width: 62rem) 62rem, calc(100vw - 2.2rem)" width="1600" height="900" alt="Sector 3 Run: старт трассы, 8 чекпоинтов" loading="lazy" decoding="async" fetchpriority="low"></a>
+        <figcaption>Sector 3 Run: старт трассы, 8 чекпоинтов</figcaption>
+      </figure>
+      <figure class="shot">
+        <a href="/img/proj/game-hub.webp" target="_blank" rel="noopener" aria-label="Открыть крупно: Хаб: порталы Sandbox, Backrooms, Race и Race 2"><img src="/img/proj/game-hub-md.webp" srcset="/img/proj/game-hub-sm.webp 640w, /img/proj/game-hub-md.webp 960w, /img/proj/game-hub.webp 1280w" sizes="(min-width: 62rem) 62rem, calc(100vw - 2.2rem)" width="1280" height="720" alt="Хаб: порталы Sandbox, Backrooms, Race и Race 2" loading="lazy" decoding="async" fetchpriority="low"></a>
+        <figcaption>Хаб: порталы Sandbox, Backrooms, Race и Race 2</figcaption>
+      </figure>
+      <figure class="shot shot--wide">
+        <a href="/img/proj/game-splash.webp" target="_blank" rel="noopener" aria-label="Открыть крупно: Заставка игры"><img src="/img/proj/game-splash-md.webp" srcset="/img/proj/game-splash-sm.webp 640w, /img/proj/game-splash-md.webp 960w, /img/proj/game-splash.webp 1280w" sizes="(min-width: 62rem) 62rem, calc(100vw - 2.2rem)" width="1280" height="720" alt="Заставка игры" loading="lazy" decoding="async" fetchpriority="low"></a>
+        <figcaption>Заставка игры</figcaption>
+      </figure>
+    </div>
+  </section>
+
+  <aside class="soon">
+    <p class="hello">Готов проверить?</p>
+    <p>Зайди, выбери портал и попробуй пробежать трассу. Перед гонкой не забудь нажать R.</p>
+    <div class="actions"><a class="btn btn--primary" href="https://grid.ibrash.duckdns.org/" target="_blank" rel="noopener">Играть в Aman's World</a></div>
+  </aside>
+</main>
+
+<script src="/js/nav.js" defer></script>
+<script src="/js/count.js" defer></script>
+</body>
+</html>
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Хоумлаб: Аман Ибраш</title>
+<meta name="description" content="Мой домашний сервер и Fedora Linux: Nextcloud, моя игра и эксперименты, на которых я учусь DevOps.">
+<meta name="theme-color" content="#f4f6fb">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="ru_RU">
+<meta property="og:title" content="Хоумлаб: Аман Ибраш">
+<meta property="og:description" content="Мой домашний сервер и Fedora Linux: Nextcloud, моя игра и эксперименты, на которых я учусь DevOps.">
+<meta property="og:image" content="https://example.com/og/projects-homelab.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Хоумлаб: Аман Ибраш">
+<meta name="twitter:description" content="Мой домашний сервер и Fedora Linux: Nextcloud, моя игра и эксперименты, на которых я учусь DevOps.">
+<meta name="twitter:image" content="https://example.com/og/projects-homelab.jpg">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/fonts/onest-cyrillic-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/css/style.css">
+<script src="/js/boot.js"></script>
+</head>
+<body class="doc has-nav">
+<div class="blob blob--a" aria-hidden="true"></div>
+<div class="blob blob--b" aria-hidden="true"></div>
+<nav class="topnav" id="topnav" aria-label="Страницы"></nav>
+
+<main class="page page--wide">
+  <p class="back"><a href="/projects/">← Проекты</a></p>
+  <header class="case-head">
+    <ul class="meta"><li>дома</li><li>Linux</li><li>Fedora</li></ul>
+    <h1>Хоумлаб</h1>
+    <p class="lead">Мой домашний сервер и Linux, на котором я всё делаю.</p>
+  </header>
+
+  <div class="gallery gallery--one">
+    <figure class="shot shot--cover shot--lead">
+      <a href="/img/proj/homelab-cover.svg" target="_blank" rel="noopener" aria-label="Открыть иллюстрацию крупно"><img src="/img/proj/homelab-cover.svg" width="1200" height="630" alt="Иллюстрация: домашний сервер с тремя сервисами" fetchpriority="high"></a>
+    </figure>
+  </div>
+
+  <section class="case-body">
+    <p class="intro">Свой маленький интернет у меня дома.</p>
+    <h2>Что это</h2>
+    <p>Хоумлаб — это мой домашний сервер. Я работаю системным администратором и расту в сторону DevOps, поэтому держу дома место, где можно пробовать всё на настоящем железе.</p>
+    <p>Дома можно спокойно пробовать, ломать и чинить. Так я учусь автоматизации и всему, что окружает современный сервер.</p>
+  </section>
+
+  <section class="case-block" aria-label="Что живёт на сервере">
+    <h2 class="block-title">Что на нём живёт</h2>
+    <div class="tiles">
+      <div class="tile"><h3>Nextcloud</h3><p>Мои файлы и проекты лежат у меня, а не в чужом облаке.</p></div>
+      <a class="tile" href="/projects/amans-world/"><h3>Aman's World</h3><p>Моя браузерная игра запускается с этого сервера.</p><span class="more">Смотреть игру →</span></a>
+      <div class="tile"><h3>DuckDNS</h3><p>Бесплатные адреса, чтобы до домашнего сервера можно было достучаться снаружи.</p></div>
+      <div class="tile"><h3>Этот сайт</h3><p>Он тоже переезжает сюда. Выкладку хочу автоматизировать через CI.</p></div>
+      <div class="tile tile--more"><h3>И много чего ещё</h3><p>Список растёт: я постоянно что-то поднимаю и пробую.</p></div>
+    </div>
+  </section>
+
+  <section class="case-body">
+    <h2>Fedora Linux</h2>
+    <p>На своём компьютере я пользуюсь Fedora Linux. В ней я учусь, работаю и делаю свои проекты, в том числе этот сайт.</p>
+  </section>
+</main>
+
+<script src="/js/nav.js" defer></script>
+<script src="/js/count.js" defer></script>
+</body>
+</html>
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Проекты: Аман Ибраш</title>
+<meta name="description" content="Мои проекты: Aman&#x27;s World, 3D-игра с паркуром и гонками, которая запускается прямо в браузере.">
+<meta name="theme-color" content="#f4f6fb">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="ru_RU">
+<meta property="og:title" content="Проекты: Аман Ибраш">
+<meta property="og:description" content="Мои проекты: Aman&#x27;s World, 3D-игра с паркуром и гонками, которая запускается прямо в браузере.">
+<meta property="og:image" content="https://example.com/og/projects.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Проекты: Аман Ибраш">
+<meta name="twitter:description" content="Мои проекты: Aman&#x27;s World, 3D-игра с паркуром и гонками, которая запускается прямо в браузере.">
+<meta name="twitter:image" content="https://example.com/og/projects.jpg">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/fonts/onest-cyrillic-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/css/style.css">
+<script src="/js/boot.js"></script>
+</head>
+<body class="doc has-nav">
+<div class="blob blob--a" aria-hidden="true"></div>
+<div class="blob blob--b" aria-hidden="true"></div>
+<nav class="topnav" id="topnav" aria-label="Страницы"></nav>
+
+<main class="page page--wide">
+  <header class="page-intro">
+    <p class="hello">Проекты</p>
+    <h1>Что я делаю</h1>
+    <p class="lead">Кроме учёбы и работы я собираю свои штуки. Выбери проект и загляни внутрь.</p>
+  </header>
+
+  <section class="works" aria-label="Проекты">
+    <a class="work work--lead" href="/projects/amans-world/">
+      <div class="pic"><img src="/img/proj/game-ascend-md.webp" srcset="/img/proj/game-ascend-sm.webp 640w, /img/proj/game-ascend-md.webp 960w, /img/proj/game-ascend.webp 1600w" sizes="(min-width: 62rem) 50vw, calc(100vw - 2.2rem)" width="1600" height="900" alt="Aman's World: старт трассы Ascend Only" fetchpriority="high"></div>
+      <div class="info">
+        <ul class="meta"><li>3D</li><li>в браузере</li><li>только на ПК</li><li>Godot 4</li></ul>
+        <h2>Aman's World</h2>
+        <p>Паркур и гонки в неоновом городе. Запускается прямо в браузере, ничего ставить не надо.</p>
+        <span class="more">Смотреть проект <span aria-hidden="true">→</span></span>
+      </div>
+    </a>
+    <a class="work work--lead" href="/projects/homelab/">
+      <div class="pic"><img src="/img/proj/homelab-cover.svg" width="1200" height="630" alt="Иллюстрация: домашний сервер с тремя сервисами" loading="lazy" decoding="async"></div>
+      <div class="info">
+        <ul class="meta"><li>дома</li><li>Linux</li><li>Fedora</li></ul>
+        <h2>Хоумлаб</h2>
+        <p>Мой домашний сервер: файлы, игра и эксперименты. И Linux, на котором я всё делаю.</p>
+        <span class="more">Смотреть проект <span aria-hidden="true">→</span></span>
+      </div>
+    </a>
+  </section>
+
+  <aside class="soon">
+    <p class="hello">Дальше</p>
+    <p>Тут появятся новые проекты, как только доделаю. Заглядывай.</p>
+  </aside>
+</main>
+
+<script src="/js/nav.js" defer></script>
+<script src="/js/count.js" defer></script>
+</body>
+</html>