Бизнес-сайты

Что внутри

Полный жизненный цикл цифрового товара — от витрины до выдачи файла после оплаты.

• Каталог цифровых товаров и страницы товаров; на главную выводятся последние публикации из базы.
• Личный кабинет: регистрация, вход, восстановление пароля.
• Онлайн-оплата с подписью транзакции (HMAC) и автоматической выдачей файла после покупки.
• Раздел статей (блог) и FAQ, оферта и политика обработки данных.

Архитектура

Серверный рендеринг на PHP с базой MySQL (PDO), без CMS и фреймворков.

• Товары и статьи хранятся в базе, публикация управляется флагом — на сайт попадает только опубликованное.
• Код разнесён на переиспользуемые инклюды (шапка, подвал, попапы) и хелперы навигации.
• Сессии для авторизации, защита служебных страниц и оплаты.

Кастомная админ-панель

Полностью самописная панель управления контентом и продажами: каталог товаров, статьи (публикация и снятие), работа с заказами.

Производительность (PageSpeed 100 / 99)

Главная доведена со 48 до 100 баллов на мобильных и 99 на десктопе.

• Критический CSS встроен в head, шрифты переведены на самохостинг (woff2-сабсеты кириллица + латиница, font-display: optional) — убраны все render-blocking запросы за стилем и Google Fonts.
• Видео переведено на «фасад»: вместо постоянно загружаемого стороннего плеера — лёгкая заглушка, реальный плеер подгружается только по клику. Это сняло основной сторонний JS со старта и резко уронило время блокировки.
• Hero-изображение в WebP с приоритетной загрузкой (preload + fetchpriority); остальные изображения — ленивая загрузка и явные размеры (нулевой сдвиг макета).
• LCP с 8.2 с снижен до быстрого, скрипт с defer.

Доступность и SEO

• Семантический лендмарк main, контраст и доступная навигация — Accessibility 100.
• Keyword-first title, meta description, Open Graph, осмысленная разметка.
• Страница демо в портфолио закрыта от индексации (noindex) — как и остальные демо.

Чем интересен проект

• Самый крупный из бизнес-проектов: полноценная продуктовая площадка с кабинетом, оплатой и админкой — на чистом PHP + MySQL, без CMS.
• 100 баллов PageSpeed на мобильных при насыщенном функционале — производительность не в ущерб возможностям.
• Полный цикл одним человеком: архитектура → бэкенд и база → фронтенд → оплата → админка → SEO → оптимизация → деплой.

Что внутри

Многосекционная структура с акцентом на производственные возможности.

• Hero, блок метрик компании: опыт работы, парк оборудования, выполненные заказы.
• Слайдер оборудования и портфолио выполненных проектов (слайдер на десктопе, грид на мобайле).
• Услуги и типы фрезерных операций с поясняющим видео.
• Модальная форма «Получить расчёт» и анимации появления секций при скролле.

Форма заявки под производство

Главный рабочий элемент — приём заявки с техническими чертежами, а не просто «имя + телефон».

• Загрузка до 10 файлов в производственных форматах (DXF, DWG, PDF, ZIP, изображения, документы), отправка письмом с вложениями.
• Защита от спама в три слоя: серверная арифметическая капча, honeypot и таймер-ловушка против мгновенной отправки ботом.
• Валидация на клиенте и на сервере, отправка через AJAX без перезагрузки страницы.

Девять языков

Сайт полностью переведён на девять языков: английский (основной), русский, немецкий, французский, итальянский, испанский, польский, румынский и сербский.

• У каждого языка свой контент и свой серверный обработчик формы.
• Кастомный переключатель языков с флагами.
• hreflang + x-default по всем девяти версиям.

Производительность

Скорость заложена в архитектуру страницы, а не прикручена постфактум.

