Skip to content
All projects

Services · 2026

A site for a bar collegium

The roster, the areas of practice and the contacts — a static site that collects nothing about its visitor.

Client
Коллегия адвокатов Курчатовского района Челябинска
Time taken
4 weeks
What we did
Design · Development · Content · Infrastructure
  • nextjs
  • react
  • typescript
  • scss
  • static-export
  • caddy
01 · Screen

The brief

Show the collegium and its advocates — and collect nothing about the visitor.

63-ФЗ

An advocate may not be advertised. So the site does not promote; it lets the reader check: each advocate’s standing can be looked up by their number in the register of the Chelyabinsk region’s chamber of advocates.

Stages · 4 weeks

How the work went

  1. Stage 01

    Constraints

    Advertising an advocate is forbidden, and every text and every block grew out of that rule.

    • Judgements of quality✕ not allowed
    • Promises of an outcome✕ not allowed
    • Client testimonials✕ not allowed
    • A word about anyone’s case✕ not allowed

  2. Stage 02

    Copy

    Written against 63-ФЗ and the advocates’ code of professional ethics: what we do, not how well.

    The best advocates in town guarantee a win in court

    The collegium’s advocates help at every stage — from the first consultation and the paperwork to representation in court.

    an example edit

  3. Stage 03

    Roster and practice

    Registry number, years of standing and specialisation on the card. A page for each advocate, a filter by area of law.

    The roster: a filter by area of law and cards of the advocates

  4. Stage 04

    The «Through time» scene

    The collegium’s age is cut out of the background, and the group photo shows only through the numbers. The scroll does the rest.

    The collegium’s age in large numerals, with a photograph showing through them

  5. Stage 05

    Development

    A static Next.js export. Three motions on CSS scroll timelines, one scene on GSAP.

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

  6. Stage 06

    Deploy

    GitLab CI builds, rsync delivers, a symlink switches the release. Rollback is the same symlink pointed at the previous one.

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

A decision

There is no contact form

We proposed doing without one, and the collegium agreed. No form, no personal data — and the site never becomes their operator.

0pieces of personal data collected. What is left is what people come for.

  • Name and phoneData operator status
  • MessageA token somebody must guard
  • I consent to the processing of my personal dataA consent box
  • Privacy policyA processing policy to keep true
  • SendA filing with the regulator
Phones
+7 (351) 741-76-81 +7 (351) 741-76-82
Email
advokatt5561@gmail.com
Address
Chelyabinsk, 55 Kuybysheva St, office 61

The map loads only when somebody scrolls that far. It is the single third-party request on the page.

The client’s scene, played by our scroll

Through time

  1. The collegium’s age in large numerals with a photo showing through
    Through timeThe collegium’s age is cut out of the background; the photo shows only through the numbers.
  2. The same numerals, enlarged to the edges of the screen
    The page flies inThe scroll enlarges the numbers until the gap in them is the whole screen.
  3. A black-and-white photo of the collegium, the ruler at 1989
    1989 — foundedThe ruler of years stops at the first date; the photo is still without colour.
  4. The same photo, colour half returned, the ruler at 2003
    2003 — a new nameThe years roll on, and colour slowly returns to the photograph.
  5. The photo in full colour, the ruler at the current year
    TodayThe ruler reaches the current year and the colour is back in full. The scene ends where it began.

Details

What is easy to miss

Move the loupe over a screen, or pick an item from the list.

Specification

What it is built from, and why

The project’s technology
No.ComponentWhereWhy
01Next.js · static exportBuildThe site builds to static files: no database, nothing running that can fall over at night.
02React · TypeScriptInterfaceThe roster, the filter by area of law, a page for each advocate.
03SCSSStylesEach component’s styles live next to it.
04CSS scroll timelinesMotion × 3The first screen, the header’s tone and the reading line run without JavaScript.
05GSAP ScrollTriggerMotion × 1Only the «Through time» scene: it has to measure a glyph to know where to fly and hold eight moves on one clock.
06Map · lazyContactsLoads only when somebody scrolls that far. The single third-party request on the page.
07CaddyServerServes the static files from a small server.
08GitLab CI · rsync · symlinkDeployA release is an rsync and a symlink switch. A rollback is the same symlink, pointed back.

Motion budget

Exactly four motions

The project’s conventions name them one by one. Anything beyond the list does not get into the code.

  • First screenCSS
  • The header’s toneCSS
  • Reading lineCSS
  • The «Through time» sceneGSAP

Releases

Deploy and rollback are one command each

/srv/advokaty74/

releases/

  • r01/
  • r02/
  • r03/← current

Not on the server

  • a database
  • Docker
  • a process to fall over at night

The site is live

advokaty74.ru

Open the project siteAll projects