Перейти к содержимому
Все проекты

Услуги · 2026

Сайт коллегии адвокатов

Состав коллегии, направления помощи и контакты — статический сайт, который ничего не собирает о посетителе.

Клиент
Коллегия адвокатов Курчатовского района Челябинска
Срок
4 недели
Что сделали
Дизайн · Разработка · Контент · Инфраструктура
  • nextjs
  • react
  • typescript
  • scss
  • static-export
  • caddy
01 · Экран

Задача

Показать коллегию и её адвокатов — и ничего не собирать о посетителе.

63-ФЗ

Адвокату реклама запрещена. Поэтому сайт не продвигает, а даёт проверить: статус каждого адвоката читатель находит сам, по реестровому номеру Адвокатской палаты Челябинской области.

Этапы · 4 недели

Как шла работа

  1. Этап 01

    Ограничения

    Реклама адвокату запрещена, и из этого выросли правила для каждого текста и каждого блока.

    • Оценки качества✕ нельзя
    • Обещания результата✕ нельзя
    • Отзывы клиентов✕ нельзя
    • Слова о чужих делах✕ нельзя

  2. Этап 02

    Тексты

    Писали под 63-ФЗ и кодекс профессиональной этики адвоката: что делаем, а не как хорошо.

    Лучшие адвокаты города гарантируют победу в суде

    Адвокаты коллегии помогают на всех этапах — от консультации и подготовки документов до представительства в суде.

    пример правки

  3. Этап 03

    Состав и направления

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

    Состав коллегии: фильтр по отраслям права и карточки адвокатов

  4. Этап 04

    Сцена «Сквозь время»

    Возраст коллегии вырезан в фоне, общий снимок виден только сквозь цифры. Дальше всё решает прокрутка.

    Крупные цифры возраста коллегии, сквозь которые видна фотография

  5. Этап 05

    Разработка

    Статический экспорт Next.js. Три движения на CSS scroll timelines, одна сцена на GSAP.

    /* the header’s tone, without JavaScript */
.header {
  animation: tone linear both;
  animation-timeline: scroll(root);
}

  6. Этап 06

    Выкладка

    GitLab CI собирает, rsync доставляет, симлинк переключает релиз. Откат — тот же симлинк на прошлую версию.

    1. build
    2. rsync
    3. ln -sfn
    4. Caddy

Решение

Формы обратной связи нет

Мы предложили обойтись без неё, и коллегия согласилась. Нет формы — нет персональных данных, и сайт не становится их оператором.

0персональных данных собрано. Осталось то, ради чего приходят.

  • Имя и телефонСтатус оператора ПДн
  • СообщениеТокен, который нужно беречь
  • Согласен на обработку персональных данныхЧекбокс согласия
  • Политика конфиденциальностиПолитика обработки ПДн
  • ОтправитьУведомление в Роскомнадзор
Телефоны
+7 (351) 741-76-81 +7 (351) 741-76-82
Почта
advokatt5561@gmail.com
Адрес
Челябинск, ул. Куйбышева, 55, офис 61

Карта грузится, только когда до неё долистали. Это единственный сторонний запрос на всей странице.

Сцена клиента, прокрученная нашей прокруткой

Сквозь время

  1. Крупные цифры возраста коллегии, сквозь которые просвечивает фотография
    Сквозь времяВозраст коллегии вырезан в фоне, и общий снимок виден только сквозь цифры.
  2. Те же цифры, укрупнённые до краёв экрана
    Страница влетает внутрьПрокрутка укрупняет цифры, пока просвет в них не станет целым экраном.
  3. Чёрно-белая фотография коллегии, линейка лет на 1989
    1989 — основаниеЛинейка лет останавливается на первой дате, снимок ещё без цвета.
  4. Та же фотография, цвет наполовину вернулся, линейка на 2003
    2003 — новое имяГоды прокручиваются дальше, в фотографию понемногу возвращается цвет.
  5. Фотография в полном цвете, линейка доведена до текущего года
    СегодняЛинейка доходит до текущего года, цвет возвращается целиком. Сцена кончается общим снимком.

Детали

То, что легко не заметить

Наведите лупу на экран или выберите пункт в списке.

Спецификация

Из чего собрано и почему

Технологии проекта
Поз.КомпонентГдеПочему
01Next.js · static exportСборкаСайт собирается в статические файлы: ни базы, ни процесса, который может упасть ночью.
02React · TypeScriptИнтерфейсСостав коллегии, фильтр по отраслям права, страница у каждого адвоката.
03SCSSСтилиСтили компонентов лежат рядом с компонентами.
04CSS scroll timelinesДвижение × 3Первый экран, тон шапки и полоса чтения работают без JavaScript.
05GSAP ScrollTriggerДвижение × 1Только сцена «Сквозь время»: ей нужно измерить глиф, чтобы знать, куда лететь, и удержать восемь движений на одних часах.
06Карта · lazyКонтактыГрузится, только когда до неё долистали. Единственный сторонний запрос на странице.
07CaddyСерверОтдаёт статику на небольшом сервере.
08GitLab CI · rsync · symlinkВыкладкаРелиз — rsync и переключение симлинка. Откат — тот же симлинк на предыдущий релиз.

Бюджет движения

Ровно четыре движения

Они названы поимённо в конвенциях проекта. Всё, что сверх списка, в код не попадает.

  • Первый экранCSS
  • Тон шапкиCSS
  • Полоса чтенияCSS
  • Сцена «Сквозь время»GSAP

Релизы

Выкладка и откат — одна команда

/srv/advokaty74/

releases/

  • r01/
  • r02/
  • r03/← current

На сервере нет

  • базы данных
  • Docker
  • процесса, который упадёт ночью

Сайт работает

advokaty74.ru

Открыть сайт проектаВсе проекты