• Критический CSS встроен в head — нет render-blocking запроса за внешним стилем.
• Шрифт Inter на самохостинге: woff2-сабсеты (кириллица, латиница, latin-ext), font-display: optional — ноль запросов к Google Fonts и ноль поздней перерисовки.
• Вся графика в WebP; hero отдаётся адаптивно — отдельные версии под десктоп и мобайл с приоритетной загрузкой (preload + fetchpriority).
• Явные width/height на изображениях → нулевой сдвиг макета.
• PageSpeed: 96 на десктопе, 97 на мобильных.

Доступность (Accessibility 100)

• Семантический лендмарк main, aria-метки на интерактивных элементах (бургер, переключатель языков).
• Корректная иерархия заголовков и осмысленные alt-тексты.
• Контраст и фокус-навигация по WCAG.

Чем интересен проект

• Серьёзный B2B-сайт со сложной формой под реальный производственный процесс — приём чертежей в инженерных форматах.
• Полноценная мультиязычность на девять локалей на чистом стеке, без i18n-фреймворков.
• Высокая производительность и доступность при насыщенном интерфейсе со слайдерами и анимациями.
• Полный цикл одним человеком: дизайн → вёрстка → бэкенд формы → локализация → оптимизация → деплой.

Структура и стек

Мультистраничный сайт на чистом HTML/CSS/JS с серверными PHP-инклюдами общих частей.

• Страницы: каталог (главная), «Аукционы», «Автомобили», «Как это работает», «Доставка».
• Общие шапка и подвал вынесены в PHP-инклюды — единая навигация и контакты на всех страницах.
• Дизайн-система на CSS-переменных (цвета, радиусы, единый UI-паттерн), адаптивная вёрстка, бургер-меню и маркетинговый тикер в шапке.

Каталог и фильтр

Каталог автомобилей с карточками: фото, год, пробег, мощность и цена в иенах.

• Клиентский фильтр на ванильном JS — по цене, году, пробегу и мощности, с кнопками «Применить» и «Сбросить».
• Параметры машин зашиты в data-атрибуты карточек, фильтрация мгновенная, без перезагрузки.
• Состояние «по заданным фильтрам ничего не найдено» для пустой выдачи.

Модальные формы заявки

Заявка оставляется через модальные окна («Оставить заявку» в карточке, «Связаться» в шапке).

• Форма имя + телефон с кастомной валидацией и подсказками об ошибках.
• Поле телефона с числовым inputmode и autocomplete для удобства на мобильных.
• Доступный диалог: role=dialog, aria-modal, кнопка закрытия с aria-label, управление фокусом.

Производительность (PageSpeed 99 / 94)

Главная доведена до 99 баллов на десктопе и 94 на мобильных (было 82).

• Все изображения каталога переведены в WebP и ужаты под реальный размер показа — суммарно −78% веса (1.3 МБ → 0.28 МБ).
• LCP-изображение первой карточки грузится приоритетно (preload + fetchpriority), остальные — лениво.
• Явные width/height на всех изображениях — нулевой сдвиг макета.
• Критический CSS встроен в head — убран render-blocking запрос за стилем (−0.9 с).
• Скрипты с defer, чтобы не блокировать парсинг.

Доступность и SEO

• Accessibility 100: скрытые семантические заголовки, aria-labelledby и aria-label на фильтре, навигации и диалогах, контраст по WCAG AA.
• SEO 100: keyword-first title, meta description, canonical, Open Graph; страница открыта для индексации.
• Семантическая разметка: main, корректная иерархия заголовков, осмысленные alt.

Чем интересен проект

• Мультистраничный сайт с дизайн-системой и переиспользуемыми PHP-инклюдами — единый стиль и навигация без CMS.
• Живой клиентский фильтр и доступные модальные формы на чистом JS, без библиотек.
• 100 по доступности и SEO, 99/94 по скорости — аккуратная работа по всем метрикам Lighthouse.
• Полный цикл одним человеком: дизайн → вёрстка → интерактив → оптимизация → SEO.