booogz.su

Личный статический сайт независимого разработчика игр Тимура Качаева.

Сайт размещён на GitHub Pages и работает без сервера, базы данных, Node.js или сборки. Для локального просмотра достаточно открыть index.html в браузере.

Главный проект сайта — Bubi, яркий 2D-платформер о зелёной птице.

---

Что есть на сайте

• главная страница на русском и английском;
• отдельная страница проекта Bubi на русском и английском;
• карточки проектов на главной;
• светлая и тёмная темы;
• адаптивное меню для телефона;
• анимации появления блоков и индикатор прокрутки;
• Open Graph-превью для ссылок в Telegram, Discord и соцсетях;
• sitemap и robots.txt для поисковых систем.

---

Быстрый старт

Посмотреть сайт локально

Открой двойным кликом файл:

index.html

Это русская главная страница.

Другие страницы:

en.html        — английская главная
bubi.html      — Bubi на русском
bubi-en.html   — Bubi на английском

Для этого сайта не нужны npm, Node.js, сервер или сборка.

Опубликовать изменения

В PowerShell, открытом в папке сайта:

git add .
git commit -m "описание изменения"
git push

GitHub Pages обновит сайт из ветки main.

Если после push на сайте видна старая версия, нажми Ctrl + F5 в браузере.

---

Структура проекта

.
├─ index.html                 # Главная страница — русский
├─ en.html                    # Главная страница — английский
├─ bubi.html                  # Страница Bubi — русский
├─ bubi-en.html               # Страница Bubi — английский
├─ README.md                  # Эта документация
├─ robots.txt                 # Правила для поисковых роботов
├─ sitemap.xml                # Карта страниц сайта
│
├─ css/
│  ├─ style.css               # Подключает основные общие стили
│  ├─ tokens.css              # Цвета, размеры, базовые правила
│  ├─ header.css              # Шапка, меню, переключатель темы
│  ├─ home.css                # Главная страница, карточки, подвал
│  ├─ motion.css              # Анимации появления блоков
│  ├─ theme.css               # Светлая тема
│  ├─ language.css            # Переключатель RU / EN
│  ├─ project-modal.css       # Окно с описанием концептов
│  ├─ hero-art-cta.css        # Кнопка «Подробнее о Bubi»
│  ├─ bubi.css                # Страница Bubi
│  └─ bubi-logo.css           # Оформление логотипа Bubi
│
├─ js/
│  ├─ site-config.js          # Общие настройки языка и анимаций
│  ├─ theme.js                # Переключение светлой/тёмной темы
│  ├─ navigation.js           # Мобильное меню и навигация
│  ├─ scroll-state.js         # Состояние шапки и прогресс прокрутки
│  ├─ section-navigation.js   # Активный пункт меню на главной
│  ├─ reveal.js               # Анимации появления
│  ├─ footer-year.js          # Автоматический текущий год в подвале
│  ├─ projects-data.js        # Все карточки проектов RU / EN
│  ├─ projects-render.js      # Создаёт карточки проектов на главной
│  ├─ project-modal.js        # Открывает окно концепта
│  ├─ enemy-preview.js        # Анимации врагов Bubi
│  └─ bubi.js                 # Интерактивные элементы страницы Bubi
│
└─ assets/
   ├─ brand/                  # Логотипы и favicon
   ├─ site/                   # Аватар и общий баннер
   ├─ projects/
   │  ├─ bubi/                # Обложка, логотип, враги и изображения Bubi
   │  └─ concepts/            # Обложки карточек концептов
   └─ social/                 # Картинки-превью для ссылок

---

Где что менять

Текст главной страницы

Что нужно изменить	Файл
Русская главная	index.html
Английская главная	en.html
Русская страница Bubi	bubi.html
Английская страница Bubi	bubi-en.html

На сайте две полноценные языковые версии. Если меняется важный текст, обычно нужно обновить его и на второй странице.

Карточки проектов

Все карточки на главной находятся в одном файле:

js/projects-data.js

