О проекте
Многостраничный сайт для ювелирного производителя: более 30 экранов, насыщенная главная, анимации и pop-up окна, аккуратная адаптивная вёрстка по готовому дизайну (Figma/PSD). Ключевая часть — сложный калькулятор стоимости с учётом валют и металлов.
Что сделал
- Сверстал 30+ экранов с упором на пиксель-перфект и аккуратные состояния; декоративные элементы — через CSS/SVG вместо тяжёлых PNG.{index=1}
- Обошёл «подводные камни» Safari: отказался от
filter: drop-shadowв пользу аккуратныхbox-shadow, чтобы убрать лаги. - Реализовал свою лёгкую библиотеку pop-up окон с закрытием по кнопке «назад» — без лишних зависимостей.
- Backend на Laravel + InertiaJS; админку собрал на Vue 2 с Tailwind: быстрые CRUD-формы, загрузка изображений (drag&drop, превью), удобное редактирование множества полей.
oaicite:4 - Импорт каталога из Excel c разбором полей на стороне PHP; хранение тысяч вариаций в БД и удобный вывод/редактирование в админке.
- Периодическая загрузка курсов валют и золота, формулы для расчёта цен и пересчёт по расписанию.
- Каталог с фильтрами: многотабличные выборки, 3000+ строк по бриллиантам, мультивалютность и корректные загрузочные состояния.
- Интеграция Яндекс.Карт (через токен).
Зачем так
Inertia даёт «живой» интерфейс без перезагрузок и лишней сложности SPA, Tailwind в админке ускоряет сборку форм и состояний, а собственные лёгкие pop-up’ы и отказ от тяжёлых эффектов держат размер бандла и время отклика под контролем. Решение с box-shadow вместо filter устранило узкое место производительности в Safari.
Итог
Стабильный и быстрый проект с гибкой админкой и надёжной ценовой логикой: интерфейс плавный даже при большом объёме графики, данные удобно поддерживать, а расчёты — прозрачные и расширяемые.
Как бы сделал сейчас
Оставил бы связку Laravel 11 + Vue 3 (Vite), админку сделал бы на Filament, а ценовые формулы оформил доменными сервисами с unit-тестами и кешированием результатов; импорты Excel — в очередях, курсы — через планировщик с валидацией источников. Для фронта — прогрессивное улучшение (CSS-контейнер-запросы, WebP)
