跳转到正文
全部项目

律师协会网站

成员名录、业务方向与联系方式——一个不收集访客任何信息的静态网站。

客户
Коллегия адвокатов Курчатовского района Челябинска
年份
2026
技术
nextjs, react, typescript, scss, static-export, caddy

打开项目网站

该协会自 1989 年起在车里雅宾斯克执业。任务并不是为它做广告——律师不得做广告,而是把成员名录、业务方向和联系方式呈现出来,并让读者能够自行核验每位律师的执业资格:凭注册号在车里雅宾斯克州律师公会的名册中查询。 我们提议不做联系表单,协会同意了。没有表单就没有个人数据:网站不会成为个人数据处理者,因而不需要维护处理政策,不需要同意勾选框,不需要向监管机构备案,也没有谁必须保管的密钥。两个电话和一个邮箱即可联系,地址显示在地图上——地图只在访客滚动到它时才加载,而这是整个页面唯一的第三方请求。 协会的全部成员:卡片上是注册号、执业年限和专业方向,每人一个独立页面,名录页上还有按法律部门筛选的过滤器。文案依照第 63 号联邦法和律师职业道德准则撰写——不作评价、不承诺结果、没有客户评价,也不提及任何一桩案件。 网站构建为静态文件,由一台小服务器上的 Caddy 提供:没有数据库,没有 Docker,也没有可能在凌晨三点崩掉的进程。构建在 GitLab CI 中完成,部署是一次 rsync 加切换软链接,回滚就是把同一个软链接指回上一个版本。随滚动而动的东西恰好有四处,项目约定逐一点名:首屏、页眉色调、阅读进度线,以及“关于协会”一段中的「穿越时间」场景。前三处用的是 CSS 滚动时间线;唯独这个场景建立在 GSAP ScrollTrigger 之上,因为它需要测量一个字形才知道往哪里飞,并且要把八段动作挂在同一个时钟上。若系统要求减少动效,场景根本不会被创建,其余部分则归零。
Сетка карточек: уголовное, гражданское, семейное и другие направления

业务方向

每个方向都有独立页面。文案依照第 63 号联邦法和职业道德准则撰写:只说做什么,不说做得多好。

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

律师名录

筛选器会统计每个领域有多少人。每张卡片都标有注册号,读者可据此自行核验执业资格。

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

穿越时间

协会的年龄被从背景中镂空,合影只透过数字显现。此后的一切都由滚动驱动。

Те же цифры, укрупнённые до краёв экрана

页面飞入其中

滚动让数字不断放大,直到其中的空隙填满整屏。场景保持固定,直到播完为止。

Чёрно-белая фотография коллегии, линейка лет остановлена на 1989

1989 — 创立

年份标尺停在第一个日期上,照片仍无色彩。卡片说明了这一切从何开始。

Та же фотография, цвет наполовину вернулся, линейка лет на 2003

2003 — 新的名称

年份继续滚动,色彩一点点回到照片里。两处停顿,两行历史。

Фотография в полном цвете, линейка лет доведена до текущего года

今天

标尺走到当前年份,色彩完全回归。场景以它开始时的东西收尾——那张合影。

Тёмный подвал сайта: полоса лет, телефоны, почта и адрес

如何联系

两个电话、一个邮箱和地图上的地址。没有表单——这是决定而非疏漏:网站不收集任何信息。

律师协会网站

打开项目网站