Там для каждого проекта есть:

• название;
• статус;
• краткое описание;
• картинка;
• русский и английский тексты;
• ссылка на страницу либо текст для всплывающего окна.

Добавить новую карточку

В js/projects-data.js скопируй существующий объект проекта и поменяй данные.

Для проекта с отдельной страницей используй:

{
  id: "new-game",
  type: "link",
  image: "assets/projects/concepts/new-game.jpg",
  statusClass: "yellow",
  ru: {
    title: "Новая игра",
    summary: "Короткое описание.",
    status: "В разработке",
    alt: "Описание картинки",
    ariaLabel: "Открыть страницу новой игры",
    href: "new-game.html"
  },
  en: {
    title: "New Game",
    summary: "Short description.",
    status: "In development",
    alt: "Image description",
    ariaLabel: "Open the new game page",
    href: "new-game-en.html"
  }
}

Для идеи без отдельной страницы используй type: "modal" и добавь modalDescription в блоки ru и en.

---

Изображения

Куда класть новые файлы

Тип изображения	Папка
Логотипы и favicon	assets/brand/
Аватар, общий баннер	assets/site/
Bubi: обложки, враги, логотип	assets/projects/bubi/
Идеи и другие проекты	assets/projects/concepts/
Превью для ссылок	assets/social/

Важные текущие файлы

assets/projects/bubi/cover.jpg     — основная обложка Bubi
assets/projects/bubi/logo.webp     — логотип Bubi
assets/site/avatar.webp            — аватарка на главной
assets/site/campfire.webp          — баннер с костром
assets/social/site-og.jpg          — превью главной при отправке ссылки
assets/social/bubi-og.jpg          — превью страницы Bubi при отправке ссылки

После замены картинки проверь путь в HTML или в js/projects-data.js.

---

Цвета и внешний вид

Основные цвета сайта находятся в:

css/tokens.css

Главные переменные:

--accent
--accent2

Светлая тема находится в:

css/theme.css

Обычные правки внешнего вида лучше делать точечно. Не нужно менять сразу несколько CSS-файлов, если задача относится к одному блоку.

---

SEO и превью ссылок

На страницах уже добавлены:

• title и description;
• canonical URL;
• связи RU / EN через hreflang;
• Open Graph для Telegram, Discord и соцсетей;
• Twitter Card;
• robots.txt;
• sitemap.xml.

При отправке ссылки на главную используется:

assets/social/site-og.jpg

При отправке ссылки на Bubi используется:

assets/social/bubi-og.jpg

Изображения для превью лучше делать размером 1200 × 630 px.

---

Кэш браузера

CSS и JavaScript подключаются с версией, например:

<link rel="stylesheet" href="css/style.css?v=8">
<script src="js/projects-data.js?v=1"></script>

Если ты заметно меняешь конкретный CSS или JS-файл, увеличь номер после ?v= на этой странице. Например:

<script src="js/projects-data.js?v=2"></script>

Это помогает браузеру загрузить новую версию файла, а не старую из кэша.

---

Рекомендуемый порядок работы

1. Скопируй папку сайта как резервную копию, если планируется крупная правка.
2. Открой index.html и проверь текущую версию.
3. Внеси изменения или замени файлы из подготовленного архива.
4. Ещё раз открой index.html и bubi.html.
5. Выполни:

git add .
git commit -m "кратко что изменено"
git push

6. Проверь опубликованный сайт и при необходимости обнови страницу через Ctrl + F5.

---

Чего в проекте нет специально

В этом сайте нет:

• CMS или админки;
• базы данных;
• сервера;
• Node.js;
• npm;
• сборки проекта;
• GitHub Actions для публикации.

Это осознанно: сайт должен оставаться простым. Его можно открыть локально, изменить и опубликовать без отдельной настройки окружения.

---

Важно

Перед удалением изображений или CSS/JS-файлов лучше проверить, что они не используются в HTML, CSS или JavaScript. Некоторые файлы могут быть нужны только для отдельной страницы Bubi или английской версии.