Дом Галеева
Личный лендинг-приглашение с фирменной canvas-гирляндой
Проблема
Обычное «го сегодня» в чате теряется за десять минут. Нужен был повод, который выглядит серьёзнее одного сообщения — свой адрес, своя атмосфера, кнопка «скопировать адрес» вместо диктовки по буквам.
Задача
Без бюджета, без клиента и без дедлайна, кроме самого вечера, собрать лендинг-приглашение в конкретное место конкретным вечером — и сделать это так, чтобы не стыдно было прислать ссылку.
Решение
Тёплый ночной монохром вместо очередного фиолетового градиента. Единственная анимация первого экрана — фирменный эффект: canvas-гирлянда из разноцветных лампочек и тканевых флажков с провисающей нитью, твинклом и глянцевыми бликами, уважающая prefers-reduced-motion.
Текст — от первого лица, без венью-маркетинга: не «атмосферные огни манят вас», а прямой довод — люди, музыка, алкоголь. Отдельная секция-агитация «сначала по одной» — про традицию собраться перед выходом.
Реальные адрес, часы работы, телефон и карты — никаких заглушек. Кнопка «Скопировать адрес» на Clipboard API — не нужно передиктовывать адрес голосом в компании.
Мой вклад
Полный цикл соло-разработки: дизайн-направление, вёрстка, canvas-анимация, сервер, домен, HTTPS и деплой — без единого внешнего подрядчика или библиотеки.
Архитектура
- Чистый HTML/CSS/JS без сборки и фреймворков — сайт открывается напрямую, без этапа npm install.
- Гирлянда рисуется на отдельном canvas-слое поверх DOM: физика провисания нити и твинкл считаются в requestAnimationFrame, эффект отключается при prefers-reduced-motion.
- Деплой — Timeweb Cloud (Ubuntu 24.04) → nginx → статика в /var/www/gogaleeva/, домен на DuckDNS, HTTPS через Let's Encrypt/certbot с автопродлением, обновления — rsync без даунтайма.
Что было непросто
Живая анимация, которая не мешает читать
Гирлянда должна была выглядеть живой, но не перетягивать внимание с текста поверх неё — плотность частиц и скорость твинкла подбирались вручную, кадр за кадром, на реальном экране телефона.
Прод-инфраструктура для однодневного личного проекта
HTTPS с автопродлением и деплой без даунтайма — обычно оверинжиниринг для лендинга на один вечер. Здесь это было осознанным решением: ссылку отправляют друзьям, и она должна открываться так же надёжно, как у клиентского проекта.
Результат
Сайт задеплоен и жив, исходники — в публичном репозитории на GitHub. Полный цикл соло-разработки: дизайн-направление → вёрстка → canvas-анимация → сервер → домен → HTTPS → деплой.