«Закрывающий тег» — блог с SVG-анимациями и модальным окном (HTML, CSS, JS)

Ссылка на работу
image
Задача: Сверстать страницу блога. Реализовать сложные SVG-анимации и кастомные эффекты кнопок. Моя роль: Frontend-разработчик. Отвечал за вёрстку, анимации и интерактивность. Что делал: — Сверстал резиновую вёрстку с использованием clamp() для ширины блоков и отступов — Реализовал сложный фоновый градиент (3 слоя: повторяющиеся полосы по горизонтали и вертикали + градиент прозрачности) — Написал SVG-анимации: — Сердце: плавное появление сердцевины и основного тела при :hover, масштабирование при клике, искры через @keyframes — Иконка дискеты в модальном окне — Реализовал кастомные эффекты кнопок: — Псевдоэлемент, заливающий кнопку слева направо при :hover с mix-blend-mode: difference — Box-shadow при :focus-visible — Сверстал модальное окно (тег ) с бэкдропом и закрытием по клику вне — Добавил фильтры для изображений (минимум 7 разных, включая множественные) — Настроил адаптивность (медиазапрос для 375px) — Реализовал лейблы поверх карточек с mix-blend-mode: hard-light Стек: HTML5, CSS3, SVG-анимации, CSS-переменные, , @keyframes, mix-blend-mode, фильтры, clamp(), Figma. Результат: Блог с уникальными анимациями, кастомизацией и высоким уровнем интерактивности. Готовое решение для промо-страниц и блогов.
https://github.com/Kaylapoza/zakrivayuschiy-teg-f