Документация проекта

Инструкция по сайту «Эмоциональное путешествие»

Как запустить, править и развивать портфолио-выставку: структура файлов, современные API и чек-лист публикации.

Открыть сайт К запуску

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

historical-website-project/
├── index.html          # главная страница-выставка
├── styles.css          # визуальная система и анимации
├── script.js           # ES module: навигация, залы, форма
├── instruction.html    # эта инструкция
├── README.md           # краткое описание
└── images/
    └── asya-portrait.jpg

Сайт статический: без сборщика и без бэкенда. Форма открывает почтовый клиент через mailto:.

Если HTML «не открывается». Все файлы должны лежать в одной папке historical-website-project. Откройте именно index.html из этой папки (или запустите open-site.bat). Скрипт подключается как обычный defer, без type="module", чтобы страница работала и по file://.

2. Запуск

Вариант A — просто открыть файл

Дважды кликните index.html. Для локальной разработки лучше сервер: модули и некоторые API стабильнее работают по http://.

Вариант B — локальный сервер

npx --yes serve .
# или
python -m http.server 5500

Откройте адрес из терминала (обычно http://localhost:3000 или :5500).

3. Как править контент

Что меняете Где
Тексты разделов, услуги, подход index.html — секции #about … #collaborate
Проекты-экспедиции и ссылки блок #expeditions
Площадки (VK, Дзен, Sostav, блог) блоки .presence-rail и футер
Фото замените images/asya-portrait.jpg (лучше ≥ 800px)
Email формы константа CONTACT_EMAIL в script.js
Цвета и шрифты переменные :root в styles.css
Обложки экспедиций классы .expedition-media--silk / --atlantis
Залы. У каждой секции есть data-hall и data-hall-name — по ним работает индикатор слева. При добавлении раздела скопируйте пару атрибутов и пункт в меню.

4. Современные методы (что уже внедрено)

  1. Обычный script + defer — работает при двойном клике по HTML и через локальный сервер; код разбит на функции с JSDoc.
  2. IntersectionObserver — появление блоков и смена «зала» без тяжёлого scroll-слушателя.
  3. requestAnimationFrame — шапка обновляется не чаще кадра.
  4. Constraint Validation API — checkValidity(), setCustomValidity(), reportValidity().
  5. View Transitions API — плавный переход по якорям, если браузер умеет; иначе — шторка .page-veil.
  6. inert — закрытое мобильное меню не попадает в Tab-порядок.
  7. loading / fetchpriority / decoding — приоритет героя, lazy для второго портрета.
  8. content-visibility — секции-залы рендерятся экономнее при длинной странице.
  9. CSS custom properties — задержки reveal через --reveal-delay, фото экспедиций без inline-style.
  10. matchMedia change — реакция на смену reduced-motion и ширины экрана.

Что можно добавить позже

5. Доступность и анимации

6. Публикация на GitHub Pages

  1. Закоммитьте файлы в репозиторий historical-website-project.
  2. GitHub → Settings → Pages → Source: Deploy from branch main / root.
  3. Сайт откроется как https://asyamendesz-jpg.github.io/historical-website-project/.
  4. Если нужен корень домена — используйте репозиторий username.github.io.
git add .
git commit -m "Publish emotional journey exhibition site"
git push origin main

7. Чек-лист перед показом